/* ════════════════════════════════════════════════════════════════
   Insights — AI workspace (GPT / Claude / Gemini-style chat home)
   Empty landing state = NGI-specific greeting + centred composer.
   Thread state = conversation + docked composer.

   Design language: floating surfaces lift off the --bg0 canvas via
   shadow elevation (light) / faint bright edge (dark). No hard borders.
   ════════════════════════════════════════════════════════════════ */

.ins {
  position:    relative;        /* anchor for the mobile workspace sheet */
  flex:        1;
  min-height:  0;
  display:     flex;            /* row: side panel + main region */
  overflow:    hidden;
  background:  var(--bg0);
}

/* subtle, thin scrollbars on the insights scroll areas — the default bar
   reads loud against the clean chat surface */
.ins-land, .ins-msgs, .ins-est-main, .ins-est-aside-msgs, .ins-side {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: var(--bdr2) transparent;
}
.ins-land::-webkit-scrollbar, .ins-msgs::-webkit-scrollbar,
.ins-est-main::-webkit-scrollbar, .ins-est-aside-msgs::-webkit-scrollbar,
.ins-side::-webkit-scrollbar { width: 8px; height: 8px; }
.ins-land::-webkit-scrollbar-thumb, .ins-msgs::-webkit-scrollbar-thumb,
.ins-est-main::-webkit-scrollbar-thumb, .ins-est-aside-msgs::-webkit-scrollbar-thumb,
.ins-side::-webkit-scrollbar-thumb {
  background:        var(--bdr2);
  border:           2px solid transparent;      /* inset the thumb → looks thinner */
  border-radius:    8px;
  background-clip:   padding-box;
}
.ins-land::-webkit-scrollbar-track, .ins-msgs::-webkit-scrollbar-track,
.ins-est-main::-webkit-scrollbar-track, .ins-est-aside-msgs::-webkit-scrollbar-track,
.ins-side::-webkit-scrollbar-track { background: transparent; }

/* in-body mobile workspace menu — hidden on desktop (side panel is visible) */
.ins-mobile-bar { display: none; }
.ins-sheet-backdrop { display: none; }
/* flat / ghost — reads like a section title with a switcher, not a raised
   button. Only a faint press feedback; no card background or shadow. */
.ins-mobile-trigger {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  margin-left:   -4px;          /* optically align the icon to the edge */
  padding:       5px 8px 5px 6px;
  border:        none;
  border-radius: 9px;
  background:    transparent;
  color:         var(--t0);
  font-family:   var(--font-sans);
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .14s;
}
.ins-mobile-trigger:active { background: var(--bg2); }
.ins-mobile-ic   { width: 17px; height: 17px; color: var(--t2); }
.ins-mobile-chev { width: 14px; height: 14px; color: var(--t2); }

/* ── Workspace side panel ────────────────────────────────────────── */
.ins-side {
  flex-shrink:    0;
  width:          272px;
  display:        flex;
  flex-direction: column;
  gap:            18px;
  padding:        16px 12px;
  background:     var(--bg1);          /* white surface vs the grey main canvas */
  box-shadow:     2px 0 10px -6px rgba(13,18,38,.10);
  overflow-y:     auto;
}
body:not(.light) .ins-side {
  box-shadow:   none;
  border-right: 1px solid var(--bdr);
}

/* New chat */
.ins-newchat {
  display:       flex;
  align-items:   center;
  gap:           9px;
  width:         100%;
  padding:       10px 12px;
  border:        none;
  border-radius: 10px;
  background:    var(--bg2);
  color:         var(--t0);
  font-family:   var(--font-sans);
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background .14s, transform .12s;
}
.ins-newchat:hover  { background: var(--bg3); }
.ins-newchat:active { transform: scale(.985); }
.ins-newchat svg    { width: 16px; height: 16px; color: var(--acc); }

.ins-side-group { display: flex; flex-direction: column; gap: 2px; }
.ins-side-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--t2);
  padding:        2px 8px 6px;
}

