/* Artemii skin: calm, neutral-first, Apple-and-Claude restraint in Mayfair colours.
   Loaded after app / chat / panels / artifacts; overrides tokens and looks only.

   Principles
   - Surfaces are near-white / stone in light and deep neutral in dark; text is Mayfair Black / off-white; hairline borders.
   - Cards are flat: no border, no shadow, a surface a touch lighter than the page, very large radius (26px).
   - Amber (#ffa800) is a small accent only: focus ring, 2px/dot active indicators, thin usage fill,
     switch "on", selection, tiny badges. Primary buttons are Mayfair Black (white in dark).
   - Liquid-glass controls (top bar buttons, composer capsule, scroll-to-latest, menus, sheet buttons, toasts) are driven by
     the --glass-* tokens below, in ONE place. Solid fallback when backdrop-filter is missing, or the user asks for
     reduced transparency / more contrast.
   - Icons are 1.5 stroke. Motion is short and quiet and switches off with prefers-reduced-motion. */

/* ============================== tokens ============================== */
:root[data-theme="light"] {
  --bg: #fbfbfa; --bg-soft: #f4f4f2; --bg-soft2: #ebebe8; --panel: #ffffff; --card: #ffffff;
  --set-bg: #f4f4f2;
  --side: #f4f4f2; --side-hover: #ecece9; --side-active: #e7e7e3;
  --text: #0a0a0a; --muted: #6a6a64; --border: #e6e6e2; --border-strong: #d4d4cf; --hair: rgba(10, 10, 10, 0.07);
  --bubble: #f1f1ee; --code-bg: #f6f6f4;
  --accent-text: #8f5500; --accent-ring: #d98f00; --accent-soft: rgba(255, 168, 0, 0.16);
  --primary: #0a0a0a; --primary-hover: #262625; --on-primary: #ffffff;
  --danger: #c4262e; --danger-bg: #fdf1f1; --danger-border: #f1c9cb;
  --warn-bg: #fff7e3; --warn-border: #f1dfa8; --warn-text: #6b4300;
  --shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 10px 32px rgba(10, 10, 10, 0.08);
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
  --scrim: rgba(10, 10, 10, 0.32);
  /* glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-solid: #ffffff;
  --glass-border: rgba(10, 10, 10, 0.08);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 8px 24px rgba(10, 10, 10, 0.07);
}
:root[data-theme="dark"] {
  --bg: #0f0f0f; --bg-soft: #161616; --bg-soft2: #232323; --panel: #1c1c1c; --card: #202020;
  --set-bg: #151515;
  --side: #161616; --side-hover: #1e1e1e; --side-active: #262626;
  --text: #f3f3f2; --muted: #a0a09a; --border: #2a2a2a; --border-strong: #3a3a3a; --hair: rgba(255, 255, 255, 0.07);
  --bubble: #1f1f1f; --code-bg: #131313;
  --accent-text: #ffb52e; --accent-ring: #ffa800; --accent-soft: rgba(255, 168, 0, 0.14);
  --primary: #f3f3f2; --primary-hover: #ffffff; --on-primary: #0a0a0a;
  --danger: #ff8a8e; --danger-bg: #261516; --danger-border: #5a2a2d;
  --warn-bg: #241d0b; --warn-border: #54431a; --warn-text: #ffcf70;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.55);
  --glass-bg: rgba(30, 30, 30, 0.45);
  --glass-bg-strong: rgba(30, 30, 30, 0.72);
  --glass-solid: #202020;
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root {
  --glass-filter: blur(20px) saturate(1.6);
  --card-radius: 26px;
  --row-h: 56px;
  --msg-font: var(--font); --msg-lh: 1.65; --msg-size: 15.5px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root[data-font="readable"] { --msg-font: var(--serif); }
:root[data-size="small"] { --msg-size: 14.5px; }
:root[data-size="large"] { --msg-size: 17.5px; }
body { font-size: 15px; letter-spacing: -0.003em; }
::selection { background: rgba(255, 168, 0, 0.3); }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; box-shadow: none; }

/* the one glass recipe: translucent surface, blur, hairline with a faint specular highlight, soft shadow */
.tb-menu, .tb-title, .tb-actions, .jump, .toast, .sheet-x, .sheet-grab, .sb-new-float,
.menu, .popover, .pal, .cmp-box, .mp-sub, .af-menu, .af-seg-glass {
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
}

/* ============================== brand and sidebar ============================== */
.brand { gap: 8px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-transform: none; }
.sb-head { background: transparent; padding: 18px 12px 10px 18px; }
.sidebar { box-shadow: none; border-right: 1px solid var(--hair); }
.app.sidebar-open .sidebar { box-shadow: var(--shadow); }
.sb-actions { padding: 6px 10px 4px; gap: 1px; }
.sb-action, .chat-item { border-radius: 10px; }
.sb-action { font-weight: 400; color: var(--text); }
.sb-action svg { color: var(--muted); }
.chat-item { font-weight: 400; }
.chat-item.active, .sb-action.active { background: var(--side-active); box-shadow: none; font-weight: 500; }
/* New chat: a quiet neutral pill, no fill colour */
.sb-new { background: transparent; border: 1px solid var(--border); box-shadow: none; color: var(--text); font-weight: 500; border-radius: 999px; height: 36px; margin: 4px 0 8px; padding: 0 14px; }
.sb-new:hover { background: var(--side-hover); border-color: var(--border-strong); }
.sb-new svg { color: var(--text); }
.sec-toggle { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.avatar { background: var(--bg-soft2); color: var(--text); font-weight: 600; }
.sb-foot { border-top: 1px solid var(--hair); }
.profile-name { font-weight: 500; }
.ci-run { width: 6px; height: 6px; }
.meter-pct { font-weight: 500; }
.bar { height: 4px; background: var(--bg-soft2); }
.bar-fill { background: var(--accent); }
.bar-warn .bar-fill { background: var(--accent); }
.bar-full .bar-fill { background: var(--danger); }
.meter-warn .meter-pct { color: var(--accent-text); }

/* ============================== top bar: transparent, glass controls ============================== */
.topbar { height: 56px; padding: 8px 12px; gap: 8px; }
.tb-menu, .topbar .tb-actions { box-shadow: var(--glass-hl), var(--glass-shadow); }
.tb-menu { width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text); }
.tb-menu:hover { background: var(--glass-bg-strong); }
.tb-title { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-hl), var(--glass-shadow); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.tb-title:hover { background: var(--glass-bg-strong); }
.tb-title.static { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 15px; font-weight: 600; padding-left: 8px; }
.tb-crumb { height: 40px; padding: 0 8px 0 12px; font-size: 14px; }
.tb-actions { height: 40px; padding: 0 3px; gap: 0; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.tb-actions:empty { display: none; }
.tb-actions .icon-btn, .tb-actions .btn { height: 34px; min-width: 34px; border: 0; background: transparent; color: var(--muted); border-radius: 999px; }
.tb-actions .btn { padding: 0 12px; font-weight: 500; color: var(--text); }
.tb-actions .icon-btn:hover, .tb-actions .btn:hover { background: var(--hair); color: var(--text); }
.tb-share svg { color: var(--muted); }

/* chat: the bar floats over the thread, the thread scrolls beneath it */
.chat-view { position: relative; }
.chat-view > .topbar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; pointer-events: none; }
.chat-view > .topbar::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -26px; pointer-events: none;
  background: linear-gradient(var(--bg) 0, color-mix(in srgb, var(--bg) 78%, transparent) 55%, transparent 100%); }
