/* ==========================================================================
   Chat workspace: the list, the search panel and the conversation.

   Layout: .chats-page > .chats-page-frame > .chat-workspace
             .chat-workspace-side          list (.chat-list-page) or search (.chat-search-page)
             .chat-workspace-conversation  the open conversation or .chat-empty-pane

   The side column shows one panel at a time, chosen by data-chat-mode on the
   workspace. On phones only one column is visible: the side column until a
   conversation is open (data-chat-active="1"), then the conversation.

   Colours come from the tokens below so the three panels stay consistent.
   Buttons are the standard .classowl-button with the generic `compact` and
   `icon-only` modifiers from classowl-ui.css, and nothing here needs !important
   ========================================================================== */

/* The colour tokens, shared with the moderation pages (.chat-moderation) so both use one set of greys and blues.
   Muted and faint were 3.6:1 and 2.7:1 on the chat backgrounds, under the 4.5:1 WCAG AA asks of text; these are
   5.5:1 and 4.8:1 there, and faint stays the lighter of the two */
.chats-page, .chat-moderation {
    --chat-text: #282828;
    --chat-text-heading: #1f3c77;
    --chat-text-muted: #4e6286;
    --chat-text-faint: #5b6f8f;
    --chat-border: #e1e7f0;
    --chat-surface: #fff;
    --chat-surface-alt: #f7f9fd;
    --chat-surface-hover: #f7faff;
    --chat-surface-unread: #f3f7ff;
    --chat-surface-selected: #eaf3ff;
    --chat-accent: #3080eb;
    --chat-accent-soft: #edf2fb;
    --chat-warning-text: #9b6c15;
    --chat-warning-surface: #fff4d8;
    --chat-warning-border: #f8b33c;
    --chat-danger-text: #b42f2f;
    --chat-danger-surface: #fff4f4;
    --chat-radius: 12px;
    --chat-side-padding: 20px;
}

.chats-page {
    /* The fixed header is 61px and overlaps the first content pixel, so 41 on top keeps the visible gap at 40 on every side */
    padding: 41px 40px 40px;
    font-size: 14px;
}
.chats-page .none { display: none !important; }
.chats-page-frame { box-sizing: border-box; width: 100%; max-width: none; padding: 0; overflow: hidden; }

/* ---------- workspace grid ---------- */

/* 100vh less the 60px header and the page's 41px above and 40px below, so the frame keeps the same gap on all four sides */
.chat-workspace { display: grid; grid-template-columns: clamp(320px, 26vw, 430px) minmax(0, 1fr); width: 100%; height: calc(100vh - 141px); min-height: 620px; }
.chat-workspace-side { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--chat-border); background: var(--chat-surface); }
.chat-workspace-conversation { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-surface-alt); }

.chat-list-page, .chat-search-page { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.chat-workspace[data-chat-mode="search"] .chat-list-page { display: none; }
.chat-workspace[data-chat-mode="list"] .chat-search-page { display: none; }

/* ---------- side column header (shared by list and search) ---------- */

/* 18 + 36 (title row) + 18 = 72px, the same height as the conversation header (14 + 44 avatar + 14), so both bottom borders share one line */
.chat-side-header { flex: 0 0 auto; padding: 18px var(--chat-side-padding); border-bottom: 1px solid var(--chat-border); }
.chat-side-header-row { display: flex; align-items: center; gap: 12px; }
.chat-side-header h1 { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--chat-text-heading); font-size: 22px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-side-header .classowl-button { flex: 0 0 auto; width: auto; margin: 0; }
.chat-side-header .classowl-button .fa { margin-right: 4px; }

/* Title row: the gear sits after the title as a quiet icon, New chat at the right edge, and a small accent dot on the gear means the unread-only filter is on */
.chat-side-header-row > .chat-icon-button { margin-left: -6px; }
.chat-side-header-row > [data-chat-open-search] { margin-left: auto; }
.chat-list-settings-button { position: relative; }
/* The cog glyph sits high in its box, and 2px down puts its centre on the title's x-height */
.chat-list-settings-button .fa { position: relative; top: 2px; }
.chat-list-settings-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border: 2px solid var(--chat-surface); border-radius: 50%; background: var(--chat-accent); }