/* feature item (Ask / Estimate price) — the mode switch */
.ins-feat {
  display:       flex;
  align-items:   center;
  gap:           10px;
  width:         100%;
  padding:       9px 11px;
  border:        none;
  border-radius: 9px;
  background:    transparent;
  color:         var(--t1);
  font-family:   var(--font-sans);
  font-size:     13px;
  font-weight:   500;
  text-align:    left;
  cursor:        pointer;
  transition:    background .14s, color .14s;
}
.ins-feat svg       { width: 17px; height: 17px; flex-shrink: 0; color: var(--t2); transition: color .14s; }
.ins-feat:hover     { background: var(--bg2); color: var(--t0); }
.ins-feat.active     { background: var(--bg2); color: var(--t0); }
.ins-feat.active svg { color: var(--acc); }

/* recent chat list (saved to localStorage, rendered by JS) */
.ins-side-recent { gap: 1px; min-height: 0; }
.ins-recent-list { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; }
.ins-recent.active { background: var(--bg2); color: var(--t0); }
.ins-recent {
  width:         100%;
  padding:       8px 11px;
  border:        none;
  border-radius: 8px;
  background:    transparent;
  color:         var(--t1);
  font-family:   var(--font-sans);
  font-size:     12.5px;
  text-align:    left;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  cursor:        pointer;
}
.ins-recent:not(:disabled):hover { background: var(--bg2); color: var(--t0); }
.ins-recent:disabled { cursor: default; opacity: .85; }

/* ── Main region (holds the centred composer / thread / estimate) ── */
.ins-main {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;        /* each child view manages its own scroll */
}

/* shared centred column for both states — sized to feel as roomy as
   GPT / Claude (their message column is ~768px; we add a bit since the
   assistant avatar indents the text ~42px) */
.ins-col {
  width:     100%;
  max-width: 820px;
  margin:    0 auto;
  padding:   0 24px;
}

/* ── Landing (empty) state ───────────────────────────────────────── */
.ins-land {
  flex:            1;
  min-height:      0;
  overflow-y:      auto;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  padding-bottom:  6vh;          /* nudge the cluster a touch above centre */
}

/* greeting */
.ins-hero {
  text-align:    center;
  margin-bottom: 30px;
}
.ins-mark {
  width:           48px;
  height:          48px;
  margin:          0 auto 18px;
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  background:      linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
  box-shadow:      0 6px 18px -4px color-mix(in srgb, var(--acc) 55%, transparent);
}
.ins-mark svg { width: 26px; height: 26px; }

