/* OCAP Workspace shell — chrome only. Tokens mirror the CRM (oc-crm/web) so
   the workspace and its apps feel like one product. */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 12%;
  --card: 0 0% 100%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 152 55% 94%;
  --accent-foreground: 160 84% 22%;
  --primary: 160 84% 30%;
  --primary-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --ok: 152 60% 42%;
  --down: 0 72% 50%;
  --radius: 0.5rem;
}
html.dark {
  --background: 0 0% 7%;
  --foreground: 0 0% 83%;
  --card: 0 0% 10%;
  --muted: 0 0% 14%;
  --muted-foreground: 0 0% 56%;
  --accent: 0 0% 17%;
  --accent-foreground: 0 0% 92%;
  --primary: 152 76% 67%;
  --primary-foreground: 0 0% 7%;
  --border: 0 0% 18%;
  --ok: 152 60% 55%;
  --down: 0 70% 60%;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Left rail ─────────────────────────────────────────────────────────── */
.rail {
  display: flex;
  flex-direction: column;
  width: 224px;
  flex-shrink: 0;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
  padding: 6px;
  transition: width 0.16s ease;
}
.ws-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 2px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ws-header:hover { background: hsl(var(--accent) / 0.6); }
.ws-chevron { width: 15px; height: 15px; margin-left: auto; color: hsl(var(--muted-foreground)); }
.ws-logo {
  display: grid;
  place-items: center;
  height: 28px;
  width: 28px;
}
/* Oakvale leaf at full size (no ring), tinted to the theme's foreground via CSS
   mask — dark leaf in light mode, light leaf in dark mode. */
.ws-leaf {
  height: 20px;
  width: 20px;
  background: hsl(var(--foreground));
  -webkit-mask: url(/oakvale-leaf.png) center / contain no-repeat;
  mask: url(/oakvale-leaf.png) center / contain no-repeat;
}
.ws-name { font-weight: 600; }

/* ── Collapsed rail (click the header to toggle) ───────────────────────── */
body.collapsed .rail { width: 56px; }
body.collapsed .ws-name,
body.collapsed .ws-chevron,
body.collapsed .nav-item .label,
body.collapsed .rail-section-label,
body.collapsed .subnav,
body.collapsed .dot,
body.collapsed #theme-toggle .label { display: none; }
body.collapsed .ws-header,
body.collapsed .nav-item,
body.collapsed #theme-toggle { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.rail-section-label {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: hsl(var(--accent) / 0.6); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-weight: 500; }
.nav-item .icon { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item.active .icon { color: hsl(var(--primary)); }
.nav-item .label { flex: 1; }
.nav-item.soon { opacity: 0.55; cursor: default; }
.nav-item.soon:hover { background: transparent; color: hsl(var(--muted-foreground)); }
.soon-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 1px 6px; }
body.collapsed .soon-tag { display: none; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: hsl(var(--muted-foreground) / 0.5); }
.dot.ok { background: hsl(var(--ok)); }
.dot.down { background: hsl(var(--down)); }
/* active app's own sections, nested under it — no connector line; the active
   row gets a thin brand bar + a faint tint (not a heavy box), with roomier
   rows so it breathes. */
.subnav { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 8px; }
.sub-item {
  position: relative;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px 9px 24px; border: 0; border-radius: var(--radius); background: transparent;
  color: hsl(var(--muted-foreground)); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.sub-item:hover { background: hsl(var(--accent) / 0.45); color: hsl(var(--foreground)); }
.sub-item.active { background: hsl(var(--accent) / 0.5); color: hsl(var(--foreground)); font-weight: 500; }
/* the brand accent bar marking the active section */
.sub-item.active::before {
  content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 999px; background: hsl(var(--primary));
}
.sub-item .icon { width: 15px; height: 15px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
.sub-item:hover .icon { color: hsl(var(--foreground)); }
.sub-item.active .icon { color: hsl(var(--primary)); }
.sub-accent {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px;
  padding: 9px 10px 9px 24px; border: 0; border-radius: var(--radius);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
}
.sub-accent:hover { background: hsl(var(--primary) / 0.9); }
.sub-accent .icon { width: 15px; height: 15px; flex-shrink: 0; }

.rail-spacer { flex: 1; }
.rail-foot { border-top: 1px solid hsl(var(--border)); padding-top: 4px; }

/* ── Content ───────────────────────────────────────────────────────────── */
.content { position: relative; flex: 1; min-width: 0; }
.view, .pane { position: absolute; inset: 0; display: none; }
.view.active, .pane.active { display: block; }

/* Home — a visual guide to the workspace (full-width tool sections) */
#view-home { overflow-y: auto; }
.home { max-width: 1040px; margin: 0 auto; padding: 56px 32px 56px; }
.home-title { font-size: 32px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; }
.card-icon { display: grid; place-items: center; height: 34px; width: 34px; border-radius: var(--radius); background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); flex-shrink: 0; }
.card-icon .icon { width: 18px; height: 18px; }

/* prominent help callout */
.home-help {
  display: flex; align-items: center; gap: 12px; margin: 0 0 34px;
  padding: 13px 16px; border: 1px solid hsl(var(--primary) / 0.28);
  border-radius: 10px; background: hsl(var(--accent) / 0.5);
  font-size: 15px; line-height: 1.5; color: hsl(var(--foreground));
}
.home-help strong { font-weight: 600; }
.hh-ic { display: grid; place-items: center; height: 30px; width: 30px; flex-shrink: 0; border-radius: 8px; background: hsl(var(--primary) / 0.14); color: hsl(var(--primary)); }
.hh-ic svg { width: 17px; height: 17px; }

/* tool section (full width, stacked) */
.tool { margin: 0 0 40px; }
.tool-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.tool-headtext { min-width: 0; }
.tool-name { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.tool-tag { margin: 2px 0 0; font-size: 14.5px; color: hsl(var(--muted-foreground)); }
.tool-open {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid hsl(var(--primary) / 0.3); border-radius: var(--radius);
  background: hsl(var(--primary) / 0.08); color: hsl(var(--primary));
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.tool-open:hover { background: hsl(var(--primary) / 0.16); border-color: hsl(var(--primary) / 0.5); }
.tool-open svg { width: 14px; height: 14px; transition: transform .14s ease; }
.tool-open:hover svg { transform: translateX(3px); }

/* feature rows within a tool — one per row, visual on the left, text on the right */
.feat-grid { display: flex; flex-direction: column; gap: 14px; }
.feat {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 24px; align-content: center;
  padding: 18px 20px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card));
}
.feat-visual {
  grid-column: 1; grid-row: 1 / 3; align-self: center;
  width: 100%; height: 134px; border-radius: 8px; border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5); display: grid; place-items: center; padding: 12px; overflow: hidden;
}
.feat-name { grid-column: 2; grid-row: 1; align-self: end; font-weight: 600; font-size: 16.5px; }
.feat-desc { grid-column: 2; grid-row: 2; align-self: start; margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); max-width: 62ch; }
.feat-desc strong { color: hsl(var(--foreground)); font-weight: 600; }
@media (max-width: 680px) {
  .feat { grid-template-columns: 1fr; row-gap: 12px; }
  .feat-visual { grid-row: auto; grid-column: 1; }
  .feat-name, .feat-desc { grid-column: 1; }
}

