:root{
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
  --ease-gentle:cubic-bezier(.22,.61,.36,1);
  /* Apple-style decelerating ease for snap-to-edge motions — no overshoot,
     smooth deceleration. Used by the floating menu and floating input
     when they snap to the nearest edge after dragging. */
  --ease-snap:cubic-bezier(.32,.72,0,1);
  --radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;
  --radius-input:18px;--radius-pill:24px;
  --sidebar-w:clamp(250px,20vw,340px);--panel-w:clamp(310px,26vw,430px);
  --accent:#0d9488;--accent-hover:#0b7b74;--accent-light:#14b8a8;
  --accent-prismo:#7c3aed;--accent-prismo-hover:#6d28d9;
  --danger:#ef4444;--danger-soft:rgba(239,68,68,.11);--danger-border:rgba(239,68,68,.18);
  --success:#10b981;--success-soft:rgba(16,185,129,.12);--success-border:rgba(16,185,129,.22);
  --glass-blur:blur(22px) saturate(1.18);--glass-blur-heavy:blur(30px) saturate(1.22);
  --transition-panel:.36s var(--ease-out-expo);--transition-fast:.18s var(--ease-smooth);--transition-theme:.3s var(--ease-smooth);
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
[data-theme="light"]{
  --bg-page:#faf9f5;--bg-chat:#faf9f5;--bg-card:rgba(255,255,255,.72);
  --bg-surface:rgba(240,238,230,.50);--bg-surface-hover:rgba(20,20,19,.032);
  --bg-surface-selected:rgba(13,148,136,.055);--bg-dark:#141413;
  --bg-glass:rgba(250,249,245,.50);--bg-glass-panel:rgba(255,255,255,.36);
  --bg-glass-strong:rgba(255,255,255,.36);--bg-glass-window:rgba(255,255,255,.54);
  --bg-input-glass:rgba(255,255,255,.36);--model-control-bg:rgba(255,255,255,.52);
  --model-dropdown-bg:rgba(255,255,255,.80);
  --model-bmo-selected-bg:rgba(13,148,136,.16);--model-prismo-selected-bg:rgba(124,58,237,.16);
  --resize-handle-bg:rgba(252,251,247,.92);--resize-handle-cover:rgba(252,251,247,.96);
  --text-primary:#141413;--text-secondary:#5e5d59;--text-tertiary:#96948b;
  --border-subtle:rgba(20,20,19,.08);--border-strong:rgba(20,20,19,.14);--border-input:rgba(20,20,19,.10);
  --overlay-modal:rgba(20,20,19,.48);--overlay-loading:rgba(20,20,19,.24);--scroll-thumb:rgba(20,20,19,.22);
  --user-bubble-bg:#0d9488;--user-bubble-text:#fff;--agent-bubble-bg:rgba(255,255,255,.46);
  --user-bubble-glass:rgba(13,148,136,.58);--bubble-shape-opacity:.085;
  --agent-bubble-text:#141413;--agent-bubble-border:rgba(20,20,19,.07);
  --toggle-bg-off:#d1cfc5;--toggle-dot:#fff;
  --badge-bmo-bg:rgba(13,148,136,.08);--badge-bmo-text:#0d9488;--badge-bmo-border:rgba(13,148,136,.18);
  --badge-prismo-bg:rgba(124,58,237,.08);--badge-prismo-text:#7c3aed;--badge-prismo-border:rgba(124,58,237,.18);
  --thinking-bg:rgba(248,247,242,.70);--thinking-border:rgba(20,20,19,.06);--divider:rgba(20,20,19,.07);
  --shadow-pill:0 12px 30px -16px rgba(20,20,19,.24),0 4px 14px -8px rgba(20,20,19,.16);
  --shadow-pill-hover:0 16px 40px -18px rgba(20,20,19,.30),0 8px 18px -10px rgba(20,20,19,.18);
  --shadow-modal:0 24px 54px rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.08);
  --shadow-window:0 22px 54px rgba(0,0,0,.14),0 8px 20px rgba(0,0,0,.08);
  --window-header-bg:rgba(255,255,255,.38);
  --shape-color-1:rgba(13,148,136,.18);--shape-color-2:rgba(124,58,237,.13);
  --shape-color-3:rgba(20,184,166,.15);--shape-color-4:rgba(245,158,11,.11);
  --floating-shape-opacity:.26;--input-shape-opacity:.26;
}
[data-theme="dark"]{
  --bg-page:#141413;--bg-chat:#141413;--bg-card:rgba(30,30,28,.72);
  --bg-surface:rgba(30,30,28,.50);--bg-surface-hover:rgba(255,255,255,.042);
  --bg-surface-selected:rgba(13,148,136,.105);--bg-dark:#0d0d0c;
  --bg-glass:rgba(20,20,19,.50);--bg-glass-panel:rgba(30,30,28,.34);
  --bg-glass-strong:rgba(30,30,28,.34);--bg-glass-window:rgba(30,30,28,.55);
  --bg-input-glass:rgba(30,30,28,.34);--model-control-bg:rgba(36,36,34,.54);
  --model-dropdown-bg:rgba(30,30,28,.80);
  --model-bmo-selected-bg:rgba(13,148,136,.22);--model-prismo-selected-bg:rgba(124,58,237,.22);
  --resize-handle-bg:rgba(34,34,32,.94);--resize-handle-cover:rgba(34,34,32,.97);
  --text-primary:#faf9f5;--text-secondary:#b0aea5;--text-tertiary:#83827c;
  --border-subtle:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.13);--border-input:rgba(255,255,255,.10);
  --overlay-modal:rgba(0,0,0,.66);--overlay-loading:rgba(20,20,19,.35);--scroll-thumb:rgba(255,255,255,.20);
  --user-bubble-bg:#0d9488;--user-bubble-text:#fff;--agent-bubble-bg:rgba(30,30,28,.48);
  --user-bubble-glass:rgba(13,148,136,.56);--bubble-shape-opacity:.075;
  --agent-bubble-text:#faf9f5;--agent-bubble-border:rgba(255,255,255,.06);
  --toggle-bg-off:#5e5d59;--toggle-dot:#141413;
  --badge-bmo-bg:rgba(13,148,136,.14);--badge-bmo-text:#14b8a8;--badge-bmo-border:rgba(13,148,136,.25);
  --badge-prismo-bg:rgba(124,58,237,.14);--badge-prismo-text:#a78bfa;--badge-prismo-border:rgba(124,58,237,.25);
  --thinking-bg:rgba(28,28,26,.70);--thinking-border:rgba(255,255,255,.06);--divider:rgba(255,255,255,.07);
  --shadow-pill:0 12px 30px -16px rgba(0,0,0,.66),0 4px 14px -8px rgba(0,0,0,.50);
  --shadow-pill-hover:0 18px 44px -18px rgba(0,0,0,.75),0 8px 18px -10px rgba(0,0,0,.55);
  --shadow-modal:0 24px 54px rgba(0,0,0,.50),0 8px 18px rgba(0,0,0,.30);
  --shadow-window:0 22px 54px rgba(0,0,0,.50),0 8px 20px rgba(0,0,0,.28);
  --window-header-bg:rgba(42,42,40,.42);
  --shape-color-1:rgba(20,184,166,.22);--shape-color-2:rgba(124,58,237,.19);
  --shape-color-3:rgba(13,148,136,.18);--shape-color-4:rgba(245,158,11,.15);
  --floating-shape-opacity:.24;--input-shape-opacity:.24;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-sans);background:var(--bg-page);color:var(--text-primary);display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}
button,input,textarea{font:inherit}
button{cursor:pointer}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.icon{width:16px;height:16px;display:block;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.icon-sm{width:14px;height:14px}.icon-lg{width:18px;height:18px}
.icon-fill{fill:currentColor;stroke:none}
[data-tooltip]{position:relative}
[data-tooltip]::before,[data-tooltip]::after{display:none!important}
/* ── Tooltip ── */
.ui-tooltip{position:fixed;z-index:5000;max-width:min(240px,calc(100vw - 20px));padding:7px 10px;border-radius:10px;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-strong);box-shadow:var(--shadow-modal);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);font-size:.72rem;font-weight:700;line-height:1.15;text-align:center;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px) scale(.98);transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth),visibility 0s linear .18s}
.ui-tooltip.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition-delay:0s}
/* ── Loading ── */
.loading-screen{position:fixed;inset:0;z-index:9999;background:var(--overlay-loading);backdrop-filter:blur(24px) saturate(1.2);display:flex;align-items:center;justify-content:center;transition:opacity .45s var(--ease-smooth),visibility 0s linear .45s}
.loading-screen.hidden{opacity:0;visibility:hidden}
.loading-spinner{width:40px;height:40px;border:2px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay-backdrop{position:fixed;inset:0;background:var(--overlay-modal);z-index:60}
/* ── Background shapes ── */
.bg-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--floating-shape-opacity);will-change:transform;transition:background .3s}
/* ── Sidebar / Panel ── */
.sidebar-left,.panel-right{background:var(--bg-glass-panel);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);display:flex;flex-direction:column;z-index:70;transition:margin var(--transition-panel),min-width var(--transition-panel),opacity var(--transition-panel),background var(--transition-theme);overflow:hidden;flex-shrink:0;position:relative}
.sidebar-left{width:var(--sidebar-w);min-width:var(--sidebar-w);border-right:1px solid var(--border-subtle)}
.sidebar-left.closed{margin-left:calc(var(--sidebar-w)*-1);min-width:0;opacity:0;pointer-events:none}
.panel-right{width:var(--panel-w);min-width:var(--panel-w);border-left:0;overflow:visible}
.panel-right::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--border-subtle) 0 calc(50% - 38px),transparent calc(50% - 27px) calc(50% + 27px),var(--border-subtle) calc(50% + 27px) 100%);pointer-events:none;z-index:4}
.panel-right.closed{margin-right:calc(var(--panel-w)*-1);min-width:0;opacity:0;pointer-events:none}
.panel-right.closed .panel-resize-handle{opacity:0;pointer-events:none}
.sidebar-header,.panel-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:50px;flex-shrink:0;border-bottom:1px solid var(--divider);position:relative;z-index:1}
.logo-link{font-weight:700;font-size:1.05rem;letter-spacing:-.025em;color:var(--text-primary);text-decoration:none;user-select:none}
.panel-title{font-weight:700;font-size:.95rem;letter-spacing:-.02em;color:var(--text-primary)}
.icon-btn,.panel-close-btn,.task-delete,.preview-close,.fw-btn{background:transparent;border:0;color:var(--text-tertiary);border-radius:var(--radius-sm);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}
.icon-btn:hover,.panel-close-btn:hover,.task-delete:hover,.preview-close:hover,.fw-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.panel-close-btn:hover,.task-delete:hover,.preview-close:hover,.fw-btn.fw-close:hover{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-border)}
.task-delete:disabled{opacity:.25;cursor:not-allowed}.task-delete:disabled:hover{background:transparent;color:var(--text-tertiary)}
.sidebar-content{flex:1;overflow:hidden;padding:8px 10px;display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;min-height:0}
.new-task-btn,.artifacts-nav-btn,.settings-row-link{display:flex;align-items:center;gap:9px;width:100%;padding:9px 13px;border-radius:12px;font-size:.83rem;font-weight:600;transition:all var(--transition-fast);background:transparent;color:var(--text-secondary);border:1px solid transparent;text-align:left;text-decoration:none}
.new-task-btn{color:var(--accent);border-style:dashed;border-color:var(--border-strong);margin-bottom:4px}
.new-task-btn:hover{background:rgba(13,148,136,.075);border-color:rgba(13,148,136,.38)}
.artifacts-nav-btn:hover,.settings-row-link:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--border-subtle)}
/* Section label row */
.section-label-row{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px;flex-shrink:0}
.section-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary)}
.section-action-btn{width:22px;height:22px;border-radius:7px;background:transparent;border:0;color:var(--text-tertiary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition-fast),color var(--transition-fast);cursor:pointer}
.section-action-btn:hover{background:var(--bg-surface-hover);color:var(--accent)}
.section-action-btn .icon{width:13px;height:13px}
.task-list{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:2px;touch-action:pan-y;overscroll-behavior-x:none}
.task-item{display:flex;align-items:center;gap:10px;width:100%;max-width:100%;padding:7px 8px 7px 13px;border-radius:12px;font-size:.82rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;min-height:36px;overflow:hidden}
.task-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.task-item:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--border-subtle)}
.task-item.active{background:var(--bg-surface-selected);color:var(--text-primary);border-color:rgba(13,148,136,.15)}
.task-delete{opacity:0;width:26px;height:26px}.task-item:hover .task-delete,.task-item.active .task-delete{opacity:1}
.no-tasks,.empty-state{text-align:center;padding:14px;color:var(--text-tertiary);font-size:.72rem;font-style:italic}
/* Sidebar footer */
.sidebar-footer{padding:0;border-top:1px solid var(--divider);flex-shrink:0;display:flex;flex-direction:column;gap:0;position:relative;z-index:1}
.footer-btn{width:100%;padding:8px 14px;background:transparent;border:0;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.8rem;font-weight:600;text-align:left;display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}
.footer-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
/* Toggle */
.toggle-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.toggle-wrap input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{width:36px;height:20px;border-radius:20px;background:var(--toggle-bg-off);cursor:pointer;position:relative;transition:background .25s var(--ease-smooth)}
.toggle-thumb{width:14px;height:14px;border-radius:50%;background:var(--toggle-dot);position:absolute;top:3px;left:3px;transition:transform .25s var(--ease-smooth);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.toggle-wrap input:checked+.toggle-track{background:var(--accent)}
.toggle-wrap input:checked+.toggle-track .toggle-thumb{transform:translateX(16px)}
/* User profile */
.user-avatar-circle{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-prismo));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0}
.user-profile-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:0;cursor:pointer;transition:background var(--transition-fast)}
.user-profile-row:hover{background:var(--bg-surface-hover)}
.user-info{flex:1;min-width:0}
.user-name{font-size:.8rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:.65rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── Main area ── */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-chat);position:relative;z-index:10;transition:background var(--transition-theme)}
.top-blur{position:absolute;top:0;left:0;right:0;height:86px;z-index:30;pointer-events:none;opacity:0;backdrop-filter:blur(2.4px);-webkit-backdrop-filter:blur(2.4px);background:linear-gradient(to bottom,var(--bg-chat) 0%,rgba(250,249,245,.18) 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.52) 55%,transparent 100%);transition:opacity .24s var(--ease-smooth)}
[data-theme="dark"] .top-blur{background:linear-gradient(to bottom,var(--bg-chat) 0%,rgba(20,20,19,.18) 58%,transparent 100%)}
.main-area.chat-scrolled .top-blur{opacity:.72}
/* ── Floating controls ── */
.floating-controls{position:fixed;top:14px;left:calc(var(--sidebar-w)+18px);z-index:150;display:flex;align-items:center;gap:4px;background:var(--bg-glass-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:4px 6px;box-shadow:var(--shadow-pill);user-select:none;will-change:left,top;transition:box-shadow .3s var(--ease-smooth),left .55s var(--ease-snap),top .55s var(--ease-snap),background var(--transition-theme)}
.floating-controls:hover{box-shadow:var(--shadow-pill-hover)}
.floating-controls.dragging{box-shadow:0 18px 44px rgba(0,0,0,.22);cursor:grabbing;transition:box-shadow .2s;z-index:160}
.flt-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:var(--radius-pill);z-index:0}
.flt-shape{position:absolute;border-radius:50%;filter:blur(34px);opacity:var(--floating-shape-opacity);pointer-events:none}
.floating-controls>*:not(.flt-shapes){position:relative;z-index:1}
.flt-btn,.flt-drag-handle{background:transparent;border:0;color:var(--text-secondary);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}
.flt-drag-handle{cursor:grab;color:var(--text-tertiary);opacity:.78}
.flt-drag-handle:active{cursor:grabbing}
.flt-btn:hover,.flt-drag-handle:hover{background:var(--bg-surface-hover);color:var(--text-primary);opacity:1}
.flt-btn.panel-active{background:var(--accent);color:#fff}
.flt-btn.panel-active:hover{background:var(--accent-hover)}
.flt-divider{width:1px;height:18px;background:var(--border-subtle);margin:0 4px;flex-shrink:0}
.flt-brand-name{font-size:.75rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);padding:0 8px 0 4px;white-space:nowrap;cursor:pointer}
.flt-model-name{display:none;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:14px;white-space:nowrap;margin:0 2px}
.flt-model-name.bmo-style{display:block;background:var(--badge-bmo-bg);color:var(--badge-bmo-text)}
.flt-model-name.prismo-style{display:block;background:var(--badge-prismo-bg);color:var(--badge-prismo-text)}
/* ── Chat ── */
.chat-area{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:56px 14px 6px;scroll-behavior:smooth;background:var(--bg-chat);transition:background var(--transition-theme)}
.chat-inner{width:100%;max-width:680px;display:flex;flex-direction:column;gap:14px;flex:1}
.welcome-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:30px 0;animation:fadeUp .45s var(--ease-out-expo)}
.welcome-eyebrow{font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.welcome-eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);display:block}
.welcome-screen h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.08;letter-spacing:-.01em;max-width:460px}
.welcome-sub{font-size:.9rem;color:var(--text-secondary);max-width:410px;line-height:1.6}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUpMsg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes windowIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
/* ── Messages ── */
.message{display:flex;gap:10px;animation:fadeUpMsg .3s var(--ease-out-expo);max-width:min(88%,680px);min-width:0;transition:opacity .35s var(--ease-smooth),filter .35s var(--ease-smooth);position:relative}
.message.user{align-self:flex-end;flex-direction:row-reverse}
.message.agent{align-self:flex-start}
/* User avatar matches profile: gradient circle */
.avatar-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:-.02em}
.message.user .avatar-dot{background:linear-gradient(135deg,var(--accent),var(--accent-prismo));color:#fff}
.message.agent .avatar-dot{background:var(--bg-surface);color:var(--accent);border:1px solid var(--border-subtle)}
.message.agent.prismo-avatar .avatar-dot{color:var(--accent-prismo);border-color:rgba(124,58,237,.15)}
.bubble-wrap{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.bubble-label{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:0 3px}
.bmo-label{color:var(--accent)}.prismo-label{color:var(--accent-prismo)}
.bubble{padding:10px 15px;border-radius:1rem;font-size:.85rem;line-height:1.55;word-break:normal;overflow-wrap:anywhere;max-width:100%;position:relative;overflow:hidden;backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12);box-shadow:0 10px 28px -22px rgba(0,0,0,.28)}
.bubble::before,.bubble::after{content:"";position:absolute;border-radius:50%;filter:blur(28px);opacity:var(--bubble-shape-opacity);pointer-events:none;z-index:0}
.bubble::before{width:110px;height:110px;top:-55px;left:-36px;background:var(--shape-color-1)}
.bubble::after{width:100px;height:100px;right:-42px;bottom:-54px;background:var(--shape-color-2)}
.bubble>*{position:relative;z-index:1}
.message.user .bubble{background:var(--user-bubble-glass);color:var(--user-bubble-text);border:1px solid rgba(255,255,255,.14);border-bottom-right-radius:.2rem}
.message.agent .bubble{background:var(--agent-bubble-bg);color:var(--agent-bubble-text);border:1px solid var(--agent-bubble-border);border-bottom-left-radius:.2rem}
.bubble p{margin:0 0 7px}.bubble p:last-child{margin-bottom:0}
.bubble pre{max-width:100%;overflow-x:auto;background:var(--bg-dark);color:#e8eaed;border:1px solid var(--border-subtle);border-radius:10px;padding:11px 13px;font-family:var(--font-mono);font-size:.68rem;line-height:1.5;margin:7px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble code{font-family:var(--font-mono);font-size:.68rem;background:var(--bg-surface);padding:1px 4px;border-radius:4px}
.bubble pre code{background:transparent;padding:0;color:inherit}
/* Reverted cycle */
.message.cycle-reverted{opacity:.42;filter:blur(2.5px) saturate(.85);pointer-events:none;user-select:none}
.message.cycle-reverted .bubble{box-shadow:none}
.message.cycle-reverted .msg-actions{display:none!important}
body.has-reverted-cycle .model-select-btn{opacity:.78}
body.has-reverted-cycle .model-tooltip.visible{opacity:.78}
body.has-reverted-cycle .model-dropdown.open{opacity:.86}
/* ── User message hover-actions (edit) ── */
/* Shown on hover of the message OR when the button area itself is hovered */
.msg-hover-zone{position:absolute;top:0;bottom:0;left:-44px;width:44px;z-index:2;pointer-events:auto}
.message.user .msg-hover-zone{left:auto;right:-44px}
/* Floating edit button inside bubble-wrap */

.msg-hover-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-glass-strong);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast),transform .22s var(--ease-spring),box-shadow var(--transition-fast),border-color var(--transition-fast);box-shadow:0 6px 14px -10px rgba(20,20,19,.25);cursor:pointer}
.msg-hover-btn .icon{width:13px;height:13px}
.msg-hover-btn:hover{transform:translateY(-2px) scale(1.06);color:var(--accent);background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.22);box-shadow:0 8px 18px -10px rgba(13,148,136,.35)}
.msg-hover-btn:active{transform:translateY(0) scale(.94)}
/* ── Inline edit UI ──
   When editing a user message, the edit form REPLACES the bubble's text
   content but KEEPS the same teal glass bubble background, so the white
   textarea + white button labels stay readable in both themes. Previously
   the parent .bubble was display:none'd which made the white-on-white
   form invisible in light mode. */
