/* CorSch Copilot — OS-2045 styled chat window. */

.cp-host {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--ink, #d8dfe9);
    font-family: 'Inter', system-ui, sans-serif;
    background: transparent;
}

/* ─── Toolbar ──────────────────────────────────────────────────── */
.cp-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
    background: rgba(255, 255, 255, 0.02);
}
.cp-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink, #d8dfe9);
}
.cp-spacer { flex: 1; }
.cp-cost {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3, #7a8290);
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.15s, color 0.15s;
}
.cp-cost.is-warn {
    color: #1a1a1a;
    background: var(--a-amber, #ffb86b);
    font-weight: 600;
}

.cp-iconbtn {
    background: transparent;
    color: var(--ink-2, #b5bdd1);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.cp-iconbtn:hover { background: rgba(255, 255, 255, 0.10); color: var(--ink, #d8dfe9); }

/* ─── Buttons ──────────────────────────────────────────────────── */
.cp-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink, #d8dfe9);
    border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.10));
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
}
.cp-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}
.cp-btn.primary {
    background: var(--a-amber, #ffb86b);
    color: #1a1a1a;
    border-color: transparent;
    font-weight: 600;
}
.cp-btn.primary:hover { background: #ffc384; }
.cp-btn.primary:disabled, .cp-btn.primary[disabled] {
    opacity: 0.5;
    cursor: wait;
}

/* ─── Log ──────────────────────────────────────────────────────── */
.cp-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cp-empty {
    text-align: center;
    color: var(--ink-3, #7a8290);
    margin: auto;
    max-width: 380px;
}
.cp-empty h3 {
    color: var(--a-amber, #ffb86b);
    font-size: 18px;
    margin-bottom: 6px;
    font-weight: 500;
}
.cp-empty p { font-size: 13px; margin-bottom: 12px; }
.cp-quickbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.cp-quick {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-2, #b5bdd1);
    border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.10));
    border-radius: 14px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11.5px;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cp-quick:hover {
    background: rgba(255, 184, 107, 0.14);
    color: var(--a-amber, #ffb86b);
    border-color: rgba(255, 184, 107, 0.40);
}
.cp-empty-hint {
    font-size: 10.5px;
    color: var(--ink-3, #7a8290);
    opacity: 0.7;
    margin-top: 14px;
}

/* ─── Messages ─────────────────────────────────────────────────── */
.cp-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
}
.cp-msg.cp-user {
    align-items: flex-end;
}
.cp-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    max-width: 88%;
}
.cp-msg.cp-user .cp-bubble {
    background: var(--a-amber, #ffb86b);
    color: #1a1a1a;
    border-bottom-right-radius: 4px;
}
.cp-msg.cp-assistant .cp-bubble {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink, #d8dfe9);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-msg.cp-error .cp-bubble {
    background: rgba(255, 122, 107, 0.14);
    border: 1px solid rgba(255, 122, 107, 0.40);
    color: #ff7a6b;
}

.cp-bubble p { margin: 0 0 6px; }
.cp-bubble p:last-child { margin-bottom: 0; }
.cp-bubble strong { color: var(--ink, #fff); font-weight: 600; }
.cp-bubble em { font-style: italic; color: var(--ink-2, #b5bdd1); }
.cp-bubble a { color: var(--a-amber, #ffb86b); text-decoration: underline; }
.cp-bubble .cp-list {
    margin: 4px 0;
    padding-left: 18px;
    list-style: disc;
}
.cp-bubble .cp-list li { padding: 1px 0; }
.cp-inline {
    background: rgba(0, 0, 0, 0.30);
    color: var(--a-amber, #ffb86b);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
}
.cp-code {
    background: rgba(0, 0, 0, 0.40);
    color: #e0e0e0;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    margin: 6px 0;
}

/* ─── Tables (GFM markdown) ────────────────────────────────────── */
.cp-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 11.5px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    overflow: hidden;
}
.cp-table th,
.cp-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.cp-table th {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--a-amber, #ffb86b);
    background: rgba(255, 255, 255, 0.03);
}
.cp-table tr:last-child td { border-bottom: none; }
.cp-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* ─── Tool-call bubbles ───────────────────────────────────────── */
.cp-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(95, 209, 255, 0.10);
    border: 1px solid rgba(95, 209, 255, 0.25);
    color: #8ed8ff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    margin-bottom: 4px;
    align-self: flex-start;
}
.cp-tool.is-error {
    background: rgba(255, 122, 107, 0.10);
    border-color: rgba(255, 122, 107, 0.30);
    color: #ff9b8e;
}
.cp-tool-name { font-weight: 500; }
.cp-tool-args {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--ink-3, #7a8290);
}

/* ─── Meta line ────────────────────────────────────────────────── */
.cp-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--ink-3, #7a8290);
    margin-top: 2px;
    opacity: 0.7;
}

/* ─── Loading dots ─────────────────────────────────────────────── */
.cp-loading {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
}
.cp-loading span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--a-amber, #ffb86b);
    animation: cp-bounce 1.2s infinite ease-in-out;
}
.cp-loading span:nth-child(2) { animation-delay: 0.15s; }
.cp-loading span:nth-child(3) { animation-delay: 0.30s; }
@keyframes cp-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ─── Input area ──────────────────────────────────────────────── */
.cp-input {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
    background: rgba(0, 0, 0, 0.18);
    align-items: flex-end;
}
.cp-input textarea {
    flex: 1;
    resize: none;
    background: rgba(0, 0, 0, 0.30);
    color: var(--ink, #d8dfe9);
    border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.10));
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    /* Start at button-height and grow on input (auto-grow handler in copilot.js).
     * Without min-height the rows="1" textarea collapses to ~22px which would
     * leave the button taller than the input — the original imbalance just
     * inverted. */
    min-height: 38px;
    max-height: 160px;
    overflow-y: hidden;
}
.cp-input textarea:focus {
    outline: none;
    border-color: var(--a-amber, #ffb86b);
}
/* The send button sat at the textarea's full height because of flex-end
 * stretching — fix it to match a one-line textarea (~38px) so it stays
 * compact even when the textarea grows to multi-line. */
.cp-input .cp-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
    line-height: 1;
    align-self: flex-end;
}

/* ─── Modal (settings) ────────────────────────────────────────── */
.cp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-modal {
    width: min(540px, 92vw);
    background: var(--glass-2-strong, rgba(8, 12, 22, 0.96));
    border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.10));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    color: var(--ink, #d8dfe9);
    display: flex;
    flex-direction: column;
}
.cp-modal-head {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.08));
}
.cp-modal-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cp-row { display: flex; gap: 10px; }
.cp-row .cp-field { flex: 1; }
.cp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cp-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3, #7a8290);
}
.cp-field input,
.cp-field select {
    background: rgba(0, 0, 0, 0.35);
    color: var(--ink, #d8dfe9);
    border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.10));
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: inherit;
}
.cp-field input:focus, .cp-field select:focus {
    outline: none;
    border-color: var(--a-amber, #ffb86b);
}
.cp-hint {
    font-size: 10.5px;
    color: var(--ink-3, #7a8290);
}
.cp-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.08));
    background: rgba(0, 0, 0, 0.18);
}

