/* ── Research Agent — main styles ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #1a1a2e;
    color: #e0e0e0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    background: #16213e;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #0f3460;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
header h1 { font-size: 1.2rem; font-weight: 600; color: #e94560; }

#model-select, #tutor-model-select {
    background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e;
    padding: 0.35rem 0.6rem; border-radius: 0.5rem; font-size: 0.8rem;
    font-family: inherit; outline: none; cursor: pointer; max-width: 280px;
}
#model-select:focus, #tutor-model-select:focus { border-color: #e94560; }
#depth-toggle {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.35rem 0.65rem; border-radius: 0.5rem; font-size: 0.75rem;
    cursor: pointer; white-space: nowrap;
}
#depth-toggle:hover { background: #1a3a6e; color: #e0e0e0; }
#depth-toggle.deep { background: #e94560; color: white; border-color: #e94560; }
.model-info { font-size: 0.7rem; color: #64748b; margin-left: 0.25rem; }

/* ── Chat area ── */
#chat-container {
    flex: 1; overflow-y: auto; padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}

.msg-wrapper { display: flex; flex-direction: column; max-width: 80%; }
.msg-wrapper.user      { align-self: flex-end; }
.msg-wrapper.assistant { align-self: flex-start; }
.msg-wrapper.error     { align-self: flex-start; }

.message {
    padding: 0.85rem 1.1rem; border-radius: 1rem;
    line-height: 1.55; font-size: 0.95rem;
    word-wrap: break-word; overflow-wrap: break-word;
}
.message.user {
    background: #0f3460; color: #f0f0f0;
    border-bottom-right-radius: 0.25rem;
}
.message.assistant {
    background: #16213e; border: 1px solid #0f3460;
    border-bottom-left-radius: 0.25rem;
}
.message.error {
    background: #3b1020; border: 1px solid #e94560; color: #fca5a5;
}

/* Rendered HTML inside messages */
.message img  { max-width: 100%; display: block; border-radius: 0.5rem; margin: 0.5rem 0; }
.message p    { margin: 0.4em 0; }
.message code {
    background: #0d1b2e; padding: 0.15em 0.35em;
    border-radius: 0.25em; font-size: 0.88em;
}
.message pre {
    background: #0d1b2e; padding: 0.75rem; border-radius: 0.5rem;
    overflow-x: auto; margin: 0.5em 0;
}
.message pre code { background: none; padding: 0; }
.message a { color: #60a5fa; }

/* ── Reasoning collapsible ── */
.reasoning-toggle { margin-top: 0.4rem; }
.reasoning-toggle summary {
    cursor: pointer; font-size: 0.78rem; color: #64748b;
    user-select: none; padding: 0.25rem 0; list-style: none;
}
.reasoning-toggle summary::before { content: '\25b6  '; font-size: 0.65rem; }
.reasoning-toggle[open] summary::before { content: '\25bc  '; }
.reasoning-content {
    background: #0d1b2e; border: 1px solid #1a2a4e; border-radius: 0.5rem;
    padding: 0.65rem 0.85rem; margin-top: 0.3rem; font-size: 0.8rem;
    line-height: 1.5; color: #94a3b8; max-height: 300px;
    overflow-y: auto; white-space: pre-wrap; word-wrap: break-word;
}

/* Live reasoning during streaming */
.live-reasoning {
    background: #0d1b2e; border: 1px solid #1a2a4e; border-radius: 0.5rem;
    padding: 0.65rem 0.85rem; font-size: 0.8rem; line-height: 1.5;
    color: #94a3b8; max-height: 300px; overflow-y: auto;
    white-space: pre-wrap; word-wrap: break-word;
}
.live-reasoning-label {
    font-size: 0.75rem; color: #e94560; font-weight: 600;
    margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.4rem;
}
.live-reasoning-label .pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #e94560;
    animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Action buttons ── */
.msg-actions {
    display: flex; gap: 0.4rem; margin-top: 0.35rem;
    opacity: 0; transition: opacity 0.15s;
}
.msg-wrapper:hover .msg-actions { opacity: 1; }
.msg-actions button {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.2rem 0.55rem; border-radius: 0.35rem; font-size: 0.72rem;
    cursor: pointer; transition: all 0.15s;
}
.msg-actions button:hover { background: #1a3a6e; color: #e0e0e0; }

/* ── Token badge ── */
.token-badge { font-size: 0.68rem; color: #475569; margin-top: 0.2rem; }

/* ── Thinking dots ── */
.thinking {
    align-self: flex-start; color: #64748b; font-style: italic;
    padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.thinking .dots span { animation: blink 1.4s infinite; font-size: 1.5rem; line-height: 1; }
.thinking .dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* ── Input area ── */
#input-area {
    padding: 1rem 1.5rem; background: #16213e;
    border-top: 1px solid #0f3460; display: flex; gap: 0.75rem;
}
#input-area textarea {
    flex: 1; background: #1a1a2e; border: 1px solid #0f3460; color: #e0e0e0;
    padding: 0.75rem 1rem; border-radius: 0.75rem; font-family: inherit;
    font-size: 0.95rem; resize: vertical; outline: none;
    min-height: 2.75rem; max-height: 12rem;
}
#input-area textarea:focus { border-color: #e94560; }
#input-area button {
    background: #e94560; color: white; border: none; padding: 0 1.25rem;
    border-radius: 0.75rem; font-size: 1rem; cursor: pointer;
    transition: background 0.15s;
}
#input-area button:hover { background: #c73652; }
#input-area button:disabled { background: #4a4a5a; cursor: not-allowed; }

/* Mic button */
#mic-btn {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0 0.9rem; border-radius: 0.75rem; font-size: 1.15rem;
    cursor: pointer; transition: all 0.15s; line-height: 1;
}
#mic-btn:hover { background: #1a3a6e; color: #e0e0e0; }
#mic-btn.recording { background: #e94560; color: white; animation: pulse 1s infinite; border-color: #e94560; }
#mic-btn.processing { opacity: 0.6; cursor: wait; }