.bubble-edit-wrap{
  display:none;flex-direction:column;gap:7px;
  /* Match the user bubble's teal glass background so the white form
     elements are legible in light AND dark themes. */
  background:var(--user-bubble-glass);
  color:var(--user-bubble-text);
  border:1px solid rgba(255,255,255,.14);
  border-bottom-right-radius:.2rem;
  border-radius:1rem;border-bottom-right-radius:.2rem;
  padding:10px 12px;
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  box-shadow:0 10px 28px -22px rgba(0,0,0,.28);
  max-width:100%;
}
.message.editing .bubble{display:none}
.message.editing .bubble-edit-wrap{display:flex}
.bubble-edit-textarea{
  width:100%;
  /* A semi-opaque white-on-teal inset so the typed text has guaranteed
     contrast (white text on the teal-tinted background of the wrap). */
  background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.38);
  border-radius:12px;
  color:#fff;
  font-family:var(--font-sans);
  font-size:.85rem;
  resize:none;outline:0;
  padding:9px 12px;
  line-height:1.55;
  min-height:46px;max-height:200px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
  caret-color:#fff;
}
.bubble-edit-textarea::placeholder{color:rgba(255,255,255,.55)}
.bubble-edit-textarea:focus{border-color:rgba(255,255,255,.70);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
[data-theme="dark"] .bubble-edit-textarea{background:rgba(13,148,136,.22);border-color:rgba(255,255,255,.22)}
/* Custom scrollbar for the edit textarea — narrower, inset from the rounded
   corners, and tinted white so it matches the teal-glass bubble instead of
   the global slate thumb that fills the whole track edge-to-edge. */
.bubble-edit-textarea{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent}
.bubble-edit-textarea::-webkit-scrollbar{width:3px;height:3px}
.bubble-edit-textarea::-webkit-scrollbar-track{background:transparent;margin:14px 0;border-radius:999px}
.bubble-edit-textarea::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.30);
  border-radius:999px;
  /* min-height clamps the thumb so it never spans the full track edge-to-edge
     even when the content is short. */
  min-height:24px;max-height:60%;
}
.bubble-edit-textarea:hover::-webkit-scrollbar-thumb,
.bubble-edit-textarea:focus::-webkit-scrollbar-thumb{background:rgba(255,255,255,.50)}

.bubble-edit-controls{display:flex;gap:6px;justify-content:flex-end}
.bubble-edit-cancel,.bubble-edit-send{padding:5px 13px;border-radius:10px;font-size:.75rem;font-weight:700;border:0;cursor:pointer;transition:all var(--transition-fast)}
.bubble-edit-cancel{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.18)}
.bubble-edit-cancel:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}
.bubble-edit-send{background:rgba(255,255,255,.26);color:#fff;border:1px solid rgba(255,255,255,.34)}
.bubble-edit-send:hover{background:rgba(255,255,255,.38)}
/* ── Agent message actions (accept/undo/redo) — only on last message ── */
/* Redo also fades in/out with hover of its parent message */
.msg-actions{display:flex;gap:6px;margin-top:8px;padding:0 2px}
.msg-action-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-glass-strong);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast),transform .22s var(--ease-spring),box-shadow var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast);box-shadow:0 6px 14px -10px rgba(20,20,19,.25);position:relative}
.msg-action-btn .icon{width:14px;height:14px}
.msg-action-btn:hover{transform:translateY(-2px) scale(1.06)}
.msg-action-btn.accept-btn:hover{color:var(--success);background:var(--success-soft);border-color:var(--success-border);box-shadow:0 8px 18px -10px rgba(16,185,129,.45)}
.msg-action-btn.redo-btn:hover{color:var(--accent-prismo);background:var(--badge-prismo-bg);border-color:var(--badge-prismo-border);box-shadow:0 8px 18px -10px rgba(124,58,237,.35)}
.msg-action-btn:active{transform:translateY(0) scale(.94)}
.msg-action-btn.fired{animation:actionPop .55s var(--ease-spring)}
.msg-action-btn.accept-btn.fired{color:var(--success);background:var(--success-soft);border-color:var(--success-border)}
.msg-action-btn.redo-btn.fired{opacity:1;color:var(--accent-prismo);background:var(--badge-prismo-bg);border-color:var(--badge-prismo-border)}
@keyframes actionPop{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-8deg)}60%{transform:scale(.92) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes redoSpin{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
.msg-action-btn.redo-btn.fired .icon{animation:redoSpin .52s var(--ease-spring)}
/* ── Tool chips ── */
.tool-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tool-inline{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:.68rem;font-weight:800;padding:4px 9px;border-radius:999px;cursor:pointer;font-family:var(--font-mono);letter-spacing:.02em;transition:transform var(--transition-fast),filter var(--transition-fast),background var(--transition-fast);border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-inline.tool-teal{background:var(--badge-bmo-bg);color:var(--badge-bmo-text);border-color:var(--badge-bmo-border)}
.tool-inline.tool-purple{background:var(--badge-prismo-bg);color:var(--badge-prismo-text);border-color:var(--badge-prismo-border)}
.tool-inline:hover{transform:translateY(-1px);filter:brightness(.98)}
/* ── Thinking ── */
.thinking-block{background:var(--thinking-bg);border:1px solid var(--thinking-border);border-radius:10px;margin:7px 0;font-size:.74rem;color:var(--text-secondary);overflow:hidden}
.thinking-block summary{font-weight:700;color:var(--text-primary);cursor:pointer;font-size:.76rem;padding:9px 13px;display:flex;align-items:center;gap:6px;user-select:none}
.thinking-block summary:hover{background:var(--bg-surface-hover)}
.thinking-block summary::before{content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--text-tertiary);transition:transform .22s var(--ease-smooth)}
.thinking-block[open] summary::before{transform:rotate(90deg)}
.think-detail{padding:8px 13px 10px;color:var(--text-tertiary);font-size:.68rem;line-height:1.6;font-family:var(--font-mono);border-top:1px solid var(--divider);margin:0 13px}
.think-step{padding:2px 0;display:flex;gap:6px}
.step-num{color:var(--accent);font-weight:800;flex-shrink:0}
.typing-indicator{display:inline-flex;gap:3px;padding:3px 0}
.typing-indicator span{width:5px;height:5px;border-radius:50%;background:var(--text-tertiary);animation:typeBounce 1.2s infinite}
.typing-indicator span:nth-child(2){animation-delay:.15s}
.typing-indicator span:nth-child(3){animation-delay:.3s}
.thinking-label{display:inline-flex;align-items:center;margin-left:8px;font-size:.78rem;color:var(--text-tertiary);font-weight:600;animation:thinkPulse 2s ease-in-out infinite;transition:opacity .3s ease}
@keyframes typeBounce{0%,80%,100%{transform:scale(.55);opacity:.35}40%{transform:scale(1);opacity:1}}
@keyframes thinkPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── Input area ── */
.input-area{padding:6px 14px calc(14px + var(--safe-bottom));display:flex;justify-content:center;flex-shrink:0;background:transparent;overflow:visible;position:relative;z-index:80}
.input-area-ghost{display:none;width:100%;max-width:680px;flex-shrink:0}
.input-area-ghost.active{display:block}
.input-wrapper{width:100%;max-width:680px;min-width:420px;background:var(--bg-input-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-input);border-radius:var(--radius-input);padding:10px 12px 8px 16px;display:flex;flex-direction:column;gap:6px;transition:border-color var(--transition-fast),background var(--transition-theme),box-shadow var(--transition-fast);position:relative;overflow:visible;box-shadow:var(--shadow-pill)}
.input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,148,136,.07),var(--shadow-pill)}
.input-wrapper.prismo-focus:focus-within{border-color:var(--accent-prismo);box-shadow:0 0 0 3px rgba(124,58,237,.09),var(--shadow-pill)}
/* Desktop-only: floating input */
.input-wrapper.floating-input{position:fixed;z-index:145;max-width:min(680px,calc(100vw - 28px));width:min(680px,calc(100vw - 28px));min-width:420px;will-change:left,top;transition:box-shadow .3s var(--ease-smooth),left .75s var(--ease-snap),top .75s var(--ease-snap),border-color var(--transition-fast),background var(--transition-theme)}
.input-wrapper.floating-input.input-dragging{transition:box-shadow .2s !important;box-shadow:0 18px 44px rgba(0,0,0,.22);cursor:grabbing;z-index:160}
/* Width resize handle (visible only when floating) */
.input-width-handle{display:none;position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:22px;height:40px;cursor:ew-resize;z-index:5;border-radius:999px;background:var(--resize-handle-bg);border:1px solid var(--border-subtle);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);align-items:center;justify-content:center;color:var(--text-tertiary);transition:all var(--transition-fast);box-shadow:0 4px 12px -8px rgba(20,20,19,.20)}
.input-wrapper.floating-input .input-width-handle{display:flex}
.input-width-handle:hover{background:var(--resize-handle-cover);color:var(--text-primary);border-color:var(--border-strong);box-shadow:0 8px 20px -8px rgba(20,20,19,.32)}
.input-width-handle svg{position:relative;z-index:1}
.input-shapes{position:absolute;inset:0;border-radius:var(--radius-input);overflow:hidden;pointer-events:none;z-index:0}
.input-shape{position:absolute;border-radius:50%;filter:blur(34px);opacity:var(--input-shape-opacity)}
.input-typing-row,.input-controls-row{position:relative;z-index:1}
.input-typing-row{order:-1}
.input-typing-row textarea{width:100%;background:transparent;border:0;color:var(--text-primary);font-family:var(--font-sans);font-size:.9rem;resize:none;outline:0;min-height:22px;max-height:clamp(80px,20vh,160px);line-height:1.5;font-weight:400;overflow-y:auto;padding:5px 0 2px}
.input-typing-row textarea::placeholder{color:var(--text-tertiary)}
.input-controls-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.controls-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.spacer{flex:1}
/* Input drag + reset handles — desktop only, hidden on mobile via @media */
.input-drag-handle,.input-reset-btn{background:transparent;border:0;color:var(--text-tertiary);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0;cursor:pointer}
.input-drag-handle{cursor:grab}
.input-drag-handle:active{cursor:grabbing}
.input-drag-handle:hover,.input-reset-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.input-drag-handle .icon,.input-reset-btn .icon{width:14px;height:14px}
/* Separator between drag controls and model selector */
.input-ctrl-sep{width:1px;height:16px;background:var(--border-subtle);flex-shrink:0;margin:0 2px}
/* Model select */
.model-select-wrap{position:relative;flex-shrink:0}
.model-select-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:14px;border:1px solid var(--border-strong);background:var(--model-control-bg);color:var(--text-secondary);font-size:.72rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
.model-select-btn:hover{background:var(--model-control-bg);color:var(--text-primary);filter:brightness(.98)}
.model-select-btn.bmo-selected{background:var(--model-bmo-selected-bg);color:var(--badge-bmo-text);border-color:var(--badge-bmo-border)}
.model-select-btn.prismo-selected{background:var(--model-prismo-selected-bg);color:var(--badge-prismo-text);border-color:var(--badge-prismo-border)}
.model-select-btn.locked{opacity:.72;cursor:default;pointer-events:none}
.model-dropdown{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--model-dropdown-bg);backdrop-filter:blur(40px) saturate(1.9) brightness(1.06);-webkit-backdrop-filter:blur(40px) saturate(1.9) brightness(1.06);border:1px solid var(--border-strong);border-radius:var(--radius-md);z-index:200;min-width:178px;overflow:hidden;display:none;animation:fadeUp .2s var(--ease-out-expo);box-shadow:var(--shadow-modal)}
.model-dropdown.open{display:block}
.dropdown-option{padding:10px 14px;cursor:pointer;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-primary);border-bottom:1px solid var(--divider);transition:background var(--transition-fast)}
.dropdown-option:last-child{border-bottom:0}
.dropdown-option:hover{background:var(--bg-surface-hover)}
.opt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bmo-dot{background:var(--accent)}.prismo-dot{background:var(--accent-prismo)}
.opt-meta{font-size:.65rem;color:var(--text-tertiary);margin-left:auto;white-space:nowrap}
.model-tooltip{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:var(--model-dropdown-bg);backdrop-filter:blur(40px) saturate(1.9) brightness(1.06);-webkit-backdrop-filter:blur(40px) saturate(1.9) brightness(1.06);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px 14px;font-size:.78rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-modal);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .22s var(--ease-smooth),transform .22s var(--ease-smooth);z-index:180}
.model-tooltip.visible{opacity:1;transform:translateY(0)}
.attach-btn,.send-btn{border:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-fast)}
.attach-btn{background:transparent;color:var(--text-tertiary);width:30px;height:30px;border-radius:50%}
.attach-btn:hover{color:var(--text-primary);background:var(--bg-surface-hover)}
.send-btn{background:var(--accent);color:#fff;width:30px;height:30px;border-radius:50%}
.send-btn:hover{background:var(--accent-hover);transform:scale(1.05)}
.send-btn.prismo-send{background:var(--accent-prismo)}
.send-btn.prismo-send:hover{background:var(--accent-prismo-hover)}
.send-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
/* Attached files preview row */
.attached-files-row{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0;position:relative;z-index:1}
.attached-file-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;background:var(--bg-surface);border:1px solid var(--border-subtle);font-size:.7rem;font-weight:700;color:var(--text-secondary);max-width:200px}
.attached-file-chip .icon{width:12px;height:12px;flex-shrink:0}
.attached-file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.attached-file-remove{background:transparent;border:0;color:var(--text-tertiary);cursor:pointer;padding:0;display:flex;align-items:center;flex-shrink:0;border-radius:50%;width:16px;height:16px;justify-content:center;transition:color var(--transition-fast)}
.attached-file-remove:hover{color:var(--danger)}
.attached-file-remove .icon{width:11px;height:11px}
/* ── Drag-over overlay ── */
.drop-overlay{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .22s var(--ease-smooth);background:var(--overlay-modal)}
.drop-overlay.active{opacity:1;pointer-events:auto}
.drop-zone-box{width:min(520px,90vw);padding:48px 32px;border-radius:var(--radius-xl);border:2.5px dashed var(--accent);background:var(--bg-glass-window);backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;animation:fadeUp .22s var(--ease-out-expo);box-shadow:var(--shadow-window)}
.drop-zone-icon{width:56px;height:56px;border-radius:50%;background:rgba(13,148,136,.12);border:2px solid rgba(13,148,136,.3);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.drop-zone-icon svg{width:28px;height:28px}
.drop-zone-title{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.drop-zone-sub{font-size:.82rem;color:var(--text-secondary)}
/* ── Right panel ── */
.panel-right-scroll{flex:1;overflow-y:auto;min-height:0;position:relative;z-index:1;overflow-x:hidden}
.panel-resize-handle{position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:26px;height:54px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--resize-handle-bg);backdrop-filter:blur(96px) saturate(1.55);-webkit-backdrop-filter:blur(96px) saturate(1.55);box-shadow:0 6px 18px -10px rgba(20,20,19,.20);color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;cursor:ew-resize;z-index:95;overflow:hidden;transition:opacity var(--transition-fast),background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}
.panel-resize-handle::before{content:"";position:absolute;right:-2px;top:0;bottom:0;width:15px;background:var(--resize-handle-cover);backdrop-filter:blur(96px) saturate(1.55);-webkit-backdrop-filter:blur(96px) saturate(1.55);z-index:0}
.panel-resize-handle .resize-shapes{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:1;opacity:.55}
.panel-resize-handle .resize-shape{position:absolute;border-radius:50%;filter:blur(24px);opacity:var(--floating-shape-opacity);will-change:transform}
.panel-resize-handle svg{position:relative;z-index:2}
.panel-resize-handle:hover,.panel-resize-handle.dragging{background:var(--resize-handle-cover);color:var(--text-primary);border-color:var(--border-strong);box-shadow:0 10px 24px -10px rgba(20,20,19,.32)}
.panel-section{display:flex;flex-direction:column;overflow:visible;border-bottom:1px solid var(--divider)}
.panel-section.collapsed .panel-section-body{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.panel-section-header{padding:10px 14px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:background var(--transition-fast);border-bottom:1px solid var(--divider);gap:8px}
.panel-section.collapsed .panel-section-header{border-bottom:0}
.panel-section-header:hover{background:var(--bg-surface-hover)}
.section-title-group{display:flex;align-items:center;gap:7px}
.section-icon{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.collapse-arrow{transition:transform .22s var(--ease-smooth);color:var(--text-tertiary)}
.panel-section.collapsed .collapse-arrow{transform:rotate(-90deg)}
.section-count{font-family:var(--font-mono);font-size:.6rem;font-weight:800;color:var(--text-tertiary);background:var(--bg-surface-hover);padding:2px 8px;border-radius:10px}
.panel-section-body{overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:2px;max-height:420px;transition:max-height .3s var(--ease-smooth),padding .3s var(--ease-smooth)}
.panel-item,.integration-item,.tree-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:12px;cursor:pointer;font-size:.8rem;color:var(--text-secondary);transition:all var(--transition-fast);border:1px solid transparent;min-height:38px}
.panel-item:hover,.integration-item:hover,.tree-row:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--border-subtle)}
.item-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--bg-surface-hover);font-size:.62rem;font-weight:800;color:var(--text-tertiary);font-family:var(--font-mono)}
.item-info{flex:1;min-width:0}
.item-name{font-weight:700;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.item-meta{font-size:.68rem;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-badge{font-family:var(--font-mono);font-weight:800;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:8px;flex-shrink:0}
.badge-teal{background:var(--badge-bmo-bg);color:var(--badge-bmo-text)}
.badge-purple{background:var(--badge-prismo-bg);color:var(--badge-prismo-text)}
.badge-neutral{background:var(--bg-surface-hover);color:var(--text-tertiary)}
.tree-folder{font-weight:800;color:var(--text-primary)}
.tree-children{display:flex;flex-direction:column;gap:2px}
.tree-row{padding-left:calc(11px + var(--depth,0)*14px)}
.tree-row.file-row{cursor:pointer}
.folder-caret{width:10px;height:10px;transition:transform .18s var(--ease-smooth)}
.tree-row.collapsed .folder-caret{transform:rotate(-90deg)}
.integration-item{justify-content:space-between;cursor:default}
.int-main{display:flex;align-items:center;gap:9px;min-width:0}
.int-status{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.int-status.online{background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.4)}
.int-status.offline{background:var(--text-tertiary)}
.mini-toggle{width:32px;height:18px;border-radius:18px;border:0;background:var(--toggle-bg-off);position:relative;flex-shrink:0;transition:background .2s var(--ease-smooth);cursor:pointer}
.mini-toggle::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--toggle-dot);transition:transform .2s var(--ease-smooth)}
.mini-toggle.on{background:var(--accent)}
.mini-toggle.on::after{transform:translateX(14px)}
/* ── Preview overlay ── */
.preview-overlay{position:fixed;inset:0;z-index:200;background:var(--overlay-modal);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2rem)}