/* ─── "Frag Copilot dazu" mini context-menu ────────────────────── */
.cp-cm {
    position: absolute;
    z-index: 10000;
    background: var(--glass-2-strong, rgba(8, 12, 22, 0.96));
    border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    min-width: 180px;
}
.cp-cm-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--ink, #d8dfe9);
    border: none;
    padding: 8px 12px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
}
.cp-cm-item:hover {
    background: rgba(255, 184, 107, 0.15);
    color: var(--a-amber, #ffb86b);
}

/* ─── Confirm-Modal (destructive tool) ─────────────────────────── */
.cp-modal.cp-confirm .cp-modal-head {
    color: var(--a-amber, #ffb86b);
    border-bottom-color: rgba(255, 184, 107, 0.30);
}
.cp-confirm-desc {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--ink-2, #b5bdd1);
    line-height: 1.5;
}
.cp-confirm-args {
    background: rgba(0, 0, 0, 0.30);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}
.cp-confirm-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cp-confirm-key {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3, #7a8290);
}
.cp-confirm-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--ink, #d8dfe9);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 8px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------
 * Keyboard accessibility (a11y / WCAG 2.4.7 — focus visible)
 * Generic outline for interactive elements inside the Copilot chat.
 * Uses --theme-accent so user accent applies.
 * ------------------------------------------------------------------ */
.cp-host button:focus-visible,
.cp-host [tabindex]:focus-visible,
.cp-host input:focus-visible,
.cp-host select:focus-visible,
.cp-host textarea:focus-visible,
.cp-btn:focus-visible,
.cp-cm-item:focus-visible,
.cp-suggestion:focus-visible {
    outline: 2px solid var(--theme-accent, #5fd1ff);
    outline-offset: 2px;
}