.ins-greet {
  font-size:     clamp(25px, 3.6vw, 33px);
  font-weight:   600;
  letter-spacing: -0.01em;
  color:         var(--t0);
  line-height:   1.15;
}
.ins-greet em {
  font-style: normal;
  background:  linear-gradient(100deg, var(--acc) 10%, var(--acc2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ins-greet-sub {
  margin-top: 10px;
  font-size:  14px;
  color:      var(--t1);
  line-height: 1.55;
  max-width:  440px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── Composer ────────────────────────────────────────────────────── */
.ins-composer {
  width:         100%;
  background:    var(--bg1);
  border:        1px solid transparent;
  border-radius: 24px;
  padding:       6px 6px 6px 6px;
  box-shadow:    0 1px 2px rgba(13,18,38,.05),
                 0 12px 32px -10px rgba(13,18,38,.14);
  transition:    box-shadow .18s, border-color .18s;
}
/* dark mode: drop the heavy shadow, lift with a faint bright edge instead */
:root:not(.light-scope) .ins-composer { }   /* placeholder for specificity parity */
body:not(.light) .ins-composer {
  border-color: var(--bdr);
  box-shadow:   0 1px 0 rgba(255,255,255,.03) inset,
                0 14px 34px -16px rgba(0,0,0,.6);
}
.ins-composer:focus-within {
  border-color: color-mix(in srgb, var(--acc) 45%, var(--bdr));
  box-shadow:   0 1px 2px rgba(13,18,38,.05),
                0 14px 36px -10px rgba(74,158,255,.18);
}

.ins-input {
  width:       100%;
  border:      none;
  outline:     none;
  resize:      none;
  background:  transparent;
  color:       var(--t0);
  font-family: var(--font-sans);
  font-size:   15px;
  line-height: 1.5;
  padding:     12px 14px 4px;
  max-height:  220px;
  overflow-y:  auto;
}
.ins-input::placeholder { color: var(--t2); }

/* toolbar under the textarea */
.ins-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         4px 6px 2px;
}
.ins-bar-left  { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ins-bar-right { display: flex; align-items: center; gap: 8px; }

/* round ghost tool button (attach / etc.) */
.ins-tool {
  flex-shrink:     0;
  width:           34px;
  height:          34px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  border-radius:   10px;
  background:      transparent;
  color:           var(--t1);
  cursor:          pointer;
  transition:      background .14s, color .14s;
}
.ins-tool:hover { background: var(--bg2); color: var(--t0); }
.ins-tool svg   { width: 18px; height: 18px; }

/* send button */
.ins-send {
  flex-shrink:     0;
  width:           34px;
  height:          34px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  border-radius:   50%;
  background:      var(--acc);
  color:           #fff;
  cursor:          pointer;
  transition:      opacity .14s, transform .14s, background .14s;
}
.ins-send svg            { width: 18px; height: 18px; }
.ins-send:hover          { background: color-mix(in srgb, var(--acc) 88%, #000); }
.ins-send:disabled       { opacity: .32; cursor: not-allowed; }
.ins-send:disabled:hover { background: var(--acc); }

.ins-disclaimer {
  margin-top: 22px;
  text-align: center;
  font-size:  11px;
  color:      var(--t2);
}

/* ── Thread (conversation) state ─────────────────────────────────── */
/* class selectors beat [hidden]'s UA display:none, so restore it explicitly */
.ins-land[hidden], .ins-thread[hidden], .ins-est[hidden] { display: none; }

.ins-thread {
  flex:           1;
  min-height:     0;
  display:        flex;
  flex-direction: column;
}

.ins-thread-head {
  padding: 14px 0 6px;
}
.ins-thread-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--t0);
}

.ins-msgs {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  gap:            22px;
  padding:        18px 0 24px;
}

.ins-msg { display: flex; gap: 12px; }

/* assistant turn — spark avatar + full-width prose */
.ins-msg-av {
  flex-shrink:     0;
  width:           30px;
  height:          30px;
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  background:      linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
}
.ins-msg-av svg { width: 17px; height: 17px; }
.ins-msg-body {
  flex:        1;
  min-width:   0;
  color:       var(--t0);
  font-size:   14.5px;
  line-height: 1.65;
  padding-top: 4px;
}

/* assistant activity line — spinner + label ("Searching the web…" etc.).
   Shown while a tool runs, hidden while answer text streams, gone when done. */
.ins-activity {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--t2);
  padding:     2px 0 8px;
}
.ins-activity.hide { display: none; }
.ins-activity-spin {
  width:        13px;
  height:       13px;
  flex-shrink:  0;
  border:       2px solid var(--bdr2);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation:    ins-spin .7s linear infinite;
}
@keyframes ins-spin  { to { transform: rotate(360deg); } }
.ins-activity-label  { animation: ins-pulse 1.3s ease-in-out infinite; }
@keyframes ins-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ins-md strong { font-weight: 600; }

/* user turn — right-aligned soft bubble */
.ins-msg.user { justify-content: flex-end; }
.ins-msg.user .ins-msg-body {
  flex:          0 1 auto;
  max-width:     76%;
  background:    var(--bg2);
  border-radius: 16px 16px 4px 16px;
  padding:       11px 15px;
  color:         var(--t0);
  font-size:     14.5px;
  line-height:   1.55;
}
body:not(.light) .ins-msg.user .ins-msg-body { background: var(--bg2); }

/* docked composer at the bottom of a thread — full column width, aligned
   with the messages (GPT/Claude style) */
.ins-thread .ins-composer { margin: 0 0 18px; }

/* ════════════════════════════════════════════════════════════════
   Estimate price workspace — chart + analysis (main) · assistant (right)
   ════════════════════════════════════════════════════════════════ */
.ins-est { flex: 1; min-height: 0; display: flex; }

/* ── Main canvas: subject bar → KPIs → chart → analysis ── */
.ins-est-main {
  flex:       1;
  min-width:  0;
  overflow-y: auto;
  padding:    22px 26px 38px;
  display:    flex;
  flex-direction: column;
  gap:        16px;
}
.ins-est-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}
.ins-est-route {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   19px;
  font-weight: 600;
  color:       var(--t0);
}
.ins-est-route svg { width: 19px; height: 19px; color: var(--acc); }
.ins-est-asof { font-family: var(--font-mono); font-size: 11px; color: var(--t2); }

/* KPI cards */
.ins-est-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ins-kpi {
  background:    var(--bg1);
  border-radius: 12px;
  padding:       14px 16px;
  box-shadow:    0 1px 2px rgba(13,18,38,.05), 0 8px 22px -14px rgba(13,18,38,.16);
}
body:not(.light) .ins-kpi { box-shadow: none; border: 1px solid var(--bdr); }
.ins-kpi-label { font-size: 11.5px; color: var(--t2); margin-bottom: 7px; }
.ins-kpi-val   { font-size: 23px; font-weight: 600; color: var(--t0); }
.ins-kpi-unit  { font-size: 12px; font-weight: 500; color: var(--t2); margin-left: 3px; }
.ins-kpi-sub   { font-size: 11px; color: var(--t2); margin-top: 5px; }
.ins-up   { color: var(--ok); }
.ins-down { color: var(--err); }

/* generic card (chart / analysis) */
.ins-card {
  background:    var(--bg1);
  border-radius: 12px;
  padding:       16px 18px;
  box-shadow:    0 1px 2px rgba(13,18,38,.05), 0 8px 22px -14px rgba(13,18,38,.16);
}
body:not(.light) .ins-card { box-shadow: none; border: 1px solid var(--bdr); }
.ins-card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
}
.ins-card-title { font-size: 13px; font-weight: 600; color: var(--t0); }

/* Forward / History toggle pills */
.ins-chip-row { display: flex; gap: 2px; padding: 3px; background: var(--bg2); border-radius: 9px; }
.ins-tg {
  font-size:     11.5px;
  color:         var(--t1);
  padding:       4px 10px;
  border-radius: 6px;
  cursor:        pointer;
}
.ins-tg.active { background: var(--bg1); color: var(--t0); box-shadow: 0 1px 2px rgba(13,18,38,.12); }
body:not(.light) .ins-tg.active { background: var(--bg3); box-shadow: none; }

/* chart */
.ins-chart { width: 100%; height: 210px; display: block; }
.ins-grid  { stroke: var(--bdr); stroke-width: 1; stroke-dasharray: 3 4; }
.ins-xaxis {
  display:         flex;
  justify-content: space-between;
  padding:         8px 4px 0 40px;
  font-family:     var(--font-mono);
  font-size:       10px;
  color:           var(--t2);
}

/* analysis */
.ins-analysis-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.ins-analysis-list li { font-size: 13px; line-height: 1.55; color: var(--t1); }
.ins-analysis-list b  { color: var(--t0); font-weight: 600; }

/* ── Empty state — ghost preview hinting where the result lands ──
   (The .ins-kpi / .ins-card / .ins-chart styles above are the populated
   result render, shown once the assistant returns an estimate.) */
.ins-est-empty {
  margin:         auto;            /* centre in the main canvas */
  width:          100%;
  max-width:      600px;
  display:        flex;
  flex-direction: column;
  gap:            18px;
}
.ins-ghost-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; opacity: .7; }
.ins-ghost-kpi {
  border:         1px dashed var(--bdr2);
  border-radius:  12px;
  padding:        14px 16px;
  display:        flex;
  flex-direction: column;
  gap:            9px;
}
.ins-ghost-cap { font-size: 11.5px; color: var(--t2); }
.ins-ghost-num { font-size: 22px; font-weight: 600; color: var(--t2); letter-spacing: .03em; }