.preview-panel{background:var(--bg-card);backdrop-filter:var(--glass-blur);border-radius:var(--radius-xl);max-width:680px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .38s var(--ease-out-expo);border:1px solid var(--border-subtle);box-shadow:var(--shadow-modal)}
.preview-header{padding:14px 18px;border-bottom:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.preview-title{font-weight:700;font-size:.9rem;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.preview-body{flex:1;overflow-y:auto;padding:16px 18px;color:var(--text-primary)}
/* ── Float windows (files etc) ── */
.float-window{position:fixed;z-index:300;min-width:280px;min-height:170px;max-width:min(94vw,900px);max-height:min(90vh,720px);background:var(--bg-glass-window);backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-window);display:flex;flex-direction:column;overflow:hidden;will-change:left,top,width,height,transform}
.float-window.topmost{box-shadow:0 26px 60px rgba(0,0,0,.22),0 10px 24px rgba(0,0,0,.12);z-index:400}
.float-window.maximized{max-width:none;max-height:none;border-radius:var(--radius-lg)}
.fw-shapes{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit}
.fw-shape{position:absolute;border-radius:50%;filter:blur(60px);opacity:.24;pointer-events:none}
.fw-header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--window-header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--divider);cursor:grab;user-select:none;flex-shrink:0;position:relative;z-index:2}
.fw-header:active{cursor:grabbing}
.fw-title{flex:1;display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fw-actions{display:flex;align-items:center;gap:3px}
.fw-btn{width:28px;height:28px}
.fw-body{flex:1;min-height:0;overflow:auto;margin-bottom:38px;padding:12px 14px 14px;font-family:var(--font-mono);font-size:.72rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere;background:transparent;position:relative;z-index:1;scrollbar-gutter:stable}
.fw-body.rendered{font-family:var(--font-sans);white-space:normal;padding:14px 16px 14px}
.render-frame{width:100%;height:100%;min-height:260px;border:0;border-radius:14px;background:#fff;display:block}
.markdown-render{max-width:720px;margin:0 auto;font-size:.9rem;line-height:1.65;color:var(--text-primary)}
.markdown-render h1,.markdown-render h2,.markdown-render h3{line-height:1.2;margin:1em 0 .5em}
.markdown-render p{margin:.6em 0}
.markdown-render ul,.markdown-render ol{padding-left:1.4em;margin:.6em 0}
.markdown-render code{font-family:var(--font-mono);font-size:.82em;background:var(--bg-surface);padding:2px 5px;border-radius:5px}
.markdown-render pre{background:var(--bg-dark);color:#e8eaed;border-radius:12px;padding:12px;overflow:auto;white-space:pre-wrap}
.fw-resize-handle{position:absolute;bottom:10px;right:10px;width:22px;height:22px;cursor:nwse-resize;z-index:5;border-radius:50%;background:var(--bg-surface-hover);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);opacity:.56}
.fw-resize-handle:hover{opacity:1;background:var(--bg-surface);border-color:var(--accent);box-shadow:0 0 0 4px rgba(13,148,136,.08)}
.fw-resize-handle::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--text-tertiary);border-bottom:1.6px solid var(--text-tertiary);border-radius:1px;position:relative;top:-1px;left:-1px}
/* ── Tasks window ── */
.tasks-window{position:fixed;inset:16px;z-index:500;background:var(--bg-glass-window);backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-window);display:flex;flex-direction:column;overflow:hidden}


.tasks-fw-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--window-header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--divider);flex-shrink:0;position:relative;z-index:2}
.tasks-fw-title{font-size:.9rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.tasks-fw-search{flex:0 1 320px;max-width:320px;background:var(--bg-surface);border:1px solid var(--border-input);border-radius:12px;padding:7px 12px;color:var(--text-primary);font-size:.8rem;outline:0;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.tasks-fw-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,148,136,.07)}
.tasks-fw-search::placeholder{color:var(--text-tertiary)}
.tasks-fw-body{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start;position:relative;z-index:1}
.tasks-fw-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--text-tertiary);font-size:.8rem;font-style:italic}
.task-card{background:var(--bg-glass-strong);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden;min-height:100px}
.task-card:hover{border-color:var(--accent);box-shadow:0 8px 24px -12px rgba(13,148,136,.28);transform:translateY(-2px);background:var(--bg-surface-selected)}
.task-card.active-card{border-color:rgba(13,148,136,.4);background:var(--bg-surface-selected)}
.task-card-name{font-size:.82rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.task-card-model{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;position:relative;z-index:1}
.task-card-model.bmo{color:var(--badge-bmo-text)}.task-card-model.prismo{color:var(--badge-prismo-text)}.task-card-model.none{color:var(--text-tertiary)}
.task-card-date{font-size:.62rem;color:var(--text-tertiary);font-family:var(--font-mono);position:relative;z-index:1;margin-top:auto}
.task-card-shape{position:absolute;border-radius:50%;filter:blur(36px);opacity:.16;pointer-events:none}
.tasks-expand-btn{width:22px;height:22px;border-radius:7px;background:transparent;border:0;color:var(--text-tertiary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition-fast),color var(--transition-fast);cursor:pointer}
.tasks-expand-btn:hover{background:var(--bg-surface-hover);color:var(--accent)}
.tasks-expand-btn.active-window{color:var(--accent);background:rgba(13,148,136,.1)}
.tasks-expand-btn .icon{width:13px;height:13px}
/* ── Settings window ── */
.settings-window{position:fixed;z-index:500;background:var(--bg-glass-window);backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-window);display:flex;flex-direction:column;overflow:hidden;width:min(620px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 32px));transition:background var(--transition-theme),border-color var(--transition-theme);top:50%;left:50%;transform:translate(-50%,-50%)}
.settings-window.hidden{display:none}
.settings-fw-shapes{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit}
.settings-fw-content{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.settings-fw-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--window-header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--divider);flex-shrink:0;cursor:grab;user-select:none}
.settings-fw-header:active{cursor:grabbing}
.settings-fw-title{flex:1;font-size:.9rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.settings-fw-body{flex:1;overflow-y:auto;padding:8px 6px}
.settings-section-title{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);padding:12px 14px 4px}
.settings-row-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);transition:background var(--transition-fast);text-decoration:none;color:inherit}
.settings-row-item.clickable{cursor:pointer}
.settings-row-item.clickable:hover,.settings-row-item:hover{background:var(--bg-surface-hover)}
.settings-row-label{flex:1;font-size:.85rem;font-weight:600;color:var(--text-primary)}
.settings-row-sub{font-size:.72rem;color:var(--text-tertiary);margin-top:1px}
.settings-divider{height:1px;background:var(--divider);margin:6px 14px}
/* Integrations window rows */
.int-window-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);transition:background var(--transition-fast)}
.int-window-item:hover{background:var(--bg-surface-hover)}
.int-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.int-dot.online{background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.4)}
.int-dot.offline{background:var(--text-tertiary)}
/* ── Copy confirm ── */
@keyframes copyConfirm{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.18) rotate(-6deg)}70%{transform:scale(.96) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.fw-btn.fw-copy.copied{color:#10b981;background:rgba(16,185,129,.12);box-shadow:inset 0 0 0 1px rgba(16,185,129,.18)}
.fw-btn.fw-copy.copied .icon{animation:copyConfirm .52s var(--ease-spring)}
/* ── Funny animations ── */
@keyframes cyrShake{0%,100%{transform:translateX(0)}10%,50%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(4px)}}
@keyframes cyrBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-12px)}50%{transform:translateY(0)}75%{transform:translateY(-6px)}}
@keyframes cyrSpin{to{transform:rotate(360deg)}}
@keyframes cyrWobble{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-6px) rotate(-5deg)}30%{transform:translateX(5px) rotate(4deg)}45%{transform:translateX(-4px) rotate(-3deg)}60%{transform:translateX(3px) rotate(2deg)}75%{transform:translateX(-1px) rotate(-1deg)}}
@keyframes cyrPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes cyrFlip{to{transform:perspective(400px) rotateY(360deg)}}
@keyframes cyrSwing{0%,100%{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}
.funny-anim{animation-duration:.6s;animation-timing-function:var(--ease-smooth);animation-fill-mode:both}
.funny-anim.shake{animation-name:cyrShake}.funny-anim.bounce{animation-name:cyrBounce}.funny-anim.spin{animation-name:cyrSpin}.funny-anim.wobble{animation-name:cyrWobble}.funny-anim.pulse{animation-name:cyrPulse}.funny-anim.flip{animation-name:cyrFlip}.funny-anim.swing{animation-name:cyrSwing}
/* ── Responsive ── */
@media(max-width:1024px){.chat-inner{max-width:100%}.message{max-width:93%}}
@media(max-width:768px){
  .sidebar-left{position:fixed;top:0;left:0;height:100%;width:100%;min-width:100%;border-right:0}
  .sidebar-left.closed{margin-left:-100%}
  .panel-right{position:fixed;top:0;right:0;height:100%;width:100%;min-width:100%;border-left:0}
  .panel-right::before{display:none}
  .panel-right.closed{margin-right:-100%}
  .floating-controls{top:calc(8px + var(--safe-top));left:8px;padding:6px 10px;gap:5px}
  .flt-drag-handle{display:none}
  .flt-btn{width:38px;height:38px}
  .flt-brand-name{font-size:.85rem;padding:0 10px 0 6px}
  .flt-model-name{font-size:.76rem;padding:5px 12px}
  .flt-divider{height:22px;margin:0 6px}
  .chat-area{padding:calc(56px + var(--safe-top)) 8px 4px}
  .chat-inner{gap:10px}
  .bubble{font-size:.8rem;padding:8px 12px}
  .message{max-width:96%}
  .input-area{padding:4px 8px calc(10px + var(--safe-bottom))}
  .input-wrapper{border-radius:14px;padding:8px 10px 6px 12px;gap:5px}
  .input-typing-row textarea{font-size:.85rem;padding-top:4px}
  .input-drag-handle,.input-reset-btn,.input-ctrl-sep{display:none!important}
  .model-select-btn{font-size:.68rem;padding:4px 8px}
  .welcome-screen h1{font-size:clamp(1.4rem,5vw,1.9rem)}
  .float-window{top:8px!important;left:8px!important;right:8px!important;bottom:8px!important;width:calc(100vw - 16px)!important;height:calc(100vh - 16px)!important;max-width:none!important;max-height:none!important;min-width:0;min-height:0;z-index:500!important}
  .float-window .fw-resize-handle{display:none}
  .panel-resize-handle{display:none}
  .float-window .fw-header{cursor:default}
  .model-tooltip{font-size:.72rem;padding:6px 12px}
  .tasks-window{inset:0;border-radius:0}
  .settings-window{width:100%;max-height:100%;border-radius:0;top:0;left:0;transform:none}
  
  .input-width-handle{display:none!important}
}
@media(max-width:480px){
  .flt-btn{width:36px;height:36px}
  .flt-brand-name{font-size:.8rem}
  .flt-model-name{font-size:.72rem}
  .model-select-btn{font-size:.64rem;padding:3px 7px;border-radius:10px}
  .tool-inline{max-width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.chat-area{scroll-behavior:auto}}

.task-card-header{display:flex;align-items:flex-start;gap:6px;position:relative;z-index:1}
.task-card-header .task-card-name{flex:1;min-width:0}
.task-card-delete{width:22px;height:22px;border-radius:7px;background:transparent;border:0;color:var(--text-tertiary);display:none;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);padding:0;position:relative;z-index:1}
.task-card-delete .icon{width:11px;height:11px}
.task-card-delete:hover{background:var(--danger-soft);color:var(--danger)}
.task-card-delete:disabled{opacity:.25;cursor:not-allowed}
.task-card-delete:disabled:hover{background:transparent;color:var(--text-tertiary)}
.task-card:hover .task-card-delete{display:inline-flex}
.task-card.active-card .task-card-delete{display:inline-flex}

/* When input is floating, chat area fills to bottom */
.main-area.input-detached .chat-area{padding-bottom:20px}
.main-area.input-detached .input-area{height:0;padding:0;overflow:hidden;pointer-events:none}
/* Bottom blur when chat extends full height */
.main-area.input-detached .top-blur{bottom:0;top:auto;height:60px;background:linear-gradient(to top,var(--bg-chat) 0%,rgba(250,249,245,.18) 58%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.52) 55%,transparent 100%)}
[data-theme="dark"] .main-area.input-detached .top-blur{background:linear-gradient(to top,var(--bg-chat) 0%,rgba(20,20,19,.18) 58%,transparent 100%)}

