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; }

.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); } }

.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 <aside> tiene .d-flex de Bootstrap. */
@media (min-width: 1200px) {
    #app.sidebar-collapsed #sidebar { display: none !important; }
}

/* Tablet/mobile (<1200px): sidebar oculto obligatorio por default.
   .sidebar-open lo muestra como overlay con backdrop. */
@media (max-width: 1199.98px) {
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1040 !important;
        transform: translateX(-100%) !important;
        transition: transform .25s ease !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
    }
    #app.sidebar-open #sidebar { transform: translateX(0) !important; }
    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: 1030;
    }
    #app.sidebar-open #sidebar-backdrop { display: block; }
}