html, body { height: 100%; margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8f9fa; }
#sidebar { width: 280px; min-width: 280px; }
.conv-item { padding: .65rem .9rem; border-bottom: 1px solid #e9ecef; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.conv-item:hover { background: #eef1f4; }
.conv-item.active { background: #e7f1ff; border-left: 3px solid #0d6efd; padding-left: calc(.9rem - 3px); }
.conv-item .conv-title { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .conv-meta { font-size: .72rem; color: #6c757d; display: flex; justify-content: space-between; }
#messages { background: #fff; }
.msg { margin-bottom: 1.25rem; max-width: 92%; }
.msg-user { margin-left: auto; }
.msg-bubble { padding: .7rem 1rem; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.msg-user .msg-bubble { background: #0d6efd; color: #fff; }
.msg-assistant .msg-bubble { background: #f1f3f5; color: #212529; }
.msg-meta { font-size: .7rem; color: #adb5bd; margin-top: .25rem; padding: 0 .5rem; }
.msg-user .msg-meta { text-align: right; }
/* Markdown rendering (assistant messages) */
.msg-bubble.markdown { white-space: normal; }
.msg-bubble.markdown > *:first-child { margin-top: 0; }
.msg-bubble.markdown > *:last-child { margin-bottom: 0; }
.msg-bubble.markdown p { margin: 0 0 .6rem 0; }
.msg-bubble.markdown ul, .msg-bubble.markdown ol { margin: .25rem 0 .6rem 1.25rem; padding: 0; }
.msg-bubble.markdown li { margin-bottom: .15rem; }
.msg-bubble.markdown h1, .msg-bubble.markdown h2, .msg-bubble.markdown h3,
.msg-bubble.markdown h4, .msg-bubble.markdown h5, .msg-bubble.markdown h6 {
margin: .75rem 0 .4rem 0; font-weight: 600; line-height: 1.25;
}
.msg-bubble.markdown h1 { font-size: 1.25rem; } .msg-bubble.markdown h2 { font-size: 1.15rem; }
.msg-bubble.markdown h3 { font-size: 1.05rem; } .msg-bubble.markdown h4 { font-size: 1rem; }
.msg-bubble.markdown code { background: rgba(0,0,0,.08); padding: .1em .35em; border-radius: 4px; font-size: .875em; font-family: 'SFMono-Regular', Consolas, monospace; }
.msg-bubble.markdown pre { background: #1e293b; color: #e2e8f0; padding: .75rem 1rem; border-radius: 6px; overflow-x: auto; margin: .4rem 0 .6rem 0; }
.msg-bubble.markdown pre code { background: transparent; padding: 0; color: inherit; font-size: .8125rem; }
.msg-bubble.markdown blockquote { border-left: 3px solid #adb5bd; padding-left: .75rem; margin: .4rem 0 .6rem 0; color: #495057; }
.msg-bubble.markdown table { border-collapse: collapse; margin: .5rem 0; font-size: .875rem; }
.msg-bubble.markdown th, .msg-bubble.markdown td { border: 1px solid #dee2e6; padding: .35rem .6rem; text-align: left; }
.msg-bubble.markdown th { background: #e9ecef; font-weight: 600; }
.msg-bubble.markdown a { color: #0d6efd; }
.msg-bubble.markdown hr { border: 0; border-top: 1px solid #dee2e6; margin: .75rem 0; }
.tool-card { margin: .5rem 0; border: 1px solid #dee2e6; border-radius: 8px; background: #fafbfc; font-size: .85rem; }
.tool-card-header { padding: .5rem .75rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.tool-card-header:hover { background: #f1f3f5; }
.tool-card-header .tool-name { font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 500; }
.tool-card-header .badge { font-size: .65rem; }
.tool-card-body { padding: .5rem .75rem; border-top: 1px solid #e9ecef; display: none; }
.tool-card-body.open { display: block; }
.tool-card-body pre { margin: 0; max-height: 360px; overflow: auto; background: #f8f9fa; padding: .5rem; border-radius: 4px; font-size: .75rem; }
.tool-card-body .tool-section-label { font-size: .7rem; color: #6c757d; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem; margin-top: .5rem; }
.tool-card-body .tool-section-label:first-child { margin-top: 0; }
.tool-status-pending { background: #ffc107; color: #000; }
.tool-status-success { background: #198754; color: #fff; }
.tool-status-error { background: #dc3545; color: #fff; }
.tool-output-audio audio { width: 100%; margin-top: .25rem; }
.tool-output-resource a { display: inline-block; margin-top: .25rem; }
#composer-input { resize: vertical; max-height: 200px; }
.spinner-inline { display: inline-block; width: .8rem; height: .8rem; border: 2px solid #adb5bd; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: .35rem; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Barra de progreso indeterminada — se muestra mientras el LLM procesa */
.progress-indeterminate { position: relative; height: 3px; background: #e9ecef; overflow: hidden; }
.progress-indeterminate-bar { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #0d6efd 20%, #0d6efd 80%, transparent); animation: indeterminate 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.empty-state { text-align: center; color: #6c757d; padding: 3rem 1rem; }
/* Viewer role — oculta toda escritura (composer, botones de crear/eliminar, cambiar provider, etc.) */
body.role-viewer [data-require-write] { display: none !important; }
/* ── Sidebar responsive ─────────────────────────────────────────── */
/* Desktop amplio (>=1200px): sidebar visible por default. .sidebar-collapsed lo oculta.
!important es necesario porque el