/* Settings panel: under the title row, left edge under the gear, the same surface as the conversation info card */
.chat-side-header { position: relative; }
.chat-list-settings { position: absolute; z-index: 6; top: calc(100% - 6px); left: var(--chat-side-padding); width: 280px; padding: 18px 20px 20px; border: 1px solid #e5e5e5; border-radius: 12px; background: var(--chat-surface); box-shadow: 0 8px 24px rgba(31, 60, 119, .14); }
.chat-list-settings-title { margin: 0 32px 6px 0; color: var(--chat-text-heading); font-size: 15px; font-weight: 600; line-height: 24px; }
.chat-list-settings-close { position: absolute; top: 16px; right: 16px; }
.chat-list-settings .classowl-toggle { padding: 8px 0; line-height: 20px; }
.chat-list-settings .classowl-toggle > .caption { color: var(--chat-text-heading); font-size: 13px; }
.chat-list-settings .classowl-toggle > input:checked ~ .toggle { background-color: var(--chat-accent); }
/* The switches take Tab and Space: the shared toggle hides its checkbox with display:none, so here it
   is only made invisible, the way .classowl-toggle.hit-self does it (the label keeps taking clicks) */
.chat-list-settings .classowl-toggle > input { display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.chat-list-settings .classowl-toggle > input:focus-visible ~ .toggle { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-list-settings-hint { margin: 0 0 0 46px; color: var(--chat-text-faint); font-size: 11px; line-height: 15px; text-align: left; }

/* Search row: the magnifier at the left end of the frame, the date filter as an icon button at the right. The picker hangs off an off-screen input and the chosen day shows as a chip */
.chat-list-search { margin: 12px 0 0; }
.chat-list-search > .input { padding-right: 36px; }
.chat-list-search > .chat-list-date-button { position: absolute; top: 4px; right: 4px; }
.chat-search-min-hint { margin: 6px 0 0; color: var(--chat-text-faint); font-size: 11px; }
.chat-list-date-picker { position: relative; height: 0; margin: 0; }
.chat-list-date-picker > .chat-list-date-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.chat-list-date-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 6px 4px 10px; border-radius: 14px; color: var(--chat-text-muted); background: var(--chat-accent-soft); font-size: 12px; line-height: 18px; }
.chat-list-date-chip .fa-calendar { color: var(--chat-accent); }
.chat-list-date-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text-muted); cursor: pointer; font-size: 11px; }
.chat-list-date-clear:hover, .chat-list-date-clear:focus-visible { color: var(--chat-text-heading); background: rgba(31, 60, 119, .1); outline: none; }

/* ---------- icon buttons ---------- */

/* Every flat icon control in the workspace: 28px square, no frame, grey glyph, light square on hover. That is the list settings and date filter, the search back arrow, info, card close, composer tools and message actions */
.chat-icon-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--chat-text-faint); font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.chat-icon-button:hover, .chat-icon-button[aria-expanded="true"] { color: var(--chat-text-muted); background: var(--chat-surface-alt); text-decoration: none; }
.chat-icon-button.active, .chat-icon-button[aria-pressed="true"] { color: var(--chat-accent); }
.chat-icon-button:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 1px; }
.chat-icon-button .fa { display: block; }

.chat-list-history-only { flex: 0 0 auto; margin: 12px var(--chat-side-padding) 0; padding: 10px 12px; border: 1px solid var(--chat-warning-border); border-radius: 4px; color: var(--chat-text-muted); background: var(--chat-warning-surface); }
/* Status lines: muted while loading with a spinner, red on error, collapsed when empty */
.chat-status { color: var(--chat-text-muted); }
.chat-status[data-state="error"] { color: var(--chat-danger-text); }
.chat-status .fa-spinner { margin-right: 6px; }
.chat-list-status { flex: 0 0 auto; padding: 0 var(--chat-side-padding); }
.chat-list-status[data-state] { padding-top: 12px; padding-bottom: 12px; }
.chat-side-loading { flex: 1 1 auto; display: grid; place-items: center; min-height: 160px; color: var(--chat-text-faint); font-size: 24px; }
/* Chat switched off: the red notice replaces everything, the read-only notice included */
.chat-list-page.unavailable .chat-list-history-only { display: none; }
.chat-list-unavailable { margin: 20px var(--chat-side-padding); padding: 16px; border: 1px solid #ef4949; border-radius: 4px; color: var(--chat-danger-text); background: var(--chat-danger-surface); }
.chat-list-page.unavailable .chat-list-items, .chat-list-page.unavailable .chat-list-empty, .chat-list-page.unavailable .chat-side-pagination { display: none; }
/* A rule, not a toggled "none": the button is hidden on the server for people who cannot start, and must stay hidden when chat comes back */
.chat-list-page.unavailable [data-chat-open-search] { display: none; }

/* ---------- person rows (list rows and search results share this) ---------- */

.chat-person-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px var(--chat-side-padding); border-bottom: 1px solid var(--chat-border); color: var(--chat-text); text-decoration: none; }
.chat-person-row, .chat-person-row:hover, .chat-person-row:focus, .chat-person-row * { text-decoration: none; }
.chat-person-row:hover { background: var(--chat-surface-hover); }
.chat-person-row:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: -2px; }
.chat-person-row.selected, .chat-person-row.selected:hover { background: var(--chat-surface-selected); box-shadow: inset 3px 0 var(--chat-accent); }
/* A row whose conversation is loading keeps its look, because dimming it made every switch flicker. aria-busy stays for assistive tech */

