/* =========================================================
   XERION — CHAT
========================================================== */


/* =========================================================
   CHAT LAYOUT
========================================================== */

.chat-layout {
    width: 100%;
    height: calc(100vh - var(--topbar-height));

    display: flex;

    overflow: hidden;
}


/* =========================================================
   CONVERSATION SIDEBAR
========================================================== */

.conversation-sidebar {
    width: 250px;
    min-width: 250px;
    height: 100%;

    display: flex;
    flex-direction: column;

    border-right: 1px solid var(--border);

    background: var(--white);
}


/* =========================================================
   CONVERSATION SIDEBAR — RESIZE HANDLE
========================================================== */

.conversation-resize-handle {
    width: 5px;
    height: 100%;
    flex-shrink: 0;

    margin-left: -3px;

    cursor: col-resize;

    position: relative;
    z-index: 5;
}

.conversation-resize-handle::after {
    content: "";

    position: absolute;
    top: 0;
    left: 2px;

    width: 1px;
    height: 100%;

    background: transparent;

    transition: background var(--transition-fast);
}

.conversation-resize-handle:hover::after,
.conversation-resize-handle.is-resizing::after {
    background: var(--blue);
}

.conversation-header {
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    border-bottom: 1px solid var(--border);

    color: var(--text);

    font-size: 12px;
    font-weight: 650;
}

.conversation-header button {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    background: transparent;
    color: var(--muted);

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.conversation-header button:hover {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text);
}

.conversation-header button svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   CONVERSATION SEARCH
   Phase 13: conversations.js already had a complete, real
   client-side filter (searchQuery state, filterConversations(),
   search()/clearSearch() public methods) listening for input on
   #conversationSearch — the input element itself never existed
   anywhere in the markup, only the bare icon button did, so the
   filter logic was permanently unreachable. Added for real here.
========================================================== */

.conversation-search {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 8px 10px 4px;
    padding: 0 10px;

    height: 34px;

    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    background: var(--surface-soft);

    color: var(--muted);
}

.conversation-search svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;
}

.conversation-search input {
    flex: 1;
    min-width: 0;

    border: none;
    outline: none;
    background: transparent;

    font-size: 13px;
    color: var(--text);
}

.conversation-search input::placeholder {
    color: var(--muted);
}


/* =========================================================
   CONVERSATION LIST
========================================================== */

.conversation-list {
    flex: 1;
    min-height: 0;

    padding: 9px 8px;

    overflow-y: auto;
}


/* =========================================================
   CONVERSATION GROUP
========================================================== */

.conversation-group {
    margin-bottom: 15px;
}

.conversation-group:last-child {
    margin-bottom: 0;
}

.conversation-group-title {
    padding: 5px 8px 7px;

    color: var(--muted-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}


/* =========================================================
   CONVERSATION ITEM

   Real bug (2026-09-29): this whole block used to describe a
   single-line icon+title+menu-button row that conversations.js
   stopped building a while ago -- the real, current markup
   (createConversationElement()) nests a two-line title+preview
   block under .conversation-item-main, a timestamp under
   .conversation-item-meta/.conversation-item-time, and plain
   text Rename/Delete buttons under .conversation-item-actions/
   .conversation-action -- none of which had a single rule
   anywhere in this file, so the sidebar's own conversation list
   rendered as bare text and default unstyled buttons. Rewritten
   to match the real DOM the JS actually produces (confirmed by
   reading conversations.js's createConversationElement/
   createConversationMenu directly, not guessed). The earlier
   CONVERSATION GROUP block above and .conversation-item-icon
   below are dead CSS for markup conversations.js no longer
   builds at all -- left alone, harmless, out of scope for this
   fix.
========================================================== */

.conversation-item {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 10px;
    margin-bottom: 2px;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    background: transparent;
    color: var(--text-soft);

    text-align: left;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.conversation-item:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.conversation-item.is-active {
    border-color: #e2e8f0;
    background: var(--blue-light);
    color: var(--text);
}

.conversation-item-icon {
    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--muted);
}

.conversation-item-icon svg {
    width: 15px;
    height: 15px;
}

.conversation-item.is-active .conversation-item-icon {
    color: var(--blue);
}


/* Main — the stacked title + preview block. */

.conversation-item-main {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-item-title {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--text);

    font-size: 12.5px;
    font-weight: 600;
}

.conversation-item-preview {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--muted);

    font-size: 11.5px;
    font-weight: 400;
}

