/* Brand palette, reset, html/body, .hidden — moved to tokens.css so the landing page
   can pull in just those without dragging in the full chat UI. */
.chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 420px;
    height: 620px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
    background: #fff;
    transition: height 0.3s ease, opacity 0.3s ease;
    z-index: 10000;
}

/* Embedded mode — when hosted inside a FileRoom iframe (`?embedded=1`), the parent
   sets the iframe size; child fills its container instead of floating bottom-right. */
.chat-container.embedded {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

.chat-container.minimized {
    height: 48px;
    cursor: pointer;
}

.chat-container.minimized .chat-panel {
    display: none;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--primary);
    color: #fff;
    height: 48px;
    flex-shrink: 0;
    user-select: none;
    gap: 8px;
}

.chat-title {
    font-weight: 600;
    font-size: 15px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s;
    white-space: nowrap;
}

.header-btn:hover {
    background: rgba(255,255,255,0.18);
}

.chat-input-area {
    border-top: 1px solid var(--border-soft);
    background: #fafafa;
    flex-shrink: 0;
}

.file-staging {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px 4px;
}

.file-staging.has-chips { display: flex; }

@keyframes chipSlideIn {
    from { opacity: 0; transform: translateY(6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #c8e6c9;
    border-radius: 20px;
    padding: 4px 6px 4px 10px;
    font-size: 12px;
    color: #333;
    max-width: 220px;
    transition: border-color 0.15s;
    animation: chipSlideIn 0.18s ease-out;
}

.file-chip.uploading {
    border-color: var(--accent-blue);
    background: var(--accent-blue-bg);
}

.file-chip.ready {
    border-color: var(--primary);
    background: var(--primary-light);
}

.file-chip.error {
    border-color: var(--error-border);
    background: var(--error-bg);
    color: var(--error);
}

.file-chip-icon { flex-shrink: 0; }

.file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.file-chip-size {
    color: #888;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.file-chip-status {
    font-size: 11px;
    color: var(--primary);
    flex-shrink: 0;
    min-width: 12px;
    text-align: center;
}

.chip-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid #ccc;
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.file-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 1px;
}

.file-chip-remove:hover {
    color: var(--error);
    background: rgba(0,0,0,0.07);
}

.attach-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px;
    border-radius: 8px;
    color: #888;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 2px;
}

.attach-btn:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.attach-btn svg {
    display: block;
}

