/* ==========================================================================
   CSS VARIABLES & THEMING
   ========================================================================== */


:root[data-theme="dark"] {
    --bg: #0c0c0e;
    --bg-s: #161618;
    --bg-h: #1e1e21;
    --bg-glass: rgba(22, 22, 24, 0.97);
    --t1: #f0f0f0;
    --t2: #848490;
    --t3: #5a5a64;
    --border: #2a2a2e;
    --acc: #8b5cf6;
    --acc-rgb: 139, 92, 246;
    --acc-g: var(--acc); /* flat — gradient was visually too busy. JS applyFlatColors used to overwrite this at boot; now also the default so a failed init() doesn't flash the gradient. (Split B 2026-05-27) */
    --danger: #ef4444;
    --success: #22c55e;
    --warn: #f59e0b;
    --glass: 0 8px 32px rgba(0, 0, 0, 0.5);
    --radius: 16px;
    --msg-user-bg: var(--acc-g);
    --msg-user-color: #ffffff;
}

:root[data-theme="dim"] {
    --bg: #1e1e1e;
    --bg-s: #282828;
    --bg-h: #323232;
    --bg-glass: rgba(30, 30, 30, 0.97);
    --t1: #e8e8e8;
    --t2: #909090;
    --t3: #6c6c75;
    --border: #404040;
    --acc: #8b5cf6;
    --acc-rgb: 139, 92, 246;
    --acc-g: var(--acc); /* flat — gradient was visually too busy. JS applyFlatColors used to overwrite this at boot; now also the default so a failed init() doesn't flash the gradient. (Split B 2026-05-27) */
    --danger: #ef4444;
    --success: #22c55e;
    --warn: #f59e0b;
    --glass: 0 8px 32px rgba(0, 0, 0, 0.35);
    --radius: 16px;
    --msg-user-bg: var(--acc-g);
    --msg-user-color: #ffffff;
}

:root[data-theme="light"] {
    --bg: #f5f5f7;
    --bg-s: #ffffff;
    --bg-h: #ebebef;
    --bg-glass: rgba(255, 255, 255, 0.97);
    --t1: #0f0f10;
    --t2: #636370;
    --t3: #8b8b96;
    --border: #e0e0e8;
    --acc: #6c5ce7;
    --acc-rgb: 108, 92, 231;
    --acc-g: var(--acc); /* flat — see comment in dark theme above. (Split B 2026-05-27) */
    --danger: #dc2626;
    --success: #16a34a;
    --warn: #d97706;
    --glass: 0 8px 32px rgba(0, 0, 0, 0.08);
    --radius: 16px;
    --msg-user-bg: var(--acc-g);
    --msg-user-color: #ffffff;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Keyboard-only focus indicator. Mouse clicks don't trigger :focus-visible, so
   visual focus rings only appear when navigating with Tab — no impact on click UX. */
*:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
html { height: -webkit-fill-available; }
/* Default :root vars consumed by the input-wrapper. Must be defined here so
   the first paint (before any JS runs) uses sane values. Without these the
   input wrapper renders with `var(--kb, 0px)` = 0px on the very first frame
   even on browsers that DO support visualViewport — fine in theory, but JS
   doesn't always set --kb before that first frame, so we get a flash of
   wrong layout on mobile. Pinning sensible defaults eliminates the flash. */
:root { --kb: 0px; }
body {
    font-family: 'Geist', sans-serif;
    background: var(--bg);
    color: var(--t1);
    /* Prevent the browser's own horizontal swipe-back gesture from eating
       our left-edge "open sidebar" touchstart on Android/iOS. */
    overscroll-behavior-x: contain;
    /* Height stack — last supported value wins:
       1. 100vh    — legacy fallback for ancient browsers
       2. 100dvh   — dynamic viewport (grows when URL bar collapses); modern
       3. 100svh   — small viewport (assumes URL bar always visible); SAFEST
       We put 100svh LAST so it wins on browsers that support it. Yes, this
       costs a small strip of unused space when the URL bar collapses, but
       it GUARANTEES the input bar never falls below visible viewport on
       initial paint — which was the persistent "barra debajo" bug on iOS.
       Using 100dvh as the winner was unreliable: during the URL-bar collapse
       animation, the browser reports a transient too-tall dvh value and
       layout overshoots the visible area. 100svh is rock-solid. */
    height: 100vh; height: 100dvh; height: 100svh;
    display: flex; overflow: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.app { display: flex; width: 100%; height: 100%; }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar {
    width: 272px; background: var(--bg-s); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 16px 10px;
    z-index: 50; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;
}
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85);
    z-index: 40; opacity: 0;
    pointer-events: none; transition: opacity 0.3s;
}

.brand {
    font-family: 'Syne', sans-serif;
    font-weight: 800; font-size: 1.35rem; letter-spacing: -0.04em;
    margin-bottom: 16px; padding: 4px 8px; color: var(--t1);
}

.nav-btn {
    background: transparent; border: 1px solid transparent; color: var(--t1);
    width: 100%; padding: 11px 13px; border-radius: 11px;
    display: flex; align-items: center; gap: 9px; font-size: 0.875rem;
    font-weight: 500; cursor: pointer; transition: all 0.2s; text-align: left; font-family: inherit;
}
.nav-btn:hover { background: var(--bg-h); border-color: var(--border); }
.nav-btn svg { color: var(--t2); transition: color 0.2s; flex-shrink: 0; }
.nav-btn:hover svg { color: var(--t1); }

.nav-btn.new-chat {
    position: relative;
    /* Tinted (translucent accent) instead of a solid saturated fill — still
       clearly the primary action, but it no longer dominates the sidebar. */
    background: rgba(var(--acc-rgb), 0.12);
    color: var(--acc);
    border: 1px solid rgba(var(--acc-rgb), 0.26);
    margin-bottom: 14px; font-weight: 600;
    padding: 12px 14px;
    border-radius: 12px;
    justify-content: center;
}
.nav-btn.new-chat svg {
    color: var(--acc);
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
}
.nav-btn.new-chat:hover {
    background: rgba(var(--acc-rgb), 0.18);
    border-color: rgba(var(--acc-rgb), 0.38);
}
.nav-btn.new-chat:active { transform: scale(0.98); }

/* Top-level category links (Files, Gallery) — Claude-style. Sit at the top
   of the scrollable history region (NOT pinned). Scroll with the chat list
   so users on small screens get the full vertical space when browsing. */
.sidebar-categories {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 6px; padding-bottom: 0;
}
.nav-btn.category-btn {
    background: transparent; border: 1px solid transparent;
    padding: 9px 12px; font-weight: 500; font-size: 0.86rem;
    color: var(--t1);
}
.nav-btn.category-btn:hover { background: var(--bg-h); border-color: transparent; }
.nav-btn.category-btn svg { color: var(--t2); }
.nav-btn.category-btn:hover svg { color: var(--t1); }

.sidebar-search { position: relative; margin-bottom: 14px; flex-shrink: 0; }
.sidebar-search input {
    width: 100%; background: var(--bg-h); border: 1px solid var(--border); color: var(--t1);
    padding: 9px 12px 9px 34px; border-radius: 10px; font-size: 0.82rem; outline: none;
    font-family: inherit; transition: border-color 0.2s;
}
.sidebar-search input:focus { border-color: var(--acc); }
.sidebar-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--t2); pointer-events: none; }

/* Single scroll container for the whole left-rail content: categories,
   new-project button, and chat list all scroll together. Previously the
   sub-elements were sticky (each had their own flex-shrink:0), which made
   the visible chat area very short on mobile. */
.history-section {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.history-section::-webkit-scrollbar { display: none; }
.history-list { display: flex; flex-direction: column; gap: 2px; }

.history-group-label {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--t2);
    padding: 14px 8px 6px; opacity: 0.75;
    display: flex; align-items: center; gap: 7px;
}
.history-group-label::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--acc); opacity: 0.55; flex-shrink: 0;
}

.history-item {
    position: relative;
    display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px;
    border-radius: 10px; cursor: pointer; border: 1px solid transparent;
    transition: background 0.18s var(--ease-std, ease), border-color 0.18s, transform 0.16s var(--ease-out-soft, ease), padding-left 0.18s;
    min-width: 0; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.history-item::before {
    /* Accent bar on the left — appears on hover/active for visual feedback */
    content: ''; position: absolute; left: 4px; top: 50%;
    width: 3px; height: 0; border-radius: 2px;
    background: var(--acc);
    transform: translateY(-50%);
    transition: height 0.22s var(--ease-out-back, cubic-bezier(.34,1.56,.64,1)), opacity 0.18s;
    opacity: 0;
}
.history-item:hover {
    background: var(--bg-h);
}
.history-item:hover::before {
    height: 16px; opacity: 0.55;
}
.history-item.active {
    background: color-mix(in srgb, var(--acc) 8%, var(--bg-h));
    border-color: color-mix(in srgb, var(--acc) 22%, var(--border));
}
.history-item.active::before {
    height: 22px; opacity: 1;
}
.history-item.active .history-item-text { color: var(--t1); font-weight: 600; }
.history-item-pin { color: var(--acc); opacity: 0.85; flex-shrink: 0; display: none; }
.history-item.pinned .history-item-pin { display: flex; }
.history-item-text {
    flex: 1; font-size: 0.835rem; color: var(--t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.15s;
}
.history-item-time {
    flex-shrink: 0; font-size: 0.7rem; color: var(--t2);
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
    transition: opacity 0.18s;
}
.history-item:hover .history-item-time { opacity: 0; pointer-events: none; }
.history-item.active .history-item-time { color: color-mix(in srgb, var(--acc) 75%, var(--t2)); }
.history-item-rename-input { flex: 1; min-width: 0; font-size: 0.835rem; color: var(--t1); background: var(--bg-h); border: 1px solid var(--acc); border-radius: 6px; padding: 3px 6px; outline: none; font-family: inherit; }
.history-item.search-hidden { display: none; }

.history-item-actions {
    position: absolute; right: 6px; top: 50%;
    display: flex; gap: 2px; flex-shrink: 0;
    opacity: 0;
    transform: translate(4px, -50%);
    transition: opacity 0.18s, transform 0.18s;
    background: linear-gradient(to right, transparent, var(--bg-h) 18%);
    padding-left: 16px;
    border-radius: 8px;
    pointer-events: none;
}
.history-item:hover .history-item-actions { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.history-item.active .history-item-actions { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--acc) 8%, var(--bg-h)) 18%); }
@media (hover: none) and (pointer: coarse) {
  .history-item-actions { display: none !important; }
}
.history-action-btn {
    width: 24px; height: 24px; border-radius: 6px; background: transparent; border: none;
    color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.history-action-btn:hover { background: var(--bg-s); color: var(--t1); transform: scale(1.06); }
.history-action-btn:active { transform: scale(0.94); }
.history-action-btn.pin-btn:hover { color: var(--acc); }
.history-action-btn.del-btn:hover { background: rgba(239, 68, 68, 0.14); color: var(--danger); }
.history-item.pinned .pin-btn { color: var(--acc); }

.history-empty { font-size: 0.83rem; color: var(--t2); padding: 20px 8px; text-align: center; line-height: 1.5; }

.sidebar-footer { flex-shrink: 0; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }

/* ==========================================================================
   MAIN LAYOUT & HEADER
   ========================================================================== */
.main { flex: 1; display: flex; flex-direction: column; position: relative; background: var(--bg); min-width: 0; }

.chat-header {
    position: absolute; top: 0; left: 0; right: 0; height: 58px;
    background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 10; padding: 0 6px;
}

.menu-toggle {
    display: none; background: transparent; border: none; color: var(--t1);
    padding: 8px; cursor: pointer; border-radius: 8px; transition: background 0.2s;
    flex-shrink: 0;
}
.menu-toggle:hover { background: var(--bg-h); }

.header-left  { display: flex; align-items: center; gap: 4px; justify-content: flex-start; }
.header-center { display: flex; align-items: center; justify-content: center; }
.header-right { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }

/* Anonymous Pill */
.status-pill {
    background: var(--bg-s); border: 1px solid var(--border); padding: 5px 13px 5px 11px;
    border-radius: 20px; font-size: 0.78rem; font-weight: 600; color: var(--t2);
    display: flex; align-items: center; gap: 7px; transition: all 0.2s; cursor: pointer; user-select: none; white-space: nowrap;
}
.status-pill:hover { background: var(--bg-h); }
.status-pill.anon-active { background: rgba(var(--acc-rgb), 0.1); border-color: rgba(var(--acc-rgb), 0.3); color: var(--acc); }
/* Mode icons — inherit accent color automatically */
.mode-icon { color: var(--t2); transition: color 0.2s; flex-shrink: 0; }
.status-pill.anon-active .mode-icon { color: var(--acc); }


/* Quick Model Selector */
.model-selector-wrap { position: relative; }
.model-chip {
    background: var(--bg-s); border: 1px solid var(--border); padding: 5px 11px; border-radius: 20px;
    font-size: 0.78rem; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 5px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.model-chip:hover { background: var(--bg-h); border-color: rgba(var(--acc-rgb), 0.4); }
.model-dropdown {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--bg-s); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
    box-shadow: var(--glass); display: none; flex-direction: column; gap: 2px; width: 290px; z-index: 200;
}
.model-dropdown.active { display: flex; }
.model-dropdown-item { padding: 10px 12px; border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; transition: all 0.12s; }
.model-dropdown-item:hover { background: var(--bg-h); }
.model-dropdown-item.active { background: rgba(var(--acc-rgb), 0.08); border-color: rgba(var(--acc-rgb), 0.18); }

.mdi-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mdi-name { font-size: 0.84rem; font-weight: 600; color: var(--t1); }
.mdi-spec { font-size: 0.73rem; color: var(--t2); line-height: 1.3; }

.tag-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.62rem; font-weight: 700; padding: 2px 6px;
    border-radius: 5px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.coding-tag { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

.hdr-btn { background: transparent; border: none; color: var(--t2); padding: 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; transition: all 0.2s; }
.hdr-btn:hover { background: var(--bg-h); color: var(--t1); }

/* ==========================================================================
   MESSAGES AREA
   ========================================================================== */
.messages-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scroll-behavior: smooth; overscroll-behavior: contain; touch-action: pan-y; }
.messages-container { flex: 1; padding: 78px 16px 20px; display: flex; flex-direction: column; gap: 10px; max-width: 800px; width: 100%; margin: 0 auto; }
/* On wide desktops, allow the chat to breathe — 800px feels lost on 1440px+ screens.
   1080px keeps line-length readable while using the available real estate. */
@media (min-width: 1280px) { .messages-container { max-width: 1080px; } }

/* content-visibility: el navegador se salta el dibujado de los mensajes fuera de
   pantalla (rendimiento en chats largos). contain-intrinsic-size: auto recuerda el
   alto real tras dibujarlos una vez, así el scroll no pega saltos. */
.message { display: flex; flex-direction: column; padding: 10px 0; gap: 4px; position: relative; max-width: 100%; content-visibility: auto; contain-intrinsic-size: auto 240px; }
/* Solo el mensaje más nuevo hace la entrada (evita que se animen los 50 del
   historial al abrir un chat, y que se "re-animen" al hacer scroll). */
.message:last-child { animation: fadeInUp 0.25s ease-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* User Message */
.message.user { align-items: flex-end; padding-left: 8%; position: relative; padding-bottom: 22px; }
.message.user .msg-bubble {
    background: var(--acc); color: var(--msg-user-color);
    padding: 11px 16px; border-radius: 18px 18px 4px 18px;
    font-size: 0.91rem; line-height: 1.5; display: block; max-width: 100%;
    word-wrap: break-word; word-break: break-word;
    /* Suppress the native Android long-press overlay (text-selection callout)
       that clashed with our custom context menu. Desktop re-enables selection
       via the media query below so mouse-drag copy still works. */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .message.user .msg-bubble { -webkit-user-select: text; user-select: text; }
}
/* Long user messages collapse to a fixed height with a fade-out gradient so
   the chat doesn't get dominated by a single huge bubble. JS measures the
   bubble's rendered height and adds .collapsible (always) + .collapsed
   (initial state) when it exceeds the threshold, then inserts a toggle
   button right under the bubble to expand / re-collapse. */
.message.user .msg-bubble.collapsible.collapsed {
    max-height: 240px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 65%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 65%, transparent 100%);
}
.msg-bubble-toggle {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    background: transparent; border: none; padding: 4px 10px;
    color: var(--t2); font-size: 0.78rem; font-weight: 500;
    cursor: pointer; font-family: inherit;
    border-radius: 999px;
    transition: color 0.15s, background 0.15s;
}
.msg-bubble-toggle:hover { color: var(--t1); background: var(--bg-h); }
.msg-bubble-toggle svg { transition: transform 0.2s; }
.msg-bubble-toggle.expanded svg { transform: rotate(180deg); }

/* User edit button — absolutely positioned so it never shifts layout */
.user-edit-btn {
    position: absolute; bottom: 4px; right: 0;
    background: transparent; border: none; color: rgba(255,255,255,0.5);
    cursor: pointer; padding: 2px 4px; border-radius: 4px; display: flex;
    align-items: center; font-size: 0.7rem; gap: 3px;
    transition: color 0.2s, opacity 0.15s; font-family: inherit;
    opacity: 0; pointer-events: none;
}
.message.user:hover .user-edit-btn { opacity: 1; pointer-events: auto; }
@media (hover: none) { .message.user .user-edit-btn { opacity: 0.6; pointer-events: auto; } }
.user-edit-btn:hover { color: rgba(255,255,255,0.9); }

/* User attachments */
.user-attachment-container { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; width: 100%; align-items: flex-end; }
.user-file-card {
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 8px 12px; font-size: 0.8rem; color: rgba(255,255,255,0.9);
    max-width: 240px; width: auto; cursor: pointer; transition: background 0.15s;
}
.user-file-card:hover { background: rgba(0,0,0,0.25); }
.user-file-card svg { flex-shrink: 0; opacity: 0.8; width: 16px; height: 16px; }
.user-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.user-image-card { max-width: 200px; max-height: 180px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.15); display: block; cursor: zoom-in; transition: opacity 0.2s; object-fit: cover; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.user-image-card:hover { opacity: 0.88; }

/* Lightbox */
.img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; touch-action: none; overscroll-behavior: contain; overflow: hidden; }
.img-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; will-change: transform; transform-origin: center center; cursor: zoom-in; }
.img-lightbox.is-zoomed { cursor: grab; }
.img-lightbox.is-zoomed img { cursor: grab; }
.img-lightbox.is-dragging, .img-lightbox.is-dragging img { cursor: grabbing; }
.img-lightbox .lb-actions { position: absolute; bottom: 24px; right: 24px; display: flex; gap: 10px; z-index: 10000; }
.img-lightbox .lb-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.18s ease, transform 0.18s ease; }
.img-lightbox .lb-close { position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); z-index: 10001; background: rgba(24,24,28,0.78); }
.img-lightbox .lb-btn:hover { background: var(--acc); transform: scale(1.06); }
.img-lightbox .lb-btn:active { transform: scale(0.94); }
.img-lightbox .lb-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.img-lightbox .lb-btn svg { width: 20px; height: 20px; pointer-events: none; }
@media (max-width: 520px) { .img-lightbox { padding: 12px; } .img-lightbox .lb-actions { bottom: max(18px, env(safe-area-inset-bottom)); right: 18px; gap: 8px; } .img-lightbox .lb-btn { width: 44px; height: 44px; } }