.conversation-item.is-active .conversation-item-preview {
    color: var(--text-soft);
}


/* Meta — the relative-time label, shown by default, swapped for
   the actions row on hover/focus/active (see below). */

.conversation-item-meta {
    flex-shrink: 0;
}

.conversation-item-time {
    color: var(--muted-light);

    font-size: 10.5px;
    font-weight: 500;

    white-space: nowrap;
}


/* Actions — Rename/Delete, hidden until the row is hovered,
   focused (keyboard users), or already the active conversation,
   at which point they replace the timestamp in place. */

.conversation-item-actions {
    display: none;
    flex-shrink: 0;
    gap: 4px;
}

.conversation-item:hover .conversation-item-meta,
.conversation-item:focus-within .conversation-item-meta,
.conversation-item.is-active .conversation-item-meta {
    display: none;
}

.conversation-item:hover .conversation-item-actions,
.conversation-item:focus-within .conversation-item-actions,
.conversation-item.is-active .conversation-item-actions {
    display: flex;
}

.conversation-action {
    padding: 3px 8px;

    border: 1px solid var(--border);
    border-radius: 6px;

    background: var(--white);
    color: var(--muted);

    font-size: 10.5px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.conversation-action:hover {
    border-color: var(--blue);
    background: var(--blue-light);
    color: var(--blue-dark);
}

.conversation-action-danger:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}


/* =========================================================
   CHAT MAIN
========================================================== */

.chat-main {
    position: relative;

    min-width: 0;
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: var(--background);
}


/* =========================================================
   CHAT MESSAGES
========================================================== */

.chat-messages {
    flex: 1;
    min-height: 0;

    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;
}

/* Real message spacing/max-width — merged in from .message-list, a rule
   that was never actually applied to anything: chat.js appends
   .chat-message elements directly into #chatMessages/.chat-messages, no
   element with class="message-list" is ever created anywhere in the
   codebase (confirmed via grep — this file was its only reference). The
   effect was messages rendering flush against the panel edges instead
   of with real breathing room. Values kept identical to what
   .message-list already specified, just attached to the selector that
   actually exists in the DOM. */
.chat-messages > .chat-message {
    width: min(100%, 860px);
    margin: 0 auto;
}

.chat-messages {
    padding: 34px 28px 140px;
}


/* =========================================================
   CHAT EMPTY STATE
========================================================== */

.chat-empty-state {
    width: min(100%, 720px);

    min-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    padding: 40px 24px 120px;

    text-align: center;
}

.chat-empty-logo {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--white);

    box-shadow: var(--shadow-xs);
}

.chat-empty-logo img {
    width: 25px;
    height: 25px;

    object-fit: contain;
}

.chat-empty-state h1 {
    margin-bottom: 7px;

    color: var(--black);

    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.chat-empty-state p {
    max-width: 420px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.55;
}



/* =========================================================
   MESSAGE
========================================================== */

.chat-message {
    width: 100%;

    display: flex;
    gap: 13px;

    margin-bottom: 30px;
}

.chat-message:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MESSAGE AVATAR
========================================================== */

.chat-message-avatar {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--surface-soft);
    color: var(--muted);

    overflow: hidden;
}

.chat-message-avatar img {
    width: 20px;
    height: 20px;

    object-fit: contain;
}