.chat-view > .topbar > * { pointer-events: auto; }
.chat-view > .topbar .tb-spacer { display: none; pointer-events: none; }
.chat-view > .topbar .tb-title { margin: 0 auto; max-width: calc(100% - 150px); }
.chat-view > .topbar .tb-crumb-host { display: contents; }
.chat-view .thread { padding: 64px 20px calc(var(--dock-h, 110px) + 28px); }
.chat-view .thread-inner { padding-bottom: 0; gap: 22px; }

/* ============================== thread and messages ============================== */
.home-greet, .page-h1, .proj-name, .share-title-h { font-family: var(--font); font-weight: 600; letter-spacing: -0.035em; }
.bubble { background: var(--bubble); border-radius: 22px 22px 8px 22px; padding: 10px 16px; font-size: var(--msg-size); line-height: 1.55; }
.msg-content { font-size: var(--msg-size); }
.msg-content .md h1, .msg-content .md h2, .msg-content .md h3, .msg-content .md h4 { font-weight: 600; letter-spacing: -0.02em; }
.msg-content .md a { color: var(--text); text-decoration-color: var(--border-strong); }
.msg-content .md a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.msg-content .md blockquote { border-left: 2px solid var(--border-strong); }
.msg-content .md code { background: var(--bg-soft2); }
.code-block { border-radius: 14px; border-color: var(--hair); background: var(--code-bg); }
.table-wrap { border-color: var(--hair); border-radius: 14px; }
.act-btn { border-radius: 50%; }
.act-btn[aria-pressed="true"] { color: var(--text); background: var(--bg-soft2); }
.streaming .msg-content > .seg:last-child > :last-child::after { width: 6px; height: 6px; background: var(--accent); }
.msg-error { border-radius: 16px; }
.file-chip { border-radius: 999px; background: var(--bg-soft); }
.tool-sum { border-radius: 999px; }
.boot { border-radius: 18px; background: var(--bg-soft); border: 0; }
.artifact-card { border-radius: 18px; border-color: var(--hair); background: var(--card); padding: 12px 14px; }
.artifact-card:hover { border-color: var(--border-strong); box-shadow: none; }
.artifact-card.live { border-color: var(--border-strong); }
.artifact-card.live .ac-sub { color: var(--muted); }
.ac-icon { background: var(--bg-soft2); color: var(--text); border-radius: 12px; }
.ac-spin { border-color: var(--muted); border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) { .ac-spin, .boot-list li.now .boot-dot { animation: pulse 2.4s ease-in-out infinite !important; border-top-color: var(--muted); } }
.empty-icon { border-radius: 50%; }
.edit-box { border-radius: 22px; border-color: var(--border); }
.edit-box:focus-within { border-color: var(--border-strong); box-shadow: none; }

