/* ------------------------------------------------------------------ Chat
 *
 * Two shapes of the same thing: a full-width conversation on its own page, and a
 * compact card in a session's side panel. The compact one is the constraint that
 * matters — 17rem on a computer, the full width of a phone — so the transcript is
 * a scrolling column with the composer pinned under it and nothing that needs
 * horizontal room.
 *
 * The tokens come from shell.css (--ink, --panel, --panel-line, --surface). This
 * file adds no new palette; a chat that looked like a different site would read
 * as a different site.
 */

/* Anything that only works with chat.js running waits for chat.js to run. */
.chat-scripted { display: none; }
html.chat-js .chat-scripted { display: block; }
html.chat-js .chat-needsjs { display: none; }
.needsjs { display: block; }
html.chat-js .needsjs { display: none; }
.scripted { display: none; }
html.chat-js .scripted { display: block; }

.chat-needsjs {
    margin: 0; padding: .7rem .85rem; border-radius: .7rem; font-size: .875rem;
    background: rgba(255, 255, 255, .06); border: 1px dashed var(--panel-line); color: var(--ink-dim);
}

/*
 * Anything given a display of its own would otherwise outrank the browser's own
 * rule for `hidden`, and a composer that is supposed to be gone would sit there
 * taking messages nobody can send.
 */
.chat [hidden], .devlist [hidden], .devsetup[hidden], .dmbadge[hidden] { display: none !important; }

.chat { display: grid; gap: .6rem; }
.chat-status {
    margin: 0; font-size: .82rem; color: var(--ink-dim);
    padding: .5rem .65rem; border-radius: .6rem; background: rgba(255, 255, 255, .05);
}
.chat-status a { color: inherit; }

/* --------------------------------------------------------------- transcript */

.chat-log {
    list-style: none; margin: 0; padding: .2rem; display: grid; gap: .55rem;
    /* Rows keep their own height; without this a lone message stretches to fill. */
    align-content: start;
    overflow-y: auto; overscroll-behavior: contain;
    max-height: 26rem; min-height: 6rem;
    scrollbar-width: thin;
}
.chat.compact .chat-log { max-height: 17rem; font-size: .85rem; }

/* On its own page the transcript is the page, so it gets a pane to sit in. */
.chat:not(.compact) .chat-log {
    min-height: 18rem; max-height: min(60vh, 34rem);
    padding: .85rem; border-radius: 1rem;
    background: rgba(0, 0, 0, .18); border: 1px solid var(--panel-line);
}

.chat-empty { color: var(--ink-dim); font-size: .85rem; padding: .5rem .25rem; }

.chat-msg {
    display: grid; gap: .2rem; padding: .5rem .7rem; border-radius: .8rem;
    background: var(--panel); border: 1px solid var(--panel-line);
    max-width: 44rem;
}
.chat-msg.mine {
    background: linear-gradient(140deg, rgba(236, 72, 153, .22), rgba(99, 102, 241, .22));
    justify-self: end;
}
.chat.compact .chat-msg { padding: .4rem .55rem; border-radius: .65rem; }

