/* Scarton Farm — garden simulator.
   Palette: dataviz reference instance. Categorical hues carry group identity
   only when a text label sits beside them; the plan view encodes *status*,
   which always ships with an icon + word. */

:root {
  color-scheme: light;

  --surface-0: #f4f3f0;   /* page */
  --surface-1: #fcfcfb;   /* panel / chart surface */
  --surface-2: #eceae5;   /* wells, tracks */
  --border:    #dcd9d2;
  --border-strong: #bfbbb1;

  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #7d7b74;

  /* categorical — rotation groups, always beside their name */
  --g-fruit:     #2a78d6;
  --g-leaf:      #eb6834;
  --g-root:      #1baf7a;
  --g-legume:    #eda100;
  --g-perennial: #e87ba4;

  /* the map's three all-pairs-validated hues */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;

  /* status — fixed, never themed */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #111110;
    --surface-1: #1a1a19;
    --surface-2: #262624;
    --border:    #35352f;
    --border-strong: #4d4d45;

    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #93918a;

    --g-fruit:     #3987e5;
    --g-leaf:      #d95926;
    --g-root:      #199e70;
    --g-legume:    #c98500;
    --g-perennial: #d55181;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #111110;
  --surface-1: #1a1a19;
  --surface-2: #262624;
  --border:    #35352f;
  --border-strong: #4d4d45;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #93918a;
  --g-fruit: #3987e5; --g-leaf: #d95926; --g-root: #199e70;
  --g-legume: #c98500; --g-perennial: #d55181;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 17px; }
h2 { font-size: 14px; }
p  { margin: 0; }
code { font-family: var(--mono); font-size: .92em; background: var(--surface-2);
       padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand .mark { font-size: 24px; line-height: 1; }
.sub { font-size: 12px; color: var(--text-muted); }

.tabs { display: flex; gap: 2px; background: var(--surface-2);
        padding: 3px; border-radius: 8px;
        /* Seven tabs don't fit a phone — let the strip scroll rather than
           push the whole page sideways. */
        max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }
.tab {
  font: inherit; font-size: 13px; font-weight: 500;
  border: 0; background: transparent; color: var(--text-secondary);
  padding: 5px 14px; border-radius: 6px; cursor: pointer;
}
.tab:hover { color: var(--text-primary); }
.tab.is-active { background: var(--surface-1); color: var(--text-primary);
                 box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.topbar-right { display: flex; align-items: center; gap: 10px; }
.datefield { display: flex; flex-direction: column; gap: 1px; font-size: 10px;
             color: var(--text-muted); text-transform: uppercase;
             letter-spacing: .06em; font-weight: 600; }
.datefield input { font: inherit; font-size: 13px; text-transform: none;
                   letter-spacing: 0; font-weight: 400;
                   color: var(--text-primary); background: var(--surface-1);
                   border: 1px solid var(--border); border-radius: var(--radius-sm);
                   padding: 3px 7px; }
.save-state { font-size: 12px; color: var(--text-muted); min-width: 62px; }
.save-state.ok { color: var(--good); }
.save-state.err { color: var(--critical); }

/* ------------------------------------------------------------------ bits */

.btn {
  font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-primary);
  padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--text-primary); color: var(--surface-1);
               border-color: var(--text-primary); }
.btn-primary:hover { opacity: .88; background: var(--text-primary); }
.btn-quiet { border-color: transparent; background: transparent;
             color: var(--text-secondary); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-danger { color: var(--critical); border-color: var(--border); }

.switch { display: inline-flex; align-items: center; gap: 6px;
          font-size: 12px; color: var(--text-secondary); cursor: pointer;
          user-select: none; }
.switch input { accent-color: var(--series-1); }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.panel-head { display: flex; align-items: baseline; gap: 12px;
              flex-wrap: wrap; margin-bottom: 14px; }
.panel-tools { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.panel-note { font-size: 12px; color: var(--text-muted); flex-basis: 100%; }

main { padding: 0 20px 40px; }
.view { display: none; }
.view.is-active { display: block; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

.empty-note { color: var(--text-muted); font-size: 13px; padding: 24px 8px;
              text-align: center; }

/* ------------------------------------------------------------------ KPIs */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 12px; padding: 16px 20px 8px; }
.kpi { background: var(--surface-1); border: 1px solid var(--border);
       border-radius: var(--radius); padding: 12px 14px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
             color: var(--text-muted); font-weight: 600; }
.kpi-value { font-size: 26px; font-weight: 650; letter-spacing: -0.02em;
             line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: 14px; font-weight: 500; color: var(--text-secondary);
                   margin-left: 2px; }
.kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ---------------------------------------------------------------- alerts */

.alerts { padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 6px; }
.alert { display: flex; align-items: center; gap: 9px; font-size: 13px;
         padding: 7px 12px; border-radius: var(--radius-sm);
         border: 1px solid var(--border); background: var(--surface-1);
         cursor: pointer; }
.alert:hover { background: var(--surface-2); }
.alert .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.alert .tag { font-size: 11px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .05em; flex: none; }
.alert.good     .tag { color: var(--good); }
.alert.warning  .tag { color: #8a6100; }
.alert.serious  .tag { color: #a2401a; }
.alert.critical .tag { color: var(--critical); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert.warning .tag { color: var(--warning); }
  :root:not([data-theme="light"]) .alert.serious .tag { color: var(--serious); }
}
.alert.good     .dot { background: var(--good); }
.alert.warning  .dot { background: var(--warning); }
.alert.serious  .dot { background: var(--serious); }
.alert.critical .dot { background: var(--critical); }

/* ------------------------------------------------------------------ plan */

.plan-wrap { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 16px; }
/* minmax(0,…) not 1fr — a bare 1fr track floors at its content's width,
   which would let the wide plan push the whole page sideways. */
@media (max-width: 1100px) { .plan-wrap { grid-template-columns: minmax(0, 1fr); } }

.plan-stage { width: 100%; overflow-x: auto; }
/* Below ~560px the plan scrolls inside its own box rather than shrinking the
   bed labels into illegibility. The page body never scrolls sideways. */
.plan-stage svg { display: block; width: 100%; min-width: 560px; height: auto; }

.bed-shape { cursor: pointer; transition: filter .12s; }
.bed-shape:hover { filter: brightness(1.06); }
.bed-outline { fill: none; stroke-width: 2; }
.bed-selected { stroke-dasharray: 5 3; stroke-width: 2.5; fill: none;
                stroke: var(--text-primary); }
.bed-label { font: 600 11px var(--sans); fill: #fff; pointer-events: none; }
.bed-sub   { font: 500 9.5px var(--sans); fill: rgba(255,255,255,.88);
             pointer-events: none; }
.feature-shape { stroke: var(--border-strong); stroke-width: 1; }
.feature-label { font: 500 10px var(--sans); fill: var(--text-muted);
                 pointer-events: none; }
.grid-line { stroke: var(--border); stroke-width: .5; }
.ruler-text { font: 500 9px var(--mono); fill: var(--text-muted); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
          padding-top: 12px; border-top: 1px solid var(--border);
          font-size: 12px; color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none;
                 border: 1px solid rgba(0,0,0,.12); }

/* -------------------------------------------------------------- bed panel */

.bed-panel { align-self: start; position: sticky; top: 78px;
             max-height: calc(100vh - 96px); overflow-y: auto; }
.bed-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover;
             border-radius: var(--radius-sm); background: var(--surface-2);
             display: block; }
.photo-drop { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
              padding: 20px 12px; text-align: center; font-size: 12px;
              color: var(--text-muted); cursor: pointer; }
.photo-drop.over { border-color: var(--series-1); color: var(--series-1); }

.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
             font-size: 12.5px; margin: 12px 0; }
.meta-grid dt { color: var(--text-muted); }
.meta-grid dd { margin: 0; font-variant-numeric: tabular-nums; }

.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                 color: var(--text-muted); font-weight: 700;
                 margin: 18px 0 8px; }

.planting-card { border: 1px solid var(--border); border-radius: var(--radius-sm);
                 padding: 10px 11px; margin-bottom: 8px; background: var(--surface-1); }
.planting-top { display: flex; align-items: center; gap: 8px; }
.planting-name { font-weight: 600; font-size: 13px; }
.planting-count { font-size: 12px; color: var(--text-muted);
                  font-variant-numeric: tabular-nums; }
.phase-chip { font-size: 10px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .05em; padding: 2px 6px; border-radius: 4px;
              margin-left: auto; border: 1px solid; }

.progress { height: 6px; border-radius: 3px; background: var(--surface-2);
            margin: 8px 0 6px; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 3px; }

.planting-facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px;
                  color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.planting-actions { display: flex; gap: 6px; margin-top: 9px; }

.suggest { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
           border: 1px solid var(--border); border-radius: var(--radius-sm);
           margin-bottom: 6px; font-size: 12.5px; }
.suggest .why { color: var(--text-muted); font-size: 11.5px; }
.suggest .grow { margin-left: auto; }

.swatch { width: 9px; height: 9px; border-radius: 2px; flex: none;
          display: inline-block; }

.verdict { font-size: 12px; padding: 7px 10px; border-radius: var(--radius-sm);
           border: 1px solid var(--border); display: flex; gap: 8px; }
.verdict .tag { font-weight: 700; text-transform: uppercase; font-size: 10px;
                letter-spacing: .05em; flex: none; padding-top: 1px; }
.verdict.clear   .tag { color: var(--good); }
.verdict.caution .tag { color: #8a6100; }
.verdict.avoid   .tag { color: var(--critical); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .verdict.caution .tag { color: var(--warning); }
}

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase;
     letter-spacing: .05em; color: var(--text-muted); font-weight: 600;
     padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid var(--border);
     vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.table-toggle { margin-top: 14px; }
.table-toggle summary { font-size: 12px; color: var(--text-secondary);
                        cursor: pointer; }
.table-toggle[open] summary { margin-bottom: 10px; }

/* ---------------------------------------------------------------- charts */

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.axis-text { font: 500 10px var(--sans); fill: var(--text-muted); }
.axis-line { stroke: var(--border); stroke-width: 1; }
.grid-soft { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.bar-label { font: 600 10px var(--sans); fill: var(--text-secondary);
             font-variant-numeric: tabular-nums; }
.season-band { font: 600 9px var(--sans); fill: var(--text-muted);
               letter-spacing: .06em; }

.tooltip { position: fixed; z-index: 90; pointer-events: none;
           background: var(--surface-1); border: 1px solid var(--border-strong);
           border-radius: var(--radius-sm); box-shadow: var(--shadow);
           padding: 8px 10px; font-size: 12px; max-width: 240px; }
.tooltip .tt-title { font-weight: 650; margin-bottom: 3px; }
.tooltip .tt-row { display: flex; gap: 10px; justify-content: space-between;
                   color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- occupancy */

.occ-grid { display: grid; gap: 3px; font-size: 11px; }
.occ-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px;
           align-items: center; }
.occ-cells { display: grid; grid-auto-flow: column; gap: 2px; }
.occ-cell { height: 20px; border-radius: 3px; background: var(--surface-2); }
.occ-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; }
.occ-head { color: var(--text-muted); font-size: 9px; text-align: center;
            letter-spacing: .04em; }

/* -------------------------------------------------------------- timeline */

.tl-item { display: flex; gap: 10px; padding: 8px 0;
           border-bottom: 1px solid var(--border); font-size: 13px; }
.tl-item:last-child { border-bottom: 0; }
.tl-when { font-variant-numeric: tabular-nums; color: var(--text-muted);
           width: 92px; flex: none; font-size: 12px; }
.tl-what { flex: 1; }
.tl-kg { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ----------------------------------------------------------------- modal */

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45);
                  display: flex; align-items: center; justify-content: center;
                  z-index: 100; padding: 20px; }
/* [hidden] must beat the layout display above, or an invisible overlay
   swallows every click on the page. */
[hidden] { display: none !important; }
.modal { width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
               color: var(--text-muted); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary); width: 100%;
}
.field .hint { font-size: 11.5px; color: var(--text-muted); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end;
                 margin-top: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ------------------------------------------------------------- area tabs */

.area-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.area-tab {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary);
}
.area-tab:hover { background: var(--surface-2); color: var(--text-primary); }
.area-tab.is-active { border-color: var(--text-primary); color: var(--text-primary);
                      background: var(--surface-2); font-weight: 600; }
.area-meta { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* ------------------------------------------------------------- farm view */

.farm-panel { display: flex; flex-direction: column; }
.farm-stage { position: relative; border-radius: var(--radius-sm);
              overflow: hidden; background: #9dc4e8;
              aspect-ratio: 16 / 10; min-height: 380px; }
.farm-stage canvas { display: block; width: 100%; height: 100%;
                     cursor: grab; touch-action: none; }
.farm-stage canvas:active { cursor: grabbing; }
.farm-badge { position: absolute; left: 12px; bottom: 12px;
              background: rgba(16,16,15,.72); color: #fff;
              font-size: 12px; padding: 5px 10px; border-radius: 6px;
              pointer-events: none; }
.hint-keys { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 700px) { .hint-keys { display: none; } }

/* ------------------------------------------------------------ tab badge */

.tab-badge { display: inline-block; margin-left: 6px; min-width: 16px;
             padding: 0 4px; border-radius: 8px; font-size: 10px;
             font-weight: 700; line-height: 16px; text-align: center;
             background: var(--critical); color: #fff; }

/* ----------------------------------------------------------------- tasks */

.task { display: flex; align-items: flex-start; gap: 11px; padding: 10px 2px;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task-icon { width: 26px; height: 26px; border-radius: 7px; flex: none;
             display: grid; place-items: center; font-size: 13px;
             background: var(--surface-2); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 13.5px; font-weight: 600; }
.task-detail { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.task-why { font-size: 11.5px; color: var(--text-muted); margin-top: 3px;
            font-style: italic; }
.task-when { font-size: 11.5px; font-variant-numeric: tabular-nums;
             white-space: nowrap; }
.task-when.late { color: var(--critical); font-weight: 600; }
.task-when.due { color: var(--good); font-weight: 600; }
.task-actions { display: flex; gap: 6px; align-items: center; }
.task-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
              color: var(--text-muted); font-weight: 700;
              margin: 16px 0 2px; }
.task-group:first-child { margin-top: 0; }

.feed-card { border: 1px solid var(--border); border-radius: var(--radius-sm);
             padding: 10px 11px; margin-bottom: 8px; }
.feed-card h3 { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.feed-card p { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.feed-card .why { color: var(--text-muted); font-style: italic; margin-top: 3px; }

/* ------------------------------------------------------------ edit mode */

.bed-shape.editing { cursor: grab; }
.bed-shape.editing:active { cursor: grabbing; }
.resize-handle { fill: var(--surface-1); stroke: var(--text-primary);
                 stroke-width: 1.5; cursor: nwse-resize; }
.edit-banner { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
               background: var(--surface-2); border: 1px solid var(--border);
               border-radius: var(--radius-sm); padding: 7px 11px;
               margin-bottom: 12px; }
.edit-banner b { font-weight: 600; }

/* -------------------------------------------------------------- advisor */

.advisor-panel { display: flex; flex-direction: column; min-height: 70vh; }
.chat { flex: 1; overflow-y: auto; padding: 4px 2px 12px;
        display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.msg { display: flex; gap: 10px; max-width: min(780px, 100%); }
.msg-who { width: 26px; height: 26px; border-radius: 7px; flex: none;
           display: grid; place-items: center; font-size: 13px;
           background: var(--surface-2); }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .msg-text { background: var(--surface-2); padding: 9px 12px;
                      border-radius: 12px 12px 2px 12px; }
.msg-text { font-size: 14px; line-height: 1.62; min-width: 0; }
.msg-text p { margin: 0 0 10px; }
.msg-text p:last-child { margin-bottom: 0; }
.msg-text ul, .msg-text ol { margin: 0 0 10px; padding-left: 20px; }
.msg-text li { margin-bottom: 3px; }
.msg-text code { font-size: .9em; }
.msg-text h3 { font-size: 13.5px; margin: 12px 0 5px; }
.msg-text strong { font-weight: 650; }
.msg-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.msg-photos img { width: 130px; height: 100px; object-fit: cover;
                  border-radius: var(--radius-sm); border: 1px solid var(--border); }
.msg.pending .msg-text::after { content: "▋"; animation: blink 1s steps(2) infinite;
                                color: var(--text-muted); }
@keyframes blink { 50% { opacity: 0; } }
.chat-error { color: var(--critical); font-size: 13px; }

.composer { border-top: 1px solid var(--border); padding-top: 12px; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; font: inherit; font-size: 14px; resize: none;
                     padding: 9px 11px; border-radius: var(--radius-sm);
                     border: 1px solid var(--border-strong);
                     background: var(--surface-1); color: var(--text-primary);
                     max-height: 180px; }
.composer-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.composer-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.composer-photos:not(:empty) { margin-bottom: 8px; }
.chip-photo { position: relative; }
.chip-photo img { width: 62px; height: 50px; object-fit: cover;
                  border-radius: var(--radius-sm); border: 1px solid var(--border); }
.chip-photo button { position: absolute; top: -6px; right: -6px; width: 18px;
                     height: 18px; border-radius: 50%; border: 0; cursor: pointer;
                     background: var(--text-primary); color: var(--surface-1);
                     font-size: 11px; line-height: 18px; padding: 0; }
.advisor-empty { color: var(--text-muted); font-size: 13px; text-align: center;
                 padding: 40px 20px; }
.advisor-empty .suggest-q { display: inline-block; margin: 4px; cursor: pointer;
                            border: 1px solid var(--border); border-radius: 999px;
                            padding: 5px 13px; font-size: 12.5px;
                            color: var(--text-secondary); background: var(--surface-1); }
.advisor-empty .suggest-q:hover { background: var(--surface-2);
                                  color: var(--text-primary); }