:root {
  --cream:        oklch(0.97 0.012 350);
  --surface:      oklch(0.99 0.008 350);
  --surface-2:    oklch(0.95 0.02 350);
  --ink:          oklch(0.27 0.04 350);
  --muted:        oklch(0.5 0.05 350);
  --line:         oklch(0.27 0.04 350);

  --magenta:      oklch(0.58 0.24 352);
  --magenta-bright: oklch(0.66 0.25 352);
  --magenta-deep: oklch(0.5 0.23 352);
  --aqua:         oklch(0.8 0.15 205);
  --aqua-deep:    oklch(0.6 0.16 205);

  --ok:           oklch(0.62 0.16 150);
  --warn:         oklch(0.7 0.17 75);
  --bad:          oklch(0.58 0.22 25);

  --fs-sm: 0.85rem;
  --fs-body: 0.98rem;
  --fs-md: 1.08rem;
  --fs-lg: 1.5rem;
  --rail-w: 300px;

  --r-panel: 20px;
  --r-bubble: 16px;
  --r-ctrl: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(50% 45% at 100% 0%, oklch(0.8 0.15 205 / .22), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, oklch(0.58 0.24 352 / .16), transparent 70%),
    radial-gradient(oklch(0.58 0.24 352 / .09) 1px, transparent 1.6px);
  background-size: auto, auto, 22px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage { width: 100%; max-width: 1120px; height: min(860px, 94dvh); }

.app {
  height: 100%;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-panel);
  box-shadow: 10px 10px 0 var(--aqua);
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "rail convhead" "rail messages" "rail composer";
}

/* ---------- rail ---------- */
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: linear-gradient(180deg, oklch(0.95 0.03 352), var(--surface-2));
  border-right: 2px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 22px; }
.logo {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700; font-size: 26px; color: #fff;
  background: linear-gradient(180deg, var(--magenta), var(--magenta-deep));
  border: 2px solid var(--ink);
  border-radius: 13px;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 4px rgba(0,0,0,.22), 3px 3px 0 var(--aqua);
  transform: rotate(-4deg);
}
.brand-text { line-height: 1.05; position: relative; min-width: 0; }
.wordmark {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700; font-size: var(--fs-lg);
  letter-spacing: -0.01em; color: var(--magenta);
  text-shadow: 2px 2px 0 var(--aqua);
}
.tagline { font-size: 12px; color: var(--muted); margin-top: 3px; }
.sparkle { position: absolute; font-size: 12px; line-height: 1; user-select: none; }
.sparkle.s1 { top: -4px; right: -13px; color: var(--aqua-deep); transform: rotate(12deg); }
.sparkle.s2 { bottom: -2px; right: -17px; color: var(--magenta); font-size: 9px; transform: rotate(-20deg); }

.new-chat { margin: 0 18px 12px; align-self: stretch; }

.online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 20px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.online-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px 1px oklch(0.62 0.16 150 / .6);
  animation: pulse 1.6s ease-in-out infinite;
}
#online-count { color: var(--ink); font-family: "Fredoka", system-ui, sans-serif; }

/* ---------- tabs ---------- */
.tabs {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--magenta) transparent;
}
.tabs::-webkit-scrollbar { width: 8px; }
.tabs::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 999px; }

.tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--aqua);
  cursor: pointer;
  transition: transform .1s cubic-bezier(.22,1,.36,1), box-shadow .1s, background .12s;
}
.tab:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--aqua); }
.tab.active {
  background: linear-gradient(180deg, oklch(0.96 0.04 352), var(--surface));
  border-color: var(--magenta);
  box-shadow: 3px 3px 0 var(--magenta);
}
.tab-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.tab-dot.searching { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
.tab-dot.connected { background: var(--ok); box-shadow: 0 0 7px 1px oklch(0.62 0.16 150 / .55); }
.tab-dot.disconnected { background: var(--bad); }
.tab-label {
  font-weight: 600; font-size: var(--fs-body);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-badge {
  flex: none;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--magenta);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.tab-tag {
  flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: var(--bad);
  background: oklch(0.58 0.22 25 / .14);
  border: 1.5px solid var(--bad);
  padding: 2px 6px; border-radius: 999px;
}
    .tab-close {
      flex: none;
      width: 22px; height: 22px;
      display: grid; place-items: center;
      padding: 0;
      color: var(--muted);
      background: transparent;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: background .12s ease, color .12s ease;
    }
    .tab-close:hover { background: var(--bad); color: #fff; }
    .tab-close svg { display: block; pointer-events: none; }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: .55; }
    }

/* ---------- conversation header ---------- */
.conv-head {
  grid-area: convhead;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 26px;
  background: var(--surface-2);
  border-bottom: 2px solid var(--ink);
}
.conv-label {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  padding: 6px 11px 6px 9px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--aqua);
  white-space: nowrap;
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.pill.searching .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
.pill.connected .dot { background: var(--ok); box-shadow: 0 0 8px 1px oklch(0.62 0.16 150 / .6); }
.pill.disconnected .dot { background: var(--bad); }
.conv-head #next { margin-left: auto; flex: none; }

/* ---------- messages ---------- */
.messages {
  grid-area: messages;
  overflow-y: auto;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  scrollbar-width: thin;
  scrollbar-color: var(--magenta) transparent;
}
.messages::-webkit-scrollbar { width: 12px; }
.messages::-webkit-scrollbar-thumb { background: var(--magenta); border: 3px solid var(--surface); border-radius: 999px; }

.bubble {
  max-width: min(78%, 460px);
  padding: 11px 15px;
  font-size: var(--fs-body); line-height: 1.45;
  word-break: break-word;
  animation: pop .2s cubic-bezier(.22,1,.36,1);
}
@keyframes pop { from { transform: translateY(5px) scale(.97); opacity: 0; } }
.bubble.them {
  align-self: flex-start;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-bubble) var(--r-bubble) var(--r-bubble) 5px;
  box-shadow: 3px 3px 0 var(--aqua);
}
.bubble.me {
  align-self: flex-end;
  background: var(--magenta); color: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--r-bubble) var(--r-bubble) 5px var(--r-bubble);
  box-shadow: 3px 3px 0 var(--aqua);
}
.bubble.sys {
  align-self: center; background: transparent; color: var(--muted);
  font-size: var(--fs-sm); padding: 3px 8px; max-width: 100%; text-align: center;
}