.ins-ghost-chart {
  border:        1px dashed var(--bdr2);
  border-radius: 12px;
  padding:       16px 18px;
  opacity:       .7;
}
.ins-ghost-chart svg { width: 100%; height: 150px; display: block; }
.ins-ghost-grid { stroke: var(--bdr); stroke-width: 1; stroke-dasharray: 3 4; }
.ins-ghost-line {
  fill:            none;
  stroke:          var(--t2);
  stroke-width:    2;
  stroke-dasharray: 5 6;
  stroke-linecap:  round;
  stroke-linejoin: round;
  opacity:         .8;
}

.ins-est-hint { text-align: center; padding-top: 2px; }
.ins-est-hint-title { font-size: 14px; font-weight: 600; color: var(--t0); margin-bottom: 5px; }
.ins-est-hint-desc {
  font-size:   12.5px;
  color:       var(--t2);
  line-height: 1.55;
  max-width:   430px;
  margin:      0 auto;
}

/* ── Right assistant rail (the agent that adjusts the view) ── */
.ins-est-aside {
  flex-shrink:    0;
  width:          330px;
  display:        flex;
  flex-direction: column;
  min-height:     0;
  background:     var(--bg1);
  box-shadow:     -2px 0 10px -6px rgba(13,18,38,.10);
}
body:not(.light) .ins-est-aside { box-shadow: none; border-left: 1px solid var(--bdr); }
.ins-est-aside-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 10px; }
.ins-est-aside-mark {
  width:           26px;
  height:          26px;
  flex-shrink:     0;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  background:      linear-gradient(135deg, var(--acc), var(--acc2));
}
.ins-est-aside-mark svg { width: 15px; height: 15px; }
.ins-est-aside-title { font-size: 13px; font-weight: 600; color: var(--t0); }

