:root {
    --bg: #0f1115;
    --panel: #171a21;
    --panel-2: #1d212a;
    --border: #272c38;
    --text: #e7e9ee;
    --muted: #8a93a6;
    --accent: #6ea8fe;
    --accent-2: #b388ff;
    --good: #4ade80;
    --warn: #fbbf24;
    --danger: #ef4444;
}
  
* { 
    box-sizing: border-box; 
}

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background: var(--bg); 
    color: var(--text); 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.topbar {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 10px 16px; 
    border-bottom: 1px solid var(--border); 
    background: var(--panel);
}

.topbar h1 { 
    font-size: 14px; 
    font-weight: 600; 
    margin: 0; 
    letter-spacing: .3px; 
}

.topbar .meta { 
    font-size: 12px; 
    color: var(--muted); 
}

.logo {
    width: 60px;
    height: 60px;
    margin-right: 35px;
}

.settings-trigger-btn {
    background: linear-gradient(180deg, #232936 0%, #1a1f29 100%);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.08);
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.settings-trigger-btn:hover {
    border-color: rgba(110,168,254,.35);
    transform: translateY(-1px);
    background: linear-gradient(180deg, #2a3040 0%, #202633 100%);
}

.settings-trigger-btn:active {
    transform: translateY(0);
}

.layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px;
    height: calc(100vh - 75px);
}

.col {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.col header {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
    display: flex; justify-content: space-between; align-items: center;
}

.col .body { 
    flex: 1; 
    overflow-y: auto; 
    padding: 14px; 
}

/* SETTINGS MODAL */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5,8,13,0.78);
    backdrop-filter: blur(10px) saturate(120%);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.modal-content {
    width: min(100%, 820px);
    max-height: min(88vh, 900px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(29,33,42,.98) 0%, rgba(19,22,30,.98) 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.modal-header,
.modal-footer {
    padding: 18px 22px;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .2px;
}

.modal-body {
    padding: 22px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.settings-section {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
}

.settings-section h3 {
    font-size: 0.78rem;
    margin: 12px 0 12px 0;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group label {
    font-size: 0.86rem;
    color: #d7dbe3;
    font-weight: 600;
}

.field-help {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
}

textarea,
input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}

select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
    cursor: pointer;
}

select:focus {
    border-color: rgba(110,168,254,.55);
    box-shadow: 0 0 0 3px rgba(110,168,254,.12);
    background: #222734;
}

select option {
    background: var(--panel-2);
    color: var(--text);
}

.prompt-editor {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.prompt-context {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: #aeb6c6;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
}

.prompt-context::selection {
    background: rgba(110,168,254,.35);
}

.prompt-editor textarea {
    background: linear-gradient(180deg, rgba(35,40,52,.98), rgba(27,31,41,.98));
}

.prompt-editor textarea:focus {
    background: #222734;
}

/* Floating banner (top) */
.floating-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 10px;
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    z-index: 9999;
    min-width: 240px;
    max-width: 80%;
    text-align: center;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.floating-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.floating-banner.info {
    background: linear-gradient(180deg, rgba(40,44,55,0.95), rgba(30,34,44,0.95));
    border: 1px solid rgba(110,168,254,0.12);
}

.floating-banner.success {
    background: linear-gradient(180deg, rgba(34,48,40,0.95), rgba(26,36,28,0.95));
    border: 1px solid rgba(74,222,128,0.12);
}

.floating-banner.error {
    background: linear-gradient(180deg, rgba(55,30,30,0.95), rgba(40,20,20,0.95));
    border: 1px solid rgba(239,68,68,0.12);
}

textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

textarea:focus,
input:focus {
    border-color: rgba(110,168,254,.55);
    box-shadow: 0 0 0 3px rgba(110,168,254,.12);
    background: #222734;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.grid-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.save-btn,
.close-btn {
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
    transition: transform .15s, background .15s, border-color .15s, color .15s;
}

.save-btn {
    background: linear-gradient(180deg, #6ea8fe 0%, #4f86ea 100%);
    color: #08111f;
    padding: 10px 16px;
    box-shadow: 0 10px 24px rgba(110,168,254,.18);
}

.save-btn:hover {
    transform: translateY(-1px);
}

.close-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.07);
    font-size: 1.2rem;
    line-height: 1;
}

.close-btn:hover {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.24);
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #2a3140;
    border-radius: 999px;
}

@media (max-width: 720px) {
    .modal-overlay {
        padding: 10px;
    }

    .modal-content {
        max-height: 92vh;
        border-radius: 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .settings-section {
        padding: 14px;
    }

    .grid-fields {
        grid-template-columns: 1fr;
    }
}

/* LEFT: mic + transcript */
.mic-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.mic-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--accent); color: #000; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}

.mic-btn.recording { 
    background: var(--danger); 
    color: #fff; 
    animation: pulse 1.4s infinite; 
}

@keyframes pulse { 
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);} 
    50%{box-shadow:0 0 0 10px rgba(239,68,68,0);} 
}

.mic-status { 
    font-size: 13px; 
    color: var(--muted); 
}

.transcript-line { 
    font-size: 14px; 
    line-height: 1.55; 
    margin-bottom: 10px; 
    color: #cfd3dc; 
}

.transcript-line .ts { 
    color: var(--muted); 
    font-size: 11px; 
    margin-right: 6px; 
}

.transcript-line.new { 
    animation: fadein .4s ease-out;
}

.transcript-line.interim {
    color: var(--muted);
    font-style: italic;
    border-left: 2px solid var(--accent);
    padding-left: 8px;
}

@keyframes fadein { 
    from{opacity:0; transform: translateY(4px);} 
    to{opacity:1; transform:none;} 
}

/* MIDDLE: suggestions */
.reload-row { 
    padding: 10px 14px; 
    border-bottom: 1px solid var(--border); 
    display: flex; 
    gap: 8px; 
    align-items: center; 
}

.reload-btn {
    background: var(--panel-2); 
    color: var(--text); 
    border: 1px solid var(--border);
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 12px; 
    cursor: pointer;
}

.reload-btn:hover { 
    border-color: var(--accent); 
}

.countdown { 
    font-size: 11px; 
    color: var(--muted); 
    margin-left: auto; 
}

.suggestion {
    border: 1px solid var(--border); 
    background: var(--panel-2);
    border-radius: 8px; 
    padding: 12px; 
    margin-bottom: 10px; 
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}

.suggestion:hover { 
    border-color: var(--accent); 
    transform: translateY(-1px); 
}

.suggestion.fresh { 
    border-color: var(--accent); 
}

.suggestion.stale { 
    opacity: .55; 
}

.sug-tag {
    display: inline-block; 
    font-size: 10px; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    padding: 2px 6px; 
    border-radius: 4px; 
    margin-bottom: 6px;
}

.sug-tag.question { 
    background: rgba(110,168,254,.15); 
    color: var(--accent);
}

.sug-tag.talking-point  { 
    background: rgba(179,136,255,.15); 
    color: var(--accent-2); 
}

.sug-tag.answer   { 
    background: rgba(74,222,128,.15);  
    color: var(--good); 
}

.sug-tag.fact     { 
    background: rgba(251,191,36,.15);  
    color: var(--warn); 
}

.sug-title { font-size: 14px; font-weight: 500; line-height: 1.4; }

.sug-batch-divider { font-size: 10px; color: var(--muted); text-align: center; padding: 6px 0; text-transform: uppercase; letter-spacing: 1px; }

/* RIGHT: chat */
.chat-msg { margin-bottom: 14px; }

.chat-msg .who { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }

.chat-msg .bubble { background: var(--panel-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }

.chat-msg .bubble p { margin: 0 0 8px 0; }

.chat-msg .bubble p:last-child { margin-bottom: 0; }

.chat-msg .bubble ul { padding-left: 20px; margin: 8px 0; }

.chat-msg .bubble table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }

.chat-msg .bubble td, .chat-msg .bubble th { border: 1px solid #ddd; padding: 4px; }

.chat-msg.user .bubble { background: rgba(110,168,254,.08); border-color: rgba(110,168,254,.3); }

.chat-msg.ai .bubble p {
    display: inline;
    margin: 0;
}

.chat-input-row { padding: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

.chat-input-row input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 13px; }

.chat-input-row button { background: var(--accent); color: #000; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }

.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 30px 10px; line-height: 1.5; }

.help-banner {
    background: rgba(110,168,254,.08); border: 1px solid rgba(110,168,254,.3);
    color: #cfd3dc; padding: 8px 12px; font-size: 12px; border-radius: 6px;
    margin: 12px; line-height: 1.5;
}

.col .body::-webkit-scrollbar { width: 6px; }

.col .body::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 3px; }