/* ---- Speaker chips ---- */
.speaker-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--border-subtle); background: var(--bg-surface);
    transition: border-color 0.15s, background 0.15s; position: relative;
}
.speaker-chip:hover { border-color: var(--accent-border); background: var(--bg-surface-hover); }
.speaker-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.speaker-name-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: none; border: none; cursor: pointer; padding: 0; line-height: 1.3; }
.speaker-name-btn .named { color: var(--text-primary); font-weight: 500; }
.speaker-name-btn .unnamed { color: var(--text-muted); font-style: italic; }
.speaker-name-btn .edit-icon { color: var(--placeholder); transition: color 0.15s; }
.speaker-chip:hover .edit-icon { color: var(--accent-text); }
.speaker-input {
    font-size: 13px !important; padding: 6px 10px !important;
    border: 1px solid var(--accent-border) !important; border-radius: 10px !important;
    outline: none !important; width: 170px !important;
    background: var(--bg-surface) !important; color: var(--text-primary) !important;
    box-shadow: 0 0 0 2px var(--accent-bg) !important; transition: border-color 0.15s, box-shadow 0.15s;
}
.speaker-input:focus { border-color: var(--accent-border) !important; box-shadow: 0 0 0 3px var(--shadow-accent) !important; }
.speaker-input::placeholder { color: var(--placeholder) !important; }

/* ---- Autocomplete dropdown (speaker) ---- */
.autocomplete-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-surface) !important; border: 1px solid var(--border-input) !important;
    border-radius: 10px !important; margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 50;
    overflow: hidden; min-width: 220px; padding: 4px 0;
}
.dark .autocomplete-dropdown, .dark .share-autocomplete-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.autocomplete-item {
    display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%;
    padding: 8px 12px; font-size: 13px; border: none !important;
    background: none !important; cursor: pointer; text-align: left;
    color: var(--text-secondary) !important; transition: background 0.1s;
}
.autocomplete-item > .flex.flex-col { min-width: 0; }
.autocomplete-item:hover, .autocomplete-item.active {
    background: var(--accent-bg) !important; color: var(--text-primary) !important;
}
.ac-name { font-weight: 500; }
.ac-pos { color: var(--text-muted); font-size: 11px; }

/* ---- Share autocomplete ---- */
.share-autocomplete-input {
    width: 100% !important; font-size: 13px !important; padding: 8px 10px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 8px !important;
    outline: none !important; background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important; transition: border-color 0.15s;
}
.share-autocomplete-input:focus { border-color: var(--accent-border) !important; }
.share-autocomplete-input::placeholder { color: var(--placeholder) !important; }
.share-autocomplete-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-surface) !important; border: 1px solid var(--border-input) !important;
    border-radius: 8px !important; margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 60;
    overflow: hidden; padding: 4px 0; max-height: 200px; overflow-y: auto;
}
.share-autocomplete-item {
    display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%;
    padding: 8px 12px; font-size: 13px; border: none !important;
    background: none !important; cursor: pointer; text-align: left;
    color: var(--text-secondary) !important; transition: background 0.1s;
}
.share-autocomplete-item > .flex.flex-col { min-width: 0; }
.share-autocomplete-item:hover, .share-autocomplete-item.active {
    background: var(--accent-bg) !important;
}

/* ---- Seek bar ---- */
.seek-bar {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    border-radius: 3px; background: var(--border-input); outline: none; cursor: pointer;
}
.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent-text); border: 2px solid var(--bg-surface);
    cursor: pointer; box-shadow: 0 0 6px var(--shadow-accent);
}
.seek-bar::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent-text); border: 2px solid var(--bg-surface); cursor: pointer;
}
.seek-bar::-webkit-slider-runnable-track { border-radius: 3px; }

/* ---- Prevent horizontal overflow ---- */
.summary-section { overflow-x: auto; max-width: 100%; }
.summary-section table { display: block; overflow-x: auto; max-width: 100%; }
.summary-section pre { overflow-x: auto; max-width: 100%; }

/* ---- Chat answer styling ---- */
.chat-answer { color: var(--text-primary); }
.chat-answer p { margin: 6px 0; color: var(--text-primary); }
.chat-answer p:first-child { margin-top: 0; }
.chat-answer p:last-child { margin-bottom: 0; }
.chat-answer strong { font-weight: 600; color: var(--text-primary); }
.chat-answer em { font-style: italic; color: var(--text-primary); opacity: 0.85; }
.chat-answer h3 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 10px 0 4px; }
.chat-answer ul { list-style: disc; padding-left: 18px; margin: 6px 0; }
.chat-answer ol { list-style: decimal; padding-left: 18px; margin: 6px 0; }
.chat-answer li { margin: 3px 0; color: var(--text-primary); }
.chat-answer code { background: var(--accent-bg); padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--accent-text); }
.chat-answer blockquote { border-left: 2px solid var(--accent); padding-left: 10px; color: var(--text-secondary); margin: 6px 0; font-style: italic; }
.chat-answer-bubble {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    overflow: hidden;
    word-break: break-word;
}
.chat-answer pre {
    background: var(--bg-surface-hover);
    padding: 8px 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 6px 0;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
}
.chat-answer table {
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 0.8rem;
    width: 100%;
}
.chat-answer th, .chat-answer td {
    border: 1px solid var(--border-default);
    padding: 4px 8px;
    text-align: left;
}
.chat-answer th {
    background: var(--bg-surface-hover);
    font-weight: 600;
}
.chat-answer > *:first-child { margin-top: 0; }
.chat-answer > *:last-child { margin-bottom: 0; }

/* ---- TOC ---- */
.toc-item.active { color: var(--accent-text) !important; font-weight: 600; }

/* ---- Task checkboxes & table controls ---- */
.task-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid var(--border-input); background: transparent;
    cursor: pointer; transition: all 0.15s; padding: 0; flex-shrink: 0;
}
.task-check:hover { border-color: var(--accent-text); background: var(--accent-bg); }
.task-check.checked { border-color: var(--status-success-text); background: var(--status-success-bg); }
.task-check.checked svg { opacity: 1; }
.task-check svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.15s; stroke: var(--status-success-text); stroke-width: 2.5; fill: none; }
.summary-section td.status-cell { width: 28px; text-align: center; vertical-align: middle; padding: 8px 4px; }
.summary-section th.status-header { width: 28px; text-align: center; padding: 8px 4px; font-size: 0.7rem; }
.add-col-th { width: 32px; padding: 6px !important; text-align: center; background: transparent !important; border-bottom: 1px solid var(--border-subtle); }
.add-col-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: 1px dashed var(--border-subtle); background: none; color: var(--placeholder); cursor: pointer; font-size: 14px; line-height: 1; transition: all 0.15s; }
.add-col-btn:hover { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-bg); }
.add-col-td { width: 32px; padding: 6px !important; border-bottom: 1px solid var(--border-subtle); }
.add-row-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 4px 0; border: 1px dashed var(--border-subtle); border-radius: 6px; background: none; color: var(--placeholder); cursor: pointer; font-size: 13px; transition: all 0.15s; margin-top: 4px; }
.add-row-btn:hover { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-bg); }
.remove-col-btn { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 4px; border: none; background: var(--status-error-bg); color: var(--status-error-text); font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; display: flex; align-items: center; justify-content: center; }
.summary-section th:hover .remove-col-btn { opacity: 1; }
.remove-col-btn:hover { background: var(--status-error-border); }

/* ---- Save indicator ---- */
.save-flash { animation: saveFlash 0.6s ease-out; }
@keyframes saveFlash { 0% { outline-color: var(--status-success-border); } 100% { outline-color: transparent; } }