.chat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin: 0; }
.chat-who { font-weight: 700; font-size: .82rem; }
.chat-when { font-size: .7rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.chat-text {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45;
}
.chat-text.unreadable, .chat-msg .muted { color: var(--ink-dim); font-style: italic; }

/*
 * An unverified message is shown, not hidden — hiding it would leave somebody
 * wondering why the numbering jumped. It is marked so plainly that nobody reads
 * it as ordinary.
 */
.chat-flag {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .05rem .35rem; border-radius: .25rem; color: var(--ink-dim);
    border: 1px solid var(--panel-line);
}
.chat-flag.warnflag { color: #ffd39a; border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .12); }
.chat-msg.unverified { border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .08); }
.chat-trouble {
    margin: .2rem 0 0; font-size: .74rem; line-height: 1.4; color: #f5d9a8;
}

.chat-report {
    justify-self: start; margin: .3rem 0 0; padding: .15rem .45rem;
    font-size: .68rem; font-weight: 600; border-radius: .4rem;
    background: transparent; color: var(--ink-dim); border: 1px solid var(--panel-line);
}
.chat-report:hover { color: var(--ink); }

/* A key change is part of the record, so it reads as a line in it. */
.chat-notice {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
    padding: .45rem .7rem; border-radius: .6rem; font-size: .78rem; line-height: 1.45;
    background: rgba(99, 102, 241, .14); border: 1px solid rgba(99, 102, 241, .3);
    color: var(--ink);
}
.chat-notice-text { flex: 1; min-width: 8rem; }

.chat-new {
    justify-self: center; margin: 0; padding: .3rem .8rem; font-size: .78rem;
    border-radius: 999px; background: linear-gradient(140deg, #ec4899, #6366f1); color: #fff;
}

/* --------------------------------------------------------------- composer */

.chat-composer { display: flex; gap: .4rem; align-items: flex-end; margin: 0; }
.chat-composer textarea {
    flex: 1; min-height: 2.6rem; padding: .55rem .7rem; border-radius: .7rem;
    font-size: .9rem; line-height: 1.4; resize: vertical;
}
.chat.compact .chat-composer textarea { font-size: .85rem; min-height: 2.4rem; }
.chat-composer button { margin: 0; padding: .55rem .9rem; font-size: .85rem; border-radius: .7rem; }
.chat-composer button:disabled { opacity: .6; cursor: progress; }

.chat-setup {
    padding: .8rem .9rem; border-radius: .8rem;
    background: var(--panel); border: 1px solid var(--panel-line);
}
.chat-setup p { margin: 0 0 .5rem; font-size: .85rem; }
.chat-setup label { font-size: .82rem; margin-top: .5rem; }
.chat-setup button { margin-top: .7rem; padding: .5rem .9rem; font-size: .85rem; border-radius: .6rem; }

/* --------------------------------------------------------------- safety code */

.chat-safety summary { margin-top: .25rem; font-size: .8rem; }
.safety-code {
    margin: .5rem 0; padding: .5rem .65rem; border-radius: .6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem; letter-spacing: .08em; word-spacing: .25em;
    background: rgba(0, 0, 0, .25); color: var(--ink); overflow-wrap: anywhere;
}
.chat.compact .safety-code { font-size: .82rem; }
.chat-safety p { margin: 0 0 .4rem; }

.warnbox {
    margin: 0 0 .75rem; padding: .6rem .75rem; border-radius: .6rem; font-size: .85rem; line-height: 1.5;
    background: rgba(245, 158, 11, .12); border-left: 3px solid #f59e0b; color: #f5d9a8;
}
.warnbox a { color: inherit; }
.warnbox.small { font-size: .78rem; }

/* --------------------------------------------------------------- inbox */

.dmlist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.dmlist a {
    display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .8rem; align-items: center;
    padding: .7rem .85rem; border-radius: .9rem; text-decoration: none; color: inherit;
    background: var(--panel); border: 1px solid var(--panel-line);
}
.dmlist a:hover { border-color: color-mix(in srgb, #ec4899 45%, transparent); }
.dm-body { display: grid; gap: .1rem; min-width: 0; }
.dm-unread {
    padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
    background: linear-gradient(140deg, #ec4899, #6366f1); color: #fff;
}

.threadblock { display: grid; gap: 1rem; }
.threadfoot {
    display: grid; gap: 1rem; padding: 1.1rem; border-radius: 1rem;
    background: var(--panel); border: 1px solid var(--panel-line);
}
@media (min-width: 52rem) { .threadfoot { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; } }
.threadfoot h2 { margin: 0 0 .4rem; font-size: .95rem; }
.threadfoot h3 { margin: 0 0 .4rem; font-size: .9rem; }
.threadfoot p { margin: 0 0 .6rem; }
.threaddelete button { margin: 0; padding: .5rem .8rem; font-size: .85rem; border-radius: .6rem; }

/* --------------------------------------------------------------- devices */

.devlist { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .7rem; }
.dev {
    padding: .85rem .95rem; border-radius: .9rem;
    background: var(--panel); border: 1px solid var(--panel-line);
}
.dev.is-this { border-color: color-mix(in srgb, #6366f1 55%, var(--panel-line)); }
.dev.trust-revoked { opacity: .55; }
.dev-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.dev-head strong { font-size: .95rem; }
.dev .trustbadge { text-transform: none; letter-spacing: 0; }
.dev.trust-pending .trustbadge { color: #f5d9a8; border-color: rgba(245, 158, 11, .55); }
.dev.trust-trusted .trustbadge { color: #a7f3d0; border-color: rgba(52, 211, 153, .5); }
.dev-print {
    margin: 0 0 .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem; letter-spacing: .04em; color: var(--ink-dim); overflow-wrap: anywhere;
}
.dev p { margin: 0 0 .35rem; }
.dev-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.dev-acts button { margin: 0; padding: .4rem .75rem; font-size: .8rem; border-radius: .55rem; }

.devsetup {
    margin: 1rem 0; padding: 1rem; border-radius: .9rem;
    background: var(--panel); border: 1px dashed var(--panel-line);
}
.devsetup h3 { margin: 0 0 .5rem; font-size: .95rem; }
.devsetup p { margin: 0 0 .5rem; }
.devsetup button { margin-top: .8rem; padding: .55rem .9rem; font-size: .88rem; border-radius: .6rem; }
[data-recover] button { width: 100%; padding: .55rem; font-size: .85rem; border-radius: .6rem; }
[data-device-errors] { display: block; }
[data-device-errors][hidden] { display: none; }

/* --------------------------------------------------------------- topbar badge */

.dmlink { position: relative; }
.dmbadge {
    position: absolute; top: -.3rem; right: -.3rem; min-width: 1.15rem; height: 1.15rem;
    display: grid; place-items: center; padding: 0 .25rem;
    border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1;
    background: #ec4899; color: #fff; border: 2px solid var(--surface);
}

/* --------------------------------------------------------------- reporting */

.chat-report-sheet {
    position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
    padding: 1rem; background: rgba(0, 0, 0, .55);
}
.chat-report-sheet[hidden] { display: none; }
.chat-report-card {
    width: min(30rem, 100%); max-height: 85vh; overflow-y: auto;
    padding: 1.25rem; border-radius: 1rem;
    background: var(--surface, #241528); border: 1px solid var(--panel-line);
    color: var(--ink);
}
.chat-report-card h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.chat-report-card p { margin: 0 0 .6rem; }
.chat-report-quote {
    margin: .6rem 0; padding: .55rem .75rem; border-radius: .5rem;
    background: rgba(255, 255, 255, .06); border-left: 3px solid var(--panel-line);
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem;
}
.chat-report-status { font-size: .85rem; color: var(--ink-dim); }
.chat-report-row { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.chat-report-row button { margin: 0; padding: .5rem .9rem; font-size: .85rem; border-radius: .6rem; }

@media (prefers-reduced-motion: reduce) {
    .chat-log { scroll-behavior: auto; }
}