.ins-est-aside-msgs {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  padding:        6px 16px 12px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
.ins-amsg {
  font-size:     13px;
  line-height:   1.6;
  color:         var(--t0);
  background:    var(--bg2);
  border-radius: 12px;
  padding:       11px 13px;
}
.ins-amsg b { font-weight: 600; }
/* action-log line — like a VS Code agent step */
.ins-amsg-act {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     2px 4px;
  background:  transparent;
  font-size:   12px;
  color:       var(--t2);
}
.ins-amsg-act svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ok); }

/* width:auto (not the base .ins-composer 100%) so the side margins don't
   push it past the narrow rail and clip the right edge */
.ins-est-composer { width: auto; margin: 10px 14px 16px; }

/* ── Tablet / mobile: drop the side panel, main goes full width ──── */
@media (max-width: 1040px) {
  .ins-est-aside { width: 290px; }
}
@media (max-width: 880px) {
  /* stack: ghost preview (main) on top, a slim assistant composer below.
     Hide the verbose intro + header so the small screen stays uncluttered —
     the main canvas already explains where the result lands. */
  .ins-est        { flex-direction: column; }
  .ins-est-aside  {
    width:       auto;
    max-height:  none;
    border-left: none;
    border-top:  1px solid var(--bdr);
    box-shadow:  none;
  }
  .ins-est-aside-head { display: none; }
  .ins-amsg-intro     { display: none; }
  .ins-est-aside-msgs { flex: 0 1 auto; max-height: 30vh; padding-top: 12px; }
}
@media (max-width: 860px) {
  /* the side panel becomes a slide-in sheet, opened from the in-body menu */
  .ins-mobile-bar {
    display:    flex;
    flex-shrink: 0;
    padding:    10px 12px 2px;
  }
  .ins-side {
    position:   absolute;
    top: 0; left: 0; bottom: 0;
    z-index:    40;
    width:      280px;
    max-width:  82%;
    transform:  translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 10px 34px rgba(13,18,38,.20);
  }
  .ins.sheet-open .ins-side { transform: translateX(0); }
  .ins-sheet-backdrop {
    display:        block;
    position:       absolute;
    inset:          0;
    z-index:        39;
    background:     rgba(13,18,38,.34);
    opacity:        0;
    pointer-events: none;
    transition:     opacity .2s ease;
  }
  .ins.sheet-open .ins-sheet-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) {
  .ins-col       { padding: 0 16px; }
  .ins-greet-sub { font-size: 13px; }
  .ins-est-kpis  { grid-template-columns: 1fr; }
}