/* ============================================================
   29-Side-by-Side — Vibe Code News
   Bilingual dual-column reader
   Cream / academic palette. Heebo right (Hebrew), Inter left (English).
   No neon. No cyberpunk. No neomorphism.
   ============================================================ */

:root {
  /* Cream paper palette */
  --paper:        #faf6ed;
  --paper-soft:   #f4ede0;
  --paper-edge:   #ede2cf;
  --ink:          #1d1a16;
  --ink-soft:     #4b443c;
  --ink-faint:    #8a8275;
  --rule:         #d8cdb7;
  --rule-soft:    #e6dcc4;

  /* Academic accent (subtle teal-blue, NO neon) */
  --accent:       #2b5f6a;
  --accent-soft:  #b6cdd0;
  --accent-warm:  #a36336;
  --accent-rose:  #a04b50;

  /* Language toggle */
  --lang-he:      #1d1a16;
  --lang-en:      #1d1a16;
  --lang-bg:      #ffffff;
  --lang-active:  #1d1a16;
  --lang-inactive:#8a8275;

  /* Chat skins */
  --skin-wa-bg:    #ece5dd;
  --skin-wa-out:   #dcf8c6;
  --skin-wa-in:    #ffffff;
  --skin-wa-accent:#075e54;
  --skin-wa-dot:   #25d366;

  --skin-tg-bg:    #e7eef5;
  --skin-tg-out:   #c8e1f0;
  --skin-tg-in:    #ffffff;
  --skin-tg-accent:#2aabee;
  --skin-tg-dot:   #2aabee;

  --skin-ms-bg:    #eef0f3;
  --skin-ms-out:   #b7d6ff;
  --skin-ms-in:    #ffffff;
  --skin-ms-accent:#7b68ee;
  --skin-ms-dot:   #ff5e7e;

  /* Urgent */
  --urgent-bg:     #fbe6e1;
  --urgent-text:   #8a2c20;

  /* Layout */
  --pad:           18px;
  --col-gap:       22px;
  --max-w:         1320px;
  --header-h:      56px; /* POLISHED: tighter */
  --chat-h:        84px; /* POLISHED: less huge */
  --chat-h-mobile: 100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Heebo', 'Arial Hebrew', 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  /* Push content below the fixed chat bar */
  padding-top: calc(var(--chat-h) + var(--header-h) + 6px);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font: inherit; cursor: pointer; }

/* ─── Page header ─────────────────────────────────────────── */
.page-header {
  position: fixed;
  top: var(--chat-h);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--pad);
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0;
}
.brand-text { line-height: 1.15; }
.brand-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
}
.brand-sub {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.page-title {
  flex: 1;
  text-align: center;
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0;
}
.page-title-meta {
  display: inline-block;
  margin-inline-start: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  vertical-align: middle;
}

.page-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.page-nav a:hover {
  background: var(--paper-soft);
  text-decoration: none;
  color: var(--ink);
}
.page-nav a.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ─── Chat — top horizontal bar (mandatory upper portion) ─── */
#chat-host {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 4px 18px rgba(28, 22, 12, 0.06);
}
.chat-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: var(--chat-h);
  padding: 10px var(--pad);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

/* Brand cluster */
.chat-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 16px;
  border-inline-end: 1px solid var(--rule);
  flex-shrink: 0;
}
.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.chat-head-info { line-height: 1.25; }
.chat-head-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.chat-head-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 0 0 currentColor;
  animation: livePulse 2.2s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(163, 99, 54, 0.4); }
  60%  { box-shadow: 0 0 0 8px rgba(163, 99, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(163, 99, 54, 0); }
}

/* Messages strip */
.chat-messages-strip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.chat-messages-strip::-webkit-scrollbar { height: 4px; }
.chat-messages-strip::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }

.bubble-strip {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  font-size: 13px;
  line-height: 1.4;
  position: relative;
}
.bubble-strip.urgent {
  background: var(--urgent-bg);
  border-color: var(--urgent-text);
  color: var(--urgent-text);
}
.bubble-strip-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.bubble-strip.urgent .bubble-strip-tag { color: var(--urgent-text); }
.bubble-strip-text {
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bubble-strip-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.urgent-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  background: var(--urgent-text);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
}

/* Typing indicator — three dots */
.typing-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  flex-shrink: 0;
}
.typing-strip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: typingDot 1.2s infinite ease-in-out;
}
.typing-strip-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-strip-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* Input cluster */
.chat-input-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--rule);
  flex-shrink: 0;
}
.chat-input-field {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-faint);
  min-width: 160px;
  max-width: 240px;
}
.chat-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
}
.chat-send-btn:hover { background: var(--accent); border-color: var(--accent); }