.chat-message-avatar-user {
    border: 1px solid var(--border);

    background: var(--blue-light);
    color: var(--blue);

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   MESSAGE CONTENT
========================================================== */

.chat-message-content {
    min-width: 0;
    flex: 1;

    padding-top: 3px;
}

.chat-message-author {
    margin-bottom: 5px;

    color: var(--text);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}

.chat-message-text {
    color: var(--text);

    font-size: 14px;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.chat-message-text p {
    margin-bottom: 12px;
}

.chat-message-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TOOL CALLS
========================================================== */

.chat-tool-calls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-tool-calls:not(:empty) {
    margin-bottom: 10px;
}

.chat-tool-chip {
    width: fit-content;
    max-width: 100%;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px 11px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface-soft);
    color: var(--muted);

    font-size: 12px;
    font-weight: 550;
}

.chat-tool-chip::before {
    content: "";

    width: 7px;
    height: 7px;
    flex-shrink: 0;

    border-radius: 50%;

    background: var(--blue);

    animation: chat-tool-chip-pulse 1.1s ease-in-out infinite;
}

.chat-tool-chip.is-done {
    color: var(--text-soft);
}

.chat-tool-chip.is-done::before {
    background: var(--blue);

    animation: none;
}

.chat-tool-chip-label {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
 * MailMind's send-confirmation chip (Phase 16) — the only chip variant
 * that needs a real action row, not just a label. Relaxes the pill
 * shape into a normal rounded card once it grows a second row.
 */
.chat-tool-chip.has-actions {
    width: 100%;

    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    border-radius: var(--radius-small);
    padding: 10px 12px;
}

.chat-tool-chip-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    padding-left: 14px;
}

/* Which event a delete chip is about (title | time | place). */
.chat-tool-chip-detail {
    padding-left: 14px;

    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

@keyframes chat-tool-chip-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}


/*
 * Taak 4A (2026-10-16) — real web-search sources, as small, quiet
 * chips under an answer. Deliberately plain (no pulsing dot, no
 * accent color) so they read as a footnote, not another action row
 * like .chat-tool-chip above. Same wrapping row on mobile and
 * desktop -- no separate breakpoint needed.
 */
.chat-source-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    margin-top: 8px;
}

.chat-source-chip {
    max-width: 220px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    padding: 4px 10px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface-soft);
    color: var(--text-soft);

    font-size: 11px;
    font-weight: 550;

    text-decoration: none;
}

.chat-source-chip:hover {
    color: var(--text);
    border-color: var(--muted);
}


/* Taak 4 Stap B (2026-10-17): "want to know more" follow-up chips --
   deliberately <button>, not <a>, same chip look as source chips so
   they read as part of the same family, but visually on their own row
   since they're a different kind of action (sends a message, doesn't
   open a link). */
.chat-followup-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    margin-top: 8px;
}

.chat-followup-chip {
    max-width: 280px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    padding: 5px 12px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface-soft);
    color: var(--text-soft);

    font-size: 12px;
    font-weight: 550;

    cursor: pointer;
}

.chat-followup-chip:hover {
    color: var(--text);
    border-color: var(--muted);
    background: var(--surface);
}


/* Documents Step 1 (2026-10-17): GFM-style tables, rendered by the
   same renderMarkdown() the chat already uses and the new Documents
   editor preview reuses -- one set of rules styles both. */
.chat-table-wrap {
    overflow-x: auto;
    margin: 8px 0;
}

.chat-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.chat-table th,
.chat-table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}

.chat-table th {
    background: var(--surface-soft);
    font-weight: 600;
}


/* Documents Step 2 (2026-10-17): the chat card for a document the AI
   just created or edited -- no editor, no side panel, just this card
   plus a Download button. */
.chat-document-card {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 8px;
    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface-soft);
}

.chat-document-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: var(--text-soft);
}

.chat-document-card-info {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-document-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-document-card-status {
    font-size: 11px;
    color: var(--text-soft);
}

.chat-document-card-download {
    display: flex;
    align-items: center;
    gap: 6px;

    flex: 0 0 auto;

    padding: 5px 12px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--white);
    color: var(--text);

    font-size: 12px;
    font-weight: 550;

    cursor: pointer;
}

