/* ==========================================================================
   Circle chat — group chat and DMs.
   Follows the supplied chat.html reference, and shares the palette with the
   Hub and Coaches redesigns so the whole app reads as one product.

   Loaded after universe.css, so these rules win for the message stream and the
   composer. Message markup uses the `cx-` prefix and is emitted by
   renderGcMessages / renderDmMessages.
   ========================================================================== */
:root{
  --cx-bg:#14161B; --cx-surface:#1B1E25; --cx-surface2:#21252E; --cx-line:#272B34;
  --cx-text:#E8EAEF; --cx-muted:#AEB5C2; --cx-dim:#868D9C;
  --cx-accent:#F2C14E; --cx-ok:#5FD08A; --cx-mine:#333A4A; --cx-ink:#1A1408;
}

/* ── message stream ──────────────────────────────────────────────────────── */
#gcMessages, .dm-messages{ background:var(--cx-bg); }

.cx-day{
  text-align:center; font-size:11px; font-weight:600; color:var(--cx-dim);
  letter-spacing:.05em; padding:16px 0 10px; text-transform:uppercase;
}
.cx-grp{ padding:0 16px; }

/* Sender name, once per run of messages from the same person. */
.cx-who{
  font-size:11.5px; font-weight:600; color:var(--cx-muted);
  padding:8px 0 4px 34px; letter-spacing:-.005em;
}

.cx-row{ display:flex; align-items:flex-end; gap:8px; margin-top:3px; }
.cx-row.mine{ justify-content:flex-end; }

.cx-av{
  width:26px; height:26px; border-radius:9px; flex:none; position:relative;
  display:grid; place-items:center; font-size:11px; font-weight:700; line-height:1;
  color:#fff; background:#3A3F4C; user-select:none;
}
/* Clipping belongs to the picture, not the text: a fixed box with
   overflow:hidden around a letter cuts the letter off at 200% scaling. */
.cx-av img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; border-radius:9px;
}
/* Keeps continuation rows aligned with the first without repeating the face. */
.cx-av.spacer{ visibility:hidden; }

.cx-bub{
  max-width:min(266px, 76%); padding:10px 13px; border-radius:16px;
  font-size:15px; line-height:1.42; letter-spacing:-.01em;
  background:var(--cx-surface); border:1px solid var(--cx-line);
  border-bottom-left-radius:6px; color:var(--cx-text);
  overflow-wrap:anywhere; white-space:pre-wrap;
}
.cx-row.mine .cx-bub{
  background:var(--cx-mine); border-color:transparent; color:#EEF1F7;
  border-bottom-left-radius:16px; border-bottom-right-radius:6px;
}
/* A bubble whose whole content is a card or media carries no chrome itself. */
.cx-bub.card{ padding:0; background:transparent; border:0; max-width:min(288px, 84%); }
.cx-bub.media{ padding:0; overflow:hidden; background:transparent; border:0; max-width:min(250px, 72%); }
.cx-bub.media img, .cx-bub.media video{ display:block; width:100%; border-radius:16px; }
.cx-row.mine .cx-bub.media img, .cx-row.mine .cx-bub.media video{ border-bottom-right-radius:6px; }
.cx-bub.media img{ cursor:pointer; }
/* Multi-image messages keep the grid the rest of the app already uses. */
.cx-bub.media .msg-img-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3px; border-radius:16px; overflow:hidden; }

/* Text that sits under media inside the same message. */
.cx-bub .cx-caption{
  display:block; padding:8px 2px 0; font-size:14.5px; line-height:1.4; color:var(--cx-text);
}

.cx-stamp{ font-size:11px; color:var(--cx-dim); padding:5px 0 0 34px; }
.cx-stamp.mine{ text-align:right; padding:5px 2px 0 0; }
.cx-read{ color:var(--cx-dim); }

.cx-empty{
  padding:52px 24px; text-align:center; color:var(--cx-dim); font-size:14px; line-height:1.5;
}
.cx-empty .ic{ display:block; font-size:30px; margin-bottom:10px; opacity:.55; }