/* ── Seamless dark/light theme transition ── */
/* Apply to all elements that visually change with theme */
html{transition:background-color .3s var(--ease-smooth),color .3s var(--ease-smooth)}
body,
.sidebar-left,.panel-right,.main-area,.chat-area,
.floating-controls,.input-wrapper,.bubble,.avatar-dot,
.user-avatar-circle,.task-item,.panel-item,.integration-item,
.tree-row,.task-card,.fw-body,.settings-fw-body,.integrations-fw-body,
.tasks-fw-body,.float-window,.settings-window,
.tasks-window,.drop-overlay,.drop-zone-box,
.model-select-btn,.model-dropdown,.dropdown-option,
.preview-panel,.preview-body,.thinking-block,.think-detail{
  transition:
    background-color .3s var(--ease-smooth),
    color .3s var(--ease-smooth),
    border-color .3s var(--ease-smooth),
    box-shadow .3s var(--ease-smooth) !important;
}
/* Elements that should keep their own faster transitions + theme */
.toggle-track,.toggle-thumb,.mini-toggle{
  transition:background .25s var(--ease-smooth),transform .25s var(--ease-smooth) !important;
}
/* Ensure buttons don't get stuck on slow transitions */
button,.fw-btn,.flt-btn,.icon-btn,.panel-close-btn,.task-delete,
.msg-action-btn,.msg-hover-btn,.footer-btn,.new-task-btn{
  transition:
    background-color .18s var(--ease-smooth),
    color .18s var(--ease-smooth),
    border-color .18s var(--ease-smooth),
    opacity .18s var(--ease-smooth),
    transform .22s var(--ease-spring),
    box-shadow .18s var(--ease-smooth) !important;
}

/* ════════════════════════════════════════════════════
   ANIMATION SYSTEM — unified open/close for all panels
   Principle: opacity + scale/translateY + visibility
   No display:none flicker; graceful, spring-like motion
════════════════════════════════════════════════════ */

/* Float windows (file viewer etc) */
.float-window{
  opacity:0;
  transform:scale(.97) translateY(8px);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .4s var(--ease-gentle),
    transform .4s var(--ease-gentle),
    visibility 0s linear .4s,
    background-color .3s var(--ease-smooth),
    border-color .3s var(--ease-smooth),
    box-shadow .25s var(--ease-smooth);
}
.float-window.fw-open{
  opacity:1;
  transform:scale(1) translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .5s var(--ease-out-expo),
    transform .5s var(--ease-spring),
    visibility 0s linear 0s,
    background-color .3s var(--ease-smooth),
    border-color .3s var(--ease-smooth),
    box-shadow .25s var(--ease-smooth);
}
/* Remove animation:windowIn — replaced by CSS class transition */
.float-window{animation:none !important;}

/* Tasks window */
.tasks-window{
  opacity:0;
  transform:scale(.97) translateY(10px);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .42s var(--ease-gentle),
    transform .42s var(--ease-gentle),
    visibility 0s linear .42s,
    background-color .3s var(--ease-smooth);
}
.tasks-window.tw-open{
  opacity:1;
  transform:scale(1) translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .5s var(--ease-out-expo),
    transform .5s var(--ease-spring),
    visibility 0s linear 0s,
    background-color .3s var(--ease-smooth);
}

/* Settings window — gentle open/close animation. */
.settings-window{
  opacity:0;
  transform:scale(.98) translateY(8px);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .5s var(--ease-gentle),
    transform .5s var(--ease-gentle),
    visibility 0s linear .5s,
    background-color .3s var(--ease-smooth);
}
.settings-window.sw-open{
  opacity:1;
  transform:scale(1) translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .5s var(--ease-gentle),
    transform .5s var(--ease-gentle),
    visibility 0s linear 0s,
    background-color .3s var(--ease-smooth);
}
/* Override old display:none */
.settings-window.hidden{display:flex !important;}

/* Overlay backdrop — smooth fade */
.overlay-backdrop{
  opacity:0;
  visibility:hidden;
  transition:opacity .26s var(--ease-smooth),visibility 0s linear .26s;
}
.overlay-backdrop.visible{
  opacity:1;
  visibility:visible;
  transition:opacity .26s var(--ease-smooth),visibility 0s linear 0s;
  display:block;
}

/* Preview overlay */
.preview-overlay{
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease-smooth),visibility 0s linear .28s;
}
.preview-overlay.open{
  opacity:1;visibility:visible;
  transition:opacity .28s var(--ease-smooth),visibility 0s linear 0s;
}

/* Drop overlay */
.drop-overlay{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-smooth),visibility 0s linear .2s;
}
.drop-overlay.active{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .2s var(--ease-smooth),visibility 0s linear 0s;
}

/* Model dropdown — slide down */
.model-dropdown{
  opacity:0;
  transform:translateY(-6px) scale(.97);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth),visibility 0s linear .18s;
  display:block !important;
}
.model-dropdown.open{
  opacity:1;
  transform:translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s var(--ease-smooth),transform .2s var(--ease-smooth),visibility 0s linear 0s;
}

/* Floating controls appear on load */
.floating-controls{
  will-change:left,top;
}

/* New task buttons fade out gently — NOT pointer-events:none but visually same */
body.in-new-task #newTaskBtn,
body.in-new-task #fltNewBtn{
  opacity:1;
  pointer-events:none;
  cursor:default;
  transition:opacity .3s var(--ease-smooth) !important;
}

/* Message actions row fade */
.msg-actions{
  animation:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .22s var(--ease-smooth) .05s,transform .22s var(--ease-smooth) .05s;
}
.msg-actions.actions-visible{
  opacity:1;
  transform:translateY(0);
}

/* Edit floating btn — smooth.
   The button is ALWAYS interactive (pointer-events:auto) but invisible
   (opacity:0) when not hovered, with an enlarged transparent hit area via
   a ::before pseudo-element. This lets the user hover the icon's own slot
   and have the icon appear/stay visible — fixing the bug where hovering
   just the icon caused it to vanish (since pointer-events:none meant the
   icon could never receive hover). */
.msg-edit-floating{
  position:absolute;left:-38px;top:50%;transform:translateY(-50%) scale(.88);
  opacity:0;pointer-events:auto;
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth);
  z-index:10;
}
.msg-edit-floating::before{
  content:"";position:absolute;inset:-10px -14px -10px -18px;border-radius:50%;
  background:transparent;
}
/* Show when hovering the message OR the button zone itself */
.message.user:hover .msg-edit-floating,
.message.user.editing .msg-edit-floating,
.msg-edit-floating:hover,
.msg-edit-floating:focus-visible{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

/* Redo button — shown on agent message hover */
.msg-action-btn.redo-btn{
  opacity:0;pointer-events:none;
  transition:opacity .18s var(--ease-smooth),background var(--transition-fast),color var(--transition-fast),transform .22s var(--ease-spring),box-shadow var(--transition-fast),border-color var(--transition-fast);
}
.message.agent:hover .msg-action-btn.redo-btn,
.msg-actions:hover .msg-action-btn.redo-btn{
  opacity:1;pointer-events:auto;
}

/* Typing indicator */
.typing-indicator{animation:none}

/* Smooth task card delete hover */
.task-card-delete{
  opacity:0;
  transform:scale(.8);
  transition:opacity .15s var(--ease-smooth),transform .15s var(--ease-smooth),background var(--transition-fast),color var(--transition-fast) !important;
}
.task-card:hover .task-card-delete,
.task-card.active-card .task-card-delete{
  opacity:1;transform:scale(1);
}

/* Sidebar & panel slide — gentler, longer for a silkier toggle feel. */
.sidebar-left,.panel-right{
  will-change:margin,opacity;
  transition:
    margin .46s var(--ease-gentle),
    min-width .46s var(--ease-gentle),
    opacity .42s var(--ease-gentle),
    background-color .3s var(--ease-smooth) !important;
}

/* Floating controls shadow on hover */
.floating-controls{
  transition:
    box-shadow .3s var(--ease-smooth),
    left .55s var(--ease-snap),
    top .55s var(--ease-snap),
    background-color .3s var(--ease-smooth) !important;
}
.floating-controls.dragging{
  transition:box-shadow .2s !important;
}


/* File chips inside user message bubble */
.user-file-chips{margin-bottom:6px}
.user-file-chip{background:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.92)!important;border-color:rgba(255,255,255,.22)!important}
.user-file-chip .icon{color:rgba(255,255,255,.8)}


/* ── Integration Settings window (rebuilt) ── */
.iw-actions-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--divider);background:transparent;position:sticky;top:0;z-index:2;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);background:var(--window-header-bg)}
.iw-add-input{flex:1;background:var(--bg-surface);border:1px solid var(--border-input);border-radius:10px;padding:7px 12px;color:var(--text-primary);font-size:.82rem;outline:0;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-width:0}
.iw-add-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,148,136,.07)}
.iw-add-btn{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:7px 14px;font-size:.78rem;font-weight:700;cursor:pointer;transition:background var(--transition-fast),transform .18s var(--ease-spring);flex-shrink:0}
.iw-add-btn:hover{background:var(--accent-hover)}
.iw-add-btn:active{transform:scale(.96)}
.iw-list{display:flex;flex-direction:column;gap:4px;padding:10px 10px 14px}
.iw-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;background:var(--bg-surface);border:1px solid var(--border-subtle);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform .22s var(--ease-gentle),opacity .22s var(--ease-smooth)}
.iw-item:hover{background:var(--bg-surface-hover);border-color:var(--border-strong)}
.iw-item.dragging{opacity:.55;transform:scale(.98);box-shadow:0 12px 28px -14px rgba(0,0,0,.30)}
.iw-item.drop-target{border-color:var(--accent);background:var(--bg-surface-selected);box-shadow:0 0 0 2px rgba(13,148,136,.18)}
.iw-grip{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-tertiary);cursor:grab;flex-shrink:0;border-radius:6px;transition:background var(--transition-fast),color var(--transition-fast)}
.iw-grip:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.iw-grip:active{cursor:grabbing}
.iw-grip .icon{width:14px;height:14px}
.iw-name{flex:1;font-size:.85rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.iw-remove{width:26px;height:26px;border-radius:8px;background:transparent;border:0;color:var(--text-tertiary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}
.iw-remove:hover{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-border)}
.iw-remove .icon{width:13px;height:13px}
.iw-empty{padding:30px 16px;text-align:center;color:var(--text-tertiary);font-size:.8rem;font-style:italic}


/* Login mode tabs — subtle hover state */
#loginTabSignIn,#loginTabSignUp{transition:background .3s var(--ease-gentle),color .3s var(--ease-gentle)}

/* ── Sign In ↔ Sign Up field reveal ──
   Uses the modern `grid-template-rows: 0fr → 1fr` pattern: the OUTER
   wrapper is a CSS Grid with a single row that animates from `0fr`
   (zero height) to `1fr` (auto-content height).  The INNER child has
   `min-height:0; overflow:hidden` so the row clips its content cleanly
   during the animation.  This avoids every known artifact of
   max-height-based reveals (sub-pixel rendering glitches, label/input
   overlap with adjacent fields, gap miscalculations). */
#loginNameField,#loginConfirmField{
  display:grid !important;
  grid-template-rows:0fr;
  opacity:0;
  transform:translateY(-4px);
  margin-top:-7px;margin-bottom:-7px; /* cancel parent flex gap when hidden */
  will-change:grid-template-rows,opacity,transform,margin-block;
  transition:
    grid-template-rows .45s var(--ease-gentle),
    opacity .35s var(--ease-gentle),
    transform .45s var(--ease-gentle),
    margin-block .45s var(--ease-gentle);
  pointer-events:none;
}
#loginNameField.field-visible,#loginConfirmField.field-visible{
  grid-template-rows:1fr;
  opacity:1;
  transform:translateY(0);
  margin-top:0;margin-bottom:0;
  pointer-events:auto;
}
/* The inner wrapper clips content as the grid row animates. */
#loginNameField > .login-field-inner,
#loginConfirmField > .login-field-inner{
  min-height:0;
  overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
}

/* ────────────────────────────────────────────────────────────
   Settings window — dual-page system (list ↔ login subpage)
   The Settings window now hosts two stacked "pages": the main
   Settings list and an inline Sign-In / Sign-Up form. Switching
   between them is a gentle slide+fade — never a window swap —
   so the perceived motion is one continuous gesture inside one
   container (iOS Settings pattern).
   ──────────────────────────────────────────────────────────── */
.settings-fw-body{position:relative;overflow:hidden}
.settings-page{
  will-change:transform,opacity;
  transition:
    transform .42s var(--ease-gentle),
    opacity .32s var(--ease-gentle);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Page #1: the settings list. Visible by default. */
#settingsPageMain{transform:translateX(0);opacity:1}
/* Page #2: the login subpage. Lives stacked over the list. */
#settingsPageLogin{
  position:absolute;inset:0;
  overflow-y:auto;
  padding:20px 18px;
  display:flex;flex-direction:column;gap:14px;
  transform:translateX(28px);
  opacity:0;
  pointer-events:none;
}
/* Page #3: the Integration Settings subpage — same stacked pattern. */
#settingsPageIntegrations{
  position:absolute;inset:0;
  overflow-y:auto;
  transform:translateX(28px);
  opacity:0;
  pointer-events:none;
  display:flex;flex-direction:column;
}
/* When the settings window is showing the login subpage: */
.settings-window.show-login #settingsPageMain{
  transform:translateX(-28px);
  opacity:0;
  pointer-events:none;
}
.settings-window.show-login #settingsPageLogin{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
/* When the settings window is showing the integrations subpage: */
.settings-window.show-integrations #settingsPageMain{
  transform:translateX(-28px);
  opacity:0;
  pointer-events:none;
}
.settings-window.show-integrations #settingsPageIntegrations{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

/* Back-arrow in the Settings header — only visible on the login page. */
.settings-back-btn{
  width:30px;height:30px;border-radius:50%;background:transparent;border:0;
  color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;margin-right:2px;
  opacity:0;transform:translateX(-6px) scale(.9);pointer-events:none;
  transition:
    opacity .3s var(--ease-gentle),
    transform .42s var(--ease-gentle),
    background var(--transition-fast),
    color var(--transition-fast);
}
.settings-back-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}
.settings-back-btn .icon{width:16px;height:16px}
.settings-window.show-login .settings-back-btn,
.settings-window.show-integrations .settings-back-btn{
  opacity:1;transform:translateX(0) scale(1);pointer-events:auto;
}

/* The settings title is swapped (Settings ↔ Sign In/Sign Up) with a
   small crossfade so the header reads correctly for the current page. */
#settingsFwHeader .settings-fw-title{
  transition:opacity .26s var(--ease-gentle);
}

/* Gentle motion language for the Settings window. */
.settings-window{
  transform-origin:center center;
}

/* Make sure floating windows are truly responsive on mobile. The existing
   mobile media query already turns them fullscreen — reinforce that the
   inner scroll area can scroll, the header buttons stay reachable, and
   sticky bars (like the iw-actions-bar) work on tiny screens. */
@media(max-width:768px){
  .settings-window{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    border-radius:0 !important;
    top:0 !important;left:0 !important;
    transform:none !important;
    transition:opacity .5s var(--ease-gentle),transform .5s var(--ease-gentle),visibility 0s linear .5s,background-color .3s var(--ease-smooth) !important;
  }
  .settings-window.sw-open{
    transform:none !important;
  }
  .settings-fw-header{cursor:default !important}
  .settings-fw-body{padding-bottom:calc(20px + var(--safe-bottom))}
  .iw-actions-bar{padding:10px 12px}
  .iw-add-input{font-size:16px} /* prevent iOS zoom-on-focus */
  .iw-list{padding:10px 8px 14px}
}

/* Mid-size screens (tablet portrait): make windows a sensible size */
@media(min-width:769px) and (max-width:900px){
  .settings-window{
    width:min(90vw,560px);
  }
}