/* Gallery (B10) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.gallery-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg2); border: 1px solid var(--border); cursor: zoom-in; transition: transform 0.18s ease, border-color 0.18s ease; }
.gallery-tile:hover { transform: translateY(-2px); border-color: var(--acc); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile.expired { cursor: default; display: flex; align-items: center; justify-content: center; color: var(--t2); font-size: 0.72rem; font-weight: 500; text-align: center; padding: 6px; }
.gallery-tile.expired img { display: none; }
.gallery-chat-btn { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(10,10,12,0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(4px); transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease; }
.gallery-tile:hover .gallery-chat-btn, .gallery-tile:focus-within .gallery-chat-btn { opacity: 1; transform: translateY(0); }
.gallery-chat-btn:hover { background: var(--acc); }
.gallery-chat-btn svg { width: 16px; height: 16px; pointer-events: none; }
.data-choice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.data-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-s); color: var(--t1); cursor: pointer; text-align: left; }
.data-choice input { width: 18px; height: 18px; accent-color: var(--acc); flex-shrink: 0; }
.data-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.data-choice-title { font-size: 0.9rem; font-weight: 700; color: var(--t1); }
.data-choice-sub { font-size: 0.78rem; color: var(--t2); line-height: 1.3; }
.data-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.data-modal-actions .adv-nav-btn { justify-content: center; flex: 1; }
.gallery-empty { padding: 40px 20px; text-align: center; color: var(--t2); font-size: 0.88rem; }
/* Library tabs */
.library-tab {
    background: transparent; border: none; color: var(--t2);
    padding: 11px 16px; font-size: 0.88rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.library-tab:hover { color: var(--t1); }
.library-tab.active { color: var(--acc); border-bottom-color: var(--acc); }
/* Library document tiles */
.library-docs-list { display: flex; flex-direction: column; gap: 8px; }
.library-doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: var(--bg-s);
    border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
    text-decoration: none; color: inherit;
}
.library-doc-item:hover { border-color: var(--acc); background: var(--bg-h); transform: translateY(-1px); }
.library-doc-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(var(--acc-rgb), 0.12); color: var(--acc);
    display: flex; align-items: center; justify-content: center;
}
.library-doc-icon svg { width: 18px; height: 18px; }
.library-doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.library-doc-name {
    font-size: 0.94rem; font-weight: 500; color: var(--t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.library-doc-sub { font-size: 0.76rem; color: var(--t2); }
.library-empty { padding: 40px 20px; text-align: center; color: var(--t2); font-size: 0.88rem; }
/* Library "Files" tab item — generated artifacts (PDF/DOCX/XLSX/...) */
.library-file-item .library-file-icon {
    width: 38px; height: 48px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--acc);
}
.library-file-item .library-file-icon svg { width: 100%; height: 100%; display: block; }
.library-file-actions { display: flex; gap: 4px; flex-shrink: 0; }
.library-file-btn {
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: 1px solid transparent; color: var(--t2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.library-file-btn svg { width: 16px; height: 16px; }
.library-file-btn:hover { background: var(--bg-h); color: var(--t1); border-color: var(--border); }
.library-file-btn-danger:hover { background: rgba(239,68,68,0.12); color: var(--danger); border-color: rgba(239,68,68,0.3); }
/* ── Artifact card (in-chat) ─────────────────────────────────────────────
   Card the user sees inside an assistant message when NOLO generates a file
   (PDF, DOCX, XLSX, PPTX, MD, TXT…). Thumbnail of the first page on the
   left, title + metadata in the middle, action buttons on the right.
*/
.artifact-card {
    display: flex; align-items: stretch; gap: 12px;
    margin-top: 12px; padding: 12px;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    cursor: pointer;
    max-width: 100%; min-width: 0;
}
.artifact-card:hover { border-color: var(--acc); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.artifact-card-thumb {
    width: 42px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--acc);
    transition: color 0.2s, transform 0.2s;
}
.artifact-card-thumb svg { width: 100%; height: 100%; display: block; }
.artifact-card:hover .artifact-card-thumb { transform: translateY(-1px); }
.artifact-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.artifact-card-title {
    font-size: 0.95rem; font-weight: 600; color: var(--t1); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artifact-card-sub { font-size: 0.76rem; color: var(--t2); line-height: 1.3; }
.artifact-card-actions {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; justify-content: center;
}
.artifact-card-btn {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--bg-h); border: 1px solid var(--border); color: var(--t2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.artifact-card-btn:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.artifact-card-btn svg { width: 16px; height: 16px; }
.artifact-card.generating .artifact-card-thumb { background: linear-gradient(135deg, rgba(var(--acc-rgb),0.18), rgba(var(--acc-rgb),0.06)); }
.artifact-card.generating .artifact-card-sub::after { content: ' • generando…'; color: var(--acc); }
.artifact-card.error { border-color: var(--danger); }
.artifact-card.error .artifact-card-thumb { background: rgba(239,68,68,0.12); color: var(--danger); }
.artifact-card.artifact-card-missing { opacity: 0.7; cursor: default; }
.artifact-card.artifact-card-missing:hover { transform: none; border-color: var(--border); box-shadow: none; }
.artifact-card.artifact-card-missing .artifact-card-thumb { color: var(--t3); }
/* Artifact card popup menu (⋮) */
.artifact-menu-wrap { position: relative; display: inline-flex; }
.artifact-menu-popup {
    position: absolute; bottom: calc(100% + 6px); right: 0;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 11px; padding: 5px; box-shadow: var(--glass);
    display: none; flex-direction: column; gap: 1px; min-width: 180px;
    z-index: 50; white-space: nowrap;
}
.artifact-menu-popup.open { display: flex; }
/* Fullscreen artifact viewer ─────────────────────────────────────────────
   Opens when the user taps an artifact card. Shows the rendered preview
   (HTML projection of the JSON source) with a back arrow and a download
   button. */
.artifact-viewer {
    position: fixed; inset: 0; z-index: 9998;
    background: var(--bg);
    display: none; flex-direction: column;
    opacity: 0; transition: opacity 0.2s;
}
.artifact-viewer.open { display: flex; opacity: 1; }
.artifact-viewer-bar {
    display: flex; align-items: center; gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-s);
    flex-shrink: 0;
}
.artifact-viewer-close, .artifact-viewer-dl {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--bg-h); border: 1px solid var(--border); color: var(--t1);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.artifact-viewer-close:hover, .artifact-viewer-dl:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.artifact-viewer-title { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 600; color: var(--t1); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artifact-viewer-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 24px 16px calc(40px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    background: var(--bg);
}
/* ── Realistic "page" container — A4-ish aspect, white sheet with shadow ── */
.art-page {
    max-width: 820px; margin: 0 auto;
    background: #ffffff; color: #1a1a1f;
    padding: 56px 64px;
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
    line-height: 1.55;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Light mode keeps the same look (already a white page). Dim/dark also keep
   a white sheet — that's how real documents look. We use real ink colors,
   not theme tokens, so the preview matches the printed/exported file. */
@media (max-width: 600px) { .art-page { padding: 32px 22px; border-radius: 0; } }
.art-doc-header { margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid #e8e8ec; }
.art-title { font-size: 2rem; font-weight: 700; margin: 0; color: #0d0d12; line-height: 1.2; letter-spacing: -0.01em; }
.art-subtitle { font-size: 1rem; color: #5e5e6a; margin: 8px 0 0; font-weight: 400; }
.art-section { margin-bottom: 24px; }
.art-h { color: #0d0d12; font-weight: 600; letter-spacing: -0.005em; }
.art-h2 { font-size: 1.35rem; margin: 28px 0 12px; }
.art-h3 { font-size: 1.08rem; margin: 22px 0 9px; }
.art-p { font-size: 1rem; line-height: 1.65; margin: 0 0 12px; color: #2a2a30; text-align: justify; hyphens: auto; }
.art-ul, .art-ol { margin: 8px 0 16px; padding-left: 24px; color: #2a2a30; }
.art-ul li, .art-ol li { margin: 5px 0; line-height: 1.6; }
.art-quote {
    margin: 14px 0 18px; padding: 12px 18px;
    background: #f6f6f9; border-left: 3px solid var(--acc);
    color: #2a2a30; font-style: italic; border-radius: 0 8px 8px 0;
}
.art-table-wrap { overflow-x: auto; margin: 14px 0 20px; border-radius: 8px; border: 1px solid #e8e8ec; }
.art-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: #2a2a30; }
.art-table th, .art-table td { padding: 9px 14px; border-bottom: 1px solid #ececf0; text-align: left; vertical-align: top; }
.art-table th { background: #f6f6f9; font-weight: 600; color: #0d0d12; }
.art-table tbody tr:last-child td { border-bottom: none; }
.art-table tbody tr:nth-child(even) td { background: #fafafd; }
.art-empty { color: #888; font-style: italic; }
/* Spreadsheet sheets */
.art-page-sheet .art-sheet-section { margin-top: 22px; }
.art-page-sheet .art-table-sheet { font-variant-numeric: tabular-nums; }
.art-page-sheet .art-table-sheet td:nth-child(n+2) { text-align: right; }
/* Presentation deck */
.art-page-deck { background: var(--bg); color: var(--t1); box-shadow: none; padding: 16px 0; }
.art-page-deck .art-doc-header { border-bottom: none; text-align: center; }
.art-page-deck .art-title { color: var(--t1); }
.art-page-deck .art-subtitle { color: var(--t2); }
.art-deck-slides { display: flex; flex-direction: column; gap: 18px; max-width: 920px; margin: 0 auto; padding: 0 16px; }
.art-slide {
    position: relative;
    background: #ffffff; color: #1a1a1f;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    box-shadow: 0 6px 22px rgba(0,0,0,0.16);
    overflow: hidden;
    padding: 40px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}
.art-slide-inner { width: 100%; max-width: 100%; }
.art-slide-num { position: absolute; top: 14px; right: 18px; font-size: 0.78rem; color: #b8b8c0; font-weight: 600; font-variant-numeric: tabular-nums; }
.art-slide-h1 { font-size: 2.6rem; font-weight: 700; margin: 0 0 14px; color: #0d0d12; line-height: 1.15; }
.art-slide-h2 { font-size: 1.55rem; font-weight: 600; margin: 0 0 16px; color: #0d0d12; line-height: 1.25; }
.art-slide-sub { font-size: 1.05rem; color: #5e5e6a; margin: 0 0 6px; }
.art-slide-author { font-size: 0.92rem; color: #7a7a85; margin: 18px 0 0; }
.art-slide-ul { margin: 0; padding-left: 22px; }
.art-slide-ul li { font-size: 1.05rem; line-height: 1.5; margin: 8px 0; color: #2a2a30; }
.art-slide-notes { margin-top: 18px; font-size: 0.85rem; color: #888; font-style: italic; border-top: 1px solid #eee; padding-top: 10px; }
.art-slide-title { background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.10), #ffffff 60%); }
.art-slide-title .art-slide-inner { text-align: center; }
.art-slide-quote .art-slide-inner { text-align: center; }
.art-slide-q { font-size: 1.6rem; font-style: italic; color: #1a1a1f; margin: 0 0 12px; line-height: 1.4; font-weight: 500; }
.art-slide-closing { background: linear-gradient(135deg, #ffffff 0%, rgba(var(--acc-rgb), 0.08) 100%); }
.art-slide-closing .art-slide-inner { text-align: center; }
.art-slide-2col .art-slide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 6px; }
.art-slide-col-h { font-size: 1.1rem; font-weight: 600; color: var(--acc); margin: 0 0 10px; }
.art-slide-col .art-slide-ul li { font-size: 0.95rem; }
@media (max-width: 600px) {
    .art-slide { padding: 24px; aspect-ratio: auto; min-height: 240px; }
    .art-slide-h1 { font-size: 1.8rem; }
    .art-slide-h2 { font-size: 1.2rem; }
    .art-slide-ul li { font-size: 0.95rem; }
    .art-slide-2col .art-slide-cols { grid-template-columns: 1fr; gap: 16px; }
}
/* ── Library fullscreen overrides ────────────────────────────────────────
   The Library shouldn't behave like a bottom-sheet modal — it's a
   primary section of the app, so it takes over the full viewport
   (mobile + desktop) and slides in horizontally rather than vertically. */
#gallery-modal {
    align-items: stretch !important;
    padding: 0 !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#gallery-modal .modal-content {
    max-width: 100% !important; width: 100% !important;
    max-height: 100vh !important; max-height: 100dvh !important;
    height: 100vh !important; height: 100dvh !important;
    border-radius: 0 !important; border: none !important;
    padding: 0 !important;
    transform: translateX(24px) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease !important;
    opacity: 0;
    display: flex; flex-direction: column;
}
#gallery-modal.active .modal-content { transform: translateX(0) !important; opacity: 1 !important; }
#gallery-modal .modal-handle { display: none !important; }
#gallery-modal .modal-header { padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 6px !important; }
#gallery-modal .library-tabs { padding: 0 18px; }
#gallery-modal [data-libpanel] { max-height: none !important; flex: 1; min-height: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 640px) {
    #gallery-modal { padding: 0 !important; align-items: stretch !important; }
    #gallery-modal .modal-content { max-width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; transform: translateX(24px) scale(1) !important; }
    #gallery-modal.active .modal-content { transform: translateX(0) scale(1) !important; }
}
@media (hover: none) { .gallery-chat-btn { opacity: 1; transform: none; } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } .gallery-chat-btn { width: 30px; height: 30px; } }

/* Assistant Message */
.message.assistant { align-items: flex-start; padding-right: 8%; padding-bottom: 38px; }
.message.assistant .msg-bubble { background: transparent; color: var(--t1); padding: 4px 0; font-size: 0.91rem; line-height: 1.6; display: block; max-width: 100%; word-wrap: break-word; word-break: break-word; }

/* Message Actions */
.msg-actions {
    position: absolute;
    left: 0;
    bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s;
    flex-wrap: wrap;
    pointer-events: none;
}
@media (hover: none) { .msg-actions { opacity: 1; } }
.message:hover .msg-actions { opacity: 1; pointer-events: auto; }
.message.user .msg-actions { left: auto; right: 0; justify-content: flex-end; }
.ma-btn {
    background: var(--bg-s); border: 1px solid var(--border); color: var(--t2);
    padding: 6px; border-radius: 9px; font-size: 0.72rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.2s;
    font-family: inherit;
}
.ma-btn:hover { background: var(--bg-h); color: var(--t1); border-color: rgba(var(--acc-rgb), 0.3); }
.ma-btn svg { width: 15px; height: 15px; }
/* Feedback states — applied to menu items (and legacy toolbar buttons if still present) */
.ma-btn.liked, .msg-menu-item.liked { color: var(--success); }
.ma-btn.liked svg, .msg-menu-item.liked svg { fill: var(--success); stroke: var(--success); }
.ma-btn.disliked, .msg-menu-item.disliked { color: var(--danger); }
.ma-btn.disliked svg, .msg-menu-item.disliked svg { fill: var(--danger); stroke: var(--danger); }
/* Three-dot "more" button — bigger, more visible than the previous tiny dots */
.ma-btn-menu svg { width: 16px; height: 16px; }
/* Popup menu for "more options" (⋮) on assistant messages.
   Assistant messages live on the LEFT side of the chat, so the ⋮ button is
   typically nearer the left edge of the viewport. Anchoring the popup with
   `right: 0` makes it extend 220px to the LEFT of the button, which used
   to push it off-screen. We now anchor with `left: 0` so it opens to the
   right of the button — the natural reading direction and the side that
   has the most room. On very narrow screens we also clamp the position. */
.msg-menu-wrap { position: relative; display: inline-flex; }
.msg-menu-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--glass);
    display: none; flex-direction: column; gap: 1px;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 24px));
    z-index: 50;
    white-space: nowrap;
}
.msg-menu-popup.open { display: flex; }
/* On narrow screens, prefer right-anchored if the button is in the right
   half of the viewport — but the simpler fallback is to let the popup wrap
   text. Keep it open to the right by default since assistant messages
   live on the left side. */
@media (max-width: 480px) {
    .msg-menu-popup { min-width: 200px; max-width: calc(100vw - 24px); }
}
.msg-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: none; background: transparent;
    color: var(--t1); font-size: 0.86rem; font-family: inherit; font-weight: 500;
    border-radius: 8px; cursor: pointer; text-align: left;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.msg-menu-item:hover { background: var(--bg-h); }
.msg-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--t2); }
.msg-menu-item:hover svg { color: var(--t1); }
.msg-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.retry-picker {
    position: absolute; bottom: calc(100% + 6px); left: 0;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 12px; padding: 4px; box-shadow: var(--glass);
    display: flex; gap: 4px; z-index: 50; white-space: nowrap;
}
/* Floating variant: attached to document.body with fixed positioning so the
   picker can never be covered by stacking contexts inside the message
   (e.g. the web-sources button). */
.retry-picker.retry-picker-floating {
    position: fixed; bottom: auto; left: 0; top: 0;
    z-index: 10000;
}
.retry-model-btn {
    background: transparent; border: 1px solid var(--border); color: var(--t2);
    padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.retry-model-btn:hover { border-color: var(--acc); color: var(--acc); }
.retry-model-btn.is-current { border-color: var(--acc); color: var(--acc); background: rgba(var(--acc-rgb),0.07); }
.retry-model-btn.is-locked { opacity: 0.5; }

/* Markdown */
.md-content { font-size: 0.91rem; line-height: 1.65; color: var(--t1); }
.md-content p { margin: 0.55em 0; }
.md-content p:first-child { margin-top: 0; }
.md-content p:last-child { margin-bottom: 0; }
.md-content strong { font-weight: 750; color: var(--t1); }
.md-content strong em, .md-content em strong { font-weight: 800; }
.md-content em { font-style: italic; }
.md-content h1 { font-size: 1.45rem; font-weight: 700; margin: 0.9em 0 0.4em; line-height: 1.2; color: var(--t1); }
.md-content h2 { font-size: 1.25rem; font-weight: 700; margin: 0.75em 0 0.35em; line-height: 1.25; color: var(--t1); }
.md-content h3 { font-size: 1.05rem; font-weight: 600; margin: 0.6em 0 0.28em; line-height: 1.3; color: var(--t1); }
.md-content h4 { font-size: 0.96rem; font-weight: 600; margin: 0.5em 0 0.2em; color: var(--t1); }
.md-content ul { padding-left: 1.35em; margin: 0.55em 0; display: flex; flex-direction: column; gap: 0.25em; list-style-type: disc; }
.md-content ol { padding-left: 1.55em; margin: 0.55em 0; display: block; list-style-type: decimal; }
.md-content ol li { display: list-item; line-height: 1.6; margin-bottom: 0.25em; list-style-type: decimal; }
.md-content ul li { line-height: 1.6; }
.md-content ul ul, .md-content ol ol, .md-content ul ol, .md-content ol ul { margin: 0.2em 0 0.2em 1.1em; padding-left: 1em; }
.md-content li > p { margin: 0.25em 0; }
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 0.9em 0; }
.md-content blockquote { border-left: 3px solid var(--acc); padding: 7px 13px; margin: 0.5em 0; color: var(--t2); background: rgba(var(--acc-rgb), 0.04); border-radius: 0 8px 8px 0; }
.md-content img.md-image { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0.55em 0; cursor: zoom-in; border: 1px solid rgba(255,255,255,0.06);
    /* Block Android WebView's long-press "Save image" menu, which triggers the
       native DownloadManager and leaves a persistent notification we can't
       dismiss from JS. Users can still tap to open the lightbox. */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
.acc-light-mode .md-content img.md-image { border-color: rgba(0,0,0,0.10) !important; }
.md-content .md-image-expired { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 10px; color: var(--t2); font-size: 0.85rem; margin: 0.55em 0; background: var(--bg-s); }
.nolo-image-deck-card { display:flex; align-items:center; gap:14px; padding:16px; margin:.55em 0; border:1px solid rgba(var(--acc-rgb),.26); background:linear-gradient(145deg, rgba(var(--acc-rgb),.13), rgba(255,255,255,.035)); border-radius:18px; cursor:pointer; box-shadow:0 16px 44px rgba(0,0,0,.18); }
.nolo-image-deck-card:hover { border-color:rgba(var(--acc-rgb),.55); transform:translateY(-1px); }
.nolo-image-deck-icon { width:48px; height:48px; flex:0 0 48px; border-radius:15px; display:grid; place-items:center; background:rgba(var(--acc-rgb),.18); color:var(--acc); }
.nolo-image-deck-title { font-weight:800; color:var(--t1); line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.nolo-image-deck-sub { margin-top:4px; font-size:.8rem; color:var(--t2); }
.nolo-image-deck-progress { padding:18px; border:1px solid rgba(var(--acc-rgb),.24); border-radius:18px; background:linear-gradient(145deg, rgba(var(--acc-rgb),.12), rgba(255,255,255,.035)); min-width:min(520px, 100%); }
.nolo-image-deck-progress-head { display:flex; align-items:center; justify-content:space-between; gap:14px; font-weight:850; color:var(--t1); margin-bottom:12px; }
.nolo-image-deck-bar { height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); }
.nolo-image-deck-fill { height:100%; border-radius:inherit; background:var(--acc-g); transition:width .25s ease; }
.nolo-image-deck-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; margin-top:13px; }
.nolo-image-deck-dot { aspect-ratio:16/10; border-radius:7px; border:1px solid var(--border); background:rgba(255,255,255,.045); }
.nolo-image-deck-dot.done { border-color:rgba(var(--acc-rgb),.6); background:rgba(var(--acc-rgb),.22); }
.nolo-image-deck-card.pending { align-items:stretch; cursor:default; }
.nolo-image-deck-card.pending .nolo-image-deck-progress-mini { margin-top:10px; height:7px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid var(--border); }
.nolo-image-deck-card.pending .nolo-image-deck-progress-mini span { display:block; height:100%; width:var(--deck-progress, 3%); min-width:3%; border-radius:inherit; background:var(--acc-g); transition:width .35s ease; box-shadow:0 0 18px rgba(var(--acc-rgb),.28); }
.nolo-image-deck-card.pending .nolo-image-deck-icon { animation:noloDeckIconPulse 1.2s ease-in-out infinite; }
@keyframes noloDeckIconPulse { 0%,100% { box-shadow:0 0 0 rgba(var(--acc-rgb),0); } 50% { box-shadow:0 0 28px rgba(var(--acc-rgb),.26); } }
.nolo-image-deck-viewer { position:fixed; inset:0; z-index:1300; display:none; flex-direction:column; background:var(--bg); }
.nolo-image-deck-viewer.active { display:flex; }
.nolo-image-deck-topbar { height:62px; flex:0 0 62px; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--border); background:rgba(12,12,16,.92); backdrop-filter:blur(18px); }
.nolo-image-deck-topbar h3 { flex:1; min-width:0; margin:0; font-size:.95rem; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nolo-image-deck-btn { border:1px solid var(--border); background:var(--bg-h); color:var(--t1); border-radius:999px; min-height:36px; padding:0 13px; font-weight:800; cursor:pointer; }
.nolo-image-deck-btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.nolo-image-deck-body { flex:1; min-height:0; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:18px; align-items:center; }
.nolo-image-deck-slide { width:min(1280px, 100%); flex:0 0 auto; border-radius:0; overflow:hidden; background:#111; box-shadow:0 16px 52px rgba(0,0,0,.38); line-height:0; }
.nolo-image-deck-slide img { width:100%; height:auto; display:block; object-fit:contain; }
.nolo-image-deck-page { color:var(--t2); font-size:.78rem; align-self:flex-end; margin-top:-12px; width:min(1040px, 100%); text-align:right; }
@media (max-width: 640px) {
    .nolo-image-deck-topbar { height:58px; padding:0 10px; gap:7px; }
    .nolo-image-deck-btn { min-height:34px; padding:0 10px; font-size:.78rem; }
    .nolo-image-deck-body { padding:12px 8px; gap:12px; }
}
.md-content a { color: var(--acc); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.md-content a:hover { border-bottom-color: var(--acc); }

/* Tables — fix word wrapping and column sizing */
.table-block { margin: 0.8em 0; }
.table-block .table-wrapper { margin: 0; }
.table-wrapper { overflow-x: auto; margin: 0.8em 0; border-radius: 12px; border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.md-content table { border-collapse: collapse; font-size: 0.875rem; table-layout: auto; width: 100%; }
.md-content thead { background: var(--bg-h); }
.md-content th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--t2); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.md-content td { padding: 13px 16px; border-bottom: 1px solid var(--border); line-height: 1.55; word-break: normal; overflow-wrap: normal; hyphens: none; }
.md-content tbody tr:hover td { background: rgba(var(--acc-rgb), 0.03); transition: background 0.1s; }
.md-content tr:last-child td { border-bottom: none; }
.md-content tr:hover td { background: rgba(var(--acc-rgb), 0.03); }

/* Sources — single toggle button with favicon stack preview */
.sources-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-h); border: 1px solid var(--border);
    border-radius: 999px; padding: 6px 12px 6px 8px; margin-top: 10px;
    font-size: 0.8rem; font-weight: 600; color: var(--t1);
    cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; font-family: inherit;
}
.sources-btn:hover { border-color: var(--acc); background: var(--bg-s); transform: translateY(-1px); }
.sources-btn-favs { display: inline-flex; align-items: center; }
.sources-btn-favs img {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--bg); background: var(--bg-s);
    margin-left: -6px; object-fit: contain;
}
.sources-btn-favs img:first-child { margin-left: 0; }
.sources-btn-label { color: var(--t1); font-weight: 600; }
.sources-btn-count {
    background: rgba(var(--acc-rgb), 0.18); color: var(--acc);
    border-radius: 999px; padding: 1px 7px; font-size: 0.7rem; font-weight: 700;
}
.sources-btn-chevron { color: var(--t2); transition: transform 0.2s; }
.sources-btn.open .sources-btn-chevron { transform: rotate(180deg); }
/* Sources floating mini-menu (opens from the trigger button) */
.sources-wrap { position: relative; display: inline-block; }
.sources-popup {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 240px; max-width: 320px; max-height: 320px;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 14px; padding: 6px; box-shadow: var(--glass);
    display: none; flex-direction: column; gap: 2px;
    z-index: 50; overflow-y: auto;
    animation: sources-popup-in 0.16s ease;
}
.sources-popup.open { display: flex; }
@keyframes sources-popup-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sources-popup-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 9px;
    text-decoration: none; color: var(--t1);
    transition: background 0.12s;
    min-width: 0;
}
.sources-popup-item:hover { background: var(--bg-h); }
.sources-popup-fav, .sources-popup-fav-fb {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-h); object-fit: contain;
}
.sources-popup-fav-fb {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--acc);
}
.sources-popup-fav-fb svg { width: 10px; height: 10px; }
.sources-popup-domain {
    font-size: 0.84rem; font-weight: 500; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sources-panel {
    display: none; flex-direction: column;
    margin-top: 6px; border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; background: var(--bg-s);
}
.sources-panel.open { display: flex; }
.source-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.15s;
    min-width: 0;
}
.source-item:last-child { border-bottom: none; }
.source-item:hover { background: rgba(var(--acc-rgb), 0.06); }
.source-favicon {
    width: 24px; height: 24px; border-radius: 6px;
    flex-shrink: 0; background: var(--bg-h); padding: 3px;
    object-fit: contain; box-sizing: border-box;
}
.source-favicon-fallback {
    width: 24px; height: 24px; border-radius: 6px;
    flex-shrink: 0; background: rgba(var(--acc-rgb), 0.14);
    display: flex; align-items: center; justify-content: center;
    color: var(--acc);
}
.source-favicon-fallback svg { width: 12px; height: 12px; }
.source-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.source-title {
    font-size: 0.9rem; font-weight: 500; color: var(--t1); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-domain {
    font-size: 0.74rem; color: var(--t2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-arrow { color: var(--t2); flex-shrink: 0; opacity: 0.5; }
.source-item:hover .source-arrow { opacity: 1; color: var(--acc); }

/* Scroll-to-bottom button */
.scroll-bottom-btn {
    position: absolute; bottom: calc(120px + var(--kb, 0px)); left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-s); border: 1px solid var(--border);
    color: var(--t2); cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
}
.scroll-bottom-btn.visible { display: flex; }
.scroll-bottom-btn:hover { border-color: var(--acc); color: var(--acc); }

/* Retry model picker */

/* Code Blocks */
.code-block { position: relative; margin: 0.7em 0; border-radius: 11px; border: 1px solid var(--border); background: #1a1a1d; }
.code-header { display: flex; align-items: center; background: #242428; padding: 6px 13px; font-size: 0.72rem; color: #909090; border-radius: 11px 11px 0 0; }
.code-lang { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.code-header-btns { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.2s; z-index: 3; }
.code-copy-btn, .code-preview-btn { background: #2a2a2e; border: 1px solid #505050; color: #c0c0c0; font-size: 0.68rem; padding: 3px 9px; border-radius: 5px; cursor: pointer; transition: border-color 0.2s, color 0.2s; font-family: inherit; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.code-block:hover .code-header-btns { opacity: 1; }
.code-copy-btn:hover { border-color: #fff; color: #fff; }
.code-copy-btn.copied { color: #4ade80; border-color: #4ade80; }
.code-preview-btn:hover { border-color: var(--acc); color: var(--acc); }
@media (hover: none) { .code-header-btns { opacity: 1; } }
.code-block pre { margin: 0; overflow-x: auto; padding: 0; }
.code-block pre code { font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; font-size: 0.83rem; line-height: 1.6; padding: 13px 15px; display: block; color: #e2e2e2; }
.md-content code:not(pre code) { background: var(--bg-h); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; font-size: 0.83em; font-family: 'Fira Code', 'Consolas', monospace; color: var(--acc); word-break: break-all; }
/* Code block light-mode overrides */
[data-theme="light"] .code-block { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .code-header { background: #eaedf2; color: #57606a; }
[data-theme="light"] .code-copy-btn, [data-theme="light"] .code-preview-btn { background: #f6f8fa; border-color: #c0c4cc; color: #57606a; }
[data-theme="light"] .code-copy-btn:hover { border-color: #24292e; color: #24292e; }
[data-theme="light"] .code-preview-btn:hover { border-color: var(--acc); color: var(--acc); }
[data-theme="light"] .code-block pre code { color: #24292e; }

/* Personality selector */
.pers-select-btn { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border:1.5px solid var(--border); border-radius:11px; background:var(--bg-h); color:var(--t1); font-size:0.88rem; font-weight:500; cursor:pointer; font-family:inherit; width:100%; margin-top:8px; transition:border-color 0.15s; -webkit-tap-highlight-color:transparent; }
.pers-select-btn:hover { border-color:var(--acc); }
.pers-select-btn.open { border-color:var(--acc); border-radius:11px 11px 0 0; }
.pers-select-chevron { color:var(--t2); transition:transform 0.2s; flex-shrink:0; }
.pers-select-btn.open .pers-select-chevron { transform:rotate(180deg); }
.pers-panel { display:none; border:1.5px solid var(--acc); border-top:none; border-radius:0 0 11px 11px; overflow:hidden; background:var(--bg-s); }
.pers-panel.open { display:block; }
.pers-panel-item { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; transition:background 0.12s; border-top:1px solid var(--border); -webkit-tap-highlight-color:transparent; }
.pers-panel-item:first-child { border-top:none; }
.pers-panel-item:hover { background:var(--bg-h); }
.pers-panel-item.active { background:rgba(var(--acc-rgb),0.07); }
.pers-panel-check { width:16px; height:16px; flex-shrink:0; color:var(--acc); opacity:0; }
.pers-panel-item.active .pers-panel-check { opacity:1; }
.pers-panel-info { flex:1; min-width:0; }
.pers-panel-name { font-size:0.86rem; font-weight:500; color:var(--t1); }
.pers-panel-desc { font-size:0.73rem; color:var(--t2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pers-panel-actions { display:flex; gap:2px; flex-shrink:0; }
.pers-panel-act-btn { width:28px; height:28px; border-radius:7px; border:none; background:transparent; color:var(--t2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.12s; }
.pers-panel-act-btn:hover { background:var(--bg-h); color:var(--t1); }
.pers-panel-sep { height:1px; background:var(--border); margin:4px 0; }
.pers-panel-add { display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer; color:var(--acc); font-size:0.84rem; font-family:inherit; border:none; background:transparent; width:100%; transition:background 0.12s; border-top:1px solid var(--border); }
.pers-panel-add:hover { background:var(--bg-h); }
.custom-pers-name { font-size:0.86rem; font-weight:600; color:var(--t1); }

/* Artifact Card (in chat) */
.artifact-card { display:flex; align-items:center; gap:14px; background:var(--bg-h); border:1px solid var(--border); border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color 0.15s; margin:0.6em 0; user-select:none; -webkit-tap-highlight-color:transparent; }
.artifact-card.artifact-building { cursor:default; border-color:rgba(var(--acc-rgb), 0.35); }
.artifact-card.artifact-building .artifact-card-title { color:var(--acc); }
.artifact-building-spinner svg { animation: spin 1s linear infinite; color:var(--acc); }
.artifact-card:hover { border-color:var(--acc); }
.artifact-card:active { opacity:0.8; }
.artifact-card-info { flex:1; min-width:0; }
.artifact-card-title { font-size:0.95rem; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artifact-card-sub { font-size:0.75rem; color:var(--t2); margin-top:3px; }
.artifact-card-icon { width:46px; height:46px; background:var(--bg-s); border-radius:11px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--t2); flex-shrink:0; }

/* Artifact Overlay */
.artifact-overlay { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background:var(--bg-s); display:flex; flex-direction:column; transform:translateY(102%); transition:transform 0.32s cubic-bezier(0.32,0.72,0,1); }
.artifact-overlay.active { transform:translateY(0); }
.artifact-topbar { display:flex; align-items:center; height:50px; padding:0 6px; padding-top:env(safe-area-inset-top, 0px); background:var(--bg-s); border-bottom:1px solid var(--border); flex-shrink:0; gap:0; }
.artifact-topbar-btn { width:42px; height:42px; border-radius:10px; border:none; background:transparent; color:var(--t1); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
.artifact-topbar-btn:hover { background:var(--bg-h); }
.artifact-title-text { flex:1; text-align:center; font-size:0.88rem; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
.artifact-body { flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.artifact-iframe { width:100%; flex:1; border:none; display:block; background:#fff; min-height:0; }
.artifact-code-view { flex:1; overflow:auto; background:#282c34; display:none; min-height:0; }
.artifact-code-view pre { margin:0; padding:18px 20px; }
.artifact-code-view code { font-family:'Fira Code','Cascadia Code','Consolas',monospace; font-size:0.83rem; line-height:1.6; white-space:pre; display:block; background:transparent !important; }
[data-theme="light"] .artifact-code-view { background:#282c34; }
.artifact-console { flex:0 0 180px; display:flex; flex-direction:column; background:#0d0d12; border-top:1px solid rgba(255,255,255,0.08); min-height:0; }
.artifact-console-head { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.artifact-console-title { flex:1; font-size:0.75rem; font-weight:600; letter-spacing:0.03em; color:#d0d0dc; text-transform:uppercase; }
.artifact-console-clear, .artifact-console-close { background:transparent; border:none; color:#8888a0; padding:4px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.artifact-console-clear:hover, .artifact-console-close:hover { color:#fff; background:rgba(255,255,255,0.07); }
.artifact-console-body { flex:1; overflow-y:auto; padding:6px 12px 10px; font-family:'Fira Code','Cascadia Code','Consolas',monospace; font-size:0.78rem; line-height:1.55; color:#d0d0dc; }
.artifact-console-line { display:flex; gap:8px; padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.03); white-space:pre-wrap; word-break:break-word; }
.artifact-console-line:last-child { border-bottom:none; }
.artifact-console-line.log   { color:#d0d0dc; }
.artifact-console-line.info  { color:#76c3f7; }
.artifact-console-line.warn  { color:#f5c97a; }
.artifact-console-line.error { color:#ff7b88; }
.artifact-console-line.debug { color:#8888a0; }
.artifact-console-line .lvl { flex-shrink:0; font-weight:600; opacity:0.75; min-width:52px; text-transform:uppercase; font-size:0.7rem; }


/* Chat search bar */
#btn-search { position:fixed; top:68px; right:16px; z-index:39; background:transparent; border:1px solid color-mix(in srgb, var(--border) 30%, transparent); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:color-mix(in srgb, var(--t2) 45%, transparent); opacity:0.55; transition:opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s; padding:0; }
#btn-search:hover { opacity:1; color:var(--t1); border-color:var(--acc); background:var(--bg-h); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#btn-search.active { opacity:1; color:var(--acc); border-color:var(--acc); background:var(--bg-h); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.no-search-btn #btn-search { display:none !important; }
.chat-search-bar { display:none; align-items:center; gap:8px; padding:13px 14px; background:var(--bg-s); position:relative; z-index:50; }
.chat-search-input { flex:1; background:var(--bg-h); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--t1); font-size:1rem; font-family:inherit; outline:none; transition:border-color 0.2s; min-width:0; -webkit-appearance:none; }
.chat-search-input:focus { border-color:var(--acc); }
.chat-search-count { font-size:0.78rem; color:var(--t2); white-space:nowrap; min-width:36px; text-align:center; }
.chat-search-nav { background:none; border:none; color:var(--t2); cursor:pointer; padding:4px 6px; border-radius:6px; font-size:0.85rem; line-height:1; transition:color 0.15s; }
.chat-search-nav:hover { color:var(--t1); }
mark.search-hl { background:rgba(var(--acc-rgb),0.35); color:inherit; border-radius:3px; padding:0 1px; }
mark.search-hl-active { background:rgba(var(--acc-rgb),0.75); color:#fff; }

/* Font scale */
:root { --font-scale: 1; font-size: calc(16px * var(--font-scale)); }
.msg-bubble { font-size: 0.97rem; }
.md-content { font-size: 0.97rem; }

/* Projects */
.new-project-btn { display:flex; align-items:center; gap:9px; width:100%; background:var(--bg-s); border:1px solid var(--border); border-radius:10px; padding:9px 12px; cursor:pointer; color:var(--t2); font-size:0.82rem; font-weight:500; font-family:inherit; transition:background 0.15s, color 0.15s, border-color 0.15s; margin-bottom:6px; }
.new-project-btn:hover { background:var(--bg-h); color:var(--t1); }
.new-project-btn svg { color: var(--t2); transition: color 0.15s; flex-shrink: 0; }
.new-project-btn:hover svg { color: var(--t1); }
.project-group { display:flex; flex-direction:column; margin-bottom:2px; }
.project-header { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:9px; cursor:pointer; border:1px solid transparent; transition:all 0.15s; user-select:none; }
.project-header:hover { background:var(--bg-h); }
.project-chevron { color:var(--t2); transition:transform 0.2s; flex-shrink:0; display:flex; }
.project-header.collapsed .project-chevron { transform:rotate(-90deg); }
.project-name { flex:1; font-size:0.83rem; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-actions { display:flex; gap:2px; opacity:0; transition:opacity 0.15s; flex-shrink:0; }
.project-header:hover .project-actions { opacity:1; }
@media (hover: none) { .project-actions { display:none; } }
.project-action-btn { width:20px; height:20px; border-radius:4px; background:transparent; border:none; color:var(--t2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; padding:0; }
.project-action-btn:hover { background:var(--bg-s); color:var(--t1); }
.project-action-btn.del:hover { background:rgba(239,68,68,0.12); color:var(--danger); }
.project-chats { display:flex; flex-direction:column; gap:2px; padding-left:10px; }
.project-header.collapsed + .project-chats { display:none; }
.projects-section { margin-bottom:2px; }
.projects-section-header { display:flex; align-items:center; gap:6px; padding:4px 8px 4px 6px; border-radius:9px; cursor:pointer; user-select:none; transition:color 0.15s; }
.projects-section-header:hover { background:var(--bg-h); }
.projects-section-label { flex:1; font-size:0.75rem; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:0.05em; }
.projects-section-count { background:var(--bg-h); border-radius:10px; padding:1px 6px; font-size:0.68rem; color:var(--t2); flex-shrink:0; }
.projects-section-chevron { color:var(--t2); transition:transform 0.2s; display:flex; flex-shrink:0; }
.projects-section-header.collapsed .projects-section-chevron { transform:rotate(-90deg); }
.projects-section-body { display:flex; flex-direction:column; }
.projects-section-header.collapsed + .projects-section-body { display:none; }
.project-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; overflow-y:auto; padding:20px 0; }
.project-modal-overlay.active { opacity:1; pointer-events:auto; }
.project-modal { background:var(--bg-s); border:1px solid var(--border); border-radius:16px; padding:24px; width:min(340px,90vw); display:flex; flex-direction:column; gap:14px; margin:auto; }
.project-modal h3 { font-size:1rem; font-weight:600; color:var(--t1); margin:0; }
.project-modal input { background:var(--bg-h); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--t1); font-size:0.9rem; font-family:inherit; outline:none; width:100%; box-sizing:border-box; -webkit-appearance:none; }
.project-modal input::-webkit-search-cancel-button { display:none; }
.project-modal input:focus { border-color:var(--acc); }
.project-modal textarea { background:var(--bg-h); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--t1); font-size:0.85rem; font-family:inherit; outline:none; width:100%; box-sizing:border-box; resize:vertical; min-height:80px; }
.project-modal textarea:focus { border-color:var(--acc); }
.project-modal form { display:flex; flex-direction:column; gap:14px; }
.project-modal label { font-size:0.78rem; color:var(--t2); margin-bottom:-8px; }
.custom-pers-temp-row { display:flex; flex-direction:column; gap:6px; padding:4px 2px 0; }
.custom-pers-temp-head { display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--t2); }
.custom-pers-temp-value { color:var(--acc); font-weight:600; font-variant-numeric:tabular-nums; }
.custom-pers-temp-row input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:4px; background:var(--bg-h); border-radius:999px; outline:none; padding:0; border:none; margin:0; }
.custom-pers-temp-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--acc); cursor:pointer; border:2px solid var(--bg-s); box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.custom-pers-temp-row input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--acc); cursor:pointer; border:2px solid var(--bg-s); }
.custom-pers-temp-legend { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--t2); opacity:0.7; }
.project-modal-btns { display:flex; gap:8px; justify-content:flex-end; }
.project-modal-btns button { padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:500; }
.project-modal-cancel { background:var(--bg-h); color:var(--t2); }
.project-modal-save { background:var(--acc-g); color:#fff; }
.assign-project-list { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; }
.assign-project-item { padding:8px 12px; border-radius:8px; cursor:pointer; font-size:0.85rem; color:var(--t1); transition:background 0.15s; }
.assign-project-item:hover { background:var(--bg-h); }
.assign-project-item.active { background:var(--bg-h); color:var(--acc); font-weight:500; }
.assign-project-item.none { color:var(--t2); }

/* KaTeX */
.katex-block { overflow-x: auto; padding: 0.4em 0; text-align: center; margin: 0.4em 0; }
.katex-display { margin: 0 !important; }

/* Streaming */
.streaming-cursor::after { content: '▋'; animation: blink 0.75s infinite; color: var(--acc); font-size: 1em; margin-left: 2px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.typing-dots { display: none; padding: 14px 18px; align-items: center; gap: 10px; }
.typing-dots .dots { display: flex; gap: 6px; align-items: center; }
.typing-dots .dot { width: 6px; height: 6px; background: var(--acc); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.typing-dots .img-processing-text { display: none; font-size: 0.75rem; color: var(--t2); font-weight: 600; white-space: nowrap; }
.typing-dots .img-processing-text.visible { display: inline-flex; }

/* Inline typing (inside message bubble) */
.inline-typing-dots { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; }
.inline-typing-dots .dot { width: 6px; height: 6px; background: var(--acc); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.inline-typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.inline-typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }

.nolo-tool-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, 100%);
    margin: 4px 0 8px;
    padding: 11px 13px;
    border-radius: 15px;
    border: 1px solid rgba(var(--acc-rgb), 0.22);
    background:
        linear-gradient(135deg, rgba(var(--acc-rgb), 0.13), rgba(var(--acc-rgb), 0.045)),
        var(--bg-s);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    color: var(--t1);
}
.nolo-tool-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(var(--acc-rgb), 0.16);
    color: var(--acc);
}
.nolo-tool-icon svg { width: 18px; height: 18px; }
.nolo-tool-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nolo-tool-title { font-size: 0.82rem; font-weight: 780; line-height: 1.2; color: var(--t1); }
.nolo-tool-sub { font-size: 0.73rem; line-height: 1.25; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nolo-tool-card .inline-typing-dots { flex: 0 0 auto; padding: 0; }
@media (max-width: 640px) {
    .nolo-tool-card { width: 100%; padding: 12px; border-radius: 16px; }
    .nolo-tool-sub { white-space: normal; }
}

/* Image-generation skeleton (visible while FAL renders the image).
   220×220 box with a shimmer gradient sweeping horizontally, plus a centered
   photo icon and a small label below. */
.image-gen-skeleton {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px; margin: 8px 0;
    /* Explicit width so the (shrink-wrapped) assistant bubble expands to fit
       the skeleton instead of collapsing it to its intrinsic (~0) width. */
    width: min(520px, calc(100vw - 48px));
    max-width: 560px;
}
.image-gen-skeleton-box {
    position: relative;
    width: 100%;
    aspect-ratio: var(--img-gen-ratio, 1 / 1);
    min-width: 260px;
    max-width: 560px;
    border-radius: 14px;
    background: linear-gradient(90deg,
        var(--bg-s) 0%,
        var(--bg-h) 40%,
        rgba(var(--acc-rgb), 0.18) 50%,
        var(--bg-h) 60%,
        var(--bg-s) 100%);
    background-size: 200% 100%;
    animation: imgGenShimmer 1.5s linear infinite;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.image-gen-skeleton-icon { color: var(--t2); opacity: 0.55; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.25)); }
.image-gen-skeleton-label { font-size: 0.78rem; font-weight: 600; color: var(--t2); letter-spacing: 0.01em; }
@keyframes imgGenShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .image-gen-skeleton-box { animation: none; background: var(--bg-s); }
}


/* Empty State — rediseñada: pulso privacidad + saludo contextual + chips */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--t2); padding: 40px 20px; gap: 12px; margin-top: 15vh; }
.empty-state h1 {
    font-size: 2.6rem; font-weight: 800; letter-spacing: -0.05em;
    background: var(--acc-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 4px;
    margin: 0;
}
.empty-state p { font-size: 0.91rem; max-width: 280px; line-height: 1.6; }

/* Saludo contextual — reemplaza "No logs. No traces" */
.empty-greeting {
    font-size: 1rem; color: var(--t2);
    max-width: 340px; line-height: 1.5;
    margin: 2px 0 10px;
    font-weight: 400;
}
.empty-greeting strong { color: var(--t1); font-weight: 600; }

/* Chips de arranque — rellenan input al clicar, nunca envían solos */
.empty-chips {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; max-width: 480px; padding: 4px 8px 0;
}
.empty-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; font-size: 0.82rem;
    background: var(--bg-s); color: var(--t1);
    border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; font-family: inherit;
    transition: transform 0.2s var(--ease-std, cubic-bezier(.4,0,.2,1)),
                border-color 0.2s, background 0.2s, color 0.2s;
    white-space: nowrap;
    animation: fadeIn 0.45s var(--ease-std, cubic-bezier(.4,0,.2,1)) both;
}
.empty-chip svg { opacity: 0.65; flex-shrink: 0; transition: opacity 0.2s, color 0.2s; }
.empty-chip:hover {
    border-color: var(--acc);
    background: rgba(var(--acc-rgb), 0.07);
    transform: translateY(-1px);
}
.empty-chip:hover svg { opacity: 1; color: var(--acc); }
.empty-chip:active { transform: translateY(0) scale(0.97); }
/* Stagger la entrada de los chips */
.empty-chip:nth-child(1) { animation-delay: 0.18s; }
.empty-chip:nth-child(2) { animation-delay: 0.24s; }
.empty-chip:nth-child(3) { animation-delay: 0.30s; }
.empty-chip:nth-child(4) { animation-delay: 0.36s; }
.empty-chip:nth-child(5) { animation-delay: 0.42s; }

@media (max-width: 500px) {
    .empty-state { margin-top: 12vh; gap: 10px; }
    .empty-chip { padding: 7px 12px; font-size: 0.78rem; }
    .empty-greeting { font-size: 0.94rem; }
}

/* ==========================================================================
   INPUT AREA
   ========================================================================== */
.input-wrapper {
    padding: 14px 14px;
    /* The padding-bottom keeps the input box safely above the iOS home
       indicator and above the on-screen keyboard. Two variables feed it:
       - env(safe-area-inset-bottom): the device's home-indicator strip
         height (0 on browsers without a notch).
       - var(--kb): the on-screen keyboard height in px, computed by
         updateKeyboardInset() from visualViewport.
       The fallback 14px is intentionally conservative so the bar is never
       flush with the screen edge even before JS / env() initialize. */
    padding-bottom: calc(max(14px, env(safe-area-inset-bottom, 14px)) + var(--kb, 0px));
    background: linear-gradient(to top, var(--bg) 80%, transparent);
    z-index: 20;
}
.input-container { max-width: 800px; margin: 0 auto; position: relative; }
@media (min-width: 1280px) { .input-container { max-width: 1080px; } }

/* Chat Pin Bar */
.chat-pin-bar { display: none; align-items: center; gap: 6px; font-size: 0.73rem; color: var(--acc); padding: 0 4px 6px 4px; }
.chat-pin-bar.visible { display: flex; }
.pin-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; font-style: italic; }
.pin-clear { background: rgba(var(--acc-rgb), 0.1); border: none; color: var(--acc); cursor: pointer; padding: 4px; border-radius: 5px; display: flex; align-items: center; transition: background 0.2s; }
.pin-clear:hover { background: rgba(var(--acc-rgb), 0.2); }

/* Edit mode bar */
.edit-mode-bar { display: none; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.18); border-radius: 9px; padding: 7px 13px; margin-bottom: 7px; font-size: 0.78rem; color: var(--warn); align-items: center; gap: 10px; }
.edit-mode-bar.visible { display: flex; }
.edit-mode-bar .cancel-edit-btn { background: transparent; border: none; color: var(--warn); cursor: pointer; font-size: 0.78rem; font-weight: 600; text-decoration: underline; margin-left: auto; font-family: inherit; }

/* Input Box */
.input-box {
    background: var(--bg-s); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--glass); padding: 10px 10px 10px 14px;
    display: flex; flex-direction: column; transition: border-color 0.2s;
}
.input-box:focus-within { border-color: rgba(var(--acc-rgb), 0.45); }

/* Drag-over state */
.input-box.drag-over { border-color: var(--acc); border-style: dashed; background: rgba(var(--acc-rgb), 0.04); }

/* Attach Previews — horizontal scrollable row (no wrapping) */
.attach-previews {
    display: flex; flex-wrap: nowrap; gap: 7px; margin-bottom: 9px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
}
.attach-previews::-webkit-scrollbar { display: none; }
.attach-preview {
    position: relative; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    background: var(--bg-h); border: 1px solid var(--border); border-radius: 9px;
    padding: 6px 9px; font-size: 0.75rem; color: var(--t1); font-weight: 500;
    max-width: 220px;
}
.attach-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.attach-preview .att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.attach-preview .att-remove {
    background: transparent; border: none; color: var(--t2); cursor: pointer;
    border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center;
    justify-content: center; transition: all 0.2s; flex-shrink: 0; padding: 0;
}
.attach-preview .att-remove:hover { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.attach-doc-icon { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; flex-shrink: 0; }
.icon-pdf { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.icon-txt { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.icon-doc { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

.input-row { display: flex; align-items: flex-end; gap: 7px; }
textarea#user-input { flex: 1; background: transparent; border: none; color: var(--t1); font-size: 0.91rem; resize: none; max-height: 140px; padding: 6px 0; outline: none; line-height: 1.5; font-family: inherit; }
textarea#user-input::placeholder { color: var(--t2); }

.input-btns { display: flex; align-items: center; gap: 5px; padding-bottom: 2px; }
.inp-btn { width: 36px; height: 36px; border-radius: 11px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg-h); color: var(--t2); transition: all 0.2s; flex-shrink: 0; }
.inp-btn:hover { background: var(--border); color: var(--t1); }
/* Send — minimal: cuadrado redondeado como el botón del micro; disabled = outline fino y discreto */
.inp-btn.send { width: 36px; height: 36px; border-radius: 11px; background: var(--t1); color: var(--bg); border: 1.5px solid var(--t1); box-sizing: border-box; }
.inp-btn.send:disabled { background: transparent; color: var(--t3, var(--t2)); border: 1px solid var(--border); opacity: 0.85; cursor: not-allowed; }
.inp-btn.send:not(:disabled):hover { opacity: 0.88; }

/* Thinking toggle (dentro del menú "+") */
#attach-thinking-btn { width: 100%; background: transparent; border: none; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }
#attach-thinking-btn.active .attach-thinking-pill { background: var(--acc); color: #fff; border-color: transparent; }
#attach-thinking-btn.active { background: rgba(var(--acc-rgb), 0.08); }
.attach-thinking-pill { margin-left: auto; font-size: 0.66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--t2); letter-spacing: 0.04em; background: var(--bg-s); transition: all 0.15s; }
#attach-thinking-btn.locked { opacity: 0.62; }
#attach-thinking-btn.locked .attach-thinking-pill { display: none; }
#attach-thinking-btn.locked .attach-thinking-lock { display: block !important; margin-left: auto; color: var(--t2); }

/* Reasoning block (collapsible "thinking" section above assistant content) */
.reasoning-wrap { margin: 0 0 10px 0; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.015); overflow: hidden; }
.reasoning-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; padding: 9px 13px; color: var(--t2); cursor: pointer; font-size: 0.78rem; font-family: inherit; font-weight: 500; text-align: left; transition: color 0.15s; }
.reasoning-toggle:hover { color: var(--t1); }
.reasoning-toggle .reasoning-arrow { width: 12px; height: 12px; transition: transform 0.2s; flex-shrink: 0; }
.reasoning-wrap.open .reasoning-toggle .reasoning-arrow { transform: rotate(90deg); }
.reasoning-toggle .reasoning-label { flex: 1; }
.reasoning-toggle .reasoning-spark { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; }
.reasoning-toggle .reasoning-timer { font-size: 0.7rem; color: var(--t2); opacity: 0.6; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.reasoning-wrap.streaming .reasoning-toggle .reasoning-spark { animation: rPulse 1.4s ease-in-out infinite; }
@keyframes rPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.reasoning-body { display: none; padding: 4px 14px 12px 14px; font-size: 0.8rem; line-height: 1.55; color: var(--t2); white-space: pre-wrap; word-wrap: break-word; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--border); font-family: 'Fira Code', 'Consolas', monospace; }
.reasoning-wrap.open .reasoning-body { display: block; }
.reasoning-loop-notice { font-size: 0.75rem; color: var(--danger, #ef4444); opacity: 0.8; padding: 4px 0; }
[data-theme="light"] .reasoning-wrap { background: rgba(0,0,0,0.02); }

.input-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding: 0 2px; }
.char-count { font-size: 0.68rem; color: var(--t2); font-weight: 500; }
.ai-disclaimer-footer {
    text-align: center; font-size: 0.65rem; color: var(--t2); opacity: 0.55;
    padding: 7px 0 2px; margin: 0; user-select: none; pointer-events: none;
}
.continue-btn { margin-top: 8px; border: 1.5px dashed var(--acc); color: var(--acc); background: transparent; }
.continue-btn:hover { background: var(--acc); color: #fff; }
.char-count.warn { color: var(--warn); }
.char-count.danger { color: var(--danger); font-weight: 700; }

/* Drop overlay for drag-and-drop */
.drop-overlay {
    position: fixed; inset: 0; background: rgba(var(--acc-rgb), 0.08);
    border: 2px dashed var(--acc); border-radius: 0; z-index: 9000;
    display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
    pointer-events: none;
}
.drop-overlay.active { display: flex; }
.drop-overlay-text { font-size: 1.1rem; font-weight: 700; color: var(--acc); }

/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-container { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: min(420px, calc(100vw - 28px)); }
.toast {
    --toast-accent: var(--acc);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bg-s) 92%, transparent),
        color-mix(in srgb, var(--bg) 90%, transparent));
    color: var(--t1);
    border: 1px solid var(--border);
    padding: 12px 12px; border-radius: 18px; font-size: 0.86rem; font-weight: 650;
    box-shadow:
        0 18px 50px rgba(0,0,0,0.30),
        0 0 0 1px color-mix(in srgb, var(--toast-accent) 12%, transparent) inset;
    opacity: 0; transform: translateY(-18px) scale(0.98);
    transition: opacity 0.24s cubic-bezier(0.2,0.8,0.2,1), transform 0.28s cubic-bezier(0.2,0.9,0.2,1);
    pointer-events: auto; backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 10px; width: 100%;
    cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
}
.toast.dragging { transition: none; }
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.error { --toast-accent: var(--danger); }
.toast.warn { --toast-accent: var(--warn); }
.toast.success, .toast.ok { --toast-accent: var(--success); }
.toast.info { --toast-accent: var(--acc); }
.toast-icon { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--toast-accent); background: color-mix(in srgb, var(--toast-accent) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--toast-accent) 25%, transparent) inset; }
.toast-icon svg { width: 18px; height: 18px; }
.toast-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.toast-close {
    width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: transparent;
    color: var(--t2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px; line-height: 1;
    transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.toast-close:hover { color: var(--t1); background: color-mix(in srgb, var(--t1) 8%, transparent); }
.toast-close:active { transform: scale(0.94); }

/* Light theme — boost shadow contrast since the bg is now near-white */
[data-theme="light"] .toast {
    box-shadow:
        0 18px 50px rgba(0,0,0,0.18),
        0 6px 16px rgba(0,0,0,0.08),
        0 0 0 1px color-mix(in srgb, var(--toast-accent) 15%, transparent) inset;
}

/* Actionable toast (taps fire an onClick callback instead of just dismissing).
   Subtle accent glow on the left edge to hint at tap-ability, and a tiny
   chevron-like animated arrow at the end so the user knows there's something
   to do beyond reading. Works in all three themes via --toast-accent. */
.toast.toast-actionable {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--toast-accent) 12%, transparent) 0%,
            transparent 18%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--bg-s) 92%, transparent),
            color-mix(in srgb, var(--bg) 90%, transparent));
    box-shadow:
        0 18px 50px rgba(0,0,0,0.30),
        0 0 0 1px color-mix(in srgb, var(--toast-accent) 28%, transparent) inset,
        -3px 0 0 0 var(--toast-accent) inset;
}
[data-theme="light"] .toast.toast-actionable {
    box-shadow:
        0 18px 50px rgba(0,0,0,0.18),
        0 6px 16px rgba(0,0,0,0.08),
        0 0 0 1px color-mix(in srgb, var(--toast-accent) 32%, transparent) inset,
        -3px 0 0 0 var(--toast-accent) inset;
}
.toast.toast-actionable .toast-message::after {
    content: '›';
    display: inline-block;
    margin-left: 8px;
    color: var(--toast-accent);
    font-weight: 700;
    transform: translateY(-1px);
    animation: toast-nudge 1.6s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes toast-nudge {
    0%,100% { transform: translate(0,-1px); opacity: 0.85; }
    50%     { transform: translate(4px,-1px); opacity: 1; }
}

/* ==========================================================================
   MODALS & SETTINGS
   ========================================================================== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: flex-end; z-index: 200;
    opacity: 0; pointer-events: none;
    /* Closing uses acceleration curve; .active swaps to deceleration. */
    transition: opacity 280ms cubic-bezier(0.4, 0, 1, 1);
    will-change: opacity;
    isolation: isolate;
}
.modal-overlay.active {
    opacity: 1; pointer-events: auto;
    transition: opacity 280ms cubic-bezier(0, 0, 0.2, 1);
}
.modal-content {
    background: var(--bg-s); border: 1px solid var(--border);
    width: 100%; max-width: 540px; border-radius: 22px 22px 0 0;
    padding: 22px 20px; padding-bottom: max(22px, env(safe-area-inset-bottom, 22px));
    box-shadow: var(--glass); transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 1, 1);
    max-height: 90vh; display: flex; flex-direction: column;
    will-change: transform;
    overflow-x: hidden;
}
.modal-overlay.active .modal-content {
    transform: translateY(0);
    transition: transform 280ms cubic-bezier(0, 0, 0.2, 1);
}
@media (min-width: 640px) {
    .modal-overlay { align-items: center; padding: 20px; }
    .modal-content { border-radius: 20px; transform: translateY(16px) scale(0.96); max-height: 88vh; }
    .modal-overlay.active .modal-content { transform: translateY(0) scale(1); }
}
.modal-handle { width: 38px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 18px; flex-shrink: 0; }
@media (min-width: 640px) { .modal-handle { display: none; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-shrink: 0; }
.modal-header h2 { font-size: 1.15rem; font-weight: 700; color: var(--t1); }
.modal-close { background: var(--bg-h); border: none; color: var(--t2); cursor: pointer; padding: 7px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.modal-close:hover { background: var(--border); color: var(--t1); }
/* FIX: Settings modal body — only vertical scroll, no horizontal */
.modal-body {
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 18px;
    width: 100%;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.modal-body::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ── Onboarding tutorial ─────────────────────────────────────────────────── */
/* Center the tutorial / faq / techspecs modals even on mobile instead of
   docking them at the bottom — these are not bottom-sheet ergonomics, they
   are content-heavy panels that should sit in view from the start. */
.tutorial-modal, .faq-modal, .techspecs-modal { align-items: center; padding: 16px; }
.tutorial-modal .modal-content,
.faq-modal .modal-content,
.techspecs-modal .modal-content {
    border-radius: 18px;
    transform: translateY(20px) scale(0.97);
    max-height: 92vh;
}
.tutorial-modal.active .modal-content,
.faq-modal.active .modal-content,
.techspecs-modal.active .modal-content { transform: translateY(0) scale(1); }
.tutorial-modal .modal-handle,
.faq-modal .modal-handle,
.techspecs-modal .modal-handle { display: none; }
/* Text-size scale lives on the tutorial-modal element itself (set by a
   data-attribute toggled from a small chrome button) and on the FAQ +
   tech-specs modals which share the same chrome. Default scale 1.0 is
   already a step up from the previous baseline so the modal reads
   comfortably without the toggle. Titles (headlines, tier eyebrows,
   cat-titles) intentionally do NOT use the scale: they were already
   well-sized and scaling them too pushes the layout around. */
.tutorial-modal, .faq-modal, .techspecs-modal { --tutorial-scale: 1; }
.tutorial-modal[data-text-size="small"],
.faq-modal[data-text-size="small"],
.techspecs-modal[data-text-size="small"]   { --tutorial-scale: 0.9; }
.tutorial-modal[data-text-size="large"],
.faq-modal[data-text-size="large"],
.techspecs-modal[data-text-size="large"]   { --tutorial-scale: 1.15; }

.tutorial-modal .modal-content { max-width: 480px; }
/* Stack every step in the same grid cell so the body's intrinsic height
   always equals the tallest step's height — no manual `height: 540px`
   guesswork, no per-step jumping. Only the active step is visible; the
   others stay laid out (visibility:hidden, not display:none) so they
   still contribute to the grid track's sizing. */
.tutorial-modal #tutorial-body {
    display: grid;
    grid-template-columns: 1fr;
    /* Cap on tiny screens so the modal never overflows the viewport;
       overflow-y is already on .modal-body so the active step scrolls
       inside if it has to. */
    max-height: 70vh;
}
.tutorial-modal #tutorial-body > .tutorial-step {
    grid-row: 1;
    grid-column: 1;
    visibility: hidden;
    pointer-events: none;
}
.tutorial-modal #tutorial-body > .tutorial-step.active {
    visibility: visible;
    pointer-events: auto;
}
/* Pagination dots: a fixed-width row of identical 7px circles plus an
   absolutely-positioned indicator that starts as a 7px circle (matching
   the inactive dots), stretches into a horizontal pill while transitioning
   between steps, then collapses back into a circle at the new position.
   The morph keyframes are driven from JS via the Web Animations API
   (see renderTutorial) because the stretch direction depends on whether
   the user is going forward or back — anchor-side scaling can't be
   expressed in plain CSS transitions. */
.tutorial-dots { display: flex; justify-content: center; margin: 14px 0 16px; flex-shrink: 0; }
.tutorial-dots-track {
    display: flex; gap: 7px; align-items: center;
    position: relative;
    /* No padding needed — the indicator stays inside the dots row at every
       step because it starts and ends as a 7px dot, only stretching
       mid-transition. */
}
.tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.tutorial-dot-indicator {
    position: absolute; top: 50%; left: 0;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--acc);
    /* Initial transform set in JS; the morph keyframes carry the rest. */
    transform: translateY(-50%);
    pointer-events: none;
}
.tutorial-skip { position: absolute; top: 14px; right: 16px; background: transparent; border: none; color: var(--t2); font-size: 0.82rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; z-index: 1; }
.tutorial-skip:hover { color: var(--t1); background: var(--bg-h); }
.tutorial-lang,
.tutorial-textsize {
    position: absolute; top: 12px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border);
    color: var(--t2); font-size: 0.74rem; font-weight: 600;
    cursor: pointer; padding: 5px 9px 5px 8px; border-radius: 7px;
    letter-spacing: 0.04em; transition: all 0.16s var(--ease-std);
    font-family: inherit;
}
.tutorial-lang     { left: 14px; }
.tutorial-textsize { left: 78px; }
.tutorial-lang:hover,
.tutorial-textsize:hover { color: var(--t1); border-color: color-mix(in srgb, var(--acc) 50%, var(--border)); }
.tutorial-lang svg,
.tutorial-textsize svg { opacity: 0.7; }
.tutorial-lang:hover svg,
.tutorial-textsize:hover svg { opacity: 1; color: var(--acc); }
/* Always laid out as flex columns; the grid stack in #tutorial-body uses
   visibility (not display) to show only the active one, so every step
   keeps contributing to the body's height. */
.tutorial-step { display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 2px; }
.tutorial-step.active { animation: tutorialFade 0.28s var(--ease-out-soft); }
@keyframes tutorialFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tutorial-headline { font-size: 1.4rem; font-weight: 700; color: var(--t1); line-height: 1.25; margin: 0; }
.tutorial-sub { font-size: calc(1.04rem * var(--tutorial-scale)); color: var(--t2); line-height: 1.55; margin: 0; }
.tutorial-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,0.015); display: flex; flex-direction: column; gap: 4px; }
[data-theme="light"] .tutorial-card { background: rgba(0,0,0,0.018); }
.tutorial-card.featured { border-color: color-mix(in srgb, var(--acc) 55%, var(--border)); background: rgba(var(--acc-rgb), 0.06); }
.tutorial-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tutorial-card-name { font-weight: 700; font-size: calc(1.04rem * var(--tutorial-scale)); color: var(--t1); }
.tutorial-card-price { font-weight: 700; font-size: calc(0.96rem * var(--tutorial-scale)); color: var(--acc); }
.tutorial-card-desc { font-size: calc(0.88rem * var(--tutorial-scale)); color: var(--t2); line-height: 1.45; }
.tutorial-table { width: 100%; border-collapse: collapse; font-size: calc(0.92rem * var(--tutorial-scale)); }
.tutorial-table th { text-align: center; color: var(--t2); font-weight: 600; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.tutorial-table th:first-child { text-align: left; }
.tutorial-table td { padding: 10px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); text-align: center; }
.tutorial-table td:first-child { text-align: left; color: var(--t1); font-weight: 500; }
.tutorial-table tr:last-child td { border-bottom: none; }
.tutorial-cell-icon { display: inline-block; vertical-align: middle; }
.tutorial-cell-icon.yes { width: 14px; height: 14px; color: var(--acc); }
.tutorial-cell-icon.no  { color: var(--t2); opacity: 0.45; font-size: 0.9em; }
.tutorial-list { display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; list-style: none; }
.tutorial-list li { font-size: calc(0.98rem * var(--tutorial-scale)); color: var(--t1); line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.tutorial-list .li-icon { flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; margin-top: 5px; }
.tutorial-list.checks  .li-icon { color: var(--acc); }
.tutorial-list.crosses .li-icon { color: var(--t2); opacity: 0.55; }
.tutorial-list .li-icon svg { width: 13px; height: 13px; stroke-width: 1.6; }
.tutorial-foot { font-size: calc(0.9rem * var(--tutorial-scale)); color: var(--t2); line-height: 1.55; font-style: italic; }
.tutorial-id-chip { display: inline-block; background: var(--bg-h); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; font-family: 'Fira Code', monospace; font-size: calc(0.86rem * var(--tutorial-scale)); color: var(--acc); }
.tutorial-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); flex-shrink: 0; }
.tutorial-btn { padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: calc(0.96rem * var(--tutorial-scale)); cursor: pointer; border: 1px solid transparent; transition: all 0.16s var(--ease-std); font-family: inherit; }
.tutorial-btn.secondary { background: transparent; border-color: var(--border); color: var(--t1); }
.tutorial-btn.secondary:hover { background: var(--bg-h); }
.tutorial-btn.primary { background: var(--acc); color: #fff; }
.tutorial-btn.primary:hover { filter: brightness(1.08); }
.tutorial-techlink { display: inline-flex; align-items: center; gap: 4px; color: var(--acc); font-size: calc(0.9rem * var(--tutorial-scale)); background: none; border: none; cursor: pointer; padding: 2px 0; align-self: flex-start; }
.tutorial-techlink:hover { text-decoration: underline; }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.faq-modal .modal-content { max-width: 620px; }
.faq-category { margin-bottom: 18px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-cat-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acc); font-weight: 700; margin: 0 0 10px; padding: 0 2px; }
.faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; transition: border-color 0.18s, background 0.18s; }
.faq-item.open { border-color: color-mix(in srgb, var(--acc) 45%, var(--border)); background: rgba(var(--acc-rgb), 0.04); }
.faq-q { width: 100%; background: transparent; border: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-family: inherit; color: var(--t1); font-weight: 600; font-size: calc(0.98rem * var(--tutorial-scale)); line-height: 1.4; }
.faq-q:hover { background: var(--bg-h); }
/* Suppress the hover/default bg on the title button when the item is open —
   without this you get a visible seam between the (slightly darker) title and
   the (purple-tinted) body. */
.faq-item.open .faq-q,
.faq-item.open .faq-q:hover { background: transparent; }
.faq-q-arrow { width: 14px; height: 14px; color: var(--t2); flex-shrink: 0; transition: transform 0.22s var(--ease-out-soft); }
.faq-item.open .faq-q-arrow { transform: rotate(180deg); color: var(--acc); }
.faq-a { display: none; padding: 0 16px 14px; font-size: calc(0.94rem * var(--tutorial-scale)); color: var(--t2); line-height: 1.6; white-space: pre-line; }
.faq-item.open .faq-a { display: block; animation: tutorialFade 0.22s var(--ease-out-soft); }

/* ── Tech specs (sub-modal del tutorial) ─────────────────────────────────── */
.techspecs-modal .modal-content { max-width: 560px; }
.techspecs-block { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.techspecs-block:last-child { margin-bottom: 0; }
.techspecs-block.notes { background: rgba(var(--acc-rgb), 0.04); border-color: color-mix(in srgb, var(--acc) 30%, var(--border)); }
.techspecs-tier {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    font-weight: 700; color: var(--acc); margin: 0 0 14px;
}
/* Two-column grid keeps every label/value pair perfectly aligned across
   blocks, instead of relying on flex space-between which collapses unevenly
   when one side wraps and the other doesn't. */
.techspecs-grid {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    column-gap: 18px; row-gap: 10px;
    font-size: calc(0.92rem * var(--tutorial-scale));
}
.techspecs-grid dt { color: var(--t2); font-weight: 400; }
.techspecs-grid dd { color: var(--t1); font-weight: 500; margin: 0; text-align: right; }
.techspecs-note { font-size: calc(0.9rem * var(--tutorial-scale)); color: var(--t2); line-height: 1.55; margin: 4px 0 0; }
.techspecs-note + .techspecs-note { margin-top: 6px; }
.adv-settings-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.adv-settings-row:last-child { border-bottom: none; }
.adv-settings-info { flex: 1; }
.adv-settings-info h4 { font-size: 0.9rem; font-weight: 600; color: var(--t1); margin: 0 0 2px; }
.adv-settings-info p { font-size: 0.78rem; color: var(--t2); margin: 0; line-height: 1.4; }
/* "Select text" modal — opened from the long-press menu on a user bubble.
   Shows the message in a sheet where the user can pick whatever portion
   they want with native selection, then copy via our own Copy button. */
.select-text-body {
    background: var(--bg-h); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px;
    color: var(--t1); font-size: 0.92rem; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word; word-break: break-word;
    max-height: 55vh; overflow-y: auto;
    -webkit-user-select: text; user-select: text;
    -webkit-touch-callout: default;
    /* Reuse the existing scrollbar-hidden look from .modal-body */
    scrollbar-width: none; -ms-overflow-style: none;
}
.select-text-body::-webkit-scrollbar { display: none; }
.select-text-copy {
    background: var(--acc); color: #fff; border: none;
    border-radius: 12px; padding: 12px 18px; font-size: 0.9rem;
    font-weight: 600; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter 0.15s, transform 0.05s; margin-top: 4px;
}
.select-text-copy:hover { filter: brightness(1.08); }
.select-text-copy:active { transform: scale(0.98); }
/* Centred dialog on every viewport (not a bottom sheet). Keeps the picker
   within easy thumb reach on tall phones instead of glued to the bottom
   edge. Mirrors the desktop variant of .modal-content. */
#select-text-modal { align-items: center; padding: 20px; }
#select-text-modal .modal-content {
    border-radius: 18px;
    transform: translateY(16px) scale(0.96);
    max-height: 82vh;
    padding-bottom: 22px;
}
#select-text-modal.active .modal-content { transform: translateY(0) scale(1); }
#select-text-modal .modal-handle { display: none; }
.usage-bar-wrap { margin-top: 10px; }
.usage-bar-track { background: var(--bg-h); border-radius: 99px; height: 6px; overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 99px; background: var(--acc); transition: width 0.4s ease; }
.usage-bar-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--t2); margin-top: 4px; }
.adv-nav-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg-h); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; color: var(--t1); font-size: 0.88rem; font-weight: 500; font-family: inherit; transition: all 0.15s; margin-top: 8px; }
.adv-nav-btn:hover { background: var(--bg-s); border-color: var(--acc); }
.adv-nav-btn svg { color: var(--t2); }
.install-android-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg-h); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; color: var(--t1); font-size: 0.88rem; font-weight: 500; font-family: inherit; transition: all 0.15s; margin-top: 8px; text-decoration: none; }
.install-android-btn:hover { background: var(--bg-s); border-color: var(--acc); }
.install-android-btn svg { color: var(--acc); flex-shrink: 0; }
.install-android-btn span { flex: 1; text-align: left; }
.install-modal-icon { width: 58px; height: 58px; border-radius: 16px; background: var(--bg-h); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.install-modal-icon svg { color: var(--acc); }
/* Tabs */
.tab-container { margin: 0.6em 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.tab-header { display: flex; background: var(--bg-h); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab-header::-webkit-scrollbar { display: none; }
.tab-btn { padding: 8px 16px; font-size: 0.82rem; font-weight: 500; font-family: inherit; background: transparent; border: none; color: var(--t2); cursor: pointer; white-space: nowrap; transition: all 0.15s; border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--acc); border-bottom-color: var(--acc); }
.tab-btn:hover:not(.active) { color: var(--t1); }
.tab-panel { display: none; padding: 14px 16px; background: var(--bg-s); }
.tab-panel.active { display: block; }
/* Charts */
.chart-wrap { margin: 0.8em 0; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-s); overflow: hidden; }
.chart-head { padding: 20px 24px 0; }
.chart-title-text { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--t1); letter-spacing: -0.02em; line-height: 1.3; }
.chart-subtitle-text { margin: 0; font-size: 12px; color: var(--t2); opacity: 0.65; }
.chart-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-canvas-wrap { padding: 12px 16px 20px; min-width: 480px; }
.chart-canvas-wrap canvas { display: block; width: 100% !important; max-height: 420px; min-height: 360px; }
.chart-tt { position: fixed; pointer-events: none; background: var(--bg-s); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 12px; font-family: inherit; box-shadow: 0 4px 20px rgba(0,0,0,0.15); opacity: 0; transition: opacity 0.12s; white-space: nowrap; z-index: 9999; }
.chart-tt.visible { opacity: 1; }
.chart-tt-title { font-weight: 600; font-size: 12px; color: var(--t1); margin-bottom: 7px; }
.chart-tt-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.chart-tt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chart-tt-label { color: var(--t2); }
.chart-tt-val { font-weight: 600; color: var(--t1); margin-left: 8px; }
[data-theme="light"] .chart-wrap { background: #ffffff; box-shadow: 0 2px 20px rgba(0,0,0,0.07); }
[data-theme="light"] .chart-tt { background: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
/* Chart adaptive mode (body.chart-fit) */
body.chart-fit .chart-scroll-wrap { overflow: visible; }
body.chart-fit .chart-canvas-wrap { min-width: 0 !important; aspect-ratio: 16/9; height: auto; }
body.chart-fit .chart-canvas-wrap canvas { min-height: 0 !important; max-height: none !important; height: 100% !important; }
/* Radar and polarArea render best as a square — force 1:1 aspect so labels don't overlap */
.chart-wrap[data-type="radar"] .chart-canvas-wrap,
.chart-wrap[data-type="polarArea"] .chart-canvas-wrap { min-width: 0; max-width: 440px; margin-inline: auto; aspect-ratio: 1 / 1; padding: 18px 18px 22px; }
.chart-wrap[data-type="radar"] .chart-canvas-wrap canvas,
.chart-wrap[data-type="polarArea"] .chart-canvas-wrap canvas { min-height: 0 !important; max-height: none !important; height: 100% !important; width: 100% !important; }
body.chart-fit .chart-wrap[data-type="radar"] .chart-canvas-wrap,
body.chart-fit .chart-wrap[data-type="polarArea"] .chart-canvas-wrap { aspect-ratio: 1 / 1; }
/* Mic button. While recording the button shows the ■ stop icon and gets an
   accent tint (no pulse — the moving bars already convey "recording"). */
.inp-btn.mic.listening { color: var(--acc) !important; background: rgba(var(--acc-rgb), 0.12) !important; }
@keyframes mic-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.6; } }
.mic-indicator { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--acc); font-weight: 500; }
.mic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex-shrink: 0; animation: mic-pulse 1.1s ease-in-out infinite; }

/* ── Voice recording — IN-PLACE bar transform ─────────────────────────────
   The input bar is NOT replaced. While recording, #input-box gets the
   `.recording` class and transforms in place:
     · the "+" attach button shows an ✕ (cancel)
     · the mic button shows a ■ (stop / finish)
     · the send (↑) button stays exactly as it is
     · the textarea is swapped for a row of minimalist bars that move with
       the voice (audio-reactive, driven by the analyser in JS)
   Because nothing is added/removed at the box level, there is zero shift. */

/* Icon swap — each affected button carries .ic-default + .ic-recording. */
#attach-btn .ic-recording,
#btn-mic   .ic-recording { display: none; }
.input-box.recording #attach-btn .ic-default,
.input-box.recording #btn-mic   .ic-default { display: none; }
.input-box.recording #attach-btn .ic-recording,
.input-box.recording #btn-mic   .ic-recording { display: block; }
.input-box.recording #attach-btn:hover { color: var(--danger); }

/* Swap textarea ⇄ live bars. */
.input-box.recording #user-input { display: none; }
.voice-live {
    display: none;
    flex: 1; min-width: 0;
    align-items: center; gap: 10px;
    height: 36px;          /* match the button-row height so nothing jumps */
}
.input-box.recording .voice-live { display: flex; }

.voice-live-timer {
    flex-shrink: 0;
    font-size: 0.92rem; font-weight: 600;
    color: var(--t2);
    /* App's own UI font (same as the placeholder text) with tabular figures
       so the digits don't jiggle — no more code-style monospace. */
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em; line-height: 1;
}

/* Minimalist moving bars. The COUNT is built in JS to fill the current width
   (~6px pitch) so the waveform spans the whole bar on desktop and stays dense
   on mobile. Each bar is scaled vertically (transform: scaleY) every frame by
   the analyser — only `transform` animates → GPU-composited, no layout. No CSS
   transition here: the JS lerp already smooths motion. */
.voice-live-bars {
    flex: 1; min-width: 0; height: 22px;
    display: flex; align-items: center;
    gap: 3px; overflow: hidden;
}
.voice-live-bars i {
    flex: 1 1 0; min-width: 0; height: 100%;
    border-radius: 2px;
    background: var(--acc); opacity: 0.72;
    transform: scaleY(0.1); transform-origin: center;
    will-change: transform;
}

.voice-live-status {
    display: none;
    font-size: 0.9rem; font-weight: 500;
    color: var(--t2); line-height: 1;
}

/* Transcribing: hide timer + bars, show a softly breathing label. */
.input-box.transcribing .voice-live-timer,
.input-box.transcribing .voice-live-bars { display: none; }
.input-box.transcribing .voice-live-status {
    display: inline-flex;
    animation: voice-status-breathe 1.4s ease-in-out infinite;
}
@keyframes voice-status-breathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.theme-mode-group { display:flex; gap:6px; width:100%; padding:5px; background:var(--bg-h); border:1px solid var(--border); border-radius:12px; box-sizing:border-box; }
.setting-info + .theme-mode-group { margin-top: 10px; }
.theme-mode-btn { flex:1 1 0; min-width:0; padding:11px 10px; min-height:40px; border-radius:9px; border:none; background:transparent; color:var(--t2); font-size:0.85rem; font-weight:500; font-family:inherit; cursor:pointer; transition:background 0.18s, color 0.18s, font-weight 0.18s, box-shadow 0.18s; white-space:nowrap; }
.theme-mode-btn.active { background:var(--bg); color:var(--t1); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.18); }
.theme-mode-btn:hover:not(.active) { color:var(--t1); }



.setting-section { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.setting-section:last-child { border-bottom: none; padding-bottom: 0; }

/* ─── Account section (Google Sign-In card) ───────────────────────────── */
.account-section { padding-bottom: 18px; }
.account-card {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px;
    background: var(--bg-h);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: background 0.22s, border-color 0.22s;
}
.account-card-in {
    background: color-mix(in srgb, var(--acc) 7%, var(--bg-h));
    border-color: color-mix(in srgb, var(--acc) 28%, var(--border));
}
.account-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--bg-s);
    border: 1px solid var(--border);
    color: var(--t2);
    display: inline-flex; align-items: center; justify-content: center;
}
.account-icon-ok {
    background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
    border-color: color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    color: var(--success, #22c55e);
}
.account-text {
    flex: 1 1 200px;
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.account-text h4 {
    font-size: 0.96rem; font-weight: 700; color: var(--t1);
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0;
}
.account-text p {
    font-size: 0.79rem; color: var(--t2);
    line-height: 1.5;
    margin: 0;
}

/* Sync status — tiny dot + label under the description */
.account-sync-status {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 8px;
    font-size: 0.72rem; font-weight: 600;
    color: var(--t2);
    letter-spacing: 0.02em;
}
.account-sync-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    box-shadow: 0 0 0 0 currentColor;
    transition: background 0.2s;
}
.account-sync-status.busy .account-sync-dot {
    background: var(--acc);
    animation: noloSyncPulse 1.4s ease-in-out infinite;
}
.account-sync-status.error .account-sync-dot { background: var(--danger, #ef4444); }
.account-sync-status.needs .account-sync-dot { background: var(--warn, #f59e0b); }
.account-sync-status.needs .account-sync-text { color: var(--warn, #f59e0b); }
@keyframes noloSyncPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 70%, transparent); }
    50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 0%, transparent); }
}

/* "Sync now" button — sits next to "Sign out" */
.account-sync-now-btn {
    flex: 1;
    background: color-mix(in srgb, var(--acc) 12%, var(--bg-s));
    border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--border));
    color: var(--acc);
    padding: 11px 14px;
    border-radius: 11px;
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease-out-soft, ease);
}
.account-sync-now-btn:hover {
    background: color-mix(in srgb, var(--acc) 18%, var(--bg-s));
    border-color: var(--acc);
    transform: translateY(-1px);
}
.account-sync-now-btn:active { transform: translateY(0); }
.account-sync-now-btn svg { flex-shrink: 0; }
.account-action {
    flex: 1 1 100%;
    display: flex;
    justify-content: stretch;
    margin-top: 4px;
}

/* Custom NOLO-styled Google sign-in button (full control over UX + force
   account picker every click via prompt: 'select_account') */
.btn-google-signin {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 12px;
    padding: 11px 18px;
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--t1);
    font-family: inherit;
    font-size: 0.92rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease-out-soft, ease), box-shadow 0.18s;
}
.btn-google-signin:hover {
    background: var(--bg);
    border-color: color-mix(in srgb, var(--acc) 30%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.btn-google-signin:active { transform: translateY(0); }
.btn-google-signin:disabled { opacity: 0.5; cursor: wait; }
.btn-google-signin svg { width: 18px; height: 18px; flex-shrink: 0; }

/* "Sign out" button — NOLO-native, ghost style */
.account-signout-btn {
    flex: 1;
    background: var(--bg-s);
    border: 1px solid var(--border);
    color: var(--t1);
    padding: 11px 18px;
    border-radius: 11px;
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s var(--ease-out-soft, ease);
}
.account-signout-btn:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--bg-s));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, var(--border));
    color: var(--danger, #ef4444);
    transform: translateY(-1px);
}
.account-signout-btn:active { transform: translateY(0); }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.setting-row.clickable {
    cursor: pointer;
    border-radius: 12px;
    padding: 11px 12px;
    margin: 0 -12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--t2);
    transition: background 0.18s var(--ease-std, ease), border-color 0.18s, transform 0.18s var(--ease-out-soft, ease);
}
.setting-row.clickable:hover {
    background: var(--bg-h);
    border-color: color-mix(in srgb, var(--acc) 18%, var(--border));
    color: var(--acc);
    transform: translateY(-1px);
}
.setting-row.clickable:active { transform: translateY(0); transition: transform 0.08s; }
.setting-row.clickable svg { color: currentColor; flex-shrink: 0; transition: transform 0.18s var(--ease-out-soft, ease); }
.setting-row.clickable:hover svg { transform: translateX(2px); }
.setting-info h4 { font-size: 0.92rem; font-weight: 600; color: var(--t1); }
.setting-info p { font-size: 0.78rem; color: var(--t2); margin-top: 3px; line-height: 1.4; }

/* ============================================================ */
/* Settings modal: tab bar + tab panels (3-tab layout)           */
/* ============================================================ */
.settings-modal-body { gap: 0; padding-top: 0; }

/* ----- Fullscreen override (overrides shared .modal-overlay / .modal-content) ----- */
#settings-modal { align-items: stretch; padding: 0 !important; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
#settings-modal .modal-content {
    width: 100%; max-width: none;
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    border-radius: 0; border: none;
    padding: 18px 20px;
    padding-top: max(18px, env(safe-area-inset-top, 18px));
    padding-bottom: max(18px, env(safe-area-inset-bottom, 18px));
    box-shadow: none;
    background: var(--bg);
}
#settings-modal .modal-handle { display: none; }
#settings-modal .modal-header { margin-bottom: 16px; }
#settings-modal .modal-body { flex: 1 1 auto; min-height: 0; }
#settings-modal .settings-tab-bar { top: auto; }
@media (min-width: 640px) {
    #settings-modal { align-items: stretch; padding: 0 !important; }
    #settings-modal .modal-content {
        max-width: none; width: 100%;
        height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
        border-radius: 0; padding: 28px 40px;
        transform: translateY(0) scale(1);
    }
    #settings-modal.active .modal-content { transform: translateY(0) scale(1); }
    /* Keep content readable on wide screens: cap the inner column */
    #settings-modal .modal-header,
    #settings-modal .modal-body { max-width: 780px; margin-left: auto; margin-right: auto; width: 100%; }
}
/* Mobile: animate up from bottom (re-uses existing transform) */
@media (max-width: 639px) {
    #settings-modal .modal-content { transform: translateY(100%); }
    #settings-modal.active .modal-content { transform: translateY(0); }
}
/* Skip the slide-in animation when reopening settings after the language
   picker closes — the user perceives it as returning to a panel they were
   already in, not as a fresh open. */
#settings-modal.no-anim .modal-content { transition: none !important; }
.settings-tab-bar {
    display: flex; gap: 4px; width: 100%;
    position: relative; top: auto; z-index: 1;
    background: var(--bg-h);
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    min-height: 44px;
    box-sizing: border-box;
}
.settings-tab-bar::-webkit-scrollbar { display: none; }
.settings-tab-btn {
    flex: 1 1 0; min-width: 0;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--t2);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.18s, color 0.18s, font-weight 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}
.settings-tab-btn:hover:not(.active) { color: var(--t1); }
.settings-tab-btn.active {
    background: var(--acc);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--acc-rgb), 0.38);
}
.settings-tab-btn:active { transform: scale(0.97); }