/* scroll-to-latest: a small round glass button above the composer */
.jump { bottom: calc(var(--dock-h, 110px) + 10px); width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-hl), var(--glass-shadow); color: var(--text); }
.jump span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jump:hover { background: var(--glass-bg-strong); }

/* ============================== composer: floating glass capsule ============================== */
.chat-view .composer-dock { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; }
.chat-view .composer-dock::before { content: ""; position: absolute; z-index: -1; inset: -30px 0 0; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 30%, var(--bg) 62%); }
.chat-view .composer-dock > * { pointer-events: auto; }
.cmp-box { border-radius: 28px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-hl), var(--glass-shadow); padding: 12px 10px 8px 18px; }
.cmp-box:focus-within { border-color: var(--border-strong); box-shadow: var(--glass-hl), var(--glass-shadow); }
.cmp-input { font-size: 16px; }
.cmp-btn { width: 34px; height: 34px; border-radius: 50%; }
.cmp-btn:hover:not(:disabled) { background: var(--hair); }
.send-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.send-btn:hover:not(:disabled) { filter: none; background: var(--primary-hover); }
.send-btn:disabled { background: var(--bg-soft2); color: var(--muted); }
.send-btn.stop { background: var(--primary); color: var(--on-primary); }
.cmp-note { font-size: 11px; opacity: 0.8; }
.cmp-drop { border-radius: 30px; border: 1.5px dashed var(--border-strong); background: var(--glass-bg-strong); }
.usage-banner { border-radius: 16px; }
.cmp-blocked { border-radius: 16px; border: 0; }
.mp-chip { height: 34px; border-radius: 999px; font-size: 13px; padding: 0 10px; }
.mp-chip:hover, .mp-chip[aria-expanded="true"] { background: var(--hair); }

