/* ============================================================================
 * mobile-app.css — the Delphos Android app (html.native-app, set by
 * mobile-app.js). Loaded last. EVERY rule is scoped to html.native-app, so the
 * website and the desktop layout are untouched.
 *
 * One design system, not layers of overrides:
 *   1. Tokens       neutral surfaces (dark + light), the user's accent, type,
 *                   motion. The web theme variables are re-pointed at them, so
 *                   every web component inside the app speaks the same palette
 *                   and has no hairline borders (surfaces separate by tone).
 *   2. Chrome       top bar, chat column, greeting, composer.
 *   3. Sheets       every menu / picker / popover is a bottom sheet with one
 *                   look: grab handle, rows, scrim, iOS-like motion.
 *   4. Dialogs      confirmations and small forms, also as sheets.
 *   5. Drawer       full-screen sidebar: links, character, projects, chats.
 *   6. Pages        Settings, Tools, Library, Artifacts, Work Drive, Chats,
 *                   Playbooks — one header, grouped cards, one form style.
 *   7. Native bits  editor, permissions, welcome, sign-in.
 * ========================================================================== */

/* ══ 1. Tokens ════════════════════════════════════════════════════════════ */
html.native-app {
    --n-top: env(safe-area-inset-top, 0px);
    --n-bottom: env(safe-area-inset-bottom, 0px);
    --n-bar: 56px;
    --n-font: 'Google Sans', 'Google Sans Text', 'Plus Jakarta Sans', system-ui, -apple-system, Roboto, sans-serif;
    --n-sans: var(--n-font);    /* older name, read by auth-login.css */
    --n-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --n-ease: cubic-bezier(.32, .72, 0, 1);      /* iOS sheet curve */
    --n-dur: .38s;
    --n-r-sheet: 28px;
    --n-r-card: 20px;
    --n-r-row: 14px;
    --n-r-tile: 12px;
    -webkit-tap-highlight-color: transparent;
    background: #18181b;
}
html.native-app:has(body.light_mode) { background: #ffffff; }

/* Tokens live on BODY: the theme class (body.light_mode) is set there. */
html.native-app body {
    --n-bg: #18181b;
    --n-s1: #222226;          /* cards, composer, list groups */
    --n-s2: #2c2c31;          /* tiles, fields, pressed rows */
    --n-s3: #38383e;          /* pressed on s2, tracks */
    --n-text: #f0f0f2;
    --n-muted: #a1a1aa;
    --n-faint: #71717a;
    --n-sep: rgba(255, 255, 255, .07);
    --n-sheet: #222226;       /* sheets + dialogs */
    --n-sheet-tile: #2e2e33;  /* icon tiles / fields on a sheet */
    --n-sheet-press: #2c2c31;
    --n-scrim: rgba(0, 0, 0, .55);
    --n-shadow: 0 -12px 44px rgba(0, 0, 0, .42);
    --n-lift: 0 10px 30px rgba(0, 0, 0, .28);
    --n-danger: #f26b6b;
    --n-danger-bg: #e5484d;
    --n-ok: #4cc38a;
    --n-acc: var(--accent, #3b7bf6);
    --n-acc-ink: var(--accent-contrast, #ffffff);
    --n-acc-soft: color-mix(in srgb, var(--n-acc) 18%, transparent);
    --n-acc-text: color-mix(in srgb, var(--n-acc) 72%, var(--n-text));

    /* The web theme, re-pointed at the app palette. */
    --primary-color: var(--n-bg);
    --chat-area-background: var(--n-bg);
    --secondary-color: var(--n-s2);
    --secondary-hover-color: var(--n-s3);
    --light-dark-background: var(--n-s1);
    --darker-background: var(--n-s1);
    --highlight-background: var(--n-s3);
    --text-color: var(--n-text);
    --subheading-color: var(--n-muted);
    --placeholder-color: var(--n-faint);
    --border-color: transparent;
    --nav-bar-color: var(--n-bg);
    --nav-bar-border: transparent;
    --hover-bg: color-mix(in srgb, var(--n-text) 5%, transparent);
    --hover-bg-strong: color-mix(in srgb, var(--n-text) 8%, transparent);
    --input-wrapper-shadow: none;

    background: var(--n-bg) !important;
    color: var(--n-text);
    font-family: var(--n-font);
    overscroll-behavior: none;
}
html.native-app body.light_mode {
    --n-bg: #ffffff;
    --n-s1: #f4f4f5;
    --n-s2: #e9e9ec;
    --n-s3: #dcdce1;
    --n-text: #18181b;
    --n-muted: #5f5f6b;
    --n-faint: #8b8b95;
    --n-sep: rgba(0, 0, 0, .08);
    --n-sheet: #ffffff;
    --n-sheet-tile: #f1f1f3;
    --n-sheet-press: #f1f1f3;
    --n-scrim: rgba(16, 16, 22, .34);
    --n-shadow: 0 -12px 44px rgba(16, 16, 24, .14);
    --n-lift: 0 8px 26px rgba(16, 16, 24, .09);
    --n-danger: #d13438;
    --n-danger-bg: #d92d2d;
    --n-ok: #1f9d63;
    --n-acc-text: color-mix(in srgb, var(--n-acc) 82%, var(--n-text));
}
html.native-app :is(button, input, textarea, select) { font-family: var(--n-font); }
html.native-app :is(button, [role="button"]) { -webkit-tap-highlight-color: transparent; }
html.native-app :where(.nav, .nav-menu, .typing-area, .nsheet, .nd-links) { -webkit-user-select: none; user-select: none; }
html.native-app ::selection { background: var(--n-acc-soft); }
/* Touch never shows focus rings; a hardware keyboard gets one accent ring. */
html.native-app :is(button, [role="button"], [role="menuitem"], [role="option"], input, textarea, select, a, [tabindex]):focus:not(:focus-visible) { outline: none !important; box-shadow: none; }
html.native-app :is(button, [role="button"], [role="menuitem"], a):focus-visible { outline: 2px solid var(--n-acc); outline-offset: 2px; }
html.native-app * { scrollbar-width: none; }
html.native-app *::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* ── Removed from the app ─────────────────────────────────────────────────── */
html.native-app #schedule-menu-item,
html.native-app #code-menu-item,
html.native-app #design-menu-item,
html.native-app #files-menu-item,
html.native-app .nav .brand-name,
html.native-app .nav .action-buttons,
html.native-app #notices_panel-btn,
html.native-app #memory_panel-btn,
html.native-app .top-menu-actions > div:has(> button[onclick^="newChat"]),
html.native-app .cc-suggest,
html.native-app .header .greet-caret { display: none !important; }

/* ── Shared app components (used by mobile-app.js markup) ─────────────────── */
html.native-app .n-icon-btn {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 14px; padding: 0; margin: 0;
    background: transparent; color: var(--n-text); cursor: pointer;
}
html.native-app .n-icon-btn .material-symbols-rounded { font-size: 24px; }
html.native-app .n-icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.native-app .n-icon-btn.n-pressed { background: var(--n-s1); }
html.native-app .n-icon-btn[aria-pressed="false"] { opacity: .45; }
html.native-app .n-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
    background: var(--n-s2); color: var(--n-text);
    font: 600 15px/1 var(--n-font); cursor: pointer; flex-shrink: 0;
    transition: transform .14s var(--n-ease), opacity .14s ease, background-color .14s ease;
}
html.native-app .n-btn.is-sm { height: 36px; padding: 0 16px; font-size: 14px; }
html.native-app .n-btn.is-block { width: 100%; }
html.native-app .n-btn.is-primary { background: var(--n-acc); color: var(--n-acc-ink); }
html.native-app .n-btn:disabled { background: var(--n-s2); color: var(--n-faint); }
html.native-app .n-btn.n-pressed:not(:disabled) { transform: scale(.97); }
html.native-app .n-tile {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--n-r-tile);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--n-s1); color: var(--n-text);
}
html.native-app .n-tile .material-symbols-rounded { font-size: 20px; font-variation-settings: 'wght' 400; }
html.native-app .n-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(145deg, #4f5fe8, #2f8bf5 55%, #19b9a0); color: #fff;
    font: 600 15px/1 var(--n-font); letter-spacing: .02em;
}
html.native-app .n-chip {
    display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
    background: var(--n-s2); color: var(--n-muted); font: 600 12.5px/1 var(--n-font); flex-shrink: 0;
}
html.native-app .n-chip.is-acc { background: var(--n-acc-soft); color: var(--n-acc-text); }
html.native-app .n-switch { margin-left: auto; position: relative; width: 52px; height: 32px; flex-shrink: 0; }
html.native-app .n-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; }
html.native-app .n-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--n-s3); transition: background .2s ease; }
html.native-app .n-switch span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .24s var(--n-ease); }
html.native-app .n-switch input:checked + span { background: var(--n-acc); }
html.native-app .n-switch input:checked + span::after { transform: translateX(20px); }
html.native-app .n-search {
    position: relative; display: flex; align-items: center; gap: 10px;
    height: 46px; margin: 0 16px 10px; padding: 0 16px; border-radius: 999px;
    background: var(--n-s1); color: var(--n-muted);
}
html.native-app .n-search .material-symbols-rounded { font-size: 21px; }
html.native-app .n-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--n-text); font: 400 15.5px var(--n-font); }
html.native-app .n-search input::placeholder { color: var(--n-faint); }
html.native-app .n-list { display: flex; flex-direction: column; padding: 0 8px; }
html.native-app .n-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 12px;
    border: 0; border-radius: var(--n-r-row); background: transparent; color: var(--n-text); text-align: left; cursor: pointer;
}
html.native-app .n-row.n-pressed { background: var(--n-s1); }
html.native-app .n-row > .material-symbols-rounded { font-size: 18px; color: var(--n-faint); }
html.native-app .n-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.native-app .n-row-txt b { font: 500 16px/1.3 var(--n-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .n-row-txt small { font: 400 13px/1.3 var(--n-font); color: var(--n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .n-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 24px; text-align: center; color: var(--n-muted); }
html.native-app .n-empty .material-symbols-rounded { font-size: 40px; color: var(--n-faint); margin-bottom: 6px; }
html.native-app .n-empty b { font: 600 17px var(--n-font); color: var(--n-text); }
html.native-app .n-empty span { font-size: 14px; }
html.native-app .n-group { display: flex; flex-direction: column; gap: 2px; border-radius: var(--n-r-card); overflow: hidden; }

/* ══ 2. Chrome ════════════════════════════════════════════════════════════ */
/* ── Top bar ──────────────────────────────────────────────────────────────── */
html.native-app section.nav {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important;
    height: calc(var(--n-bar) + var(--n-top)) !important;
    padding: var(--n-top) 6px 0 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    background: var(--n-bg) !important;   /* solid: a live blur costs every scroll frame on phones */
    border: 0 !important; box-shadow: none !important;
    z-index: 1001 !important;
}
html.native-app section.nav::after { display: none !important; }
html.native-app .nav .nav-primary-controls {
    position: static !important; inset: auto !important; transform: none !important; translate: none !important;
    display: flex !important; align-items: center !important; height: var(--n-bar) !important; margin: 0 !important; gap: 0;
}
html.native-app .nav .nav-menu-button { position: static !important; inset: auto !important; transform: none !important; }
html.native-app .nav .nt-menu,
html.native-app .nav .nt-btn {
    width: 46px !important; height: 46px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border: 0 !important; background: transparent !important; border-radius: 14px !important;
    color: var(--n-text) !important; padding: 0 !important; margin: 0 !important; cursor: pointer;
}
html.native-app .nav .nt-menu svg,
html.native-app .nav .nt-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.native-app .nav .nt-more svg { fill: currentColor; stroke: none; }
html.native-app .nav .nt-menu.n-pressed,
html.native-app .nav .nt-btn.n-pressed { background: var(--n-s1) !important; }
html.native-app .nav .nt-right { display: flex; align-items: center; }
/* Home: the compose button is pointless — the chat IS new. */
html.native-app body.new-chat-view .nav .nt-new { visibility: hidden; }

/* Chat | Work: a quiet segmented control in the middle. */
html.native-app .nav .app-mode-switch {
    position: absolute !important;
    left: 50% !important; top: calc(var(--n-top) + (var(--n-bar) - 38px) / 2) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important; padding: 3px !important; height: 38px !important; gap: 0 !important;
    background: var(--n-s1) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
}
html.native-app .nav .app-mode-switch .ams-opt {
    height: 32px !important; min-width: 66px !important; padding: 0 14px !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    background: transparent !important; color: var(--n-muted) !important;
    font: 600 13.5px/1 var(--n-font) !important;
}
html.native-app .nav .app-mode-switch .ams-opt[aria-checked="true"] { background: var(--n-s3) !important; color: var(--n-text) !important; }
html.native-app body.light_mode .nav .app-mode-switch .ams-opt[aria-checked="true"] { background: #ffffff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .1) !important; }
html.native-app .nav .app-mode-switch::before,
html.native-app .nav .app-mode-switch .ams-thumb { display: none !important; }
html.native-app .nav .app-mode-switch .ams-spark { color: var(--n-acc-text); margin-right: 4px; }

/* ── Chat column ──────────────────────────────────────────────────────────── */
html.native-app body,
html.native-app .chat-container,
html.native-app .chat-list { background: var(--n-bg) !important; }
html.native-app .chat-container { padding-top: calc(var(--n-bar) + var(--n-top)) !important; }
html.native-app .chat-list {
    margin-top: 0 !important;
    padding: 14px 18px calc(176px + var(--n-bottom)) !important;
}
/* The first turn sits right under the bar (it had 72px + 26px above it). */
html.native-app .chat-list > .outgoingRadius:not(.outgoingRadius ~ .outgoingRadius):not(.message ~ .outgoingRadius),
html.native-app .chat-list > .outgoingRadius:not(.outgoingRadius ~ .outgoingRadius):not(.message ~ .outgoingRadius) > .message.outgoing,
html.native-app .chat-list > .message:not(.outgoingRadius ~ .message):not(.message ~ .message) { margin-top: 0 !important; }
html.native-app .chat-list .message.incoming .text,
html.native-app .chat-list .message.incoming .text :is(p, li, blockquote, td, th) {
    font-family: var(--n-font) !important; font-size: 16.5px; line-height: 1.66 !important; letter-spacing: 0;
}
html.native-app .chat-list .message.incoming .text :is(h1, h2, h3, h4) { font-family: var(--n-font) !important; font-weight: 650 !important; letter-spacing: -0.01em; }
html.native-app .chat-list .message.incoming .text :is(code, pre, pre *, kbd, samp) { font-family: var(--n-mono) !important; font-size: 13.5px !important; }
html.native-app .chat-list .message.incoming .text :not(pre) > code { background: var(--n-s2) !important; border: 0 !important; border-radius: 6px; padding: 1px 6px; }
html.native-app .chat-list .message.incoming .text pre { background: var(--n-s1) !important; border: 0 !important; border-radius: 16px !important; }
html.native-app .chat-list .message.incoming .text :is(table, th, td) { border-color: var(--n-sep) !important; }
html.native-app .chat-list .message.incoming .text blockquote { border-left: 3px solid var(--n-s3) !important; background: transparent !important; }
html.native-app .chat-list .message.outgoing {
    max-width: 84% !important;
    border-radius: 22px !important;
    background: var(--n-s2) !important;
    border: 0 !important; box-shadow: none !important;
    padding: 10px 16px !important;
}
html.native-app body.light_mode .chat-list .message.outgoing { background: var(--n-s1) !important; }
html.native-app .chat-list .message.outgoing .text { font: 400 16px/1.5 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .chat-list .message.incoming .message-actions { opacity: 1 !important; transform: none !important; gap: 2px; margin-top: 2px; }
html.native-app .chat-list .message.incoming .message-actions :is(button, .material-symbols-rounded) {
    min-width: 38px; min-height: 38px; font-size: 20px !important; color: var(--n-muted) !important;
    background: transparent !important; border: 0 !important; border-radius: 12px !important;
}
html.native-app .chat-list .outgoing-actions :is(button, .msg-act-btn) { background: transparent !important; border: 0 !important; color: var(--n-muted) !important; }
html.native-app .chat-list :is(.thinking-summary, .thought-toggle, .think-head, [class*="thought"]) { color: var(--n-muted) !important; border: 0 !important; }
html.native-app .source-button {
    border-radius: 999px !important; background: var(--n-s1) !important; border: 0 !important;
    padding: 6px 14px !important; font-size: 13.5px !important; color: var(--n-text) !important;
}

/* ── Greeting (home) ──────────────────────────────────────────────────────── */
html.native-app body.new-chat-view .chat-list .header {
    min-height: calc(100dvh - var(--n-bar) - var(--n-top) - 210px - var(--n-bottom));
    display: flex !important; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 !important;
}
html.native-app .header .header-title-con { flex-direction: column !important; align-items: center !important; gap: 14px; }
html.native-app .n-mark-wrap { display: none; }
html.native-app body.new-chat-view .n-mark-wrap { display: flex; justify-content: center; }
html.native-app .n-mark { width: 52px; height: 52px; overflow: visible; }
/* The mark draws itself on the home screen: the orbit sweeps in, the spark pops and turns. */
html.native-app .n-mark .n-orbit { stroke-dasharray: 100 100; animation: n-orbit-in .75s cubic-bezier(.4, 0, .2, 1) both; }
html.native-app .n-mark .n-spark { transform-box: fill-box; transform-origin: center; animation: n-spark-in .55s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
@keyframes n-orbit-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes n-spark-in { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }
html.native-app .nd-head .n-mark :is(.n-orbit, .n-spark) { animation: none; }
html.native-app .header .title.delphos-greet,
html.native-app .header .title.delphos-greet * {
    font: 600 27px/1.22 var(--n-font) !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important; color: var(--n-text) !important;
}
html.native-app .header .title.delphos-greet { padding: 0 20px !important; }
/* Work landing: the project control under the greeting. */
html.native-app .wh-greet-proj {
    height: 38px !important; padding: 0 14px 0 12px !important; gap: 8px !important;
    border: 0 !important; border-radius: 999px !important; background: var(--n-s1) !important;
    color: var(--n-muted) !important; font: 500 14px/1 var(--n-font) !important; box-shadow: none !important;
}
html.native-app .wh-greet-proj.is-set { color: var(--n-text) !important; }

/* ── Composer card ────────────────────────────────────────────────────────── */
html.native-app .typing-area {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; margin: 0 !important;
    padding: 8px 16px calc(12px + var(--n-bottom)) !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
}
/* A soft fade into the page behind the card, never a band. */
html.native-app .typing-area::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--n-bg) 0%, transparent), var(--n-bg) 58%);
    pointer-events: none; z-index: -1;
}
html.native-app .typing-area .typing-form { width: 100% !important; max-width: none !important; margin: 0 !important; }
html.native-app .typing-area .typing-form .input-wrapper {
    background: var(--n-s1) !important;
    border: 0 !important; outline: 0 !important;
    border-radius: 26px !important;
    box-shadow: var(--n-lift) !important;
    padding: 10px 14px 10px !important;
}
/* Chat mode: text on top, one control row underneath (Work already stacks). */
html.native-app.app-chat body:not(.character-mode) .typing-area .typing-form .input-wrapper {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "prev prev prev" "input input input" "left . right" !important;
    row-gap: 8px !important; column-gap: 8px !important;
}
html.native-app .typing-area .typing-form .typing-input {
    font: 400 16px/1.45 var(--n-font) !important;
    padding: 6px 6px 4px 6px !important;
    color: var(--n-text) !important; background: transparent !important; border: 0 !important;
}
html.native-app .typing-area .typing-form .typing-input::placeholder { color: var(--n-faint) !important; }
html.native-app.app-chat body:not(.character-mode) .typing-area:not(.chat-expanded) .typing-form .typing-input {
    min-height: 42px !important;
    height: 42px !important;
}

html.native-app .nc-upsell { display: none !important; }

/* Control row. A transform / will-change on an ancestor would become the
   containing block of the position:fixed sheets inside (+ menu, Fast / Pro),
   trapping them in the composer — so none of these ever transform. */
html.native-app .typing-area .typing-form,
html.native-app .typing-form .input-tools-left,
html.native-app .typing-form .input-actions-right,
html.native-app .typing-form .input-actions,
html.native-app .typing-form .input-wrapper,
html.native-app .typing-form .chat-tier,
html.native-app .typing-form #attach-file-button,
html.native-app .typing-form #attach-file-button:active,
html.native-app .typing-form #attach-file-button.open { transform: none !important; will-change: auto !important; filter: none !important; contain: none !important; }
html.native-app .typing-form .input-tools-left,
html.native-app .typing-form .input-actions-right { gap: 8px !important; align-items: center !important; height: auto !important; min-height: 42px !important; }
/* Every round control is exactly 42 × 42 (ui-polish.css caps .tool-btn at 36).
   No `display` here: the web state machine shows / hides mic, send and stop,
   and an id-level display rule would override it. */
html.native-app body .typing-area .typing-form :is(#attach-file-button, #mic-input-button, .nc-voice, #send-message-button, #stop-stream-button, .work-project-chip) {
    width: 42px !important; height: 42px !important;
    min-width: 42px !important; max-width: 42px !important;
    min-height: 42px !important; max-height: 42px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
    align-items: center !important; justify-content: center !important;
    border: 0 !important; box-shadow: none !important; box-sizing: border-box !important;
    position: relative !important; inset: auto !important;
}
html.native-app .typing-form #attach-file-button { display: inline-flex !important; }
html.native-app.app-work .typing-form .work-project-chip:not([hidden]) { display: inline-flex !important; }
html.native-app .typing-form .nc-voice { display: inline-flex !important; }
/* Thinking lives in the model sheet (Effort): the extra toggle only crowded the row. */
html.native-app .typing-form #deep-think-toggler { display: none !important; }
html.native-app .typing-form :is(#attach-file-button, #mic-input-button, .work-project-chip) { background: var(--n-s2) !important; color: var(--n-text) !important; }
html.native-app .typing-form :is(#attach-file-button, #mic-input-button) .tools-icon { font-size: 24px !important; color: var(--n-text) !important; }
html.native-app .typing-form #attach-file-button .tools-icon { transition: transform .3s var(--n-ease) !important; }
html.native-app .typing-form #attach-file-button.open .tools-icon { transform: rotate(45deg) !important; }
html.native-app .typing-form :is(.nc-voice, #send-message-button) { background: var(--n-acc) !important; color: var(--n-acc-ink) !important; }
html.native-app .typing-form .nc-voice svg { width: 22px; height: 22px; fill: none; stroke: var(--n-acc-ink) !important; stroke-width: 2; stroke-linecap: round; }
html.native-app .typing-form .nc-voice svg * { stroke: var(--n-acc-ink) !important; fill: none !important; }
html.native-app .typing-form #send-message-button { font-size: 24px !important; }
html.native-app:not(.nc-has-text) .typing-form #send-message-button { display: none !important; }
html.native-app.nc-has-text .typing-form .nc-voice { display: none !important; }
html.native-app .typing-form .work-project-chip .wpc-label { display: none !important; }
html.native-app .typing-form .work-project-chip .material-symbols-rounded { font-size: 21px !important; }
html.native-app .typing-form .work-project-chip.is-set { background: var(--n-s2) !important; }

/* Model pill (Work) and Fast / Pro pill (Chat). */
html.native-app .typing-form .model-picker-trigger,
html.native-app .typing-form .chat-tier-trigger {
    height: 42px !important; min-height: 42px !important; max-height: 42px !important;
    padding: 0 14px 0 16px !important; border-radius: 999px !important;
    background: var(--n-s2) !important; border: 0 !important; box-shadow: none !important; color: var(--n-text) !important;
    font: 500 14.5px/1 var(--n-font) !important; gap: 6px !important; max-width: 46vw !important;
}
html.native-app .typing-form .model-picker-trigger .model-trigger-icon { display: none !important; }
html.native-app .typing-form .model-picker-trigger .model-name-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-app .typing-form :is(.model-picker-trigger, .chat-tier-trigger) .material-symbols-rounded { font-size: 18px !important; color: var(--n-muted) !important; }

/* ══ 3. Sheets ════════════════════════════════════════════════════════════
   One look for every menu, picker and popover: a bottom sheet on --n-sheet,
   28px top corners, a grab handle, 54px rows, a dim scrim, the iOS curve.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes n-sheet-up { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes n-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes n-pop-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Our own sheets (More, Account, Welcome) ──────────────────────────────── */
html.native-app .nsheet {
    position: fixed; inset: 0; z-index: 100060;
    display: flex; align-items: flex-end;
    background: transparent; transition: background .3s ease;
}
html.native-app .nsheet.is-in { background: var(--n-scrim); }
html.native-app .nsheet-card {
    width: 100%; max-height: 88vh; overflow-y: auto; box-sizing: border-box;
    background: var(--n-sheet); color: var(--n-text);
    border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0;
    padding: 6px 10px calc(14px + var(--n-bottom));
    box-shadow: var(--n-shadow);
    transform: translate3d(0, 100%, 0); transition: transform var(--n-dur) var(--n-ease);
}
html.native-app .nsheet.is-in .nsheet-card { transform: none; }
html.native-app .nsheet-grab { width: 36px; height: 4px; border-radius: 4px; background: var(--n-s3); margin: 6px auto 10px; }
html.native-app .nsheet-title { text-align: center; font: 600 16px var(--n-font); padding: 2px 0 10px; }
html.native-app .nsheet-list { display: flex; flex-direction: column; }
html.native-app .nsheet-row {
    display: flex; align-items: center; gap: 16px;
    min-height: 54px; padding: 6px 14px; border: 0; border-radius: var(--n-r-row);
    background: transparent; color: var(--n-text); text-align: left; cursor: pointer;
    transition: background-color .14s ease;
}
html.native-app .nsheet-row > .material-symbols-rounded { width: 24px; font-size: 22px; color: var(--n-muted); font-variation-settings: 'wght' 400; }
html.native-app .nsheet-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.native-app .nsheet-txt > span { font: 500 16px/1.25 var(--n-font); }
html.native-app .nsheet-txt small { font: 400 13px/1.3 var(--n-font); color: var(--n-muted); }
html.native-app .nsheet-trail { font: 500 14px var(--n-font); color: var(--n-muted); }
html.native-app .nsheet-row.n-pressed { background: var(--n-sheet-press); }
html.native-app .nsheet-row.is-danger,
html.native-app .nsheet-row.is-danger > .material-symbols-rounded { color: var(--n-danger); }
html.native-app .nsheet-sep { height: 1px; margin: 6px 14px; background: var(--n-sep); }
html.native-app .nacct { display: flex; align-items: center; gap: 14px; padding: 4px 14px 16px; }
html.native-app .nacct .n-avatar { width: 48px; height: 48px; font-size: 16px; }
html.native-app .nacct-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.native-app .nacct-who b { font: 600 16.5px/1.25 var(--n-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .nacct-who small { font: 400 13.5px/1.3 var(--n-font); color: var(--n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Scrims for the sheets that have no mask of their own ─────────────────── */
html.native-app.n-scrim-composer body::after {
    content: ''; position: fixed; inset: 0; z-index: 100049; background: var(--n-scrim); animation: n-fade-in .25s ease both;
}
html.native-app.n-scrim-menu body::after {
    content: ''; position: fixed; inset: 0; z-index: 100008; background: var(--n-scrim); animation: n-fade-in .25s ease both;
}
/* The composer's sheets live inside it: it rises above the scrim meanwhile. */
html.native-app.n-scrim-composer .typing-area { z-index: 100051 !important; }

/* ── The + sheet (identical in Chat and Work) ─────────────────────────────── */
html.native-app body:not(.n-z) #attach-file-button.tool-btn .attach-file-selections.plus-menu {
    position: fixed !important; inset: auto 0 0 0 !important;
    width: auto !important; max-width: none !important; max-height: 84vh !important;
    margin: 0 !important; padding: 6px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    opacity: 1 !important; visibility: hidden !important; pointer-events: none !important;
    transform: translate3d(0, 105%, 0) !important;
    transition: transform var(--n-dur) var(--n-ease), visibility 0s linear var(--n-dur) !important;
    overflow-y: auto !important; z-index: 100050 !important; cursor: default; text-align: left;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .attach-file-selections.plus-menu.show {
    visibility: visible !important; pointer-events: auto !important;
    transform: none !important; transition: transform var(--n-dur) var(--n-ease) !important;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .attach-file-selections.plus-menu::before {
    content: ''; display: block; flex: none; width: 36px; height: 4px; border-radius: 4px; background: var(--n-s3); margin: 6px auto 10px;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item.file-attach-menus {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important;
    align-content: center !important; align-items: center !important;
    column-gap: 14px !important; row-gap: 2px !important;
    min-height: 60px !important; padding: 8px 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-row) !important;
    background: transparent !important; box-shadow: none !important;
    animation: none !important; transform: none !important;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item.file-attach-menus[hidden] { display: none !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item.file-attach-menus.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item .pm-ico {
    grid-row: 1 / 3; grid-column: 1;
    width: 40px !important; height: 40px !important; border-radius: var(--n-r-tile) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--n-sheet-tile) !important; color: var(--n-text) !important;
    font-size: 21px !important; opacity: 1 !important; margin: 0 !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item p {
    grid-row: 1; grid-column: 2; align-self: end !important; margin: 0 !important; padding: 0 !important;
    font: 500 15.5px/1.25 var(--n-font) !important; color: var(--n-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item .pm-desc {
    display: block !important; grid-row: 2; grid-column: 2; align-self: start !important; margin: 0 !important;
    font: 400 13px/1.3 var(--n-font) !important; color: var(--n-muted) !important; opacity: 1 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item .pm-accessory { grid-row: 1 / 3; grid-column: 3; color: var(--n-faint) !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item :is(.pm-shortcut, .pm-check) { display: none !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-sep { display: block !important; flex: none; height: 1px !important; margin: 6px 14px !important; background: var(--n-sep) !important; border: 0 !important; }
/* An on/off row (Web search…): the tile takes the accent, nothing else does. */
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item:is(.active, .is-active, .selected, [aria-checked="true"], [aria-pressed="true"]) { background: transparent !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item:is(.active, .is-active, .selected, [aria-checked="true"], [aria-pressed="true"]) .pm-ico { background: var(--n-acc-soft) !important; color: var(--n-acc-text) !important; -webkit-text-fill-color: var(--n-acc-text) !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item:is(.active, .is-active, .selected, [aria-checked="true"], [aria-pressed="true"]) p::after {
    content: 'On'; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--n-acc-soft); color: var(--n-acc-text); font: 600 11.5px var(--n-font); vertical-align: 2px;
}
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .pm-ico-image { color: #e8a33d !important; -webkit-text-fill-color: #e8a33d !important; }
/* Chat mode has no playbooks/connectors; Work mode has no chat-only tools. */
html.native-app.app-chat body:not(.n-z) #attach-file-button.tool-btn .plus-menu :is(#menu-skills-btn, #menu-connectors-btn, .pm-sep-tools) { display: none !important; }
html.native-app.app-work body:not(.n-z) #attach-file-button.tool-btn .plus-menu .pm-chat-only { display: none !important; }
html.native-app.app-work body:not(.n-z) #attach-file-button.tool-btn .plus-menu :is(#menu-skills-btn, #menu-connectors-btn) { display: grid !important; }

/* ── Model picker (Work) + its Effort / More submenus ─────────────────────── */
html.native-app #model-picker-dialog.ms-compact,
html.native-app #model-selector.model-selector #model-picker-dialog.ms-compact {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100vw !important; max-width: none !important; max-height: 82vh !important;
    margin: 0 !important; padding: 6px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    overflow-y: auto !important;
}
html.native-app body.model-picker-visible #model-picker-dialog.ms-compact,
html.native-app #model-selector.model-picker-open #model-picker-dialog.ms-compact { animation: n-sheet-up var(--n-dur) var(--n-ease) both !important; }
html.native-app #model-picker-dialog.ms-compact::before {
    content: ''; display: block; width: 36px; height: 4px; border-radius: 4px; margin: 6px auto 10px; background: var(--n-s3);
}
html.native-app #model-picker-backdrop,
html.native-app #model-selector.model-selector #model-picker-backdrop {
    background: var(--n-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    animation: n-fade-in .25s ease both;
}
html.native-app #model-picker-dialog .model-options-content { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
html.native-app #model-picker-dialog :is(.suparva-option.ms-model, .ms-row) {
    min-height: 58px !important; padding: 8px 12px !important; margin: 0 !important; gap: 14px !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important; box-shadow: none !important;
    color: var(--n-text) !important;
}
html.native-app #model-picker-dialog .ms-row { min-height: 52px !important; }
html.native-app #model-picker-dialog :is(.suparva-option.ms-model, .ms-row).n-pressed { background: var(--n-sheet-press) !important; }
html.native-app #model-picker-dialog .suparva-option.ms-model.selected-model { background: transparent !important; }
html.native-app #model-picker-dialog :is(.ms-model-ico, .ms-row-ico) {
    width: 40px !important; height: 40px !important; flex: 0 0 40px; border-radius: var(--n-r-tile) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--n-sheet-tile) !important; color: var(--n-muted) !important; font-size: 20px !important;
}
html.native-app #model-picker-dialog .selected-model .ms-model-ico { background: var(--n-acc-soft) !important; color: var(--n-acc-text) !important; }
html.native-app #model-picker-dialog .ms-model-copy :is(b, strong, .ms-model-name, [class*="name"]) { font: 600 15.5px/1.25 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app #model-picker-dialog .ms-model-copy :is(small, .ms-model-desc, [class*="desc"]) { font: 400 13px/1.3 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app #model-picker-dialog .ms-model-right { color: var(--n-faint) !important; gap: 6px; }
html.native-app #model-picker-dialog .selected-model .ms-model-right :is(.ms-check, [class*="check"]) { color: var(--n-acc-text) !important; }
html.native-app #model-picker-dialog .ms-row-label { font: 500 15.5px var(--n-font) !important; color: var(--n-text) !important; }
html.native-app #model-picker-dialog :is(.ms-row-value, .ms-chev) { color: var(--n-muted) !important; }
html.native-app #model-picker-dialog .ms-sep { height: 1px !important; margin: 6px 14px !important; background: var(--n-sep) !important; border: 0 !important; }
html.native-app #model-picker-dialog [class*="badge"],
html.native-app #model-picker-dialog [class*="pro-tag"] { background: var(--n-acc-soft) !important; color: var(--n-acc-text) !important; border: 0 !important; }
html.native-app #ms-effort-menu,
html.native-app #ms-more-menu,
html.native-app #plus-skills-submenu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100vw !important; max-width: none !important; max-height: 74vh !important;
    margin: 0 !important; padding: 18px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    z-index: 100045 !important; overflow-y: auto !important;
    animation: n-sheet-up var(--n-dur) var(--n-ease) both;
}
html.native-app #plus-skills-submenu { z-index: 100055 !important; }
html.native-app :is(#ms-effort-menu, #ms-more-menu) :is(.ms-opt, .suparva-option, .ms-toggle-row) {
    min-height: 54px !important; padding: 8px 14px !important; margin: 0 !important; gap: 12px !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important; color: var(--n-text) !important;
    font: 500 15.5px var(--n-font) !important;
}
html.native-app :is(#ms-effort-menu, #ms-more-menu) :is(.ms-opt, .suparva-option).n-pressed { background: var(--n-sheet-press) !important; }
html.native-app :is(#ms-effort-menu, #ms-more-menu) .ms-selected .ms-check,
html.native-app :is(#ms-effort-menu, #ms-more-menu) .selected-model :is(.ms-check, [class*="check"]) { color: var(--n-acc-text) !important; }
html.native-app #ms-effort-menu .ms-submenu-note { padding: 0 14px 10px !important; font: 400 13px/1.45 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app #ms-effort-menu .ms-sep { height: 1px !important; margin: 6px 14px !important; background: var(--n-sep) !important; }
html.native-app #ms-effort-menu .ms-toggle-desc { color: var(--n-muted) !important; font-size: 13px !important; }
html.native-app #ms-effort-menu .ms-switch { background: var(--n-s3) !important; border: 0 !important; }
html.native-app #ms-effort-menu .ms-switch.on { background: var(--n-acc) !important; }

/* ── Fast / Pro (Chat) ────────────────────────────────────────────────────── */
html.native-app .chat-tier-menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 18px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    z-index: 100050 !important; animation: n-sheet-up var(--n-dur) var(--n-ease) both;
}
html.native-app .chat-tier-menu .chat-tier-opt {
    min-height: 64px !important; padding: 10px 14px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important; box-shadow: none !important; color: var(--n-text) !important;
}
html.native-app .chat-tier-menu .chat-tier-opt.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app .chat-tier-menu .chat-tier-opt b { font: 600 16px var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .chat-tier-menu .chat-tier-opt :is(small, span:not(.cto-check):not(.material-symbols-rounded)) { color: var(--n-muted) !important; }
html.native-app .chat-tier-menu .chat-tier-opt:is([aria-selected="true"], .is-selected) b,
html.native-app .chat-tier-menu .chat-tier-opt:is([aria-selected="true"], .is-selected) .cto-check { color: var(--n-acc-text) !important; }

/* ── Work sidebar menus (add project · project options) ───────────────────── */
html.native-app .wh-card.wh-menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; max-height: 80vh !important; min-width: 0 !important;
    margin: 0 !important; padding: 18px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    z-index: 100010 !important; overflow-y: auto !important;
    opacity: 1 !important; transform: translate3d(0, 100%, 0) !important;
    transition: transform var(--n-dur) var(--n-ease) !important;
}
html.native-app .wh-card.wh-menu.is-in { transform: none !important; }
html.native-app .wh-card.wh-menu .wh-card-h {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 0 14px 10px !important; margin: 0 !important; border: 0 !important;
}
html.native-app .wh-card.wh-menu .wh-card-h b { font: 600 17px var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .wh-card.wh-menu .wh-card-h .wh-fold svg { width: 30px; height: 24px; }
html.native-app .wh-card.wh-menu .wh-card-row {
    display: flex !important; align-items: center !important; gap: 10px !important;
    min-height: 30px !important; padding: 0 14px !important; color: var(--n-muted) !important; font: 400 14px var(--n-font) !important;
}
html.native-app .wh-card.wh-menu .wh-card-row .material-symbols-rounded { font-size: 18px !important; color: var(--n-faint) !important; }
html.native-app .wh-card.wh-menu .wh-card-sep { height: 1px !important; margin: 8px 14px !important; background: var(--n-sep) !important; border: 0 !important; }
html.native-app .wh-card.wh-menu .wh-card-act {
    display: flex !important; align-items: center !important; gap: 16px !important; width: 100% !important;
    min-height: 54px !important; padding: 6px 14px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important;
    color: var(--n-text) !important; font: 500 16px var(--n-font) !important; text-align: left !important; outline: 0 !important;
}
html.native-app .wh-card.wh-menu .wh-card-act[hidden] { display: none !important; }
html.native-app .wh-card.wh-menu .wh-card-act.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app .wh-card.wh-menu .wh-card-act > .material-symbols-rounded { width: 24px; font-size: 22px !important; color: var(--n-muted) !important; }
html.native-app .wh-card.wh-menu .wh-act-txt { display: flex !important; flex-direction: column !important; gap: 2px !important; }
html.native-app .wh-card.wh-menu .wh-act-txt span { font: 500 16px/1.25 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .wh-card.wh-menu .wh-act-txt small { font: 400 13px/1.3 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app .wh-card.wh-menu .wh-card-act.is-off { opacity: .55; }
html.native-app .wh-card.wh-menu::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--n-s3);
}

/* ── Chat options (rename / pin / delete) ─────────────────────────────────── */
html.native-app .chat-ctx-menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    margin: 0 !important; padding: 22px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    z-index: 100010 !important; visibility: visible !important;
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    opacity: 1 !important; transform: translate3d(0, 100%, 0) !important;
    transition: transform var(--n-dur) var(--n-ease) !important;
}
html.native-app .chat-ctx-menu.show { transform: none !important; }
html.native-app .chat-ctx-menu::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--n-s3);
}
html.native-app .chat-ctx-menu .chat-ctx-item {
    display: flex !important; align-items: center !important; gap: 16px !important;
    min-height: 54px !important; padding: 6px 14px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important;
    color: var(--n-text) !important; font: 500 16px var(--n-font) !important; text-align: left !important;
}
html.native-app .chat-ctx-menu .chat-ctx-item.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app .chat-ctx-menu .chat-ctx-item .icon { width: 24px; font-size: 22px !important; color: var(--n-muted) !important; }
html.native-app .chat-ctx-menu .chat-ctx-item.danger,
html.native-app .chat-ctx-menu .chat-ctx-item.danger .icon { color: var(--n-danger) !important; }

/* ── Work Drive menus (long-press, Sort, Upload, New …) ───────────────────── */
html.native-app #wd-root .wd-menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important; max-height: 78vh !important;
    margin: 0 !important; padding: 22px 10px calc(14px + var(--n-bottom)) !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; box-shadow: var(--n-shadow) !important;
    z-index: 100010 !important; overflow-y: auto !important;
    animation: n-sheet-up var(--n-dur) var(--n-ease) both !important;
}
html.native-app #wd-root .wd-menu .wd-menu { z-index: 100012 !important; }
html.native-app #wd-root .wd-menu::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--n-s3);
}
html.native-app #wd-root .wd-menu .wd-menu-item {
    display: flex !important; align-items: center !important; gap: 16px !important; width: 100% !important;
    min-height: 52px !important; padding: 6px 14px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important;
    color: var(--n-text) !important; font: 500 16px var(--n-font) !important; text-align: left !important;
}
html.native-app #wd-root .wd-menu .wd-menu-item.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app #wd-root .wd-menu .wd-menu-item:disabled { opacity: .4; }
html.native-app #wd-root .wd-menu .wd-menu-ico { width: 24px; font-size: 22px !important; color: var(--n-muted) !important; }
html.native-app #wd-root .wd-menu .wd-menu-item.is-checked .wd-menu-ico { color: var(--n-acc-text) !important; }
html.native-app #wd-root .wd-menu .wd-menu-label { flex: 1; min-width: 0; }
html.native-app #wd-root .wd-menu :is(.wd-menu-hint, .wd-menu-more) { color: var(--n-faint) !important; font-size: 13px !important; }
html.native-app #wd-root .wd-menu .wd-menu-item.is-danger,
html.native-app #wd-root .wd-menu .wd-menu-item.is-danger .wd-menu-ico { color: var(--n-danger) !important; }
html.native-app #wd-root .wd-menu .wd-menu-sep { height: 1px !important; margin: 6px 14px !important; background: var(--n-sep) !important; }
html.native-app #wd-root .wd-menu .wd-swatch { width: 22px; height: 22px; border-radius: 50%; }

/* ══ 4. Dialogs ═══════════════════════════════════════════════════════════
   Confirmations (DelphosConfirm) and small forms (new project, rename…):
   a sheet with a title, a line of text, fields, and full-width pills.
   ════════════════════════════════════════════════════════════════════════ */
html.native-app .dph-confirm,
html.native-app .wd-dlg-mask,
html.native-app .wd-picker-mask {
    position: fixed !important; inset: 0 !important;
    display: flex !important; align-items: flex-end !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--n-scrim) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    animation: n-fade-in .25s ease both;
}
html.native-app .wd-picker-mask[hidden] { display: none !important; }
html.native-app .dph-confirm { opacity: 1 !important; transition: opacity .2s ease !important; }
html.native-app .dph-confirm.is-closing { opacity: 0 !important; }
html.native-app .wd-dlg-mask { z-index: 100020 !important; }
html.native-app .wd-picker-mask { z-index: 100015 !important; }
html.native-app :is(.dph-confirm-card, .wd-dlg-mask > .wd-dlg, .wdc-mask > .wd-dlg, .wd-picker-mask > .wd-picker) {
    position: relative !important; inset: auto !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important; max-height: 90vh !important;
    margin: 0 !important; box-sizing: border-box !important; overflow-y: auto !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important;
    background: var(--n-sheet) !important; color: var(--n-text) !important; box-shadow: var(--n-shadow) !important;
    padding: 28px 20px calc(16px + var(--n-bottom)) !important;
    text-align: left !important; transform: none !important;
    animation: n-sheet-up var(--n-dur) var(--n-ease) both !important;
}
html.native-app :is(.dph-confirm-card, .wd-dlg-mask > .wd-dlg, .wdc-mask > .wd-dlg, .wd-picker-mask > .wd-picker)::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--n-s3);
}
html.native-app :is(.dph-confirm-ic, .wd-dlg-ico) {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; margin: 0 0 14px !important; border-radius: 14px !important;
    background: var(--n-sheet-tile) !important; color: var(--n-text) !important; border: 0 !important; font-size: 22px !important;
}
html.native-app .wd-dlg-ico .material-symbols-rounded { font-size: 22px !important; color: var(--n-text) !important; }
html.native-app :is(.dph-confirm-title, .wd-dlg > h3, .wd-picker header h3) {
    margin: 0 0 6px !important; padding: 0 !important;
    font: 600 19px/1.3 var(--n-font) !important; letter-spacing: -0.01em; color: var(--n-text) !important; text-align: left !important;
}
html.native-app :is(.dph-confirm-msg, .wd-dlg-msg, .wd-picker header p) {
    margin: 0 0 18px !important; font: 400 14.5px/1.5 var(--n-font) !important; color: var(--n-muted) !important; text-align: left !important;
}
html.native-app .wd-dlg .wd-steps { margin: 0 0 18px !important; padding-left: 20px !important; color: var(--n-text) !important; font: 400 14.5px/1.6 var(--n-font) !important; }
html.native-app .wd-dlg .wd-field { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 0 14px !important; }
html.native-app .wd-dlg .wd-field > span { font: 500 13px var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app .wd-dlg .wd-field :is(input, textarea) {
    width: 100% !important; min-height: 50px !important; box-sizing: border-box !important;
    padding: 12px 14px !important; border: 0 !important; border-radius: 14px !important; outline: 0 !important;
    background: var(--n-sheet-tile) !important; color: var(--n-text) !important; box-shadow: none !important;
    font: 400 16px var(--n-font) !important;
}
html.native-app .wd-dlg .wd-field :is(input, textarea):focus { box-shadow: 0 0 0 2px var(--n-acc) !important; }
html.native-app .wd-dlg .wd-dlg-err { margin: -4px 0 12px !important; color: var(--n-danger) !important; font: 500 13.5px var(--n-font) !important; }
html.native-app :is(.dph-confirm-actions, .wd-dlg-acts) {
    display: flex !important; flex-wrap: wrap; gap: 10px !important; margin: 6px 0 0 !important; padding: 0 !important;
    justify-content: stretch !important; border: 0 !important; background: transparent !important;
}
html.native-app :is(.dph-confirm-btn, .wd-dlg-acts .wd-btn) {
    flex: 1 1 0 !important; min-width: 0 !important; height: 50px !important; padding: 0 16px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important; outline: 0 !important;
    background: var(--n-s2) !important; color: var(--n-text) !important;
    font: 600 15.5px/1 var(--n-font) !important;
}
html.native-app body.light_mode :is(.dph-confirm-btn, .wd-dlg-acts .wd-btn) { background: var(--n-sheet-tile) !important; }
html.native-app :is(.dph-confirm-btn.is-primary, .wd-dlg-acts .wd-btn.is-primary) { background: var(--n-acc) !important; color: var(--n-acc-ink) !important; }
html.native-app :is(.dph-confirm-btn.is-danger, .wd-dlg-acts .wd-btn.is-danger) { background: var(--n-danger-bg) !important; color: #fff !important; }
html.native-app :is(.dph-confirm-btn, .wd-dlg-acts .wd-btn).n-pressed { transform: scale(.97); }

/* ── Project picker (Work) ────────────────────────────────────────────────── */
html.native-app .wd-picker-mask > .wd-picker { display: flex !important; flex-direction: column !important; padding: 26px 0 0 !important; max-height: 86vh !important; height: auto !important; }
html.native-app .wd-picker header { padding: 0 20px !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
html.native-app .wd-picker header p { margin-bottom: 14px !important; }
html.native-app .wd-picker .wd-search.is-block {
    display: flex !important; align-items: center !important; gap: 10px !important;
    height: 46px !important; margin: 0 16px 8px !important; padding: 0 16px !important;
    border: 0 !important; border-radius: 999px !important; background: var(--n-sheet-tile) !important; box-shadow: none !important;
}
html.native-app .wd-picker .wd-search.is-block input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--n-text) !important; font: 400 15.5px var(--n-font) !important; box-shadow: none !important; }
html.native-app .wd-picker .wd-search.is-block .material-symbols-rounded { color: var(--n-muted) !important; font-size: 21px !important; }
html.native-app .wd-picker .wd-pick-list { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; padding: 0 10px 8px !important; border: 0 !important; background: transparent !important; }
html.native-app .wd-picker .wd-pick-head {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 14px 12px 6px !important; margin: 0 !important; border: 0 !important;
    font: 600 13px var(--n-font) !important; color: var(--n-muted) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html.native-app .wd-picker .wd-pick-head .material-symbols-rounded { font-size: 17px !important; }
html.native-app .wd-picker .wd-pick-head small { margin-left: auto; font: 500 12.5px var(--n-font) !important; color: var(--n-faint) !important; }
html.native-app .wd-picker .wd-pick-row {
    display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important;
    min-height: 60px !important; padding: 8px 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-row) !important; background: transparent !important; box-shadow: none !important;
    color: var(--n-text) !important; text-align: left !important;
}
html.native-app .wd-picker .wd-pick-row.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app .wd-picker .wd-pick-row.is-on { background: var(--n-acc-soft) !important; }
html.native-app .wd-picker .wd-pick-row:disabled { opacity: .5; }
html.native-app .wd-picker .wd-pick-ico { width: 40px !important; height: 40px !important; flex: 0 0 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--n-r-tile) !important; background: var(--n-sheet-tile) !important; }
html.native-app .wd-picker .wd-pick-ico svg { width: 26px; height: 21px; }
html.native-app .wd-picker .wd-pick-txt { flex: 1; min-width: 0; display: flex !important; flex-direction: column !important; gap: 2px !important; }
html.native-app .wd-picker .wd-pick-txt b { font: 500 16px/1.25 var(--n-font) !important; color: var(--n-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .wd-picker .wd-pick-txt small { font: 400 13px/1.3 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app .wd-picker .wd-pick-check { color: var(--n-acc-text) !important; }
html.native-app .wd-picker .wd-pick-empty { padding: 6px 12px 10px !important; font: 400 14px var(--n-font) !important; color: var(--n-faint) !important; }
html.native-app .wd-picker footer {
    display: flex !important; gap: 10px !important; align-items: center !important;
    padding: 12px 16px calc(14px + var(--n-bottom)) !important; margin: 0 !important;
    border: 0 !important; background: var(--n-sheet) !important;
}
html.native-app .wd-picker footer > span:empty,
html.native-app .wd-picker footer .wd-grow,
html.native-app .wd-picker-mask .wd-picker footer .wd-btn[data-p="cancel"] { display: none !important; }
html.native-app .wd-picker footer .wd-btn {
    flex: 1 1 0 !important; height: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    background: var(--n-sheet-tile) !important; color: var(--n-text) !important; font: 600 15.5px/1 var(--n-font) !important;
}
html.native-app .wd-picker footer .wd-btn[data-p="new"] { background: var(--n-acc) !important; color: var(--n-acc-ink) !important; }
html.native-app .wd-picker footer .wd-btn .material-symbols-rounded { font-size: 20px !important; color: inherit !important; }
html.native-app .wd-presence { width: 8px; height: 8px; border-radius: 50%; background: var(--n-faint); }
html.native-app .wd-presence.is-on { background: var(--n-ok); }

/* ══ 5. Drawer ════════════════════════════════════════════════════════════
   Full screen. Every row — the links, Work Drive, the character — is the same
   row: a 36px tile, a 16px label, 52px tall. Then the chats / projects list,
   the avatar (account sheet) and the New chat pill.
   ════════════════════════════════════════════════════════════════════════ */
html.native-app .nav-menu {
    width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important;
    top: 0 !important; height: 100% !important;
    padding: var(--n-top) 0 0 !important;
    background: var(--n-bg) !important; border: 0 !important; box-shadow: none !important;
    z-index: 1002 !important;
    transition: transform var(--n-dur) var(--n-ease), opacity .25s ease !important;
}
html.native-app .nav-overlay-swipe,
html.native-app #account-actions-menu { display: none !important; }
html.native-app .nd-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; }
html.native-app .nd-head .n-mark { width: 28px; height: 28px; animation: none; }
html.native-app .nd-brand { font: 700 24px/1 var(--n-font); letter-spacing: -0.02em; color: var(--n-text); }

html.native-app .nav-menu .top-menu-actions {
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    padding: 2px 10px 4px !important; margin: 0 !important; border: 0 !important; background: transparent !important;
}
html.native-app .nav-menu .top-menu-actions > div { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.native-app .nd-links { display: flex; flex-direction: column; }
html.native-app .nav-menu :is(.nd-link, .custom-select .select-selected) {
    display: flex !important; align-items: center !important; gap: 14px !important;
    width: 100% !important; min-height: 52px !important; height: auto !important;
    padding: 0 10px !important; margin: 0 !important; box-sizing: border-box !important;
    border: 0 !important; border-radius: 16px !important; background: transparent !important; box-shadow: none !important;
    color: var(--n-text) !important; font: 500 16px/1.2 var(--n-font) !important; text-align: left; cursor: pointer;
    transform: none !important;
    transition: background-color .14s ease !important;
}
html.native-app .nav-menu :is(.nd-link, .custom-select .select-selected).n-pressed { background: var(--n-s1) !important; }
/* Chat mode collapses Work-only rows with max-height:0, which a row min-height defeats. */
html.native-app.app-chat .nav-menu .nd-link.work-only { display: none !important; }
html.native-app .nav-menu .nd-link .n-tile { background: var(--n-s1); }
html.native-app .nav-menu .nd-label,
html.native-app .nav-menu .custom-select .select-selected .button-text { flex: 1; min-width: 0; font: 500 16px/1.2 var(--n-font) !important; color: var(--n-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The character row: its avatar sits in the same 36px tile. */
html.native-app .nav-menu .custom-select { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html.native-app .nav-menu .custom-select :is(.select-selected, .select-item) img {
    width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px !important;
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
    border-radius: var(--n-r-tile) !important; border: 0 !important; box-shadow: none !important;
    object-fit: cover !important; background: var(--n-s1) !important;
}
html.native-app .nav-menu .custom-select :is(.select-selected, .select-item)[data-value="delphos"] img { padding: 7px !important; object-fit: contain !important; }
html.native-app .nav-menu .custom-select .select-selected::after {
    content: 'expand_more' !important; font-family: 'Material Symbols Rounded' !important; font-size: 22px !important;
    position: static !important; inset: auto !important; margin: 0 2px 0 auto !important;
    width: auto !important; height: auto !important; border: 0 !important; transform: none !important;
    color: var(--n-faint) !important; transition: transform .25s var(--n-ease) !important; line-height: 1;
}
html.native-app .nav-menu .custom-select.active .select-selected::after { transform: rotate(180deg) !important; }
html.native-app .nav-menu .custom-select.active .select-selected { background: transparent !important; }
html.native-app .nav-menu .custom-select .select-items,
html.native-app body .nav-menu #characters-selection.select-items {
    margin: 0 !important; padding: 0 0 4px !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
    position: static !important; inset: auto !important; width: auto !important;
}
html.native-app .nav-menu .custom-select .select-item {
    display: flex !important; align-items: center !important; gap: 14px !important;
    min-height: 48px !important; padding: 0 12px 0 10px !important; margin: 0 0 0 26px !important;
    border: 0 !important; border-radius: 14px !important; background: transparent !important; transform: none !important;
    color: var(--n-text) !important; font: 500 15.5px var(--n-font) !important;
}
html.native-app .nav-menu .custom-select .select-item img { width: 30px !important; height: 30px !important; min-width: 30px !important; flex-basis: 30px !important; border-radius: 10px !important; }
html.native-app .nav-menu .custom-select .select-item[data-value="delphos"] img { padding: 6px !important; }
html.native-app .nav-menu .custom-select .select-item.n-pressed { background: var(--n-s1) !important; }
html.native-app .nav-menu .custom-select .select-item.is-selected { background: transparent !important; }
html.native-app .nav-menu .custom-select .select-item.is-selected::after {
    content: 'check' !important; font-family: 'Material Symbols Rounded' !important; font-size: 20px !important;
    margin-left: auto !important; color: var(--n-acc-text) !important; position: static !important; border: 0 !important;
}

/* ── The list (Chat: recents · Work: projects with their chats) ───────────── */
html.native-app .nav-menu .chats-history {
    flex: 1 1 auto !important; height: auto !important; min-height: 0 !important;
    margin: 4px 0 0 !important; padding: 4px 10px calc(104px + var(--n-bottom)) !important;
    border: 0 !important; background: transparent !important;
}
html.native-app .nav-menu .chats-history .chat-histories { padding: 0 !important; margin: 0 !important; }
html.native-app .nav-menu .wa-recent-label {
    display: block !important; padding: 14px 12px 6px !important; margin: 0 !important;
    font: 600 13px/1.2 var(--n-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--n-muted) !important;
}
html.native-app .nav-menu .chats-history.is-work-view .wa-recent-label { display: none !important; }
html.native-app .nav-menu .history-user {
    position: relative; display: flex !important; align-items: center !important; gap: 4px !important;
    min-height: 48px !important; padding: 0 2px 0 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: 14px !important; background: transparent !important; box-shadow: none !important;
}
html.native-app .nav-menu .history-user::before,
html.native-app .nav-menu .history-user > .icon { display: none !important; }
html.native-app .nav-menu .history-user .history-title { flex: 1; min-width: 0; font: 400 15.5px/1.3 var(--n-font) !important; color: var(--n-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .nav-menu .history-user:is(.active, .selected, .long-press-active),
html.native-app .nav-menu .history-user.n-pressed { background: var(--n-s1) !important; }
html.native-app .nav-menu .history-user .chat-more-btn {
    width: 40px !important; height: 40px !important; flex: 0 0 40px; display: inline-flex !important; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--n-faint) !important;
    opacity: 1 !important; visibility: visible !important; padding: 0 !important; margin: 0 !important;
}
html.native-app .nav-menu .history-user .chat-more-btn .icon { font-size: 20px !important; color: inherit !important; }
html.native-app .nav-menu .history-user.pinned .history-title::before {
    content: 'push_pin'; font-family: 'Material Symbols Rounded'; font-size: 15px; margin-right: 6px; color: var(--n-faint); vertical-align: -2px;
}
/* Work view: sections, project rows, their chats. */
html.native-app .nav-menu .wh-sec { margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; }
html.native-app .nav-menu .wh-head {
    display: flex !important; align-items: center !important; min-height: 40px !important;
    padding: 8px 2px 2px 12px !important; margin: 0 !important; border: 0 !important;
}
html.native-app .nav-menu .wh-head-t { flex: 1; font: 600 13px/1.2 var(--n-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--n-muted) !important; }
html.native-app .nav-menu .wh-icon-btn {
    width: 40px !important; height: 40px !important; flex: 0 0 40px; display: inline-flex !important; align-items: center; justify-content: center;
    padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 12px !important;
    background: transparent !important; color: var(--n-faint) !important; opacity: 1 !important; box-shadow: none !important;
}
html.native-app .nav-menu .wh-icon-btn .material-symbols-rounded { font-size: 20px !important; }
html.native-app .nav-menu .wh-icon-btn.n-pressed { background: var(--n-s1) !important; }
html.native-app .nav-menu .wh-proj { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html.native-app .nav-menu .wh-proj-row {
    display: flex !important; align-items: center !important; gap: 8px !important;
    min-height: 48px !important; padding: 0 2px 0 4px !important; margin: 0 !important;
    border: 0 !important; border-radius: 14px !important; background: transparent !important; box-shadow: none !important;
}
html.native-app .nav-menu .wh-proj-row.n-pressed,
html.native-app .nav-menu .wh-proj.is-current > .wh-proj-row,
html.native-app .nav-menu .wh-proj.is-menu-open > .wh-proj-row { background: var(--n-s1) !important; }
html.native-app .nav-menu .wh-chev { width: 26px !important; height: 26px !important; flex: 0 0 26px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--n-faint) !important; }
html.native-app .nav-menu .wh-chev .material-symbols-rounded { font-size: 20px !important; transition: transform .25s var(--n-ease) !important; }
html.native-app .nav-menu .wh-proj.is-open .wh-chev .material-symbols-rounded { transform: rotate(90deg); }
html.native-app .nav-menu .wh-fold { width: 26px !important; height: 22px !important; flex: 0 0 26px; display: inline-flex !important; align-items: center; justify-content: center; }
html.native-app .nav-menu .wh-fold svg { width: 24px !important; height: 20px !important; }
html.native-app .nav-menu .wh-title { flex: 1; min-width: 0; margin-left: 4px; font: 500 15.5px/1.3 var(--n-font) !important; color: var(--n-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .nav-menu .wh-proj.is-offline .wh-title { color: var(--n-muted) !important; }
html.native-app .nav-menu .wh-acts { display: inline-flex !important; gap: 0 !important; opacity: 1 !important; }
html.native-app .nav-menu .wh-acts .wh-icon-btn { opacity: 1 !important; }
html.native-app .nav-menu .wh-kids { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.native-app .nav-menu .wh-kids .history-user { padding-left: 50px !important; min-height: 44px !important; }
html.native-app .nav-menu .wh-kids .history-user .history-title { font-size: 15px !important; color: color-mix(in srgb, var(--n-text) 88%, var(--n-bg)) !important; }
html.native-app .nav-menu :is(.wh-none, .wh-more, .wh-empty-proj) {
    margin: 0 !important; padding: 4px 12px 10px !important; border: 0 !important; background: transparent !important;
    font: 400 14px/1.4 var(--n-font) !important; color: var(--n-faint) !important;
}
html.native-app .nav-menu .wh-kids :is(.wh-more, .wh-none) { padding-left: 50px !important; }

/* ── Bottom: avatar + New chat ────────────────────────────────────────────── */
html.native-app .nav-menu::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(110px + var(--n-bottom));
    background: linear-gradient(to bottom, color-mix(in srgb, var(--n-bg) 0%, transparent), var(--n-bg) 45%);
    pointer-events: none; z-index: 2;
}
html.native-app .nav-menu .side_account {
    position: absolute !important; left: 18px !important; bottom: calc(18px + var(--n-bottom)) !important;
    width: 52px !important; height: 52px !important; min-height: 0 !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; translate: none !important;
    display: flex !important; justify-content: center !important; align-items: center !important; z-index: 3;
}
html.native-app .nav-menu .side_account > img,
html.native-app .nav-menu .side_account > p { display: none !important; }
html.native-app .nav-menu .nd-avatar { width: 52px; height: 52px; font-size: 16px; }
html.native-app .nav-menu .nd-newchat {
    position: absolute; right: 18px; bottom: calc(18px + var(--n-bottom)); z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
    background: var(--n-acc) !important; color: var(--n-acc-ink) !important;
    font: 600 15.5px/1 var(--n-font) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--n-acc) 32%, transparent) !important;
    transition: transform .16s var(--n-ease) !important;
}
html.native-app .nav-menu .nd-newchat * { color: var(--n-acc-ink) !important; }
html.native-app .nav-menu .nd-newchat svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
html.native-app .nav-menu .nd-newchat.n-pressed { transform: scale(.96); }
html.native-app .nav-menu:not(.open) .nd-newchat { visibility: hidden; }

/* ══ 6. Pages ═════════════════════════════════════════════════════════════
   Full-screen windows share one header (← · centred title · action) and one
   body: grouped cards on the page colour, Android-style segmented rows.
   ════════════════════════════════════════════════════════════════════════ */
html.native-app .npage {
    position: fixed; inset: 0; z-index: 1005;
    display: flex; flex-direction: column;
    padding-top: var(--n-top); background: var(--n-bg); color: var(--n-text);
    transform: translate3d(100%, 0, 0); transition: transform var(--n-dur) var(--n-ease);
}
html.native-app .npage.is-in { transform: none; }
html.native-app .npage-bar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: var(--n-bar); padding: 0 6px; flex: none; }
html.native-app .npage-bar h2 { margin: 0; text-align: center; font: 600 18px/1 var(--n-font); letter-spacing: -0.01em; }
html.native-app .npage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 calc(24px + var(--n-bottom)); }

/* ── Settings · Tools (#consentModal) ─────────────────────────────────────── */
html.native-app #consentModal.data-window {
    inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important;
    border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
    background: var(--n-bg) !important; padding-top: var(--n-top) !important; transform: none;
}
html.native-app #consentModal .head {
    height: var(--n-bar) !important; padding: 0 6px !important; border: 0 !important; background: var(--n-bg) !important;
    display: grid !important; grid-template-columns: 48px 1fr 48px !important; align-items: center !important;
}
html.native-app #consentModal .head .window-data-title { grid-column: 2; text-align: center; font: 600 18px/1 var(--n-font) !important; letter-spacing: -0.01em; color: var(--n-text) !important; }
html.native-app #consentModal .head .icon-close {
    grid-column: 1; grid-row: 1; width: 44px !important; height: 44px !important; border-radius: 14px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; background: transparent !important; color: var(--n-text) !important; border: 0 !important;
}
html.native-app #consentModal .head .icon-close::before { content: 'arrow_back'; font-family: 'Material Symbols Rounded'; font-size: 24px; }
html.native-app #consentModal .head .icon-close.n-pressed { background: var(--n-s1) !important; }
html.native-app #consentModal:has(.stg-shell.panel-open) > .head { display: none !important; }
html.native-app #consentModal .window-foot,
html.native-app #consentModal .modal-actions { display: none !important; }
/* Back closes; Save stays only on General (name, theme and language save
   through it — every other panel applies its changes as they are made). */
html.native-app #consentModal .data-window-actions button:not(.btn-accept):not(:last-child) { display: none !important; }
html.native-app #consentModal:has(.stg-shell):not(:has(.stg-shell.panel-open .stg-panel.active[data-panel="general"])) .data-window-actions { display: none !important; }
html.native-app #consentModal .data-window-actions {
    border: 0 !important; background: var(--n-bg) !important; box-shadow: none !important;
    padding: 10px 16px calc(12px + var(--n-bottom)) !important; justify-content: stretch !important;
}
html.native-app #consentModal .data-window-actions button {
    flex: 1 !important; height: 50px !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
    background: var(--n-acc) !important; color: var(--n-acc-ink) !important; font: 600 15.5px/1 var(--n-font) !important;
}

/* The list */
html.native-app .stg-shell { background: var(--n-bg) !important; border: 0 !important; }
html.native-app .stg-shell .stg-sidebar { padding: 4px 16px calc(28px + var(--n-bottom)) !important; background: transparent !important; border: 0 !important; }
html.native-app .stg-shell .stg-search { display: none !important; }
html.native-app .stg-shell .stg-group-label,
html.native-app .stg-shell .nset-gap { font-size: 0 !important; height: 16px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
html.native-app .stg-shell .stg-nav-item {
    display: flex !important; align-items: center !important; gap: 16px !important;
    min-height: 58px !important; padding: 0 18px !important; margin: 0 0 2px !important;
    background: var(--n-s1) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important;
    color: var(--n-text) !important; font: 500 16px/1.2 var(--n-font) !important;
    transition: background-color .14s ease !important;
}
html.native-app .stg-shell .stg-nav-item .material-symbols-rounded { font-size: 22px !important; color: var(--n-muted) !important; opacity: 1; font-variation-settings: 'wght' 400; }
html.native-app .stg-shell .stg-nav-item.active { background: var(--n-s1) !important; color: var(--n-text) !important; }
html.native-app .stg-shell .stg-nav-item.n-pressed { background: var(--n-s2) !important; }
html.native-app .stg-shell .stg-nav-item::after { color: var(--n-faint) !important; }
html.native-app .stg-shell :is(.stg-group-label, .nset-gap, .nset-account, .nset-upsell) + .stg-nav-item,
html.native-app .stg-shell .stg-sidebar > .stg-nav-item:first-child { border-top-left-radius: var(--n-r-card) !important; border-top-right-radius: var(--n-r-card) !important; }
html.native-app .stg-shell .stg-nav-item:has(+ :is(.stg-group-label, .nset-gap, .nset-toggle, .nset-logout, .nset-version)),
html.native-app .stg-shell .stg-nav-item:last-child { border-bottom-left-radius: var(--n-r-card) !important; border-bottom-right-radius: var(--n-r-card) !important; margin-bottom: 0 !important; }
html.native-app .stg-shell :is(.nset-toggle, .nset-logout) { margin-top: 16px !important; border-radius: var(--n-r-card) !important; }
html.native-app .stg-shell .nset-logout,
html.native-app .stg-shell .nset-logout .material-symbols-rounded { color: var(--n-danger) !important; }
html.native-app .nset-account {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 0 0 16px;
    background: var(--n-s1); border: 0; border-radius: var(--n-r-card);
}
html.native-app .nset-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.native-app .nset-who b { font: 600 16px/1.25 var(--n-font); color: var(--n-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .nset-who span { font: 400 13px/1.3 var(--n-font); color: var(--n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .nset-upsell {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 18px; margin: 0 0 16px; border: 0; border-radius: var(--n-r-card);
    background: linear-gradient(140deg, var(--n-acc-soft), transparent 70%), var(--n-s1);
}
html.native-app .nset-upsell b { font: 600 17px var(--n-font); color: var(--n-text); }
html.native-app .nset-upsell span { font: 400 14.5px/1.45 var(--n-font); color: var(--n-muted); }
html.native-app .nset-upsell .n-btn { margin-top: 8px; }
html.native-app .nset-version { text-align: center; font: 400 12.5px var(--n-font); color: var(--n-faint); padding: 20px 0 4px; }

/* A panel */
html.native-app .stg-shell .stg-main { background: var(--n-bg) !important; border: 0 !important; transition: transform var(--n-dur) var(--n-ease) !important; }
html.native-app .stg-shell .stg-panel { padding: 0 16px calc(28px + var(--n-bottom)) !important; background: transparent !important; }
html.native-app .stg-shell .stg-panel-head {
    position: sticky; top: 0; z-index: 3;
    display: grid !important; grid-template-columns: 48px 1fr 48px; align-items: center;
    min-height: var(--n-bar) !important; margin: 0 -16px 4px !important; padding: 0 6px !important;
    background: var(--n-bg) !important; border: 0 !important; box-shadow: none !important;
}
html.native-app .stg-shell .stg-panel-back {
    width: 44px; height: 44px; border-radius: 14px; font-size: 24px !important; color: var(--n-text) !important;
    display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important;
}
html.native-app .stg-shell .stg-panel-back.n-pressed { background: var(--n-s1) !important; }
html.native-app .stg-shell .stg-panel-title { text-align: center; font: 600 18px/1.2 var(--n-font) !important; letter-spacing: -0.01em; color: var(--n-text) !important; }
html.native-app .stg-shell .stg-panel-head .tw-count { display: none !important; }
html.native-app .stg-shell :is(.stg-panel-desc, .stg-panel > p, .tw-intro, .stg-intro) { font: 400 14px/1.5 var(--n-font) !important; color: var(--n-muted) !important; margin: 0 4px 14px !important; }
html.native-app .stg-shell .stg-section-label {
    padding: 20px 4px 8px !important; margin: 0 !important;
    font: 600 13px/1.2 var(--n-font) !important; color: var(--n-muted) !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important;
}
html.native-app .stg-shell .stg-row {
    display: flex !important; align-items: center !important; gap: 14px !important;
    margin: 0 0 2px !important; padding: 15px 18px !important;
    background: var(--n-s1) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important;
}
html.native-app .stg-shell :is(.stg-section-label, .stg-panel-head, .stg-panel > p, .stg-panel-desc) + .stg-row,
html.native-app .stg-shell .stg-row:first-child { border-top-left-radius: var(--n-r-card) !important; border-top-right-radius: var(--n-r-card) !important; }
html.native-app .stg-shell .stg-row:has(+ :not(.stg-row)),
html.native-app .stg-shell .stg-row:last-child { border-bottom-left-radius: var(--n-r-card) !important; border-bottom-right-radius: var(--n-r-card) !important; margin-bottom: 0 !important; }
html.native-app .stg-shell .stg-row-text { flex: 1; min-width: 0; }
html.native-app .stg-shell .stg-row-text h4 { margin: 0 0 3px !important; font: 600 15.5px/1.3 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .stg-shell .stg-row-text p { margin: 0 !important; font: 400 13.5px/1.45 var(--n-font) !important; color: var(--n-muted) !important; }
/* Rows whose control is a field, a picker or swatches stack it underneath. */
html.native-app .stg-shell .stg-row:has(.stg-palette, .stg-row-control input:not([type="checkbox"]):not([type="radio"]), .stg-row-control textarea, .stg-row-control .suparva-select-wrapper, .stg-row-control select),
html.native-app .stg-shell .stg-row.stg-row-stack { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
html.native-app .stg-shell .stg-row-control { flex-shrink: 0; }
html.native-app .stg-shell .stg-row:has(.stg-palette) .stg-row-control,
html.native-app .stg-shell .stg-row.stg-row-stack .stg-row-control { width: 100%; }

/* Fields, selects, swatches, switches — one style in every window */
html.native-app :where(#consentModal, .library-window, .artifacts-browser, .npage, .pbk-quick-overlay) :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], input:not([type]), textarea, select, .suparva-input, .stg-cap-select):not(.typing-input) {
    min-height: 48px; box-sizing: border-box;
    border: 0 !important; border-radius: 14px !important; outline: 0;
    background: var(--n-s2) !important; color: var(--n-text) !important; box-shadow: none !important;
    font: 400 16px var(--n-font) !important;
}
html.native-app :where(#consentModal, .library-window, .artifacts-browser, .npage, .pbk-quick-overlay) :is(input, textarea, select):not(.typing-input):focus { box-shadow: 0 0 0 2px var(--n-acc) !important; }
/* A field inside a search pill is the pill's text, not a second box. */
html.native-app :is(.n-search, .mcp-search, .dir-search, .pbk-search, .tw-search, .ab-search, .wd-search, .stg-search) input:is([type], :not([type])):not(.typing-input):not(.n-x),
html.native-app :is(.n-search, .mcp-search, .dir-search, .pbk-search, .tw-search, .ab-search, .wd-search, .stg-search) input:is([type], :not([type])):not(.typing-input):not(.n-x):focus {
    min-height: 0 !important; height: 100% !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important;
}
html.native-app :is(#consentModal, .pbk-quick-overlay) :is(input, textarea)::placeholder { color: var(--n-faint) !important; }
html.native-app .stg-shell .stg-row input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; max-width: none !important; padding: 0 14px !important; }
html.native-app .stg-shell .stg-row textarea { width: 100% !important; min-height: 110px; padding: 12px 14px !important; }
html.native-app #consentModal .suparva-select {
    min-height: 48px !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
    background: var(--n-s2) !important; color: var(--n-text) !important; font: 500 15.5px var(--n-font) !important;
}
html.native-app #consentModal .suparva-select .suparva-select-options,
html.native-app #consentModal .suparva-select-options:not(#model-picker-dialog) {
    border: 0 !important; border-radius: 16px !important; background: var(--n-sheet) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35) !important; padding: 6px !important;
}
html.native-app #consentModal .suparva-option:not(.ms-model) { min-height: 46px !important; border-radius: 12px !important; border: 0 !important; color: var(--n-text) !important; background: transparent !important; }
html.native-app #consentModal .suparva-option:not(.ms-model):is(.selected, .active, [aria-selected="true"]) { background: var(--n-acc-soft) !important; color: var(--n-acc-text) !important; }
html.native-app .stg-shell .stg-palette {
    display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; justify-items: center !important;
    gap: 12px 0 !important; padding: 4px 0 !important; margin: 0 !important; width: 100% !important;
}
html.native-app .stg-shell .stg-palette .stg-swatch { margin: 0 !important; }
html.native-app .stg-shell .stg-swatch {
    width: 35px !important; height: 35px !important; border-radius: 50% !important;
    border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
    transition: transform .16s var(--n-ease), box-shadow .2s ease !important;
}
html.native-app .stg-shell .stg-swatch.active { box-shadow: 0 0 0 3px var(--n-s1), 0 0 0 5px var(--n-text) !important; outline: 0 !important; }
html.native-app .stg-shell .stg-swatch.active::after { color: #fff !important; }
html.native-app .stg-shell .stg-swatch.n-pressed { transform: scale(.92); }
html.native-app .toggle-container .toggle-input + .toggle-label,
html.native-app .toggle-container .toggle-label {
    width: 52px !important; height: 32px !important;
    border: 0 !important; background: var(--n-s3) !important; box-shadow: none !important;
}
html.native-app .toggle-container .toggle-input:checked + .toggle-label { background: var(--n-acc) !important; border: 0 !important; }
html.native-app .toggle-container .toggle-label .toggle-handle { width: 24px !important; height: 24px !important; left: 4px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important; }
html.native-app .toggle-container .toggle-input:checked + .toggle-label .toggle-handle { left: calc(100% - 28px) !important; }

/* Tools sub-panels (tools-handler / playbooks / connectors / browser) */
html.native-app .stg-shell :is(.tw-modebar, .tw-card, .tools-coming-soon, .browser-profile-card, .browser-profile-empty, .dir-conn, .mcp-card, .pbk-list, .dir-pop-row, .stg-card) {
    border: 0 !important; box-shadow: none !important; background: var(--n-s1) !important; border-radius: var(--n-r-card) !important;
}
html.native-app .stg-shell .pbk-list { background: transparent !important; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
html.native-app .stg-shell .pbk-list > .pbk-row { background: var(--n-s1) !important; border: 0 !important; border-radius: 6px !important; }
html.native-app .stg-shell .pbk-list > .pbk-row:first-child { border-top-left-radius: var(--n-r-card) !important; border-top-right-radius: var(--n-r-card) !important; }
html.native-app .stg-shell .pbk-list > .pbk-row:last-child { border-bottom-left-radius: var(--n-r-card) !important; border-bottom-right-radius: var(--n-r-card) !important; }
html.native-app .stg-shell .dir-pop-row { background: transparent !important; }
html.native-app .stg-shell :is(.tw-mf, .pbk-btn, .dir-pop, .dir-card-action, .mcp-chip, .tw-chip, .dir-chip, .pbk-chip) {
    border: 0 !important; box-shadow: none !important; background: var(--n-s2) !important; color: var(--n-text) !important; border-radius: 999px !important;
}
html.native-app .stg-shell :is(.tw-mf, .dir-chip, .mcp-chip):is(.active, .is-active, .is-on, [aria-pressed="true"], [aria-selected="true"]) { background: var(--n-acc-soft) !important; color: var(--n-acc-text) !important; }
html.native-app .stg-shell :is(.pbk-btn.primary, .pbk-btn.is-primary, .dir-btn.primary) { background: var(--n-acc) !important; color: var(--n-acc-ink) !important; }
html.native-app .stg-shell :is(.tw-mode-tag, .pbk-tag, .dir-tag, .mcp-tag, .pbk-badge) { border: 0 !important; background: var(--n-s2) !important; color: var(--n-muted) !important; }
html.native-app .stg-shell :is(.mcp-search, .dir-search, .pbk-search, .tw-search) {
    border: 0 !important; box-shadow: none !important; background: var(--n-s1) !important; border-radius: 999px !important; min-height: 46px;
}
html.native-app .stg-shell :is(.mcp-search, .dir-search, .pbk-search, .tw-search) input { background: transparent !important; min-height: 0 !important; box-shadow: none !important; }
html.native-app .stg-shell :is(.mcp-card-ico, .dir-conn-ico, .pbk-row-ico, .tw-card-ico) { border: 0 !important; box-shadow: none !important; }
html.native-app .stg-shell .tw-card .stg-row-text h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.native-app .stg-shell .tw-mode-tag { font-size: 11px !important; padding: 2px 8px !important; white-space: nowrap; }
html.native-app .stg-shell .dir-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
html.native-app .stg-shell .dir-toolbar .dir-search { flex: 1 1 100% !important; }
/* Connections: Google / GitHub tiles */
html.native-app .stg-shell :is(.gc-tile, .gh-tile) { border: 0 !important; box-shadow: none !important; background: var(--n-s1) !important; border-radius: var(--n-r-card) !important; }
html.native-app .stg-shell :is(.gc-btn, .gh-btn) { border: 0 !important; box-shadow: none !important; border-radius: 999px !important; background: var(--n-acc-soft) !important; color: var(--n-acc-text) !important; font-weight: 600 !important; }
/* Capabilities hint: a soft callout instead of a coloured rule */
html.native-app .stg-shell .stg-cap-hint { border: 0 !important; background: var(--n-acc-soft) !important; color: var(--n-text) !important; border-radius: 12px !important; padding: 8px 12px !important; margin-top: 8px !important; }
/* Sub-agents */
html.native-app .stg-shell .sa-set-list { border: 0 !important; background: transparent !important; display: flex; flex-direction: column; gap: 2px; border-radius: var(--n-r-card) !important; overflow: hidden; }
html.native-app .stg-shell .sa-set-list > .sa-set-card { border: 0 !important; background: var(--n-s1) !important; border-radius: 6px !important; }
html.native-app .stg-shell .sa-set-list > .sa-set-card:first-child { border-top-left-radius: var(--n-r-card) !important; border-top-right-radius: var(--n-r-card) !important; }
html.native-app .stg-shell .sa-set-list > .sa-set-card:last-child { border-bottom-left-radius: var(--n-r-card) !important; border-bottom-right-radius: var(--n-r-card) !important; }
html.native-app .stg-shell :is(.sa-set-tool, .sa-chip, .sa-tag) { border: 0 !important; background: var(--n-s2) !important; color: var(--n-muted) !important; }

/* Our permission list */
html.native-app .nperm { display: flex; flex-direction: column; gap: 10px; }
html.native-app .nperm-intro { margin: 2px 4px 6px; font: 400 14px/1.5 var(--n-font); color: var(--n-muted); }
html.native-app .nperm .n-group { gap: 2px; }
html.native-app .nperm-row { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; background: var(--n-s1); border-radius: 6px; }
html.native-app .nperm .n-group > .nperm-row:first-child { border-top-left-radius: var(--n-r-card); border-top-right-radius: var(--n-r-card); }
html.native-app .nperm .n-group > .nperm-row:last-child { border-bottom-left-radius: var(--n-r-card); border-bottom-right-radius: var(--n-r-card); }
html.native-app .nperm-row .n-tile { background: var(--n-s2); }
html.native-app .nperm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.native-app .nperm-txt b { font: 600 15.5px/1.3 var(--n-font); }
html.native-app .nperm-txt span { font: 400 13px/1.4 var(--n-font); color: var(--n-muted); }
html.native-app .nperm-state { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--n-font); color: var(--n-ok); flex-shrink: 0; }
html.native-app .nperm-state .material-symbols-rounded { font-size: 18px; }
html.native-app .nperm-link { margin-top: 4px; align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--n-muted); font: 500 14px var(--n-font); padding: 10px 14px; border-radius: 999px; }
html.native-app .nperm-link .material-symbols-rounded { font-size: 18px; }

/* ── Library ──────────────────────────────────────────────────────────────── */
html.native-app .library-window {
    inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important;
    border-radius: 0 !important; border: 0 !important; box-shadow: none !important; padding-top: var(--n-top) !important; transform: none !important;
    background: var(--n-bg) !important; color: var(--n-text) !important; z-index: 1004 !important;
}
html.native-app .library-window .head {
    height: var(--n-bar) !important; padding: 0 6px !important; border: 0 !important; background: transparent !important;
    display: grid !important; grid-template-columns: 48px 1fr 48px !important; align-items: center !important;
}
html.native-app .library-window .head h2 { grid-column: 2; margin: 0 !important; text-align: center; font: 600 18px/1 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .library-window .head > span:last-child {
    grid-column: 1; grid-row: 1; width: 44px !important; height: 44px !important; border-radius: 14px !important;
    display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; color: var(--n-text) !important; background: transparent !important;
}
html.native-app .library-window .head > span:last-child::before { content: 'arrow_back'; font-family: 'Material Symbols Rounded'; font-size: 24px; }
html.native-app .library-window .content-view { height: calc(100% - var(--n-bar)) !important; border: 0 !important; }
html.native-app .library-window .content-cont { flex-direction: column !important; height: 100%; }
html.native-app .library-window .content-view .options {
    width: 100% !important; height: auto !important; flex: none !important; flex-direction: row !important; overflow-x: auto !important;
    padding: 2px 16px 12px !important; gap: 8px !important; border: 0 !important; background: transparent !important;
}
html.native-app .library-window .content-view .options .options-l {
    width: auto !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; flex-shrink: 0;
    border: 0 !important; box-shadow: none !important; background: var(--n-s1) !important; color: var(--n-text) !important; gap: 6px !important; font: 500 14px var(--n-font) !important;
}
html.native-app .library-window .content-view .options .options-l .material-symbols-rounded { font-size: 18px !important; }
html.native-app .library-window .content-view .options .options-l.active { background: var(--n-text) !important; color: var(--n-bg) !important; }
html.native-app .library-window .content-view .options .options-l.active * { color: var(--n-bg) !important; }
html.native-app .library-window .content-view .options .options-l::before { display: none !important; }
html.native-app .library-window .lib-contents { background: transparent !important; flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0 !important; }
html.native-app .library-window .lib-itms-search { position: relative; padding: 0 16px 12px !important; border: 0 !important; background: transparent !important; }
html.native-app .library-window .lib-itms-search input {
    width: 100% !important; height: 46px !important; min-height: 46px !important; border-radius: 999px !important; padding: 0 44px !important;
    background: var(--n-s1) !important; border: 0 !important; font: 400 15.5px var(--n-font) !important; color: var(--n-text) !important;
}
html.native-app .library-window .search-icon { left: 28px !important; color: var(--n-muted) !important; }
html.native-app .library-window .clear-icon { right: 26px !important; }
html.native-app .library-window .lib-itms-con { flex: 1; min-height: 0; overflow-y: auto !important; padding: 0 16px calc(24px + var(--n-bottom)) !important; }
html.native-app .library-window .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
html.native-app .library-window .lib-grid > * { border-radius: 18px !important; overflow: hidden; background: var(--n-s1) !important; border: 0 !important; box-shadow: none !important; }
html.native-app .library-window .lib-tile-preview { background: var(--n-s2) !important; border: 0 !important; box-shadow: none !important; }
html.native-app .library-window .lib-tile-preview img { object-fit: cover; }
html.native-app .library-window .lib-cat-chip { border: 0 !important; background: rgba(0, 0, 0, .5) !important; color: #fff !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.native-app .library-window .lib-grid :is(button, .lib-act) { background: var(--n-s2) !important; color: var(--n-text) !important; border: 0 !important; box-shadow: none !important; }
html.native-app .library-window .lib-grid [class*="meta"],
html.native-app .library-window .lib-grid [class*="date"] { color: var(--n-muted) !important; }
html.native-app .library-window .lib-itms-con .lib-images-l { min-height: 0 !important; aspect-ratio: 1 / 1; border-radius: 18px !important; }

/* ── Artifacts ────────────────────────────────────────────────────────────── */
html.native-app .artifacts-browser {
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 1003 !important;
    padding-top: var(--n-top) !important; background: var(--n-bg) !important; color: var(--n-text) !important;
    animation: n-sheet-up var(--n-dur) var(--n-ease) both !important;
}
html.native-app .artifacts-browser .ab-topbar {
    display: grid !important; grid-template-columns: 48px 1fr auto !important; grid-template-areas: "back title new" "search search search" !important;
    align-items: center !important; row-gap: 8px !important; column-gap: 4px !important;
    padding: 4px 6px 12px !important; border: 0 !important; background: var(--n-bg) !important; box-shadow: none !important;
}
html.native-app .artifacts-browser .ab-close { grid-area: back; width: 44px !important; height: 44px !important; border-radius: 14px !important; border: 0 !important; background: transparent !important; color: var(--n-text) !important; }
html.native-app .artifacts-browser .ab-close .material-symbols-rounded { font-size: 24px !important; }
html.native-app .artifacts-browser .ab-heading { grid-area: title; justify-content: center; }
html.native-app .artifacts-browser .ab-heading-ico { display: none !important; }
html.native-app .artifacts-browser .ab-heading-text strong { font: 600 18px/1 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .artifacts-browser .ab-new {
    grid-area: new; height: 38px !important; padding: 0 14px 0 10px !important; margin-right: 6px; border-radius: 999px !important;
    border: 0 !important; box-shadow: none !important; background: var(--n-acc) !important; color: var(--n-acc-ink) !important; font: 600 14px/1 var(--n-font) !important;
}
html.native-app .artifacts-browser .ab-new * { color: var(--n-acc-ink) !important; }
html.native-app .artifacts-browser .ab-search {
    grid-area: search; margin: 0 10px !important; height: 46px !important; border-radius: 999px !important;
    border: 0 !important; box-shadow: none !important; background: var(--n-s1) !important; color: var(--n-muted) !important;
}
html.native-app .artifacts-browser .ab-search-input { background: transparent !important; color: var(--n-text) !important; font: 400 15.5px var(--n-font) !important; min-height: 0 !important; box-shadow: none !important; }
html.native-app .artifacts-browser .ab-scroll { padding: 0 6px calc(24px + var(--n-bottom)) !important; }
html.native-app .artifacts-browser :is(.ab-card, .ab-item, .ab-tile) { border: 0 !important; box-shadow: none !important; background: var(--n-s1) !important; border-radius: 18px !important; }
html.native-app .artifacts-browser .ab-empty-ico { border: 0 !important; background: var(--n-s1) !important; color: var(--n-muted) !important; border-radius: 20px !important; }
html.native-app .artifacts-browser .ab-empty h3 { font: 600 18px var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .artifacts-browser .ab-empty p { color: var(--n-muted) !important; }
html.native-app .artifacts-browser .ab-empty-cta {
    height: 48px !important; padding: 0 22px !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
    background: var(--n-acc) !important; color: var(--n-acc-ink) !important; font: 600 15px/1 var(--n-font) !important;
}
html.native-app .artifacts-browser .ab-error { color: var(--n-muted) !important; }

/* ── Work Drive ───────────────────────────────────────────────────────────── */
html.native-app #wd-root .wd-window.is-sheet {
    inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important;
    border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
    padding-top: var(--n-top) !important; background: var(--n-bg) !important; color: var(--n-text) !important;
}
html.native-app #wd-root :is(.wd-lights, .wd-navbtns, .wd-rz, .wd-dockpill) { display: none !important; }
html.native-app #wd-root .wd-titlebar {
    height: var(--n-bar) !important; min-height: var(--n-bar) !important; padding: 0 6px !important; gap: 2px !important;
    border: 0 !important; background: var(--n-bg) !important; box-shadow: none !important;
}
html.native-app #wd-root .wd-tb-btn {
    width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 14px !important;
    border: 0 !important; background: transparent !important; color: var(--n-text) !important; box-shadow: none !important;
}
html.native-app #wd-root .wd-tb-btn .material-symbols-rounded { font-size: 23px !important; }
html.native-app #wd-root .wd-tb-btn.n-pressed { background: var(--n-s1) !important; }
html.native-app #wd-root .wd-title { flex: 1 !important; min-width: 0 !important; justify-content: flex-start !important; gap: 8px !important; padding: 0 4px !important; }
html.native-app #wd-root .wd-title-text { font: 600 18px/1.2 var(--n-font) !important; color: var(--n-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app #wd-root .wd-title-ico { display: none !important; }
html.native-app #wd-root .wd-tools { gap: 0 !important; }
html.native-app #wd-root .wd-seg { display: none !important; }
html.native-app #wd-root .wd-search { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.native-app #wd-root .wd-search:focus-within {
    position: absolute !important; left: 6px !important; right: 6px !important; top: calc(var(--n-top) + 6px) !important; z-index: 5;
    height: 44px !important; padding: 0 14px !important; border-radius: 999px !important; background: var(--n-s1) !important;
}
html.native-app #wd-root .wd-search input { background: transparent !important; color: var(--n-text) !important; border: 0 !important; font: 400 15.5px var(--n-font) !important; }
html.native-app #wd-root .wd-pathbar {
    height: auto !important; min-height: 40px !important; padding: 0 12px 8px !important; gap: 2px !important;
    border: 0 !important; background: transparent !important; overflow-x: auto !important; flex-wrap: nowrap !important;
}
html.native-app #wd-root .wd-crumb {
    height: 32px !important; padding: 0 12px !important; border-radius: 999px !important; border: 0 !important; flex-shrink: 0;
    background: var(--n-s1) !important; color: var(--n-muted) !important; font: 500 13.5px var(--n-font) !important; box-shadow: none !important;
}
html.native-app #wd-root .wd-crumb .material-symbols-rounded { font-size: 16px !important; }
html.native-app #wd-root .wd-crumb.is-last { background: var(--n-s2) !important; color: var(--n-text) !important; }
html.native-app #wd-root .wd-crumb-sep { color: var(--n-faint) !important; font-size: 16px !important; }
html.native-app #wd-root .wd-main,
html.native-app #wd-root .wd-body,
html.native-app #wd-root .wd-content { background: var(--n-bg) !important; border: 0 !important; }
html.native-app #wd-root .wd-content { padding: 4px 10px calc(24px + var(--n-bottom)) !important; }
html.native-app #wd-root :is(.wd-sec-head, .wd-group-head, .wd-section-head) { border: 0 !important; color: var(--n-muted) !important; font: 600 13px var(--n-font) !important; }
html.native-app #wd-root .wd-item { border: 0 !important; box-shadow: none !important; border-radius: 18px !important; background: transparent !important; }
html.native-app #wd-root .wd-item.n-pressed,
html.native-app #wd-root .wd-item.is-sel { background: var(--n-s1) !important; outline: 0 !important; }
html.native-app #wd-root .wd-item-name { font: 500 14px/1.3 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app #wd-root .wd-item-sub { font: 400 12px/1.3 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app #wd-root .wd-content.is-list .wd-item { border-radius: 14px !important; }
html.native-app #wd-root :is(.wd-btn, .wd-empty-acts button, .wd-banner button) {
    border: 0 !important; box-shadow: none !important; border-radius: 999px !important;
    background: var(--n-s2) !important; color: var(--n-text) !important; font: 600 14px/1 var(--n-font) !important; min-height: 38px; padding: 0 16px !important;
}
html.native-app #wd-root .wd-btn.is-primary { background: var(--n-acc) !important; color: var(--n-acc-ink) !important; }
html.native-app #wd-root .wd-empty h3 { font: 600 17px var(--n-font) !important; color: var(--n-text) !important; }
html.native-app #wd-root .wd-empty p { font: 400 14px/1.5 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app #wd-root .wd-empty-ico { color: var(--n-faint) !important; background: transparent !important; border: 0 !important; }
html.native-app #wd-root .wd-banner { border: 0 !important; border-radius: 16px !important; background: var(--n-s1) !important; color: var(--n-text) !important; margin: 0 12px 8px !important; }
html.native-app #wd-root .wd-status { border: 0 !important; background: var(--n-bg) !important; color: var(--n-muted) !important; font: 400 12.5px var(--n-font) !important; padding-bottom: calc(6px + var(--n-bottom)) !important; }
/* Its locations panel slides in like a drawer. */
html.native-app #wd-root .wd-sidebar { background: var(--n-bg) !important; border: 0 !important; box-shadow: 16px 0 40px rgba(0, 0, 0, .35) !important; padding-top: 6px !important; }
html.native-app #wd-root .wd-sb-head { font: 600 13px var(--n-font) !important; color: var(--n-muted) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 12px 12px 6px !important; }
html.native-app #wd-root .wd-sb-row {
    min-height: 48px !important; padding: 0 12px !important; gap: 14px !important; border: 0 !important; border-radius: 14px !important;
    background: transparent !important; color: var(--n-text) !important; font: 500 15.5px var(--n-font) !important;
}
html.native-app #wd-root .wd-sb-row.is-on,
html.native-app #wd-root .wd-sb-row.n-pressed { background: var(--n-s1) !important; }
html.native-app #wd-root .wd-sb-ico { font-size: 21px !important; color: var(--n-muted) !important; }
html.native-app #wd-root .wd-scrim { background: var(--n-scrim) !important; }
html.native-app #wd-root .wd-usage { border: 0 !important; background: var(--n-s1) !important; border-radius: 16px !important; }
html.native-app #wd-root .wd-usage-bar { background: var(--n-s3) !important; border: 0 !important; }
html.native-app #wd-root .wd-usage-bar i { background: var(--n-acc) !important; }
html.native-app #wd-root .wd-uploads { border: 0 !important; border-radius: 18px !important; background: var(--n-sheet) !important; box-shadow: var(--n-lift) !important; bottom: calc(14px + var(--n-bottom)) !important; }

/* ── Quick Look (Work Drive preview) ──────────────────────────────────────── */
html.native-app .wq-root .wq-panel {
    inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important;
    border-radius: 0 !important; border: 0 !important; box-shadow: none !important; padding-top: var(--n-top) !important;
    background: var(--n-bg) !important; color: var(--n-text) !important;
}
html.native-app .wq-root .wq-head { height: var(--n-bar) !important; padding: 0 6px !important; gap: 4px !important; border: 0 !important; background: var(--n-bg) !important; }
html.native-app .wq-root .wq-btn { min-width: 44px !important; height: 44px !important; border-radius: 14px !important; border: 0 !important; background: transparent !important; color: var(--n-text) !important; }
html.native-app .wq-root .wq-btn.is-label { background: var(--n-s1) !important; border-radius: 999px !important; padding: 0 14px !important; height: 38px !important; font: 600 13.5px var(--n-font) !important; }
html.native-app .wq-root .wq-head [data-q="close"] { font-size: 0 !important; }
html.native-app .wq-root .wq-head [data-q="close"] .material-symbols-rounded { display: none !important; }
html.native-app .wq-root .wq-head [data-q="close"]::before { content: 'arrow_back'; font-family: 'Material Symbols Rounded'; font-size: 24px; }
html.native-app .wq-root .wq-title b { font: 600 16px/1.2 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .wq-root .wq-title span { font: 400 12.5px var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app .wq-root .wq-stage { background: var(--n-bg) !important; border: 0 !important; }
html.native-app .wq-root .wq-stage.is-image { background: #000 !important; }
html.native-app .wq-root .wq-nav { border: 0 !important; background: color-mix(in srgb, var(--n-s1) 85%, transparent) !important; color: var(--n-text) !important; box-shadow: none !important; }

/* ── Playbooks window (from the + sheet) → a tall sheet ───────────────────── */
html.native-app .pbk-quick-overlay {
    align-items: flex-end !important; justify-content: stretch !important; padding: 0 !important;
    background: var(--n-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.native-app .pbk-quick-overlay .pbk-quick-card {
    position: relative !important; width: 100% !important; max-width: none !important; height: 92vh !important; max-height: 92vh !important; margin: 0 !important;
    border: 0 !important; border-radius: var(--n-r-sheet) var(--n-r-sheet) 0 0 !important; box-shadow: var(--n-shadow) !important;
    background: var(--n-sheet) !important; color: var(--n-text) !important;
    animation: n-sheet-up var(--n-dur) var(--n-ease) both !important; transform: none !important;
}
html.native-app .pbk-quick-overlay .pbk-quick-card::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--n-s3); z-index: 2;
}
html.native-app .pbk-quick-overlay .pbk-quick-head { padding: 22px 12px 10px 20px !important; border: 0 !important; background: transparent !important; gap: 12px !important; }
html.native-app .pbk-quick-overlay .pbk-quick-head > .material-symbols-rounded { display: none !important; }
html.native-app .pbk-quick-overlay .pbk-quick-titles strong { font: 600 19px/1.3 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .pbk-quick-overlay .pbk-quick-titles span { font: 400 13.5px/1.4 var(--n-font) !important; color: var(--n-muted) !important; }
html.native-app .pbk-quick-overlay .pbk-quick-close { width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 50% !important; background: var(--n-sheet-tile) !important; color: var(--n-text) !important; }
html.native-app .pbk-quick-overlay .pbk-quick-body { padding: 0 !important; border: 0 !important; }
html.native-app .pbk-quick-overlay .pbk-page { padding: 4px 16px calc(24px + var(--n-bottom)) !important; }
html.native-app .pbk-quick-overlay .pbk-topbar-title { display: none !important; }
html.native-app .pbk-quick-overlay .pbk-topbar { padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; min-height: 0 !important; }
html.native-app .pbk-quick-overlay :is(.pbk-btn, .pbk-icon-btn:not(.pbk-quick-close)) { border: 0 !important; box-shadow: none !important; background: var(--n-sheet-tile) !important; color: var(--n-text) !important; border-radius: 999px !important; }
html.native-app .pbk-quick-overlay .pbk-list { border: 0 !important; background: transparent !important; display: flex; flex-direction: column; gap: 2px; border-radius: var(--n-r-card) !important; overflow: hidden; }
html.native-app .pbk-quick-overlay .pbk-list > .pbk-row { border: 0 !important; background: var(--n-sheet-tile) !important; border-radius: 6px !important; }
html.native-app body.light_mode .pbk-quick-overlay .pbk-list > .pbk-row { background: var(--n-s1) !important; }
html.native-app .pbk-quick-overlay .pbk-list > .pbk-row:first-child { border-top-left-radius: var(--n-r-card) !important; border-top-right-radius: var(--n-r-card) !important; }
html.native-app .pbk-quick-overlay .pbk-list > .pbk-row:last-child { border-bottom-left-radius: var(--n-r-card) !important; border-bottom-right-radius: var(--n-r-card) !important; }
html.native-app .pbk-quick-overlay :is(.pbk-tag, .pbk-badge, .pbk-chip) { border: 0 !important; }
html.native-app :is(.pbk-quick-overlay, .stg-shell) .pbk-menu { border: 0 !important; border-radius: 16px !important; background: var(--n-sheet) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .35) !important; }

/* ── Chats page (ours) ────────────────────────────────────────────────────── */
html.native-app .npage-chats .n-search { margin-top: 2px; }
html.native-app .npage-chats .n-list { padding-top: 2px; }

/* ══ 7. Native bits ═══════════════════════════════════════════════════════ */
/* ── Text editor ──────────────────────────────────────────────────────────── */
html.native-app .ned {
    position: fixed; inset: 0; z-index: 100070; display: flex; flex-direction: column;
    background: var(--n-bg); color: var(--n-text); padding-top: var(--n-top);
    transform: translate3d(100%, 0, 0); transition: transform var(--n-dur) var(--n-ease);
}
html.native-app .ned.is-in { transform: none; }
html.native-app .ned-bar { display: flex; align-items: center; gap: 4px; height: var(--n-bar); padding: 0 8px 0 6px; flex: none; }
html.native-app .ned-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 4px; }
html.native-app .ned-title b { font: 600 16px/1.25 var(--n-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.native-app .ned-title span { font: 400 12.5px var(--n-font); color: var(--n-muted); }
html.native-app .ned-text {
    flex: 1; width: 100%; box-sizing: border-box; border: 0; outline: none; resize: none;
    padding: 14px 16px calc(24px + var(--n-bottom)); background: var(--n-s1); color: var(--n-text);
    border-radius: 20px 20px 0 0; font: 14px/1.6 var(--n-mono); tab-size: 4;
}

/* ── Welcome sheet ────────────────────────────────────────────────────────── */
html.native-app .nwel { z-index: 100080; }
html.native-app .nwel .nsheet-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 16px calc(18px + var(--n-bottom)); max-height: 92vh; }
html.native-app .nwel-logo { width: 58px; height: 58px; margin: 6px 0 2px; }
html.native-app .nwel-logo .n-mark { width: 58px; height: 58px; }
html.native-app .nwel h2 { margin: 10px 0 6px; font: 700 24px/1.2 var(--n-font); letter-spacing: -0.02em; }
html.native-app .nwel .nsheet-card > p { margin: 0 0 16px; font: 400 14.5px/1.5 var(--n-font); color: var(--n-muted); max-width: 360px; }
html.native-app .nwel-perms { width: 100%; text-align: left; }
html.native-app .nwel-perms :is(.nperm-intro, .nperm-link) { display: none; }
html.native-app .nwel-perms .nperm-row { background: var(--n-sheet-tile); }
html.native-app .nwel-done { margin-top: 16px; height: 52px; }

/* ── Sign-in screen ───────────────────────────────────────────────────────────
   The web popup (auth-login.css) is a card with an illustration; the app shows
   a calm full screen: the mark, a title, one line, two pills, the legal links. */
html.native-app body .signIn {
    position: fixed !important; inset: 0 !important; z-index: 100100 !important;
    width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
    background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--n-acc) 16%, transparent), transparent 62%), var(--n-bg, #18181b) !important;
    flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 0 !important;
    padding: calc(24px + var(--n-top)) 28px calc(72px + var(--n-bottom)) !important;
}
html.native-app body .signIn :is(.signin-panel, .signin-body) {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    width: 100% !important; max-width: 360px !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html.native-app body .signIn .signin-title {
    display: block !important; margin: 0 0 8px !important; text-align: center !important;
    font: 700 27px/1.2 var(--n-font) !important; letter-spacing: -0.02em !important; color: var(--n-text) !important;
}
html.native-app body .signIn .signin-tagline {
    display: block !important; margin: 0 0 32px !important; max-width: 300px; text-align: center !important;
    font: 400 15px/1.5 var(--n-font) !important; color: var(--n-muted) !important;
}
html.native-app body .signIn .signin-actions { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; }
html.native-app body .signIn :is(#signIn, #signUpBtn) {
    width: 100% !important; height: 54px !important; min-height: 54px !important; padding: 0 22px !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    font: 600 16px/1 var(--n-font) !important;
}
html.native-app body .signIn #signIn { background: var(--n-acc) !important; color: var(--n-acc-ink) !important; }
html.native-app body .signIn #signIn * { color: var(--n-acc-ink) !important; }
html.native-app body .signIn #signUpBtn { background: var(--n-s1) !important; color: var(--n-text) !important; }
html.native-app body .signIn #signUpBtn * { color: var(--n-text) !important; }
html.native-app body .signIn .signin-legal { gap: 10px !important; font: 500 13px var(--n-font) !important; }
html.native-app body .signIn .signin-legal :is(a, span) { color: var(--n-faint) !important; text-decoration: none !important; }
html.native-app body .overlay-glass { background: var(--n-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: 100099 !important; }
html.native-app .signIn::before {
    content: ''; flex: none; width: 72px; height: 72px; margin-bottom: 28px;
    background: url("../icon.svg") center / contain no-repeat;
    animation: n-spark-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
html.native-app .signIn #signIn {
    width: min(320px, 100%) !important; height: 54px !important; border-radius: 999px !important;
    background: var(--n-acc, #3b7bf6) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
    font: 600 16px var(--n-font) !important; justify-content: center !important;
}
html.native-app .signIn #signIn img { display: none !important; }
/* Google refuses OAuth inside embedded WebViews (disallowed_useragent). The
   button is offered only when the native Credential Manager plugin is present
   (html.native-gsi, set by mobile-app.js) — then it leads, like other apps. */
html.native-app:not(.native-gsi) .signIn #directGAuth { display: none !important; }
html.native-gsi body .signIn #directGAuth {
    order: -1; width: 100% !important; height: 54px !important; min-height: 54px !important; padding: 0 22px !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    background: var(--n-text) !important; color: var(--n-bg) !important; font: 600 16px/1 var(--n-font) !important;
}
html.native-gsi body .signIn #directGAuth span { color: var(--n-bg) !important; }
html.native-gsi body .signIn #directGAuth .signin-google { width: 20px; height: 20px; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
html.native-gsi body .signIn #directGAuth[aria-busy="true"] { opacity: .6; pointer-events: none; }
html.native-gsi body .signIn #signIn { background: var(--n-s1) !important; color: var(--n-text) !important; }
html.native-gsi body .signIn #signIn * { color: var(--n-text) !important; }
html.native-app .signIn a { color: var(--n-muted, #a1a1aa) !important; }

/* ── Sources sheet (style.css lays it out on phones) ──────────────────────── */
html.native-app .sources-window { z-index: 100030 !important; background: var(--n-sheet) !important; color: var(--n-text) !important; box-shadow: var(--n-shadow) !important; padding-bottom: var(--n-bottom) !important; }
html.native-app .sources-scrim { z-index: 100029 !important; background: var(--n-scrim) !important; }
html.native-app .sources-window::before { background: var(--n-s3) !important; }
html.native-app .sources-window .head .icon-close { background: var(--n-sheet-tile) !important; border: 0 !important; color: var(--n-text) !important; }
html.native-app .sources-window .content .sources-used { background: transparent !important; border: 0 !important; }
html.native-app .sources-window .content .sources-used.n-pressed { background: var(--n-sheet-press) !important; }
html.native-app .sources-window .content .sources-used h4 { font: 500 15.5px/1.3 var(--n-font) !important; color: var(--n-text) !important; }
html.native-app .sources-window .content .sources-used small { color: var(--n-muted) !important; }
html.native-app .sources-window .content .sources-used-metas img { background: var(--n-sheet-tile); }

/* ── Character sheet rows ─────────────────────────────────────────────────── */
html.native-app .nsheet-img { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; object-fit: cover; background: var(--n-sheet-tile); padding: 0; }
html.native-app .nsheet-check { margin-left: auto; font-size: 22px; color: var(--n-acc-text); }
html.native-app .nsheet-row.is-checked .nsheet-txt > span { font-weight: 600; }

/* ── Canvas, toasts ───────────────────────────────────────────────────────── */
/* The Canvas is a tall sheet on phones (canvas-panel.css); here it clears the
   status bar and sits above the app chrome. */
html.native-app .dc-panel { top: calc(var(--n-top) + 44px) !important; z-index: 1100 !important; border: 0 !important; background: var(--n-sheet) !important; }
/* Toasts = the app's snackbar: one width (edge to edge with 12px margins),
   an inverted solid surface (no glass), stacked just above the composer. */
html.native-app :is(.toast-stack, #toast-container) {
    left: 12px !important; right: 12px !important; bottom: calc(134px + var(--n-bottom)) !important;
    width: auto !important; max-width: none !important; transform: none !important;
    align-items: stretch !important; gap: 8px !important;
}
html.native-app .toast-stack .toast-card {
    width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important;
    min-height: 52px; padding: 10px 8px 10px 12px !important; gap: 12px !important;
    border: 0 !important; border-radius: 16px !important;
    background: var(--n-text, #f4f4f5) !important; color: var(--n-bg, #18181b) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
    transform: translateY(12px) !important;
}
html.native-app .toast-stack .toast-card.show { transform: none !important; }
html.native-app .toast-stack .toast-card.leaving { transform: translateY(8px) !important; }
html.native-app .toast-stack .toast-card .toast-text {
    color: var(--n-bg, #18181b) !important; font: 500 14.5px/1.35 var(--n-font) !important; letter-spacing: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.native-app .toast-stack .toast-card .toast-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 19px; }
html.native-app .toast-stack .toast-card.tk-success .toast-icon { color: #12a150 !important; background: rgba(18, 161, 80, .14) !important; }
html.native-app .toast-stack .toast-card.tk-error .toast-icon { color: #e5484d !important; background: rgba(229, 72, 77, .14) !important; }
html.native-app .toast-stack .toast-card.tk-warning .toast-icon { color: #c27c0e !important; background: rgba(245, 166, 35, .18) !important; }
html.native-app .toast-stack .toast-card.tk-info .toast-icon { color: var(--n-acc, #3b7bf6) !important; background: color-mix(in srgb, var(--n-acc, #3b7bf6) 15%, transparent) !important; }
html.native-app .toast-stack .toast-card .toast-close { width: 36px; height: 36px; margin: 0; border-radius: 12px; opacity: .6; color: var(--n-bg, #18181b) !important; }
html.native-app .toast-stack .toast-card .toast-close .material-symbols-rounded { font-size: 19px; color: inherit !important; }
/* The keyboard is up: sit right above it instead of behind the composer. */
html.native-app.nc-focus :is(.toast-stack, #toast-container) { bottom: calc(118px) !important; }

/* ── Touch: pressed = .n-pressed, never :hover / :active ──────────────────────
   In a WebView :hover and :active stay on whatever ends up under the finger —
   the row of a sheet that just slid up beneath the + / model / avatar button —
   so the bottom row looked pressed. mobile-app.js sets .n-pressed from the
   touch itself; the sticky states paint nothing. */
html.native-app :is(.nsheet-row, .n-row, .nd-link, .history-user, .wh-proj-row, .wh-card-act, .chat-ctx-item, .wd-menu-item, .wd-pick-row, .wd-sb-row, .select-item, .select-selected, .chat-tier-opt, .profile-actions, .n-icon-btn, .wh-icon-btn, .wd-tb-btn, .wq-btn:not(.is-label), .nt-btn, .nt-menu, .chat-more-btn, .wd-item):is(:hover, :active):not(.n-pressed):not(.active):not(.is-on):not(.is-sel):not(.selected):not(.is-selected):not(.long-press-active):not(.wh-proj.is-current > *):not(.wh-proj.is-menu-open > *) {
    background-color: transparent !important;
}
html.native-app #wd-root .wd-crumb:is(:hover, :active):not(.n-pressed):not(.is-last) { background-color: var(--n-s1) !important; }
html.native-app .library-window .content-view .options .options-l:is(:hover, :active):not(.n-pressed):not(.active) { background: var(--n-s1) !important; }
html.native-app body:not(.n-z) #attach-file-button.tool-btn .plus-menu .plus-menu-item.file-attach-menus:is(:hover, :active):not(.n-pressed) { background: transparent !important; }
html.native-app #model-picker-dialog :is(.suparva-option.ms-model, .ms-row):is(:hover, :active):not(.n-pressed),
html.native-app :is(#ms-effort-menu, #ms-more-menu) :is(.ms-opt, .suparva-option, .ms-toggle-row):is(:hover, :active):not(.n-pressed) { background: transparent !important; }
html.native-app .stg-shell .stg-nav-item:is(:hover, :active):not(.n-pressed) { background: var(--n-s1) !important; }
html.native-app :is(.n-btn, .dph-confirm-btn, .wd-btn, .nd-newchat):hover { filter: none !important; }
html.native-app :is(.nt-btn, .nt-menu, .nsheet-row, .n-btn, .dph-confirm-btn, .nd-newchat, .options-l, .wd-crumb, .stg-swatch):active:not(.n-pressed) { transform: none !important; }

/* ── Motion ───────────────────────────────────────────────────────────────── */
html.native-app :is(.nt-btn, .nt-menu, .nsheet-row, .stg-nav-item, .typing-form button:not(#attach-file-button), .options-l, .ab-new, .wd-tb-btn, .wd-crumb) {
    transition: transform .16s var(--n-ease), background-color .16s ease, opacity .16s ease !important;
}
html.native-app :is(.nt-btn, .nt-menu, .nsheet-row, .typing-form button:not(#attach-file-button), .options-l, .wd-crumb).n-pressed { transform: scale(.96) !important; }
@media (prefers-reduced-motion: reduce) {
    html.native-app *, html.native-app *::before, html.native-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Snackbar (file saved → Open) ─────────────────────────────────────────── */
html.native-app .nsnack {
    position: fixed; left: 12px; right: 12px; bottom: calc(14px + var(--n-bottom, 0px)); z-index: 2147483000;
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 16px; border-radius: 16px;
    background: var(--n-text, #f4f4f5); color: var(--n-bg, #18181b); box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    font: 500 14.5px/1.3 var(--n-font); transform: translateY(16px); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
html.native-app .nsnack.is-in { transform: none; opacity: 1; }
html.native-app .nsnack > .material-symbols-rounded { font-size: 21px; color: inherit; }
html.native-app .nsnack-txt { color: var(--n-bg, #18181b) !important; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-app .nsnack-act { height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--n-acc, #3b7bf6); font: 700 14.5px var(--n-font); }
html.native-app .nsnack-act:active { background: rgba(127, 127, 127, .16); }

/* ── Image viewer (DelphosNativeApp.viewImage) ────────────────────────────── */
html.native-app .nimg {
    --nimg-fade: 1;
    position: fixed; inset: 0; z-index: 2147482000; background: rgba(0, 0, 0, var(--nimg-fade)); color: #fff;
    opacity: 0; transition: opacity .2s ease; touch-action: none; user-select: none; -webkit-user-select: none;
}
html.native-app .nimg.is-in { opacity: 1; }
html.native-app .nimg-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
html.native-app .nimg-img { position: absolute; transform-origin: 0 0; will-change: transform; max-width: none; opacity: 0; transition: opacity .18s ease; -webkit-user-drag: none; }
html.native-app .nimg.is-ready .nimg-img { opacity: 1; }
html.native-app .nimg-spin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: dpdf-spin .8s linear infinite; }
html.native-app .nimg.is-ready .nimg-spin { display: none; }
html.native-app .nimg.is-broken .nimg-stage::after { content: 'This image could not be loaded.'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .7); font: 500 15px var(--n-font); }
html.native-app .nimg-top {
    position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 4px;
    padding: calc(6px + var(--n-top, 0px)) 6px 18px; background: linear-gradient(rgba(0, 0, 0, .55), transparent);
    transition: opacity .2s ease, transform .2s ease;
}
html.native-app .nimg.is-bare .nimg-top { opacity: 0; transform: translateY(-8px); pointer-events: none; }
html.native-app .nimg-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px var(--n-font); color: #fff; padding: 0 4px; }
html.native-app .nimg-btn { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; }
html.native-app .nimg-btn:active { background: rgba(255, 255, 255, .16); }
html.native-app .nimg-btn .material-symbols-rounded { font-size: 24px; color: #fff; }
/* pdf-viewer.css's spinner keyframes live there; the app always loads it. */

/* ── Document reader page (DelphosNativeApp.openDoc) ──────────────────────── */
html.native-app .ndoc {
    position: fixed; inset: 0; z-index: 2147481500; display: flex; flex-direction: column;
    background: var(--n-bg); color: var(--n-text); opacity: 0; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}
html.native-app .ndoc.is-in { opacity: 1; transform: none; }
html.native-app .ndoc-bar { flex: none; display: flex; align-items: center; gap: 2px; padding: calc(6px + var(--n-top, 0px)) 6px 6px; background: var(--n-bg); }
html.native-app .ndoc-title { flex: 1; min-width: 0; margin: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px var(--n-font); color: var(--n-text); }
html.native-app .ndoc-body { position: relative; flex: 1; min-height: 0; }
html.native-app .ndoc-body > .dpdf { position: absolute; inset: 0; height: auto; }
html.native-app .ndoc-body .dpdf-bar { bottom: calc(16px + var(--n-bottom, 0px)); }

/* Share chat: the system share sheet button under the link. */
html.native-app .dcs-native-share { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px; }
html.native-app .dcs-native-share .material-symbols-rounded { font-size: 20px; }