
:root{
  color-scheme:dark;
  --bg:#09111f;
  --panel:#111c2d;
  --panel-soft:#0e1727;
  --panel-alt:#132237;
  --text:#e5edf7;
  --muted:#9aa9bc;
  --line:#243549;
  --accent:#2bc48e;
  --accent-2:#35d39c;
  --danger:#ff7272;
  --sidebar:#07101d;
  --sidebar-text:#edf3fa;
  --sidebar-muted:#8ca1b9;
  --sidebar-line:rgba(255,255,255,.08);
  --topbar:rgba(7,16,29,.88);
  --shadow:0 18px 40px rgba(0,0,0,.26);
  --shadow-soft:0 10px 26px rgba(0,0,0,.24);
  --success-bg:#113427;
  --success-text:#88e7be;
  --chip:#143629;
  --chip-muted:#18273b;
  --chip-pin:#433813;
  --record-bg:#32191f;
  --record-text:#ff9a9a;
  --record-border:#67313b;
  --record-ready-bg:#102f27;
  --record-ready-text:#8ce5c1;
  --record-ready-border:#285846;
}

html[data-theme='light'], body[data-theme='light']{
  color-scheme:light;
  --bg:#f3f7fb;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --panel-alt:#eff5fb;
  --text:#111827;
  --muted:#64748b;
  --line:#dbe5f0;
  --accent:#0c8f63;
  --accent-2:#19a97b;
  --danger:#d74c4c;
  --sidebar:#0f172a;
  --sidebar-text:#e2e8f0;
  --sidebar-muted:#94a3b8;
  --sidebar-line:rgba(255,255,255,.08);
  --topbar:#ffffffcc;
  --shadow:0 18px 40px rgba(15,23,42,.08);
  --shadow-soft:0 10px 26px rgba(15,23,42,.06);
  --success-bg:#e9f9f3;
  --success-text:#0d825d;
  --chip:#edf7f3;
  --chip-muted:#edf2f8;
  --chip-pin:#fff3cd;
  --record-bg:#fff2f2;
  --record-text:#9f3838;
  --record-border:#f0caca;
  --record-ready-bg:#edf9f4;
  --record-ready-text:#147856;
  --record-ready-border:#b9e5d3;
}


*{box-sizing:border-box} html,body{margin:0;padding:0} body{font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)} a{text-decoration:none;color:inherit} button,input,textarea,select{font:inherit}

.app-shell{display:flex;min-height:100vh;background:var(--bg)}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:linear-gradient(180deg,var(--sidebar),#101c31);color:var(--sidebar-text);display:flex;flex-direction:column;z-index:50;border-right:1px solid var(--sidebar-line)}
.brand{display:flex;align-items:center;gap:12px;padding:22px 18px 18px;border-bottom:1px solid var(--sidebar-line)}
.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.08);padding:6px}
.brand strong{display:block;font-size:18px;line-height:1.1}.brand span{display:block;color:var(--sidebar-muted);font-size:12px;margin-top:4px}
.side-nav{padding:14px 12px;display:grid;gap:6px}.nav-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;color:var(--sidebar-text);font-weight:600}.nav-link span{width:20px;text-align:center}.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:800}.nav-badge[hidden]{display:none}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.08)}
.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid var(--sidebar-line)}
.user-mini{display:flex;gap:10px;align-items:center;margin-bottom:12px}.avatar{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:800}.user-mini strong{display:block;font-size:13px}.user-mini span{display:block;color:var(--sidebar-muted);font-size:12px}
.logout-link{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.main-area{flex:1;min-width:0;margin-left:280px;display:flex;flex-direction:column}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:30;background:var(--topbar);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar-left{display:flex;align-items:center;gap:12px}.topbar-title{font-weight:800;font-size:18px}.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-content{padding:20px;max-width:1400px;width:100%;margin:0 auto}.muted{color:var(--muted)}.small-text{font-size:12px}
.flash{border-radius:14px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-soft)}.flash.error{border-color:#f2b2b2;color:#8d1f1f;background:#fff6f6}
.btn,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;box-shadow:var(--shadow-soft)}
.btn.small{padding:8px 11px;font-size:12px}.btn.full{width:100%}.btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:transparent;color:#fff}.btn.ghost{background:var(--panel-alt)}.btn.danger{background:#fff5f5;border-color:#f1c2c2;color:#a33030}.icon-btn{width:40px;height:40px;padding:0;border-radius:12px}.mobile-only{display:none}