/* ============================== home ============================== */
.home-mark { display: none; }
.home-center { gap: 26px; padding-bottom: 72px; }
.home-greet { font-size: clamp(30px, 6.4vw, 40px); font-weight: 600; line-height: 1.15; }
.composer-large .cmp-box { padding-top: 16px; }
.suggest { gap: 8px; }
.suggest-chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--bg-soft); color: var(--muted); font-weight: 400; }
:root[data-theme="dark"] .suggest-chip { background: var(--bg-soft2); }
.suggest-chip:hover { background: var(--bg-soft2); color: var(--text); border-color: transparent; }
:root[data-theme="dark"] .suggest-chip:hover { background: #2c2c2c; }

/* ============================== menus, popovers, palette, dialogs ============================== */
.menu, .popover, .pal { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-hl), var(--shadow); border-radius: 18px; }
.menu-item { border-radius: 10px; font-size: 14px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hair); }
.menu-item svg { color: var(--muted); }
.menu-sep { background: var(--hair); }
.pop-title { font-weight: 600; }
.usage-row-head { font-size: 14px; }
.usage-row .bar { height: 4px; }
.pal { border-radius: 22px; }
.pal-top { border-bottom-color: var(--hair); }
.pal-head { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; }
.pal-item { border-radius: 12px; }
.pal-item.sel { background: var(--hair); }
.pal-item.sel svg { color: var(--text); }
mark { background: rgba(255, 168, 0, 0.28); box-shadow: none; border-radius: 3px; }
dialog.dlg { border: 0; border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }
dialog.dlg::backdrop { background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dlg-title { font-weight: 600; letter-spacing: -0.02em; }
.pick-item { border-color: var(--hair); border-radius: 14px; }
.pick-item.on { border-color: var(--text); background: transparent; }
.toast { background: var(--glass-bg-strong); color: var(--text); border: 1px solid var(--glass-border); box-shadow: var(--glass-hl), var(--glass-shadow); border-radius: 999px; padding: 10px 14px 10px 18px; }
:root[data-theme="dark"] .toast { background: var(--glass-bg-strong); color: var(--text); }
.toast-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
:root[data-theme="dark"] .toast-error { background: var(--danger-bg); color: var(--danger); }
.toast-action, :root[data-theme="dark"] .toast-action { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* bottom sheets (phones): menus, popovers, dialogs */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-scrim { position: fixed; inset: 0; z-index: 99; background: var(--scrim); animation: fade-in 0.18s; }
.sheet-host { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-height: 88dvh; overflow-y: auto; background: var(--set-bg); border-radius: 28px 28px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.16); animation: sheet-up 0.26s var(--ease); overscroll-behavior: contain; }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 0; }
.sheet-x { position: absolute; top: 14px; left: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-bg-strong); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--glass-hl), var(--glass-shadow); }
.sheet-x:hover { background: var(--glass-bg-strong); }
.menu.in-sheet, .popover.in-sheet { position: static; z-index: auto; width: auto; min-width: 0 !important; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu.in-sheet { margin-top: 50px; background: var(--card); border-radius: var(--card-radius); overflow: hidden; }
.menu.in-sheet .menu-item { height: var(--row-h); padding: 0 20px; gap: 16px; font-size: 17px; font-weight: 400; border-radius: 0; background-color: transparent; }
.menu.in-sheet .menu-item + .menu-item { background-image: linear-gradient(var(--hair), var(--hair)); background-size: calc(100% - 78px) 1px; background-position: 58px top; background-repeat: no-repeat; }
.menu.in-sheet .menu-item:hover, .menu.in-sheet .menu-item:focus-visible { background-color: var(--hair); }
.menu.in-sheet .menu-item svg { width: 22px; height: 22px; color: var(--muted); }
.menu.in-sheet .menu-item.danger, .menu.in-sheet .menu-item.danger svg { color: var(--danger); }
.menu.in-sheet .menu-sep { height: 10px; margin: 0; background: var(--set-bg); }
.menu.in-sheet .menu-heading { padding: 16px 20px 12px; font-size: 13.5px; border-bottom: 1px solid var(--hair); }
.popover.in-sheet .pop-title { text-align: center; font-size: 17px; font-weight: 600; line-height: 40px; margin: 6px 0 18px; }
.popover.in-sheet .usage-rows { background: var(--card); border-radius: var(--card-radius); padding: 22px 20px; }
.popover.in-sheet .pop-note { text-align: center; }
.popover.in-sheet .btn { width: 100%; height: 48px; border-radius: 999px; font-size: 15px; }
@media (max-width: 700px) {
  dialog.dlg { margin: auto 0 0 0; width: 100%; max-width: none; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.dlg[open] { animation: sheet-up 0.26s var(--ease); }
  .dlg-inner { padding: 24px 20px 20px; }
  .dlg-actions { flex-wrap: nowrap; }
  .dlg-actions .btn { flex: 1; height: 46px; }
  .pick-item { min-height: 52px; }
}

/* ============================== settings: flat cards, tall rows, inset hairlines ============================== */
.settings { background: var(--set-bg); }
.set-side { background: var(--side); border-right: 1px solid var(--hair); }
.set-side-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.set-tab { border-radius: 12px; font-weight: 400; }
.set-tab.on { background: var(--side-active); font-weight: 500; }
.set-tab.on svg { color: var(--text); }
.set-main-head { background: linear-gradient(var(--set-bg) 70%, transparent); justify-content: center; position: sticky; }
.set-main-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.set-close { position: absolute; right: 28px; top: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--hair); color: var(--text); padding: 0; }
.set-close:hover { background: var(--bg-soft2); }
.set-section { margin-top: 28px; }
.set-h { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--muted); padding: 0 18px 10px; margin: 0; }
.set-card { background: var(--card); border: 0; box-shadow: none; border-radius: var(--card-radius); overflow: hidden; }
.set-row { position: relative; padding: 12px 20px; border-bottom: 0; min-height: var(--row-h); gap: 14px; }
.set-row + .set-row::before { content: ""; position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background: var(--hair); }
.set-row.has-ico + .set-row.has-ico::before { left: 56px; }
.set-ico { flex: none; width: 22px; display: grid; place-items: center; color: var(--muted); }
.set-ico svg { width: 22px; height: 22px; }
.set-label { font-weight: 400; font-size: 16px; }
.set-desc { font-size: 13px; max-width: 52ch; margin-top: 2px; }
.set-value { font-size: 15px; white-space: nowrap; }
.set-link { text-decoration: none; color: var(--text); cursor: pointer; }
.set-link:hover { background: var(--bg-soft); }
.set-link .set-row-text { flex: 1; }
.set-chev { color: var(--muted); opacity: 0.55; display: grid; place-items: center; flex: none; margin-right: -4px; }
.set-note { padding: 14px 20px; margin: 0; font-size: 13.5px; }
.set-card > p:not(.set-note) { padding: 14px 20px; margin: 0; }
.set-card > p + p { border-top: 1px solid var(--hair); }
.set-card .usage-rows { padding: 20px 20px 10px; gap: 22px; }
.set-card .usage-row .bar { height: 4px; }
.set-card > textarea { display: block; width: calc(100% - 40px); margin: 0 20px; border: 0; background: var(--bg-soft); border-radius: 16px; padding: 12px 14px; }
:root[data-theme="dark"] .set-card > textarea { background: var(--bg-soft2); }
.set-card > .ci-count { padding: 6px 20px 12px; margin: 0; }
.set-card .mem-host { padding: 0 20px 18px; margin: 0; border-top: 1px solid var(--hair); }
.set-card .mem-head { margin-top: 14px; }
.set-card .mem-list, .set-card .share-list { border-radius: 16px; background: var(--bg-soft); border-color: transparent; }
:root[data-theme="dark"] .set-card .mem-list, :root[data-theme="dark"] .set-card .share-list { background: var(--bg-soft2); }
.set-card .shares-host { padding: 14px 20px; }
.set-card .shares-host > p { margin: 0; }
.set-card .share-list { background: transparent; }
.set-card .kbd-list { margin: 0; padding: 0 20px; }
.set-card .kbd-list dt, .set-card .kbd-list dd { border-bottom-color: var(--hair); }
.set-card .kbd-list dt:nth-last-child(2), .set-card .kbd-list dd:last-child { border-bottom: 0; }
.set-card .about-legal-text { margin: 0; padding: 14px 20px; white-space: pre-wrap; }
.set-card input[type=text] { background: var(--bg-soft); border-color: transparent; border-radius: 14px; height: 40px; }
:root[data-theme="dark"] .set-card input[type=text] { background: var(--bg-soft2); }
.set-card input[type=text]:focus-visible { border-color: var(--accent-ring); }
.set-row.inline { flex-direction: row; align-items: center; }
.set-row.stack { padding-bottom: 16px; }
/* plain pill switch; amber only for the on track */
.switch { width: 51px; height: 31px; background: var(--border-strong); }
:root[data-theme="dark"] .switch { background: #3a3a3a; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch-knob { top: 2px; left: 2px; width: 27px; height: 27px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.seg-ctl { background: var(--bg-soft); border-radius: 14px; }
:root[data-theme="dark"] .seg-ctl { background: var(--bg-soft2); }
.seg-btn { border-radius: 11px; height: auto; min-height: 32px; padding: 4px 12px; line-height: 1.25; font-weight: 400; }
.set-tab:focus-visible { outline-offset: -2px; }
.seg-btn.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 500; }
:root[data-theme="dark"] .seg-btn.on { background: #3a3a3a; }
.acct-card { display: flex; align-items: center; gap: 16px; padding: 20px; margin-top: 8px; background: var(--card); border: 0; border-radius: var(--card-radius); }
.acct-avatar { width: 56px; height: 56px; font-size: 20px; font-weight: 600; }
.acct-text { flex: 1; min-width: 0; }
.acct-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-email { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.acct-plan { flex: none; text-transform: capitalize; font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 999px; background: var(--bg-soft2); color: var(--muted); }
.set-logout { margin-top: 28px; background: var(--card); border: 0; }
.set-logout-btn { justify-content: flex-start; gap: 14px; width: 100%; border: 0; background: transparent; color: var(--danger); font: inherit; cursor: pointer; display: flex; align-items: center; text-align: left; }
.set-logout-btn .set-ico, .set-logout-btn .set-label { color: var(--danger); font-weight: 400; }
.set-logout-btn:hover { background: var(--danger-bg); }
/* appearance preview cards: 2px neutral ring when selected, label recolours */
.theme-cards { gap: 12px; }
.theme-card { border: 2px solid transparent; background: transparent; border-radius: 20px; padding: 5px 5px 8px; gap: 8px; }
.theme-card:hover { border-color: var(--hair); }
.theme-card.on { border-color: var(--text); box-shadow: none; }
.tc-name { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.theme-card.on .tc-name { color: var(--text); font-weight: 500; }
.tc-prev { height: 88px; border-radius: 14px; padding: 12px 11px 10px; gap: 6px; align-content: start; border: 1px solid rgba(128, 128, 128, 0.22); }
.tc-prev i { height: 6px; opacity: 0.22; }
.tc-prev i:nth-child(1) { width: 52%; height: 12px; margin-left: auto; border-radius: 6px; background: currentColor; opacity: 0.16; }
.tc-prev i:nth-child(2) { width: 92%; }
.tc-prev i:nth-child(3) { width: 62%; }
.tc-prev::after { content: ""; display: block; height: 16px; margin-top: 4px; border-radius: 9px; border: 1px solid currentColor; opacity: 0.22; }
.tc-light { background: #f4f4f2; color: #0a0a0a; }
.tc-dark { background: #151515; color: #f3f3f2; }
.tc-system { background: linear-gradient(90deg, #f4f4f2 50%, #151515 50%); color: #7d7d78; }

@media (max-width: 800px) {
  .settings { display: flex; flex-direction: column; animation: sheet-up 0.26s var(--ease); }
  .set-side, .set-main { display: contents; }
  .set-side-head { display: block; position: absolute; z-index: 3; right: 16px; top: calc(26px + env(safe-area-inset-top)); padding: 0; }
  .set-side-head h2 { display: none; }
  .set-main-head { order: 1; flex: none; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; margin: 0; padding: calc(12px + env(safe-area-inset-top)) 68px 8px; min-height: 68px; background: var(--set-bg); }
  .set-main-head h2 { font-size: 17px; font-weight: 600; text-align: center; }
  .set-close { position: absolute; left: 16px; top: calc(12px + env(safe-area-inset-top)); right: auto; }
  .set-tabs { order: 2; flex: none; display: flex; overflow-x: auto; gap: 6px; padding: 6px 16px 12px; scrollbar-width: none; background: var(--set-bg); }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tab { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; background: transparent; border: 0; font-size: 14px; color: var(--muted); }
  .set-tab svg { display: none; }
  .set-tab.on { background: var(--card); color: var(--text); font-weight: 500; box-shadow: var(--shadow-sm); }
  .set-content { order: 3; flex: 1; min-height: 0; width: 100%; overflow-y: auto; padding: 0 16px calc(48px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .set-row { flex-direction: row; align-items: center; padding: 12px 18px; }
  .set-row + .set-row::before { left: 18px; right: 18px; }
  .set-row.has-ico + .set-row.has-ico::before { left: 54px; }
  .set-label { font-size: 17px; }
  .set-row.stack, .set-row:has(.seg-ctl) { flex-wrap: wrap; }
  .set-row:has(.seg-ctl) .set-control { width: 100%; padding-left: 36px; }
  .set-row:has(.seg-ctl):not(.has-ico) .set-control { padding-left: 0; }
  .set-row:has(.seg-ctl) .seg-ctl { display: flex; }
  .set-row:has(.seg-ctl) .seg-btn { flex: 1; }
  .set-row.stack { flex-direction: column; align-items: stretch; }
  .set-row .switch { align-self: center; }
  .set-control input[type=text] { width: 100%; }
  .set-row:has(input[type=text]) { flex-wrap: wrap; }
  .set-row:has(input[type=text]) .set-control { width: 100%; padding-left: 36px; }
  .set-row:has(.set-control > .btn) { flex-wrap: wrap; }
  .set-row:has(.set-control > .btn) .set-control { width: 100%; padding-left: 36px; }
  .set-row:has(.set-control > .btn) .btn { width: 100%; height: 42px; }
  .set-card .mem-add { flex-wrap: nowrap; }
  .set-section { margin-top: 28px; }
}

/* ============================== settings > Models, model sheet ============================== */
.mdl-card { border: 0; border-radius: var(--card-radius); background: var(--card); padding: 20px 22px; }
.mdl-card.is-default { border: 0; box-shadow: none; }
.mdl-name { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.mdl-badge { background: var(--bg-soft2); color: var(--muted); font-weight: 500; font-size: 12px; padding: 3px 10px; }
.mdl-tagline { font-weight: 500; font-size: 14.5px; }
.mdl-best-h { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.mdl-dot { width: 8px; height: 8px; }
.mdl-dot.on { background: var(--text); }
.mdl-card.is-default .mdl-dot.on { background: var(--text); }
.about-legal { border: 0; background: var(--card); border-radius: 20px; }
dialog.mp-dialog { border: 0; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); }
dialog.mp-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mp-title { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.mp-close { border-radius: 50%; width: 40px; height: 40px; border: 1px solid var(--hair); }
.mp-close:hover { background: var(--hair); }
.mp-row, .mp-effort, .mp-sub-item { border-radius: 16px; }
.mp-row:hover, .mp-row[aria-checked="true"], .mp-effort:hover, .mp-effort[aria-expanded="true"], .mp-sub-item:hover, .mp-sub-item[aria-checked="true"], .mp-sub-item:focus-visible { background: var(--bg-soft); }
:root[data-theme="dark"] .mp-row:hover, :root[data-theme="dark"] .mp-row[aria-checked="true"], :root[data-theme="dark"] .mp-effort:hover, :root[data-theme="dark"] .mp-sub-item:hover, :root[data-theme="dark"] .mp-sub-item[aria-checked="true"] { background: var(--bg-soft2); }
.mp-name, .mp-sub-name { font-weight: 500; }
.mp-row svg, .mp-sub-item svg { color: var(--text); }
.mp-effort-host { border-top-color: var(--hair); }
.mp-sub { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-hl), var(--shadow); }

/* ============================== lists, projects, share ============================== */
.list { border: 0; border-radius: var(--card-radius); background: var(--card); }
.list-row { border-bottom-color: var(--hair); }
.proj-card { border: 0; border-radius: var(--card-radius); background: var(--card); padding: 22px; }
.proj-card:hover { box-shadow: none; background: var(--bg-soft); }
.pc-icon { background: var(--bg-soft2); color: var(--text); border-radius: 12px; }
.col-title { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
.ins-box { border: 0; background: var(--card); border-radius: 18px; }
.share-top { border-bottom-color: var(--hair); }
.share-art-meta { font-weight: 500; }
.share-svg img { border-radius: 14px; border-color: var(--hair); }

/* ============================== artifact panel chrome ============================== */
.af-root { --af-chrome: var(--bg); --af-border: var(--hair); --af-accent-text: var(--text); --af-code-bg: var(--code-bg); border-left-color: var(--hair); }
.af-root :focus-visible { outline-color: var(--accent-ring); }
.af-tabrow { border-bottom-color: var(--hair); background: var(--bg); }
.af-tab { border-radius: 10px; font-weight: 400; }
.af-tabwrap.active .af-tab { font-weight: 500; }
.af-tabwrap.active::after { height: 2px; left: 12px; right: 12px; }
.af-tab-dot { width: 6px; height: 6px; }
.af-btn { border-radius: 999px; border-color: var(--border); font-weight: 500; }
.af-btn:hover { background: var(--bg-soft); }
.af-btn-icon { border-color: transparent; border-radius: 50%; }
.af-btn-icon[aria-pressed="true"], .af-mode-btn[aria-pressed="true"] { background: var(--bg-soft2); color: var(--text); border-color: transparent; }
.af-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 500; }
.af-btn-primary:hover { background: var(--primary-hover); }
.af-title-ico { background: var(--bg-soft2); color: var(--text); border-radius: 10px; }
.af-title { font-weight: 600; letter-spacing: -0.015em; }
.af-badge { background: var(--bg-soft2); font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 11px; border-radius: 999px; padding: 2px 8px; }
.af-writing { color: var(--muted); }
.af-writing i { width: 5px; height: 5px; }
.af-seg { background: var(--bg-soft2); border-radius: 999px; padding: 2px; }
.af-seg-btn { border-radius: 999px; font-weight: 400; }
.af-seg-btn.on { background: var(--card); color: var(--text); font-weight: 500; box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .af-seg-btn.on { background: #3a3a3a; }
.af-menu { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-hl), var(--shadow); }
.af-menuitem { border-radius: 10px; }
.af-menubtn { border-radius: 999px; }
.af-view-bar, .af-bar, .af-fmtbar, .af-notice, .af-note { border-bottom-color: var(--hair); }
.af-fmtbar { background: var(--bg); }
.af-ask { background: var(--bg); border-top-color: var(--hair); }
.af-ask-box { border-radius: 24px; border-color: var(--border); box-shadow: none; background: var(--card); }
.af-ask-box:focus-within { border-color: var(--border-strong); box-shadow: none; }
.af-ask-send { border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.af-ask-send:hover { background: var(--primary-hover); color: var(--on-primary); }
.af-ask-send:disabled { background: var(--bg-soft2); color: var(--muted); }
.af-count { background: var(--text); color: var(--bg); font-weight: 600; }
.af-dialog { border: 0; border-radius: 26px; background: var(--card); }
.af-doc-page { font-family: var(--font); font-size: 15.5px; }
.af-doc-page h1, .af-doc-page h2, .af-doc-page h3, .af-doc-page h4 { font-family: var(--font); letter-spacing: -0.02em; }
.af-doc-page blockquote { border-left: 2px solid var(--border-strong); font-style: normal; }
.af-doc-page a { color: var(--text); }
.af-resizer:hover::after, .af-resizer:focus-visible::after, .af-resizing .af-resizer::after { width: 2px; }
.af-root.af-mobile { background: var(--bg); }

/* ============================== phones: sidebar drawer, glass floating New chat ============================== */
@media (max-width: 800px) {
  .sidebar { width: min(340px, 88vw); background: var(--side); border-right: 0; border-radius: 0 28px 28px 0; }
  .sb-head { padding: calc(18px + env(safe-area-inset-top)) 12px 10px 22px; }
  .sb-actions { padding: 8px 12px 2px; }
  .sb-search { height: 48px; padding: 0 14px; gap: 14px; font-size: 16.5px; border-radius: 16px; background: var(--bg-soft2); }
  :root[data-theme="dark"] .sb-search { background: var(--bg-soft2); }
  .sb-search svg { width: 22px; height: 22px; color: var(--muted); }
  .sb-new { position: absolute; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 6; width: auto; height: 50px; padding: 0 22px 0 16px; margin: 0; gap: 10px; border-radius: 999px; font-size: 16px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-hl), var(--glass-shadow); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
  .sb-new:hover { background: var(--glass-bg-strong); }
  .sb-new svg { width: 20px; height: 20px; }
  .sb-scroll { padding: 4px 12px 150px; }
  .sec { margin-top: 14px; }
  .sec-toggle { font-size: 13px; font-weight: 400; padding: 8px 10px; }
  .sec-toggle svg { display: none; }
  .sec-add { width: 32px; height: 32px; }
  .chat-item { min-height: 48px; padding: 0 8px 0 14px; font-size: 16px; border-radius: 14px; gap: 12px; }
  .chat-item .ci-more { width: 34px; height: 34px; }
  .project-item svg, .archived-link svg { width: 20px; height: 20px; }
  .sb-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; padding: 28px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 0; background: linear-gradient(transparent, var(--side) 38%); pointer-events: none; }
  .sb-foot > * { pointer-events: auto; }
  .meter-wrap { order: -1; width: 100%; margin-bottom: 10px; }
  .meter { background: var(--card); border: 0; border-radius: 18px; padding: 12px 16px; }
  .profile { width: auto; padding: 0; border-radius: 50%; }
  .profile .avatar { width: 50px; height: 50px; font-size: 17px; box-shadow: 0 0 0 3px var(--side); }
  .profile-text, .profile > svg { display: none; }
  .topbar { padding: 8px 10px; }
  .chat-view .thread { padding: 60px 16px calc(var(--dock-h, 110px) + 24px); }
  .chat-view .composer-dock { padding: 0 12px calc(10px + env(safe-area-inset-bottom)); }
  .chat-view > .topbar .tb-title { max-width: calc(100% - 140px); }
}

/* ============================== fallbacks: one place ============================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme] { --glass-bg: var(--glass-solid); --glass-bg-strong: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-theme] { --glass-filter: none; --glass-bg: var(--glass-solid); --glass-bg-strong: var(--glass-solid); }
  :root[data-theme="light"] { --glass-border: rgba(10, 10, 10, 0.22); }
  :root[data-theme="dark"] { --glass-border: rgba(255, 255, 255, 0.28); }
  .chat-view > .topbar::before, .chat-view .composer-dock::before { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-host, .settings, dialog.dlg[open] { animation: none; }
}