.settings-tab-panel { display: none; flex-direction: column; gap: 22px; width: 100%; }
.settings-tab-panel.active { display: flex; animation: settingsTabFade 0.22s ease; }
#settings-modal .settings-tab-panel[data-panel="general"].active {
    min-height: calc(100dvh - 190px);
}
#settings-modal .settings-tab-panel[data-panel="general"] > div:last-child {
    margin-top: auto;
    justify-content: center !important;
    gap: 8px;
    padding-top: 28px !important;
    padding-bottom: 4px;
}
#settings-modal .settings-tab-panel[data-panel="general"] > div:last-child a {
    flex: 0 0 auto !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#settings-modal .settings-tab-panel[data-panel="general"] > div:last-child span {
    flex: 0 0 auto !important;
}
@keyframes settingsTabFade {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Al retroceder (deslizar a la derecha) el panel entra desde la izquierda */
@keyframes settingsTabSlidePrev {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
#settings-modal[data-tab-dir="prev"] .settings-tab-panel.active { animation-name: settingsTabSlidePrev; }
@media (max-width: 420px) {
    .settings-tab-btn { font-size: 0.86rem; padding: 9px 10px; }
}

.toggle { position: relative; width: 46px; height: 25px; background: var(--border); border-radius: 25px; cursor: pointer; transition: 0.28s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: 0.28s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.toggle.active { background: var(--acc); }
.toggle.active::after { transform: translateX(21px); }

/* Color System */
.color-presets { display: flex; align-items: center; gap: 9px; margin-top: 12px; flex-wrap: wrap; width: 100%; padding: 4px; }
.color-swatch {
    width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    border: 2px solid transparent; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; flex-shrink: 0;
    position: relative; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.color-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(255,255,255,0.12); }
.color-swatch.active {
    border-color: var(--t1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 0 0 2px var(--bg-s) inset;
}

/* Custom color picker — SV box + hue strip + hex input */
.custom-color-picker {
    margin-top: 14px; padding: 12px; background: var(--bg-h);
    border-radius: 12px; border: 1px solid var(--border); width: 100%;
    display: flex; flex-direction: column; gap: 12px;
}
.ccp-sv {
    position: relative; width: 100%; height: 150px;
    border-radius: 10px; cursor: crosshair; overflow: hidden;
    background: hsl(252, 100%, 50%);
    touch-action: none; user-select: none;
}
.ccp-sv::before, .ccp-sv::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
}
.ccp-sv::before { background: linear-gradient(to right, #fff, transparent); }
.ccp-sv::after  { background: linear-gradient(to top, #000, transparent); }
.ccp-sv-cursor {
    position: absolute; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.35);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
    transition: width 0.1s, height 0.1s;
}
.ccp-sv:active .ccp-sv-cursor { width: 20px; height: 20px; }
.ccp-hue {
    position: relative; width: 100%; height: 14px;
    border-radius: 7px; cursor: ew-resize;
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    touch-action: none; user-select: none;
}
.ccp-hue-cursor {
    position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.45);
    background: hsl(252, 100%, 50%);
    transform: translate(-50%, -50%); top: 50%; pointer-events: none;
    transition: width 0.1s, height 0.1s;
}
.ccp-hue:active .ccp-hue-cursor { width: 22px; height: 22px; }
.ccp-row { display: flex; align-items: center; gap: 10px; }
.ccp-preview {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.20);
    background: #7c6af7;
}
.ccp-hex {
    flex: 1; min-width: 0;
    background: var(--bg); border: 1px solid var(--border); color: var(--t1);
    padding: 9px 12px; border-radius: 9px;
    font-size: 0.88rem; font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
    letter-spacing: 0.04em; outline: none; transition: border-color 0.2s;
    text-transform: lowercase;
}
.ccp-hex:focus { border-color: var(--acc); }
.ccp-hex.invalid { border-color: var(--danger, #ef4444); }

.settings-textarea, .settings-select, .settings-input {
    width: 100%; background: var(--bg-h); color: var(--t1); border: 1px solid var(--border);
    padding: 11px; border-radius: 11px; font-size: 0.88rem; margin-top: 9px; outline: none;
    font-family: inherit; transition: border-color 0.2s;
}
.settings-textarea { resize: vertical; min-height: 75px; }
.settings-textarea:focus, .settings-select:focus, .settings-input:focus { border-color: var(--acc); }

/* Anonymous feedback ("vent box"): optional 1-5 star rating */
.feedback-stars { display: flex; gap: 9px; justify-content: center; margin: 16px 0 8px; }
.feedback-star { flex: 0 0 auto; font-size: 2rem; line-height: 1; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--t3, var(--t2)); opacity: 0.4; transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; }
.feedback-star:hover { color: #f5b301; opacity: 1; transform: scale(1.15); }
.feedback-star.on { color: #f5b301; opacity: 1; }

/* Learned preferences list (Settings → Chat) */
/* ── Memory section (Settings → Chat) ─────────────────────────────────────
   The list of things NOLO remembers about the user. Items can be added by
   the user manually or suggested by the model (the suggestion card pattern
   below). All state is local — never leaves the device. */
.memory-section { display: flex; flex-direction: column; gap: 12px; }
.memory-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.memory-header-info { flex: 1; min-width: 0; }
.memory-title {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.96rem; font-weight: 600; color: var(--t1);
    margin: 0;
}
.memory-title-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(var(--acc-rgb), 0.14); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.memory-desc { margin: 6px 0 0; font-size: 0.82rem; color: var(--t2); line-height: 1.45; }
.memory-count {
    flex-shrink: 0; font-size: 0.74rem; font-weight: 600; color: var(--t2);
    background: var(--bg-h); border: 1px solid var(--border);
    padding: 3px 10px; border-radius: 999px;
    min-width: 38px; text-align: center;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.memory-count.full { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }

.learned-prefs-list {
    display: flex; flex-direction: column; gap: 6px;
    padding: 6px;
    background: var(--bg-h); border: 1px solid var(--border); border-radius: 14px;
    max-height: 320px; overflow-y: auto;
}
.learned-pref-empty {
    padding: 32px 18px; text-align: center; color: var(--t2);
    font-size: 0.85rem; line-height: 1.6;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.learned-pref-empty .empty-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: rgba(var(--acc-rgb), 0.10); color: var(--acc);
    display: inline-flex; align-items: center; justify-content: center;
}
.learned-pref-empty .empty-icon svg { width: 24px; height: 24px; }
.learned-pref-empty p { margin: 0; max-width: 280px; }

.learned-pref-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 12px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; transition: border-color 0.15s, background 0.15s, transform 0.15s;
    position: relative;
}
.learned-pref-item:hover { border-color: rgba(var(--acc-rgb), 0.45); background: var(--bg-s); transform: translateX(2px); }
.learned-pref-item .pref-bullet {
    flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
    background: var(--acc); margin-top: 9px; opacity: 0.65;
    transition: opacity 0.15s, transform 0.15s;
}
.learned-pref-item:hover .pref-bullet { opacity: 1; transform: scale(1.15); }
.learned-pref-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.learned-pref-text {
    font-size: 0.92rem; color: var(--t1);
    cursor: pointer; word-break: break-word; line-height: 1.4;
}
.learned-pref-meta { font-size: 0.7rem; color: var(--t3); }
.learned-pref-del, .learned-pref-save, .learned-pref-cancel {
    flex: 0 0 auto; background: transparent; border: none; color: var(--t3);
    cursor: pointer; padding: 6px; border-radius: 7px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    align-self: center;
}
.learned-pref-del svg, .learned-pref-save svg, .learned-pref-cancel svg { width: 14px; height: 14px; }
.learned-pref-del:hover { background: rgba(239, 68, 68, 0.14); color: var(--danger); }
.learned-pref-save { color: var(--acc); }
.learned-pref-save:hover  { background: rgba(var(--acc-rgb), 0.14); }
.learned-pref-cancel:hover { background: var(--bg-h); color: var(--t1); }
.learned-pref-input {
    flex: 1 1 auto; min-width: 0;
    background: var(--bg-h); color: var(--t1); border: 1px solid var(--acc);
    padding: 8px 11px; border-radius: 8px; font-size: 0.92rem;
    font-family: inherit; outline: none;
}
/* Tame the default cyan text-selection inside the memory editor */
.learned-pref-input::selection { background: rgba(var(--acc-rgb), 0.28); color: var(--t1); }
.learned-pref-add-row {
    display: flex; align-items: center; gap: 8px;
}
.learned-pref-add-input { min-height: 42px; height: 42px; margin: 0; box-sizing: border-box; flex: 1 1 auto; }
.learned-pref-add-btn {
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--acc); color: #fff;
    border: none; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter 0.15s, transform 0.15s;
}
.learned-pref-add-btn:hover { filter: brightness(1.08); }
.learned-pref-add-btn:active { transform: scale(0.94); }
.learned-pref-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.memory-clear-all {
    background: transparent; border: none; color: var(--t3);
    cursor: pointer; font-family: inherit;
    font-size: 0.78rem; padding: 6px;
    align-self: flex-end;
    transition: color 0.15s;
}
.memory-clear-all:hover { color: var(--danger); }

/* ── AI memory-suggestion card (inline under assistant reply) ───────────── */
.mem-suggest-card {
    margin-top: 12px; padding: 14px;
    background: linear-gradient(140deg, rgba(var(--acc-rgb), 0.10), rgba(var(--acc-rgb), 0.03));
    border: 1px solid rgba(var(--acc-rgb), 0.32);
    border-radius: 14px;
    animation: memSuggestIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes memSuggestIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mem-suggest-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.78rem; font-weight: 700; color: var(--acc);
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.mem-suggest-head-icon {
    width: 22px; height: 22px; border-radius: 7px;
    background: rgba(var(--acc-rgb), 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mem-suggest-head-icon svg { width: 13px; height: 13px; }
.mem-suggest-text {
    font-size: 0.92rem; color: var(--t1); line-height: 1.5;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 10px;
    font-weight: 500;
}
.mem-suggest-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mem-suggest-btn {
    border: none; cursor: pointer; font-family: inherit;
    padding: 9px 16px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform 0.1s, background 0.15s, filter 0.15s;
}
.mem-suggest-btn svg { width: 15px; height: 15px; }
.mem-suggest-btn:active { transform: scale(0.96); }
.mem-suggest-save {
    background: var(--acc); color: #fff;
}
.mem-suggest-save:hover { filter: brightness(1.08); }
.mem-suggest-dismiss {
    background: transparent; color: var(--t2);
    border: 1px solid var(--border);
}
.mem-suggest-dismiss:hover { background: var(--bg-h); color: var(--t1); }
.mem-suggest-head-label { flex: 1; min-width: 0; }
.mem-suggest-local {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--t3);
    border-radius: 7px;
    background: var(--bg-h);
    cursor: help;
}
.mem-suggest-local svg { width: 12px; height: 12px; }
.settings-select {
    cursor: pointer; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23848490' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
}

.danger-btn {
    width: 100%; background: rgba(239, 68, 68, 0.08); color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.18); padding: 13px; border-radius: 11px;
    font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: 0.2s; font-family: inherit;
}
.danger-btn:hover { background: var(--danger); color: #fff; }

/* ─── Language picker · NOLO-native, fullscreen ──────────────────────────
   Full-screen takeover (like the Library modal) so the 30 languages have
   room to breathe. Uses NOLO's bg-h surfaces, accent-stripe-on-hover,
   ease-out-back springs, and adapts to dark / dim / light theme through
   CSS variables.                                                        */

/* The modal becomes a full-screen overlay, no longer a bottom sheet */
#lang-modal { padding: 0 !important; align-items: stretch !important; }
#lang-modal .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    transform: translateY(20px) !important;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.22, 1),
                opacity 0.24s ease !important;
}
#lang-modal.active .modal-content { transform: translateY(0) !important; }
#lang-modal .modal-handle { display: none !important; }

/* New header for the fullscreen view */
#lang-modal .modal-header {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 8px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border);
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    flex-shrink: 0;
}
#lang-modal .modal-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
#lang-modal .modal-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--bg-h);
    color: var(--t1);
    border: 1px solid var(--border);
    transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
#lang-modal .modal-close:hover {
    background: var(--bg-s);
    border-color: color-mix(in srgb, var(--acc) 25%, var(--border));
    color: var(--acc);
}
#lang-modal .modal-close:active { transform: scale(0.94); }

.langpicker {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    gap: 14px;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Search input — same shape as NOLO's other inputs (settings-input style) */
.langpicker-search-wrap {
    position: relative; flex-shrink: 0;
}
.langpicker-search-wrap > svg {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--t2); pointer-events: none;
    transition: color 0.2s;
}
.langpicker-search-wrap:focus-within > svg { color: var(--acc); }
.langpicker-search {
    width: 100%;
    background: var(--bg-h);
    border: 1px solid var(--border);
    color: var(--t1);
    padding: 12px 14px 12px 42px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.langpicker-search:hover { border-color: color-mix(in srgb, var(--acc) 25%, var(--border)); }
.langpicker-search:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
.langpicker-search::placeholder { color: var(--t2); }

/* Tiny status line — count of languages / matches */
.langpicker-status {
    font-size: 0.7rem; font-weight: 600;
    color: var(--t2);
    padding: 0 6px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.langpicker-status strong { color: var(--t1); font-weight: 700; }

/* Scrollable list */
.langpicker-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 2px 4px 4px 2px;
    margin: 0 -4px -4px -2px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.langpicker-list::-webkit-scrollbar { width: 6px; }
.langpicker-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.langpicker-list::-webkit-scrollbar-thumb:hover { background: var(--t2); }

/* Each language item — exactly NOLO's history-item / setting-section
   feel: bg-h surface, transparent border that warms to accent on hover,
   accent rail on the left, gentle lift, generous radius. */
.langpicker-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    background: var(--bg-h);
    border: 1px solid transparent;
    color: var(--t1);
    padding: 12px 14px 12px 18px;
    border-radius: 13px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.18s var(--ease-std, ease),
        border-color 0.18s var(--ease-std, ease),
        transform 0.18s var(--ease-out-soft, ease),
        box-shadow 0.22s var(--ease-std, ease);
    animation: langItemIn 0.34s var(--ease-out-back, cubic-bezier(.34,1.56,.64,1)) both;
}
.langpicker-item::before {
    /* Soft accent rail on the left, NOLO's signature for active/focused */
    content: ''; position: absolute;
    left: 6px; top: 50%;
    width: 3px; height: 0;
    border-radius: 2px;
    background: var(--acc);
    transform: translateY(-50%);
    transition: height 0.26s var(--ease-out-back, cubic-bezier(.34,1.56,.64,1)),
                opacity 0.18s;
    opacity: 0;
}
.langpicker-item:hover,
.langpicker-item.focused {
    background: color-mix(in srgb, var(--acc) 6%, var(--bg-h));
    border-color: color-mix(in srgb, var(--acc) 22%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.langpicker-item:hover::before,
.langpicker-item.focused::before {
    height: 20px; opacity: 0.55;
}
.langpicker-item:active { transform: translateY(0); transition: transform 0.08s; }

/* Active (current language) — accent-tinted bg, full rail, accent text,
   a soft glow. Mirrors NOLO's selected-history-item pattern. */
.langpicker-item.current {
    background: color-mix(in srgb, var(--acc) 10%, var(--bg-h));
    border-color: color-mix(in srgb, var(--acc) 35%, var(--border));
    box-shadow: 0 4px 18px color-mix(in srgb, var(--acc) 20%, transparent);
}
.langpicker-item.current::before { height: 28px; opacity: 1; }
.langpicker-item.current .langpicker-item-native { color: var(--acc); font-weight: 700; }
.langpicker-item.current .langpicker-item-code {
    background: color-mix(in srgb, var(--acc) 20%, transparent);
    color: var(--acc);
    border-color: transparent;
}

.langpicker-item-text {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 1px;
}
.langpicker-item-native {
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.18s;
}
.langpicker-item-english {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--t2);
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.langpicker-item-code {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--t2);
    background: var(--bg-s);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

/* Empty / no-results state */
.langpicker-empty {
    text-align: center;
    color: var(--t2);
    padding: 40px 24px 30px;
    background: var(--bg-h);
    border: 1px dashed var(--border);
    border-radius: 13px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 8px;
}
.langpicker-empty-icon {
    width: 36px; height: 36px;
    border-radius: 11px;
    background: var(--bg-s);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--t2);
}
.langpicker-empty-title { color: var(--t1); font-size: 0.92rem; font-weight: 600; }
.langpicker-empty-hint  { font-size: 0.8rem; }

@keyframes langItemIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wider screens: more columns since we're fullscreen now */
@media (min-width: 560px) {
    .langpicker-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-content: start;
    }
    .langpicker-empty { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
    .langpicker-list { grid-template-columns: 1fr 1fr 1fr; }
    .langpicker { padding: 18px 32px calc(20px + env(safe-area-inset-bottom, 0px)); max-width: 1100px; margin: 0 auto; width: 100%; }
    #lang-modal .modal-header h2 { font-size: 1.5rem; }
}
@media (min-width: 1400px) {
    .langpicker-list { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Stagger entry — gentle, NOLO-style ease-out-back */
.langpicker-item:nth-child(1)  { animation-delay: 0.00s; }
.langpicker-item:nth-child(2)  { animation-delay: 0.022s; }
.langpicker-item:nth-child(3)  { animation-delay: 0.044s; }
.langpicker-item:nth-child(4)  { animation-delay: 0.066s; }
.langpicker-item:nth-child(5)  { animation-delay: 0.088s; }
.langpicker-item:nth-child(6)  { animation-delay: 0.11s; }
.langpicker-item:nth-child(7)  { animation-delay: 0.132s; }
.langpicker-item:nth-child(8)  { animation-delay: 0.154s; }
.langpicker-item:nth-child(n+9) { animation-delay: 0.176s; }

/* Attach Menu */
.attach-menu-wrap { position: relative; flex-shrink: 0; }
.attach-btn-left { border-radius: 50% !important; width: 34px !important; height: 34px !important; }
.attach-menu {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(18px) scale(0.985);
    width: min(430px, calc(100vw - 18px)); max-height: min(78vh, 620px);
    background: color-mix(in srgb, var(--bg-s) 94%, #ffffff 6%);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 28px; padding: 9px 10px 12px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.04);
    display: flex; flex-direction: column; gap: 7px;
    z-index: 165; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    /* Closing → acceleration curve. visibility delayed so the slide-out is
       visible before the element is removed from the a11y tree. */
    transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1),
                transform 280ms cubic-bezier(0.4, 0, 1, 1),
                visibility 0s linear 280ms;
}
.attach-menu::-webkit-scrollbar { display: none; }
.attach-menu.active {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    /* Opening → deceleration curve. */
    transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1),
                transform 280ms cubic-bezier(0, 0, 0.2, 1),
                visibility 0s;
}
/* Backdrop behind the bottom sheet on mobile. Hidden on desktop where the
   menu is a floating dropdown (no need to dim the whole page). */
.attach-menu-backdrop { display: none; }
@media (max-width: 640px) {
    .attach-menu-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 160;
        opacity: 0; pointer-events: none; visibility: hidden;
        transition: opacity 280ms cubic-bezier(0.4, 0, 1, 1),
                    visibility 0s linear 280ms;
    }
    .attach-menu-backdrop.active {
        opacity: 1; pointer-events: auto; visibility: visible;
        transition: opacity 280ms cubic-bezier(0, 0, 0.2, 1),
                    visibility 0s;
    }
}
@keyframes attachSheetIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.985); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.attach-sheet-handle {
    width: 38px; height: 4px; border-radius: 999px; background: var(--border);
    margin: 2px auto 1px; opacity: 0.85; flex-shrink: 0;
}
.attach-sheet-head {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 0 42px; flex-shrink: 0;
}
.attach-sheet-head h3 { margin: 0; color: var(--t1); font-size: 0.98rem; font-weight: 750; letter-spacing: 0; }
.attach-sheet-close {
    position: absolute; left: 2px; top: 2px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 50%;
    color: var(--t2); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.attach-sheet-close:hover { background: var(--bg-h); color: var(--t1); }
.attach-quick-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; padding: 4px 2px 7px;
}
.attach-quick-tile {
    min-width: 0; min-height: 86px; border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--bg-h) 76%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; color: var(--t1); cursor: pointer; user-select: none;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.attach-quick-tile:hover { border-color: rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.08); }
.attach-quick-tile:active { transform: scale(0.98); }
.attach-quick-icon {
    width: 34px; height: 34px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--acc); background: rgba(var(--acc-rgb), 0.12);
}
.attach-quick-icon svg { width: 19px; height: 19px; }
.attach-quick-tile span:last-of-type {
    font-size: 0.8rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; padding: 0 6px;
}
.attach-divider { height: 1px; background: var(--border); opacity: 0.75; margin: 1px 4px; flex-shrink: 0; }
.attach-sheet-row, .attach-style-option, .attach-style-add, .attach-context-option, .attach-imgquality-option, .attach-thinking-option {
    width: 100%; border: none; background: transparent; color: var(--t1);
    font-family: inherit; text-align: left; cursor: pointer; user-select: none;
}
.attach-sheet-row {
    min-height: 56px; display: flex; align-items: center; gap: 13px;
    padding: 9px 8px; border-radius: 14px; transition: background 0.14s;
}
.attach-sheet-row:hover, .attach-sheet-row.active { background: color-mix(in srgb, var(--bg-h) 78%, transparent); }
.attach-row-icon {
    width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--t1); background: color-mix(in srgb, var(--bg-h) 86%, transparent);
}
.attach-row-icon svg { width: 18px; height: 18px; }
.attach-menu-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.attach-menu-label span:first-child { font-weight: 650; font-size: 0.9rem; color: var(--t1); }
.attach-menu-label span.attach-sub { font-size: 0.76rem; color: var(--t2); font-weight: 450; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-chevron { color: var(--t2); flex-shrink: 0; opacity: 0.8; transition: transform 0.16s var(--ease-out-soft); }
#attach-style-row.active #attach-style-chevron,
#attach-context-row.active #attach-context-chevron { transform: rotate(90deg); }
#attach-imgquality-row.active #attach-imgquality-chevron { transform: rotate(90deg); }
#attach-thinking-btn.active .attach-chevron { transform: rotate(90deg); }
/* Thinking row swaps its trailing affordance based on plan tier:
   - Pro tier (multi-level): show the chevron, hide the switch. Tap expands a panel.
   - Plus tier (binary):     show the switch,  hide the chevron. Tap toggles on/off.
   Default (no class): hide both so we don't show a stray UI element before
   refreshThinkingLock() has had a chance to set the tier. */
#attach-thinking-btn .attach-switch,
#attach-thinking-btn .attach-chevron { display: none; }
#attach-thinking-btn.tier-pro  .attach-chevron { display: inline-block; }
#attach-thinking-btn.tier-plus .attach-switch  { display: inline-block; }
.attach-switch {
    position: relative; width: 46px; height: 27px; border-radius: 999px;
    background: var(--border); flex-shrink: 0; transition: background 0.18s;
}
.attach-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: transform 0.18s;
}
.attach-sheet-row.active .attach-switch { background: var(--acc); }
.attach-sheet-row.active .attach-switch::after { transform: translateX(19px); }
.attach-pro-badge {
    font-size: 0.64rem; font-weight: 800; color: #fff; background: var(--acc);
    border-radius: 999px; padding: 2px 7px; letter-spacing: 0.03em; flex-shrink: 0;
}
.attach-style-panel, .attach-context-panel, .attach-imgquality-panel, .attach-thinking-panel {
    display: none; flex-direction: column; gap: 2px; padding: 2px 6px 7px 55px;
    animation: settingsTabFade 0.18s ease;
}
.attach-style-panel.open, .attach-context-panel.open, .attach-imgquality-panel.open, .attach-thinking-panel.open { display: flex; }
.attach-style-option, .attach-style-add, .attach-context-option, .attach-imgquality-option, .attach-thinking-option {
    display: flex; align-items: center; gap: 9px; min-height: 38px;
    padding: 7px 9px; border-radius: 11px; font-size: 0.84rem;
    transition: background 0.14s, color 0.14s;
}
.attach-style-option:hover, .attach-style-add:hover, .attach-context-option:hover, .attach-imgquality-option:hover, .attach-thinking-option:hover { background: var(--bg-h); }
.attach-style-option.active, .attach-context-option.active, .attach-imgquality-option.active, .attach-thinking-option.active { color: var(--acc); font-weight: 650; background: rgba(var(--acc-rgb), 0.08); }
.attach-style-check { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; color: currentColor; }
.attach-style-option.active .attach-style-check, .attach-context-option.active .attach-style-check, .attach-imgquality-option.active .attach-style-check, .attach-thinking-option.active .attach-style-check { opacity: 1; }
.attach-style-option-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.attach-style-option-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-style-option-desc { color: var(--t2); font-size: 0.72rem; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-style-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.attach-style-action {
    width: 26px; height: 26px; border: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--t2); cursor: pointer;
}
.attach-style-action:hover { background: var(--bg-h); color: var(--t1); }
#attach-thinking-btn { border: none; }
#attach-thinking-btn.locked { opacity: 0.62; }
#attach-thinking-btn.locked .attach-switch { display: none; }
#attach-thinking-btn.locked .attach-thinking-lock { display: block !important; margin-left: auto; color: var(--t2); flex-shrink: 0; }
#btn-pin-open { display: none !important; }
@media (max-width: 640px) {
    .attach-menu {
        left: 0; right: 0; bottom: 0;
        /* True bottom-sheet entry: starts fully off-screen below the viewport
           and slides UP into place. The desktop dropdown's small Y offset
           feels wrong on mobile because the menu is wide and tall. */
        transform: translateY(100%);
        width: 100%; max-height: min(82vh, 680px);
        border-radius: 28px 28px 0 0;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
        border-left: none; border-right: none; border-bottom: none;
    }
    .attach-menu.active { transform: translateY(0); }
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .menu-toggle { display: flex; }
    /* Historial casi a pantalla completa (88%); se desliza POR ENCIMA del chat
       (el chat se queda quieto → sin lag). El velo oscuro tapa la franja visible. */
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 88vw; transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { opacity: 1; pointer-events: auto; }

    .message.user { padding-left: 12px; }
    .message.assistant { padding-right: 12px; }
    .messages-container { padding-top: 68px; padding-bottom: 12px; padding-left: 10px; padding-right: 10px; gap: 8px; }
    /* IMPORTANT: keep the `+ var(--kb)` so the keyboard inset still pushes
       the box up on mobile. The previous version of this rule dropped it,
       which left the input behind the on-screen keyboard whenever the user
       focused the textarea. */
    .input-wrapper { padding: 12px 10px; padding-bottom: calc(max(14px, env(safe-area-inset-bottom, 14px)) + var(--kb, 0px)); }

    /* Header: [≡ Std]  [Modelo]  [FREE ☆]  — symmetric, clear labels */
    .chat-header { padding: 0 2px; }
    .header-left { gap: 2px; }
    .menu-toggle { padding: 6px 7px; }
    /* Anon pill: icon-only on mobile — eye open or eye slash, circular */
    #status-text { display: none; }
    .status-pill { padding: 6px 7px; border-radius: 50%; gap: 0; }
    /* Center model chip */
    .model-chip { padding: 5px 10px; font-size: 0.75rem; max-width: 150px; }
    #quick-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .model-dropdown { width: 270px; left: 50%; transform: translateX(-50%); }
    /* Right side compact */
    .plan-badge { font-size: 0.62rem; padding: 2px 6px; }
    .hdr-btn { padding: 6px 7px; }

    .msg-actions { opacity: 1; }
    .color-picker-grid { grid-template-columns: 1fr; }
    .user-image-card { max-width: 160px; max-height: 140px; }
}

/* When accent is near-black, ensure visibility on dark backgrounds */
.acc-dark-mode .nav-btn.new-chat { background: var(--t1) !important; color: var(--bg) !important; }
.acc-dark-mode .inp-btn.send:not(:disabled) { background: var(--t1) !important; border-color: var(--t1) !important; }
.acc-dark-mode .inp-btn.send:disabled { background: transparent !important; border: 1px solid var(--border) !important; color: var(--t3, var(--t2)) !important; }
.acc-dark-mode .plan-badge.pro { background: rgba(255,255,255,0.12) !important; color: var(--t1) !important; border-color: rgba(255,255,255,0.2) !important; }
.acc-dark-mode .status-pill.anon-active { color: var(--t1) !important; }
.acc-dark-mode .model-chip { border-color: rgba(255,255,255,0.2) !important; }
.acc-dark-mode .plan-cta { background: var(--t1) !important; color: var(--bg) !important; }

/* Floating attachment style */
.user-atts-floating {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 6px; margin-bottom: 6px; width: 100%;
}
/* Horizontal image strip — varias fotos en fila con scroll horizontal cuando no caben */
.user-images-strip {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 6px; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    justify-content: flex-end;
    align-self: flex-end;
}
.user-images-strip::-webkit-scrollbar { height: 6px; }
.user-images-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.user-images-strip > img { flex-shrink: 0; }
/* Cuando hay muchas, el contenido rebasa — empieza por la izquierda para permitir scroll natural */
.user-images-strip.many { justify-content: flex-start; }
.user-image-floating {
    max-width: 220px; max-height: 200px; border-radius: 12px;
    object-fit: cover; cursor: zoom-in; transition: opacity 0.18s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25); pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
.user-image-floating:hover { opacity: 0.88; }
.user-file-floating {
    cursor: pointer; background: var(--bg-s) !important;
    border: 1px solid var(--border) !important;
}
.user-file-floating:hover { background: var(--bg-h) !important; }

/* Mobile history context menu */
.history-ctx-menu {
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 14px; padding: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    min-width: 180px; animation: fadeIn 0.12s ease;
}
.ctx-menu-title {
    font-size: 0.72rem; color: var(--t2); padding: 6px 10px 8px;
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.ctx-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 12px; border: none; background: transparent;
    color: var(--t1); font-size: 0.85rem; font-family: inherit;
    cursor: pointer; border-radius: 9px; text-align: left;
}
.ctx-menu-item:hover { background: var(--bg-h); }
.ctx-menu-item.danger { color: var(--danger); }
.ctx-menu-item.danger:hover { background: rgba(239,68,68,0.1); }

/* ==========================================================================
   PLAN & PRICING
   ========================================================================== */
.plan-badge {
    font-size: 0.68rem; font-weight: 700; padding: 3px 8px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.plan-badge.free { background: var(--bg-h); color: var(--t2); border: 1px solid var(--border); }
.plan-badge.plus { background: rgba(var(--acc-rgb),0.15); color: var(--acc); border: 1px solid rgba(var(--acc-rgb),0.3); }
.plan-badge.pro  { background: var(--acc-g); color: #fff; border: none; }

/* Premium counter lives in the input footer — never overlaps header */
.premium-counter-input {
    font-size: 0.7rem; font-weight: 600; color: var(--t2);
    cursor: pointer; align-items: center; gap: 4px; transition: color 0.2s;
}
.premium-counter-input.warn  { color: var(--warn); }
.premium-counter-input.empty { color: var(--danger); font-weight: 700; }

/* Legacy header counter — disabled */
.premium-counter { display: none !important; }

/* Plan cards */
.plan-card {
    background: var(--bg-h); border: 1px solid var(--border);
    border-radius: 16px; padding: 18px; position: relative;
    transition: border-color 0.2s;
}
.plan-card.plus { border-color: rgba(var(--acc-rgb),0.35); background: linear-gradient(180deg, rgba(var(--acc-rgb),0.05), var(--bg-s)); }
.plan-card.pro {
    border-color: rgba(var(--acc-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.08), var(--bg-s));
}
.plan-card.tokens { border-style: dashed; }
.plan-card-popular {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--acc); color: #fff; font-size: 0.68rem; font-weight: 700;
    padding: 3px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
}
.plan-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.plan-card-name { font-size: 1rem; font-weight: 700; color: var(--t1); }
.plan-card-price { font-size: 1.5rem; font-weight: 800; color: var(--t1); margin-top: 4px; }
.plan-card-price span { font-size: 0.8rem; font-weight: 400; color: var(--t2); }
.plan-card-badge {
    font-size: 0.68rem; font-weight: 700; padding: 3px 9px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-card-badge.free { background: var(--bg-s); color: var(--t2); border: 1px solid var(--border); }
.plan-card-badge.pro  { background: rgba(var(--acc-rgb),0.15); color: var(--acc); border: 1px solid rgba(var(--acc-rgb),0.3); }

.plan-features {
    list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px;
}
.plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.83rem; color: var(--t1); line-height: 1.4; }
.plan-features li svg { flex-shrink: 0; margin-top: 1px; }

.plan-cta {
    width: 100%; margin-top: 16px; padding: 12px;
    background: var(--acc); color: #fff; border: none;
    border-radius: 11px; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s; font-family: inherit;
}
.plan-cta:hover { opacity: 0.88; }
.plan-cta.secondary {
    background: transparent; color: var(--t2);
    border: 1px solid var(--border); margin-top: 8px;
}
.plan-cta.secondary:hover { background: var(--bg-h); color: var(--t1); }
.plan-cta:disabled { opacity: 0.5; cursor: not-allowed; }

.save-id-box {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    background: var(--bg-h); border: 1px solid var(--border); border-radius: 11px;
    color: var(--t2);
}

/* Limit reached overlay on model dropdown items */
.model-dropdown-item.locked { opacity: 0.5; }
.lock-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--acc); opacity: 0.7;
}


/* ===== WHITE/LIGHT ACCENT CONTRAST FIXES =====
   When acc is very light (white/near-white), ensure readable contrast
   on elements that use acc as background or border-accented text.
   We detect this via a CSS custom property set by JS.
*/
.acc-light-mode .status-pill.anon-active { color: #333 !important; }
.acc-light-mode .status-pill.anon-active .mode-icon { color: #333 !important; }
.acc-light-mode .model-dropdown-item.active { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; }
.acc-light-mode .message.user .msg-bubble { color: #111 !important; }
.acc-light-mode .user-edit-btn { color: rgba(0,0,0,0.45) !important; }
.acc-light-mode .user-edit-btn:hover { color: rgba(0,0,0,0.75) !important; }
.acc-light-mode .chat-pin-bar { color: #444 !important; }
.acc-light-mode .pin-clear { background: rgba(0,0,0,0.08) !important; color: #444 !important; }
[data-theme="light"] .inp-btn.send:not(:disabled) { background: var(--t1) !important; color: var(--bg) !important; border-color: var(--t1) !important; }
[data-theme="light"] .inp-btn.send:disabled { background: transparent !important; color: var(--t3, var(--t2)) !important; border: 1px solid var(--border) !important; }
.acc-light-mode .streaming-cursor::after { color: #555 !important; }
.acc-light-mode .nav-btn.new-chat { background: #1a1a1a !important; color: #fff !important; }
.acc-light-mode .nav-btn.new-chat svg { color: #fff !important; }
.acc-light-mode .typing-dots .dot { background: #555 !important; }
.acc-light-mode .empty-state h1 {
    background: linear-gradient(135deg, #555, #333) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.acc-light-mode .md-content a { color: #444 !important; }
.acc-light-mode .md-content code:not(pre code) { color: #333 !important; }
.acc-light-mode .status-pill { border-color: rgba(0,0,0,0.15) !important; }
.acc-light-mode .model-chip { border-color: rgba(0,0,0,0.15) !important; }
.acc-light-mode .history-item.pinned .history-item-pin { color: #555 !important; }
.acc-light-mode .history-action-btn.pin-btn:hover { color: #333 !important; }
.acc-light-mode .history-item.active .history-item-text,
.acc-light-mode .history-item:hover .history-item-text { color: var(--t1) !important; }
.acc-light-mode .toggle.active { background: #444 !important; }
.acc-light-mode .langpicker-item.current { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.18) !important; }
.acc-light-mode .langpicker-item.current::before { background: #333 !important; }
.acc-light-mode .langpicker-item.current .langpicker-item-native { color: #1a1a1a !important; }
.acc-light-mode .langpicker-item.current .langpicker-item-code { background: rgba(0,0,0,0.08) !important; color: #1a1a1a !important; }
.acc-light-mode .color-swatch.active { border-color: #333 !important; }
.acc-light-mode #hue-slider::-webkit-slider-thumb { background: #555 !important; }
.acc-light-mode .attach-menu-item svg { color: #444 !important; }
.acc-light-mode .ma-btn:hover { border-color: rgba(0,0,0,0.2) !important; }
.acc-light-mode .sidebar-search input:focus { border-color: #555 !important; }
.acc-light-mode .settings-textarea:focus, .acc-light-mode .settings-select:focus { border-color: #555 !important; }
.acc-light-mode .input-box:focus-within { border-color: rgba(0,0,0,0.3) !important; }
.acc-light-mode .model-dropdown-item:hover { background: rgba(0,0,0,0.05) !important; }
.acc-light-mode .md-content blockquote { border-left-color: #555 !important; background: rgba(0,0,0,0.04) !important; }

/* NOLO Slides */
.slides-progress-card {
    width:min(100%, 540px); padding:14px 15px; border:1px solid var(--border);
    border-radius:14px; background:linear-gradient(180deg, rgba(var(--acc-rgb),.08), var(--bg-h));
    color:var(--t1); box-shadow:0 10px 32px rgba(0,0,0,.16);
}
.slides-progress-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-weight:750; font-size:.9rem; }
.slides-progress-head .inline-typing-dots { margin-left:auto; }
.slides-progress-list { display:grid; gap:8px; }
.slides-progress-step { display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:9px; color:var(--t2); font-size:.82rem; }
.slides-progress-dot {
    width:10px; height:10px; border-radius:999px; border:1px solid var(--border);
    background:var(--bg-s);
}
.slides-progress-step.done .slides-progress-dot { background:#22c55e; border-color:#22c55e; box-shadow:0 0 14px rgba(34,197,94,.35); }
.slides-progress-step.active .slides-progress-dot { background:var(--acc); border-color:var(--acc); box-shadow:0 0 18px rgba(var(--acc-rgb),.5); animation:slidesPulse 1.15s ease-in-out infinite; }
.slides-progress-step.failed .slides-progress-dot { background:#ef4444; border-color:#ef4444; }
.slides-progress-step.skipped { opacity:.62; }
.slides-progress-step.active { color:var(--t1); }
.slides-progress-status { font-size:.68rem; color:var(--t2); text-transform:uppercase; letter-spacing:.04em; }
@keyframes slidesPulse { 0%,100% { transform:scale(.88); opacity:.62; } 50% { transform:scale(1.12); opacity:1; } }
.nolo-slides-card {
    display:flex; align-items:center; gap:14px; margin:0.8em 0; padding:14px 16px;
    background:var(--bg-h); border:1px solid var(--border); border-radius:12px;
    cursor:pointer; transition:border-color .15s, transform .15s; max-width:520px;
}
.nolo-slides-card:hover { border-color:var(--acc); transform:translateY(-1px); }
.nolo-slides-icon {
    width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(var(--acc-rgb),.22), rgba(255,255,255,.04));
    border:1px solid rgba(var(--acc-rgb),.35); border-radius:10px; color:var(--acc);
}
.nolo-slides-title { font-size:.95rem; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nolo-slides-sub { font-size:.76rem; color:var(--t2); margin-top:3px; }
.nolo-slides-overlay { position:fixed; inset:0; z-index:1200; background:var(--bg); display:none; flex-direction:column; }
.nolo-slides-overlay.active { display:flex; }
.nolo-slides-topbar {
    height:54px; flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:0 12px;
    border-bottom:1px solid var(--border); background:var(--bg-s);
}
.nolo-slides-topbar h3 { margin:0; font-size:.92rem; font-weight:700; color:var(--t1); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nolo-slides-spacer { flex:1; }
.nolo-slides-btn {
    border:1px solid var(--border); background:var(--bg-h); color:var(--t1); border-radius:9px;
    padding:8px 11px; font:600 .78rem inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
}
.nolo-slides-btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.nolo-slides-btn:hover { border-color:var(--acc); }
.nolo-slides-btn[disabled] { opacity:.45; cursor:not-allowed; }
.nolo-slides-zoom {
    display:flex; align-items:center; gap:5px; padding:3px; border:1px solid var(--border);
    border-radius:10px; background:var(--bg-h);
}
.nolo-slides-zoom-btn {
    min-width:30px; height:28px; border:0; border-radius:7px; background:transparent; color:var(--t1);
    font:800 .78rem inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.nolo-slides-zoom-btn:hover { background:rgba(var(--acc-rgb),.12); color:var(--acc); }
.nolo-slides-zoom-value { min-width:44px; color:var(--t2); font:800 .7rem inherit; text-align:center; }
.nolo-slides-shell { flex:1; min-height:0; display:block; }
.nolo-slides-editor { display:none; }
.nolo-slides-preview {
    --slides-zoom:1; height:100%; min-height:0; overflow:auto; padding:24px; display:flex; flex-direction:column; align-items:center;
    background:#08080a;
}
.nolo-slides-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.nolo-slides-field label { font-size:.72rem; color:var(--t2); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.nolo-slides-field input, .nolo-slides-field textarea, .nolo-slides-field select {
    width:100%; border:1px solid var(--border); background:var(--bg-h); color:var(--t1); border-radius:8px;
    padding:9px 10px; font:inherit; font-size:.84rem; outline:none; resize:vertical;
}
.nolo-slides-field textarea { min-height:74px; line-height:1.45; }
.nolo-slide-edit { border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:10px; background:var(--bg); cursor:pointer; }
.nolo-slide-edit.active { border-color:var(--acc); background:rgba(var(--acc-rgb),.08); }
.nolo-slide-edit-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.nolo-slide-num { color:var(--acc); font-size:.72rem; font-weight:800; }
.nolo-slide-type { margin-left:auto; color:var(--t2); font-size:.7rem; }
.nolo-slide-preview-frame {
    width:960px; max-width:none;
    aspect-ratio:16/9; background:#fff; color:#111; position:relative; overflow:hidden;
    border-radius:0; box-shadow:0 20px 50px rgba(0,0,0,.38); flex:0 0 auto; container-type:inline-size;
}
.nolo-slides-preview.zoomed { align-items:flex-start; }
.nolo-slides-canvas-wrap { flex:0 0 auto; position:relative; }
.nolo-slides-canvas {
    width:960px; display:flex; flex-direction:column; gap:22px; transform-origin:top left;
    transform:scale(var(--slides-zoom, 1)); will-change:transform;
}
.nolo-slide-preview-frame * { box-sizing:border-box; }
.nolo-slide-preview-frame .ns-text { overflow:hidden; text-wrap:balance; overflow-wrap:break-word; word-break:normal; hyphens:auto; }
.nolo-slide-preview-frame .ns-body { text-wrap:pretty; }
.nolo-slide-photo { position:absolute; object-fit:cover; display:block; background:#ddd; }
.nolo-slide-photo-label {
    position:absolute; left:0; right:0; bottom:0; padding:8px 10px; font-size:9px; line-height:1.2;
    background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff; opacity:.9;
}
.nolo-slide-page-num { position:absolute; right:22px; bottom:14px; font-size:10px; opacity:.48; font-family:Arial,sans-serif; }
.nolo-editor-hint { color:var(--t2); font-size:.78rem; line-height:1.45; margin:0 0 14px; }
.nolo-theme-swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px; }
.nolo-theme-swatch { height:34px; border-radius:8px; border:1px solid var(--border); cursor:pointer; display:flex; overflow:hidden; }
.nolo-theme-swatch.active { border-color:var(--acc); box-shadow:0 0 0 2px rgba(var(--acc-rgb),.18); }
.nolo-theme-swatch span { flex:1; }
.nolo-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 14px; }
.nolo-color-input { display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:8px; padding:7px; background:var(--bg); min-width:0; }
.nolo-color-input span { font-size:.7rem; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nolo-color-input input { width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; flex:0 0 auto; cursor:pointer; }
.nolo-slides-mini-btn { width:100%; border:1px solid var(--border); background:var(--bg-h); color:var(--t1); border-radius:8px; padding:8px 9px; font:600 .76rem inherit; cursor:pointer; }
.nolo-slides-mini-btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.nolo-slides-mini-btn:hover { border-color:var(--acc); }
.nolo-storyboard {
    width:min(100%, 980px); display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:14px; align-items:stretch;
}
.nolo-story-card {
    background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px;
    min-height:190px; display:flex; flex-direction:column; gap:9px;
}
.nolo-story-card.active { border-color:var(--acc); box-shadow:0 0 0 2px rgba(var(--acc-rgb),.14); }
.nolo-story-head { display:flex; align-items:center; gap:7px; min-width:0; }
.nolo-story-num { color:var(--acc); font-weight:800; font-size:.72rem; }
.nolo-story-type {
    margin-left:auto; min-width:82px; max-width:108px; border:1px solid var(--border); background:var(--bg-h);
    color:var(--t1); border-radius:7px; padding:5px 6px; font:600 .7rem inherit;
}
.nolo-story-title {
    color:var(--t1); font-weight:800; font-size:.94rem; line-height:1.18; min-height:2.3em;
    outline:none; border-radius:4px; padding:2px 3px;
}
.nolo-story-body {
    color:var(--t2); font-size:.76rem; line-height:1.42; min-height:3.9em; outline:none;
    border-radius:4px; padding:2px 3px; white-space:pre-wrap;
}
.nolo-story-empty {
    width:min(100%, 760px); border:1px dashed var(--border); color:var(--t2); border-radius:10px;
    padding:24px; text-align:center; background:var(--bg-s);
}
.nolo-rendering-state {
    width:min(100%, 760px); display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:420px; color:var(--t2); gap:12px; text-align:center;
}
.nolo-export-progress {
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    z-index:1300; width:min(520px, calc(100% - 28px)); padding:14px 15px;
    border:1px solid var(--border); border-radius:16px; background:rgba(18,18,22,.94);
    color:var(--t1); box-shadow:0 18px 60px rgba(0,0,0,.45); backdrop-filter:blur(18px);
}
.nolo-export-progress-head { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.86rem; font-weight:750; margin-bottom:10px; }
.nolo-export-progress-sub { color:var(--t2); font-size:.75rem; font-weight:600; }
.nolo-export-progress-bar { height:7px; border-radius:999px; background:var(--bg-h); overflow:hidden; border:1px solid var(--border); }
.nolo-export-progress-fill { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--acc), #a78bfa); transition:width .22s ease; }
.nolo-export-progress-cancel {
    margin-top:10px; border:1px solid var(--border); background:var(--bg-h); color:var(--t1);
    border-radius:10px; padding:7px 10px; font:700 .76rem inherit; cursor:pointer;
}
.nolo-export-result {
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    z-index:1301; width:min(520px, calc(100% - 28px)); padding:14px;
    border:1px solid var(--border); border-radius:16px; background:rgba(18,18,22,.96);
    color:var(--t1); box-shadow:0 18px 60px rgba(0,0,0,.48); backdrop-filter:blur(18px);
}
.nolo-export-result-title { font-size:.9rem; font-weight:800; margin-bottom:4px; }
.nolo-export-result-sub { color:var(--t2); font-size:.76rem; line-height:1.35; margin-bottom:12px; }
.nolo-export-result-actions { display:flex; gap:8px; flex-wrap:wrap; }
.nolo-export-result-actions button {
    border:1px solid var(--border); background:var(--bg-h); color:var(--t1); border-radius:10px;
    padding:8px 11px; font:700 .78rem inherit; cursor:pointer;
}
.nolo-export-result-actions button.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
@media (max-width: 840px) {
    .nolo-slides-topbar { gap:5px; padding:0 8px; }
    .nolo-slides-btn { padding:7px 8px; font-size:.72rem; }
    .nolo-slides-zoom { padding:2px; gap:2px; }
    .nolo-slides-zoom-btn { min-width:27px; height:26px; }
    .nolo-slides-zoom-value { min-width:36px; font-size:.64rem; }
}

/* ==========================================================================
   ENHANCED ANIMATIONS — sutiles, consistentes con el estilo NOLO
   easing: cubic-bezier(0.32, 0.72, 0, 1) = "spring-like" (ya usado en artifact)
   easing: cubic-bezier(0.4, 0, 0.2, 1)   = material-standard (ya usado)
   ========================================================================== */

/* Tokens de animación — para mantener consistencia */
:root {
    --ease-out-soft: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.15s;
    --dur-base: 0.22s;
    --dur-slow: 0.35s;
}

/* --- Keyframes nuevos --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes dropdownIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes panelDropDown {
    from { opacity: 0; transform: translateY(-4px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 600px; }
}
@keyframes shimmerAccent {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes softPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--acc-rgb), 0.08); }
}
@keyframes toggleBounce {
    0%   { transform: translateX(21px) scale(1); }
    40%  { transform: translateX(21px) scale(1.12); }
    100% { transform: translateX(21px) scale(1); }
}
@keyframes sidebarItemIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes checkPop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Mejoras de transiciones globales --- */

/* Botones — micro-interacción de press */
.nav-btn, .hdr-btn, .menu-toggle, .ma-btn, .inp-btn,
.history-action-btn, .pers-panel-act-btn, .project-action-btn,
.modal-close, .artifact-topbar-btn, .theme-mode-btn, .adv-nav-btn,
.install-android-btn, .pin-clear, .code-copy-btn, .code-preview-btn,
.retry-model-btn, .sources-btn, .plan-cta {
    transition: background var(--dur-base) var(--ease-std),
                border-color var(--dur-base) var(--ease-std),
                color var(--dur-base) var(--ease-std),
                transform var(--dur-fast) var(--ease-out-soft),
                opacity var(--dur-fast) var(--ease-std),
                box-shadow var(--dur-base) var(--ease-std);
}
.nav-btn:active, .hdr-btn:active, .menu-toggle:active, .ma-btn:active,
.history-action-btn:active, .pers-panel-act-btn:active, .project-action-btn:active,
.modal-close:active, .artifact-topbar-btn:active, .theme-mode-btn:active,
.code-copy-btn:active, .code-preview-btn:active, .retry-model-btn:active,
.sources-btn:active, .plan-cta:active, .install-android-btn:active, .adv-nav-btn:active {
    transform: scale(0.96);
}
.inp-btn:active:not(:disabled) { transform: scale(0.92); }

/* ──────────────────────────────────────────────────────────────────────────
   ANIMATION SYSTEM — shared open/close timing across drawer + bottom sheet
   + modal. Two distinct easing curves so the motion feels right:
     · Opening  (deceleration → frena al llegar): cubic-bezier(0, 0, 0.2, 1)
     · Closing  (acceleration → arranca lento, sale rápido): cubic-bezier(0.4, 0, 1, 1)
   Only `transform` and `opacity` animate — both run on the compositor
   thread, never trigger layout/repaint.
   ────────────────────────────────────────────────────────────────────────── */
/* Sidebar (navigation drawer) */
.sidebar         { transition: transform 280ms cubic-bezier(0.4, 0, 1, 1); }
.sidebar.open    { transition: transform 280ms cubic-bezier(0, 0, 0.2, 1); }
.sidebar-overlay { transition: opacity   280ms cubic-bezier(0.4, 0, 1, 1); }
.sidebar-overlay.active { transition: opacity 280ms cubic-bezier(0, 0, 0.2, 1); }

.history-item, .project-header, .pers-panel-item, .assign-project-item,
.model-dropdown-item, .source-item, .setting-row.clickable {
    transition: background var(--dur-fast) var(--ease-std),
                border-color var(--dur-fast) var(--ease-std),
                color var(--dur-fast) var(--ease-std),
                transform var(--dur-fast) var(--ease-out-soft);
}
.history-item:hover, .project-header:hover { transform: translateX(2px); }
.model-dropdown-item:hover, .pers-panel-item:hover, .source-item:hover { transform: translateX(1px); }
.history-item:active, .project-header:active { transform: translateX(2px) scale(0.99); }

/* New chat button — matte (no lift, no shadow) */
.nav-btn.new-chat {
    transition: background var(--dur-base) var(--ease-std),
                opacity var(--dur-base) var(--ease-std),
                transform var(--dur-fast) var(--ease-out-soft);
}
.nav-btn.new-chat:active { transform: scale(0.98); }

/* Chevrons — easing más natural */
.pers-select-chevron, .project-chevron, .projects-section-chevron,
.reasoning-toggle .reasoning-arrow {
    transition: transform var(--dur-base) var(--ease-out-back);
}

/* Status pill — micro-scale al activar (modo anónimo, etc) */
.status-pill { transition: all var(--dur-base) var(--ease-out-soft); }
.status-pill:hover { transform: translateY(-1px); }
.status-pill:active { transform: translateY(0) scale(0.97); }
.status-pill.anon-active { animation: scaleIn 0.28s var(--ease-out-back) both; }

/* Model chip — mismo tratamiento */
.model-chip { transition: all var(--dur-base) var(--ease-out-soft); }
.model-chip:hover { transform: translateY(-1px); }
.model-chip:active { transform: translateY(0) scale(0.97); }

/* Model dropdown — entrada con scale + fade */
.model-dropdown.active { animation: dropdownIn 0.22s var(--ease-out-back) both; }

/* Modal — entrada con backdrop fade más fluido */
.modal-overlay { transition: opacity var(--dur-slow) var(--ease-std); }


/* Toast — easing más tipo spring */
.toast { transition: opacity var(--dur-slow) var(--ease-out-back),
                     transform var(--dur-slow) var(--ease-out-back); }

/* Send button — minimal: hover sube ligeramente, sin pulso constante */
.inp-btn.send:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.18); }
.inp-btn.send:not(:disabled):active { transform: translateY(0) scale(0.94); }

/* Mic button — pulse propio ya existe, reforzamos hover */
.inp-btn.mic:hover { transform: scale(1.05); }

/* Toggle — bounce sutil al activar */
.toggle::after { transition: transform 0.32s var(--ease-out-back), background 0.2s; }
.toggle.active::after { animation: toggleBounce 0.42s var(--ease-out-back) both; }

/* Color swatch — hover con rotación leve */
.color-swatch:active { transform: translateY(0); transition: transform 0.08s var(--ease-std); }

/* Tab buttons — underline animado */
.tab-btn { position: relative; transition: color var(--dur-base) var(--ease-std); border-bottom: 2px solid transparent; }
.tab-btn::after {
    content: ''; position: absolute; left: 14%; right: 14%; bottom: -2px; height: 2px;
    background: var(--acc); border-radius: 2px;
    transform: scaleX(0); transform-origin: center;
    transition: transform var(--dur-base) var(--ease-out-back);
}
.tab-btn.active { border-bottom-color: transparent; }
.tab-btn.active::after { transform: scaleX(1); }

/* Input box — focus glow sutil */
.input-box { transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-slow) var(--ease-std); }
.input-box:focus-within { box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.10), var(--glass); }

/* Inputs de texto — focus glow consistente */
.sidebar-search input, .chat-search-input,
.project-modal input, .project-modal textarea {
    transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.sidebar-search input:focus, .chat-search-input:focus,
.project-modal input:focus, .project-modal textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.10);
}

/* Cards (artifact, plan, etc) — lift sutil al hover */
.artifact-card { transition: border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-std); }
.artifact-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.artifact-card:active { transform: translateY(0) scale(0.99); }

/* Code block — subtle border highlight on hover */
.code-block { transition: border-color var(--dur-base) var(--ease-std); }
.code-block:hover { border-color: rgba(var(--acc-rgb), 0.25); }

/* Copy button "copied" — pop de confirmación */
.code-copy-btn.copied { animation: checkPop 0.34s var(--ease-out-back) both; }

/* Empty state — entrada secuencial (sin shimmer en el logo, queda más limpio) */
.empty-state { animation: fadeIn 0.6s var(--ease-std) both; }
.empty-state p { animation: fadeIn 0.6s 0.12s var(--ease-std) both; }

/* Sources panel — apertura al mostrarse */
.sources-panel.open { animation: panelDropDown 0.28s var(--ease-out-soft) both; }
.pers-panel.open    { animation: panelDropDown 0.24s var(--ease-out-soft) both; }

/* Reasoning body — entrada suave al expandirse */
.reasoning-wrap.open .reasoning-body { animation: fadeIn 0.25s var(--ease-std) both; }

/* Edit mode bar / pin bar / chat search bar — fade al aparecer */
.edit-mode-bar.visible, .chat-pin-bar.visible { animation: fadeIn 0.2s var(--ease-std) both; }

/* Scroll-to-bottom — entrada sutil.
   Dedicated keyframes so the entrance animation keeps translateX(-50%);
   the shared scaleIn would otherwise drop it and leave the button anchored
   by its left edge (visibly off-centre). */
.scroll-bottom-btn.visible { animation: scrollBottomIn 0.22s var(--ease-out-back) both; }
@keyframes scrollBottomIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.94); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.scroll-bottom-btn:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.scroll-bottom-btn:active { transform: translateX(-50%) scale(0.94); }

/* Markdown link — underline expandible */
.md-content a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--dur-base) var(--ease-out-soft), color var(--dur-base);
    border-bottom: none;
}
.md-content a:hover { background-size: 100% 1px; }

/* Header buttons — rotación sutil al hover en algunos íconos (no destructivo) */
.menu-toggle:hover svg { transform: scale(1.05); transition: transform var(--dur-base) var(--ease-out-back); }
.modal-close:hover svg { transform: rotate(90deg); transition: transform var(--dur-slow) var(--ease-out-back); }
.modal-close svg { transition: transform var(--dur-slow) var(--ease-std); }

/* Lightbox — fade del fondo */
.img-lightbox { animation: fadeIn 0.22s var(--ease-std) both; }
.img-lightbox img { animation: none !important; }

/* Drop overlay — fade */
.drop-overlay.active { animation: fadeIn 0.18s var(--ease-std) both; }

/* Sidebar items entrada (solo cuando aparecen — no hover) */
.history-item, .project-group { animation: sidebarItemIn 0.32s var(--ease-out-soft) both; }

/* Theme mode buttons — micro lift */
.theme-mode-btn:hover:not(.active) { transform: translateY(-1px); }
.theme-mode-btn:active { transform: translateY(0) scale(0.97); }

/* Tag pills (vision, coding) — pop al aparecer */
.tag-pill { animation: scaleIn 0.28s var(--ease-out-back) both; }

/* Lock icon — fade in */
.lock-icon { animation: fadeIn 0.3s var(--ease-std) both; }

/* Adv nav btn — flecha que se desplaza */
.adv-nav-btn svg:last-child { transition: transform var(--dur-base) var(--ease-out-back); }
.adv-nav-btn:hover svg:last-child { transform: translateX(3px); }

/* Install android button — icono que rebota */
.install-android-btn:hover svg:first-child { transform: translateY(-2px); transition: transform var(--dur-base) var(--ease-out-back); }
.install-android-btn svg:first-child { transition: transform var(--dur-base) var(--ease-std); }

/* Sources arrow — desplazamiento al hover */
.source-item .source-arrow { transition: transform var(--dur-base) var(--ease-out-back), opacity var(--dur-base), color var(--dur-base); }
.source-item:hover .source-arrow { transform: translateX(3px); }

/* Continue btn — pulsación leve cuando aparece */
.continue-btn { animation: scaleIn 0.32s var(--ease-out-back) both; }

/* Usage bar fill — easing más fluido */
.usage-bar-fill { transition: width 0.6s var(--ease-out-soft); }

/* Persistir el comportamiento original sin animar el body en cada repintado */
body { animation: fadeIn 0.4s var(--ease-std) both; }

/* ── QR CODE BLOCK ────────────────────────────────────────────── */
.qr-wrap {
    margin: 0.7em 0; padding: 18px 16px 14px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-s); display: inline-flex; flex-direction: column;
    align-items: center; gap: 10px; max-width: 100%;
    animation: scaleIn 0.32s var(--ease-out-back) both;
}
.qr-canvas { display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 10px; background: #fff; }
.qr-canvas svg { display: block; max-width: 100%; height: auto; }
.qr-label { font-size: 0.83rem; font-weight: 600; color: var(--t1); text-align: center; }
.qr-data {
    font-size: 0.72rem; color: var(--t2); font-family: 'Fira Code', 'Consolas', monospace;
    max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85;
}
.qr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.qr-btn {
    background: var(--bg-h); border: 1px solid var(--border); color: var(--t2);
    padding: 6px 10px; border-radius: 8px; font-size: 0.74rem; font-weight: 600;
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
    transition: border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std),
                background var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-out-soft);
}
.qr-btn:hover { border-color: var(--acc); color: var(--acc); }
.qr-btn:active { transform: scale(0.95); }

/* ============================================================
   ACCESIBILIDAD: respetar prefers-reduced-motion
   Desactiva animaciones decorativas, mantiene transiciones críticas
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .inp-btn.send:not(:disabled) { animation: none; }
}