/* Audio waveform visualizer */
#visualizer-container {
    display: none; align-items: center; gap: 0.5rem;
    padding: 0.4rem 1.5rem; background: #16213e;
    border-top: 1px solid #0f3460;
}
#visualizer-container.active { display: flex; }
#visualizer-container .viz-label {
    font-size: 0.72rem; color: #e94560; font-weight: 600;
    white-space: nowrap; display: flex; align-items: center; gap: 0.3rem;
}
#visualizer-container .viz-label .pulse { width: 6px; height: 6px; border-radius: 50%; background: #e94560; animation: pulse 1s infinite; }
#audio-visualizer {
    flex: 1; height: 36px; border-radius: 0.35rem;
}
#viz-timer { font-size: 0.72rem; color: #94a3b8; font-variant-numeric: tabular-nums; }

/* Voice controls in header */
.voice-controls { display: flex; align-items: center; gap: 0.35rem; }
#voice-select {
    background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e;
    padding: 0.25rem 0.4rem; border-radius: 0.4rem; font-size: 0.7rem;
    font-family: inherit; outline: none; cursor: pointer; max-width: 180px;
}
#voice-select:focus { border-color: #e94560; }
#lang-select {
    background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e;
    padding: 0.25rem 0.3rem; border-radius: 0.4rem; font-size: 0.7rem;
    font-family: inherit; outline: none; cursor: pointer; width: 52px;
}
#lang-select:focus { border-color: #e94560; }
#dialog-toggle {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.25rem 0.55rem; border-radius: 0.4rem; font-size: 0.7rem;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
#dialog-toggle:hover { background: #1a3a6e; color: #e0e0e0; }
#dialog-toggle.active { background: #e94560; color: white; border-color: #e94560; }

