/* In-app assistant — launcher, floating window, transcript, settings rows.
   Layering: launcher/window sit under modal backdrops (z 100) so Settings
   opens on top of an open chat; the image lightbox sits above the window. */

/* ---------- Launcher ---------- */

.assistant-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transition: transform var(--t), background var(--t), opacity var(--t);
}
.assistant-launcher:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.assistant-launcher.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Window ---------- */

.assistant-window {
    /* Edge colours: the theme border tokens are tuned for panels sitting
       IN the page and all but vanish on a window floating OVER it, so the
       window gets its own, stronger outline plus a lit top edge. */
    --aw-edge: rgba(0, 0, 0, 0.22);
    --aw-edge-top: rgba(255, 255, 255, 0.9);
    --aw-head-bg: rgba(0, 0, 0, 0.025);
    position: fixed;
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--aw-edge);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 var(--aw-edge-top),
        0 14px 44px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
[data-theme="dark"] .assistant-window {
    --aw-edge: rgba(255, 255, 255, 0.2);
    --aw-edge-top: rgba(255, 255, 255, 0.14);
    --aw-head-bg: rgba(255, 255, 255, 0.035);
}
.assistant-window[hidden] { display: none; }
.assistant-window.is-dragging { user-select: none; }
.assistant-window.is-minimised .aw-main,
.assistant-window.is-minimised .aw-composer,
.assistant-window.is-minimised .aw-banner,
.assistant-window.is-minimised .aw-setup,
.assistant-window.is-minimised .aw-grip,
.assistant-window.is-minimised .aw-pickers { display: none; }

.aw-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--aw-head-bg);
    border-bottom: 1px solid var(--aw-edge);
    cursor: move;
    flex: 0 0 auto;
}
.aw-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.assistant-window.is-offline .aw-title::after {
    content: " · reconnecting…";
    font-weight: 400;
    color: var(--color-text-tertiary);
}
.aw-icon {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.aw-icon:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

.aw-view {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex: 0 0 auto;
}
.aw-view button {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
}
.aw-view button.is-active { background: var(--color-accent); color: #fff; }

.aw-banner {
    padding: 6px 12px;
    font-size: 12px;
    background: rgba(255, 149, 0, 0.12);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.aw-main {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}
.aw-transcript {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Conversation list — overlays the transcript's left side. */
.aw-list {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: min(300px, 85%);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
}
.aw-list[hidden] { display: none; }
.aw-list ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.aw-list-item {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius-sm);
}
.aw-list-item:hover { background: var(--color-bg-hover); }
.aw-list-item.is-current { background: var(--color-bg-hover); }
.aw-list-item.is-archived { opacity: 0.6; }
.aw-list-open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 6px 8px;
    cursor: pointer;
}
.aw-list-title { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-list-when { font-size: 11px; color: var(--color-text-tertiary); }
.aw-list-action {
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    visibility: hidden;
}
.aw-list-item:hover .aw-list-action { visibility: visible; }
.aw-list-action:hover { color: var(--color-text-primary); background: var(--color-bg); }
.aw-list-empty { padding: 12px; color: var(--color-text-tertiary); font-size: 12px; }
.aw-archived {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-light);
}

.aw-setup {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-light);
}
.aw-setup span { flex: 1; }

.aw-composer {
    position: relative;
    flex: 0 0 auto;
    border-top: 1px solid var(--color-border-light);
    padding: 8px 10px 10px;
}
.aw-composer textarea {
    display: block;
    width: 100%;
    resize: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-primary);
    font: 13px/1.45 var(--font);
    /* Right padding keeps text clear of the send / stop button. */
    padding: 8px 34px 8px 10px;
    max-height: 180px;
}
.aw-composer textarea:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }

