/* ============================================================
   chat.css — message list styling, shared by the main page and
   /chat-only so the two can't drift apart. panel.css keeps the
   panel chrome (header, drawers, footer); everything about how a
   message looks lives here.

   --chat-fs is set from the font-size control in the ⋯ menu and
   everything scales off it in em, so one value resizes the lot.
   ============================================================ */
:root{ --chat-fs:15px; }

#chat-body{
  font-size:var(--chat-fs);
  gap:0;                      /* rows carry their own padding */
  padding:6px 0 4px;
}

/* ---------- Message row ---------- */
.chat-msg{
  display:block;              /* inline name + text flow as one paragraph */
  padding:3px 12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
/* Zebra tint separates messages without borders eating vertical space.
   Applied per author block rather than per row, so a grouped run reads
   as one unit. */
.chat-msg.alt{background:rgba(255,255,255,.028);}
.chat-msg.start{padding-top:6px;}
.chat-msg.end{padding-bottom:6px;}

.chat-msg .who{
  font-weight:700;
  font-size:1em;
  letter-spacing:.01em;
  margin-right:.1em;
  white-space:nowrap;
}
.chat-msg .who::after{content:':';opacity:.45;margin-left:1px;}
.chat-msg .txt{
  font-size:1em;
  color:var(--text);
}
/* Grouped follow-on message: name hidden, text lines up under the
   first one rather than hanging at the left margin. */
.chat-msg.grouped .who{display:none;}
.chat-msg.grouped{padding-top:1px;}

.msg-emoji{margin-right:.25em;font-size:1.05em;}
.verified-badge{font-size:.8em;color:var(--brass-lt);margin-left:.2em;opacity:.8;}
.chat-emote{height:1.5em;vertical-align:-.35em;display:inline-block;margin:0 1px;}

.chat-empty{
  flex:1;display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;
  color:var(--text-sub);text-align:center;
}

.sys-msg{
  align-self:center;margin:5px auto;padding:3px 12px;border-radius:999px;
  background:var(--surface2);color:var(--text-sub);
  font-family:var(--font-mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Clip card ----------
   Indented to line up with message text, and spaced so it doesn't sit
   flush against the next message now that rows are tight. */
.chat-clip-card{
  display:flex;align-items:center;gap:10px;
  margin:5px 12px 7px;padding:8px;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--p-r);
  cursor:pointer;transition:background .14s,border-color .14s;
}
.chat-clip-card:hover{background:var(--p-hover);border-color:var(--border-lt);}
.chat-clip-thumb{position:relative;width:60px;height:60px;flex-shrink:0;border-radius:var(--p-r-sm);overflow:hidden;background:#000;}
.chat-clip-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.chat-clip-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,.9);text-shadow:0 0 8px rgba(0,0,0,.8);pointer-events:none;}
.chat-clip-duration{position:absolute;bottom:3px;right:3px;padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.75);color:#fff;font-family:var(--font-mono);font-size:10px;}
.chat-clip-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.chat-clip-title{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-clip-user{font-family:var(--font-mono);font-size:10px;color:var(--brass-lt);letter-spacing:.05em;text-transform:uppercase;}
.chat-clip-unavailable{margin:4px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-sub);text-transform:uppercase;}

/* ---------- Font size control (⋯ menu) ---------- */
.fs-row{display:flex;align-items:center;gap:9px;flex:1;justify-content:flex-end;}
.fs-row .cp-slider{max-width:120px;}
.fs-val{min-width:38px;text-align:right;color:var(--text);font-size:var(--fs-2xs);}

/* ---------- Live typing ghosts ----------
   Same shape as a real message so it reads as the message becoming
   itself, dimmed and italic so it's never mistaken for one that was
   actually sent. */
.chat-ghost{
  display:block;padding:3px 12px;line-height:1.45;
  opacity:.5;font-style:italic;overflow-wrap:anywhere;
}
.chat-ghost .who{font-weight:700;margin-right:.1em;white-space:nowrap;font-style:normal;}
.chat-ghost .who::after{content:':';opacity:.45;margin-left:1px;}
.chat-ghost .txt{color:var(--text);}

/* ---------- Composer ----------
   The name sits inside the field in the same type as the message, so
   the box previews what the message will look like. */
#composer{
  display:flex;align-items:baseline;gap:.3em;
  padding:8px 11px;border-radius:var(--p-r);
  background:var(--surface2);border:1px solid var(--border);
  transition:border-color .14s,box-shadow .14s;
}
#composer:focus-within{border-color:var(--brass-dk);box-shadow:var(--p-ring);}
#compose-who{
  flex:0 1 auto;min-width:0;max-width:45%;
  font-size:var(--chat-fs,15px);font-weight:700;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#compose-who[hidden]{display:none;}
#compose-who::after{content:':';opacity:.45;margin-left:1px;}
#composer #chat-input{
  flex:1;min-width:0;padding:0;border:none;background:none;box-shadow:none;
  font-size:var(--chat-fs,15px);line-height:1.45;
}
#composer #chat-input:focus{border:none;box-shadow:none;}

/* ---------- Reactions ---------- */
.chat-reaction{height:2.2em;width:auto;vertical-align:-.7em;display:inline-block;margin:0 .1em;}
.chat-reaction.solo{height:4.5em;vertical-align:middle;}
.chat-ghost .chat-reaction{height:1.8em;}

#rp-toggle{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;cursor:pointer;align-self:center;
  background:none;border:none;border-radius:var(--p-r-sm);color:var(--text-sub);
  transition:background .14s,color .14s;
}
#rp-toggle svg{width:19px;height:19px;}
#rp-toggle:hover{background:var(--p-hover);color:var(--text);}

#reaction-picker{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:8px;padding:8px;
  background:var(--surface2);border:1px solid var(--border-lt);border-radius:var(--p-r);
}
#reaction-picker[hidden]{display:none;}
#rp-search{
  padding:6px 9px;border-radius:var(--p-r-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-size:var(--fs-2xs);outline:none;
}
#rp-search:focus{border-color:var(--brass-dk);}
#rp-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:4px;
  max-height:min(40vh,240px);overflow-y:auto;overscroll-behavior:contain;
}
#rp-grid::-webkit-scrollbar{width:8px;}
#rp-grid::-webkit-scrollbar-thumb{background:var(--border-lt);border-radius:4px;border:2px solid var(--surface2);}
.rp-item{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  padding:3px;cursor:pointer;background:none;border:1px solid transparent;
  border-radius:var(--p-r-sm);transition:background .14s,border-color .14s;
}
.rp-item img{max-width:100%;max-height:100%;object-fit:contain;}
.rp-item:hover{background:var(--p-hover);border-color:var(--border-lt);}