/* Speaking indicator on assistant messages */
.speaking-indicator {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; color: #e94560; margin-top: 0.25rem;
}
.speaking-indicator .bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.speaking-indicator .bars span {
    width: 3px; background: #e94560; border-radius: 1px;
    animation: speakBar 0.8s ease-in-out infinite alternate;
}
.speaking-indicator .bars span:nth-child(1) { height: 6px; animation-delay: 0s; }
.speaking-indicator .bars span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.speaking-indicator .bars span:nth-child(3) { height: 14px; animation-delay: 0.3s; }
.speaking-indicator .bars span:nth-child(4) { height: 8px; animation-delay: 0.45s; }
@keyframes speakBar { 0% { transform: scaleY(0.4); } 100% { transform: scaleY(1); } }

/* Stop-speaking button */
#stop-speak-btn {
    display: none; background: #3b1020; color: #fca5a5; border: 1px solid #e94560;
    padding: 0 0.7rem; border-radius: 0.75rem; font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s;
}
#stop-speak-btn.visible { display: inline-block; }
#stop-speak-btn:hover { background: #5a1020; }

/* Cancel-request button */
#cancel-btn {
    display: none; background: #b91c1c; color: #fee2e2; border: 1px solid #ef4444;
    padding: 0 1rem; border-radius: 0.75rem; font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s;
}
#cancel-btn.visible { display: inline-block; }
#cancel-btn:hover { background: #dc2626; }

