/* Shared Nexia palette for the desktop app and web. */
.nx-greeting-name {
  display:inline-block;
  font-family:inherit;
  font-style:normal;
  font-weight:800;
  font-size:1.12em;
  line-height:1;
  letter-spacing:inherit;
  white-space:nowrap;
}
:root[data-nexia="true"] {
  color-scheme: light;
  --page: #f6f5ef;
  --surface: #eeeee5;
  --raised: #fffefa;
  --input-surface: #eaf0e2;
  --text: #243e33;
  --muted: #65756b;
  --line: #dce3d8;
  --user: #e7eee3;
  --code: #eeefe6;
  --accent: #247151;
  --accent-ink: #fff;
  --green: #247151;
  --soft: #24715112;
  --gold: #bd9550;
  --cream: #fff0d6;
  --forest: #183e30;
  --scene: #dce8ce;
  --shadow: 0 14px 42px #223d3310;
  --spring: cubic-bezier(.22, 1.18, .36, 1);
  --warning-bg: #faf0da;
  --warning-text: #73551f;
  --warning-line: #ddc79d;
  --error: #ad443c;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
:root[data-nexia="true"][data-theme="dark"] {
  color-scheme: dark;
  --page: #14241e;
  --surface: #1b3027;
  --raised: #21392e;
  --input-surface: #304a3b;
  --text: #e9eee3;
  --muted: #afc1b2;
  --green: #95c9a8;
  --line: #365043;
  --user: #284333;
  --code: #1b3027;
  --gold: #d6b675;
  --cream: #38402c;
  --forest: #0d211a;
  --scene: #34503a;
  --shadow: 0 14px 42px #0002;
  --warning-bg: #383423;
  --warning-text: #e2c78f;
  --warning-line: #665434;
  --error: #f19a8c;
}
/* Nexia's shared visual language. Page geometry lives in layouts/. */
:root[data-nexia="true"] [hidden] { display: none !important; }
:root[data-nexia="true"] :is(button, a, input, textarea, select, summary) { touch-action: manipulation; }
:root[data-nexia="true"] :is(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
:root[data-nexia="true"] :is(button, a.button) { transition: background-color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms var(--spring); }
:root[data-nexia="true"] :is(button, a.button):active:not(:disabled) { transform: scale(.97); }
:root[data-nexia="true"] :is(button, input, select, summary) { min-height: 44px; }
:root[data-nexia="true"] button { min-width: 44px; }
:root[data-nexia="true"] input:is([type="checkbox"], [type="radio"]) { min-height: 0; }
.nx-icon { display: inline-block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; pointer-events: none; }
.nx-action-icon .nx-icon { width: 14px; height: 14px; margin-left: 3px; }
.wb-side-symbol .nx-icon { width: 44px; height: 44px; }
.nx-scene { position: relative; width: 310px; height: 270px; isolation: isolate; flex: none; pointer-events: none; user-select: none; }
.nx-scene-plane { position: absolute; inset: 53px 24px 12px 28px; border-radius: 48% 45% 30% 38%; transform: rotate(-12deg); background: linear-gradient(145deg, var(--scene), var(--cream)); box-shadow: inset 0 0 0 1px #c6a36230; }
.nx-scene-plane::after { content: ""; position: absolute; inset: 17px; border: 1px solid #c6a36242; border-radius: inherit; }
.nx-scene-orbit { position: absolute; width: 115%; height: 115%; left: -8%; top: -6%; animation: nx-orbit 50s linear infinite; }
.nx-scene-character { position: absolute; width: 100%; height: 100%; object-fit: contain; left: 2%; bottom: 3%; filter: drop-shadow(0 14px 9px #133e2b19); animation: nx-float 7s ease-in-out infinite; }
.nx-scene-front { position: absolute; width: 50px; height: 50px; right: 2%; bottom: 13%; color: var(--gold); transform: rotate(18deg); animation: nx-star 6s ease-in-out infinite; }
.nx-scene-front svg { width: 100%; height: 100%; }
.nx-scene-character { translate: var(--nx-dx,0px) var(--nx-dy,0px); }
.nx-scene-orbit { translate: calc(var(--nx-dx,0px) * -.5) calc(var(--nx-dy,0px) * -.5); }
.nx-scene-front { translate: calc(var(--nx-dx,0px) * 1.6) calc(var(--nx-dy,0px) * 1.6); }
.nx-scene[data-nexia-scene="empty"] .nx-scene-character { width: 76%; height: 76%; left: 12%; bottom: 12%; }
.nx-scene[data-nexia-scene="empty"] .nx-scene-plane { border-radius: 50%; }
.nx-scene[data-nexia-scene="empty"] .nx-scene-front { right: 10%; }
@keyframes nx-float { 0%,100% { transform: translate3d(0,0,0) rotate(-4deg); } 50% { transform: translate3d(0,-7px,0) rotate(-1deg); } }
@keyframes nx-orbit { to { transform: rotate(360deg); } }
@keyframes nx-star { 0%,100% { transform: rotate(18deg) scale(.92); } 50% { transform: rotate(27deg) scale(1.04); } }
:root[data-nexia="true"][data-nx-paused] :is(.nx-scene-orbit,.nx-scene-character,.nx-scene-front) { animation-play-state: paused; }
:root[data-nexia="true"] .phone-header { padding: max(16px,env(safe-area-inset-top)) 24px 12px; background: var(--page); border: 0; }
:root[data-nexia="true"] .wordmark { font-size: 24px; font-weight: 750; letter-spacing: -1px; }
:root[data-nexia="true"] .wordmark .mark { width: 36px; height: 36px; border-radius: 50%; }
:root[data-nexia="true"] .login-card { max-width: 420px; padding: 18px 0 32px; }
:root[data-nexia="true"] .login-card > .nx-scene { margin: 0 auto 8px; }
:root[data-nexia="true"] .login h1 { font-size: clamp(28px,5vw,38px); letter-spacing: -1.3px; }
:root[data-nexia="true"] .login input { background: var(--raised); border-radius: 15px; }
:root[data-nexia="true"] .login .primary { border-radius: 15px; min-height: 52px; }
:root[data-nexia="true"] #sidebar { background: var(--page); padding: 0 20px; }
.nx-list-brand { display: flex; align-items: center; flex: none; position: relative; height: 132px; padding: 24px 4px 0; isolation: isolate; overflow: visible; }
.nx-list-brand::before { content: ""; position: absolute; inset: 27px -4px 4px; background: linear-gradient(120deg,var(--scene),var(--cream)); border-radius: 22px; z-index: -1; }
.nx-list-wordmark { align-self: flex-end; margin: 0 0 24px 16px; font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -1.8px; }
.nx-list-brand .nx-scene { position: absolute; right: -4px; top: -5px; width: 150px; height: 150px; }
.nx-list-brand .nx-scene-plane { display: none; }
:root[data-nexia="true"] .list-heading { min-height: 66px; padding: 8px 0 2px; gap: 8px; }
:root[data-nexia="true"] .list-heading h2 { font-size: 23px; font-weight: 650; letter-spacing: -.8px; }
:root[data-nexia="true"] .list-heading .client-badge { display: none; }
:root[data-nexia="true"] .connected-computer { font-size: 11px; }
:root[data-nexia="true"] .list-heading #new-chat { min-width: 44px; min-height: 44px; padding: 8px 11px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 12px; }
:root[data-nexia="true"] .list-heading .list-more { width: 44px; min-height: 44px; padding: 10px; color: var(--text); }
:root[data-nexia="true"] .chat-list-toolbar { gap: 8px; margin: 4px 0 16px; }
:root[data-nexia="true"] .chat-list-toolbar > .search { height: 46px; min-height: 46px; padding: 12px 14px; border-radius: 14px; background: var(--raised) !important; border-color: var(--line) !important; font-size: 14px !important; }
:root[data-nexia="true"] .chat-list-toolbar .list-filters { gap: 8px; }
:root[data-nexia="true"] .chat-list-toolbar .list-mode select { height: 44px; min-height: 44px; border: 0; background-color: transparent; font-size: 12px; }
:root[data-nexia="true"] .chat-list-toolbar .archive { min-height: 44px; font-size: 12px; padding: 0 4px; }
:root[data-nexia="true"] .session { padding: 18px 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: 0 2px 3px #183e3003; }
:root[data-nexia="true"] .session:hover { border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); background: var(--raised); }
:root[data-nexia="true"] .session.selected { border-color: var(--accent); background: var(--soft); box-shadow: inset 3px 0 var(--accent); }
:root[data-nexia="true"] .session strong { font-size: 15px; font-weight: 600; line-height: 1.7; }
:root[data-nexia="true"] .session small { font-size: 11px; margin-top: 9px; }
:root[data-nexia="true"] .project-group > summary { padding: 12px 4px; color: var(--muted); }
:root[data-nexia="true"] .client-navigation { background: var(--page); }
:root[data-nexia="true"] .client-functions { min-height: 58px; padding: 7px 4px; }
:root[data-nexia="true"] .client-functions > * { min-height: 44px; font-size: 12px !important; }
:root[data-nexia="true"] .welcome { background: radial-gradient(ellipse at 50% 40%,var(--cream),transparent 65%); }
:root[data-nexia="true"] .welcome h1 { font-size: 28px; margin-top: 10px; font-weight: 650; }
:root[data-nexia="true"] .welcome .nx-greeting { max-width: 560px; margin: 0 20px 20px; text-align: center; line-height: 1.4; }
:root[data-nexia="true"] .welcome [data-greeting-lead] { display: block; }
:root[data-nexia="true"] .welcome [data-greeting-body] { display: block; margin-top: 12px; font-size: 20px; font-weight: 450; line-height: 1.7; text-wrap: pretty; }
:root[data-nexia="true"] .welcome p { max-width: 340px; line-height: 1.8; }
:root[data-nexia="true"] .chat-head { background: var(--page); min-height: 66px; border-color: var(--line); padding-top: 8px; padding-bottom: 8px; }
:root[data-nexia="true"] .chat-head .chat-title-button { font-size: 16px; font-weight: 600; }
:root[data-nexia="true"] .chat-head > .client-icon { width: 32px; height: 32px; }
:root[data-nexia="true"] .chat-head > .client-icon img { border-radius: 50%; }
:root[data-nexia="true"] .status { border: 1px solid var(--line); font-size: 11px; background: var(--raised); color: var(--green); height: auto; line-height: 18px; padding: 3px 9px; }
:root[data-nexia="true"] .status.offline { color: var(--warning-text); background: var(--warning-bg); }
:root[data-nexia="true"] .timeline { padding-top: 20px; }
/* Activity disclosures read as consecutive lines, rather than full-height controls. */
:root[data-nexia="true"] .activity.timeline-row:not([open]) { margin-block: 0; }
:root[data-nexia="true"] .activity > summary { min-height: 0; padding-block: 3px; line-height: 1.6; }
:root[data-nexia="true"] .message.user { border: 1px solid var(--line); border-radius: 22px 22px 6px 22px; padding: 14px 18px; }
:root[data-nexia="true"] .message .who { color: var(--green); font-weight: 600; letter-spacing: .5px; }
:root[data-nexia="true"] .message pre { border-radius: 14px; padding: 16px; }
:root[data-nexia="true"] .approval { border-radius: 20px; padding: 20px; }
:root[data-nexia="true"] .approval .actions { gap: 10px; }
:root[data-nexia="true"] .approval .actions button { border-radius: 12px; }
:root[data-nexia="true"] .queue-card { border-radius: 16px; }
:root[data-nexia="true"] .goal-state { border-radius: 18px; padding-right: 50px; }
:root[data-nexia="true"] .composer { padding: 10px 12px 12px; margin-bottom: max(12px,env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 24px; background: var(--raised); box-shadow: var(--shadow); }
:root[data-nexia="true"] .composer textarea { background: var(--input-surface); border: 1px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius: 14px; padding: 12px 14px; min-height: 56px; color: var(--text); box-shadow: inset 0 1px 2px #10271d08; }
:root[data-nexia="true"] .composer textarea::placeholder { color: var(--muted); opacity: 1; }
:root[data-nexia="true"] .composer textarea:focus { border-color: var(--green); }
:root[data-nexia="true"] .composer-tools { gap: 4px; flex-wrap: wrap; }
:root[data-nexia="true"] .tool-button { min-height: 44px; padding: 7px 10px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; }
:root[data-nexia="true"] .composer-toggle { width: 44px; height: 44px; min-width: 44px; }
:root[data-nexia="true"] .compose-bottom { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) auto; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
:root[data-nexia="true"] .compose-bottom select { min-height: 44px; height: 44px; border: 0; background-color: transparent; padding-right: 16px; font-size: 14px; }
:root[data-nexia="true"] .compose-actions :is(.primary,.stop) { font-size: 14px; font-weight: 600; }
:root[data-nexia="true"] :is(.attach-button,.goal-toggle) { min-width: 44px; width: 44px; min-height: 44px; border-radius: 12px; padding: 10px; }
:root[data-nexia="true"] .goal-toggle span { display: none; }
:root[data-nexia="true"] .compose-actions .primary { min-width: 52px; min-height: 44px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); }
:root[data-nexia="true"] .stop { min-width: 44px; min-height: 44px; border-radius: 13px; color: var(--error); }
:root[data-nexia="true"] .compose-foot { margin: 7px 3px 0; }
:root[data-nexia="true"] .newer { border-radius: 20px; min-height: 44px; box-shadow: var(--shadow); }
:root[data-nexia="true"] .picker { background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: 26px; padding: 26px; box-shadow: 0 24px 100px #10271d40; }
:root[data-nexia="true"] .picker { box-sizing: border-box; min-width: 0; max-width: calc(100% - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
:root[data-nexia="true"] .picker > * { min-width: 0; max-width: 100%; }
:root[data-nexia="true"] .picker-head { position: sticky; top: 0; z-index: 3; background: var(--raised); padding-block: 8px; }
:root[data-nexia="true"] .picker-head::before { content: ""; position: absolute; inset: -28px -26px -1px; z-index: -1; background: var(--raised); border-bottom: 1px solid var(--line); pointer-events: none; }
:root[data-nexia="true"] .picker-head > button { flex: none; }
:root[data-nexia="true"] .appearance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
:root[data-nexia="true"] .picker :is(input,select,textarea) { min-width: 0; max-width: 100%; }
:root[data-nexia="true"] .display-option > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
:root[data-nexia="true"] :is(.accent-options,.appearance-actions) { flex-wrap: wrap; row-gap: 12px; }
:root[data-nexia="true"] .picker::backdrop { background: #0d211a80; backdrop-filter: blur(4px); }
:root[data-nexia="true"] .picker h2 { font-size: 22px; line-height: 1.4; letter-spacing: -.6px; }
:root[data-nexia="true"] .picker .picker-head .icon-button { min-width: 44px; min-height: 44px; padding: 11px; border-radius: 50%; background: var(--surface); color: var(--text); }
:root[data-nexia="true"] .picker :is(select,input:not([type="checkbox"]):not([type="range"]):not([type="color"]),textarea) { border-radius: 13px; background-color: var(--page); font-size: 16px; }
:root[data-nexia="true"] .picker .primary { min-height: 48px; border-radius: 13px; }
:root[data-nexia="true"] .picker .display-option { min-height: 52px; }
:root[data-nexia="true"] .accent-swatch { min-width: 44px; max-width: 44px; width: 44px; min-height: 44px; max-height: 44px; height: 44px; border-width: 8px; }
:root[data-nexia="true"] .custom-accent input[type="color"] { width: 44px; height: 44px; }
:root[data-nexia="true"] .workbench-tabs { background: var(--page); border-color: var(--line); padding: 5px 12px; gap: 6px; }
:root[data-nexia="true"] .workbench-tabs :is(button,.wb-tab) { min-height: 44px; border-radius: 12px; }
:root[data-nexia="true"] .wb-tab.active { background: var(--soft); color: var(--green); }
:root[data-nexia="true"] .wb-add { width: 44px; min-width: 44px; background: var(--surface); }
:root[data-nexia="true"] .wb-tab-close { min-width: 44px; }
:root[data-nexia="true"] .wb-tab-choices button { border-radius: 17px; padding: 18px; min-height: 80px; }
:root[data-nexia="true"] :is(.wb-file,.wb-agent-card) { min-height: 60px; }
:root[data-nexia="true"] :is(.wb-toolbar,.wb-git-head,.wb-git-modes,.wb-side-head,.wb-float-bar) { background: var(--surface); border-color: var(--line); }
:root[data-nexia="true"] :is(.wb-toolbar,.wb-git-head,.wb-side-head,.wb-git-actions,.wb-git-modes,.wb-float-bar) button { min-height: 44px; border-radius: 12px; }
:root[data-nexia="true"] .wb-float { border-radius: 20px; }
:root[data-nexia="true"] .wb-side-message.user { border-radius: 18px 18px 5px 18px; }
:root[data-nexia="true"] .toast { border-radius: 16px; padding: 14px 20px; background: var(--forest); color: #fffefa; }
:root[data-nexia="true"] .toast:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-nexia="true"] :is(.nx-scene-orbit,.nx-scene-character,.nx-scene-front) { animation: none; }
  :root[data-nexia="true"] :is(.nx-scene-orbit,.nx-scene-character,.nx-scene-front) { translate: none; }
  :root[data-nexia="true"] :is(button,a,input,textarea,select,.session) { transition: none; }
  :root[data-nexia="true"] :is(button,a.button):active:not(:disabled) { transform: none; }
}
/* Width and height only. Native host offsets remain in hosts/nexia.css. */
@media (max-width: 720px) {
  /* Rotating decorative orbits must not widen the document on narrow screens. */
  :root[data-nexia="true"] #sidebar { overflow-x: clip; padding: max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left)); }
  :root[data-nexia="true"] .nx-list-brand { height: 142px; }
  :root[data-nexia="true"] .nx-list-brand .nx-scene { width: 170px; height: 170px; right: -7px; top: -12px; }
  :root[data-nexia="true"] .nx-list-wordmark { font-size: 38px; }
  :root[data-nexia="true"] .list-heading { min-height: 68px; }
  :root[data-nexia="true"] .chat-head { padding: max(5px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left)); gap: 8px; }
  :root[data-nexia="true"] .chat-head #back { min-width: 44px; width: 44px; height: 44px; margin-left: -6px; }
  :root[data-nexia="true"] .chat-head .appearance-button { min-width: 44px; width: 44px; height: 44px; }
  :root[data-nexia="true"] .chat-head > .client-icon { width: 28px; height: 28px; }
  :root[data-nexia="true"] .chat-head > .status { max-width: 75px; font-size: 10px; padding: 3px 6px; }
  :root[data-nexia="true"] .timeline { padding-left: max(20px,env(safe-area-inset-left)); padding-right: max(20px,env(safe-area-inset-right)); }
  :root[data-nexia="true"] .composer { margin-left: max(10px,env(safe-area-inset-left)); margin-right: max(10px,env(safe-area-inset-right)); padding: 8px 9px 10px; border-radius: 22px; }
  /* Give the model and collapse control their own row; keep related tools together. */
  :root[data-nexia="true"] .composer-tools { gap: 6px; }
  :root[data-nexia="true"] .composer-tools > .tool-button { order: 1; flex: 1 1 auto; min-width: 0; max-width: none; }
  :root[data-nexia="true"] .composer-tools > :is(#model-button,.ds-model,.wb-side-model) { order: 0; flex: 1 0 calc(100% - 50px); max-width: none; min-width: 0; justify-content: flex-start; overflow: hidden; }
  :root[data-nexia="true"] .composer-tools > .composer-toggle { order: 0; margin-left: 0; }
  :root[data-nexia="true"] .composer-tools > :is(.context-usage,.ds-context) { flex: 0 0 44px; }
  :root[data-nexia="true"] .compose-bottom:not(.ds-actions) { grid-template-columns: 44px minmax(0,1.15fr) minmax(0,1fr) auto; }
  :root[data-nexia="true"] #model-name { overflow: hidden; text-overflow: ellipsis; }
  :root[data-nexia="true"] #model-effort { display: none; }
  :root[data-nexia="true"] .composer-tools .tool-button { padding-left: 8px; padding-right: 8px; }
  :root[data-nexia="true"] .composer-tools #permissions-button { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  :root[data-nexia="true"] .picker { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - max(24px,env(safe-area-inset-top))); margin: auto 8px max(8px,env(safe-area-inset-bottom)); border-radius: 26px; padding: 24px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
  :root[data-nexia="true"] .picker::before { content: ""; display: block; width: 34px; height: 4px; background: var(--line); border-radius: 4px; margin: -12px auto 20px; }
  :root[data-nexia="true"] .image-preview { margin: 0; border-radius: 0; }
  :root[data-nexia="true"] .accent-options { gap: 4px; }
}
@media (max-width: 380px) {
  :root[data-nexia="true"] .nx-list-wordmark { font-size: 32px; margin-left: 14px; }
  :root[data-nexia="true"] .nx-list-brand .nx-scene { width: 150px; height: 150px; top: 0; }
  :root[data-nexia="true"] .compose-bottom { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) auto; }
  :root[data-nexia="true"] .compose-actions { gap: 3px; }
  :root[data-nexia="true"] .compose-actions .primary { min-width: 44px; padding: 8px; }
  :root[data-nexia="true"] .chat-head > .client-icon { display: none; }
}
@media (max-height: 500px) {
  :root[data-nexia="true"] .nx-list-brand { height: 70px; padding-top: 0; }
  :root[data-nexia="true"] .nx-list-brand::before { inset: 6px 0 0; }
  :root[data-nexia="true"] .nx-list-brand .nx-scene { width: 85px; height: 85px; top: -6px; right: 8px; }
  :root[data-nexia="true"] .nx-list-wordmark { font-size: 26px; margin-bottom: 17px; }
  :root[data-nexia="true"] .composer { margin-bottom: max(4px,env(safe-area-inset-bottom)); padding-top: 4px; padding-bottom: 4px; }
  :root[data-nexia="true"] .composer textarea { padding-top: 6px; padding-bottom: 6px; min-height: 44px; }
  :root[data-nexia="true"] .compose-foot { display: none; }
}
/* Native chrome owns the top menu slot, independently of viewport width. */
:root[data-nexia="true"].bridge-mobile #sidebar { padding-top: 0; }
:root[data-nexia="true"].bridge-mobile .nx-list-brand { order: 1; }
:root[data-nexia="true"].bridge-mobile .list-heading { order: 0; height: 56px; min-height: 56px; padding: 0 52px 0 4px; }
:root[data-nexia="true"].bridge-mobile .chat-list-toolbar { order: 2; }
:root[data-nexia="true"].bridge-mobile .session-list-region { order: 3; }
:root[data-nexia="true"].bridge-mobile .client-navigation { order: 4; }
:root[data-nexia="true"].bridge-mobile .chat-head { height: 56px; min-height: 56px; padding: 0 64px 0 8px; }
/* Keep native form semantics, keyboard navigation, validation and existing event handlers. */
:root[data-nexia="true"] {
  --scroll-thumb: color-mix(in srgb,var(--muted) 48%,var(--surface));
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2365756b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-nexia="true"][data-theme="dark"] {
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23afc1b2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-nexia="true"] select {
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 34px 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface) var(--select-arrow) no-repeat right 12px center / 16px;
  font: inherit;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 180ms,box-shadow 180ms,background-color 180ms;
}
:root[data-nexia="true"] select:enabled:hover { border-color: var(--green); }
:root[data-nexia="true"] select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
:root[data-nexia="true"] .picker select { padding: 12px 34px 12px 13px; }
:root[data-nexia="true"] .compose-bottom select { padding: 8px 22px 8px 8px; border: 1px solid var(--line); border-radius: 11px; background-color: var(--surface); background-position: right 5px center; font-size: 14px; font-weight: 500; }
:root[data-nexia="true"] .chat-list-toolbar .list-mode select { padding: 8px 22px 8px 8px; border: 1px solid var(--line); background-color: var(--raised); background-position: right 5px center; }
:root[data-nexia="true"] select option { color: var(--text); background: var(--raised); }
:root[data-nexia="true"] select option:disabled { color: var(--muted); }

/* Native customizable pickers stay in the top layer, including inside modal dialogs.
   Older engines keep their OS picker, with explicit light/dark option colors. */
@supports (appearance: base-select) {
  :root[data-nexia="true"] select:not([multiple]):not([size]),
  :root[data-nexia="true"] select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  :root[data-nexia="true"] select:not([multiple]):not([size]) { background-image: none; padding-right: 12px; gap: 8px; align-items: center; }
  :root[data-nexia="true"] .compose-bottom select:not([multiple]):not([size]) { padding-inline: 6px; gap: 4px; }
  :root[data-nexia="true"] .compose-bottom select::picker-icon { width: 12px; height: 12px; }
  :root[data-nexia="true"] select::picker-icon { content: ""; flex: none; width: 16px; height: 16px; background: var(--muted); mask: var(--select-arrow) center / contain no-repeat; transition: rotate 180ms var(--spring); }
  :root[data-nexia="true"] select:open { border-color: var(--green); box-shadow: 0 0 0 3px var(--soft); }
  :root[data-nexia="true"] select:open::picker-icon { rotate: 180deg; }
  :root[data-nexia="true"] select::picker(select) {
    color: var(--text);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px;
    margin-block: 6px;
    min-width: anchor-size(width);
    width: max-content;
    max-width: calc(100dvw - 24px);
    max-height: min(360px,50dvh);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 40px #10271d30;
    font-size: 14px;
    line-height: 1.5;
  }
  :root[data-nexia="true"] select option {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  :root[data-nexia="true"] select option:checked { color: var(--text); background: var(--soft); font-weight: 600; }
  :root[data-nexia="true"] select option:enabled:is(:hover,:focus) { color: var(--text); background: var(--surface); outline: none; }
  :root[data-nexia="true"] select option:disabled { opacity: .5; cursor: default; }
  :root[data-nexia="true"] select option::checkmark { content: ""; order: 1; flex: none; margin-left: auto; width: 16px; height: 16px; background: var(--green); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  :root[data-nexia="true"] select optgroup { color: var(--muted); padding: 4px; }
}

:root[data-nexia="true"] input[type="range"] {
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(to right,var(--green) 0 var(--nx-range-progress,50%),var(--line) var(--nx-range-progress,50%) 100%) center / 100% 6px no-repeat;
  cursor: pointer;
}
:root[data-nexia="true"] .picker input[type="range"] { height: 44px; background: linear-gradient(to right,var(--green) 0 var(--nx-range-progress,50%),var(--line) var(--nx-range-progress,50%) 100%) center / 100% 6px no-repeat; }
:root[data-nexia="true"] input[type="range"]::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 4px; background: transparent; }
:root[data-nexia="true"] input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 4px solid var(--raised); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green),0 3px 7px #10271d25; transition: box-shadow 180ms,scale 180ms var(--spring); }
:root[data-nexia="true"] input[type="range"]:enabled:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--soft),0 0 0 1px var(--green); }
:root[data-nexia="true"] input[type="range"]:enabled:active::-webkit-slider-thumb { scale: 1.12; }
:root[data-nexia="true"] input[type="range"]::-moz-range-track { height: 6px; border: 0; border-radius: 4px; background: transparent; }
:root[data-nexia="true"] input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid var(--raised); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green),0 3px 7px #10271d25; }
:root[data-nexia="true"] .range-label output { min-width: 52px; padding: 4px 8px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }

:root[data-nexia="true"] .display-option input[type="checkbox"] { appearance: none; position: relative; flex: none; width: 42px; height: 26px; min-height: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 0; margin: 0; transition: background-color 180ms,border-color 180ms; }
:root[data-nexia="true"] .display-option input[type="checkbox"]::after { content: ""; display: block; width: 18px; height: 18px; position: absolute; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: translate 180ms var(--spring),background-color 180ms; }
:root[data-nexia="true"] .display-option input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
:root[data-nexia="true"] .display-option input[type="checkbox"]:checked::after { translate: 16px 0; background: var(--accent-ink); }

:root[data-nexia="true"], :root[data-nexia="true"] * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
@supports selector(::-webkit-scrollbar) {
  :root[data-nexia="true"], :root[data-nexia="true"] * { scrollbar-width: auto; scrollbar-color: auto; }
  :root[data-nexia="true"] ::-webkit-scrollbar { width: 10px; height: 10px; }
  :root[data-nexia="true"] ::-webkit-scrollbar-track { background: transparent; }
  :root[data-nexia="true"] ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 12px; background: var(--scroll-thumb); background-clip: padding-box; }
  :root[data-nexia="true"] ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
  :root[data-nexia="true"] ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  :root[data-nexia="true"] ::-webkit-scrollbar-corner { background: transparent; }
}
/* Disabled is a stable unavailable state, not an instruction to wait. */
:root[data-nexia="true"] :is(button,input,select,textarea):disabled,
:root[data-nexia="true"] :is(button,input,select,textarea):disabled *,
:root[data-nexia="true"] [aria-disabled="true"],
:root[data-nexia="true"] [aria-disabled="true"] * { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  :root[data-nexia="true"] select,
  :root[data-nexia="true"] select::picker-icon,
  :root[data-nexia="true"] .display-option input[type="checkbox"],
  :root[data-nexia="true"] .display-option input[type="checkbox"]::after { transition: none; }
  :root[data-nexia="true"] input[type="range"]::-webkit-slider-thumb { transition: none; }
  :root[data-nexia="true"] input[type="range"]:enabled:active::-webkit-slider-thumb { scale: 1; }
}
@media (forced-colors: active) {
  :root[data-nexia="true"] select { appearance: auto; }
  :root[data-nexia="true"] input[type="range"],
  :root[data-nexia="true"] .display-option input[type="checkbox"] { appearance: auto; }
  :root[data-nexia="true"] .display-option input[type="checkbox"]::after { display: none; }
}