.chat-document-card-download:hover {
    border-color: var(--muted);
}

/* Documents Step 3 (2026-10-17): the Download button became a small
   menu (Markdown/Word/PDF/Tekst) -- additive only, the button itself
   is unchanged above. */
.chat-document-card-download-wrap {
    flex: 0 0 auto;
}

/* Problem 1 fix (2026-10-17): position:fixed, not absolute -- chat.js
   now sets top/left on open, computed from the button's own
   getBoundingClientRect() against the viewport. A viewport-relative
   fixed position escapes .chat-messages' own overflow/scroll clipping
   and painting order entirely (the actual root cause: an
   absolutely-positioned menu nested inside that scrolling list was
   never clipped to the card's own bounds, so it visually painted over
   whatever later message happened to be below it -- see the
   investigation report for the full explanation). No top/right here
   any more; JS always sets them before showing the menu.

   Problem 1b fix (2026-10-17): visibility is now driven ONLY by the
   .is-open class, never by the hidden attribute. The previous version
   set `display: flex` unconditionally on this selector with no
   [hidden] exception -- an author-stylesheet display rule always
   wins over the browser's own default `[hidden] { display: none }`
   (a user-agent-stylesheet rule), regardless of specificity, so
   toggling menu.hidden in JS had NO visual effect at all: the menu
   was permanently rendered (auto-open bug), and the outside-click/
   Escape handlers' own "is it open" checks (which looked at the
   hidden attribute/property) went out of sync with what was actually
   on screen, so clicking outside did nothing. Single source of truth
   now: the .is-open class, kept in lockstep with aria-expanded by
   chat.js's open/close helpers. */
.chat-document-card-download-menu {
    display: none;

    position: fixed;
    z-index: 50;

    flex-direction: column;

    min-width: 140px;
    max-width: calc(100vw - 16px);
    padding: 4px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--white);
    box-shadow: var(--shadow-xs, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.chat-document-card-download-menu.is-open {
    display: flex;
}

.chat-document-card-download-menu button {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;

    border: none;
    border-radius: 7px;

    background: none;
    color: var(--text);

    font-size: 12px;
    text-align: left;

    cursor: pointer;
}

.chat-document-card-download-menu button svg {
    flex: 0 0 auto;
    color: var(--text-soft);
}

.chat-document-card-download-menu button:hover {
    background: var(--surface-soft);
}


/* =========================================================
   USER MESSAGE
========================================================== */

.chat-message-user {
    justify-content: flex-end;
}

.chat-message-user .chat-message-content {
    flex: 0 1 auto;
    max-width: min(78%, 680px);

    padding: 11px 14px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--white);

    box-shadow: var(--shadow-xs);
}

.chat-message-user .chat-message-author {
    display: none;
}

.chat-message-user .chat-message-text {
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   XERION MESSAGE
========================================================== */

.chat-message-assistant .chat-message-content {
    max-width: 100%;
}

.chat-message-assistant .chat-message-avatar {
    color: var(--blue);
}


/* =========================================================
   MESSAGE ACTIONS
========================================================== */

.message-actions {
    display: flex;
    align-items: center;
    gap: 3px;

    margin-top: 10px;

    opacity: 0;

    transition: opacity var(--transition);
}

.chat-message:hover .message-actions,
.message-actions:focus-within {
    opacity: 1;
}

.message-action {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: var(--muted);

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.message-action:hover {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text);
}

.message-action svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   MARKDOWN / RICH TEXT
========================================================== */

.chat-message-text h1,
.chat-message-text h2,
.chat-message-text h3,
.chat-message-text h4 {
    margin-top: 22px;
    margin-bottom: 9px;

    color: var(--black);

    line-height: 1.3;
}

.chat-message-text h1 {
    font-size: 21px;
}

.chat-message-text h2 {
    font-size: 18px;
}

.chat-message-text h3 {
    font-size: 16px;
}

.chat-message-text h4 {
    font-size: 14px;
}

.chat-message-text ul,
.chat-message-text ol {
    margin: 10px 0 14px;
    padding-left: 22px;
}

.chat-message-text ul {
    list-style: disc;
}

.chat-message-text ol {
    list-style: decimal;
}

.chat-message-text li {
    margin-bottom: 5px;
}

.chat-message-text strong {
    font-weight: 700;
}

.chat-message-text em {
    font-style: italic;
}

.chat-message-text a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: rgba(49, 88, 168, 0.3);
    text-underline-offset: 2px;
}