/* ── Toast ── */
.toast {
    position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%);
    background: #0f3460; color: #e0e0e0; padding: 0.5rem 1.2rem;
    border-radius: 0.5rem; font-size: 0.85rem; z-index: 100;
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
    display: flex; align-items: center; gap: 0.5rem;
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast .toast-close {
    background: none; border: none; color: #e0e0e0; cursor: pointer;
    font-size: 1rem; padding: 0 0.2rem; margin-left: 0.3rem; line-height: 1;
}
.toast .toast-close:hover { color: #fff; }

/* ── Session controls ── */
.header-spacer { flex: 1; }
.session-controls { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.session-controls button {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.35rem 0.65rem; border-radius: 0.5rem; font-size: 0.75rem;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.session-controls button:hover { background: #1a3a6e; color: #e0e0e0; }
.nav-link {
    background: #1a3a6e; color: #60a5fa; border: 1px solid #3b82f6;
    padding: 0.35rem 0.75rem; border-radius: 0.5rem; font-size: 0.8rem;
    font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap;
    text-decoration: none; display: inline-flex; align-items: center;
}
.nav-link:hover { background: #3b82f6; color: #fff; }

/* ── Sessions panel ── */
.sessions-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 49; display: none;
}
.sessions-overlay.open { display: block; }
.sessions-panel {
    position: fixed; top: 0; right: -340px; width: 340px; height: 100%;
    background: #16213e; border-left: 1px solid #0f3460; z-index: 50;
    display: flex; flex-direction: column; transition: right 0.25s ease;
}
.sessions-panel.open { right: 0; }
.sessions-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.2rem; border-bottom: 1px solid #0f3460;
}
.sessions-header h2 { font-size: 1rem; color: #e94560; }
.sessions-header button {
    background: none; border: none; color: #94a3b8; font-size: 1.2rem;
    cursor: pointer; padding: 0.2rem 0.5rem;
}
.sessions-header button:hover { color: #e0e0e0; }
.sessions-list { flex: 1; overflow-y: auto; padding: 0.75rem; }
.session-item {
    background: #1a1a2e; border: 1px solid #0f3460; border-radius: 0.5rem;
    padding: 0.65rem 0.85rem; margin-bottom: 0.5rem; cursor: pointer;
    transition: border-color 0.15s;
}
.session-item:hover { border-color: #e94560; }
.session-item.active { border-color: #e94560; background: #1e2240; }
.session-item-name { font-size: 0.88rem; font-weight: 500; color: #e0e0e0; }
.session-item-meta { font-size: 0.7rem; color: #64748b; margin-top: 0.2rem; }
.session-item-actions { display: flex; gap: 0.3rem; margin-top: 0.35rem; }
.session-item-actions button {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.15rem 0.5rem; border-radius: 0.3rem; font-size: 0.68rem;
    cursor: pointer;
}
.session-item-actions button:hover { background: #1a3a6e; color: #e0e0e0; }
.session-item-actions button.delete:hover { background: #5a1020; color: #fca5a5; }
.no-sessions { color: #64748b; font-size: 0.85rem; text-align: center; padding: 2rem; }

/* ── Auth modal ── */
.auth-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 200; display: none;
    justify-content: center; align-items: center;
}
.auth-overlay.open { display: flex; }
.auth-box {
    background: #16213e; border: 1px solid #0f3460; border-radius: 0.75rem;
    padding: 2rem; width: 340px; max-width: 90%;
}
.auth-box h2 { color: #e94560; font-size: 1.1rem; margin-bottom: 1rem; text-align: center; }
.auth-box input {
    display: block; width: 100%; background: #1a1a2e; border: 1px solid #0f3460;
    color: #e0e0e0; padding: 0.6rem 0.8rem; border-radius: 0.5rem;
    font-family: inherit; font-size: 0.9rem; margin-bottom: 0.65rem; outline: none;
}
.auth-box input:focus { border-color: #e94560; }
.auth-box .auth-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.auth-box .auth-actions button {
    flex: 1; padding: 0.55rem; border-radius: 0.5rem; font-size: 0.85rem;
    cursor: pointer; border: 1px solid #1a3a6e; transition: all 0.15s;
}
.auth-box .auth-btn-primary { background: #e94560; color: white; border-color: #e94560; }
.auth-box .auth-btn-primary:hover { background: #c73652; }
.auth-box .auth-btn-secondary { background: #0f3460; color: #94a3b8; }
.auth-box .auth-btn-secondary:hover { background: #1a3a6e; color: #e0e0e0; }
.auth-box .auth-toggle { text-align: center; margin-top: 0.75rem; font-size: 0.78rem; color: #64748b; }
.auth-box .auth-toggle a { color: #60a5fa; cursor: pointer; text-decoration: underline; }
.auth-box .auth-error { color: #fca5a5; font-size: 0.8rem; margin-bottom: 0.5rem; display: none; }

/* ── User badge in header ── */
.user-badge {
    display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #94a3b8;
}
.user-badge .username { color: #60a5fa; font-weight: 500; }
.user-badge button {
    background: none; border: none; color: #64748b; font-size: 0.72rem;
    cursor: pointer; padding: 0.15rem 0.35rem;
}
.user-badge button:hover { color: #fca5a5; }

/* ── File upload & chips ── */
.file-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.5rem; max-height: 4rem; overflow-y: auto; }
.file-chips:empty { display: none; }
.file-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #0f3460; color: #94a3b8; font-size: 0.72rem;
    padding: 0.2rem 0.5rem; border-radius: 0.4rem;
}
.file-chip button {
    background: none; border: none; color: #64748b; font-size: 0.7rem;
    cursor: pointer; padding: 0; line-height: 1;
}
.file-chip button:hover { color: #fca5a5; }
#attach-btn {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.45rem 0.6rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.9rem;
}
#attach-btn:hover { background: #1a3a6e; color: #e0e0e0; }

/* ── Export dropdown ── */
.export-dropdown { position: relative; display: inline-block; }
.export-dropdown button.export-trigger {
    background: none; border: 1px solid #1a3a6e; color: #94a3b8;
    font-size: 0.7rem; padding: 0.2rem 0.4rem; border-radius: 0.35rem; cursor: pointer;
}
.export-dropdown button.export-trigger:hover { background: #1a3a6e; color: #e0e0e0; }
.export-menu {
    display: none; position: absolute; bottom: 100%; right: 0;
    background: #16213e; border: 1px solid #0f3460; border-radius: 0.5rem;
    padding: 0.3rem 0; z-index: 50; min-width: 120px;
}
.export-menu.open { display: block; }
.export-menu button {
    display: block; width: 100%; background: none; border: none;
    color: #94a3b8; font-size: 0.75rem; padding: 0.35rem 0.7rem;
    text-align: left; cursor: pointer;
}
.export-menu button:hover { background: #1a3a6e; color: #e0e0e0; }

/* ── Files panel ── */
.files-panel {
    position: fixed; top: 0; right: -350px; width: 340px; height: 100%;
    background: #16213e; border-left: 1px solid #0f3460;
    z-index: 110; transition: right 0.25s; overflow-y: auto; padding: 1rem;
}
.files-panel.open { right: 0; }
.files-panel-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 105;
}
.files-panel-overlay.open { display: block; }
.files-panel h3 { color: #e94560; font-size: 0.95rem; margin-bottom: 0.75rem; }

/* ── LLM Settings panel ── */
.llm-settings-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 105;
}
.llm-settings-overlay.open { display: block; }
.llm-settings-panel {
    position: fixed; top: 0; right: -380px; width: 370px; height: 100%;
    background: #16213e; border-left: 1px solid #0f3460;
    z-index: 110; transition: right 0.25s; overflow-y: auto; padding: 0;
    display: flex; flex-direction: column;
}
.llm-settings-panel.open { right: 0; }
.llm-settings-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.2rem; border-bottom: 1px solid #0f3460; flex-shrink: 0;
}
.llm-settings-header h3 { color: #e94560; font-size: 0.95rem; margin: 0; }
.llm-settings-header button {
    background: none; border: none; color: #94a3b8; font-size: 1.2rem;
    cursor: pointer; padding: 0.2rem 0.5rem;
}
.llm-settings-header button:hover { color: #e0e0e0; }
.llm-settings-body { flex: 1; overflow-y: auto; padding: 0.75rem 1.2rem 1.5rem; }
.llm-param-group { margin-bottom: 1rem; }
.llm-param-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.25rem;
}
.llm-param-label span {
    font-size: 0.8rem; color: #e0e0e0; font-weight: 500;
}
.llm-param-label .llm-param-value {
    font-size: 0.75rem; color: #60a5fa; font-family: monospace;
    min-width: 3.5em; text-align: right;
}
.llm-param-hint {
    font-size: 0.68rem; color: #64748b; line-height: 1.35;
    margin-bottom: 0.35rem;
}
.llm-param-group input[type="range"] {
    width: 100%; height: 6px; border-radius: 3px;
    background: #0f3460; outline: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.llm-param-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: #e94560; cursor: pointer;
    border: 2px solid #16213e;
}
.llm-param-group input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #e94560; cursor: pointer; border: 2px solid #16213e;
}
.llm-param-group input[type="number"] {
    width: 100%; background: #1a1a2e; border: 1px solid #0f3460;
    color: #e0e0e0; padding: 0.4rem 0.6rem; border-radius: 0.4rem;
    font-family: monospace; font-size: 0.8rem; outline: none;
}
.llm-param-group input[type="number"]:focus { border-color: #e94560; }
.llm-settings-actions {
    display: flex; gap: 0.5rem; padding: 0.75rem 1.2rem;
    border-top: 1px solid #0f3460; flex-shrink: 0;
}
.llm-settings-actions button {
    flex: 1; padding: 0.5rem; border-radius: 0.4rem; font-size: 0.8rem;
    cursor: pointer; border: 1px solid #1a3a6e; transition: all 0.15s;
}
.llm-btn-apply { background: #e94560; color: white; border-color: #e94560 !important; }
.llm-btn-apply:hover { background: #c73652; }
.llm-btn-reset { background: #0f3460; color: #94a3b8; }
.llm-btn-reset:hover { background: #1a3a6e; color: #e0e0e0; }
#llm-settings-btn {
    background: #0f3460; color: #94a3b8; border: 1px solid #1a3a6e;
    padding: 0.35rem 0.65rem; border-radius: 0.5rem; font-size: 0.75rem;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
#llm-settings-btn:hover { background: #1a3a6e; color: #e0e0e0; }
.file-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.6rem; border-bottom: 1px solid #0f3460;
}
.file-item-name { color: #e0e0e0; font-size: 0.8rem; word-break: break-all; flex: 1; }
.file-item-size { color: #64748b; font-size: 0.7rem; margin-left: 0.5rem; }
.file-item button {
    background: none; border: none; color: #64748b; cursor: pointer; font-size: 0.75rem; margin-left: 0.3rem;
}
.file-item button:hover { color: #fca5a5; }