/**
 * File:          public/css/chat2_window.css
 * Version:       0.1.0
 * Last Modified: 2026-11-01 08:48 PM EST
 * Changes:       New. Chat 2.0 step 4 "chat window": the reply icon row under Member replies (reply_actions.js),
 *                your message's small row (Copy · Edit · ‹ n/m › · estimate + Sending… / ✓ Sent / Not sent),
 *                image thumbnails + the full-size viewer (image_viewer.js), cards capped at 60vh with a sticky
 *                button row (card_caps.js), Select text. The old "Working…" chip is hidden (the status strip
 *                shows it). Tokens from chat2_tokens.css; no blue.
 */
/* ── Reply icon row (M2) ─────────────────────────────────────────────────────────── */
.c2-reply-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 6px 0 0 -6px; }
.debate-card > .c2-reply-actions, .brainstorm-synthesis-card > .c2-reply-actions { margin: 4px var(--s-3, 12px) 0; }
.c2-ra-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--c2-muted); cursor: pointer; box-shadow: none; transition: background .12s, color .12s; }
.c2-ra-btn:hover, .c2-ra-btn:focus-visible { background: var(--c2-surface-2); color: var(--c2-text); outline: none; }
.c2-ra-btn:disabled { opacity: .4; cursor: default; }
.c2-ra-btn svg { width: 16px; height: 16px; }
.c2-ra-btn[data-slot="flag"]:hover { color: var(--c2-waiting); }
.c2-ra-btn[data-slot="retry"] { color: var(--c2-waiting); }
.glitch-flagged .c2-ra-btn[data-slot="flag"] { display: none; }        /* Flag until flagged */
@media (hover: none) and (pointer: coarse) { .c2-ra-btn { width: 36px; height: 36px; } }
/* The token / cost line sits under the row. */
.c2-reply-actions + .msg-token-cost { margin-top: 2px; }

/* ── Your message: one small row under the bubble ────────────────────────────────── */
#chat-area .msg.user > .msg-body { text-align: right; }
#chat-area .msg.user > .msg-body > .msg-content { text-align: left; }
#chat-area .msg.user > .msg-body > :is(.copy-btn, .edit-btn) {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 4px 0 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--c2-muted); font-size: 0; box-shadow: none; vertical-align: middle; }
#chat-area .msg.user > .msg-body > :is(.copy-btn, .edit-btn):hover { background: var(--c2-surface-2); color: var(--c2-text); }
#chat-area .msg.user > .msg-body > :is(.copy-btn, .edit-btn) svg { width: 15px; height: 15px; margin: 0 !important; }
#chat-area .msg.user > .msg-body > .msg-versions { margin: 4px 0 0 2px; }
#chat-area .msg.user > .msg-body > .msg-token-cost { display: inline-flex; margin: 4px 0 0 6px; padding: 0; border: 0; vertical-align: middle; }
@media (hover: none) and (pointer: coarse) { #chat-area .msg.user > .msg-body > :is(.copy-btn, .edit-btn) { width: 36px; height: 36px; } }
/* While the inline editor is open, Copy stays hidden as before (style_v2.css .is-editing rule). */
#chat-area .msg.user.is-editing > .msg-body > :is(.copy-btn, .c2-send-status) { display: none; }

/* Sending… / ✓ Sent / Not sent · Try again · Edit (send_outbox.js) */
.c2-send-status { display: inline-flex; align-items: center; gap: 4px; margin: 4px 8px 0 0; font-size: 12px; color: var(--c2-muted);
  vertical-align: middle; transition: opacity .4s; }
.c2-send-status[data-state="sent"] { color: var(--c2-muted); }
.c2-send-status.is-fading { opacity: 0; }
.c2-send-status .c2-send-failed { color: var(--c2-failed); font-weight: 600; }
.c2-send-action { padding: 2px 4px; margin: 0; border: 0; background: transparent; color: var(--c2-accent); font: inherit; font-weight: 600; cursor: pointer; }
.c2-send-action:hover { text-decoration: underline; }

/* ── Links + images ──────────────────────────────────────────────────────────────── */
#chat-area :is(.msg-content, .debate-card-content, .brainstorm-synthesis-content) a { color: var(--c2-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
#chat-area :is(.msg-content, .debate-card-content, .brainstorm-synthesis-content) img:is(.c2-thumb, :not([class])) {
  display: block; max-width: min(220px, 100%); max-height: 220px; width: auto; height: auto; margin: 6px 0; border-radius: 14px;
  object-fit: cover; cursor: zoom-in; background: var(--c2-surface-2); }
.c2-image-viewer { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.c2-image-viewer img { max-width: min(96vw, 1600px); max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.7); cursor: default; }
.c2-image-viewer-close { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 22px;
  border: 1px solid var(--c2-float-line); background: var(--c2-float); color: var(--c2-text); font-size: 18px; cursor: pointer; }

/* ── Cards capped at 60% of the screen; the buttons stay visible ─────────────────── */
#chat-area .c2-capped-box { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
#chat-area .c2-capped-box > .c2-card-actions { position: sticky; bottom: 0; z-index: 2; padding-top: 10px; padding-bottom: 2px;
  background: color-mix(in srgb, var(--c2-bg) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ── Select text (message menu) ──────────────────────────────────────────────────── */
#chat-area .c2-selecting, #chat-area .c2-selecting * { -webkit-user-select: text !important; user-select: text !important; }
#chat-area .c2-selecting { cursor: text !important; box-shadow: 0 0 0 2px var(--border-active); border-radius: 16px; }
/* Touch: a long-press opens the message menu (Select text is in it) instead of the browser's own callout. */
@media (hover: none) and (pointer: coarse) {
  #chat-area :is(.msg, .debate-card, .brainstorm-synthesis-card) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  #chat-area :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
}

/* The old "Working…" chip at the end of the chat: the status strip shows it now. */
#mode-progress-chip { display: none !important; }
/* === END OF FILE (FILENAME: /var/www/vhosts/koracouncil.com/app.koracouncil.com/public/css/chat2_window.css) === */