.chat-message-text a:hover {
    text-decoration-color: currentColor;
}


/* =========================================================
   INLINE CODE
========================================================== */

.chat-message-text code {
    padding: 2px 5px;

    border: 1px solid var(--border);
    border-radius: 5px;

    background: var(--surface-soft);
    color: #253653;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 12px;
}


/* =========================================================
   CODE BLOCK
========================================================== */

.code-block {
    position: relative;

    margin: 14px 0;

    border: 1px solid #dbe2eb;
    border-radius: var(--radius);

    background: #f5f7fa;

    overflow: hidden;
}

.code-block-header {
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 10px 0 13px;

    border-bottom: 1px solid #dbe2eb;

    color: var(--muted);

    font-size: 10px;
    font-weight: 600;
}

.code-block-copy {
    min-height: 27px;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 0 7px;

    border: 1px solid transparent;
    border-radius: 6px;

    background: transparent;
    color: var(--muted);

    font-size: 10px;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.code-block-copy:hover {
    border-color: var(--border);
    background: var(--white);
    color: var(--text);
}

.code-block-copy.is-copied {
    border-color: #bfe3c8;
    background: #eaf8ee;
    color: #1f8a43;
}

.code-block-lang {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.code-block-copy svg {
    width: 13px;
    height: 13px;
}

.code-block pre {
    margin: 0;

    padding: 15px;

    overflow-x: auto;

    color: #26354b;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 12px;
    line-height: 1.65;

    tab-size: 4;
}

.code-block pre code {
    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;
}


/* =========================================================
   MATH (KaTeX), proposed 2026-10-09
   KaTeX's own CSS hardcodes black text -- overridden here to
   `currentColor`/the page's own --text token so it follows light/dark
   theme switches like everything else, instead of staying black on a
   dark background.
========================================================== */

.xerion-math {
    color: var(--text);
}

.xerion-math-display {
    display: block;

    margin: 14px 0;

    overflow-x: auto;
}

.xerion-math .katex {
    color: inherit;
}

.xerion-math .katex-error {
    /* throwOnError:false already keeps a parse error from crashing
       anything -- this just makes KaTeX's own built-in error styling
       (normally a loud hardcoded red) legible on a dark background
       too, same inherited-color approach as everything else here. */
    color: inherit;
    opacity: 0.75;
}


/* =========================================================
   ATTACHMENT IN MESSAGE
========================================================== */

.message-attachment {
    width: fit-content;
    max-width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 10px;
    padding: 9px 11px;

    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    background: var(--white);
}

.message-attachment-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 7px;

    background: var(--blue-light);
    color: var(--blue);
}

.message-attachment-icon svg {
    width: 16px;
    height: 16px;
}

.message-attachment-info {
    min-width: 0;
}

.message-attachment-name {
    max-width: 300px;

    overflow: hidden;

    color: var(--text);

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.message-attachment-size {
    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   TOOL CALL
========================================================== */

.tool-call {
    display: flex;
    align-items: center;
    gap: 9px;

    width: fit-content;
    max-width: 100%;

    margin-top: 12px;
    padding: 8px 11px;

    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    background: var(--surface-soft);

    color: var(--text-soft);

    font-size: 11px;
}

.tool-call-icon {
    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--blue);
}

.tool-call-icon svg {
    width: 16px;
    height: 16px;
}

.tool-call-status {
    margin-left: 3px;

    color: var(--muted);
}


/* =========================================================
   STREAMING MESSAGE
========================================================== */

.message-streaming .chat-message-text {
    min-height: 20px;
}

.streaming-cursor {
    display: inline-block;

    width: 6px;
    height: 16px;

    margin-left: 2px;

    vertical-align: -3px;

    border-radius: 1px;

    background: var(--blue);

    animation: xerion-cursor 0.9s steps(1) infinite;
}

@keyframes xerion-cursor {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}


/* =========================================================
   CHAT COMPOSER AREA
========================================================== */

.chat-composer-area {
    position: relative;

    width: 100%;

    padding: 12px 24px 18px;

    background: linear-gradient(
        to bottom,
        rgba(248, 250, 252, 0),
        var(--background) 22%
    );
}


/* =========================================================
   MIC-LINK: persistent "linked" label + inline confirm banner

   Real bug found live (2026-10-03): both elements set their own
   `display` via a class selector, which has higher specificity than
   the browser's built-in `[hidden] { display: none }` rule -- so
   setting .hidden = true in JS left them visually showing (empty)
   the whole time, on every chat, linked or not. Every rule below is
   now gated behind an explicit `:not([hidden])` on the block itself,
   so the native hidden attribute is always the one source of truth
   for whether either of these renders at all -- no class/attribute
   precedence fight possible.
========================================================== */

.chat-link-banner[hidden],
.chat-confirm-banner[hidden] {
    display: none;
}

/* Deliberately a single thin, quiet line -- not a boxed card like the
   confirm banner below, which is a real, active prompt and should
   stand out; this is just a passive status indicator. */
.chat-link-banner:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: min(100%, 820px);
    margin: 0 auto 6px;
    padding: 2px 4px;

    font-size: 11.5px;
    color: var(--text-soft);
}

.chat-link-banner #chatLinkLabel::before {
    content: "●";
    display: inline-block;
    margin-right: 5px;
    color: var(--success, #16a34a);
    font-size: 8px;
}

.chat-link-unlink {
    flex-shrink: 0;

    padding: 0;
    border: none;
    background: none;

    font-size: 11.5px;
    color: var(--text-soft);
    text-decoration: underline;
    cursor: pointer;
}

.chat-link-unlink:hover {
    color: var(--text);
}

.chat-confirm-banner:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: min(100%, 820px);
    margin: 0 auto 8px;
    padding: 12px 16px;

    border: 1px solid var(--warning);
    border-radius: 12px;
    background: var(--warning-light);
}