/* ── feature mockups (tiny faux UI) ─────────────────────────────────────── */
.mk-l { display: block; height: 6px; border-radius: 3px; background: hsl(var(--muted-foreground) / 0.32); margin: 4px 0; }
.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}

/* CRM industry pills — mirror the real facet badges (blue Financial, green
   Gaming, purple Gambling). */
.mk-pill { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 500; padding: 2.5px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.25; }
.mk-pill.blue   { background: hsl(214 90% 56% / 0.15); color: hsl(214 80% 47%); }
.mk-pill.green  { background: hsl(152 60% 45% / 0.18); color: hsl(152 55% 34%); }
.mk-pill.purple { background: hsl(266 80% 62% / 0.15); color: hsl(266 58% 56%); }
html.dark .mk-pill.blue   { color: hsl(214 90% 74%); }
html.dark .mk-pill.green  { color: hsl(152 65% 62%); }
html.dark .mk-pill.purple { color: hsl(266 85% 78%); }
.mk-ic { width: 13px; height: 13px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }

/* capture: an extracted CRM record (name, industry pill, contact, timeline) */
.mk-rec { width: 100%; padding: 11px; border-radius: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.mk-rec-n { font-size: 12.5px; font-weight: 600; color: hsl(var(--foreground)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rec-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: hsl(var(--foreground)); max-width: 100%; }
.mk-rec-row > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rec-row:last-child { color: hsl(var(--muted-foreground)); }
.mk-av { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--primary) / 0.16); color: hsl(var(--primary)); font-size: 8.5px; font-weight: 600; flex-shrink: 0; }