/* ───────────────────────────────────────────────────────────────
   TOUCH / POINTER:COARSE usability overrides
   Devices without hover (phones, tablets, drawing tablets) need
   persistent visibility for affordances normally revealed on hover.
   ─────────────────────────────────────────────────────────────── */
@media (hover:none) and (pointer:coarse){
  /* Inline edit pencil on user messages — always visible, slightly
     softer than its hover state, so the user can ALWAYS tap to edit. */
  .msg-edit-floating{
    opacity:.85 !important;
    transform:translateY(-50%) scale(1) !important;
    pointer-events:auto !important;
  }
  .msg-edit-floating:active{
    opacity:1 !important;
    transform:translateY(-50%) scale(.94) !important;
  }
  /* Task-card delete × on the All-Tasks window — always visible
     on touch so users don't need to tap-to-activate just to delete. */
  .task-card-delete{
    display:inline-flex !important;
    opacity:.85 !important;
    transform:scale(1) !important;
  }
  .task-card-delete:active{opacity:1 !important;transform:scale(.92) !important}
  /* Redo button on the latest agent message — always visible on touch
     (same hover-only problem). */
  .msg-action-btn.redo-btn{opacity:1 !important;pointer-events:auto !important}
  /* New-task delete cross in the sidebar task list — always visible. */
  .task-delete{opacity:.85 !important}
  .task-delete:active{opacity:1 !important}
}

/* ───────────────────────────────────────────────────────────────
   MINOR: hide the input-reset (dock) button when the input is
   already docked. It's only meaningful while the input is floating
   — showing it when there's nothing to reset is just visual noise.
   ─────────────────────────────────────────────────────────────── */
.input-wrapper:not(.floating-input) .input-reset-btn{
  display:none !important;
}

/* ════════════════════════════════════════════════════════════════
   GUIDED TOUR — merged from tour.css
   Loaded once on the unified page; activated by URL hash #tour
   or by clicking 'Take the Tour' in Settings.
   ════════════════════════════════════════════════════════════════ */

/* The "Restart tour" / "Exit to console" launcher row in Settings. */
.tour-launch-btn{color:var(--accent);font-weight:700}
.tour-launch-btn:hover{background:rgba(13,148,136,.075);color:var(--accent-hover)}

/* ── Tour root: SVG mask + glow ring + pulse + card ───────────────── */
.tour-root{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease-smooth),visibility 0s linear .28s;
}
.tour-root.active{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .28s var(--ease-smooth);
}
.tour-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto}
.tour-svg rect.tour-mask-window{
  transition:
    x .42s var(--ease-out-expo),
    y .42s var(--ease-out-expo),
    width .42s var(--ease-out-expo),
    height .42s var(--ease-out-expo),
    rx .3s var(--ease-out-expo);
}
.tour-svg rect.tour-bg{fill:rgba(8,8,7,.62)}
[data-theme="light"] .tour-svg rect.tour-bg{fill:rgba(20,20,19,.46)}
.tour-svg rect.tour-glow{
  fill:none;stroke:var(--accent);stroke-width:2;opacity:.85;
  transition:
    x .42s var(--ease-out-expo),
    y .42s var(--ease-out-expo),
    width .42s var(--ease-out-expo),
    height .42s var(--ease-out-expo),
    rx .3s var(--ease-out-expo);
  filter:drop-shadow(0 0 12px rgba(13,148,136,.55));
}

/* ── The step card ─────────────────────────────────────────────────── */
.tour-card{
  position:absolute;
  width:min(380px,calc(100vw - 24px));
  background:var(--bg-glass-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:18px 18px 14px;
  box-shadow:var(--shadow-window);
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:
    transform .34s var(--ease-out-expo),
    opacity .28s var(--ease-out-expo),
    left .42s var(--ease-out-expo),
    top .42s var(--ease-out-expo);
  pointer-events:auto;
  z-index:9020;
  will-change:left,top,transform,opacity;
}
.tour-card.shown{transform:translateY(0) scale(1);opacity:1}
/* Arrow pointing toward the highlighted element. */
.tour-card::before{
  content:"";
  position:absolute;
  width:14px;height:14px;
  background:var(--bg-glass-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  border:1px solid var(--border-strong);
  transform:rotate(45deg);
}
.tour-card.arrow-top::before   {top:-8px;left:calc(var(--arrow-x,50%) - 7px);border-right:0;border-bottom:0}
.tour-card.arrow-bottom::before{bottom:-8px;left:calc(var(--arrow-x,50%) - 7px);border-left:0;border-top:0}
.tour-card.arrow-left::before  {left:-8px;top:calc(var(--arrow-y,50%) - 7px);border-right:0;border-top:0}
.tour-card.arrow-right::before {right:-8px;top:calc(var(--arrow-y,50%) - 7px);border-left:0;border-bottom:0}
.tour-card.arrow-none::before  {display:none}

.tour-eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.tour-eyebrow::before{
  content:"";width:14px;height:1px;background:var(--accent);display:block;
}
.tour-title{
  font-family:var(--font-serif);font-weight:400;font-size:1.35rem;line-height:1.2;
  letter-spacing:-.01em;margin-bottom:8px;color:var(--text-primary);
}
.tour-body{
  font-size:.84rem;line-height:1.55;color:var(--text-secondary);margin-bottom:14px;
}
.tour-body strong{color:var(--text-primary);font-weight:700}
.tour-body code{
  font-family:var(--font-mono);font-size:.78em;
  background:var(--bg-surface);padding:1px 5px;border-radius:5px;color:var(--text-primary);
}

.tour-actions{display:flex;align-items:center;gap:8px}
.tour-progress{
  flex:1;display:flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;color:var(--text-tertiary);font-family:var(--font-mono);
}
.tour-progress-bar{
  flex:1;height:3px;border-radius:999px;
  background:var(--bg-surface-hover);overflow:hidden;min-width:50px;
}
.tour-progress-bar > span{
  display:block;height:100%;
  background:linear-gradient(to right,var(--accent),var(--accent-light));
  border-radius:999px;transition:width .4s var(--ease-out-expo);
}

.tour-btn{
  border:1px solid var(--border-strong);
  background:var(--bg-surface);
  color:var(--text-secondary);
  border-radius:10px;
  padding:7px 14px;
  font-size:.78rem;font-weight:700;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.tour-btn:hover{background:var(--bg-surface-hover);transform:translateY(-1px)}
.tour-btn.primary{
  background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 8px 22px -12px rgba(13,148,136,.65);
}
.tour-btn.primary:hover{background:var(--accent-hover)}
.tour-btn.ghost{background:transparent;border-color:transparent;color:var(--text-tertiary)}
.tour-btn.ghost:hover{color:var(--text-secondary);background:var(--bg-surface-hover)}
.tour-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ── Pulse ring around the highlighted target ─────────────────────── */
.tour-pulse-ring{
  position:absolute;pointer-events:none;z-index:1;
  border-radius:14px;border:2px solid var(--accent);
  box-shadow:0 0 0 0 rgba(13,148,136,.42);
  animation:tourPulse 1.8s var(--ease-smooth) infinite;
  transition:
    left .42s var(--ease-out-expo),
    top .42s var(--ease-out-expo),
    width .42s var(--ease-out-expo),
    height .42s var(--ease-out-expo),
    border-radius .3s var(--ease-out-expo);
  opacity:0;
}
.tour-pulse-ring.on{opacity:1}
@keyframes tourPulse{
  0%{box-shadow:0 0 0 0 rgba(13,148,136,.42)}
  70%{box-shadow:0 0 0 14px rgba(13,148,136,0)}
  100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}
}

/* ── Welcome / Finish modal ───────────────────────────────────────── */
.tour-modal-backdrop{
  position:fixed;inset:0;z-index:9100;
  background:rgba(8,8,7,.58);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease-smooth),visibility 0s linear .3s;
}
.tour-modal-backdrop.open{
  opacity:1;visibility:visible;
  transition:opacity .3s var(--ease-smooth);
}
.tour-modal{
  position:relative;
  width:min(440px,calc(100vw - 24px));
  background:var(--bg-glass-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  padding:32px 28px 24px;
  box-shadow:var(--shadow-window);
  text-align:center;
  overflow:hidden;
  transform:scale(.96) translateY(10px);
  opacity:0;
  transition:transform .42s var(--ease-out-expo),opacity .34s var(--ease-out-expo);
}
.tour-modal-backdrop.open .tour-modal{transform:scale(1) translateY(0);opacity:1}
.tour-modal::before,
.tour-modal::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.28;pointer-events:none;
}
.tour-modal::before{width:200px;height:200px;top:-80px;left:-60px;background:var(--shape-color-1)}
.tour-modal::after{width:220px;height:220px;bottom:-90px;right:-70px;background:var(--shape-color-2)}
.tour-modal > *{position:relative;z-index:1}
.tour-modal-eyebrow{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.tour-modal h2{
  font-family:var(--font-serif);font-weight:400;font-size:1.85rem;
  line-height:1.15;letter-spacing:-.01em;margin-bottom:10px;
  color:var(--text-primary);
}
.tour-modal p{
  font-size:.92rem;color:var(--text-secondary);line-height:1.6;margin-bottom:20px;
  max-width:380px;margin-left:auto;margin-right:auto;
}
.tour-modal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.tour-modal .tour-btn{padding:10px 20px;font-size:.85rem}

/* ── Click burst (visual confirmation of an auto-click) ───────────── */
.tour-click-burst{
  position:absolute;pointer-events:none;
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);opacity:.35;
  transform:translate(-50%,-50%) scale(0);z-index:9050;
  animation:clickBurst .6s var(--ease-out-expo) forwards;
}
@keyframes clickBurst{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.45}
  60%{opacity:.25}
  100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

/* ── Mobile tweaks ────────────────────────────────────────────────── */
@media (max-width:520px){
  .tour-card{width:calc(100vw - 24px);max-width:380px;padding:14px 14px 12px}
  .tour-title{font-size:1.15rem}
  .tour-modal h2{font-size:1.45rem}
  .tour-modal{padding:24px 20px 18px}
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .tour-pulse-ring{animation:none}
  .tour-svg rect.tour-mask-window,
  .tour-svg rect.tour-glow,
  .tour-pulse-ring{transition:none}
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║  In-window Code Editor (Ace integration + plain-textarea
   ║  fallback). The editor LIVES INSIDE the existing .fw-body so
   ║  the floating-window chrome (drag, resize, max, close) is
   ║  completely untouched.
   ╚════════════════════════════════════════════════════════════════╝ */
.fw-body.editor-mode{
  padding:0 !important;
  margin-bottom:0 !important;
  /* The default .fw-body reserves 38px at the bottom for the resize
     handle. The editor takes the whole body instead — the resize handle
     is a small circular control that floats above the bottom-right
     corner of the editor without obscuring code. */
  overflow:hidden;
}
.fw-editor-host{
  position:absolute;inset:0;
  /* No bottom inset — the editor fills the full height of the body so
     the user can scroll to the very last line without it being cut off. */
}
.fw-editor-host > .ace_editor,
.fw-editor-host > .cyrkil-plain-editor{
  position:absolute;inset:0;
  font-family:var(--font-mono) !important;
  font-size:13px !important;
  line-height:1.55 !important;
  background:transparent !important;
}
/* Plain-textarea fallback (no CDN). Keeps the same monospace look. */
.cyrkil-plain-editor{
  width:100%;height:100%;
  resize:none;
  border:0;outline:0;
  padding:14px 16px;
  background:var(--bg-card);
  color:var(--text-primary);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.55;
  white-space:pre;
  overflow:auto;
  tab-size:2;
  caret-color:var(--accent);
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
}

/* The header gets two extra buttons (save, undo) when the file is editable. */
.fw-btn.fw-save.dirty{
  color:var(--accent);
  background:rgba(13,148,136,.10);
  box-shadow:inset 0 0 0 1px rgba(13,148,136,.22);
}
.fw-btn.fw-save.saved{
  color:var(--success);
  background:var(--success-soft);
  box-shadow:inset 0 0 0 1px var(--success-border);
  animation:saveFlash .55s var(--ease-spring);
}
@keyframes saveFlash{
  0%{transform:scale(1)}
  40%{transform:scale(1.15)}
  100%{transform:scale(1)}
}

/* A tiny "modified" dot on the window title so the user knows when the
   buffer has unsaved changes. */
.fw-title .fw-dirty-dot{
  display:none;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  margin-left:6px;
  box-shadow:0 0 0 2px rgba(13,148,136,.18);
}
.float-window[data-dirty="1"] .fw-title .fw-dirty-dot{display:inline-block}

/* Ace tweaks — match the rest of the GUI's color palette. */
.ace_editor{
  background:transparent !important;
}
.ace_editor .ace_gutter{
  background:rgba(20,20,19,.04) !important;
  color:var(--text-tertiary) !important;
}
[data-theme="dark"] .ace_editor .ace_gutter{
  background:rgba(255,255,255,.04) !important;
}
.ace_editor .ace_cursor{
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}
.ace_editor .ace_marker-layer .ace_selection{
  background:rgba(13,148,136,.18) !important;
}
.ace_editor .ace_active-line{
  background:rgba(13,148,136,.06) !important;
}
[data-theme="dark"] .ace_editor .ace_active-line{
  background:rgba(13,148,136,.10) !important;
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  "Download all" button in the right-panel Files section header.
   ╚════════════════════════════════════════════════════════════════╝ */
#sectionFiles .panel-section-header .section-action-row{
  display:flex;align-items:center;gap:6px;
}
.section-action-btn.download-all-btn{
  width:22px;height:22px;border-radius:7px;
  background:transparent;border:0;
  color:var(--text-tertiary);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast),transform .2s var(--ease-spring);
}
.section-action-btn.download-all-btn:hover{
  background:var(--bg-surface-hover);color:var(--accent);
}
.section-action-btn.download-all-btn:active{transform:scale(.9)}
.section-action-btn.download-all-btn .icon{width:13px;height:13px}
.section-action-btn.download-all-btn:disabled{
  opacity:.35;cursor:not-allowed;
}
.section-action-btn.download-all-btn:disabled:hover{
  background:transparent;color:var(--text-tertiary);
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  File-window run-output pane + file-tree capability badges     ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* Output pane lives at the bottom of .fw-body for runnable files. */
.fw-output {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 45%;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 22px -12px rgba(0,0,0,.20);
  z-index: 4;
  animation: outputSlide .25s var(--ease-gentle);
}
@keyframes outputSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fw-output-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--divider);
  background: var(--window-header-bg);
  backdrop-filter: blur(10px);
}
.fw-output-title {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-tertiary);
}
.fw-output-status {
  flex: 1;
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--accent); font-weight: 600;
}
.fw-output-clear {
  width: 22px; height: 22px; border: 0; background: transparent;
  color: var(--text-tertiary); border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.fw-output-clear:hover {
  background: var(--danger-soft); color: var(--danger);
}
.fw-output-clear .icon { width: 11px; height: 11px; }

.fw-output-body {
  flex: 1; overflow-y: auto; padding: 8px 12px 10px;
  font-family: var(--font-mono); font-size: .73rem; line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.fw-output-line {
  margin: 1px 0;
  padding: 1px 0;
  font-family: var(--font-mono);
}
.fw-output-line.stdout { color: var(--text-primary); }
.fw-output-line.stderr { color: #f59e0b; }   /* warm amber */
.fw-output-line.error  {
  color: var(--danger);
  background: var(--danger-soft);
  border-left: 2px solid var(--danger);
  padding-left: 6px;
  margin: 4px 0;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
}
.fw-output-line.info {
  color: var(--text-tertiary); font-style: italic;
}

/* SQL result table */
.fw-output-table-wrap { margin: 6px 0; overflow-x: auto; }
.fw-output-table {
  border-collapse: collapse;
  font-family: var(--font-mono); font-size: .72rem;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.fw-output-table th, .fw-output-table td {
  padding: 5px 10px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.fw-output-table th {
  background: var(--bg-surface-hover);
  font-weight: 700;
  color: var(--accent);
  text-transform: none;
  font-size: .7rem;
}
.fw-output-table td.null {
  color: var(--text-tertiary); font-style: italic;
}
.fw-output-table tr:hover td { background: var(--bg-surface-hover); }

/* Run button (▶) gets a spin while running. */
.fw-btn.fw-run {
  color: var(--accent);
}
.fw-btn.fw-run:hover {
  background: rgba(13,148,136,.12);
}
.fw-btn.fw-run.running {
  color: var(--accent);
  background: rgba(13,148,136,.18);
  animation: runPulse 1.2s var(--ease-smooth) infinite;
  pointer-events: none;
}
@keyframes runPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(13,148,136,.35); }
  50%     { box-shadow: 0 0 0 6px rgba(13,148,136,0);  }
}

/* File-tree capability badges (RUN / WEB / MD) — tiny inline pills. */
.tree-cap {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
  line-height: 1.4;
}
.tree-cap.can-run {
  background: rgba(13,148,136,.14);
  color: var(--accent);
  border: 1px solid rgba(13,148,136,.30);
}
.tree-cap.can-render {
  background: rgba(124,58,237,.12);
  color: var(--accent-prismo);
  border: 1px solid rgba(124,58,237,.28);
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  Streaming chat-bubble chips + refresh button + extra badges    ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* "Writing root/x.js …" chip while the model is streaming the file body.
   Looks like a normal file chip but with a pulsing dot + italic state. */
.tool-inline.is-writing {
  font-style: italic;
  opacity: .82;
  cursor: default;
  pointer-events: none;
}
.tool-inline.is-writing .writing-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  animation: writingPulse 1s var(--ease-smooth) infinite;
}
.tool-inline.is-writing .writing-meta {
  margin-left: 2px;
  opacity: .65;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .85em;
}
@keyframes writingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Refresh button pulse confirmation. */
.fw-btn.fw-refresh {
  color: var(--text-secondary);
}
.fw-btn.fw-refresh:hover {
  color: var(--accent);
  background: rgba(13,148,136,.10);
}
.fw-btn.fw-refresh.pulsed {
  animation: refreshFlash .55s var(--ease-spring);
  color: var(--accent);
}
@keyframes refreshFlash {
  0%   { transform: rotate(0)   scale(1); }
  60%  { transform: rotate(360deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Tree badge colors per FileCapability.kind:
     can-run    → teal (already exists, kept here for completeness)
     can-render → purple (existed)
     view-only  → neutral grey (NEW)
     forbidden  → amber/red warning (NEW)
*/
.tree-cap.view-only {
  background: rgba(20, 20, 19, .06);
  color: var(--text-tertiary);
  border: 1px solid var(--border-strong);
}
[data-theme="dark"] .tree-cap.view-only {
  background: rgba(255, 255, 255, .06);
  color: var(--text-tertiary);
  border-color: rgba(255, 255, 255, .12);
}
.tree-cap.forbidden {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  font-weight: 800;
}
.tree-cap.forbidden::before {
  content: "⚠ ";
  margin-right: 1px;
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  Terminal mode for runnable file windows                        ║
   ║  When the user clicks Run, the body switches into terminal mode:║
   ║  the output pane fills the entire body and the editor is hidden.║
   ║  A back-arrow in the output pane header returns to the editor.  ║
   ╚════════════════════════════════════════════════════════════════╝ */
.fw-body.editor-mode.fw-body-terminal .fw-editor-host {
  display: none;
}
.fw-body.editor-mode.fw-body-terminal .fw-output {
  position: absolute;
  inset: 0;
  max-height: none;
  border-top: 0;
  box-shadow: none;
  animation: none;
}

/* The back-arrow button at the left of the output header. */
.fw-output-back {
  width: 22px; height: 22px; border: 0; background: transparent;
  color: var(--text-secondary); border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), transform .2s var(--ease-spring);
}
.fw-output-back:hover {
  background: var(--bg-surface-hover);
  color: var(--accent);
  transform: translateX(-2px);
}
.fw-output-back .icon { width: 14px; height: 14px; }


/* ╔════════════════════════════════════════════════════════════════╗
   ║  Per-row delete button (Files / Uploads).                       ║
   ║  Same UX as task-card delete: trash icon, hover-revealed on     ║
   ║  desktop, always-visible on touch. Two-click confirm: first     ║
   ║  click arms (turns red + tooltip "Click again to confirm"),     ║
   ║  second click actually deletes.                                 ║
   ╚════════════════════════════════════════════════════════════════╝ */
.row-delete-btn {
  width: 24px; height: 24px;
  margin-left: 4px; flex-shrink: 0;
  background: transparent; border: 0;
  color: var(--text-tertiary);
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0;                /* hidden until row hover */
  transform: scale(.85);
  transition:
    opacity .18s var(--ease-smooth),
    transform .18s var(--ease-spring),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.row-delete-btn .icon { width: 11px; height: 11px; }
/* Show on row hover (Files tree + Uploads list). */
.tree-row.file-row:hover .row-delete-btn,
.panel-item:hover .row-delete-btn {
  opacity: 1; transform: scale(1);
}
.row-delete-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}
/* Always visible on touch devices (no hover). */
@media (hover: none) and (pointer: coarse) {
  .row-delete-btn { opacity: .85 !important; transform: scale(1) !important; }
  .row-delete-btn:active { opacity: 1 !important; }
}

/* Inline "click again to confirm" state. Same visual pattern as a
   classic destructive button: red bg + slight grow, with a subtle
   pulse to draw attention. */
.row-delete-btn.confirming {
  opacity: 1 !important;
  background: var(--danger);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px var(--danger),
    0 0 0 0 rgba(239, 68, 68, .42);
  animation: confirmPulse 1.4s var(--ease-smooth) infinite;
}
.row-delete-btn.confirming::after {
  content: "?";
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  margin-left: 1px;
  margin-right: 1px;
}
.row-delete-btn.confirming .icon { display: none; }
@keyframes confirmPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 0 rgba(239,68,68,.42); }
  60%      { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 6px rgba(239,68,68,0); }
}

/* The tree-row currently uses padding-left for indent + display:flex,
   but the row's children are: <icon> <info> <badge> <delete-btn?>.
   The delete button should sit at the right edge. Push the existing
   `.item-badge` slightly left so the delete button has room. */
.tree-row.file-row {
  position: relative;
}
.tree-row.file-row .row-delete-btn {
  margin-left: 4px;
}
.panel-item .row-delete-btn {
  margin-left: auto;          /* push to the right edge of the row */
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  SW status dot + Files pop-out button + confirm hint           ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* SW status: tiny coloured dot showing whether the Service Worker is
   live. Green = active (HTML previews work), amber = inactive (file://
   or browser without SW support). */
.sw-status-dot {
  width: 22px; height: 22px; border-radius: 7px;
  background: transparent; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
  transition: background var(--transition-fast);
}
.sw-status-dot:hover { background: var(--bg-surface-hover); }
.sw-status-dot .sw-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary);
  transition: background .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}
.sw-status-dot.sw-ok .sw-dot {
  background: #34d399;                /* same green as integration dots */
  box-shadow: 0 0 8px rgba(52, 211, 153, .55);
}
.sw-status-dot.sw-bad .sw-dot {
  background: #f59e0b;                /* warm amber */
  box-shadow: 0 0 8px rgba(245, 158, 11, .55);
  animation: swBadPulse 2.4s var(--ease-smooth) infinite;
}
@keyframes swBadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* "Open Files in a window" button next to the count badge. */
.files-popout-btn {
  width: 22px; height: 22px; border-radius: 7px;
  background: transparent; border: 0; color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition-fast);
}
.files-popout-btn:hover {
  background: var(--bg-surface-hover); color: var(--accent);
}
.files-popout-btn .icon { width: 13px; height: 13px; }


/* Inline "Click again to delete" floating hint (shown next to a
   .row-delete-btn the moment it's armed). */
.confirm-hint {
  background: var(--bg-glass-window);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 8px;
  box-shadow: 0 8px 20px -10px rgba(239, 68, 68, .45);
  white-space: nowrap;
  will-change: opacity;
}
[data-theme="dark"] .confirm-hint {
  background: rgba(40, 40, 38, .92);
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║  Files pop-out window (file-manager view)                       ║
   ╚════════════════════════════════════════════════════════════════╝ */
.float-window.files-popout .fw-body.files-window-body {
  /* Override the default fw-body styling: this body has its own
     padding + scrolling for the file-manager list. */
  padding: 0 !important;
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
  margin-bottom: 38px;          /* room for the corner resize handle */
}
.files-window-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--divider);
  background: var(--window-header-bg);
  backdrop-filter: blur(12px);
  font-size: .72rem; font-weight: 700; color: var(--text-tertiary);
}
.files-window-count {
  font-family: var(--font-mono);
  color: var(--accent);
}
.files-window-list {
  flex: 1; overflow-y: auto;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.files-window-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
  font-size: .82rem;
  line-height: 1.6;
}
.files-window-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid transparent;
}
.files-window-row:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-subtle);
}
.files-window-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--bg-surface-hover);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .65rem; font-weight: 800;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.files-window-info { flex: 1; min-width: 0; }
.files-window-name {
  font-weight: 700; font-size: .87rem;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-window-meta {
  font-size: .68rem; font-family: var(--font-mono);
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-window-action {
  width: 30px; height: 30px;
  border: 0; background: transparent;
  color: var(--text-tertiary); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition-fast);
}
.files-window-action .icon { width: 14px; height: 14px; }
.files-window-action:hover {
  background: var(--bg-surface-hover);
  color: var(--accent);
}
.files-window-action.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}
.files-window-action.confirming {
  background: var(--danger);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--danger);
  animation: confirmPulse 1.4s var(--ease-smooth) infinite;
}
.files-window-action.confirming::after {
  content: "?";
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 800;
}
.files-window-action.confirming .icon { display: none; }