.chat-confirm-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-confirm-banner-text strong {
    font-size: 13.5px;
    color: var(--text);
}

.chat-confirm-banner-text span {
    font-size: 12.5px;
    color: var(--text-soft);
}

.chat-confirm-banner-text span:empty {
    display: none;
}

.chat-confirm-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.chat-confirm-banner.is-waiting-on-pc .chat-confirm-banner-actions {
    display: none;
}


/* =========================================================
   CHAT COMPOSER
========================================================== */

.chat-composer {
    width: min(100%, 820px);

    margin: 0 auto;

    border: 1px solid var(--border-strong);
    border-radius: 15px;

    background: var(--white);

    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.055);

    overflow: hidden;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.chat-composer:focus-within {
    border-color: #b5c2d3;

    box-shadow:
        0 6px 22px rgba(15, 23, 42, 0.065),
        0 0 0 2px rgba(49, 88, 168, 0.035);
}


/* =========================================================
   PENDING ATTACHMENTS (images + PDFs, pasted/dropped/picked)
   Hidden (no DOM footprint beyond the one [hidden] container) when
   there is nothing pending, so a composer with no attachment looks
   and behaves exactly as before.
========================================================== */

.chat-pending-files {
    display: flex;
    gap: 8px;

    padding: 10px 14px 0;

    overflow-x: auto;
}

.chat-pending-files[hidden] {
    display: none;
}

.chat-pending-file {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;
    max-width: 200px;

    padding: 6px 28px 6px 6px;

    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    background: var(--surface-soft);
}

.chat-pending-file-preview {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border-radius: 6px;

    object-fit: cover;
}

