/* Ask AI — chat module styling (original design; not ported from Smoothin's layout). */

.askai-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
}

.askai-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
}

/* Shown in place of the chat when an admin has turned the Ask AI module off. */
.askai-disabled {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    padding: 2rem;
}

.askai-disabled h2 { color: var(--text, #0f172a); margin: 0; }

/* Drawer affordances — hidden on wide screens, shown via the small-screen media query below. */
.askai-sidebar-toggle { display: none; }
.askai-backdrop { display: none; }

/* ---- sidebar ---- */
.askai-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--border, #e6e8ec);
    background: var(--surface, #fff);
    display: flex;
    flex-direction: column;
    padding: 0.9rem;
    gap: 0.75rem;
}

.askai-newchat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border, #e6e8ec);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.askai-newchat:hover { background: var(--surface-2, #f1f5f9); border-color: var(--accent, #4f46e5); }
.askai-newchat span { font-size: 1.1rem; line-height: 1; }

.askai-chatlist { overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; }

.askai-empty { color: var(--text-muted, #94a3b8); font-size: 0.85rem; padding: 0.5rem; text-align: center; }

.askai-chatitem {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-radius: 9px;
    cursor: pointer;
    color: var(--text, #0f172a);
    font-size: 0.9rem;
}

.askai-chatitem.active { background: color-mix(in srgb, var(--accent, #4f46e5) 12%, transparent); }

/* Rows are real <button>s (or contain one) so taps work on iOS Safari; reset the button chrome. */
button.askai-chatitem, .askai-chatitem-open {
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
button.askai-chatitem { width: 100%; }
.askai-chatitem-open { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0; }

.askai-chatitem-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.askai-chatitem-actions { display: none; gap: 0.1rem; }

/* Hover-driven styling only on devices that can hover; on touch, the first tap would be
   consumed applying :hover (iOS Safari), so the actions are simply always visible there. */
@media (hover: hover) {
    .askai-chatitem:hover { background: var(--surface-2, #f1f5f9); }
    .askai-chatitem:hover .askai-chatitem-actions { display: flex; }
}
@media (hover: none) {
    .askai-chatitem-actions { display: flex; }
}
.askai-chatitem-actions button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.15rem;
    border-radius: 6px;
    opacity: 0.7;
}
.askai-chatitem-actions button:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* ---- admin chat-info modal ---- */
.askai-info-card { max-width: 460px; width: min(460px, 92vw); max-height: 80vh; overflow-y: auto; }
.askai-info-card .askai-info-subtitle { margin: 0 0 1rem; }
.askai-info-muted { color: var(--text-muted, #94a3b8); }

.askai-info-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.askai-info-stat {
    background: var(--surface-2, #f1f5f9);
    border-radius: 9px;
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.askai-info-value { font-weight: 600; font-size: 1.05rem; }
.askai-info-label { color: var(--text-muted, #94a3b8); font-size: 0.78rem; }

.askai-info-heading { margin: 0.9rem 0 0.35rem; font-size: 0.92rem; }
.askai-info-filegroup { margin-bottom: 0.6rem; }
.askai-info-filegroup-title { font-size: 0.82rem; font-weight: 600; color: var(--text-muted, #64748b); margin-bottom: 0.2rem; }
.askai-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.askai-info-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--surface-2, #f1f5f9);
    word-break: break-word;
}
.askai-info-list li:last-child { border-bottom: none; }
.askai-info-size { color: var(--text-muted, #94a3b8); white-space: nowrap; }

.askai-rename-input {
    flex: 1;
    border: 1px solid var(--accent, #4f46e5);
    border-radius: 7px;
    padding: 0.3rem 0.45rem;
    font-size: 0.88rem;
    width: 100%;
}

/* ---- main chat pane ---- */
.askai-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg, #f6f7f9);
}

.askai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.askai-welcome {
    margin: auto;
    text-align: center;
    color: var(--text-muted, #64748b);
    max-width: 420px;
}
.askai-welcome-icon {
    font-size: 2rem;
    width: 64px; height: 64px;
    display: grid; place-items: center;
    margin: 0 auto 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent, #4f46e5), var(--accent-2, #7c3aed));
    color: #fff;
}
.askai-welcome-title { font-size: 1.25rem; font-weight: 700; color: var(--text, #0f172a); margin-bottom: 0.4rem; }
.askai-welcome-sub { font-size: 0.95rem; }

/* in-chat language picker (choose-in-chat mode) — the first interaction, before the welcome */
.askai-langpick {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 1.5rem;
    text-align: center;
}
.askai-langpick-icon { font-size: 2.2rem; line-height: 1; }
.askai-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    max-width: 460px;
}
.askai-lang-btn {
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--border, #e6e8ec);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.askai-lang-btn:hover {
    background: var(--accent, #4f46e5);
    border-color: var(--accent, #4f46e5);
    color: #fff;
}

.askai-row { display: flex; }
.askai-row-user { justify-content: flex-end; }
.askai-row-assistant { justify-content: flex-start; }

.askai-bubble {
    max-width: 75%;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.askai-bubble-user {
    background: var(--accent, #4f46e5);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.askai-bubble-assistant {
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    border: 1px solid var(--border, #e6e8ec);
    border-bottom-left-radius: 4px;
}

.askai-bubble-assistant p { margin: 0 0 0.5rem; }
.askai-bubble-assistant p:last-child { margin-bottom: 0; }
.askai-bubble-assistant ul, .askai-bubble-assistant ol { margin: 0.3rem 0 0.5rem; padding-left: 1.3rem; }
.askai-bubble-assistant code {
    background: var(--surface-2, #f1f5f9);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-size: 0.88em;
}
.askai-bubble-assistant pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    overflow-x: auto;
}
.askai-bubble-assistant pre code { background: transparent; padding: 0; color: inherit; }
.askai-h { display: block; margin: 0.4rem 0; font-size: 1.02em; }
.askai-bubble-assistant a {
    color: var(--accent, #4f46e5);
    text-decoration: underline;
    word-break: break-all;
}
.askai-bubble-assistant a:hover { color: var(--accent-strong, #4338ca); }

/* download button for exported PDF reports */
.askai-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9px;
    border: 1px solid var(--accent, #4f46e5);
    background: color-mix(in srgb, var(--accent, #4f46e5) 8%, #fff);
    color: var(--accent-strong, #4338ca);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}
.askai-download:hover { background: color-mix(in srgb, var(--accent, #4f46e5) 16%, #fff); }

/* thinking dots */
.askai-thinking { display: flex; gap: 0.4rem; align-items: center; }
.askai-thinking span {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--text-muted, #94a3b8);
    animation: askai-bounce 1.2s infinite ease-in-out;
}
.askai-thinking span:nth-child(2) { animation-delay: 0.15s; }
.askai-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes askai-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.6; }
    40% { transform: scale(1); opacity: 1; }
}

/* transient tool-activity lines ("Searching the knowledge base: …") shown while the assistant works */
.askai-activity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.15rem 0 0.6rem 0.35rem;
}
.askai-activity-line {
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
    animation: askai-activity-in 0.25s ease;
}
.askai-activity-line::before { content: '⚡ '; opacity: 0.8; }
@keyframes askai-activity-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

/* ---- input bar ---- */
.askai-inputbar {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border, #e6e8ec);
    background: var(--surface, #fff);
}

/* The AI disclosure banner (task #111): a muted line at the top of the input bar, directly above the message box,
   so it is on screen before the user's first message and never scrolls away with the conversation. One line: the
   font-size here is only the pre-script fallback — askai.js fitDisclosure() sets the largest size that keeps the
   sentence on a single line for the bar's current width. */
.askai-aidisc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
    text-align: center;
    white-space: nowrap;
}

.askai-inputrow {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
}

/* hidden native file input — opened via the attach button */
.askai-file { display: none; }

.askai-attach {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border, #e6e8ec);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.askai-attach:hover { background: var(--surface-2, #f1f5f9); border-color: var(--accent, #4f46e5); }
.askai-attach:disabled { opacity: 0.5; cursor: default; }

/* mic button (voice input) — same footprint as the attach button, to its right */
.askai-mic {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border, #e6e8ec);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.askai-mic svg { width: 20px; height: 20px; }
.askai-mic:hover { background: var(--surface-2, #f1f5f9); border-color: var(--accent, #4f46e5); }
.askai-mic:disabled { opacity: 0.5; cursor: default; }

/* actively recording: red + pulsing until clicked again (or the time cap stops it) */
.askai-mic-rec,
.askai-mic-rec:hover {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
    animation: askai-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes askai-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}

/* clip uploaded, waiting for the transcript */
.askai-mic-busy svg { animation: askai-mic-wait 1s ease-in-out infinite; }
@keyframes askai-mic-wait {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.askai-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    max-height: 200px;
    outline: none;
}
.askai-input:focus { border-color: var(--accent, #4f46e5); }

.askai-send {
    padding: 0.7rem 1.3rem;
    border-radius: 12px;
    border: none;
    background: var(--accent, #4f46e5);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.askai-send:hover { background: var(--accent-strong, #4338ca); }
.askai-send:disabled { opacity: 0.55; cursor: default; }

/* while a run is in flight the send button is the Stop control */
.askai-send.askai-stop { background: #dc2626; }
.askai-send.askai-stop:hover { background: #b91c1c; }

/* ---- attachments (compose tray + sent-message chips) ---- */
.askai-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.askai-attachments:empty { display: none; }

.askai-msg-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.askai-att {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 220px;
    text-decoration: none;
    font-size: 0.85rem;
}

/* file pill */
.askai-att-file {
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--border, #e6e8ec);
    background: var(--surface-2, #f1f5f9);
    color: var(--text, #0f172a);
}
.askai-att-file .askai-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.askai-att-icon { font-size: 1rem; line-height: 1; }

/* image thumbnail */
.askai-att-image {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border, #e6e8ec);
}
.askai-att-image img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
}

/* chips inside a sent user bubble sit on the accent background */
.askai-bubble-user .askai-att-file {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.askai-bubble-user .askai-att-image { border-color: rgba(255, 255, 255, 0.45); }

/* compose-tray chip extras: remove button, spinner, error state */
.askai-att-pending { position: relative; padding-right: 0.5rem; }
.askai-att-pending.askai-att-image { padding-right: 0; }
.askai-att-remove {
    border: none;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.askai-att-image .askai-att-remove {
    position: absolute;
    top: 3px;
    right: 3px;
}
.askai-att-remove:hover { background: rgba(15, 23, 42, 0.8); }
.askai-att-error { border-color: #ef4444; }
.askai-att-error .askai-att-name { color: #ef4444; }

.askai-att-spin {
    width: 13px;
    height: 13px;
    border: 2px solid var(--border, #cbd5e1);
    border-top-color: var(--accent, #4f46e5);
    border-radius: 50%;
    animation: askai-spin 0.7s linear infinite;
}
@keyframes askai-spin { to { transform: rotate(360deg); } }

/* ---- small screens: the sidebar becomes a collapsible off-canvas drawer ---- */
@media (max-width: 720px) {
    .askai-layout { overflow: hidden; } /* keep the off-canvas drawer from causing horizontal scroll */

    .askai-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        max-width: 84%;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 30;
        box-shadow: 2px 0 14px rgba(15, 23, 42, 0.18);
    }

    .askai-layout.sidebar-open .askai-sidebar { transform: translateX(0); }

    .askai-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 20;
    }
    .askai-layout.sidebar-open .askai-backdrop { display: block; }

    .askai-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.6rem;
        left: 0.6rem;
        z-index: 40;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--border, #e6e8ec);
        background: var(--surface, #fff);
        color: var(--text, #0f172a);
        font-size: 1.05rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
    }

    /* Push content clear of the floating toggle so it never overlaps the first message or New chat button. */
    .askai-messages { padding-top: 3.3rem; }
    .askai-sidebar { padding-top: 3.3rem; }
}