/* The window's refresh button gets the same pulse animation as the
   in-editor refresh button. */
.fw-btn.fw-files-refresh.pulsed {
  animation: refreshFlash .55s var(--ease-spring);
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════
   Production refinement pass — spacious agent canvas, Finder-like
   file manager pop-out, and in-window run/output tabs.
   ════════════════════════════════════════════════════════════════ */

/* Agent responses are page content, not assistant chat bubbles. User
   messages remain bubbles, but model output becomes a clean document-like
   canvas that expands/shrinks with the available main area. */
.chat-area{
  scroll-padding-bottom:24px;
}
.chat-inner{
  max-width:min(1080px,100%);
  width:100%;
}
.message.agent{
  align-self:stretch;
  width:100%;
  max-width:100%;
  gap:0;
  padding:4px clamp(2px,1.2vw,18px);
}
.message.agent .avatar-dot,
.message.agent .bubble-label{
  display:none !important;
}
.message.agent .bubble-wrap{
  width:100%;
  max-width:100%;
}
.message.agent .bubble{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.message.agent .bubble::before,
.message.agent .bubble::after{
  display:none !important;
}
.message.agent .markdown-render{
  max-width:none;
  margin:0;
  font-size:.92rem;
  line-height:1.7;
}
.message.agent .markdown-render p:first-child,
.message.agent .markdown-render h1:first-child,
.message.agent .markdown-render h2:first-child,
.message.agent .markdown-render h3:first-child{
  margin-top:0;
}
.message.agent .tool-row,
.message.agent .msg-actions{
  margin-left:0;
}
@media(max-width:768px){
  .message.agent{padding:2px 4px;}
  .message.agent .markdown-render{font-size:.86rem;line-height:1.65;}
}

/* In-window tabs for runnable files. Terminal/plots are tabs inside the
   same code window, never random panes inserted into the editor body. */
.fw-tabbar{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:6px;
  padding:7px 10px;
  border-bottom:1px solid var(--divider);
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  overflow-x:auto;
  scrollbar-width:none;
}
[data-theme="dark"] .fw-tabbar{background:rgba(30,30,28,.22)}
.fw-tabbar::-webkit-scrollbar{display:none}
.fw-tab-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--text-tertiary);
  border-radius:999px;
  padding:5px 12px;
  font-size:.72rem;
  font-weight:800;
  white-space:nowrap;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform .2s var(--ease-spring);
}
.fw-tab-btn:hover{
  background:var(--bg-surface-hover);
  color:var(--text-primary);
}
.fw-tab-btn.active{
  background:var(--bg-surface-selected);
  color:var(--accent);
  border-color:rgba(13,148,136,.22);
}
.fw-body.editor-mode.fw-body-image .fw-editor-host,
.fw-body.editor-mode.fw-body-image .fw-output{
  display:none !important;
}
.fw-image-pane{
  position:absolute;inset:0;
  overflow:auto;
  padding:18px;
}
.fw-image-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fw-image-wrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  box-shadow:0 16px 42px -28px rgba(0,0,0,.55);
}

/* Finder-like Files pop-out: path breadcrumbs + folders + icon cards. */
.float-window.files-popout .fw-body.files-window-body{
  padding:0 !important;
  display:flex;
  flex-direction:column;
  font-family:var(--font-sans);
  margin-bottom:38px;
  overflow:hidden;
}
.files-finder-toolbar{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  border-bottom:1px solid var(--divider);
  background:var(--window-header-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  flex-shrink:0;
}
.files-nav-btn{
  width:30px;height:30px;border:1px solid var(--border-subtle);
  border-radius:10px;background:var(--bg-surface);
  color:var(--text-secondary);
  display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);
}
.files-nav-btn:hover:not(:disabled){background:var(--bg-surface-hover);color:var(--accent);border-color:rgba(13,148,136,.22)}
.files-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.files-breadcrumbs{
  min-width:0;flex:1;
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;scrollbar-width:none;
}
.files-breadcrumbs::-webkit-scrollbar{display:none}
.files-crumb{
  border:0;background:transparent;color:var(--text-primary);
  font-size:.78rem;font-weight:800;border-radius:8px;
  padding:5px 8px;white-space:nowrap;
  transition:background var(--transition-fast),color var(--transition-fast);
}
.files-crumb:hover{background:var(--bg-surface-hover);color:var(--accent)}
.files-crumb-sep{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.72rem}
.files-finder-grid{
  flex:1;overflow:auto;
  padding:16px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:14px;
  align-content:start;
}
.files-finder-card{
  position:relative;
  min-height:142px;
  border:1px solid transparent;
  border-radius:18px;
  padding:14px 12px 12px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  cursor:pointer;
  background:transparent;
  transition:background var(--transition-fast),border-color var(--transition-fast),transform .22s var(--ease-gentle),box-shadow var(--transition-fast);
}
.files-finder-card:hover,
.files-finder-card:focus-visible{
  background:var(--bg-surface-hover);
  border-color:var(--border-subtle);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -22px rgba(0,0,0,.32);
}
.files-finder-icon{
  width:54px;height:54px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-family:var(--font-mono);font-size:.72rem;font-weight:900;
}
.files-finder-icon.folder{
  color:var(--accent);
  background:linear-gradient(135deg,rgba(13,148,136,.16),rgba(20,184,166,.08));
  border:1px solid rgba(13,148,136,.20);
}
.files-finder-icon.folder .icon{width:26px;height:26px}
.files-finder-icon.file{
  color:var(--text-secondary);
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
}
.files-finder-name{
  max-width:100%;
  font-size:.82rem;
  font-weight:800;
  color:var(--text-primary);
  line-height:1.25;
  word-break:break-word;
}
.files-finder-meta,
.files-finder-path{
  max-width:100%;
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--text-tertiary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.files-finder-path{width:100%;opacity:.78}
.files-finder-actions{
  display:flex;gap:5px;margin-top:auto;
  opacity:0;transform:translateY(3px);
  transition:opacity var(--transition-fast),transform var(--transition-fast);
}
.files-finder-card:hover .files-finder-actions,
.files-finder-card:focus-within .files-finder-actions{
  opacity:1;transform:translateY(0);
}
@media (hover:none) and (pointer:coarse){
  .files-finder-actions{opacity:1;transform:none}
}

/* Follow-up refinements */
/* Model response column: still spacious and page-like, but not wall-to-wall. */
.chat-inner{
  max-width:min(900px,100%);
}
.message.agent{
  padding-left:clamp(20px,4vw,58px);
  padding-right:clamp(20px,4vw,58px);
}
.message.agent .markdown-render{
  max-width:780px;
}
@media(max-width:768px){
  .message.agent{
    padding-left:10px;
    padding-right:10px;
  }
  .message.agent .markdown-render{max-width:none;}
}

/* Closable transient tabs: Terminal / Plot tabs appear only after Run/output. */
.fw-tab-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.fw-tab-close{
  width:16px;height:16px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-tertiary);
  margin-right:-4px;
  transition:background var(--transition-fast),color var(--transition-fast),transform .18s var(--ease-spring);
}
.fw-tab-close .icon{width:10px;height:10px}
.fw-tab-close:hover{
  background:var(--danger-soft);
  color:var(--danger);
  transform:scale(1.06);
}
.fw-tab-btn.active .fw-tab-close{color:var(--accent)}
.fw-tab-btn.active .fw-tab-close:hover{color:var(--danger)}

/* Finder pop-out simplified cards + right-click context menu */
.files-finder-card.file-card{
  min-height:118px;
  justify-content:center;
}
.files-finder-card.file-card::after{
  content:"Right-click for actions";
  position:absolute;
  bottom:8px;
  left:10px;
  right:10px;
  font-size:.58rem;
  font-weight:700;
  color:var(--text-tertiary);
  opacity:0;
  transform:translateY(3px);
  transition:opacity var(--transition-fast),transform var(--transition-fast);
  pointer-events:none;
}
.files-finder-card.file-card:hover::after{
  opacity:.75;
  transform:translateY(0);
}
.files-finder-card .files-finder-path,
.files-finder-card .files-finder-actions{
  display:none !important;
}
.files-context-menu{
  position:fixed;
  z-index:9999;
  min-width:168px;
  padding:6px;
  border-radius:14px;
  background:var(--bg-glass-window);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  opacity:0;
  transform:scale(.96) translateY(4px);
  transform-origin:top left;
  transition:opacity .16s var(--ease-smooth),transform .18s var(--ease-gentle);
}
.files-context-menu.open{
  opacity:1;
  transform:scale(1) translateY(0);
}
.files-context-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text-primary);
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.8rem;
  font-weight:750;
  text-align:left;
  transition:background var(--transition-fast),color var(--transition-fast);
}
.files-context-menu button:hover{
  background:var(--bg-surface-hover);
  color:var(--accent);
}
.files-context-menu button.danger:hover{
  background:var(--danger-soft);
  color:var(--danger);
}
.files-context-menu button .icon{
  width:14px;
  height:14px;
  flex-shrink:0;
}
.files-context-sep{
  height:1px;
  background:var(--divider);
  margin:5px 4px;
}
@media (hover:none) and (pointer:coarse){
  .files-finder-card.file-card::after{
    content:"Long press / context menu for actions";
    opacity:.65;
    transform:none;
  }
}