.chat-pending-file--pdf .chat-pending-file-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--surface-hover);
    color: var(--blue);
}

.chat-pending-file--pdf .chat-pending-file-preview svg {
    width: 20px;
    height: 20px;
}

.chat-pending-file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-pending-file-name {
    max-width: 120px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.chat-pending-file-size {
    color: var(--muted);
    font-size: 11px;
}

.chat-pending-file-remove {
    position: absolute;
    top: 3px;
    right: 3px;

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: var(--surface-hover);
    color: var(--muted);

    font-size: 13px;
    line-height: 1;

    cursor: pointer;
}

.chat-pending-file-remove:hover {
    background: var(--border);
    color: var(--text);
}


/* =========================================================
   STICKY CONVERSATION ATTACHMENT (Point 3.1)
   A quiet, single-line label -- distinct from the pending-files cards
   above, which are about files not yet sent. This one means "already
   sent, still attached to this conversation, will be resent". Hidden
   ([hidden]) whenever nothing is held, so an ordinary composer with no
   attachment looks exactly as before.
========================================================== */

.chat-sticky-attachment {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 10px 14px 0;
    padding: 6px 10px;

    border: 1px dashed var(--border);
    border-radius: var(--radius-small);

    background: transparent;

    color: var(--muted);
    font-size: 12px;
}

.chat-sticky-attachment[hidden] {
    display: none;
}

.chat-sticky-attachment-icon {
    display: flex;
    flex: 0 0 auto;
}

.chat-sticky-attachment-icon svg {
    width: 14px;
    height: 14px;
}

.chat-sticky-attachment-text {
    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-sticky-attachment-remove {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: transparent;
    color: var(--muted);

    font-size: 13px;
    line-height: 1;

    cursor: pointer;
}

.chat-sticky-attachment-remove:hover {
    background: var(--surface-hover);
    color: var(--text);
}


/* =========================================================
   COMPOSER TOP
========================================================== */

.composer-top {
    width: 100%;
}

.composer-top textarea {
    width: 100%;
    min-height: 48px;
    max-height: 220px;

    display: block;

    padding: 14px 16px 8px;

    border: 0;
    border-radius: 0;

    outline: 0;

    background: transparent;

    box-shadow: none;

    color: var(--text);

    font-size: 13px;
    line-height: 1.55;

    resize: none;
}

.composer-top textarea:hover,
.composer-top textarea:focus {
    border: 0;
    box-shadow: none;
}


/* =========================================================
   COMPOSER BOTTOM
========================================================== */

.composer-bottom {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 4px 7px 7px 9px;
}


/* =========================================================
   COMPOSER TOOLS
========================================================== */

.composer-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.composer-tool {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;
    color: var(--muted);

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.composer-tool:hover {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text);
}

.composer-tool.is-active {
    border-color: #d8e2f4;
    background: var(--blue-light);
    color: var(--blue);
}

.composer-tool svg {
    width: 18px;
    height: 18px;
}

/* The paperclip path's own coordinates run slightly outside a 0 0 24 24
   viewBox (down to x=-0.761), clipping its left edge -- the markup's
   viewBox is shifted/centered on the path's real bounding box instead.
   It also naturally fills more of its box than the mic glyph does, so
   it still renders slightly smaller here to read as the same weight. */
#attachFileButton svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   COMPOSER SEND
========================================================== */

.composer-send {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: 9px;

    background: var(--blue);
    color: var(--white);

    cursor: pointer;

    box-shadow: var(--shadow-xs);

    transition:
        background var(--transition),
        opacity var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.composer-send:hover:not(:disabled) {
    background: var(--blue-hover);

    box-shadow: 0 4px 10px rgba(49, 88, 168, 0.15);

    transform: translateY(-1px);
}

.composer-send:active:not(:disabled) {
    transform: translateY(0);
}

.composer-send:disabled {
    background: #dbe2ea;
    color: #94a3b8;

    cursor: not-allowed;

    box-shadow: none;
}

.composer-send svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   COMPOSER DISCLAIMER
========================================================== */

.composer-disclaimer {
    width: min(100%, 820px);

    margin: 7px auto 0;

    color: var(--muted-light);

    font-size: 10px;
    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   COMPOSER ATTACHMENT PREVIEW
========================================================== */

.composer-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    padding: 8px 12px 0;
}

.composer-attachment {
    max-width: 240px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px 8px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--surface-soft);
}

.composer-attachment-icon {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--blue);
}

.composer-attachment-icon svg {
    width: 15px;
    height: 15px;
}

.composer-attachment-name {
    min-width: 0;
    flex: 1;

    overflow: hidden;

    color: var(--text-soft);

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.composer-attachment-remove {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 5px;

    background: transparent;
    color: var(--muted);

    cursor: pointer;
}

.composer-attachment-remove:hover {
    background: var(--white);
    color: var(--danger);
}


/* =========================================================
   VOICE RECORDING STATE
========================================================== */

.chat-composer.is-recording {
    border-color: #d9bebe;
}

.chat-composer.is-recording .composer-tool#voiceButton {
    border-color: #efd1d1;
    background: var(--danger-light);
    color: var(--danger);
}


/* =========================================================
   IMAGE GENERATION STATE
========================================================== */

.chat-composer.is-image-mode {
    border-color: #c9d6ea;
}

.chat-composer.is-image-mode .composer-tool#imageGenerationButton {
    border-color: #d8e2f4;
    background: var(--blue-light);
    color: var(--blue);
}