.chat-avatar { position: relative; flex: 0 0 auto; display: block; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #6b56c9; color: #fff; line-height: 48px; text-align: center; font-size: 15px; font-weight: 600; }
.chat-avatar img { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-avatar-initials { display: block; }

.chat-person-main { flex: 1; min-width: 0; }
.chat-person-topline, .chat-person-details { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-person-name { flex: 1; overflow: hidden; color: var(--chat-text-heading); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-details { margin-top: 3px; color: var(--chat-text-muted); font-size: 12px; }
.chat-person-role, .chat-list-read-only { padding: 2px 7px; border-radius: 10px; background: var(--chat-accent-soft); white-space: nowrap; }
.chat-person-role:empty { display: none; }
/* On the selected row the pill's usual tint would vanish into the row's, so a deeper tint keeps it a pill rather than a white patch */
.chat-person-row.selected .chat-person-role { background: #d8e5fa; }
.chat-person-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- conversation list ---------- */

.chat-list-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-list-page.is-empty .chat-list-items { flex: 0 0 auto; }
.chat-list-row.unread { background: var(--chat-surface-unread); }
.chat-list-row.unread .chat-list-preview { color: var(--chat-text-heading); font-weight: 600; }
.chat-list-row.read-only { opacity: .78; }
.chat-list-time { flex: 0 0 auto; color: var(--chat-text-faint); font-size: 12px; }
.chat-list-read-only { color: var(--chat-warning-text); background: var(--chat-warning-surface); }
.chat-list-unread { flex: 0 0 auto; min-width: 20px; margin-left: auto; padding: 2px 6px; border-radius: 10px; color: #fff; background: var(--chat-accent); font-size: 11px; font-weight: 600; text-align: center; }
.chat-list-page.no-preview .chat-list-preview { display: none; }
/* One line with an ellipsis, whatever the text: a line clamp broke after "You:" and hid a message that starts with one long word */
.chat-list-preview { display: block; overflow: hidden; margin-top: 4px; color: var(--chat-text-muted); line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }

/* Empty state shared by the list ("no conversations") and the search ("type a name", "nobody matched") */
.chat-side-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px var(--chat-side-padding); text-align: center; color: var(--chat-text-muted); }
.chat-side-empty .fa { color: #b9c8df; font-size: 40px; }
.chat-side-empty .title { color: var(--chat-text-heading); font-size: 16px; font-weight: 600; }
.chat-side-empty p { margin: 0; }
.chat-side-empty .classowl-button { width: auto; margin-top: 6px; }

/* The paging bar of the side column, list and search alike. The composer opposite is 1 + 20 + 22 + 14 + 28 + 12 = 97px for a one-line draft */
.chat-side-pagination { flex: 0 0 auto; display: flex; justify-content: space-between; margin: 0; padding: 13px var(--chat-side-padding); border-top: 1px solid var(--chat-border); }
.chat-side-pagination .classowl-button { width: auto; margin: 0; }
.chat-side-pagination .classowl-button:disabled { cursor: default; }

/* ---------- find a person ---------- */

/* The back arrow is a quiet icon whose glyph lines up with the left content edge, like the calendar in the list */
.chat-side-header-row > .chat-search-back { margin-left: -6px; margin-right: 2px; }
.chat-search-form { margin-top: 12px; }
.chat-search-query { margin: 0; }
/* Filters sit two per row, and a filter alone in its row takes the full width. All 36px tall, 3px radius like the input above */
.chat-search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-search-field { flex: 1 1 calc(50% - 4px); min-width: 0; margin: 0; }
.chat-search-multiselect > .drop-icon { border-radius: 3px; }
.chat-search-multiselect > .drop-icon > .frame > .title, .chat-search-multiselect > .drop-icon > .frame > .empty { font-size: 14px; }
.chat-search-multiselect.value-empty > .drop-icon > .frame > .empty { color: var(--chat-text); }

.chat-search-summary { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; padding: 10px var(--chat-side-padding) 8px; color: var(--chat-text-muted); font-size: 12px; line-height: 18px; }
.chat-search-count strong { color: var(--chat-text-heading); }
.chat-search-clear { margin-left: auto; padding: 0; border: 0; background: none; color: var(--chat-accent); font-size: 12px; line-height: 18px; cursor: pointer; }
.chat-search-clear:hover { text-decoration: underline; }
.chat-search-results { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.chat-search-results:not(:empty) { border-top: 1px solid var(--chat-border); }
.chat-search-status { margin: 0; }
.chat-search-row { cursor: default; }
.chat-search-row.restricted .chat-person-name { color: var(--chat-text-muted); }
.chat-search-restriction { display: block; margin-top: 4px; color: var(--chat-warning-text); font-size: 12px; }
.chat-search-action { flex: 0 0 auto; min-width: 88px; }
.chat-search-action:disabled { opacity: .5; cursor: default; }

/* ---------- conversation pane ---------- */

/* "Select a conversation" fits the list; next to Find a person the pane asks for a person instead */
.chat-workspace[data-chat-mode="search"] .chat-empty-pane-list, .chat-workspace[data-chat-mode="list"] .chat-empty-pane-search { display: none; }
.chat-empty-pane { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; color: var(--chat-text-muted); font-size: 16px; text-align: center; }
.chat-empty-pane .fa { color: #b9c8df; font-size: 48px; }

.chat-conversation { display: flex; flex: 1; flex-direction: column; width: 100%; min-height: 0; margin: 0; }
/* Avatar and name are one button that opens the info card, and the header is the card's anchor */
.chat-conversation-header { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 24px; border-bottom: 1px solid var(--chat-border); background: var(--chat-surface); }
.chat-conversation-partner { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; border-radius: 6px; cursor: pointer; }
.chat-conversation-partner:hover .chat-conversation-title { color: var(--chat-accent); }
.chat-conversation-partner:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-profile-card { position: absolute; z-index: 6; top: calc(100% - 6px); right: 12px; box-sizing: border-box; width: 362px; max-width: calc(100% - 24px); padding: 20px; border: 1px solid #e5e5e5; border-radius: 12px; background: var(--chat-surface); box-shadow: 0 8px 24px rgba(31, 60, 119, .14); }
.chat-profile-card-close { position: absolute; top: 10px; right: 10px; }
.chat-profile-card-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--chat-border); }
.chat-profile-card-avatar { width: 56px; height: 56px; line-height: 56px; font-size: 18px; }
.chat-profile-card-who { min-width: 0; }
.chat-profile-card-name { overflow: hidden; color: var(--chat-text-heading); font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-profile-card-role { display: inline-block; margin-top: 6px; font-size: 12px; }
.chat-profile-card-role:empty { display: none; }
.chat-profile-card-rows { margin: 0; padding: 0; }
.chat-profile-card-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--chat-border); font-size: 13px; }
.chat-profile-card-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.chat-profile-card-rows dt { flex: 0 0 auto; margin: 0; color: var(--chat-text-muted); font-weight: 400; }
.chat-profile-card-rows dd { flex: 0 1 auto; margin: 0; overflow: hidden; color: var(--chat-text-heading); font-weight: 600; text-align: right; text-overflow: ellipsis; }
.chat-profile-card-link { display: block; margin-top: 14px; color: var(--chat-accent); font-size: 13px; font-weight: 600; }
.chat-conversation-info { margin-right: -6px; }
.chat-conversation-back { display: none; }
.chat-conversation-avatar { width: 44px; height: 44px; line-height: 44px; font-size: 16px; }
.chat-conversation-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--chat-text-heading); font-size: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* The history is the pane's only scroll container */
/* Same 24px side padding as the header and the composer, so avatar, bubbles and field share one left edge */
.chat-conversation-history { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; }
.chat-conversation-history .classowl-button.chat-conversation-load-older { align-self: center; flex: 0 0 auto; margin-bottom: 12px; }
.chat-conversation-status { flex: 0 0 auto; text-align: center; }
.chat-conversation-status[data-state] { padding: 8px 0 12px; }
.chat-conversation-status[data-state="loading"] { flex: 1 1 auto; display: grid; place-items: center; padding: 0; color: var(--chat-text-faint); font-size: 24px; }
.chat-conversation-status[data-state="loading"] .fa-spinner { margin: 0; }
.chat-conversation-status[data-state="loading"] + .chat-conversation-messages { display: none; }
.chat-conversation-messages { display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px; margin-top: auto; }
.chat-conversation.is-empty .chat-conversation-messages { display: none; }
.chat-conversation-empty { display: grid; flex: 1 1 auto; place-items: center; padding: 28px; text-align: center; color: var(--chat-text-muted); }

.chat-day { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; color: var(--chat-text-faint); font-size: 12px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; border-top: 1px solid var(--chat-border); }
.chat-day span { flex: 0 0 auto; }
.chat-unread-separator { color: var(--chat-accent); font-weight: 600; }
.chat-unread-separator::before, .chat-unread-separator::after { border-top-color: var(--chat-accent); }
/* Last child of the scrolling history, where sticky keeps it in view while the user is scrolled up */
.chat-jump-new { position: sticky; bottom: 4px; z-index: 2; align-self: flex-end; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--chat-border); border-radius: 999px; background: var(--chat-surface); color: var(--chat-accent); box-shadow: 0 4px 12px rgba(31, 60, 119, .14); cursor: pointer; font-size: 13px; font-weight: 600; }
.chat-jump-new:hover { background: var(--chat-surface-alt); }
.chat-jump-count:empty { display: none; }

.chat-message { position: relative; align-self: flex-start; display: flex; flex-direction: column; width: fit-content; max-width: 72%; padding: 10px 14px; border: 1px solid #e5ebf4; border-radius: var(--chat-radius) var(--chat-radius) var(--chat-radius) 4px; background: var(--chat-surface); color: #314a70; box-shadow: 0 2px 8px rgba(31, 60, 119, .05); }
.chat-message.mine { align-self: flex-end; border-color: var(--chat-accent); border-radius: var(--chat-radius) var(--chat-radius) 4px var(--chat-radius); background: var(--chat-accent); color: #fff; }
.chat-message.mine.failed { border-color: var(--chat-danger-text); background: #c03c38; }
.chat-message.deleted .chat-message-body { color: var(--chat-text-faint); font-style: italic; }
.chat-message.mine.deleted .chat-message-body { color: rgba(255, 255, 255, .75); }
.chat-message-body { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 20px; }
/* Links in a message are real links, and long ones wrap like the text around them */
.chat-message-body a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.chat-message.mine .chat-message-body a { color: #fff; }
/* Slots for attachments and a per-message menu; the actions slot holds the copy button (renderParts in chat-conversation-view.js) */
.chat-message-attachments:empty, .chat-message-actions:empty { display: none; }
.chat-message-actions { position: absolute; top: 4px; right: -32px; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity 150ms ease; }
.chat-message.mine .chat-message-actions { right: auto; left: -32px; }
.chat-message:hover .chat-message-actions, .chat-message:focus-within .chat-message-actions { opacity: 1; }
/* A touch screen has no hover: Copy and Report were invisible there (and could still be tapped by accident) */
@media (hover: none) { .chat-message-actions { opacity: 1; } }
.chat-message-action { position: relative; font-size: 14px; }
/* Copy feedback (copyMessage): the check turns accent and a small "Copied" label sits above it for 1.5 s */
.chat-message-actions.is-copied { opacity: 1; }
.chat-message-actions.is-copied [data-chat-copy] { color: var(--chat-accent); }
.chat-message-copied { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 10px; background: var(--chat-accent); color: #fff; font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; }
/* A message continuing the previous one from the same sender sits closer to it. Every bubble keeps its time, because hiding it on the last message of a run read as missing */
.chat-message-continued { margin-top: -6px; }
.chat-message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; color: var(--chat-text-faint); font-size: 11px; }
.chat-message.mine .chat-message-meta { color: rgba(255, 255, 255, .85); }
.chat-message-state { display: inline-flex; align-items: center; }
.chat-message-state:empty { display: none; }
.chat-message-state .fa + .fa { margin-left: -6px; }
/* Read is the state the sender waits for, so it is the opaque one. Both ticks
   sit on the blue bubble, where every legible colour is a shade of white, so
   the hue cannot carry the difference - the count does, and opacity ranks
   them. #bfe3ff measured 2.89:1 against the bubble, under the 3:1 WCAG 1.4.11
   asks of a graphical element that means something */
.chat-message-state[data-state="read"] { color: #fff; }
.chat-message.mine.failed .chat-message-state { color: #fff; }
.chat-message-failed-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
/* Why the message did not go out, or that it is being retried: white on the blue or the red bubble */
.chat-message-reason { margin-top: 4px; font-size: 12px; line-height: 16px; text-align: right; color: #fff; }
.chat-message .classowl-button.chat-message-retry, .chat-message .classowl-button.chat-message-discard { height: 26px; margin: 0; padding: 0 10px; line-height: 26px; font-size: 12px; }
/* The glass button is muted blue for a light background, which on the failed
   bubble measured 1.02:1 - the outline showed and the word did not. Solid
   white with the danger red on it reads as an action and clears AA */
.chat-message.mine.failed .classowl-button.chat-message-retry, .chat-message.mine.failed .classowl-button.chat-message-discard { color: var(--chat-danger-text); border-color: transparent; background: #fff; }

.chat-conversation-restricted { flex: 0 0 auto; padding: 12px 24px; border-top: 1px solid var(--chat-border); color: var(--chat-text-muted); background: var(--chat-surface); text-align: center; }
.chat-conversation-restricted .fa { margin-right: 6px; }
.chat-conversation-mute-hint { flex: 0 0 auto; padding: 8px 24px; color: var(--chat-warning-text); background: var(--chat-warning-surface); font-size: 13px; text-align: center; }
.chat-conversation-mute-hint .fa { margin-right: 6px; }

/*
   The composer is the bottom strip of the pane, under a 1px line, with no box
   inside a box: the draft on top, the toolbar under it. The textarea grows
   with its content up to five lines (chat-conversation-view.js sets the
   height) and the toolbar keeps its place under the text. Emoji and microphone
   sit left (28px squares, 4px apart), the Enter hint and send sit right - a
   quiet grey arrow while the field is empty, a blue square once there is text,
   which is .has-text set by the view alongside the disabled flag. There is no
   frame and so no focus ring; the caret shows the focus.

   One line: 1 + 20 + 22 + 14 + 28 + 12 = 97px. The text starts 24px from the
   left, on the bubbles' edge, and the tool glyphs sit on that same edge: a
   28px button holds a 12 to 14px glyph, so the bar is inset 16px left and 17px
   right, with the send glyph on the right edge
*/
.chat-composer { position: relative; flex: 0 0 auto; margin: 0; padding: 0; border-top: 1px solid var(--chat-border); background: var(--chat-surface); }
/* 20px top + 22px line = 42px for one line, 20 + 5 x 22 = 130px at most; keep in step with COMPOSER_MAX_HEIGHT_PX */
.chat-composer-input { display: block; box-sizing: border-box; width: 100%; height: 42px; min-height: 42px; max-height: 130px; margin: 0; padding: 20px 24px 0; border: 0; border-radius: 0; background: transparent; color: var(--chat-text); font-size: 14px; line-height: 22px; resize: none; overflow-y: auto; outline: none; box-shadow: none; }
.chat-composer-input::placeholder { color: var(--chat-text-faint); }
.chat-composer-bar { display: flex; align-items: center; height: 28px; margin: 14px 17px 12px 16px; }
.chat-composer-tools { display: flex; flex: 1 1 auto; align-items: center; gap: 4px; }
.chat-composer-send { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--chat-text-faint); font-size: 14px; line-height: 1; cursor: default; transition: background-color 150ms ease, color 150ms ease; }
/* Optical: the smiley's ink is a circle and the microphone's mass sits high, so 1px up puts them on one line */
[data-chat-emoji] .fa { position: relative; top: -1px; }
/* While dictation runs the microphone turns red and breathes, until the browser stops listening */
.chat-composer-tool.is-listening, .chat-composer-tool.is-listening:hover { color: var(--chat-danger-text); background: var(--chat-danger-surface); animation: chat-listening 1.2s ease-in-out infinite; }
@keyframes chat-listening { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.chat-composer.has-text .chat-composer-send { color: #fff; background: var(--chat-accent); cursor: pointer; }
.chat-composer.has-text .chat-composer-send:hover { background: #2470d6; }
.chat-composer-send:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 1px; }
.chat-composer-count { flex: 0 0 auto; margin-right: 12px; color: var(--chat-text-faint); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
.chat-composer-count.is-near { color: var(--chat-warning-text); }
.chat-composer-count.is-full { color: var(--chat-danger-text); font-weight: 600; }
.chat-report-count { display: block; margin-top: 4px; color: var(--chat-text-faint); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.chat-report-count.is-full { color: var(--chat-danger-text); font-weight: 600; }
.chat-composer-hint { flex: 0 1 auto; margin-right: 12px; overflow: hidden; color: var(--chat-text-faint); font-size: 11px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
/* The emoji picker: eight 32px cells per row, above the composer, on the left edge of the toolbar */
.chat-composer-emoji { position: absolute; left: 16px; bottom: calc(100% + 6px); z-index: 5; display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; box-sizing: border-box; padding: 8px; border: 1px solid #e5e5e5; border-radius: 3px; background: var(--chat-surface); box-shadow: 0 4px 16px rgba(31, 60, 119, 0.12); }
.chat-composer-emoji button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.chat-composer-emoji button:hover, .chat-composer-emoji button:focus-visible { background: var(--chat-surface-alt); outline: none; }

/* ---------- phones: one column at a time ---------- */

@media screen and (max-width: 800px) {
    .chats-page { padding: 12px; }
    .chats-page-frame { padding: 0; }
    .chat-workspace { display: block; height: auto; min-height: 0; }
    .chat-workspace-side { display: block; min-height: 0; border-right: 0; }
    .chat-list-page, .chat-search-page { height: auto; }
    .chat-list-items, .chat-search-results { overflow: visible; }
    /* The open conversation fills the screen below the 60px header and the page's 12px padding, so the history
       stays the scroll container it is on wide screens: the chat opens at the newest message and the composer stays
       at the bottom. dvh after vh follows the mobile address bar where the browser knows it */
    .chat-workspace[data-chat-active="1"] .chat-workspace-conversation { height: calc(100vh - 84px); height: calc(100dvh - 84px); min-height: 360px; }
    .chat-workspace[data-chat-active="1"] .chat-workspace-side,
    .chat-workspace[data-chat-active="0"] .chat-workspace-conversation { display: none; }
    .chat-conversation-back { display: inline-flex; margin-left: -6px; }
    .chat-conversation-history { padding: 12px 16px 16px; }
    .chat-side-header { padding: 14px 16px; }
    .chat-person-row { min-height: 72px; padding: 12px 16px; gap: 10px; }
    .chat-message { max-width: 92%; }
    .chat-conversation-header { padding: 12px 16px; }
    .chat-composer-input { padding: 16px 16px 0; height: 38px; min-height: 38px; max-height: 126px; }
    .chat-composer-bar { margin: 8px 9px 12px 8px; }
    .chat-composer-hint { display: none; }
}

/* ---------- report dialog ---------- */
/* Looks like the app's own modals - .classowl-modal-form in classowl-ui.css (Create Class and the rest): same backdrop,
   container, title, x, labels and buttons, with the values copied from there. It does not carry that class on purpose:
   Main.js hides any visible .classowl-modal-form on its own, behind this module's state. Sits inside .chat-workspace
   so the page teardown takes it down. Hidden by .none, which is !important under .chats-page */
.chat-report { position: fixed; z-index: 210; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; }
.chat-report-container { box-sizing: border-box; position: relative; width: 480px; max-width: calc(100% - 32px); margin: 100px auto 20px; padding: 35px 25px 25px; background-color: #fff; border: 1px solid #D8DDE6; border-radius: 5px; box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.35); }
.chat-report-close { position: absolute; z-index: 2; top: 35px; right: 25px; width: 20px; height: 20px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 36px; line-height: 20px; text-align: center; color: #657FAC; opacity: 0.4; cursor: pointer; }
.chat-report-close:focus-visible { opacity: 1; outline: 2px solid #3080EB; outline-offset: 2px; }
.chat-report-form-title { margin: -6px 0 0; padding-right: 30px; color: #657FAC; font-size: 24px; font-weight: 300; line-height: 32px; }
.chat-report-inner { margin-top: 20px; }

.chat-report-question, .chat-report-lead { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: #657FAC; }
.chat-report-reasons { display: flex; flex-direction: column; }
.chat-report-reason { padding: 6px 0; }
/* The app checkbox hides its input with display:none, which would take the radios out of the keyboard's reach. Here the input stays,
   invisible, over the box; a radio is round, and the focus ring goes on the box */
.chat-report .classowl-checkbox > input { display: block; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.chat-report .classowl-checkbox label:before { border-radius: 50%; }
.chat-report .classowl-checkbox input:focus-visible + label:before { box-shadow: 0 0 0 3px rgba(48, 128, 235, 0.35); }
.chat-report-field { display: flex; flex-direction: column; margin-top: 14px; }
.chat-report-field > label { margin-bottom: 4px; font-size: 12px; line-height: 18px; color: #657FAC; }

.chat-report-quote { padding: 10px 12px; border: 1px solid #e5e5e5; border-radius: 3px; background: #f7f9fd; }
.chat-report-quote-text { font-size: 14px; line-height: 21px; color: #282828; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-report-quote-time { display: block; margin-top: 4px; font-size: 12px; color: #999; text-align: right; }
.chat-report-partner { padding: 10px 12px; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 14px; font-weight: 600; color: #282828; }
.chat-report-reason-label { margin: 14px 0 4px; font-size: 12px; line-height: 18px; color: #657FAC; }
.chat-report-reason-chosen { margin: 0; font-size: 14px; font-weight: 600; line-height: 21px; color: #282828; }
.chat-report-reason-chosen + .chat-report-reason-label { margin-top: 12px; }
/* The comment as typed: line breaks kept, a long one scrolls instead of growing the dialog */
.chat-report-details-chosen { max-height: 8em; overflow-y: auto; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-report-step-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; text-align: center; }
.chat-report-done-icon { font-size: 44px; color: #10B163; }
.chat-report-done-title { margin: 0; font-size: 18px; font-weight: 600; color: #282828; text-align: center; }
.chat-report-done-text { margin: 0; font-size: 14px; line-height: 21px; color: #657FAC; text-align: center; }
.chat-report-error { margin-top: 12px; font-size: 13px; font-weight: 600; color: #ef4949; }
.chat-report-ctrls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.chat-report-ctrls .blue-ns { margin-left: auto; }

/* One element, three screens: data-step decides which section and which buttons show */
.chat-report[data-step="reason"]  .chat-report-step-confirm,
.chat-report[data-step="reason"]  .chat-report-step-done,
.chat-report[data-step="confirm"] .chat-report-step-reason,
.chat-report[data-step="confirm"] .chat-report-step-done,
.chat-report[data-step="done"]    .chat-report-step-reason,
.chat-report[data-step="done"]    .chat-report-step-confirm { display: none; }
.chat-report[data-step="reason"]  .chat-report-back,
.chat-report[data-step="reason"]  .chat-report-submit,
.chat-report[data-step="reason"]  .chat-report-ok,
.chat-report[data-step="confirm"] .chat-report-cancel,
.chat-report[data-step="confirm"] .chat-report-next,
.chat-report[data-step="confirm"] .chat-report-ok,
.chat-report[data-step="done"]    .chat-report-cancel,
.chat-report[data-step="done"]    .chat-report-back,
.chat-report[data-step="done"]    .chat-report-next,
.chat-report[data-step="done"]    .chat-report-submit { display: none; }

/* Phone: the same full-screen treatment the app's modals get (classowl-ui.css, max-width 400px) */
@media screen and (max-width: 400px) {
    .chat-report-container { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; padding-top: 0; border-radius: 0; }
    .chat-report-close { top: 0; left: 0; right: auto; width: 46px; height: 46px; line-height: 46px; color: #2D6DF2; opacity: 1; }
    .chat-report-form-title { margin: 0 -25px; padding: 16px 25px 14px 46px; border-bottom: 1px solid rgb(45, 109, 242, 0.2); font-size: 14px; font-weight: bold; line-height: 16px; text-align: center; color: #2D6DF2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-report-inner { margin-bottom: 25px; }
}

/* ---------- conversation menu ---------- */
.chat-conversation-header { position: relative; }
.chat-conversation-menu { position: absolute; top: 100%; right: 12px; z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 6px; border: 1px solid var(--chat-border); border-radius: 8px; background: var(--chat-surface); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.chat-conversation-menu-item { padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.chat-conversation-menu-item:hover, .chat-conversation-menu-item:focus { background: var(--chat-accent-soft); }

/* Chats carries a submenu (moderation) and an unread bubble. The bubble keeps the place it has on
   every other item, clear of the icon, and while it shows, the collapsed sidebar hides the arrow
   it would cover (without :has support the two overlap) */
aside:not(.expanded) > nav > ul > li.chats:has(> a .bubble:not(:empty)) > .angle { display: none; }
/* its submenu items carry bubbles too (new reports): room for them after the label */
aside > nav > ul > li.chats > ul.subitems > li > a { padding-right: 34px; }