/* Follow-up: user bubble remains, avatar aligns to message end, edit box keeps width */
.message.user{
  align-items:flex-end;
}
.message.user .avatar-dot{
  align-self:flex-end;
  margin-bottom:1px;
}
.message.user.editing .bubble-edit-wrap{
  width:var(--edit-w, auto);
  min-width:min(var(--edit-w, 220px), calc(100vw - 92px));
}
.message.user.editing .bubble-edit-textarea{
  width:100%;
}

/* Hidden edit execution statuses inside a single model response */
.hidden-edit-status{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hidden-edit-line{
  width:max-content;
  max-width:100%;
  border:1px solid var(--border-subtle);
  background:var(--bg-surface);
  color:var(--text-secondary);
  border-radius:999px;
  padding:6px 11px;
  font-size:.75rem;
  font-weight:750;
}
.hidden-edit-line.running{
  color:var(--accent);
  border-color:rgba(13,148,136,.22);
  background:rgba(13,148,136,.08);
}
.hidden-edit-line.done{
  color:var(--success);
  border-color:var(--success-border);
  background:var(--success-soft);
}
.hidden-edit-line.error{
  color:var(--danger);
  border-color:var(--danger-border);
  background:var(--danger-soft);
  border-radius:12px;
  white-space:pre-wrap;
}
.hidden-edit-line.muted{
  color:var(--text-tertiary);
  font-family:var(--font-mono);
  font-size:.68rem;
}
.hidden-edit-chip{
  pointer-events:none !important;
}

/* Redo is now a primary persistent action, not hover-only. */
.msg-action-btn.redo-btn{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Hidden edit progress is an in-response live details panel. */
details.hidden-edit-status{
  margin-top:12px;
  border:1px solid var(--border-subtle);
  background:var(--bg-surface);
  border-radius:14px;
  padding:8px 10px;
  max-width:min(680px,100%);
}
details.hidden-edit-status summary{
  cursor:pointer;
  color:var(--accent);
  font-size:.78rem;
  font-weight:850;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
details.hidden-edit-status summary::-webkit-details-marker{display:none}
details.hidden-edit-status summary::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(13,148,136,.38);
  animation:statusPulse 1.4s var(--ease-smooth) infinite;
}
@keyframes statusPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,.38)}
  60%{box-shadow:0 0 0 7px rgba(13,148,136,0)}
}
.hidden-edit-lines{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hidden-edit-final{
  margin-top:12px;
}

/* Generated files opened as dynamic tabs after code runs. */
.fw-generated-file-pane{
  position:absolute;
  inset:0;
  overflow:auto;
  padding:0;
}
.fw-generated-editor-host{
  position:absolute;
  inset:0;
}
.fw-generated-file-card{
  margin:18px;
  padding:18px;
  border-radius:16px;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  line-height:1.6;
}
.fw-generated-file-card strong{
  display:block;
  color:var(--text-primary);
  margin-bottom:6px;
}

/* Polished rate-limit / API error card — matches document-style model output. */
.response-error-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:min(680px,100%);
  padding:14px 16px;
  border-radius:18px;
  background:var(--danger-soft);
  border:1px solid var(--danger-border);
  color:var(--danger);
  box-shadow:0 14px 34px -28px rgba(239,68,68,.48);
}
.response-error-card.rate-limit{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.24);
  color:#d97706;
}
[data-theme="dark"] .response-error-card.rate-limit{color:#fbbf24}
.response-error-icon{
  width:32px;height:32px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.28);
  font-weight:900;
  flex-shrink:0;
}
.response-error-title{
  font-weight:850;
  color:currentColor;
  margin-bottom:2px;
}
.response-error-text,
.response-error-hint{
  font-size:.84rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.response-error-hint{margin-top:6px;font-weight:700}

/* Model multiple-choice question panel */
.model-ask-panel{
  max-width:min(680px,100%);
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
}
.model-ask-title{
  font-weight:850;
  color:var(--text-primary);
  margin-bottom:10px;
}
.model-ask-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.model-ask-options button{
  border:1px solid var(--border-strong);
  background:var(--bg-glass-strong);
  color:var(--text-primary);
  border-radius:999px;
  padding:8px 13px;
  font-size:.8rem;
  font-weight:800;
  transition:all var(--transition-fast);
}
.model-ask-options button:hover:not(:disabled){
  background:var(--bg-surface-selected);
  border-color:rgba(13,148,136,.28);
  color:var(--accent);
  transform:translateY(-1px);
}
.model-ask-options button.selected{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.model-ask-options button:disabled{opacity:.65;cursor:default}

/* Status/resources banner */
.status-banner{
  position:fixed;
  right:14px;
  bottom:calc(14px + var(--safe-bottom));
  z-index:240;
  font-size:.74rem;
}
.status-main{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border-subtle);
  background:var(--bg-glass-strong);
  color:var(--text-secondary);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-radius:999px;
  padding:8px 12px;
  box-shadow:var(--shadow-pill);
  font-weight:800;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#f59e0b;
  box-shadow:0 0 0 0 rgba(245,158,11,.45);
  animation:swBadPulse 2.4s var(--ease-smooth) infinite;
}
.status-banner.ok .status-dot{
  background:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.55);
  animation:none;
}
.status-popover{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  width:min(330px,calc(100vw - 28px));
  padding:10px;
  border-radius:16px;
  background:var(--bg-glass-window);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  opacity:0;visibility:hidden;
  transform:translateY(6px) scale(.98);
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-gentle),visibility 0s linear .18s;
}
.status-banner.open .status-popover{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.status-popover div{
  display:flex;justify-content:space-between;gap:14px;
  padding:7px 8px;
  border-radius:10px;
}
.status-popover div:hover{background:var(--bg-surface-hover)}
.status-popover strong{color:var(--text-primary)}
.status-popover span{color:var(--text-tertiary);font-family:var(--font-mono);text-align:right}
@media(max-width:768px){
  .status-banner{right:8px;bottom:calc(8px + var(--safe-bottom));}
  .status-main{padding:7px 10px;max-width:calc(100vw - 16px)}
}

/* Left menu feature-tour row */
.left-tour-btn{color:var(--accent)}
.left-tour-btn:hover{background:rgba(13,148,136,.075);color:var(--accent-hover)}

/* File manager: no visible hover hint; standard delayed tooltip handles it. */
.files-finder-card.file-card::after{display:none !important;content:none !important;}
#artifactsNavBtn{display:none !important;}
#sectionUploads{display:none !important;}

/* Copy response action confirmation */
.msg-action-btn.copy-output-btn.copied{
  color:var(--success);
  background:var(--success-soft);
  border-color:var(--success-border);
  animation:copyConfirm .52s var(--ease-spring);
}
.msg-action-btn.copy-output-btn:hover{
  color:var(--accent);
  background:rgba(13,148,136,.10);
  border-color:rgba(13,148,136,.22);
}
/* Hard-disable old file-card hover wording from every previous rule/cache layer. */
.files-finder-card.file-card::after,
.files-finder-card.file-card:hover::after,
.files-finder-card.file-card:focus-visible::after{
  display:none !important;
  content:"" !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Status banner lives inside the left sidebar above the user profile. */
.sidebar-footer .status-banner{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2;
  padding:8px 10px;
  border-bottom:1px solid var(--divider);
  font-size:.72rem;
}
.sidebar-footer .status-main{
  width:100%;
  justify-content:flex-start;
  box-shadow:none;
  border-radius:14px;
  padding:8px 10px;
}
.sidebar-footer .status-popover{
  left:10px;
  right:auto;
  bottom:calc(100% + 8px);
  width:min(330px,calc(100vw - 24px));
}
@media(max-width:768px){
  .sidebar-footer .status-banner{right:auto;bottom:auto;}
}

/* Status banner: no divider line, popover escapes sidebar clipping. */
.sidebar-footer .status-banner{
  border-bottom:0 !important;
  padding:8px 10px 6px !important;
}
.sidebar-left{overflow:visible !important;}
.sidebar-content{overflow:hidden;}
.sidebar-footer .status-popover{
  position:fixed !important;
  left:12px !important;
  bottom:72px !important;
  z-index:9998 !important;
}

/* Sequential GUI questions */
.model-ask-count{
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.model-answer-selected{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  border-radius:999px;
  padding:7px 11px;
  background:var(--success-soft);
  border:1px solid var(--success-border);
  color:var(--success);
  font-size:.78rem;
  font-weight:850;
}
.model-continuation{
  margin-top:12px;
}

/* While a model/tool cycle is running, message actions are intentionally absent. */
body.composer-locked .send-btn{opacity:.45;pointer-events:none;}

/* Separate stop button beside Send while streaming. */
.stop-btn{
  border:0;
  display:none;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--danger-soft);
  color:var(--danger);
  border:1px solid var(--danger-border);
  transition:all var(--transition-fast);
}
.stop-btn:hover{
  background:var(--danger);
  color:#fff;
  transform:scale(1.05);
}
.stop-btn .icon{width:14px;height:14px}

/* Banner divider is only below the banner, never above. */
.sidebar-footer .status-banner{
  border-bottom:1px solid var(--divider) !important;
  border-top:0 !important;
}
/* Soft gradient/blur as chat/task list approaches the status/profile footer. */
.sidebar-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-34px;height:34px;
  pointer-events:none;
  background:linear-gradient(to top,var(--bg-glass-panel),transparent);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:.9;
}
.status-refresh-btn{
  width:calc(100% - 12px);
  margin:8px 6px 4px;
  border:1px solid rgba(13,148,136,.22);
  background:rgba(13,148,136,.08);
  color:var(--accent);
  border-radius:12px;
  padding:8px 10px;
  font-size:.78rem;
  font-weight:850;
  transition:all var(--transition-fast);
}
.status-refresh-btn:hover{
  background:var(--accent);
  color:#fff;
}

/* Do not allow accidental text selection across the app chrome/content. */
body,
.message,
.markdown-render,
.panel-right,
.sidebar-left,
.float-window,
.tasks-window,
.settings-window{
  -webkit-user-select:none;
  user-select:none;
}
input,textarea,.ace_editor,.cyrkil-plain-editor,[contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}

/* Continue appears only on incomplete/stopped assistant responses. */
.msg-action-btn.continue-btn{display:none;}
.message.agent.incomplete .msg-action-btn.continue-btn{display:inline-flex;}
.message.agent.incomplete .msg-action-btn.accept-btn{display:none;}

/* Copy button on user messages, alongside edit. */
.msg-copy-floating{
  position:absolute;
  left:-74px;
  top:50%;
  transform:translateY(-50%) scale(.88);
  opacity:0;
  pointer-events:auto;
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth);
  z-index:10;
}
.msg-copy-floating::before{content:"";position:absolute;inset:-10px -12px;border-radius:50%;}
.message.user:hover .msg-copy-floating,
.message.user.editing .msg-copy-floating,
.msg-copy-floating:hover,
.msg-copy-floating:focus-visible{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.msg-copy-floating.copied{
  color:var(--success);
  background:var(--success-soft);
  border-color:var(--success-border);
}
.msg-copy-floating.copied .icon{
  animation:copyConfirm .52s var(--ease-spring);
}
@media (hover:none) and (pointer:coarse){
  .msg-copy-floating{opacity:.85 !important;transform:translateY(-50%) scale(1)!important;}
}

/* Recent tasks: rows stay full height; list scrolls instead of shrinking. */
.task-list{min-height:96px;overflow-y:auto !important;flex:1 1 auto !important;}
.task-item{flex-shrink:0;}
.sidebar-content{min-height:0;}

/* Remove footer blur; make banner feel like an overlay card with a small shadow. */
.sidebar-footer::before{display:none !important;}
.sidebar-footer .status-main{
  box-shadow:0 8px 20px -16px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset !important;
}

/* Status banner now lives in the left menu content directly above Settings. */
.sidebar-content > .status-banner{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  z-index:3;
  padding:4px 0 6px !important;
  border:0 !important;
  font-size:.72rem;
}
.sidebar-content > .status-banner .status-main{
  width:100%;
  justify-content:flex-start;
  box-shadow:none !important;
  border-radius:12px;
  padding:8px 13px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text-secondary);
}
.sidebar-content > .status-banner .status-main:hover{
  background:var(--bg-surface-hover);
  border-color:var(--border-subtle);
  color:var(--text-primary);
}
.sidebar-content > .status-banner .status-popover{
  position:fixed !important;
  left:12px !important;
  bottom:auto !important;
  top:160px !important;
  z-index:9998 !important;
}

/* Runtime status now lives in the Workspace header dot, not in the left menu. */
#statusBanner{display:none !important;}
.sw-status-dot.sw-ok .sw-dot{
  background:#34d399 !important;
  box-shadow:0 0 8px rgba(52,211,153,.55) !important;
  animation:none !important;
}
.sw-status-dot.sw-warn .sw-dot{
  background:#f59e0b !important;
  box-shadow:0 0 8px rgba(245,158,11,.50) !important;
  animation:swBadPulse 2.4s var(--ease-smooth) infinite;
}
.sw-status-dot.sw-bad .sw-dot{
  background:var(--danger) !important;
  box-shadow:0 0 8px rgba(239,68,68,.58) !important;
  animation:swBadPulse 2.1s var(--ease-smooth) infinite;
}
.runtime-status-popover{
  position:fixed;
  z-index:9999;
  width:min(390px,calc(100vw - 20px));
  max-height:min(78vh,560px);
  overflow:auto;
  padding:12px;
  border-radius:18px;
  background:var(--bg-glass-window);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-gentle);
}
.runtime-status-popover.open{
  opacity:1;
  transform:translateY(0) scale(1);
}
.runtime-status-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 10px 12px;
  border-bottom:1px solid var(--divider);
  margin-bottom:8px;
}
.runtime-status-big-dot{
  width:13px;height:13px;border-radius:50%;margin-top:4px;flex-shrink:0;
}
.runtime-status-big-dot.ok{background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.55)}
.runtime-status-big-dot.warn{background:#f59e0b;box-shadow:0 0 10px rgba(245,158,11,.55)}
.runtime-status-big-dot.bad{background:var(--danger);box-shadow:0 0 10px rgba(239,68,68,.55)}
.runtime-status-head strong{font-size:.92rem;color:var(--text-primary)}
.runtime-status-head p{font-size:.78rem;color:var(--text-secondary);margin-top:2px;line-height:1.45}
.runtime-status-grid{display:flex;flex-direction:column;gap:2px}
.runtime-status-grid>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 10px;
  border-radius:10px;
}
.runtime-status-grid>div:hover{background:var(--bg-surface-hover)}
.runtime-status-grid strong{color:var(--text-primary);font-size:.78rem}
.runtime-status-grid span{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.7rem;text-align:right;overflow-wrap:anywhere}
.runtime-status-grid .status-error{
  background:var(--danger-soft);
  border:1px solid var(--danger-border);
}
.runtime-status-grid .status-error span,
.runtime-status-grid .status-error strong{color:var(--danger)}
.runtime-status-popover .status-refresh-btn{
  width:100%;
  margin:10px 0 0;
}

/* Runtime popover opens as a left flyout from the Workspace dot. */
.runtime-status-popover.runtime-pop-left::after{
  content:"";
  position:absolute;
  right:-7px;
  top:18px;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:var(--bg-glass-window);
  border-right:1px solid var(--border-strong);
  border-top:1px solid var(--border-strong);
}
.runtime-status-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.runtime-status-actions .status-refresh-btn{
  flex:1;
  margin:0;
}
.runtime-status-actions .status-refresh-btn.secondary{
  background:var(--bg-surface);
  color:var(--text-secondary);
  border-color:var(--border-strong);
}
.runtime-status-actions .status-refresh-btn.secondary:hover{
  background:var(--bg-surface-hover);
  color:var(--accent);
}

/* Runtime flyout: compact, no scrollbars/touch scrolling. */
.runtime-status-popover{
  overflow:hidden !important;
  max-height:none !important;
  touch-action:none !important;
  overscroll-behavior:none !important;
  scrollbar-width:none !important;
}
.runtime-status-popover::-webkit-scrollbar{display:none !important;}
.runtime-status-grid span{max-width:190px;white-space:normal;}
.runtime-status-actions{justify-content:stretch;}
.runtime-status-actions .status-refresh-btn.secondary{width:100%;}