/* =========================================================
   ATTACHMENT DROP STATE
========================================================== */

.chat-main.is-dragging .chat-composer {
    border-color: var(--blue);

    box-shadow:
        0 8px 28px rgba(15, 23, 42, 0.06),
        0 0 0 3px rgba(49, 88, 168, 0.07);
}

.chat-main.is-dragging::after {
    content: "Drop files here";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--surface-soft);

    color: var(--blue);

    font-size: 14px;
    font-weight: 650;

    pointer-events: none;

    z-index: 20;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 1000px) {

    .conversation-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .chat-messages {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 760px) {

    .chat-layout {
        height: calc(100vh - var(--topbar-height));
    }

    .conversation-sidebar {
        display: none;
    }

    .chat-messages {
        width: 100%;

        padding:
            24px
            16px
            130px;
    }

    .chat-message {
        gap: 9px;

        margin-bottom: 24px;
    }

    .chat-message-avatar {
        width: 27px;
        height: 27px;
    }

    .chat-message-avatar img {
        width: 18px;
        height: 18px;
    }

    .chat-message-content {
        padding-top: 2px;
    }

    .chat-message-text {
        font-size: 13px;
        line-height: 1.65;
    }

    .chat-message-user .chat-message-content {
        max-width: 86%;

        padding: 10px 12px;
    }

    .message-actions {
        opacity: 1;
    }

    .chat-empty-state {
        padding:
            32px
            20px
            120px;
    }

    .chat-empty-state h1 {
        font-size: 22px;
    }

    .chat-composer-area {
        padding:
            8px
            12px
            12px;
    }

    .chat-composer {
        border-radius: 13px;
    }

    .composer-top textarea {
        padding:
            12px
            13px
            7px;
    }

    .composer-bottom {
        padding:
            3px
            6px
            6px
            7px;
    }

    .composer-disclaimer {
        font-size: 9px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .chat-messages {
        padding-left: 12px;
        padding-right: 12px;
    }

    .chat-message {
        gap: 7px;
    }

    .chat-message-avatar {
        width: 25px;
        height: 25px;
    }

    .chat-message-user .chat-message-content {
        max-width: 90%;
    }

    .composer-tool {
        width: 32px;
        height: 32px;
    }

    .composer-send {
        width: 32px;
        height: 32px;
    }

    .composer-disclaimer {
        display: none;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .chat-messages {
        scroll-behavior: auto;
    }

    .streaming-cursor {
        animation: none;
        opacity: 1;
    }
}