/* Cubbly Compass — brand tokens + two-pane shell. Light conversation rail,
   teal accents only, warm canvas. Reuses the existing --cb-* palette. */
:root {
  --cb-teal: #437e9c;
  --cb-teal-dark: #356781;
  --cb-teal-deep: #1f4d68;
  --cb-bg: #fdfcf8;
  --cb-surface: #ffffff;
  --cb-text: #384653;
  --cb-text-muted: #6b7886;
  --cb-heading: #1f2a33;
  --cb-border: #e6eaee;
  --cb-soft-blue: #eaf2f7;
  --cb-success: #00bb7f;
  --cb-warning: #f99c00;
  --cb-destructive: #de3b3d;
  --cb-radius: 0.875rem;
  --cb-font-head: 'Chiron GoRound TC', 'Inter', system-ui, sans-serif;
  --cb-font-body: 'Inter', system-ui, sans-serif;
  /* themeable surfaces — overridden per [data-theme] below */
  --cb-rail-bg: var(--cb-surface);
  --cb-rail-fg: var(--cb-text);
  --cb-rail-border: var(--cb-border);
  --cb-msg-ai-bg: var(--cb-soft-blue);
  --cb-msg-ai-fg: var(--cb-text);
  --cb-msg-user-bg: var(--cb-teal);
  --cb-msg-user-fg: #ffffff;
  --cb-input-bg: #ffffff;
  --cb-card-bg: var(--cb-surface);
}

/* Theme: Teal — teal rail (white logo), light readable canvas, teal-tinted cards */
[data-theme="teal"] {
  --cb-rail-bg: var(--cb-teal);
  --cb-rail-fg: #eff6fb;
  --cb-rail-border: var(--cb-teal-dark);
  --cb-msg-ai-bg: rgba(255,255,255,.15);
  --cb-msg-ai-fg: #ffffff;
  --cb-msg-user-bg: var(--cb-teal-deep);
  --cb-msg-user-fg: #ffffff;
  --cb-input-bg: rgba(255,255,255,.94);
  --cb-card-bg: #f3f9fc;
  --cb-border: #d4e6ef;
}

/* Theme: Dark */
[data-theme="dark"] {
  --cb-bg: #0f1f28;
  --cb-surface: #172a34;
  --cb-text: #d7dee3;
  --cb-text-muted: #9aa7b0;
  --cb-heading: #ffffff;
  --cb-border: #263a45;
  --cb-soft-blue: #1d3540;
  --cb-rail-bg: #0b1920;
  --cb-rail-fg: #d7dee3;
  --cb-rail-border: #263a45;
  --cb-msg-ai-bg: #1d3540;
  --cb-msg-ai-fg: #d7dee3;
  --cb-msg-user-bg: var(--cb-teal);
  --cb-msg-user-fg: #ffffff;
  --cb-input-bg: #172a34;
  --cb-card-bg: #172a34;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--cb-font-body); color: var(--cb-text); background: var(--cb-bg); transition: background .2s, color .2s; }
h1, h2, h3 { font-family: var(--cb-font-head); color: var(--cb-heading); line-height: 1.15; }
a { color: var(--cb-teal); }

.cmp-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: inherit; font-weight: 600; border: 0; border-radius: var(--cb-radius);
  padding: .75rem 1.4rem; background: var(--cb-teal); color: #fff; transition: background .15s, transform .15s;
}
.cmp-btn:hover { background: var(--cb-teal-dark); transform: translateY(-1px); }
.cmp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.cmp-btn--ghost { background: transparent; color: var(--cb-teal); border: 1px solid var(--cb-border); }