/* ── shared log card (chat bubble and circle feed) ───────────────────────── */
.cx-log{
  border:1px solid var(--cx-line); border-radius:14px; overflow:hidden;
  background:var(--cx-surface);
}
.cx-lhead{
  display:flex; align-items:center; gap:9px; padding:11px 13px;
  border-bottom:1px solid var(--cx-line);
}
.cx-lhead svg{
  width:15px; height:15px; stroke:var(--cx-accent); stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none;
}
.cx-lt{ font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--cx-accent); }
.cx-ld{ margin-left:auto; font-size:11.5px; color:var(--cx-dim); }
.cx-lbody{ padding:12px 13px; }
.cx-lmain{ font-size:15px; font-weight:600; letter-spacing:-.018em; color:var(--cx-text); }
.cx-lsub{ font-size:12.5px; color:var(--cx-muted); margin-top:4px; line-height:1.45; }
.cx-lstats{ display:flex; gap:7px; margin-top:10px; }
.cx-ls{ flex:1; background:var(--cx-surface2); border-radius:9px; padding:8px 9px; min-width:0; }
.cx-ls .k{ font-size:9.5px; font-weight:700; color:var(--cx-dim); letter-spacing:.05em; }
.cx-ls .v{ font-size:14px; font-weight:700; letter-spacing:-.02em; margin-top:2px; color:var(--cx-text); }

/* ── composer — one component across group chat and DMs ─────────────────── */
.gc-input-bar, .dm-input-bar{
  border-top:1px solid var(--cx-line) !important;
  background:var(--cx-bg) !important;
  padding:10px 14px calc(env(safe-area-inset-bottom, 14px) + 14px) !important;
  box-shadow:none !important;
}
.gc-input-row, .dm-input-bar{
  display:flex !important; align-items:flex-end !important; gap:9px !important;
}
/* The DM bar is itself the row, so its inner children align directly. */