/* import: rows become real CRM records (name + industry pill) + outcome chips */
.mk-import { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mk-grid { border: 1px solid hsl(var(--border)); border-radius: 7px; overflow: hidden; background: hsl(var(--card)); }
.mk-grow { display: flex; align-items: center; gap: 8px; padding: 6px 9px; }
.mk-grow + .mk-grow { border-top: 1px solid hsl(var(--border)); }
.mk-gname { font-size: 11px; font-weight: 500; color: hsl(var(--foreground)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-grow .mk-pill { flex-shrink: 0; font-size: 9.5px; padding: 2.5px 9px; }
.mk-import-out { display: flex; gap: 7px; justify-content: center; }
.mk-ok, .mk-rev { font-size: 9.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.mk-ok { background: hsl(var(--ok) / 0.16); color: hsl(var(--ok)); }
.mk-rev { background: hsl(38 92% 50% / 0.16); color: hsl(38 88% 42%); }
html.dark .mk-rev { color: hsl(38 92% 62%); }

/* agent: a short chat exchange — just the bubbles */
.mk-chat { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mk-bub { max-width: 90%; padding: 6px 10px; border-radius: 11px; font-size: 11px; line-height: 1.35; }
.mk-bub.user { align-self: flex-end; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-bottom-right-radius: 4px; }
.mk-bub.asst { align-self: flex-start; background: hsl(var(--muted)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-bottom-left-radius: 4px; }
.mk-bub.asst b { display: block; font-weight: 600; margin-bottom: 1px; }

/* review: decision card — mirror the real radio option rows + Model's plan */
.mk-card { width: 100%; padding: 11px; border-radius: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.mk-card-t { display: block; font-size: 11px; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 8px; }
.mk-orow { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid hsl(var(--border)); border-radius: 7px; font-size: 10.5px; color: hsl(var(--foreground)); }
.mk-orow + .mk-orow { margin-top: 5px; }
.mk-orow.sel { border-color: hsl(var(--primary) / 0.55); box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.45); }
.mk-radio { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid hsl(var(--muted-foreground) / 0.5); flex-shrink: 0; }
.mk-radio.on { border-color: hsl(var(--primary)); background: radial-gradient(circle, hsl(var(--primary)) 0 38%, transparent 44%); }
.mk-olabel { white-space: nowrap; }
.mk-mp { margin-left: auto; font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); flex-shrink: 0; }

/* deep review: page + scan line */
.mk-doc { position: relative; }
.mk-page { width: 80px; padding: 9px; border-radius: 6px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.mk-fig { height: 22px; border-radius: 3px; background: hsl(var(--primary) / 0.18); margin: 5px 0; }
.mk-scan { position: absolute; left: -7px; right: -7px; top: 52%; height: 2px; border-radius: 2px; background: hsl(var(--primary)); }
/* deep review: finding flag */
.mk-find { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border-radius: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--down) / 0.4); }
.mk-flag { display: grid; place-items: center; height: 24px; width: 24px; flex-shrink: 0; border-radius: 6px; background: hsl(var(--down) / 0.14); color: hsl(var(--down)); }
.mk-flag svg { width: 14px; height: 14px; }
.mk-find-t { font-size: 11.5px; color: hsl(var(--foreground)); }

/* coming soon strip */
.tool-soon { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px dashed hsl(var(--border)); border-radius: 12px; opacity: 0.7; }
.ts-text { display: flex; flex-direction: column; min-width: 0; }
.ts-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ts-desc { font-size: 14px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

/* App panes (iframes) */
.pane iframe { width: 100%; height: 100%; border: 0; display: block; }
.pane-fallback {
  position: absolute; inset: 0; display: none; place-items: center;
  background: hsl(var(--background));
}
.pane-fallback.show { display: grid; }
.fallback-box { text-align: center; color: hsl(var(--muted-foreground)); }
.fallback-box h2 { color: hsl(var(--foreground)); font-weight: 600; margin: 0 0 6px; }
.fallback-box > div:first-of-type { max-width: 360px; margin: 0 auto; }
.fallback-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.signin, .retry {
  padding: 8px 16px; border-radius: var(--radius); font: inherit; font-weight: 500; cursor: pointer;
}
.signin { border: 0; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.retry { border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--foreground)); }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: hsl(var(--muted-foreground)); }
.loading.hide { display: none; }

/* ── Signed-in user (rail foot) ───────────────────────────────────────── */
.user-account-wrap { position: relative; }
.user-account { width: 100%; cursor: pointer; }
.user-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--primary) / 0.16); color: hsl(var(--primary));
  font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em;
}
.user-account .label {
  flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-caret { width: 14px; height: 14px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
body.collapsed .user-caret { display: none; }

/* Account popover — opens upward from the rail foot. */
.user-pop {
  position: absolute; bottom: calc(100% + 6px); left: 6px; min-width: 200px; z-index: 70;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border));
  border-radius: 10px; box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
  padding: 11px 13px;
}
.user-pop-name { font-weight: 600; font-size: 13px; color: hsl(var(--foreground)); }
.user-pop-email { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; word-break: break-all; }
.user-pop-signout {
  display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid hsl(var(--border));
  font-size: 12px; color: hsl(var(--muted-foreground)); text-decoration: none;
}
.user-pop-signout:hover { color: hsl(var(--foreground)); }