/* ---- Landing ---- */
.cmp-landing { max-width: 880px; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.cmp-landing h1 { font-size: 2.75rem; margin: 0 0 1rem; }
.cmp-landing p.sub { font-size: 1.25rem; color: var(--cb-text-muted); margin: 0 auto 2rem; max-width: 620px; }
.cmp-landing .note { color: var(--cb-text-muted); font-size: .9rem; margin-top: .75rem; }
.cmp-brand { font-family: var(--cb-font-head); font-weight: 700; color: var(--cb-teal-deep); font-size: 1.25rem; }
.cmp-logo { height: 30px; width: auto; vertical-align: middle; }
.cmp-logo--lg { height: 64px; margin-bottom: .4rem; }
.cmp-logo__sub { font-family: var(--cb-font-head); font-weight: 700; color: var(--cb-teal-deep); font-size: 1.05rem; margin-left: .4rem; vertical-align: middle; }

/* ---- Two-pane shell ---- */
.cmp-shell { display: grid; grid-template-columns: 340px 1fr; min-height: 100vh; }
.cmp-rail {
  display: flex; flex-direction: column; background: var(--cb-rail-bg); color: var(--cb-rail-fg);
  border-right: 1px solid var(--cb-rail-border); min-height: 100vh; transition: background .2s, color .2s;
}
.cmp-rail__head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--cb-rail-border); }
.cmp-thread { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.cmp-msg { max-width: 92%; padding: .7rem .9rem; border-radius: var(--cb-radius); font-size: .95rem; line-height: 1.45; }
.cmp-msg--ai { background: var(--cb-msg-ai-bg); color: var(--cb-msg-ai-fg); align-self: flex-start; }
.cmp-msg--ai .who { color: var(--cb-teal-deep); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; display:block; margin-bottom:.25rem; }
[data-theme="teal"] .cmp-msg--ai .who, [data-theme="dark"] .cmp-msg--ai .who { color: inherit; opacity: .85; }
.cmp-msg--user { background: var(--cb-msg-user-bg); color: var(--cb-msg-user-fg); align-self: flex-end; }
.cmp-rail__input { border-top: 1px solid var(--cb-rail-border); padding: .85rem; display: flex; gap: .5rem; }
.cmp-rail__input textarea { flex: 1; resize: none; border: 1px solid var(--cb-border); border-radius: .6rem; padding: .6rem .7rem; font: inherit; background: var(--cb-input-bg); color: var(--cb-text); }
.cmp-rail__input textarea:focus { outline: 2px solid var(--cb-teal); border-color: var(--cb-teal); }

/* theme-aware logo: color on light, white on teal/dark */
.cmp-logo--white { display: none; }
[data-theme="teal"] .cmp-logo--color, [data-theme="dark"] .cmp-logo--color { display: none; }
[data-theme="teal"] .cmp-logo--white, [data-theme="dark"] .cmp-logo--white { display: inline; }
[data-theme="teal"] .cmp-logo__sub, [data-theme="dark"] .cmp-logo__sub { color: var(--cb-rail-fg); }

/* theme picker, upper-right of the canvas */
.cmp-theme { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--cb-text-muted); }
.cmp-theme select { font: inherit; padding: .3rem .5rem; border: 1px solid var(--cb-border); border-radius: .5rem; background: var(--cb-card-bg); color: var(--cb-text); cursor: pointer; }

.cmp-canvas { position: relative; padding: 2rem clamp(1rem, 4vw, 3rem); overflow-y: auto; max-height: 100vh; background: var(--cb-bg); transition: background .2s; }
.cmp-canvas__inner { max-width: 760px; margin: 0 auto; }
.cmp-cta-row { margin-top: 1.75rem; display: flex; justify-content: flex-end; }

/* cards / sections in the canvas */
.cmp-card { background: var(--cb-card-bg); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: 1.25rem 1.4rem; margin-bottom: 1rem; }
.cmp-card h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.cmp-textarea { width: 100%; min-height: 220px; border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: 1rem; font: inherit; }
.cmp-field { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .85rem; }
.cmp-field input { flex: 1; min-width: 140px; border: 1px solid var(--cb-border); border-radius: .6rem; padding: .55rem .7rem; font: inherit; }
.cmp-tag { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.cmp-tag--opp { background: var(--cb-soft-blue); color: var(--cb-teal-deep); }
.cmp-tag--risk { background: #fdecec; color: var(--cb-destructive); }
.cmp-list { margin: .3rem 0 0; padding-left: 1.1rem; }
.cmp-list li { margin: .2rem 0; }
.cmp-confidence { font-size: 2rem; font-weight: 700; color: var(--cb-teal-deep); font-family: var(--cb-font-head); }
.cmp-muted { color: var(--cb-text-muted); }
.cmp-choice { display: inline-block; margin: .25rem .35rem .25rem 0; padding: .5rem .9rem; border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; background: var(--cb-surface); font: inherit; }
.cmp-choice.is-sel { background: var(--cb-teal); color: #fff; border-color: var(--cb-teal); }
.cmp-loading { color: var(--cb-text-muted); font-style: italic; }
.cmp-error { color: var(--cb-destructive); margin-top: .75rem; }
[hidden] { display: none !important; }

@media (max-width: 820px) {
  .cmp-shell { grid-template-columns: 1fr; }
  .cmp-rail { min-height: auto; border-right: 0; border-bottom: 1px solid var(--cb-border); }
  .cmp-thread { max-height: 38vh; }
  .cmp-canvas { max-height: none; }
}