﻿/* =====================================================
   Remnia Control v7.0 — Base Stylesheet
   ===================================================== */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #1e293b; line-height: 1.5; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Auth Layout ─────────────────────────────────── */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { background: #fff; border-radius: 8px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.auth-card h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: .25rem; }
.auth-subtitle { color: #64748b; font-size: .875rem; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: .375rem; }
.form-group input { width: 100%; padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; color: #1e293b; }
.form-group input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.btn { display: inline-block; padding: .5rem 1.25rem; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 500; }
.btn-primary { background: #2563eb; color: #fff; width: 100%; padding: .75rem; margin-top: .5rem; }
.btn-primary:hover { background: #1d4ed8; text-decoration: none; }
.alert-error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .875rem; }

/* Mobile touch baseline: target minimo 44x44 (WCAG/mobile usability) */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"] {
   min-height: 44px;
}

/* ── App Layout ──────────────────────────────────── */
#app-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.app-header { background: #1e293b; color: #fff; padding: .75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.header-left { display: inline-flex; align-items: center; gap: .75rem; }
.header-sidebar-mobile-toggle { display: none; border: 1px solid rgba(148,163,184,.45); background: rgba(15,23,42,.45); color: #e2e8f0; width: 2.1rem; height: 2.1rem; border-radius: .55rem; cursor: pointer; }
.app-header .brand { font-weight: 700; font-size: 1.125rem; }
.app-header .user-info { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: #94a3b8; }
.app-header .user-info span { color: #e2e8f0; }
.app-header .separator { opacity: .4; }
.badge-ruolo { background: #334155; color: #94a3b8; padding: .125rem .5rem; border-radius: 4px; font-size: .75rem; text-transform: uppercase; }
.btn-logout { color: #94a3b8; text-decoration: none; padding: .25rem .5rem; border-radius: 4px; }
.btn-logout:hover { color: #fff; background: #334155; text-decoration: none; }
.layout-body { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────── */
#sidebar { width: 290px; background: #1e293b; flex-shrink: 0; padding: .8rem 0 1rem; overflow-y: auto; border-right: 1px solid rgba(148,163,184,.16); transition: width .2s ease; }
#sidebar ul { list-style: none; }
#sidebar a,
.sidebar-family-trigger { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .58rem 1.1rem; color: #94a3b8; font-size: .84rem; border: 0; background: transparent; text-align: left; cursor: pointer; }
#sidebar a:hover,
#sidebar a.active,
.sidebar-family-trigger:hover,
.sidebar-family-trigger.active { color: #fff; background: rgba(37,99,235,.3); border-left: 3px solid var(--family-accent, #2563eb); padding-left: calc(1.1rem - 3px); text-decoration: none; }
.sidebar-item-label-wrap { display: inline-flex; align-items: center; gap: .625rem; min-width: 0; }
.sidebar-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item-icon { width: .8rem; text-align: center; opacity: .75; }
.sidebar-family-icon { width: 1.05rem; height: 1.05rem; border-radius: .3rem; flex: 0 0 auto; }
.sidebar-item-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #e2e8f0; font-size: .72rem; font-weight: 700; }
.sidebar-item-badge-alert { background: #ef4444; color: #fff; }
.sidebar-family-meta { display: inline-flex; align-items: center; gap: .35rem; }
.sidebar-item-chevron { font-size: .7rem; opacity: .8; }
.sidebar-controls { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: 0 1rem .55rem; }
.sidebar-control { border: 1px solid rgba(148,163,184,.32); background: rgba(15,23,42,.36); color: #cbd5e1; width: 2rem; height: 2rem; border-radius: .55rem; cursor: pointer; }
.sidebar-control-mobile { display: none; }
.sidebar-main-list { border-top: 1px solid rgba(148,163,184,.2); border-bottom: 1px solid rgba(148,163,184,.2); padding: .4rem 0; margin: .4rem 0 .6rem; }
.sidebar-family-list { display: grid; gap: .15rem; }
.sidebar-submenu { padding: .15rem 0 .45rem; }
.sidebar-submenu a { font-size: .79rem; padding-left: 2.35rem; }
.sidebar-submenu a.active { background: rgba(255,255,255,.08); }
.sidebar-family-open-link { font-size: .72rem !important; text-transform: uppercase; letter-spacing: .05em; color: #cbd5e1 !important; }
.sidebar-shortcuts { margin-top: .85rem; border-top: 1px solid rgba(148,163,184,.2); padding-top: .55rem; }
.sidebar-shortcuts-title { display: block; padding: .2rem 1.1rem .4rem; color: #64748b; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.sidebar-vertical-context { margin: 0 1rem .5rem; padding: .55rem .65rem; border: 1px solid rgba(148,163,184,.28); border-radius: .65rem; background: rgba(15,23,42,.3); }
.sidebar-vertical-title { display: block; font-size: .65rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
.sidebar-vertical-name { display: block; color: #e2e8f0; font-size: .82rem; margin-top: .12rem; }

body.sidebar-collapsed #sidebar { width: 82px; }
body.sidebar-collapsed .sidebar-control-desktop { background: rgba(59,130,246,.28); color: #fff; }
body.sidebar-collapsed .sidebar-item-label,
body.sidebar-collapsed .sidebar-vertical-context,
body.sidebar-collapsed .sidebar-shortcuts-title,
body.sidebar-collapsed .sidebar-family-open-link,
body.sidebar-collapsed .sidebar-item-badge,
body.sidebar-collapsed .sidebar-item-chevron { display: none; }
body.sidebar-collapsed .sidebar-main-list a,
body.sidebar-collapsed .sidebar-family-trigger,
body.sidebar-collapsed .sidebar-shortcuts a { justify-content: center; padding-left: .65rem; padding-right: .65rem; border-left-width: 0; }
body.sidebar-collapsed .sidebar-submenu { display: none !important; }

/* ── Main Content ────────────────────────────────── */
.main-content { flex: 1; padding: 2rem; overflow-y: auto; }
.page-header { margin-bottom: 1.5rem; }
.page-header h2 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.page-header p { color: #64748b; font-size: .875rem; margin-top: .25rem; }
.coming-soon { color: #94a3b8; font-style: italic; margin-top: 1rem; }

/* ── Dashboard Grid ──────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.stat-card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card h3 { font-size: .75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.stat-card .value { font-size: 2.25rem; font-weight: 700; color: #1e293b; }

/* ── Tenant Chooser ──────────────────────────────── */
.tenant-list { display: flex; flex-direction: column; gap: .625rem; margin: 1rem 0; }
.tenant-btn { width: 100%; padding: .875rem 1rem; text-align: left; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; }
.tenant-btn:hover { border-color: #2563eb; background: #eff6ff; }
.tenant-btn .tenant-name { font-weight: 600; color: #1e293b; display: block; }
.tenant-btn .tenant-type { font-size: .75rem; color: #94a3b8; text-transform: capitalize; }
.back-link { display: block; text-align: center; margin-top: 1rem; font-size: .875rem; color: #64748b; }

/* ── Moduli Core Catalog ─────────────────────────── */
.moduli-core-page { display: grid; gap: 1.5rem; color: #1f2937; }
.moduli-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #f4efe6 0%, #d9e8e4 100%); border: 1px solid #d5ddd8; border-radius: 1.25rem; padding: 1.75rem; box-shadow: 0 1.25rem 2.5rem rgba(15,23,42,.08); }
.moduli-hero::after { content: ''; position: absolute; inset: auto -4rem -5rem auto; width: 14rem; height: 14rem; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 70%); pointer-events: none; }
.moduli-hero h1 { margin: 0 0 .625rem; font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height: 1.05; }
.moduli-hero p { position: relative; margin: 0; max-width: 62rem; line-height: 1.65; color: #334155; }
.moduli-summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.125rem; }
.moduli-summary-item { background: rgba(255,255,255,.8); border: 1px solid #c7d4ce; border-radius: 999px; padding: .5rem .875rem; font-size: .92rem; color: #334155; backdrop-filter: blur(8px); }
.moduli-family-readiness { background: #fff; border: 1px solid #d8e0db; border-radius: 1rem; padding: 1rem; box-shadow: 0 .5rem 1.2rem rgba(15,23,42,.04); display: grid; gap: .9rem; }
.moduli-family-readiness-header h2 { margin: 0; font-size: 1.05rem; color: #1f2937; }
.moduli-family-readiness-header p { margin: .3rem 0 0; font-size: .87rem; color: #475569; }
.moduli-family-kpis { display: flex; flex-wrap: wrap; gap: .5rem; }
.moduli-family-kpi { display: inline-flex; align-items: center; border-radius: 999px; padding: .32rem .62rem; font-size: .74rem; font-weight: 700; letter-spacing: .01em; background: rgba(15,23,42,.06); color: #334155; }
.moduli-family-kpi-ok { background: #e6f6eb; color: #17603a; }
.moduli-family-kpi-warn { background: #fff4d8; color: #8a5a00; }
.moduli-family-kpi-risk { background: #ffe8e8; color: #8f1d1d; }
.moduli-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .65rem; }
.moduli-family-card { border: 1px solid #d5dde5; border-radius: .85rem; padding: .7rem; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); display: grid; gap: .45rem; }
.moduli-family-card-title { font-size: .83rem; font-weight: 700; color: #1f2937; }
.moduli-family-card-meta { font-size: .75rem; color: #64748b; overflow-wrap: anywhere; }
.moduli-family-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.moduli-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.moduli-card { background: linear-gradient(180deg, var(--module-soft, rgba(209,73,91,.08)) 0%, #fff 34%); border: 1px solid var(--module-strong, rgba(209,73,91,.2)); border-radius: 1.125rem; box-shadow: 0 .75rem 2rem rgba(15,23,42,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; position: relative; min-height: 100%; max-height: 600px; }
.moduli-card::before { content: ''; display: block; height: .375rem; background: var(--module-accent, #D1495B); }
.moduli-card:hover { transform: translateY(-2px); border-color: var(--module-accent, #D1495B); box-shadow: 0 1rem 2.2rem rgba(15,23,42,.1); }
.moduli-card:focus-within { border-color: var(--module-accent, #D1495B); box-shadow: 0 0 0 3px var(--module-soft, rgba(209,73,91,.16)), 0 1rem 2.2rem rgba(15,23,42,.1); }
.moduli-card-link { display: grid; gap: .75rem; padding: 1rem; height: 100%; max-height: 600px; overflow-y: auto; color: inherit; text-decoration: none; scrollbar-gutter: stable; }
.moduli-card-link:hover { text-decoration: none; }
.moduli-card-top { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.moduli-card-id { font-size: .72rem; letter-spacing: .07em; color: var(--module-accent, #D1495B); text-transform: uppercase; font-weight: 700; overflow-wrap: anywhere; }
.moduli-card h2 { margin: .25rem 0 0; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.moduli-pill { border-radius: 999px; padding: .3rem .55rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.moduli-pill-existing { background: #e6f6eb; color: #17603a; }
.moduli-pill-shell { background: #fff2d6; color: #8a5a00; }
.moduli-runtime-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.moduli-runtime-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .26rem .52rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; background: rgba(15,23,42,.06); color: #334155; }
.moduli-runtime-badge-maturity[data-runtime-maturity-label="runtime db ready"] { background: #e6f6eb; color: #17603a; }
.moduli-runtime-badge-maturity[data-runtime-maturity-label="runtime nav only"] { background: #fff4d8; color: #8a5a00; }
.moduli-runtime-badge-maturity[data-runtime-maturity-label="shell fallback"] { background: #ffe8e8; color: #8f1d1d; }
.moduli-runtime-badge-readiness[data-seed-readiness-label="ready"] { background: #e6f6eb; color: #17603a; }
.moduli-runtime-badge-readiness[data-seed-readiness-label="partial"] { background: #fff4d8; color: #8a5a00; }
.moduli-runtime-badge-readiness[data-seed-readiness-label="not ready"] { background: #ffe8e8; color: #8f1d1d; }
.moduli-runtime-badge-db[data-db-capability="read"],
.moduli-runtime-badge-db[data-db-capability="write"] { background: var(--module-soft, rgba(209,73,91,.12)); color: #334155; }
.moduli-meta { display: grid; gap: .2rem; font-size: .84rem; line-height: 1.35; color: #475569; }
.moduli-meta div { overflow-wrap: anywhere; }
.moduli-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.moduli-tag { background: var(--module-soft, rgba(209,73,91,.12)); border-radius: 999px; padding: .32rem .55rem; font-size: .72rem; color: #334155; }
.moduli-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.moduli-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #475569; }
.moduli-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.55rem; height: 1.55rem; border-radius: 999px; background: var(--module-soft, rgba(209,73,91,.12)); color: var(--module-accent, #D1495B); font-size: .74rem; font-weight: 700; }
.moduli-list { margin: 0; padding-left: 1rem; color: #475569; display: grid; gap: .25rem; font-size: .8rem; line-height: 1.28; }
.moduli-list li { overflow-wrap: anywhere; }
.moduli-prompt-meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.moduli-prompt-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .28rem .55rem; border-radius: 999px; background: rgba(15,23,42,.06); color: #334155; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.moduli-prompt-key { display: inline-flex; align-items: center; padding: .28rem .55rem; border-radius: 999px; background: var(--module-soft, rgba(209,73,91,.12)); color: var(--module-accent, #D1495B); font-size: .72rem; font-weight: 700; overflow-wrap: anywhere; }
.moduli-prompt-preview { margin: 0; padding: .8rem .9rem; border-radius: .9rem; background: rgba(255,255,255,.82); border: 1px solid rgba(148,163,184,.24); color: #334155; font-size: .79rem; line-height: 1.42; }
.moduli-prompt-preview-soft { background: rgba(15,23,42,.04); }
.moduli-list-ia { padding-left: 1.1rem; gap: .32rem; background: rgba(15,23,42,.04); border: 1px solid rgba(148,163,184,.18); border-radius: .9rem; padding-top: .7rem; padding-right: .8rem; padding-bottom: .7rem; }
.moduli-list-ia-soft { background: rgba(255,255,255,.78); }
.moduli-tags-tight { gap: .35rem; }
.moduli-tag-ia { background: rgba(15,23,42,.08); color: #1e293b; }
.moduli-tag-ia-soft { background: rgba(255,255,255,.78); border: 1px solid rgba(148,163,184,.18); color: #475569; }
.moduli-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: auto; }
.moduli-link { display: inline-flex; align-items: center; justify-content: center; background: var(--module-accent, #163a5f); color: #fff; border-radius: .75rem; padding: .55rem .78rem; font-size: .82rem; font-weight: 600; box-shadow: inset 0 -1px 0 rgba(255,255,255,.2); }
.moduli-hint { font-size: .78rem; color: #64748b; }
.moduli-color-chip { width: .875rem; height: .875rem; border-radius: 999px; background: var(--module-accent, #D1495B); box-shadow: 0 0 0 3px var(--module-soft, rgba(209,73,91,.12)); flex: 0 0 auto; }
.moduli-heading { display: flex; align-items: center; gap: .625rem; }
.moduli-empty-state { background: #fff; border: 1px dashed #cbd5e1; border-radius: 1rem; padding: 1.35rem; color: #334155; }
.moduli-empty-state h2 { margin: 0 0 .45rem; font-size: 1.05rem; color: #1f2937; }
.moduli-empty-state p { margin: 0; font-size: .9rem; line-height: 1.5; }

/* ── Mobile Bottom Navigation (FASE 6.0 Blocco 08) ────────────────────── */
.mobile-bottom-nav {
   display: none;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2200;
   background: rgba(15, 23, 42, .96);
   border-top: 1px solid rgba(148, 163, 184, .25);
   backdrop-filter: blur(8px);
   padding: .35rem .45rem calc(.35rem + env(safe-area-inset-bottom));
   grid-template-columns: repeat(5, 1fr);
   gap: .2rem;
}

.mobile-bottom-nav__item {
   min-height: 44px;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border: 0;
   background: transparent;
   color: #dbe6f2;
   border-radius: .65rem;
   font-size: .67rem;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus-visible,
.mobile-bottom-nav__item.is-active {
   color: #fff;
   background: rgba(37, 99, 235, .32);
   text-decoration: none;
}

.mobile-bottom-nav__icon { font-size: 1rem; line-height: 1; margin-bottom: .18rem; }
.mobile-bottom-nav__label { line-height: 1; }

@media (max-width: 960px) {
   .main-content { padding: 1rem; }
}

@media (max-width: 768px) {
   html, body { overflow-x: hidden; }
   .app-header { padding: .8rem 1rem; flex-direction: column; align-items: flex-start; gap: .75rem; }
   .app-header .user-info { flex-wrap: wrap; gap: .5rem; }
   .header-sidebar-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
   #sidebar { position: fixed; inset: 0 auto 0 0; height: 100vh; width: min(84vw, 320px); z-index: 50; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); }
   body.sidebar-mobile-open #sidebar { transform: translateX(0); box-shadow: 0 0 0 9999px rgba(2,6,23,.45); }
   .sidebar-control-desktop { display: none; }
   .sidebar-control-mobile { display: inline-flex; align-items: center; justify-content: center; }
   body.sidebar-collapsed #sidebar { width: min(84vw, 320px); }
   body.sidebar-collapsed .sidebar-item-label,
   body.sidebar-collapsed .sidebar-vertical-context,
   body.sidebar-collapsed .sidebar-shortcuts-title,
   body.sidebar-collapsed .sidebar-item-badge,
   body.sidebar-collapsed .sidebar-item-chevron { display: initial; }
   body.sidebar-collapsed .sidebar-main-list a,
   body.sidebar-collapsed .sidebar-family-trigger,
   body.sidebar-collapsed .sidebar-shortcuts a { justify-content: space-between; }
   .moduli-hero { padding: 1.25rem; }
   .moduli-actions { flex-direction: column; align-items: stretch; }
   .moduli-link { width: 100%; }
   .main-content { padding: .85rem .8rem calc(5.2rem + env(safe-area-inset-bottom)); }
   .dashboard-grid { grid-template-columns: 1fr; }
   .mobile-bottom-nav { display: grid; }
}

/* ── Assistente IA Contestuale (FASE 6.0 Blocco 09) ────────────────────── */
.assistant-widget {
   position: fixed;
   right: 18px;
   bottom: 90px;
   z-index: 2400;
}

.assistant-bubble {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 0;
   border-radius: 999px;
   background: #0f172a;
   color: #ffffff;
   padding: 12px 16px;
   min-height: 44px;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
}

/* Su desktop il FAB originale è nascosto — uso bottone header */
@media (min-width: 769px) {
   .assistant-bubble { display: none; }
   .supporto-fab { display: none !important; }
   .assistant-widget {
      bottom: auto;
      top: 56px;
      right: 0;
   }
   .assistant-panel {
      bottom: auto;
      top: 0;
      right: 0;
   }
}

.assistant-panel {
   position: absolute;
   right: 0;
   bottom: 58px;
   width: min(420px, calc(100vw - 24px));
   background: #ffffff;
   border: 1px solid #dbe4ee;
   border-radius: 16px;
   box-shadow: 0 12px 36px rgba(15, 23, 42, .25);
   display: grid;
   grid-template-rows: auto 1fr auto;
   overflow: hidden;
}

.assistant-panel__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 12px;
   border-bottom: 1px solid #e2e8f0;
}

.assistant-panel__close {
   border: 0;
   background: transparent;
   font-size: 20px;
   line-height: 1;
   cursor: pointer;
}

.assistant-panel__body {
   padding: 12px;
   max-height: 380px;
   overflow: auto;
   display: grid;
   gap: 10px;
}

.assistant-chat {
   display: grid;
   gap: 8px;
}

.assistant-chat__item {
   border-radius: 12px;
   padding: 8px 10px;
   font-size: .9rem;
   line-height: 1.4;
}

.assistant-chat__item--user {
   background: #e2e8f0;
   color: #0f172a;
   justify-self: end;
   max-width: 90%;
}

.assistant-chat__item--assistant {
   background: #f8fafc;
   border: 1px solid #dbe4ee;
   color: #1e293b;
   justify-self: start;
   max-width: 90%;
}

.assistant-suggestions-wrap,
.assistant-autocomplete-wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.assistant-suggestion,
.assistant-autocomplete {
   border: 1px solid #cbd5e1;
   background: #ffffff;
   border-radius: 999px;
   padding: 6px 10px;
   font-size: .78rem;
   cursor: pointer;
}

.assistant-panel__footer {
   border-top: 1px solid #e2e8f0;
   padding: 10px 12px;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 8px;
}

.assistant-panel__footer textarea {
   width: 100%;
   resize: vertical;
   min-height: 44px;
   border: 1px solid #cbd5e1;
   border-radius: 10px;
   padding: 8px;
   font-size: .88rem;
}

.assistant-send {
   border: 0;
   border-radius: 10px;
   background: #0f172a;
   color: #ffffff;
   min-height: 44px;
   padding: 0 14px;
   font-weight: 700;
   cursor: pointer;
}

@media (max-width: 768px) {
   .assistant-widget {
      right: 12px;
      left: 12px;
      bottom: 96px;
   }

   .assistant-bubble {
      width: 100%;
      justify-content: center;
   }

   .assistant-panel {
      right: 0;
      left: 0;
      width: auto;
   }
}

/* ── Debug Footer ────────────────────────────────── */
.debug-panel { background: #0f172a; color: #e2e8f0; border-top: 4px solid #38bdf8; padding: 1rem 1.25rem 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.debug-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .875rem; color: #7dd3fc; font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }
.debug-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .625rem .875rem; }
.debug-row { display: grid; gap: .2rem; padding: .625rem .75rem; border-radius: .65rem; background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.16); }
.debug-label { font-size: .72rem; color: #7dd3fc; text-transform: uppercase; letter-spacing: .05em; }
.debug-value { font-size: .85rem; color: #e2e8f0; word-break: break-word; }

@media (max-width: 768px) {
   .debug-panel { padding: .9rem 1rem 1rem; }
   .debug-grid { grid-template-columns: 1fr; }
}
