:root {
  color-scheme: light;
  --radius: 1.5rem;
  --background: oklch(0.97 0 0);
  --foreground: oklch(0.12 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.12 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.12 0 0);
  --primary: oklch(0.12 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.93 0 0);
  --secondary-foreground: oklch(0.16 0 0);
  --muted: oklch(0.94 0 0);
  --muted-foreground: oklch(0.46 0 0);
  --accent: oklch(0.9 0 0);
  --accent-foreground: oklch(0.12 0 0);
  --destructive: oklch(0.2 0 0);
  --destructive-foreground: oklch(1 0 0);
  --progress-track: oklch(0.66 0 0);
  --border: oklch(0.88 0 0);
  --input: oklch(0.6 0 0);
  --ring: oklch(0.32 0 0);
  --chart-1: oklch(0.22 0 0);
  --chart-2: oklch(0.32 0 0);
  --chart-3: oklch(0.42 0 0);
  --chart-4: oklch(0.52 0 0);
  --chart-5: oklch(0.62 0 0);
  --sidebar: oklch(0.93 0 0);
  --sidebar-foreground: oklch(0.12 0 0);
  --sidebar-primary: oklch(0.12 0 0);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(1 0 0);
  --sidebar-accent-foreground: oklch(0.12 0 0);
  --sidebar-border: oklch(0.88 0 0);
  --sidebar-ring: oklch(0.32 0 0);
}
.dark {
  color-scheme: dark;
  --background: oklch(0.16 0 0);
  --foreground: oklch(0.9 0 0);
  --card: oklch(0.22 0 0);
  --card-foreground: oklch(0.9 0 0);
  --popover: oklch(0.24 0 0);
  --popover-foreground: oklch(0.9 0 0);
  --primary: oklch(0.9 0 0);
  --primary-foreground: oklch(0.16 0 0);
  --secondary: oklch(0.29 0 0);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.27 0 0);
  --muted-foreground: oklch(0.76 0 0);
  --accent: oklch(0.34 0 0);
  --accent-foreground: oklch(0.94 0 0);
  --destructive: oklch(0.82 0 0);
  --destructive-foreground: oklch(0.16 0 0);
  --progress-track: oklch(0.52 0 0);
  --border: oklch(0.43 0 0);
  --input: oklch(0.58 0 0);
  --ring: oklch(0.64 0 0);
  --chart-1: oklch(0.92 0 0);
  --chart-2: oklch(0.84 0 0);
  --chart-3: oklch(0.76 0 0);
  --chart-4: oklch(0.68 0 0);
  --chart-5: oklch(0.6 0 0);
  --sidebar: oklch(0.2 0 0);
  --sidebar-foreground: oklch(0.9 0 0);
  --sidebar-primary: oklch(0.9 0 0);
  --sidebar-primary-foreground: oklch(0.16 0 0);
  --sidebar-accent: oklch(0.32 0 0);
  --sidebar-accent-foreground: oklch(0.94 0 0);
  --sidebar-border: oklch(0.38 0 0);
  --sidebar-ring: oklch(0.64 0 0);
}
/* WHOX portal theme. Tokens above are copied directly from portal globals.css. */
@font-face {
  font-family: "WHOX Geist Mono";
  src: url("./geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html {
  --app-bg: var(--background) !important;
  --app-fg: var(--foreground) !important;
  --app-fg-muted: var(--muted-foreground) !important;
  --app-fg-subtle: var(--muted-foreground) !important;
  --app-border: var(--border) !important;
  --app-divider: var(--border) !important;
  --app-hover: var(--muted) !important;
  --app-active: var(--accent) !important;
  --app-ui-font: "WHOX Geist Mono", ui-monospace, monospace !important;
  --font-sans: "WHOX Geist Mono", ui-monospace, monospace !important;
  --font-mono: "WHOX Geist Mono", ui-monospace, monospace !important;
  --text-xs: .875rem;
  --text-xs--line-height: 1.428571;
  --text-sm: .875rem;
  --text-sm--line-height: 1.428571;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
}
html:not(.dark) { color-scheme: light; }
html.dark { color-scheme: dark; }
body, input, textarea, select, button { font-family: var(--app-ui-font); }
body { font-size: .875rem; line-height: 1.5; }
.sidebar {
  background: var(--sidebar) !important;
  color: var(--sidebar-foreground) !important;
  border-color: var(--sidebar-border) !important;
}
.sidebar button { font-size: .875rem; }
.sidebar button[class~="h-7"], .sidebar button[class~="h-8"] { min-height: 2.25rem; }
.sidebar [class~="w-7"] { min-width: 2.25rem; }
.sidebar svg { min-width: 1rem; min-height: 1rem; }
@media (min-width: 768px) {
  .app-theme.h-screen > .flex.flex-col {
    margin: .5rem .5rem .5rem 0;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    background: var(--background);
  }
}
.app-surface { background: var(--card) !important; color: var(--card-foreground); }
.app-subtle-surface { background: var(--muted) !important; }
[role="dialog"], [role="menu"], .tippy-box[data-theme~="cptr"] {
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  border-color: var(--border) !important;
}
button[class~="h-7"] { min-height: 2.25rem; }
button[class~="w-7"] { min-width: 2.25rem; }
/* Compact tab pills leave breathing room inside the 36px tab row. */
.group-tabs-row button[class~="h-7"],
.group-tabs-row + div button[class~="h-7"] { height: 1.75rem; min-height: 1.75rem; }
button[class~="text-xs"], input, textarea, select { font-size: .875rem; }
[class~="text-[0.625rem]"], [class~="text-[0.6875rem]"],
.ws-chat-show-more { font-size: .75rem !important; line-height: 1.5; }
input:not([type="checkbox"]):not([type="range"]):not([type="radio"]),
textarea, select {
  border-color: var(--input);
  accent-color: var(--primary);
}
::placeholder { color: var(--muted-foreground); opacity: 1; }
:where(button, a, input, textarea, select, [contenteditable]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* Text fields use their own field styling rather than the button focus outline. */
:where(input, textarea, [contenteditable]).outline-none:focus-visible {
  outline: none;
  outline-offset: 0;
}
.app-theme :is(input, textarea)[class~="border-none"]:focus-visible {
  border-radius: 6px;
  background-color: color-mix(in oklch, var(--foreground) 4%, transparent);
  box-shadow: none;
}
.chat-prosemirror { font-size: 1rem; line-height: 1.5; }
.cm-editor { font-size: .875rem; }

/* Portal shell and native Computer navigation. */
.app-theme.h-screen { background: var(--sidebar) !important; }
#main-col { background: var(--background); }
.whox-icon-button { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; flex-shrink:0; border:1px solid var(--border); border-radius:10px; color:var(--foreground); background:transparent; cursor:pointer; }
.whox-icon-button:hover { background:var(--accent); }
.whox-mobile-menu { display:none; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; border:0; border-radius:8px; background:transparent; color:var(--foreground); cursor:pointer; }
.whox-mobile-menu:hover { background:var(--accent); }
.whox-brand { min-height:72px; display:flex; align-items:center; gap:8px; padding:12px 16px; }
.whox-brand-mark { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; color:var(--primary-foreground); background:var(--primary); border-radius:10px; cursor:pointer; }
.whox-brand-label { display:flex; flex:1; flex-direction:column; font-size:12px; line-height:16px; text-decoration:none; }
.whox-brand .whox-icon-button { border:0; width:32px; height:32px; }
.whox-nav { padding:0 16px 12px; }
.whox-nav-label { font-size:12px; color:var(--muted-foreground); margin:12px 8px 8px; }
.whox-nav-row { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:8px; border-radius:8px; font-size:14px; line-height:20px; color:var(--sidebar-foreground); text-decoration:none; text-align:left; cursor:pointer; }
.whox-nav-row span { flex:1; }
.whox-nav-row:hover { background:var(--sidebar-accent); }
.whox-nav-row.whox-active { font-weight:600; }
.whox-nav-row.whox-active span { text-decoration:underline; text-underline-offset:4px; }
.whox-sidebar-bottom { padding:12px 16px; }
.whox-account { padding:4px 16px 12px; }
.whox-dashboard { height:100%; overflow:auto; padding:16px; }
.whox-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.whox-card { min-width:0; padding:24px; background:var(--card); color:var(--card-foreground); border:1px solid var(--border); border-radius:16px; }
.whox-card h2 { font-size:16px; line-height:24px; font-weight:600; margin:0; }
.whox-card p { color:var(--muted-foreground); font-size:14px; line-height:20px; margin:4px 0 0; }
.whox-metric>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.whox-metric h2 { font-size:14px; }
.whox-metric>strong { display:block; margin-top:28px; font-size:24px; line-height:32px; }
.whox-metric p { font-size:12px; }
.whox-dashboard-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:24px; }
.whox-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.whox-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 14px; color:var(--primary-foreground); background:var(--primary); font-size:14px; line-height:20px; border-radius:10px; cursor:pointer; }
.whox-action:hover { opacity:.85; }
.whox-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; margin-top:24px; padding:24px; border:1px dashed var(--border); border-radius:12px; text-align:center; }
.whox-empty h3 { font-size:14px; font-weight:500; }
.whox-empty p { margin:0; }
.whox-records { display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.whox-record { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid var(--border); border-radius:12px; text-align:left; color:var(--foreground); cursor:pointer; }
.whox-record:hover { background:var(--muted); }
.whox-record>span { flex:1; min-width:0; }
.whox-record strong { display:block; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.whox-record small { display:block; font-size:12px; color:var(--muted-foreground); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.whox-record svg { flex-shrink:0; }
@media(max-width:1023px) { .whox-dashboard-grid { grid-template-columns:1fr; } }
@media(max-width:767px) {
 .whox-mobile-menu { display:inline-flex; }
 .whox-metrics { grid-template-columns:1fr; gap:12px; }
 .whox-card { padding:20px; }
 .whox-brand { min-height:72px !important; }
}

/* Sidebar belongs to the surrounding canvas, not a separate bordered panel. */
.sidebar, .dark .sidebar {
 border:0 !important;
 background:var(--sidebar) !important;
 box-shadow:none !important;
}
.whox-nav-row, .whox-icon-button, .whox-action, .whox-record, .whox-brand-mark {
 transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,opacity 160ms ease;
}
@media(prefers-reduced-motion:reduce) {
 *, *::before, *::after {
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  transition-delay:0s !important;
  scroll-behavior:auto !important;
 }
}

/* Keep the same sidebar mounted while the portal-style icon rail contracts. */
.sidebar {
 position:relative; display:flex; flex-direction:column; flex-shrink:0;
 width:256px; min-width:0; height:100%; overflow:hidden;
 padding-top:env(safe-area-inset-top,0);
 transition:width 200ms linear;
}
.sidebar.whox-sidebar-collapsed { width:64px; }
.whox-brand { flex-shrink:0; overflow:hidden; }
.whox-brand-mark { position:relative; border:0; }
.whox-brand-logo, .whox-brand-toggle { transition:opacity 200ms,transform 200ms; }
.whox-brand-toggle { position:absolute; display:flex; opacity:0; transform:scale(.75); }
.whox-brand-mark:hover .whox-brand-logo,
.whox-brand-mark:focus-visible .whox-brand-logo { opacity:0; transform:scale(.75); }
.whox-brand-mark:hover .whox-brand-toggle,
.whox-brand-mark:focus-visible .whox-brand-toggle { opacity:1; transform:scale(1); }
.whox-brand-label { white-space:nowrap; min-width:0; }
.whox-nav { flex-shrink:0; }
.whox-nav-label { height:32px; margin:0 8px 8px; display:flex; align-items:center; white-space:nowrap; transition:margin 200ms linear,opacity 200ms linear; }
.whox-nav-row { overflow:hidden; white-space:nowrap; }
.whox-nav-row svg { flex-shrink:0; width:16px; height:16px; }
.whox-sidebar-workspaces { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.whox-sidebar-bottom { flex-shrink:0; }
.whox-sidebar-collapsed .whox-brand-label { display:none; }
.whox-sidebar-collapsed .whox-nav { padding-top:12px; }
.whox-sidebar-collapsed .whox-nav-label { margin-top:-40px; opacity:0; visibility:hidden; }
.whox-sidebar-collapsed .whox-nav-row { width:32px; height:32px; min-height:32px; margin-bottom:4px; }
.whox-sidebar-collapsed .whox-nav-row span,
.whox-sidebar-collapsed .whox-nav-row svg:not(:first-child),
.whox-sidebar-collapsed .whox-sidebar-workspaces > *,
.whox-sidebar-collapsed .whox-account button > span { display:none; }
.whox-sidebar-collapsed .whox-account button { padding:0; width:32px; height:40px; }
.whox-sidebar-overlay { display:none; }
@media(max-width:767px) {
 .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:50;
  width:min(288px,100vw); height:100dvh; transform:translateX(-100%); visibility:hidden;
  transition:transform 300ms ease-in-out,visibility 0s 300ms;
 }
 .sidebar.whox-mobile-open { transform:translateX(0); visibility:visible; transition:transform 500ms ease-in-out; }
 .whox-sidebar-overlay { display:block; position:fixed; inset:0; z-index:40; background:#0008;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity 300ms ease-in-out,visibility 0s 300ms;
 }
 .whox-sidebar-overlay.whox-overlay-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 500ms ease-in-out; }
}

.whox-sidebar-collapsed .whox-nav-row.whox-active { background:var(--sidebar-accent); }