/* PDF viewer: read-only artifact UI, no code-editor chrome. */
.fw-body.pdf-mode{
  padding:0 !important;
  margin-bottom:0 !important;
  overflow:hidden !important;
  font-family:var(--font-sans);
  white-space:normal;
}
.pdf-viewer-shell{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.08);
}
.pdf-viewer-toolbar{
  height:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-bottom:1px solid var(--divider);
  background:var(--window-header-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.pdf-viewer-title{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  font-weight:850;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pdf-viewer-btn{
  border:1px solid var(--border-subtle);
  background:var(--bg-surface);
  color:var(--text-secondary);
  border-radius:999px;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:850;
  transition:all var(--transition-fast);
}
.pdf-viewer-btn:hover{
  background:var(--bg-surface-selected);
  border-color:rgba(13,148,136,.24);
  color:var(--accent);
}
.pdf-viewer-btn .icon{width:13px;height:13px}
.pdf-object{
  flex:1;
  width:100%;
  min-height:0;
  border:0;
  background:#fff;
}
.pdf-fallback{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px;
  text-align:center;
  color:#222;
  background:#fff;
}

/* Hover-copy affordance for ALL model responses, including old ones. */
.agent-copy-floating{
  position:absolute;
  top:0;
  right:0;
  transform:translateY(-4px) scale(.9);
  opacity:0;
  pointer-events:auto;
  z-index:12;
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth),background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
}
.message.agent:hover .agent-copy-floating,
.agent-copy-floating:hover,
.agent-copy-floating:focus-visible{
  opacity:1;
  transform:translateY(-4px) scale(1);
}
.agent-copy-floating.copied{
  color:var(--success);
  background:var(--success-soft);
  border-color:var(--success-border);
}
@media (hover:none) and (pointer:coarse){
  .agent-copy-floating{opacity:.85;transform:translateY(-4px) scale(1);}
}

/* Robust user-message edit sizing: enough width for controls, but responsive. */
.message.user.editing .bubble-edit-wrap{
  width:min(max(var(--edit-w, 300px), 300px), calc(100vw - 96px));
  min-width:min(300px, calc(100vw - 96px));
  max-width:min(560px, calc(100vw - 96px));
}
.bubble-edit-wrap{min-width:0;}
.bubble-edit-textarea{min-width:0;}
.bubble-edit-controls{
  flex-wrap:wrap;
  gap:7px;
}
.bubble-edit-cancel,.bubble-edit-send{
  min-width:84px;
  text-align:center;
  white-space:nowrap;
}
@media(max-width:520px){
  .message.user.editing .bubble-edit-wrap{
    width:calc(100vw - 58px);
    min-width:0;
    max-width:calc(100vw - 58px);
  }
  .bubble-edit-controls{justify-content:stretch;}
  .bubble-edit-cancel,.bubble-edit-send{flex:1 1 120px;}
}

/* Settings moved into the user profile row as a compact icon action. */
.profile-settings-btn{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-tertiary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform .2s var(--ease-spring);
}
.profile-settings-btn:hover{
  background:var(--bg-surface-hover);
  color:var(--accent);
  border-color:rgba(13,148,136,.18);
  transform:translateY(-1px);
}
.profile-settings-btn .icon{width:16px;height:16px}
.user-profile-row .profile-settings-btn + svg.icon{
  margin-left:-2px;
}

/* Old model responses: copy button appears where normal response actions live. */
.agent-copy-floating{display:none !important;}
.old-msg-actions{
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth);
}
.message.agent:hover .old-msg-actions,
.old-msg-actions:hover,
.old-msg-actions:focus-within{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.old-msg-actions .copy-output-btn{
  opacity:1;
  pointer-events:auto;
}
@media (hover:none) and (pointer:coarse){
  .old-msg-actions{opacity:.85;pointer-events:auto;transform:none;}
}

/* PDF.js viewer — Cyrkil-styled, consistent dark/light, no editable chrome. */
.pdfjs-viewer-shell{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--bg-chat);
  color:var(--text-primary);
}
.pdfjs-toolbar{
  min-height:48px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  background:var(--window-header-bg);
  border-bottom:1px solid var(--divider);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  overflow:hidden;
}
.pdfjs-title{
  flex:1;
  min-width:110px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pdfjs-btn{
  min-width:30px;
  height:30px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--bg-surface);
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 9px;
  font-size:.8rem;
  font-weight:900;
  transition:all var(--transition-fast);
}
.pdfjs-btn:hover{
  background:var(--bg-surface-selected);
  border-color:rgba(13,148,136,.25);
  color:var(--accent);
  transform:translateY(-1px);
}
.pdfjs-btn.label{font-size:.72rem;padding:0 11px;}
.pdfjs-btn .icon{width:13px;height:13px}
.pdfjs-page-indicator,.pdfjs-zoom{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:850;
  color:var(--text-tertiary);
  min-width:48px;
  text-align:center;
}
.pdfjs-zoom{min-width:42px}
.pdfjs-sep{width:1px;height:22px;background:var(--divider);flex-shrink:0}
.pdfjs-status{
  position:absolute;
  top:58px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  max-width:calc(100% - 28px);
  padding:8px 12px;
  border-radius:999px;
  background:var(--bg-glass-window);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  font-size:.76rem;
  font-weight:800;
  box-shadow:var(--shadow-pill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.pdfjs-status.error{
  color:var(--danger);
  background:var(--danger-soft);
  border-color:var(--danger-border);
  border-radius:14px;
}
.pdfjs-scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:20px;
  background:
    radial-gradient(circle at top left, var(--shape-color-1), transparent 280px),
    var(--bg-chat);
}
.pdfjs-pages{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  min-width:max-content;
}
.pdfjs-page{
  background:#fff;
  border-radius:8px;
  box-shadow:0 18px 42px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.08);
  overflow:hidden;
}
[data-theme="dark"] .pdfjs-page{
  box-shadow:0 22px 50px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);
}
.pdfjs-page canvas{display:block;background:#fff;}
@media(max-width:700px){
  .pdfjs-toolbar{gap:5px;padding:7px;overflow-x:auto;scrollbar-width:none;}
  .pdfjs-toolbar::-webkit-scrollbar{display:none}
  .pdfjs-title{min-width:120px;}
  .pdfjs-btn.label span{display:none;}
  .pdfjs-scroll{padding:12px;}
}

/* PDF windows are read-only generated artifacts: no inner toolbar, no resize. */
.float-window.pdf-window .fw-resize-handle{display:none !important;}
.float-window.pdf-window{resize:none !important;}
.pdfjs-viewer-shell.no-toolbar .pdfjs-toolbar{display:none !important;}
.pdfjs-viewer-shell.no-toolbar .pdfjs-scroll{padding:18px;background:var(--bg-chat);}
.pdfjs-viewer-shell.no-toolbar .pdfjs-pages{gap:14px;}

/* File feedback gate shown after generated files/artifacts. */
.file-feedback-panel{
  margin-top:14px;
  max-width:min(680px,100%);
  padding:14px;
  border-radius:18px;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  box-shadow:0 12px 28px -24px rgba(0,0,0,.35);
}
.file-feedback-title{
  font-weight:850;
  color:var(--text-primary);
  margin-bottom:5px;
}
.file-feedback-meta{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text-tertiary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:11px;
}
.file-feedback-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.file-feedback-actions button{
  border:1px solid var(--border-strong);
  background:var(--bg-glass-strong);
  color:var(--text-primary);
  border-radius:999px;
  padding:8px 13px;
  font-size:.8rem;
  font-weight:850;
  transition:all var(--transition-fast);
}
.file-feedback-actions button:hover:not(:disabled){
  background:var(--bg-surface-selected);
  border-color:rgba(13,148,136,.28);
  color:var(--accent);
  transform:translateY(-1px);
}
.file-feedback-actions button.selected{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.file-feedback-actions button:disabled{opacity:.7;cursor:default}
.file-feedback-panel.done{
  opacity:.75;
}

/* Hide the internal PDF.js toolbar while keeping its controls available for code safety. */
.pdfjs-toolbar-hidden{display:none !important;}
.pdfjs-viewer-shell .pdfjs-status{top:14px;}
.float-window.pdf-window .pdfjs-scroll{padding:18px;}
.float-window.pdf-window .pdfjs-pages{gap:14px;}

/* Feedback is now a popup near the input, not a model-question block. */
.file-feedback-popup{
  position:fixed;
  z-index:420;
  width:min(390px,calc(100vw - 20px));
  padding:14px;
  border-radius:20px;
  background:var(--bg-glass-window);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:opacity .2s var(--ease-smooth),transform .22s var(--ease-gentle);
}
.file-feedback-popup.open{
  opacity:1;
  transform:translateY(0) scale(1);
}
.file-feedback-popup::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:-7px;
  width:14px;height:14px;
  transform:rotate(45deg);
  background:var(--bg-glass-window);
  border-right:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong);
}
@media(max-width:520px){
  .file-feedback-popup{
    width:calc(100vw - 16px);
    left:8px !important;
    right:8px !important;
  }
}

/* Feedback is passive quality feedback, not an action command. */
.file-feedback-reasons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.file-feedback-reasons button{
  border:1px solid var(--border-strong);
  background:var(--bg-glass-strong);
  color:var(--text-primary);
  border-radius:999px;
  padding:8px 13px;
  font-size:.8rem;
  font-weight:850;
  transition:all var(--transition-fast);
}
.file-feedback-reasons button:hover{
  background:var(--bg-surface-selected);
  border-color:rgba(13,148,136,.28);
  color:var(--accent);
  transform:translateY(-1px);
}

/* PDF viewer layout refinement: fit width, no horizontal scrolling, neutral canvas. */
.float-window.pdf-window .pdfjs-scroll{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:14px !important;
  background:var(--bg-page) !important;
}
.float-window.pdf-window .pdfjs-pages{
  min-width:0 !important;
  width:100% !important;
  align-items:center !important;
}
.float-window.pdf-window .pdfjs-page{
  max-width:100% !important;
  border-radius:10px;
}
.float-window.pdf-window .pdfjs-page canvas{
  max-width:100% !important;
  height:auto !important;
}
.float-window.pdf-window .pdfjs-status{
  top:12px;
}
.file-feedback-reasons{display:none !important;}

/* ── Final restored composer styling (original glass intensity) ── */
.input-wrapper{
  width:100%;
  max-width:680px;
  min-width:420px;
  background:var(--bg-input-glass) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--border-input) !important;
  border-radius:var(--radius-input);
  padding:10px 12px 8px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:border-color var(--transition-fast),background var(--transition-theme),box-shadow var(--transition-fast);
  position:relative;
  overflow:visible;
  box-shadow:var(--shadow-pill) !important;
}
.input-wrapper:focus-within{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(13,148,136,.07),var(--shadow-pill) !important;
}
.input-wrapper.prismo-focus:focus-within{
  border-color:var(--accent-prismo) !important;
  box-shadow:0 0 0 3px rgba(124,58,237,.09),var(--shadow-pill) !important;
}
.input-typing-row textarea{
  background:transparent !important;
  color:var(--text-primary) !important;
}
.input-wrapper.feedback-active .input-typing-row{display:none !important;}

/* Feedback row: flat, inset, seamless, no border/card feel. */
.input-feedback-popup{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:calc(100% - 10px) !important;
  margin:4px 5px 12px 5px !important;
  padding:10px 2px 12px !important;
  box-sizing:border-box;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:0;
  transform:translateY(6px) scale(.99);
  max-height:160px;
  overflow:hidden;
  transition:opacity .2s var(--ease-smooth),transform .22s var(--ease-gentle),max-height .22s var(--ease-gentle),margin .22s var(--ease-gentle),padding .22s var(--ease-gentle) !important;
}
.input-feedback-popup.open{opacity:1;transform:translateY(0) scale(1)}
.input-feedback-popup::after{display:none !important;}
.input-feedback-popup .file-feedback-title{
  margin:0 4px 10px !important;
  padding:0 !important;
  font-size:.78rem !important;
  font-weight:650 !important;
  color:var(--text-secondary) !important;
  line-height:1.35;
}
.input-feedback-popup .file-feedback-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px !important;
  margin:0;
  width:100%;
}
.input-feedback-popup .file-feedback-actions button{
  min-height:38px;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:14px !important;
  background:var(--bg-surface) !important;
  color:var(--text-secondary) !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:none !important;
}
.input-feedback-popup .file-feedback-actions button:hover:not(:disabled){
  background:var(--bg-surface-hover) !important;
  color:var(--accent) !important;
  transform:translateY(-1px);
}
.input-feedback-popup .file-feedback-actions button .icon{width:13px;height:13px;color:var(--text-tertiary)}
.input-feedback-popup .file-feedback-actions button:hover .icon{color:var(--accent)}
.input-feedback-popup.closing{
  opacity:0 !important;
  transform:translateY(6px) scale(.985) !important;
  max-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
@media(max-width:520px){
  .input-feedback-popup .file-feedback-actions{grid-template-columns:1fr;}
}

/* Feedback state: composer looks active while waiting for feedback. */
.input-wrapper.feedback-active{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(13,148,136,.07),var(--shadow-pill) !important;
}
.input-wrapper.feedback-active.prismo-focus{
  border-color:var(--accent-prismo) !important;
  box-shadow:0 0 0 3px rgba(124,58,237,.09),var(--shadow-pill) !important;
}

/* Reduce colored glow bleeding through the input while preserving glass. */
.input-wrapper .input-shape{
  opacity:.13 !important;
  filter:blur(38px) saturate(.85) !important;
}
[data-theme="dark"] .input-wrapper .input-shape{
  opacity:.11 !important;
}

/* Feedback buttons: clearer choices with subtle borders and distinct hover glows. */
.input-feedback-popup .file-feedback-actions button{
  border:1px solid var(--border-subtle) !important;
  background:var(--bg-surface) !important;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform .2s var(--ease-spring) !important;
}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="yes"]:hover:not(:disabled){
  color:var(--success) !important;
  border-color:var(--success-border) !important;
  background:var(--success-soft) !important;
  box-shadow:0 8px 22px -14px rgba(16,185,129,.55), inset 0 0 0 1px var(--success-border) !important;
}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="no"]:hover:not(:disabled){
  color:var(--danger) !important;
  border-color:var(--danger-border) !important;
  background:var(--danger-soft) !important;
  box-shadow:0 8px 22px -14px rgba(239,68,68,.55), inset 0 0 0 1px var(--danger-border) !important;
}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="still_working"]:hover:not(:disabled){
  color:var(--accent-prismo) !important;
  border-color:var(--badge-prismo-border) !important;
  background:var(--badge-prismo-bg) !important;
  box-shadow:0 8px 22px -14px rgba(124,58,237,.45), inset 0 0 0 1px var(--badge-prismo-border) !important;
}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="yes"]:hover .icon{color:var(--success) !important;}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="no"]:hover .icon{color:var(--danger) !important;}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="still_working"]:hover .icon{color:var(--accent-prismo) !important;}

/* Softer feedback button hover glows. */
.input-feedback-popup .file-feedback-actions button[data-file-feedback="yes"]:hover:not(:disabled){
  box-shadow:0 6px 16px -14px rgba(16,185,129,.28), inset 0 0 0 1px rgba(16,185,129,.12) !important;
}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="no"]:hover:not(:disabled){
  box-shadow:0 6px 16px -14px rgba(239,68,68,.28), inset 0 0 0 1px rgba(239,68,68,.12) !important;
}
.input-feedback-popup .file-feedback-actions button[data-file-feedback="still_working"]:hover:not(:disabled){
  box-shadow:0 6px 16px -14px rgba(124,58,237,.24), inset 0 0 0 1px rgba(124,58,237,.12) !important;
}

/* First-time tour invitation — centered, styled like Cyrkil modals. */
.tour-nudge-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:9500 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
  background:rgba(20,20,19,.42) !important;
  backdrop-filter:blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.16) !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s var(--ease-smooth),visibility 0s linear .28s;
}
.tour-nudge-backdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s var(--ease-smooth),visibility 0s linear 0s;
}
.tour-nudge-card{
  position:relative;
  width:min(440px,calc(100vw - 32px));
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--border-strong);
  background:var(--bg-glass-window);
  color:var(--text-primary);
  box-shadow:var(--shadow-window);
  backdrop-filter:var(--glass-blur-heavy);
  -webkit-backdrop-filter:var(--glass-blur-heavy);
  padding:30px 28px 24px;
  text-align:center;
  transform:translateY(12px) scale(.97);
  opacity:0;
  transition:transform .34s var(--ease-out-expo),opacity .28s var(--ease-out-expo),background var(--transition-theme),border-color var(--transition-theme);
}
.tour-nudge-backdrop.open .tour-nudge-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.tour-nudge-card::before,
.tour-nudge-card::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(58px);
  opacity:.28;
}
.tour-nudge-card::before{
  width:190px;height:190px;top:-80px;left:-70px;background:var(--shape-color-1);
}
.tour-nudge-card::after{
  width:210px;height:210px;right:-80px;bottom:-92px;background:var(--shape-color-2);
}
.tour-nudge-card > *{
  position:relative;
  z-index:1;
}
.tour-nudge-card h2{
  margin:8px 0 10px;
  font-family:var(--font-serif);
  font-size:clamp(1.45rem,4vw,1.9rem);
  line-height:1.12;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--text-primary);
}
.tour-nudge-card p{
  max-width:360px;
  margin:0 auto 20px;
  font-size:.92rem;
  line-height:1.6;
  color:var(--text-secondary);
}
.tour-nudge-card .tour-modal-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.tour-nudge-card .tour-btn{
  min-height:38px;
  padding:9px 17px;
  border-radius:12px;
}
@media(max-width:520px){
  .tour-nudge-card{
    padding:24px 20px 20px;
  }
  .tour-nudge-card .tour-modal-actions{
    flex-direction:column-reverse;
  }
  .tour-nudge-card .tour-btn{
    width:100%;
  }
}