.gc-attach-btn, .dm-attach-btn{
  width:40px; height:40px; min-width:40px; border-radius:13px; flex:none;
  display:grid !important; place-items:center;
  border:1px solid var(--cx-line) !important; background:var(--cx-surface) !important;
  color:var(--cx-muted) !important; cursor:pointer; padding:0 !important;
}
.gc-attach-btn svg, .dm-attach-btn svg{
  width:19px; height:19px; stroke:var(--cx-muted); stroke-width:2.1; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

.gc-textarea, .dm-textarea{
  flex:1; min-height:40px; max-height:132px; border-radius:13px !important;
  border:1px solid var(--cx-line) !important; background:var(--cx-surface) !important;
  padding:11px 14px !important; font-size:15px !important; letter-spacing:-.01em;
  color:var(--cx-text) !important; line-height:1.35 !important; resize:none;
  font-family:inherit; outline:none;
}
.gc-textarea::placeholder, .dm-textarea::placeholder{ color:var(--cx-dim); }
.gc-textarea:focus, .dm-textarea:focus{ border-color:#3A4052 !important; }

.gc-send-btn, .dm-send-btn{
  width:40px; height:40px; min-width:40px; border-radius:13px; flex:none;
  display:grid !important; place-items:center;
  background:var(--cx-surface) !important; border:1px solid var(--cx-line) !important;
  color:var(--cx-dim) !important; cursor:pointer; padding:0 !important;
  transition:background .15s ease, border-color .15s ease;
}
.gc-send-btn svg, .dm-send-btn svg{
  width:18px; height:18px; stroke:var(--cx-dim); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Send only lights up once there is something to send. */
.gc-send-btn.is-active, .dm-send-btn.is-active{
  background:var(--cx-accent) !important; border-color:var(--cx-accent) !important;
}
.gc-send-btn.is-active svg, .dm-send-btn.is-active svg{ stroke:var(--cx-ink); }

/* ── the circle feed composer is the same component ──────────────────────────
   "Same component in the circle feed, group chat and DMs" — only the
   placeholder changes with context, so muscle memory carries across all three. */
/* Note: `display` is deliberately NOT set here. Chat mode hides this bar with
   an inline style.display='none', and a `display:flex !important` would beat
   that and leave two composers stacked on top of each other. */
.circle-compose-bar{
  border-top:1px solid var(--cx-line) !important;
  background:var(--cx-bg) !important;
  padding:10px 14px calc(env(safe-area-inset-bottom, 14px) + 14px) !important;
  align-items:flex-end !important; gap:9px !important; flex-wrap:nowrap !important;
  box-shadow:none !important; backdrop-filter:none !important;
}
.ccb-media-btn{
  width:40px !important; height:40px !important; min-width:40px !important;
  border-radius:13px !important; flex:none !important;
  display:grid !important; place-items:center !important;
  border:1px solid var(--cx-line) !important; background:var(--cx-surface) !important;
  color:var(--cx-muted) !important; padding:0 !important; cursor:pointer;
}
.ccb-media-btn svg{
  width:19px !important; height:19px !important; stroke:var(--cx-muted) !important;
  stroke-width:2.1 !important; fill:none !important; stroke-linecap:round;
}
.ccb-input-wrap{
  flex:1 !important; min-width:0 !important; background:none !important;
  border:0 !important; padding:0 !important; border-radius:0 !important;
}
.ccb-text-input{
  width:100% !important; min-height:40px !important; max-height:132px !important;
  border-radius:13px !important; border:1px solid var(--cx-line) !important;
  background:var(--cx-surface) !important; padding:11px 14px !important;
  font-size:15px !important; letter-spacing:-.01em; color:var(--cx-text) !important;
  line-height:1.35 !important; resize:none; font-family:inherit; outline:none;
}
.ccb-text-input::placeholder{ color:var(--cx-dim) !important; }
.ccb-text-input:focus{ border-color:#3A4052 !important; }
.ccb-send-btn{
  width:40px !important; height:40px !important; min-width:40px !important;
  border-radius:13px !important; flex:none !important;
  display:grid !important; place-items:center !important;
  background:var(--cx-surface) !important; border:1px solid var(--cx-line) !important;
  color:var(--cx-dim) !important; padding:0 !important; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.ccb-send-btn svg{
  width:18px !important; height:18px !important;
  stroke:var(--cx-dim) !important; stroke-width:2 !important; fill:none !important;
  stroke-linecap:round; stroke-linejoin:round;
}
.ccb-send-btn.is-active{
  background:var(--cx-accent) !important; border-color:var(--cx-accent) !important;
}
.ccb-send-btn.is-active svg{ stroke:var(--cx-ink) !important; }
.ccb-media-preview{ margin-bottom:9px !important; }

/* reply preview */
.cx-reply{
  display:flex; align-items:center; gap:9px; margin-bottom:9px;
  padding:8px 11px; border-radius:10px; background:var(--cx-surface);
  border-left:2px solid var(--cx-accent);
}
.cx-reply .t{ flex:1; min-width:0; }
.cx-reply .n{ font-size:11.5px; font-weight:700; color:var(--cx-accent); }
.cx-reply .b{
  font-size:12.5px; color:var(--cx-muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cx-reply .x{
  width:26px; height:26px; flex:none; border:0; background:none; cursor:pointer;
  color:var(--cx-dim); display:grid; place-items:center; padding:0;
}
.cx-reply .x svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; }

/* attachment chips */
.cx-chips{ display:flex; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.cx-ach{
  display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:10px;
  background:var(--cx-surface); border:1px solid var(--cx-line);
  font-size:12.5px; font-weight:600; color:var(--cx-muted);
}
.cx-ach>svg{ width:14px; height:14px; stroke:var(--cx-accent); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.cx-ach .x{ border:0; background:none; padding:0; cursor:pointer; color:var(--cx-dim);
  display:grid; place-items:center; }
.cx-ach .x svg{ width:12px; height:12px; stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; }

/* ── attach chooser sheet ────────────────────────────────────────────────── */
.cx-sheet-wrap{ position:fixed; inset:0; z-index:10050; }
.cx-sheet-scrim{
  position:absolute; inset:0; background:rgba(6,7,12,.66);
  opacity:0; transition:opacity .18s ease;
}
.cx-sheet-wrap.on .cx-sheet-scrim{ opacity:1; }
.cx-sheet{
  position:absolute; left:0; right:0; bottom:0; max-width:520px; margin:0 auto;
  background:var(--cx-bg); border-top:1px solid var(--cx-line);
  border-radius:22px 22px 0 0;
  padding:10px 0 calc(env(safe-area-inset-bottom, 14px) + 16px);
  transform:translateY(100%); transition:transform .22s cubic-bezier(.32,.72,0,1);
  max-height:70vh; overflow-y:auto;
}
.cx-sheet-wrap.on .cx-sheet{ transform:translateY(0); }
.cx-sheet-grab{ width:38px; height:4px; border-radius:2px; background:#343954; margin:0 auto 12px; }
.cx-sheet-title{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cx-dim); padding:0 20px 8px;
}
.cx-sheet-item{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:14px 20px; background:none; border:0; border-top:1px solid var(--cx-line);
  color:var(--cx-text); font-family:inherit; font-size:15.5px; font-weight:500;
  text-align:left; cursor:pointer;
}
.cx-sheet-item:active{ background:var(--cx-surface); }
.cx-sheet-item .ic{
  width:34px; height:34px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--cx-surface); border:1px solid var(--cx-line); font-size:16px;
}

/* ── DM header ───────────────────────────────────────────────────────────── */
.dm-header{
  background:var(--cx-bg) !important;
  border-bottom:1px solid var(--cx-line) !important;
  padding:calc(env(safe-area-inset-top, 12px) + 12px) 16px 13px !important;
  gap:11px !important;
}
.dm-back-btn{
  width:34px; height:34px; min-width:34px; border-radius:11px; flex:none;
  display:grid !important; place-items:center;
  background:transparent !important; border:1px solid var(--cx-line) !important;
  color:var(--cx-text) !important;
}
.dm-header-avatar{
  width:38px !important; height:38px !important; border-radius:12px !important;
  overflow:hidden; flex:none;
}
.dm-header-name{
  font-size:16.5px !important; font-weight:700 !important; letter-spacing:-.025em;
  color:var(--cx-text) !important;
}
.dm-header-status{ font-size:12px !important; color:var(--cx-muted) !important; }
.dm-header-status.dm-online{ color:var(--cx-ok) !important; }

/* ── circle: Posts / Chat segmented control ──────────────────────────────────
   The switch lives under the circle's picture, so the header stays put and the
   body below changes to match. Chat mode no longer hides the header or needs a
   floating button to get back. */
.circle-view.gc-mode .circle-view-header{ display:block !important; }
.circle-view.gc-mode .circle-seg{ display:flex !important; }
/* The compact in-chat header is redundant now that the real one stays. */
#gcChatHeader{ display:none !important; }
.circle-mode-fab{ display:none !important; }

.circle-seg{
  display:flex; gap:24px; padding:0 20px; margin-top:15px; flex:none;
  border-bottom:1px solid var(--cx-line); background:var(--cx-bg);
}
.circle-seg-btn{
  position:relative; display:flex; align-items:center; gap:7px;
  background:none; border:0; padding:0 0 11px; margin-bottom:-1px;
  border-bottom:2px solid transparent; font-family:inherit;
  font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--cx-dim);
  cursor:pointer;
}
.circle-seg-btn{ transition:color .16s ease, border-color .16s ease; }
.circle-seg-btn.on{ color:var(--cx-text); border-bottom-color:var(--cx-accent); }
/* The tap should read as instant, so the label and underline move on press
   rather than waiting for the messages request to come back. */
.circle-seg-btn:active{ opacity:.7; }
/* The incoming pane fades in, which reads as a switch rather than a flash of
   empty space while the first page of messages loads. */
.circle-feed{ animation:cx-pane-in .18s ease both; }
@keyframes cx-pane-in{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .circle-feed{ animation:none }
  .circle-seg-btn{ transition:none }
}
.circle-seg-btn .ct{ font-size:11.5px; font-weight:600; color:var(--cx-dim); }
.circle-seg-btn .dot{
  width:6px; height:6px; min-width:6px; flex:none; border-radius:50%;
  background:var(--cx-accent);
}

/* In chat mode the stream fills what is left below the header. */
.circle-view.gc-mode .circle-view-inner{ overflow-y:auto !important; }
.circle-view.gc-mode .circle-feed{ min-height:52vh; }

/* ── circle chat header + segmented tabs ─────────────────────────────────── */
.gc-chat-header{
  background:var(--cx-bg) !important;
  border-bottom:1px solid var(--cx-line) !important;
}
.gc-chat-action-btn{
  width:34px; height:34px; border-radius:11px;
  background:rgba(10,11,15,.5) !important; border:1px solid rgba(255,255,255,.13) !important;
  color:var(--cx-text) !important; display:grid !important; place-items:center;
}

/* "new messages" pill */
.chat-new-msg-btn{
  background:var(--cx-accent) !important; color:var(--cx-ink) !important;
  border:0 !important; border-radius:20px !important; font-weight:700 !important;
  font-size:12.5px !important; padding:8px 15px !important;
}