/* Send / stop: a small icon inside the textarea's bottom-right corner. */
.aw-action {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aw-action svg { width: 16px; height: 16px; fill: currentColor; }
.aw-action:hover:not(:disabled) { background: var(--color-bg-hover); }
.aw-action:disabled { color: var(--color-text-tertiary); cursor: default; }
.aw-action-stop { color: var(--color-text-secondary); }
.aw-action-stop:hover { color: var(--color-error); }

/* Engine / model / effort pickers, compact, in the header. */
.aw-pickers {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.aw-pickers select {
    /* Sized to the selected option (where supported), with a small chevron
       instead of the native one — the header has little room. */
    appearance: none;
    field-sizing: content;
    font-size: 11px;
    height: 22px;
    padding: 0 14px 0 5px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M.5.5 4 4 7.5.5' fill='none' stroke='%238e8e93' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center / 7px 5px;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.aw-pickers select option { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.aw-pickers select:hover,
.aw-pickers select:focus { border-color: var(--color-border); color: var(--color-text-primary); }
.aw-pinned {
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resize grips: thin edges, small corners. */
.aw-grip { position: absolute; z-index: 3; }
.aw-grip[data-grip="n"], .aw-grip[data-grip="s"] { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.aw-grip[data-grip="e"], .aw-grip[data-grip="w"] { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.aw-grip[data-grip="n"] { top: -3px; }
.aw-grip[data-grip="s"] { bottom: -3px; }
.aw-grip[data-grip="e"] { right: -3px; }
.aw-grip[data-grip="w"] { left: -3px; }
.aw-grip[data-grip="ne"], .aw-grip[data-grip="nw"],
.aw-grip[data-grip="se"], .aw-grip[data-grip="sw"] { width: 14px; height: 14px; }
.aw-grip[data-grip="ne"] { top: -4px; right: -4px; cursor: nesw-resize; }
.aw-grip[data-grip="sw"] { bottom: -4px; left: -4px; cursor: nesw-resize; }
.aw-grip[data-grip="nw"] { top: -4px; left: -4px; cursor: nwse-resize; }
.aw-grip[data-grip="se"] { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* ---------- Transcript ---------- */

.as-msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.as-user { align-items: flex-end; }
.as-bubble {
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 14px 14px 4px 14px;
    background: var(--color-accent);
    color: #fff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.as-meta { font-size: 11px; color: var(--color-text-tertiary); }

.as-text { line-height: 1.5; overflow-wrap: anywhere; }
.as-text > :first-child { margin-top: 0; }
.as-text > :last-child { margin-bottom: 0; }
.as-text p { margin: 0.5em 0; }
.as-text h1, .as-text h2, .as-text h3, .as-text h4 { margin: 0.9em 0 0.4em; line-height: 1.3; }
.as-text h1 { font-size: 16px; }
.as-text h2 { font-size: 15px; }
.as-text h3, .as-text h4 { font-size: 13px; }
.as-text ul, .as-text ol { margin: 0.4em 0; padding-left: 1.4em; }
.as-text a { color: var(--color-accent); }
.as-text a[href^="#voitta-file-"] {
    text-decoration: none;
    background: var(--color-bg-hover);
    border-radius: var(--radius-sm);
    padding: 0 4px;
}
.as-text code {
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--color-bg-hover);
    border-radius: 4px;
    padding: 1px 4px;
}
.as-text pre {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    overflow-x: auto;
}
.as-text pre code { background: none; padding: 0; }
.as-text table { border-collapse: collapse; margin: 0.5em 0; display: block; overflow-x: auto; }
.as-text th, .as-text td { border: 1px solid var(--color-border); padding: 4px 8px; text-align: left; }
.as-text th { background: var(--color-bg); }
.as-text blockquote {
    margin: 0.5em 0;
    padding-left: 10px;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-secondary);
}
.md-diagram { margin: 0.5em 0; overflow-x: auto; }
.md-diagram svg { max-width: 100%; height: auto; }
.md-diagram-error { border-color: var(--color-warning); }

/* SVG code blocks rendered as images (render/markdown.js). */
.md-svg {
    margin: 0.5em 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.md-svg-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border-light);
}
.md-svg-label { flex: 1; font-weight: 600; letter-spacing: 0.04em; }
.md-svg-btn {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.md-svg-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
/* A light checkerboard: most SVGs are drawn for a white page, and the
   pattern makes transparent areas visible in both themes. */
.md-svg-stage {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: #fff repeating-conic-gradient(#f0f0f2 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.md-svg-stage[hidden] { display: none; }
.md-svg-stage img { max-width: 100%; max-height: 420px; }
.md-svg-stage img.md-svg-fluid { width: min(100%, 320px); }
.md-svg pre { margin: 0; border: none; border-radius: 0; }

.as-thinking {
    font-size: 12px;
    color: var(--color-text-secondary);
    border-left: 2px solid var(--color-border);
    padding-left: 8px;
}
.as-thinking summary { cursor: pointer; color: var(--color-text-tertiary); }
.as-thinking-text { white-space: pre-wrap; margin-top: 4px; }

.as-tool-wrap { display: flex; flex-direction: column; gap: 4px; }
.as-tool {
    font-size: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.as-tool summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    list-style: none;
}
.as-tool summary::-webkit-details-marker { display: none; }
.as-tool-name { font-weight: 600; flex: 0 0 auto; }
.as-tool-args {
    flex: 1;
    min-width: 0;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-tool-status { flex: 0 0 auto; color: var(--color-text-tertiary); }
.as-tool.is-error .as-tool-status { color: var(--color-error); }
.as-tool-result {
    margin: 0;
    padding: 8px 10px;
    max-height: 260px;
    overflow: auto;
    font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    border-top: 1px solid var(--color-border-light);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.as-tool-images { display: flex; flex-wrap: wrap; gap: 6px; }
.as-tool-images:empty { display: none; }
.as-tool-images img {
    max-width: 160px;
    max-height: 160px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    cursor: zoom-in;
    background: #fff;
}

.as-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-tertiary); }
.as-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    animation: boot-spin 0.8s linear infinite;
}

.as-notice { font-size: 12px; padding: 6px 10px; border-radius: var(--radius-md); }
.as-notice-muted { color: var(--color-text-tertiary); }
.as-notice-error { color: var(--color-error); background: rgba(255, 59, 48, 0.08); }

/* highlight.js tokens mapped onto the app palette (light + dark). */
.hljs-comment, .hljs-quote { color: var(--color-text-tertiary); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color: #af52de; }
.hljs-string, .hljs-attr, .hljs-template-tag { color: #34a853; }
.hljs-number, .hljs-literal, .hljs-symbol { color: #d9730d; }
.hljs-title, .hljs-section, .hljs-function { color: var(--color-accent); }
.hljs-meta, .hljs-variable { color: #c2410c; }

/* ---------- Lightbox ---------- */

.aw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.aw-lightbox[hidden] { display: none; }
.aw-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-md); background: #fff; }

/* ---------- Settings → Assistant ---------- */

.assistant-settings { margin-top: 24px; border-top: 1px solid var(--color-border-light); padding-top: 16px; }
.assistant-settings h4 { margin: 0 0 4px; }
.as-cred, .as-policy {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}
.as-cred-label { font-weight: 600; font-size: 13px; }
.as-cred-hint { margin-top: 2px; }
.as-cred-status { margin-top: 6px; font-size: 12px; color: var(--color-text-secondary); }
.as-cred-status.is-error { color: var(--color-error); }
.as-cred-controls { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.as-cred-controls input {
    flex: 1;
    min-width: 200px;
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-primary);
}
.as-cred-result { margin-top: 6px; }
.as-cred-result:empty { display: none; }
.as-policy-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.modal-body select.as-policy-select { width: auto; min-width: 140px; }
.modal-body label.check-row.as-policy-toggle { display: inline-flex; width: auto; margin-top: 8px; }