.empty {
  margin: auto; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  padding: 30px;
  max-width: 360px;
}
.empty .empty-title {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--ink);
  text-shadow: 2px 2px 0 var(--aqua);
}
.empty .empty-sub { font-size: var(--fs-body); line-height: 1.5; }
.empty .gel { padding: 14px 26px; font-size: 1.05rem; }

/* ---------- composer ---------- */
.composer {
  grid-area: composer;
  display: flex; gap: 10px; align-items: center;
  min-width: 0;
  padding: 16px 26px;
  border-top: 2px solid var(--ink);
  background: var(--surface-2);
}
input[type="text"] {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-body);
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--ink); border-radius: var(--r-ctrl);
  padding: 13px 16px; box-shadow: 3px 3px 0 var(--aqua); outline: none;
}
input[type="text"]::placeholder { color: oklch(0.5 0.04 350); }
input[type="text"]:focus-visible { box-shadow: 3px 3px 0 var(--magenta); }
input[type="text"]:disabled { background: var(--surface-2); box-shadow: 2px 2px 0 oklch(0.85 0.03 350); cursor: not-allowed; }

/* ---------- gel buttons ---------- */
.gel {
  font: inherit; font-weight: 600; font-size: var(--fs-body); color: #fff;
  background: linear-gradient(180deg, var(--magenta) 0%, var(--magenta-deep) 100%);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 12px 18px; cursor: pointer;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 4px rgba(0,0,0,.22), 4px 4px 0 var(--aqua);
  transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s cubic-bezier(.22,1,.36,1), filter .12s ease-out;
}
.gel:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 4px rgba(0,0,0,.22), 6px 6px 0 var(--aqua); }
.gel:active:not(:disabled) { transform: translate(2px,2px); box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 4px rgba(0,0,0,.25), 1px 1px 0 var(--aqua); }
.gel:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.gel:disabled { filter: grayscale(.55) opacity(.62); cursor: not-allowed; box-shadow: inset 0 2px 3px rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.18), 3px 3px 0 oklch(0.8 0.03 350); }
.gel.send { padding: 12px 16px; }
.gel.small { padding: 9px 14px; font-size: var(--fs-sm); }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  body { padding: 14px; }
  .stage { max-width: 480px; height: min(740px, 95dvh); }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "rail" "convhead" "messages" "composer";
    box-shadow: 8px 8px 0 var(--aqua);
  }
  .rail { border-right: none; border-bottom: 2px solid var(--ink); }
  .brand { padding: 12px 14px 14px; }
  .tagline { display: none; }
  .new-chat { margin: 0 14px 8px; }

  /* horizontal scrolling tab strip (contained, never forces page width) */
  .tabs {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    padding: 4px 12px 12px; gap: 8px;
    scrollbar-width: thin;
  }
  .tabs::-webkit-scrollbar { height: 8px; }
  .tabs::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 999px; }
  .tab { flex: none; min-width: 128px; max-width: 160px; padding: 8px 10px; }

  /* conv-head wraps: row 1 = name + status, row 2 = compact right-aligned skip */
  .conv-head { flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  .conv-head .conv-label { flex: 1 1 auto; min-width: 0; }
  .conv-head .pill { flex: 0 0 auto; max-width: 56%; }
  .conv-head #pill-text {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .conv-head #next {
    margin-left: auto; flex: 0 0 auto;
    padding: 6px 14px; font-size: var(--fs-sm);
  }

  /* compact mobile buttons: primary stays full-width but lighter; send matches */
  /* primary: full-width magenta gel, just a touch shorter */
  #new-chat { padding: 7px 16px; }

  /* secondary skip: compact, right-aligned ghost pill (lighter than a second gel bar) */
  .conv-head #next {
    margin-left: auto; flex: 0 0 auto;
    padding: 7px 14px; font-size: var(--fs-sm);
    background: var(--surface); color: var(--ink);
    box-shadow: 2px 2px 0 var(--aqua);
  }
  .conv-head #next:hover:not(:disabled) { background: oklch(0.96 0.04 352); box-shadow: 3px 3px 0 var(--aqua); }
  .conv-head #next:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--aqua); }
  .conv-head #next:disabled { background: var(--surface-2); color: var(--muted); box-shadow: 2px 2px 0 oklch(0.85 0.03 350); }

  /* send: compact magenta gel to match the lighter rhythm */
  #send { padding: 6px 14px; font-size: var(--fs-sm); }

  .messages { padding: 18px 16px; }
  .composer { padding: 12px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tab-dot.searching, .pill.searching .dot { animation: none; }
  .bubble { animation: none; }
}