/* Skin switcher cluster */
.chat-skin-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--rule);
  flex-shrink: 0;
}
.chat-skin-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-inline-end: 4px;
}
.skin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.skin-btn:hover { background: var(--paper-soft); }
.skin-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* HE/EN language toggle — bilingual specificity */
.chat-lang-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--rule);
  flex-shrink: 0;
}
.chat-lang-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-inline-end: 4px;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-btn:hover { background: var(--paper-soft); }
.lang-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Skin-specific palette swaps (W/T/M) */
.chat-bar.skin-wa {
  --paper:        #faf6ed;
  --paper-soft:   #ece5dd;
  --rule:         #d8cdb7;
  --rule-soft:    #e6dcc4;
  --ink:          #1d1a16;
  --ink-soft:     #4b443c;
  --ink-faint:    #8a8275;
}
.chat-bar.skin-wa .bubble-strip {
  background: var(--skin-wa-out);
  border-color: #c4dcb1;
}
.chat-bar.skin-wa .typing-strip { background: #e3dccc; }
.chat-bar.skin-wa .chat-avatar  { background: var(--skin-wa-accent); }
.chat-bar.skin-wa .skin-btn.active { background: var(--skin-wa-accent); border-color: var(--skin-wa-accent); }
.chat-bar.skin-wa .live-dot     { background: var(--skin-wa-dot); }
.chat-bar.skin-wa .lang-btn.active { background: var(--skin-wa-accent); border-color: var(--skin-wa-accent); }

.chat-bar.skin-tg {
  --paper:        #faf6ed;
  --paper-soft:   #e7eef5;
  --rule:         #cfdde7;
  --rule-soft:    #dee9f1;
  --ink:          #18222d;
  --ink-soft:     #41566b;
  --ink-faint:    #7e93a7;
}
.chat-bar.skin-tg .bubble-strip {
  background: var(--skin-tg-out);
  border-color: #b0cce0;
}
.chat-bar.skin-tg .typing-strip { background: #d4e3ed; }
.chat-bar.skin-tg .chat-avatar  { background: var(--skin-tg-accent); }
.chat-bar.skin-tg .skin-btn.active { background: var(--skin-tg-accent); border-color: var(--skin-tg-accent); }
.chat-bar.skin-tg .live-dot     { background: var(--skin-tg-dot); }
.chat-bar.skin-tg .lang-btn.active { background: var(--skin-tg-accent); border-color: var(--skin-tg-accent); }

.chat-bar.skin-ms {
  --paper:        #faf6ed;
  --paper-soft:   #f0ecf8;
  --rule:         #d8d1e3;
  --rule-soft:    #e6dff0;
  --ink:          #21183a;
  --ink-soft:     #4f4571;
  --ink-faint:    #8a82a6;
}
.chat-bar.skin-ms .bubble-strip {
  background: var(--skin-ms-out);
  border-color: #c2b9ec;
}
.chat-bar.skin-ms .typing-strip { background: #ddd6f0; }
.chat-bar.skin-ms .chat-avatar  {
  background: linear-gradient(135deg, #7b68ee 0%, #5ea1ff 60%, #ff5e7e 100%);
}
.chat-bar.skin-ms .skin-btn.active {
  background: linear-gradient(135deg, #7b68ee 0%, #5ea1ff 60%, #ff5e7e 100%);
  border-color: transparent;
}
.chat-bar.skin-ms .live-dot     { background: var(--skin-ms-dot); }
.chat-bar.skin-ms .lang-btn.active {
  background: linear-gradient(135deg, #7b68ee 0%, #5ea1ff 60%, #ff5e7e 100%);
  border-color: transparent;
}

/* ─── Welcome band (index) ────────────────────────────────── */
.welcome-band {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  padding: 22px var(--pad) 8px; /* POLISHED: tighter */
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: stretch;
}
.welcome-band::before {
  content: '';
  width: 1px;
  background: var(--rule);
  grid-column: 2 / 3;
}
.lang-cell {
  padding: 8px 24px 16px;
  position: relative;
}
.lang-cell.lang-he { grid-column: 3 / 4; }
.lang-cell.lang-en { grid-column: 1 / 2; }
.lang-cell-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lang-cell-h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 26px; /* POLISHED: less huge */
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.lang-cell-p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 10px;
  max-width: 56ch;
}
.lang-cell.lang-en .lang-cell-p {
  font-family: 'Inter', sans-serif;
}

/* ─── Dual stage sections ─────────────────────────────────── */
.dual-stage {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px var(--pad) 80px;
}
.dual-section {
  margin-top: 36px;
}
.dual-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.dual-section-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.dual-section-title .he-label,
.dual-section-title .en-label {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
.dual-section-title .en-label {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.005em;
}
.dual-section-title .he-label::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--ink-faint);
  border-radius: 50%;
  margin-inline-start: 12px;
  vertical-align: middle;
}
.dual-section-meta {
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.dual-section-meta .dot {
  color: var(--rule);
}

/* Article/news row — dual side-by-side */
.dual-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  margin: 0 0 12px; /* POLISHED: tighter */
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.dual-row::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}
.dual-cell {
  padding: 14px 18px; /* POLISHED: tighter */
  min-width: 0;
}
.dual-cell.lang-he {
  grid-column: 3 / 4;
  border-inline-start: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 100%);
}
.dual-cell.lang-en {
  grid-column: 1 / 2;
  background: var(--paper);
}
.dual-cell.lang-en .dual-cell-body {
  font-family: 'Inter', sans-serif;
  text-align: left;
}

.dual-cell-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dual-cell-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.dual-cell-cat {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dual-cell-urgency {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dual-cell-urgency.breaking {
  background: var(--urgent-text);
  color: var(--paper);
}
.dual-cell-urgency.high {
  background: var(--accent-warm);
  color: var(--paper);
}
.dual-cell-urgency.normal {
  background: var(--paper-soft);
  color: var(--ink-soft);
}

.dual-cell-h {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 18px; /* POLISHED: tighter */
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.dual-cell.lang-en .dual-cell-h {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}

.dual-cell-dek {
  font-size: 13.5px; /* POLISHED: tighter */
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.dual-cell.lang-en .dual-cell-dek {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

.dual-cell-body {
  font-size: 13.5px; /* POLISHED: tighter */
  line-height: 1.6;
  color: var(--ink);
}
.dual-cell.lang-en .dual-cell-body {
  font-family: 'Inter', sans-serif;
}
.dual-cell-body p {
  margin: 0 0 8px;
}

.dual-cell-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-size: 12px;
  color: var(--ink-faint);
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
}
.dual-cell-meta strong { color: var(--ink); font-weight: 600; }
.dual-cell-meta .sep { color: var(--rule); }

.dual-cell-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dual-cell-source::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Featured grid (index) — 2-column of featured items */
.dual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.dual-grid .dual-row {
  margin: 0;
}

/* Article toolbar */
.article-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 14px;
  margin-top: 12px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 12px;
}
.article-counter {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.article-counter strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--ink);
}
.article-counter[dir="ltr"] {
  font-family: 'Inter', sans-serif;
}

.articles-host {
  display: block;
}

/* Language-only visibility (driven by JS) */
body.lang-only-he .dual-cell.lang-en,
body.lang-only-he .lang-cell.lang-en,
body.lang-only-he .en-label,
body.lang-only-he [dir="ltr"][lang="en"] { display: none !important; }
body.lang-only-en .dual-cell.lang-he,
body.lang-only-en .lang-cell.lang-he,
body.lang-only-en .he-label,
body.lang-only-en [dir="rtl"][lang="he"]:not(.lang-btn):not(.bubble-strip-text):not(.bubble-strip-tag):not(.bubble-strip-time):not(.urgent-badge) { display: none !important; }

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .typing-strip-dot,
  .chat-messages-strip {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --chat-h: var(--chat-h-mobile);
  }
  .page-header {
    flex-wrap: wrap;
    height: auto;
    padding: 8px var(--pad);
    gap: 10px;
  }
  .page-title { font-size: 18px; order: 3; width: 100%; text-align: start; }
  .brand-sub { display: none; }

  .chat-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px var(--pad);
    gap: 8px;
  }
  .chat-brand { border-inline-end: none; padding-inline-end: 0; }
  .chat-input-strip { border-inline-start: none; padding-inline-start: 0; }
  .chat-skin-strip { border-inline-start: none; padding-inline-start: 0; }
  .chat-lang-strip { border-inline-start: none; padding-inline-start: 0; }
  .chat-messages-strip { width: 100%; padding: 0; }

  body { padding-top: calc(var(--chat-h) + var(--header-h) + 24px); }

  .welcome-band {
    grid-template-columns: 1fr;
    padding-top: 16px;
  }
  .welcome-band::before { display: none; }
  .lang-cell.lang-he,
  .lang-cell.lang-en { grid-column: auto; padding: 12px 0; }
  .lang-cell-h1 { font-size: 24px; }

  .dual-row {
    grid-template-columns: 1fr;
  }
  .dual-row::before { display: none; }
  .dual-cell.lang-he {
    grid-column: auto;
    border-inline-start: none;
    border-bottom: 1px solid var(--rule);
  }
  .dual-cell.lang-en {
    grid-column: auto;
  }
  .dual-cell-h { font-size: 18px; }
}

@media (max-width: 560px) {
  :root { --pad: 14px; }
  .lang-cell-h1 { font-size: 22px; }
  .dual-cell { padding: 14px 16px; }
  .dual-cell-h { font-size: 17px; }
  .page-nav a { padding: 6px 10px; font-size: 13px; }
  .chat-input-field { min-width: 120px; max-width: 180px; }
}