.attach-btn[data-count]::after {
    content: attr(data-count);
    position: absolute;
    top: 0px;
    right: 0px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.msg-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.chat-messages.drag-over {
    outline: 2.5px dashed var(--primary);
    outline-offset: -4px;
    background: var(--primary-light);
}

.chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

.msg {
    display: flex;
    flex-direction: column;
    max-width: 88%;
    gap: 4px;
}

.msg-user { align-self: flex-end;   align-items: flex-end; }
.msg-bot  { align-self: flex-start; align-items: flex-start; }

.msg-content {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

.msg-user .msg-content {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg-bot .msg-content {
    background: var(--bg-soft);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.msg-bot .msg-text ul,
.msg-bot .msg-text ol {
    padding-left: 1.4em;
    margin: 4px 0;
}

.msg-bot .msg-text li {
    margin: 2px 0;
}

.msg:not(.streaming) .msg-text {
    white-space: normal;
}

.msg.streaming .msg-content::after {
    content: '▌';
    animation: blink 0.7s step-start infinite;
    color: var(--primary);
    margin-left: 1px;
}

@keyframes blink { 50% { opacity: 0; } }

.msg.typing .msg-content {
    padding: 12px 16px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.dot {
    width: 7px;
    height: 7px;
    background: #aaa;
    border-radius: 50%;
    animation: bounce 1.2s ease-in-out infinite;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}

.msg-error { color: var(--error); }

.msg-bot .msg-content code {
    background: var(--border-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 13px;
}

.msg-bot .msg-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.msg-bot .msg-content a:hover {
    color: var(--primary-dark);
    text-decoration-thickness: 2px;
}

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
}

.chat-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

.history-pos-badge {
    position: absolute;
    right: 10px;
    bottom: 7px;
    font-size: 10px;
    color: #bbb;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    letter-spacing: 0.3px;
}

.chat-input {
    width: 100%;
    resize: none;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    padding: 9px 40px 9px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s;
    /* Single fixed-height row. Multi-line input scrolls inside the textarea instead of
       growing the input area — keeps the border above the input box rock-stable across
       typing, history navigation, focus, all of it. */
    height: 40px;
    overflow-y: auto;
    display: block;
    scrollbar-width: none;
}

.chat-input::-webkit-scrollbar { display: none; }

.chat-input:focus { border-color: var(--primary); }

.chat-input:disabled {
    background: #f5f5f5;
    color: #999;
}

.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0 18px;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    min-width: 60px;
    align-self: flex-end;
    flex-shrink: 0;
}

.send-btn:hover:not(.streaming) { background: var(--primary-dark); }

.send-btn.streaming {
    background: #c0392b;
    cursor: pointer;
}

.send-btn.streaming:hover { background: #a93226; }

.inline-card {
    margin-top: 6px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid var(--border-soft);
    border-left: 3px solid #cfcfcf;
    border-radius: 10px;
    font-size: 13px;
    max-width: 100%;
}

/* Left-edge status stripe — wrapper gets the .status-* class from chat-stream.js. */
.inline-card.status-open,
.inline-card.status-not-started       { border-left-color: #999; }

.inline-card.status-submitted,
.inline-card.status-completed,
.inline-card.status-success           { border-left-color: var(--primary); }

.inline-card.status-processing,
.inline-card.status-in-verification,
.inline-card.status-pending,
.inline-card.status-documents-uploading { border-left-color: var(--accent-blue); }

.inline-card.status-error,
.inline-card.status-failed,
.inline-card.status-user-action-required,
.inline-card.status-sp-action-required { border-left-color: var(--error); }

.inline-card.confirm                  { border-left-color: var(--accent-blue); }

.card-head {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.card-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    border-top: 1px dashed #ebebeb;
}

.card-row:first-of-type { border-top: none; }

.card-key {
    flex: 0 0 100px;
    color: #666;
    font-weight: 500;
}

.card-val {
    flex: 1;
    color: var(--text);
    word-break: break-word;
}

/* Status pills — `.card-val.status-*` renders the value as a coloured rounded badge. */
.card-val[class*="status-"] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

.card-val.status-submitted,
.card-val.status-completed,
.card-val.status-success {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.card-val.status-processing,
.card-val.status-in-verification,
.card-val.status-pending,
.card-val.status-documents-uploading {
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
}

.card-val.status-error,
.card-val.status-failed,
.card-val.status-user-action-required,
.card-val.status-sp-action-required {
    background: var(--error-bg);
    color: var(--error);
}

.card-val.status-open,
.card-val.status-not-started {
    background: #ececec;
    color: #555;
}

.card-confirm-message {
    padding: 8px 0 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ebebeb;
}

.card-action {
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.card-action:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
}

/* Filled variant — applied to high-intent actions (Submit / Upload / Yes). */
.card-action.primary {
    background: var(--primary);
    color: #fff;
}

.card-action.primary:hover:not(:disabled) {
    background: var(--primary-dark);
}

.card-action:disabled {
    border-color: #ccc;
    color: #aaa;
    cursor: not-allowed;
}

/* Wide-screen — only override the dimensions; anchor (bottom-right + 20px) inherits from the base rule.
   Embedded iframe mode is unaffected; it fills its host container. */
@media (min-width: 900px) {
    body:has(.chat-container:not(.embedded)) {
        background: #1a1a2e;
    }

    .chat-container:not(.embedded) {
        width: 500px;
        height: 720px;
    }
}

/* Keyboard focus — visible 2px ring on tab navigation only. :focus-visible (vs :focus) doesn't
   light up on mouse click, so the ring stays out of the way for pointer users while WCAG 2.4.7
   (focus visible) is satisfied for keyboard users. The chat input is excluded — its existing
   `:focus { border-color: var(--primary) }` rule (above) already provides a visible focus state
   that matches the pill shape, and stacking an outline on top creates a confusing double border. */
#send-btn:focus-visible,
#attach-btn:focus-visible,
#minimize-btn:focus-visible,
.file-chip-remove:focus-visible,
.card-action:focus-visible,
.msg-text a:focus-visible {
    outline: 2px solid var(--primary, #0a66c2);
    outline-offset: 2px;
    border-radius: 4px;
}

/* prefers-reduced-motion (WCAG 2.3.3). Users on vestibular-motion-sensitive systems still need
   the chatbot to function; collapse all animations to ~0ms so transitions still "happen" (the
   final state is reached) but without motion. The chip spinner is replaced by a static block
   so users still see "uploading" state. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .chip-spinner,
    .typing .dot {
        animation: none !important;
    }
}