.panel,.form-card,.stat-card,.memory-card,.task-card,.history-item{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft)}
.panel,.form-card{padding:20px}.form-card{max-width:820px}.form-card h2,.panel h3{margin-top:0}
.field-row{display:grid;gap:7px;margin-bottom:16px}.field-row label{font-weight:750;font-size:13px}.field-row input,.field-row textarea,.field-row select,.search-form input,.login-card input[type=text],.login-card input[type=password]{width:100%;border:1px solid var(--line);background:var(--panel-soft);color:var(--text);border-radius:14px;padding:12px 13px;outline:none}.field-row input:focus,.field-row textarea:focus,.field-row select:focus,.search-form input:focus,.login-card input:focus,.composer textarea:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(25,169,123,.12)}.field-row input[type=checkbox]{width:auto}.field-error{font-size:12px;color:var(--danger)}.form-actions,.card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:26px 0 12px}.section-head h2{margin:0 0 4px;font-size:19px}.section-head p{margin:0;color:var(--muted)}

.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.stats-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}.stats-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:940px}
.stat-card{padding:18px}.stat-card span{display:block;color:var(--muted);font-size:12px}.stat-card strong{display:block;font-size:28px;margin-top:6px}

.chat-page{padding:0;max-width:none;height:calc(100vh - 68px)}
.chat-layout{display:grid;grid-template-columns:320px minmax(0,1fr);height:100%;border-top:0}.conversation-list{border-right:1px solid var(--line);background:var(--panel-soft);padding:16px;overflow:auto}.conversation-list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 4px 14px}.stats-stack.compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}.mini-stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow-soft)}.mini-stat span{display:block;color:var(--muted);font-size:11px}.mini-stat strong{display:block;margin-top:4px}
.conversation-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:16px;margin-bottom:8px;border:1px solid transparent}.conversation-row.selected{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow-soft)}.conversation-row>a{padding:12px 12px;min-width:0}.conversation-row strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.conversation-row span{font-size:11px;color:var(--muted)}.row-delete{border:0;background:transparent;color:#9aa6b2;padding:9px 11px;cursor:pointer}.row-delete:hover{color:var(--danger)}.empty-mini{padding:16px;color:var(--muted)}
.chat-panel{min-width:0;display:flex;flex-direction:column;background:var(--panel)}.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);gap:12px}.chat-heading h2{font-size:17px;margin:0 0 4px}.chat-heading span{font-size:12px;color:var(--muted)}.secure-pill{background:var(--success-bg)!important;color:var(--success-text)!important;padding:7px 10px;border-radius:999px;font-weight:750;white-space:nowrap}
.messages{flex:1;overflow-y:auto;padding:24px max(20px,calc((100% - 920px)/2));scroll-behavior:smooth;background:linear-gradient(180deg,var(--panel),var(--panel-soft))}.message{display:flex;gap:12px;margin-bottom:20px;align-items:flex-start}.message.user{flex-direction:row-reverse}.message-avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--panel-alt);color:var(--muted);font-weight:800;flex:0 0 auto;border:1px solid var(--line)}.message.assistant .message-avatar{background:var(--chip);color:var(--accent)}.message-bubble{max-width:min(760px,82%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:13px 14px;box-shadow:var(--shadow-soft)}.message.user .message-bubble{background:color-mix(in srgb,var(--chip) 80%, var(--panel) 20%);border-color:color-mix(in srgb,var(--accent) 22%, var(--line) 78%)}.message-role{font-size:11px;color:var(--muted);font-weight:800;margin-bottom:6px}.message-text{white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}.message-time{font-size:10px;color:#98a3b2;text-align:right;margin-top:8px}.message audio{max-width:100%;margin-top:8px}.voice-btn{border:0;background:transparent;color:var(--accent);font-weight:700;padding:8px 0 0;cursor:pointer}
.composer-wrap{padding:12px max(20px,calc((100% - 940px)/2)) 16px;border-top:1px solid var(--line);background:var(--panel)}.composer{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:18px;padding:8px;background:var(--panel);box-shadow:var(--shadow)}.composer:focus-within{border-color:var(--accent-2)}.composer textarea{flex:1;border:0;resize:none;max-height:150px;padding:10px 5px;outline:none;line-height:1.5;background:transparent;color:var(--text)}.attach-btn,.send-btn{width:40px;height:40px;border:0;border-radius:12px;background:var(--panel-alt);display:grid;place-items:center;cursor:pointer;color:var(--text);touch-action:manipulation}.attach-btn.recording{background:var(--record-bg);color:var(--record-text);box-shadow:0 0 0 3px rgba(215,76,76,.12)}.send-btn{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;font-size:17px}.composer-hint{font-size:12px;color:var(--muted);padding:8px 5px 0}.recording-bar{display:none;align-items:center;gap:10px;background:var(--record-bg);color:var(--record-text);border:1px solid var(--record-border);padding:9px 10px;border-radius:14px;margin-bottom:8px;font-size:13px}.recording-bar[hidden]{display:none!important}.recording-bar.is-active:not([hidden]){display:flex}.recording-bar.is-ready{background:var(--record-ready-bg);color:var(--record-ready-text);border-color:var(--record-ready-border)}.recording-copy{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}.recording-copy strong{font-size:13px}.recording-copy span{font-variant-numeric:tabular-nums;font-size:12px;opacity:.9}.recording-actions{display:flex;gap:7px;margin-left:auto}.pulse-dot{display:inline-block;width:8px;height:8px;background:#e74d4d;border-radius:50%;animation:pulse 1s infinite;flex:0 0 auto}.pulse-dot[hidden]{display:none!important}@keyframes pulse{50%{opacity:.35}}

.search-form{display:flex;gap:8px}.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.memory-card,.task-card{padding:16px}.memory-card h3{margin:10px 0 7px;font-size:15px}.memory-card p{margin:0 0 14px;color:var(--text);opacity:.88;line-height:1.5}.memory-meta{display:flex;gap:6px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:var(--chip);color:var(--accent);font-size:11px;font-weight:750}.chip.ghost{background:var(--chip-muted);color:var(--muted)}.chip.pin{background:var(--chip-pin);color:#856616}.history-results{display:grid;gap:10px}.history-item{padding:14px}.history-item span{font-size:11px;color:var(--muted)}.history-item p{margin:6px 0 0;white-space:pre-wrap}.empty-state{background:var(--panel);border:1px dashed var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:5px;color:var(--muted);grid-column:1/-1}.empty-state strong{color:var(--text)}

.filter-tabs{display:flex;gap:6px;margin-bottom:15px;flex-wrap:wrap}.filter-tabs a{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px;box-shadow:var(--shadow-soft)}.filter-tabs a.active{background:var(--text);color:var(--panel);border-color:var(--text)}.task-list{display:grid;gap:10px}.task-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}.task-check button,.task-check span{width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 30%, var(--line) 70%);background:var(--chip);color:var(--accent);display:grid;place-items:center;cursor:pointer}.task-top{display:flex;gap:8px;align-items:center;justify-content:space-between}.task-top h3{margin:3px 0;font-size:15px}.task-main p{color:var(--text);opacity:.86;margin:7px 0}.task-dates{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}.task-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.task-actions form{margin:0}.priority-high{border-left:4px solid #db6666}.priority-low{border-left:4px solid #77a7d8}.info-panel{margin-top:18px}.info-panel p{margin-bottom:0;color:var(--muted)}
.settings-grid{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,360px);gap:18px;align-items:start}.settings-side ul{padding-left:20px;color:var(--text);opacity:.86;line-height:1.7}.privacy-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.check-row{display:flex;align-items:center;gap:8px;margin:12px 0 18px}

.login-body{min-height:100vh;background:radial-gradient(circle at 10% 0%,#244263 0,#0f172a 42%,#09111f 100%)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(460px,100%);background:var(--panel);border-radius:28px;padding:28px;box-shadow:0 35px 80px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}.login-theme-switch{display:flex;justify-content:flex-end;margin-bottom:10px}.login-brand{display:flex;gap:14px;align-items:center;margin-bottom:18px}.login-logo-img{width:64px;height:64px;object-fit:contain;border-radius:18px;background:var(--panel-alt);padding:8px;border:1px solid var(--line)}.login-card h1{margin:0 0 5px;font-size:28px}.login-card p{margin:0;color:var(--muted)}.login-card form>label:not(.check-row){display:block;font-size:13px;font-weight:750;margin:14px 0 6px}

.sidebar-backdrop{display:none}

@media(max-width:1100px){.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-stack.compact{grid-template-columns:1fr}}
@media(max-width:900px){.mobile-only{display:inline-flex}.sidebar{transform:translateX(-102%);transition:.22s ease}.sidebar.open{transform:translateX(0)}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(3,8,16,.45);z-index:40}.main-area{margin-left:0}.topbar{padding:0 14px}.page-content{padding:16px}.chat-page{padding:0}.chat-layout{grid-template-columns:1fr}.conversation-list{display:none}.chat-heading{padding:12px 14px}.messages{padding:16px 14px}.composer-wrap{padding:10px 12px 14px}.message-bubble{max-width:88%}.memory-grid{grid-template-columns:1fr}.task-card{grid-template-columns:auto minmax(0,1fr)}.task-actions{grid-column:2}.login-card{padding:24px}.search-form{flex-direction:column}}
@media(max-width:560px){.topbar{height:60px}.topbar-title{font-size:16px}.topbar-actions{gap:6px}.topbar-actions .btn{font-size:12px;padding:8px 10px}.page-content{padding:12px}.chat-page{height:calc(100vh - 60px)}.stats-grid,.stats-grid.two,.stats-grid.three{grid-template-columns:1fr 1fr}.stat-card{padding:14px}.stat-card strong{font-size:22px}.message-avatar{display:none}.message-bubble{max-width:94%}.composer-hint{display:none}.task-card{padding:12px}.task-actions{grid-column:1/-1}.login-brand{align-items:flex-start}.login-logo-img{width:56px;height:56px}.recording-bar{font-size:12px;flex-wrap:wrap}.recording-actions{width:100%;justify-content:flex-end}.stats-stack.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =========================================================
   PrivAI V4 · Chat responsive + audio persistente
   ========================================================= */
:root{
  --composer-max:960px;
  --chat-side:310px;
}

svg{display:block}
.icon-btn svg,.btn svg,.nav-link svg,.composer-icon-btn svg,.send-btn svg,.voice-btn svg,.row-delete svg,.audio-message-head svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav-link>svg{width:20px;height:20px}
.nav-link>span{width:auto;text-align:left}
.theme-toggle{min-width:92px}
.theme-toggle svg{width:17px;height:17px}
.new-chat-top svg{width:17px;height:17px}

.chat-page{height:calc(100dvh - 68px);min-height:0;overflow:hidden}
.chat-layout{grid-template-columns:var(--chat-side) minmax(0,1fr);min-height:0;overflow:hidden}
.chat-panel{min-height:0;overflow:hidden}
.conversation-list{min-height:0;overscroll-behavior:contain}
.conversation-head-actions{display:flex;gap:6px;align-items:center}
.conversation-items{display:grid;gap:2px}
.conversation-row{transition:background .15s ease,border-color .15s ease,transform .15s ease}
.conversation-row:hover{background:color-mix(in srgb,var(--panel) 75%,transparent)}
.row-delete{width:38px;height:38px;display:grid;place-items:center;border-radius:11px}
.row-delete svg{width:17px;height:17px}
.row-delete:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.conversation-backdrop{display:none;border:0;padding:0;background:transparent}

.chat-heading{min-height:66px;padding:12px 18px}
.chat-heading-main{display:flex;align-items:center;gap:10px;min-width:0}
.chat-title-wrap{min-width:0}
.chat-title-wrap h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,620px)}
.chat-list-btn{flex:0 0 auto}
.secure-pill{display:inline-flex!important;align-items:center;gap:7px}
.secure-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}

.messages{min-height:0;overscroll-behavior:contain;padding-top:22px;padding-bottom:22px}
.message{animation:messageIn .16s ease-out}
@keyframes messageIn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.message.pending{opacity:.82}
.message.send-error .message-bubble{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.message-bubble{min-width:0}
.message-text{font-size:14px}
.message-status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:8px}
.message-status.error{color:var(--danger)}
.mini-loader{width:15px;height:15px;border:2px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

.audio-message{margin-top:9px;min-width:min(100%,280px);padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft)}
.audio-message-head{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:800;margin-bottom:7px;text-transform:uppercase;letter-spacing:.04em}
.audio-message-head svg{width:16px;height:16px}
.audio-message audio{display:block;width:min(100%,360px);height:38px;margin:0}
.audio-transcript{margin-top:9px;border-top:1px solid var(--line);padding-top:7px}
.audio-transcript summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:750;user-select:none}
.audio-transcript p{margin:7px 0 0;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.voice-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.voice-btn svg{width:16px;height:16px}

.composer-wrap{position:relative;padding:10px max(16px,calc((100% - var(--composer-max))/2)) max(12px,env(safe-area-inset-bottom));flex:0 0 auto}
.composer{align-items:flex-end;gap:6px;border-radius:20px;padding:7px;min-height:56px}
.composer.is-sending{opacity:.9}
.composer textarea{min-width:0;min-height:40px;padding:10px 7px;margin:0;font-size:15px}
.composer textarea::placeholder{color:var(--muted);opacity:.82}
.composer-icon-btn,.send-btn{width:42px;height:42px;min-width:42px;border:0;border-radius:13px;background:var(--panel-alt);display:grid;place-items:center;cursor:pointer;color:var(--text);touch-action:manipulation;transition:transform .12s ease,background .12s ease,color .12s ease}
.composer-icon-btn:hover{background:color-mix(in srgb,var(--panel-alt) 70%,var(--accent) 30%)}
.composer-icon-btn:active,.send-btn:active{transform:scale(.94)}
.composer-icon-btn svg,.send-btn svg{width:20px;height:20px}
.composer-icon-btn.recording{background:var(--record-bg);color:var(--record-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--record-text) 13%,transparent)}
.send-btn{background:var(--accent);color:#fff}
.send-btn:hover{background:var(--accent-2)}
.send-btn:disabled{opacity:.55;cursor:wait}
.composer-hint{text-align:center;padding-top:7px;font-size:10px}
.recording-bar{max-width:var(--composer-max);margin-left:auto;margin-right:auto}
.recording-action{border:0;border-radius:10px;padding:7px 10px;cursor:pointer;font-size:12px;font-weight:750}
.recording-action.cancel{background:transparent;color:currentColor}
.recording-action.stop{background:var(--record-text);color:var(--panel)}

@media(max-width:1100px){
  :root{--chat-side:285px}
  .stats-stack.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mini-stat{padding:9px}
}

@media(max-width:900px){
  .chat-page{height:calc(100dvh - 68px)}
  .chat-layout{display:block;position:relative;height:100%}
  .chat-panel{height:100%}
  .conversation-list{
    display:block;
    position:fixed;
    top:68px;
    left:0;
    bottom:0;
    width:min(88vw,340px);
    z-index:44;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:20px 0 50px rgba(0,0,0,.28);
    border-right:1px solid var(--line);
  }
  .conversation-list.mobile-open{transform:translateX(0)}
  .conversation-backdrop.show{display:block;position:fixed;inset:68px 0 0;z-index:43;background:rgba(0,0,0,.48)}
  .chat-heading{padding:10px 12px;min-height:58px}
  .chat-title-wrap h2{max-width:58vw}
  .messages{padding:15px 12px}
  .composer-wrap{padding:8px 10px max(10px,env(safe-area-inset-bottom))}
  .message-bubble{max-width:90%}
}

@media(max-width:560px){
  html,body{overscroll-behavior:none}
  .topbar{height:58px;padding:0 9px}
  .topbar-left{gap:7px;min-width:0}
  .topbar-title{font-size:15px;white-space:nowrap}
  .topbar-actions{gap:5px;flex-wrap:nowrap}
  .topbar .icon-btn{width:38px;height:38px}
  .theme-toggle,.new-chat-top{width:38px;height:38px;min-width:38px;padding:0;border-radius:11px}
  .theme-toggle span,.new-chat-top span{display:none}
  .theme-toggle svg,.new-chat-top svg{width:18px;height:18px}
  .chat-page{height:calc(var(--visual-viewport-height,100dvh) - 58px)}
  .conversation-list{top:58px;width:min(92vw,340px);padding:12px}
  .conversation-backdrop.show{inset:58px 0 0}
  .conversation-list-head{padding-top:2px}
  .stats-stack.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mini-stat{padding:8px;border-radius:13px}
  .mini-stat span{font-size:9px}
  .mini-stat strong{font-size:14px}

  .chat-heading{min-height:54px;padding:8px 9px;gap:7px}
  .chat-heading-main{gap:7px;flex:1;min-width:0}
  .chat-list-btn{width:37px;height:37px;border-radius:11px}
  .chat-title-wrap h2{font-size:14px;margin:0;max-width:47vw}
  .chat-title-wrap>span{display:none}
  .secure-pill{font-size:10px!important;padding:6px 8px}
  .secure-dot{width:6px;height:6px}

  .messages{padding:12px 8px 14px;scroll-padding-bottom:90px}
  .message{gap:0;margin-bottom:12px}
  .message-avatar{display:none}
  .message-bubble{max-width:91%;border-radius:16px;padding:10px 11px;box-shadow:none}
  .message.user .message-bubble{max-width:88%;border-bottom-right-radius:6px}
  .message.assistant .message-bubble{border-bottom-left-radius:6px}
  .message-role{font-size:10px;margin-bottom:4px}
  .message-text{font-size:14px;line-height:1.48}
  .message-time{font-size:9px;margin-top:5px}
  .audio-message{min-width:0;width:min(74vw,320px);padding:8px}
  .audio-message audio{width:100%;height:36px}
  .audio-transcript p{font-size:12px}

  .composer-wrap{padding:7px 7px max(7px,env(safe-area-inset-bottom));background:var(--panel);box-shadow:0 -10px 25px rgba(0,0,0,.08)}
  .composer{gap:4px;padding:5px;border-radius:18px;min-height:52px;box-shadow:none}
  .composer textarea{font-size:16px;min-height:40px;padding:9px 5px;max-height:118px}
  .composer-icon-btn,.send-btn{width:40px;height:40px;min-width:40px;border-radius:12px}
  .composer-icon-btn svg,.send-btn svg{width:19px;height:19px}
  .composer-hint{display:none}
  .recording-bar{margin-bottom:6px;border-radius:13px;padding:8px;gap:7px;flex-wrap:nowrap}
  .recording-copy{gap:5px}
  .recording-copy strong{font-size:12px;white-space:nowrap}
  .recording-copy span{font-size:11px}
  .recording-actions{gap:4px;flex:0 0 auto;width:auto}
  .recording-action{padding:6px 7px;font-size:10px}
}

@media(max-width:380px){
  .secure-pill{display:none!important}
  .chat-title-wrap h2{max-width:55vw}
  .composer-icon-btn,.send-btn{width:38px;height:38px;min-width:38px}
  .audio-message{width:min(76vw,290px)}
}

/* =========================================================
   PrivAI V5 · Un solo menú móvil + marca JF INTERNET
   ========================================================= */
.brand-logo-shell{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#07101d;
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  flex:0 0 auto;
}
.brand-logo-shell .brand-logo{
  width:50px;
  height:50px;
  padding:4px;
  border-radius:0;
  background:transparent;
  object-fit:contain;
}

.topbar-left{min-width:0}
.topbar-brand-mark{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:12px;
  background:#07101d;
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.topbar-brand-mark img{
  width:40px;
  height:40px;
  object-fit:contain;
  padding:3px;
}
.topbar-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.05;
}
.topbar-copy>strong{
  font-size:12px;
  letter-spacing:.055em;
  white-space:nowrap;
}
.topbar-copy>.topbar-title{
  display:block;
  margin-top:4px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mobile-chat-menu{display:none}

@media(max-width:900px){
  /* El historial se integra al menú principal. No existe un segundo drawer. */
  .conversation-list{display:none!important}
  .conversation-backdrop{display:none!important}
  .chat-list-btn{display:none!important}

  .mobile-chat-menu{
    display:block;
    margin:0 8px 8px 34px;
    padding:8px;
    border-left:1px solid rgba(255,255,255,.11);
  }
  .mobile-chat-new{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    margin-bottom:8px;
    border-radius:11px;
    background:rgba(43,196,142,.12);
    color:#a9f0d5;
    font-size:12px;
    font-weight:800;
  }
  .mobile-chat-new svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
  }
  .mobile-chat-menu-title{
    padding:3px 9px 6px;
    color:var(--sidebar-muted);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
  }
  .mobile-chat-list{
    display:grid;
    gap:3px;
    max-height:min(38vh,320px);
    overflow:auto;
    overscroll-behavior:contain;
  }
  .mobile-chat-item{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    padding:8px 10px;
    border-radius:10px;
    color:var(--sidebar-text);
  }
  .mobile-chat-item:hover,.mobile-chat-item.active{
    background:rgba(255,255,255,.08);
  }
  .mobile-chat-item span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:700;
  }
  .mobile-chat-item small{
    color:var(--sidebar-muted);
    font-size:9px;
  }
  .mobile-chat-empty{
    padding:8px 10px;
    color:var(--sidebar-muted);
    font-size:11px;
  }

  .chat-heading-main{min-width:0}
  .chat-title-wrap h2{max-width:min(68vw,640px)}
}

@media(max-width:560px){
  .topbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .topbar-brand-mark{width:38px;height:38px;border-radius:10px}
  .topbar-brand-mark img{width:36px;height:36px;padding:3px}
  .topbar-copy>strong{font-size:10px}
  .topbar-copy>.topbar-title{font-size:12px;margin-top:3px}
  .chat-heading{min-height:48px;padding:7px 10px}
  .chat-title-wrap h2{max-width:70vw;font-size:14px}
}

@media(max-width:390px){
  .topbar-copy>strong{display:none}
  .topbar-copy>.topbar-title{margin-top:0;font-size:13px;color:var(--text)}
  .topbar-left{gap:6px}
}

