/* ============================================================
   Parcl9 Parcel IQ — Styles
   Themed to match the Parcl9 theme's warm parchment / gold /
   editorial design system (see Theme/Parcl9/style.css + theme.json).
   Falls back to matching hardcoded values if the theme isn't active.
   ============================================================ */

:root {
  --piq-bg:        var(--bg, #f5f2eb);
  --piq-surface:   rgba(255,255,255,.55);
  --piq-surface-2: rgba(255,255,255,.85);
  --piq-tint:      rgba(154,111,46,.05);
  --piq-border:    var(--border, rgba(154,111,46,.18));
  --piq-border-2:  var(--border2, rgba(154,111,46,.35));
  --piq-text:      var(--fg, #1a1814);
  --piq-muted:     var(--mu, #6b6458);
  --piq-muted-2:   var(--mu2, #a8a090);
  --piq-gold:      var(--gold, #9a6f2e);
  --piq-gold-2:    var(--gold2, #b8883e);
  --piq-white:     var(--white, #ffffff);
  --piq-gold-pale:   rgba(154,111,46,.12);
  --piq-gold-border: rgba(154,111,46,.22);

  /* Status hues — muted/earthy so they sit comfortably in the palette above. */
  --piq-good-bg:   #e7efe3;
  --piq-good-fg:   #3f6b40;
  --piq-warn-bg:   #f3e9d6;
  --piq-warn-fg:   #8a5a20;
  --piq-bad-bg:    #f3e3df;
  --piq-bad-fg:    #8c3a2e;

  --piq-radius:    4px;
  --piq-radius-sm: 3px;
  --piq-shadow:    var(--shadow-sm, 0 1px 3px rgba(26,24,20,.06), 0 1px 2px rgba(26,24,20,.04));
  --piq-shadow-md: var(--shadow-md, 0 4px 16px rgba(26,24,20,.08), 0 2px 6px rgba(26,24,20,.05));

  --piq-font-serif: var(--font-serif, 'Playfair Display', Georgia, 'Times New Roman', serif);
  --piq-font-body:  var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --piq-transition: var(--transition, .22s ease);
}

.p9piq-hidden { display: none !important; }
.p9piq-muted  { color: var(--piq-muted); font-size: .8rem; }

/* ── Layout ──────────────────────────────────────────────── */
.p9piq-root { font-family: var(--piq-font-body); font-weight: 300; color: var(--piq-text); }

.p9piq-two-col {
  display: grid;
  /* --piq-col-w is set by initColumnResizer() in property-iq.js (and
     persisted to localStorage) once the user drags .p9piq-col-resizer —
     the middle column below IS that resizer, not a plain grid gap, so
     dragging it visually feels like resizing the gap itself. Net gap
     (2 × column-gap + resizer width) is intentionally narrower overall
     than the old flat 2rem gap. */
  grid-template-columns: var(--piq-col-w, 460px) 20px 1fr;
  column-gap: .3rem;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .p9piq-two-col { grid-template-columns: 1fr; }
  /* !important required: the base .p9piq-col-resizer rule below sets its
     own unconditional 'display: flex' with identical specificity (single
     class selector) and appears later in this file, so without it that
     rule silently wins the cascade on mobile too. There's also nothing to
     resize between once the layout above collapses to a single column. */
  .p9piq-col-resizer { display: none !important; }
}

/* Draggable divider between the two panels — see initColumnResizer() in
   property-iq.js. The full grid column is the hit-area (easier to grab
   than a hairline), with a full-height dashed line down the middle and a
   vertical "drag to adjust" label breaking it partway down — reads like a
   labeled divider rather than a stray line, and hints at what it does
   without needing a tooltip. */
.p9piq-col-resizer {
  align-self: stretch;
  min-height: 100%;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  position: relative;
}
.p9piq-col-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed var(--piq-border-2);
  transition: border-color var(--piq-transition);
}
.p9piq-col-resizer:hover::before,
.p9piq-col-resizer.is-dragging::before {
  border-color: var(--piq-gold);
}
.p9piq-col-resizer-label {
  position: relative;
  z-index: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--piq-muted-2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  /* Solid patch in the page's own background color, breaking the dashed
     line cleanly behind the label instead of text sitting on top of it. */
  background: var(--piq-bg);
  padding: .7rem .1rem;
  border-radius: var(--piq-radius-sm);
  transition: color var(--piq-transition);
}
.p9piq-col-resizer:hover .p9piq-col-resizer-label,
.p9piq-col-resizer.is-dragging .p9piq-col-resizer-label {
  color: var(--piq-gold);
}

/* The right column is its own solid white panel (unlike the translucent
   .p9piq-card surfaces on the left) so the waiting/empty state, the guest
   gate, and the eventual report all read as one consistent "results" frame
   rather than floating directly on the page background. */
.p9piq-right {
  background: var(--piq-white);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: var(--piq-shadow);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.p9piq-card {
  background: var(--piq-surface);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  padding: 20px;
  box-shadow: var(--piq-shadow);
  margin-bottom: 1.5rem;
  transition: box-shadow var(--piq-transition), border-color var(--piq-transition);
}
.p9piq-card:hover { box-shadow: var(--piq-shadow-md); border-color: var(--piq-border-2); }
.p9piq-card-title { font-family: var(--piq-font-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.2; margin: 0 0 .4rem; color: var(--piq-text); }
.p9piq-card-subtitle { font-size: .875rem; line-height: 1.6; color: var(--piq-muted); margin: 0 0 1.5rem; }

/* ── Form ────────────────────────────────────────────────── */
.p9piq-section-label {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--piq-gold);
  margin: 1.75rem 0 .85rem;
  border-bottom: 1px solid var(--piq-border);
  padding-bottom: .5rem;
}
.p9piq-section-label:first-child { margin-top: 0; }

.p9piq-section-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.75rem 0 .85rem;
  border-bottom: 1px solid var(--piq-border);
  padding-bottom: .5rem;
}
.p9piq-section-label-row:first-child { margin-top: 0; }
.p9piq-section-label-row .p9piq-section-label { margin: 0; border-bottom: none; padding-bottom: 0; }
.p9piq-lookup-mode-toggle { font-size: .7rem; text-transform: none; letter-spacing: normal; white-space: nowrap; }

/* ── "From Pipeline" address picker (next to Property Address) ────────────
   Pulls a lead's address straight from parcel9-deal-pipeline — see
   P9PIQ_Analyzer::ajax_pipeline_deals(). Mirrors parcel9-land-comps'
   .p9lc-pipeline-* rules, renamed to this plugin's own --piq-* variables. */
.p9piq-pipeline-row {
  position: relative;
  margin: -0.5rem 0 1rem;
}

.p9piq-pipeline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--piq-gold);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 3px;
  white-space: nowrap;
}
.p9piq-pipeline-btn:hover { text-decoration: underline; }

.p9piq-pipeline-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--piq-white);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: var(--piq-shadow-md);
  z-index: 40;
}

.p9piq-pipeline-panel-head {
  padding: 8px 12px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--piq-muted);
  border-bottom: 1px solid var(--piq-border);
}

.p9piq-pipeline-list { list-style: none; margin: 0; padding: 0; }

.p9piq-pipeline-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--piq-border);
  padding: 8px 12px;
  cursor: pointer;
}
.p9piq-pipeline-item:last-child { border-bottom: none; }
.p9piq-pipeline-item:hover { background: var(--piq-tint); }

.p9piq-pipeline-item-addr {
  display: block;
  font-size: .78rem;
  color: var(--piq-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p9piq-pipeline-item-stage {
  display: inline-block;
  margin-top: 2px;
  font-size: .65rem;
  color: var(--piq-muted);
}

.p9piq-pipeline-empty {
  padding: 16px 12px;
  font-size: .75rem;
  color: var(--piq-muted);
  text-align: center;
}

@media (max-width: 480px) {
  .p9piq-pipeline-panel { width: 100%; }
}

.p9piq-apn-hint { font-size: .72rem; color: var(--piq-muted-2); margin: -.4rem 0 1rem; }
.p9piq-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.p9piq-label { font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: var(--piq-muted); }
.p9piq-optional { font-weight: 400; color: var(--piq-muted-2); }
.p9piq-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.p9piq-field--sm { max-width: 100px; }

.p9piq-input {
  padding: .6rem .9rem;
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius-sm);
  font-family: var(--piq-font-body);
  font-size: .875rem;
  font-weight: 300;
  background: rgba(255,255,255,.5);
  color: var(--piq-text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--piq-transition), box-shadow var(--piq-transition);
}
.p9piq-input:focus { outline: none; border-color: var(--piq-border-2); box-shadow: 0 0 0 3px rgba(154,111,46,.07); }
.p9piq-input::placeholder { color: var(--piq-muted-2); }
.p9piq-textarea { resize: vertical; min-height: 90px; }

select.p9piq-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B6458' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  cursor: pointer;
}
select.p9piq-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239A6F2E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.p9piq-input::-ms-expand { display: none; }

/* ── Project type radio cards ────────────────────────────── */
.p9piq-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 520px) { .p9piq-radio-grid { grid-template-columns: 1fr; } }
.p9piq-radio-card { position: relative; cursor: pointer; display: block; }
.p9piq-radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.p9piq-radio-card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: .75rem .85rem;
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius-sm);
  background: rgba(255,255,255,.4);
  transition: border-color var(--piq-transition), background var(--piq-transition), box-shadow var(--piq-transition);
  height: 100%;
  box-sizing: border-box;
}
.p9piq-radio-card:hover .p9piq-radio-card-inner { border-color: var(--piq-border-2); }
.p9piq-radio-card input[type="radio"]:checked ~ .p9piq-radio-card-inner {
  border-color: var(--piq-gold);
  background: var(--piq-tint);
  box-shadow: 0 0 0 1px var(--piq-gold) inset;
}
.p9piq-radio-card input[type="radio"]:focus-visible ~ .p9piq-radio-card-inner {
  outline: 2px solid var(--piq-gold);
  outline-offset: 2px;
}
.p9piq-radio-icon { color: var(--piq-gold); display: inline-flex; }
.p9piq-radio-card input[type="radio"]:not(:checked) ~ .p9piq-radio-card-inner .p9piq-radio-icon { color: var(--piq-muted-2); }
.p9piq-radio-card-label { font-size: .8rem; font-weight: 500; color: var(--piq-text); line-height: 1.3; }
.p9piq-radio-card-sub { font-size: .68rem; color: var(--piq-muted); line-height: 1.3; }

/* ── Financing toggle + fields ───────────────────────────── */
.p9piq-financing-toggle { margin: 1.1rem 0 .75rem; }
.p9piq-toggle-label { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.p9piq-toggle-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.p9piq-toggle-switch {
  position: relative;
  width: 34px;
  height: 19px;
  background: var(--piq-border-2);
  border-radius: 999px;
  transition: background var(--piq-transition);
  flex-shrink: 0;
}
.p9piq-toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--piq-transition);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.p9piq-toggle-label input[type="checkbox"]:checked ~ .p9piq-toggle-switch { background: var(--piq-gold); }
.p9piq-toggle-label input[type="checkbox"]:checked ~ .p9piq-toggle-switch::before { transform: translateX(15px); }
.p9piq-toggle-text { font-size: .8rem; color: var(--piq-muted); }
.p9piq-financing-fields { padding: .9rem 1rem; margin-bottom: 1rem; background: var(--piq-tint); border: 1px solid var(--piq-border); border-radius: var(--piq-radius-sm); }
.p9piq-financing-fields .p9piq-row:last-child { margin-bottom: 0; }

/* ── Parcel preview ──────────────────────────────────────── */
.p9piq-parcel-preview {
  margin-top: .5rem;
  padding: .85rem 1rem;
  background: var(--piq-tint);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius-sm);
  font-size: .8rem;
}
.p9piq-parcel-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: .6rem;
}
.p9piq-source-regrid,
.p9piq-source-rentcast,
.p9piq-source-house_canary,
.p9piq-source-realtor_intelligence { background: var(--piq-good-bg); color: var(--piq-good-fg); }
.p9piq-source-demo               { background: var(--piq-warn-bg); color: var(--piq-warn-fg); }
.p9piq-source-none               { background: var(--piq-bad-bg);  color: var(--piq-bad-fg); }
.p9piq-parcel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ── Comps preview ───────────────────────────────────────── */
.p9piq-comps-preview { margin-top: .75rem; padding: .85rem 1rem; background: var(--piq-tint); border: 1px solid var(--piq-border); border-radius: var(--piq-radius-sm); font-size: .8rem; }
.p9piq-comps-title { font-weight: 500; font-size: .8rem; color: var(--piq-text); margin-bottom: .6rem; }
.p9piq-comps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.p9piq-source-badge { display: inline-block; font-size: .625rem; font-weight: 600; letter-spacing: .02em; padding: .1rem .4rem; border-radius: var(--piq-radius-sm); margin-left: .4rem; background: var(--piq-surface-2); color: var(--piq-muted); border: 1px solid var(--piq-border); }

/* ── KV pairs ────────────────────────────────────────────── */
.p9piq-kv { display: flex; flex-direction: column; gap: .1rem; }
.p9piq-kv-l { font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--piq-muted); font-weight: 500; }
.p9piq-kv-v { font-size: .8rem; font-weight: 500; color: var(--piq-text); }

/* ── Photo upload ────────────────────────────────────────── */
.p9piq-drop-zone {
  border: 1px dashed var(--piq-border-2);
  border-radius: var(--piq-radius-sm);
  padding: 1.1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--piq-transition), background var(--piq-transition);
  position: relative;
}
.p9piq-drop-zone:hover, .p9piq-drag-over { border-color: var(--piq-gold); background: var(--piq-tint); }
.p9piq-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.p9piq-drop-label { font-size: .8rem; color: var(--piq-muted); pointer-events: none; }
.p9piq-link { color: var(--piq-gold); border-bottom: 1px solid var(--piq-border-2); }
.p9piq-photo-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; justify-content: flex-start; pointer-events: all; }
.p9piq-thumb { position: relative; width: 72px; height: 72px; }
.p9piq-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--piq-radius-sm); border: 1px solid var(--piq-border); }
.p9piq-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--piq-bad-fg);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Buttons ─────────────────────────────────────────────── */
.p9piq-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--piq-radius-sm);
  font-family: var(--piq-font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--piq-transition), color var(--piq-transition), border-color var(--piq-transition);
  white-space: nowrap;
}
.p9piq-btn-primary { background: var(--piq-gold); color: var(--piq-white); border-color: var(--piq-gold); }
.p9piq-btn-primary:hover:not(:disabled) { background: var(--piq-gold-2); border-color: var(--piq-gold-2); }
.p9piq-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* "Run Parcel IQ" used to share the same gold as "Apply to form", making
   the handoff between the two easy to miss — green (the same token already
   used for "good"/positive signals elsewhere) reads as "go/execute" and
   isn't used for any other button, so it reads as a distinct next step. */
.p9piq-btn-run { background: var(--piq-good-fg); color: var(--piq-white); border-color: var(--piq-good-fg); }
.p9piq-btn-run:hover:not(:disabled) { background: #345a35; border-color: #345a35; }
.p9piq-btn-run:disabled { opacity: .5; cursor: not-allowed; }
.p9piq-btn-ghost { background: transparent; color: var(--piq-muted); border-color: var(--piq-border-2); }
.p9piq-btn-ghost:hover { border-color: var(--piq-gold); color: var(--piq-gold); }
.p9piq-btn-sm { padding: .4rem .85rem; font-size: .7rem; }
.p9piq-btn-danger { background: transparent; color: var(--piq-bad-fg); border-color: var(--piq-border); }
.p9piq-btn-danger:hover { border-color: var(--piq-bad-fg); }

.p9piq-form-footer { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.p9piq-disclaimer { font-size: .7rem; color: var(--piq-muted-2); margin-top: .6rem; letter-spacing: .01em; }

/* ── Spinner ─────────────────────────────────────────────── */
.p9piq-spinner { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--piq-muted); }
.p9piq-spinner-ring {
  width: 15px; height: 15px;
  border: 2px solid var(--piq-border);
  border-top-color: var(--piq-gold);
  border-radius: 50%;
  animation: piq-spin .7s linear infinite;
  display: inline-block;
}
@keyframes piq-spin { to { transform: rotate(360deg); } }

/* Inline spinner for the chat's own "Run Parcel IQ" button — the real
   progress indicator lives down by the form's submit button, which is
   easy to miss once the two-column results/history layout pushes it well
   below the fold, so this button needs its own visible busy state too. */
.p9piq-intake-run-spinner {
  display: none;
  width: 11px; height: 11px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--piq-white);
  border-radius: 50%;
  animation: piq-spin .7s linear infinite;
}
.p9piq-btn.is-loading { opacity: .75; cursor: default; pointer-events: none; }
.p9piq-btn.is-loading .p9piq-intake-run-spinner { display: inline-block; }
.p9piq-btn.is-loading #p9piq-intake-run-icon { display: none; }

/* ── Results card ────────────────────────────────────────── */
.p9piq-results-card { border-top: 3px solid var(--piq-gold); }
.p9piq-results-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.p9piq-results-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; flex-shrink: 0; }
.p9piq-results-actions { display: flex; gap: .4rem; }
.p9piq-photo-badge { display: inline-block; margin-top: .35rem; font-size: .68rem; color: var(--piq-muted); background: var(--piq-tint); border: 1px solid var(--piq-border); border-radius: 999px; padding: .15rem .6rem; }

/* Shown when photos were attached but didn't make it into the analysis
   (size/type rejection, or never reached the server) — see
   $photo_upload_issue in class-p9piq-analyzer.php. */
.p9piq-photo-warning {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #f0d99a;
  color: #8a6516;
  font-size: .8rem;
  line-height: 1.4;
}

.p9piq-score { text-align: center; flex-shrink: 0; padding: .6rem 1.1rem; border-radius: var(--piq-radius); }
.p9piq-score-num   { display: block; font-family: var(--piq-font-serif); font-weight: 400; font-size: 2.1rem; line-height: 1; }
.p9piq-score-label { display: block; font-size: .65rem; letter-spacing: .04em; color: var(--piq-muted); margin-top: .15rem; }
.p9piq-score-high { background: var(--piq-good-bg); color: var(--piq-good-fg); }
.p9piq-score-mid  { background: var(--piq-warn-bg); color: var(--piq-warn-fg); }
.p9piq-score-low  { background: var(--piq-bad-bg);  color: var(--piq-bad-fg); }
/* Teasers: the good/warn/bad hues each telegraph the verdict at a glance
   even with the number itself blurred, so stay neutral until unlocked. */
.p9piq-score-neutral { background: var(--piq-gold-pale); color: var(--piq-gold); }
.p9piq-score-sm { display: inline-block; padding: .1rem .5rem; border-radius: var(--piq-radius-sm); font-size: .7rem; font-weight: 600; }

.p9piq-callout {
  background: var(--piq-tint);
  border-left: 2px solid var(--piq-gold);
  padding: .85rem 1.1rem;
  border-radius: 0 var(--piq-radius-sm) var(--piq-radius-sm) 0;
  font-family: var(--piq-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--piq-text);
  margin-bottom: 1.5rem;
}

.p9piq-section { border-top: 1px solid var(--piq-border); padding-top: 1.1rem; margin-top: 1.1rem; }
.p9piq-section-title { font-family: var(--piq-font-serif); font-weight: 400; font-size: 1.1rem; margin: 0 0 .85rem; color: var(--piq-text); }

/* ── Deal metrics ────────────────────────────────────────── */
.p9piq-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
@media (max-width: 700px) { .p9piq-metrics-grid { grid-template-columns: 1fr 1fr; } }
.p9piq-metric { background: var(--piq-tint); border: 1px solid var(--piq-border); border-radius: var(--piq-radius-sm); padding: .85rem; text-align: center; }
.p9piq-metric-val   { font-family: var(--piq-font-serif); font-size: 1.15rem; font-weight: 400; color: var(--piq-text); margin-bottom: .25rem; }
.p9piq-metric-label { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--piq-muted); font-weight: 500; }

/* ── Scenarios ───────────────────────────────────────────── */
.p9piq-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 700px) { .p9piq-scenarios { grid-template-columns: 1fr; } }
.p9piq-scenario { background: var(--piq-tint); border: 1px solid var(--piq-border); border-radius: var(--piq-radius-sm); padding: .9rem; }
.p9piq-scenario-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.p9piq-scenario-key  { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--piq-gold); }
.p9piq-scenario-risk { font-size: .7rem; font-weight: 500; text-transform: capitalize; }
.p9piq-scenario-desc { font-size: .78rem; color: var(--piq-muted); margin-bottom: .65rem; line-height: 1.55; }
.p9piq-scenario-nums { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.p9piq-scenario-when { font-size: .7rem; color: var(--piq-muted); margin-top: .5rem; border-top: 1px solid var(--piq-border); padding-top: .5rem; }

/* ── Zoning ──────────────────────────────────────────────── */
.p9piq-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 500; margin-left: .4rem; }
.p9piq-badge-green  { background: var(--piq-good-bg); color: var(--piq-good-fg); }
.p9piq-badge-yellow { background: var(--piq-warn-bg); color: var(--piq-warn-fg); }
.p9piq-zone-code { font-family: var(--piq-font-serif); font-size: 1.1rem; font-weight: 400; margin-bottom: .65rem; color: var(--piq-text); }
.p9piq-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .65rem; }
.p9piq-note { font-size: .8rem; color: var(--piq-text); line-height: 1.55; margin-bottom: .4rem; }
.p9piq-warning { color: var(--piq-warn-fg); font-size: .8rem; background: var(--piq-warn-bg); padding: .5rem .75rem; border-radius: var(--piq-radius-sm); }

/* ── Red flags ───────────────────────────────────────────── */
.p9piq-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.p9piq-flag { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem .75rem; border-left: 2px solid; border-radius: 0 var(--piq-radius-sm) var(--piq-radius-sm) 0; background: var(--piq-tint); font-size: .8rem; }
.p9piq-flag-sev { font-size: .625rem; font-weight: 600; flex-shrink: 0; padding-top: .1rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── Checklist ───────────────────────────────────────────── */
.p9piq-checklist { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; color: var(--piq-muted); }

/* ── Exit strategy assessment ────────────────────────────── */
.p9piq-exit-rec { border-radius: var(--piq-radius-sm); padding: .9rem 1rem; border-left: 3px solid; }
.p9piq-exit-rec-good     { background: var(--piq-good-bg); border-left-color: var(--piq-good-fg); }
.p9piq-exit-rec-caution  { background: var(--piq-warn-bg); border-left-color: var(--piq-warn-fg); }
.p9piq-exit-rec-mismatch { background: var(--piq-bad-bg);  border-left-color: var(--piq-bad-fg); }
.p9piq-exit-rec-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-weight: 500; font-size: .85rem; color: var(--piq-text); }
.p9piq-exit-rec-icon { font-weight: 700; }
.p9piq-exit-rec-eval { font-size: .82rem; line-height: 1.6; color: var(--piq-text); margin: 0; }
.p9piq-exit-rec-alt { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid rgba(0,0,0,.08); font-size: .8rem; color: var(--piq-text); }
.p9piq-exit-rec-alt p { margin: .25rem 0 0; color: var(--piq-muted); }

/* ── Site conditions ─────────────────────────────────────── */
.p9piq-sc-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }

/* ── Financing analysis ──────────────────────────────────── */
.p9piq-fin-verdict { font-size: .82rem; font-weight: 500; padding: .6rem .8rem; border-radius: var(--piq-radius-sm); margin: .85rem 0 .65rem; }
.p9piq-fin-verdict-ok   { background: var(--piq-good-bg); color: var(--piq-good-fg); }
.p9piq-fin-verdict-warn { background: var(--piq-bad-bg);  color: var(--piq-bad-fg); }

/* ── Long-term value forecast ────────────────────────────── */
.p9piq-forecast-table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .8rem; }
.p9piq-forecast-table th, .p9piq-forecast-table td { padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--piq-border); }
.p9piq-forecast-table th:first-child, .p9piq-forecast-table td:first-child { text-align: left; }
.p9piq-forecast-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--piq-muted); font-weight: 500; }
.p9piq-forecast-mod { font-weight: 600; color: var(--piq-gold); }

/* ── Error ───────────────────────────────────────────────── */
.p9piq-error { color: var(--piq-bad-fg); background: var(--piq-bad-bg); padding: .9rem 1rem; border-radius: var(--piq-radius-sm); font-size: .8rem; }

/* ── History ─────────────────────────────────────────────── */
.p9piq-history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.p9piq-history-header .p9piq-card-title { margin: 0; }
.p9piq-history-actions { display: flex; align-items: center; gap: .5rem; }
.p9piq-history-list { display: flex; flex-direction: column; gap: .5rem; }
.p9piq-history-item { display: flex; align-items: center; justify-content: space-between; padding: .65rem .75rem; background: var(--piq-tint); border: 1px solid var(--piq-border); border-radius: var(--piq-radius-sm); gap: .75rem; }
.p9piq-history-check { display: flex; align-items: center; flex-shrink: 0; }
.p9piq-history-check input { cursor: pointer; accent-color: var(--piq-gold); }
.p9piq-history-left { flex: 1; min-width: 0; }
.p9piq-history-title { font-size: .8rem; font-weight: 500; color: var(--piq-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p9piq-history-meta  { font-size: .68rem; color: var(--piq-muted); }
.p9piq-history-right { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.p9piq-history-load { font-size: .68rem; padding: .25rem .55rem; border: 1px solid var(--piq-border-2); border-radius: var(--piq-radius-sm); background: transparent; cursor: pointer; color: var(--piq-gold); transition: border-color var(--piq-transition), color var(--piq-transition); }
.p9piq-history-load:hover { border-color: var(--piq-gold); color: var(--piq-gold-2); }
.p9piq-history-delete { font-size: .68rem; padding: .25rem .55rem; border: 1px solid var(--piq-border); border-radius: var(--piq-radius-sm); background: transparent; cursor: pointer; color: var(--piq-bad-fg); transition: border-color var(--piq-transition); }
.p9piq-history-delete:hover { border-color: var(--piq-bad-fg); }

/* ── Disclaimer ──────────────────────────────────────────── */
.p9piq-disclaimer-footer { font-size: .68rem; color: var(--piq-muted-2); margin-top: 1rem; border-top: 1px solid var(--piq-border); padding-top: .75rem; line-height: 1.5; }

/* ── Guest results gate ──────────────────────────────────── */
/* ── Empty state ────────────────────────────────────────────────────────── */
/* Default content of the (now solid-white) .p9piq-right panel before a
   report exists — mirrors Quick Proforma's .p9pf-empty-state so both tools
   feel like one family. */
.p9piq-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1 1 auto;
  padding: 60px 20px;
  text-align: center;
  color: var(--piq-muted-2);
}
.p9piq-empty-state svg { opacity: .35; }
.p9piq-empty-state p { font-size: .8rem; margin: 0; }

/* Shown in place of the results panel for guests — the form + intake
   chat stay fully usable so guests can see the assistant work before
   hitting this. Same visual language as .p9piq-card so it doesn't feel
   like a dead end. */
.p9piq-results-gate {
  max-width: 460px;
  width: 100%;
  margin: 2rem auto;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--piq-surface);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: var(--piq-shadow);
  font-family: var(--piq-font-body);
  /* .p9piq-right is now a flex column — center this vertically within
     whatever space is available instead of just hugging the top. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.p9piq-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--piq-gold-pale);
  color: var(--piq-gold);
}
.p9piq-gate-eyebrow {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--piq-gold);
  margin: 0 0 .5rem;
}
.p9piq-gate-title {
  font-family: var(--piq-font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--piq-text);
  margin: 0 0 .6rem;
}
.p9piq-gate-body {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--piq-muted);
  margin: 0 0 1.5rem;
}
.p9piq-gate-actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.p9piq-gate-cta {
  width: 100%;
  max-width: 260px;
  justify-content: center;
  /* Explicit + !important as a belt-and-suspenders guard: this is the one
     button in the plugin that most needs to read clearly at a glance, so
     don't leave its contrast to inheritance from .p9piq-btn-primary alone. */
  color: var(--piq-white) !important;
  font-weight: 600;
  font-size: .82rem;
}
.p9piq-gate-login { font-size: .78rem; color: var(--piq-muted); border-bottom: 1px solid var(--piq-border-2); cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; padding: 0; }
.p9piq-gate-login:hover { color: var(--piq-gold-2); border-color: var(--piq-gold-2); }

/* ── "Start Now" gate (guest bot-check) ─────────────────────── */
/* Covers just the intake chat box (.p9piq-intake-box, its parent here)
   until a guest clicks through — see initStartGate() in property-iq.js.
   The form below stays visible/fillable; only its Run button is disabled
   until this clears (see applyStartGateState()). Absolutely positioned
   over .p9piq-start-gated, which just needs position:relative. While the
   gate is actually showing, showStartGate()/hideStartGate() toggle
   .p9piq-gate-active on the box to give the content below a bit of
   breathing room to avoid clipping against overflow:hidden. */
.p9piq-start-gated { position: relative; min-height: 220px; }
.p9piq-start-gated.p9piq-gate-active { min-height: 340px; }
.p9piq-start-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem 1.25rem;
  background: var(--piq-bg);
  border-radius: var(--piq-radius);
  font-family: var(--piq-font-body);
  overflow-y: auto;
}
.p9piq-start-gate .p9piq-gate-icon { width: 30px; height: 30px; margin-bottom: .4rem; }
.p9piq-start-gate .p9piq-gate-icon svg { width: 16px; height: 16px; }
.p9piq-start-gate .p9piq-gate-eyebrow { margin-bottom: .3rem; }
.p9piq-start-gate .p9piq-gate-title { font-size: .98rem; margin-bottom: .35rem; }
.p9piq-start-gate .p9piq-gate-body { max-width: 320px; font-size: .76rem; line-height: 1.45; margin-bottom: .65rem; }
#p9piq-turnstile-widget { margin-bottom: .35rem; }
.p9piq-start-gate-status {
  min-height: 1.2em;
  font-size: .78rem;
  color: var(--piq-muted);
  margin: .4rem 0 0;
}

/* ── Results teaser (guest ran a real analysis) ─────────────── */
/* The blur is decorative — build_guest_teaser() server-side already
   replaced every real number/sentence below the header with fixed
   placeholder content, so there's nothing sensitive to protect even if a
   guest disables this filter via devtools. It just makes the report read
   as "real and substantial" at a glance, which is the point of the tease. */
.p9piq-teaser-wrap { position: relative; overflow: hidden; border-radius: var(--piq-radius); }
.p9piq-teaser-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
/* The score number itself sits outside .p9piq-teaser-wrap (it's part of the
   headline hook, along with the title + one-line verdict) — this blurs just
   that digit in place so the shape of the badge still reads as "there's a
   real score here" without the exact number being legible. */
.p9piq-score-num.p9piq-teaser-blur-sm {
  filter: blur(4px);
  user-select: none;
}
/* Reuses the same .p9piq-gate-icon/eyebrow/title/body/actions look as the
   original .p9piq-results-gate splash for a consistent lock-screen feel —
   just swapped for a floating card since this one sits on top of the
   (blurred) real report instead of replacing the whole right panel. */
.p9piq-teaser-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* The blurred report behind this can run very long — center this
     vertically and it'd land far down the panel, off-screen on load.
     Pin it near the top instead so it's the first thing visible. */
  padding-top: 2.5rem;
  /* Translucent, not solid — the point of the blur underneath is for the
     guest to see there's a real, substantial report there; a fully opaque
     backdrop hid that entirely. The card below carries its own
     near-opaque background so its text stays legible regardless. */
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%);
}
.p9piq-teaser-cta-inner {
  max-width: 380px;
  width: 100%;
  text-align: center;
  padding: 2rem 2rem 1.75rem;
  /* Near-opaque, not fully — enough to keep the icon/title/body legible,
     but a hint of the blurred report still shows through at the card's
     own edges/corners so it doesn't look like a flat dead-end. */
  background: rgba(255,255,255,.94);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: var(--piq-shadow-md);
  font-family: var(--piq-font-body);
}

/* ── Guest gate modal ────────────────────────────────────── */
/* <dialog>.showModal() renders in the browser's top layer, so it's immune
   to any ancestor transform/filter/contain hijacking position:fixed's
   containing block — see the equivalent fix in parcl9-quick-proforma. Since
   --piq-* tokens live on :root (not a scoped wrapper class), the dialog
   inherits them correctly even though it's appended straight to <body>. */
dialog.p9piq-gate-modal {
  position: fixed;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto;
  opacity: 1;
  background: var(--piq-white);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  padding: 2.5rem 1.5rem;
  font-family: var(--piq-font-body);
  color: var(--piq-text);
  animation: p9piq-gate-modal-pop-in 0.18s ease-out forwards;
}
dialog.p9piq-gate-modal::backdrop {
  background: rgba(26, 24, 20, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: p9piq-gate-modal-fade-in 0.15s ease-out forwards;
}
@keyframes p9piq-gate-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes p9piq-gate-modal-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
dialog.p9piq-gate-modal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--piq-gold);
  border-radius: var(--piq-radius) var(--piq-radius) 0 0;
}
.p9piq-gate-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--piq-muted-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--piq-transition), color var(--piq-transition);
}
.p9piq-gate-modal-close:hover { background: var(--piq-tint); color: var(--piq-text); }

/* ── Parcel IQ Assistant (guided intake + results chat) ──────────────────
   Matches Quick Proforma's Parcl9 Assistant: a solid warm-gold-pale box
   (not white) with white message bubbles/input popping against it. Sending
   the first message pops the same box out into a movable floating window
   (reparented onto #p9piq-app, position: fixed) so it doesn't get buried
   once the two-column results/history layout fills the page. */
.p9piq-intake-box {
  background: var(--piq-gold-pale);
  border: 1px solid var(--piq-gold-border);
  border-radius: var(--piq-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 1.75rem;
  transition: box-shadow var(--piq-transition), border-color var(--piq-transition);
}

.p9piq-intake-box--highlight {
  border-color: var(--piq-gold);
  box-shadow: 0 0 0 3px var(--piq-gold-pale), var(--piq-shadow-md);
}

.p9piq-intake-box--floating {
  position: fixed;
  top: 24px;
  left: 24px;
  bottom: auto;
  right: auto;
  width: 380px;
  min-width: 300px;
  max-width: calc(100vw - 24px);
  height: min(70vh, 560px);
  min-height: 320px;
  max-height: calc(100vh - 24px);
  /* No native `resize` here — that only ever gives a single bottom-right
     corner. All 4 edges + 4 corners are handled instead by the explicit
     .p9piq-resize-handle elements below, driven by initFloatingResize()
     in property-iq.js, so it behaves like a normal desktop window. */
  z-index: 9999;
  /* Solid opaque backdrop while floating over page content — the resting
     gold-pale wash is semi-transparent, which is fine sitting on the page
     background inline but would let dashboard content bleed through here. */
  background: var(--piq-bg);
  box-shadow: var(--piq-shadow-md);
  border-color: var(--piq-gold);
  margin-bottom: 0;
}

/* Edge/corner resize handles for the floating chat window — inert and
   hidden while docked. Positioned just inside the box's own edges (not
   straddling them) so .p9piq-intake-box's overflow:hidden (needed for its
   rounded corners) doesn't clip them. Corners sit above edges (higher
   z-index) since they overlap the same space at the box's 4 corners. */
.p9piq-resize-handle { display: none; position: absolute; z-index: 30; }
.p9piq-intake-box--floating .p9piq-resize-handle { display: block; }

.p9piq-resize-handle--n, .p9piq-resize-handle--s {
  left: 12px; right: 12px; height: 7px; cursor: ns-resize;
}
.p9piq-resize-handle--n { top: 0; }
.p9piq-resize-handle--s { bottom: 0; }

.p9piq-resize-handle--e, .p9piq-resize-handle--w {
  top: 12px; bottom: 12px; width: 7px; cursor: ew-resize;
}
.p9piq-resize-handle--e { right: 0; }
.p9piq-resize-handle--w { left: 0; }

.p9piq-resize-handle--ne, .p9piq-resize-handle--nw,
.p9piq-resize-handle--se, .p9piq-resize-handle--sw {
  width: 16px; height: 16px; z-index: 31;
}
.p9piq-resize-handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.p9piq-resize-handle--nw { top: 0; left: 0;  cursor: nwse-resize; }
.p9piq-resize-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }
.p9piq-resize-handle--sw { bottom: 0; left: 0;  cursor: nesw-resize; }

/* Decorative echo of the docked chat's own resize cue, kept in the one
   corner users most expect it — purely visual, doesn't affect the actual
   hit-area (that's the full 16x16 handle underneath). */
.p9piq-resize-handle--se::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(
    135deg,
    var(--piq-gold) 0px, var(--piq-gold) 2px,
    transparent 2px, transparent 5px
  );
  opacity: .5;
}

.p9piq-intake-box--floating .p9piq-intake-thread {
  flex: 1;
  height: auto;
  max-height: none;
  /* The floating window's own corner (resize:both on .p9piq-intake-box--
     floating) is the one resize handle while popped out — don't show a
     second, redundant one on the thread itself. */
  resize: none;
}

.p9piq-intake-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 1.1rem 1.1rem 0;
}
.p9piq-intake-box--floating .p9piq-intake-header {
  cursor: move;
  user-select: none;
  padding-bottom: .65rem;
}

.p9piq-intake-header > svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--piq-gold);
}

#p9piq-intake-title {
  flex: 0 1 105px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--piq-gold);
}

.p9piq-intake-subtitle {
  flex: 1 1 120px;
  min-width: 90px;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--piq-muted);
}

.p9piq-intake-header-btn {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--piq-gold);
  padding: 2px;
  display: flex;
  opacity: .7;
  transition: opacity var(--piq-transition);
}
.p9piq-intake-header-btn:hover { opacity: 1; }

/* Floating/draggable chat doesn't work on phone-width screens (see
   isMobileViewport() in property-iq.js, which also no-ops the auto-popout-
   on-send) — hide the pop-out trigger so there's no dead button. Needs
   !important since property-iq.js toggles this via jQuery .show()/.hide(). */
@media (max-width: 768px) {
  #p9piq-intake-popout-btn { display: none !important; }
}

/* iOS Safari auto-zooms the whole page on focus for any text input/select
   under 16px — bumping to 16px on mobile only (rather than disabling zoom
   site-wide via the viewport meta tag) fixes the zoom without taking away
   pinch-zoom accessibility everywhere else on the site. Desktop keeps its
   smaller, denser sizing. !important is required here: .p9piq-intake-input's
   own unconditional .85rem rule appears later in this file with the exact
   same specificity (single class selector), so without it the later,
   always-on rule would silently win the cascade on mobile too. */
@media (max-width: 768px) {
  .p9piq-input, .p9piq-intake-input { font-size: 16px !important; }
}

.p9piq-intake-thread {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1.1rem;
  /* height (not max-height) so there's a stable default to size from —
     min/max below are just the drag bounds, enforced by
     initThreadResize() in property-iq.js via the dedicated resize bar
     right below this element. (Native CSS `resize` used to live here
     instead, but its hit-area sits in the same bottom-right corner a
     vertical scrollbar occupies once the thread has enough messages to
     actually scroll — in practice that made drags land on the scrollbar
     and just scroll instead of resizing. A separate, dedicated bar avoids
     the conflict entirely.) */
  height: 260px;
  min-height: 140px;
  max-height: 70vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.p9piq-intake-thread::-webkit-scrollbar { width: 4px; }
.p9piq-intake-thread::-webkit-scrollbar-track { background: transparent; }
.p9piq-intake-thread::-webkit-scrollbar-thumb { background: var(--piq-gold-border); border-radius: 2px; }

/* Dedicated horizontal resize bar, docked mode only — sits between the
   thread and the input row so it never overlaps the thread's own
   scrollable area/scrollbar (see note above). See initThreadResize() in
   property-iq.js. */
.p9piq-thread-resize-bar {
  flex-shrink: 0;
  height: 10px;
  /* Asymmetric on purpose — pull up into the thread's own bottom padding
     above (-5px), but barely bite into whatever comes next below (-2px).
     Used to be -5px on both sides, which put the "drag" label right up
     against the photo-thumbs strip's top edge — see the thumbs' own
     padding-top below, added for the same reason — with no thumbnails
     attached there's nothing there so it went unnoticed, but the moment a
     photo got attached, the top of that thumbnail row visually crowded
     out/covered the label. */
  /* margin: -5px 0 -2px; */
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 5;
  touch-action: none;
}
.p9piq-thread-resize-bar::before {
  content: '';
  width: 32px;
  height: 3px;
  border-radius: 3px;
  background: var(--piq-gold-border);
  transition: background var(--piq-transition), width var(--piq-transition);
}
.p9piq-thread-resize-bar::after {
  content: 'drag';
  font-family: var(--piq-font-body);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--piq-muted-2);
  transition: color var(--piq-transition), opacity var(--piq-transition);
  opacity: .8;
}
.p9piq-thread-resize-bar:hover::before,
.p9piq-thread-resize-bar.is-dragging::before {
  background: var(--piq-gold);
  width: 52px;
}
.p9piq-thread-resize-bar:hover::after,
.p9piq-thread-resize-bar.is-dragging::after {
  color: var(--piq-gold);
  opacity: 1;
}
.p9piq-intake-box--floating .p9piq-thread-resize-bar { display: none; }

.p9piq-intake-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; }
.p9piq-intake-msg--user { flex-direction: row-reverse; align-self: flex-end; }

.p9piq-intake-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--piq-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--piq-white);
  margin-top: 1px;
}

.p9piq-intake-bubble {
  padding: .7rem .85rem;
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--piq-text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.p9piq-intake-msg--assistant .p9piq-intake-bubble {
  background: var(--piq-white);
  box-shadow: var(--piq-shadow);
  border-top-left-radius: 3px;
}
.p9piq-intake-msg--user .p9piq-intake-bubble {
  background: rgba(154,111,46,.18);
  border: 1px solid var(--piq-gold-border);
  border-top-right-radius: 3px;
  color: var(--piq-text);
}

.p9piq-intake-typing-dots { display: flex; align-items: center; gap: 5px; padding: .75rem .9rem; min-width: 48px; }
.p9piq-intake-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--piq-gold);
  border-radius: 50%;
  animation: p9piqTypingDot 1.2s infinite;
}
.p9piq-intake-typing-dots span:nth-child(2) { animation-delay: .2s; }
.p9piq-intake-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes p9piqTypingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%            { opacity: 1;  transform: translateY(-3px); }
}

.p9piq-intake-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 1.1rem 1rem;
}
.p9piq-intake-input {
  flex: 1;
  background: var(--piq-white);
  border: 1px solid var(--piq-gold-border);
  border-radius: 10px;
  padding: .8rem .95rem;
  font-size: .85rem;
  font-family: var(--piq-font-body);
  color: var(--piq-text);
  outline: none;
  resize: none;
  line-height: 1.5;
  overflow-y: hidden;
  min-height: 56px;
  max-height: 120px;
  transition: border-color var(--piq-transition);
}
.p9piq-intake-input:focus { border-color: var(--piq-gold); box-shadow: 0 0 0 3px rgba(154,111,46,.1); }
.p9piq-intake-input::placeholder { color: var(--piq-muted-2); font-size: .78rem; line-height: 1.4; }

.p9piq-intake-send-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--piq-gold);
  border: none;
  border-radius: 10px;
  color: var(--piq-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--piq-transition);
}
.p9piq-intake-send-btn:hover  { opacity: .85; }
.p9piq-intake-send-btn:active { opacity: .7; }

.p9piq-intake-attach-btn {
  flex-shrink: 0;
  width: 40px;
  height: 44px;
  background: var(--piq-white);
  border: 1px solid var(--piq-gold-border);
  border-radius: 10px;
  color: var(--piq-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--piq-transition), opacity var(--piq-transition);
}
.p9piq-intake-attach-btn:hover  { background: var(--piq-gold-pale); }
.p9piq-intake-attach-btn:active { opacity: .7; }

/* Compact preview of the shared photo pool, inline in the chat — same
   .p9piq-thumb markup as the drop zone below, just sized down to fit. */
.p9piq-intake-photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  /* padding-top gives the resize bar just above (.p9piq-thread-resize-bar)
     clear space for its "drag" label — without it, the top of the first
     thumbnail row sits close enough to crowd out/cover that text the
     moment a photo is attached. Collapses to 0 via the :empty rule below
     when there's nothing to show, so this never adds a stray gap when the
     strip is empty. */
  padding: .35rem 1.1rem .7rem;
}
.p9piq-intake-photo-thumbs:empty { display: none; padding: 0; }
.p9piq-intake-photo-thumbs .p9piq-thumb { width: 46px; height: 46px; }
.p9piq-intake-photo-thumbs .p9piq-thumb-remove { width: 16px; height: 16px; font-size: 9px; top: -5px; right: -5px; }

/* Missing required field highlight (shown once intake is otherwise ready but a required field is still blank) */
.p9piq-input--missing,
input.p9piq-input--missing {
  border-color: var(--piq-warn-fg) !important;
  box-shadow: 0 0 0 2px rgba(138,90,32,.25) !important;
  animation: p9piqMissingPulse 1.8s ease 0s 2;
}
@keyframes p9piqMissingPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(138,90,32,.25); }
  50%       { box-shadow: 0 0 0 4px rgba(138,90,32,.45); }
}

.p9piq-intake-footer {
  padding: 0 1.1rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.p9piq-intake-apply-note { font-size: .72rem; color: var(--piq-muted); }
.p9piq-intake-box--applied .p9piq-intake-apply-note { color: var(--piq-good-fg); }

.p9piq-intake-skip { padding: 0 1.1rem 1.1rem; font-size: .78rem; color: var(--piq-muted); }

.p9piq-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--piq-gold);
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Source attribution chips + "Apply this scenario" (results-chat what-ifs) */
.p9piq-source-chip {
  margin-top: .4rem;
  font-size: .65rem;
  color: var(--piq-muted-2);
  font-style: italic;
}
.p9piq-apply-scenario {
  display: block;
  margin-top: .5rem;
  padding: .35rem .7rem;
  background: transparent;
  border: 1px solid var(--piq-border-2);
  border-radius: var(--piq-radius-sm);
  color: var(--piq-gold);
  font-size: .68rem;
  cursor: pointer;
  transition: border-color var(--piq-transition), color var(--piq-transition);
}
.p9piq-apply-scenario:hover { border-color: var(--piq-gold); color: var(--piq-gold-2); }
.p9piq-apply-scenario.is-applied { color: var(--piq-good-fg); border-color: var(--piq-good-fg); cursor: default; }

.p9piq-ai-heading { display: block; margin: .4rem 0 .15rem; font-size: .8rem; }
.p9piq-ai-note {
  display: block;
  margin: .3rem 0;
  padding: .35rem .55rem;
  background: var(--piq-tint);
  border-left: 2px solid var(--piq-gold);
  font-size: .72rem;
  color: var(--piq-muted);
}
.p9piq-ai-table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .7rem; }
.p9piq-ai-table th, .p9piq-ai-table td { border: 1px solid var(--piq-border); padding: .3rem .5rem; text-align: left; }
.p9piq-ai-table th { background: var(--piq-tint); font-weight: 500; }

/* ── Saved-analyses toolbar ("My Analyses" / Save / Save as new) ───────── */
.p9piq-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  background: var(--piq-surface-2);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: var(--piq-shadow);
  padding: .55rem .75rem;
  margin-bottom: 1.1rem;
  position: relative;
}
.p9piq-toolbar-left,
.p9piq-toolbar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}

.p9piq-saved-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--piq-gold-pale);
  color: var(--piq-gold);
  font-size: .68rem;
  font-weight: 700;
}
.p9piq-saved-count:empty { display: none; }

/* Spins next to "My Analyses" itself while loadSavedList()'s initial
   request is in flight (see property-iq.js) — visible feedback that the
   count badge/panel aren't just empty yet, without needing to open the
   panel to find out. Hidden the rest of the time (toggled via
   #p9piq-saved-toggle.is-loading), including while the badge/list already
   have real data to show. Reuses the existing piq-spin keyframe. */
.p9piq-saved-toggle-spinner {
  display: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--piq-gold-pale);
  border-top-color: var(--piq-gold);
  border-radius: 50%;
  animation: piq-spin 0.7s linear infinite;
}
#p9piq-saved-toggle.is-loading .p9piq-saved-toggle-spinner { display: inline-block; }
#p9piq-saved-toggle.is-loading .p9piq-saved-count { display: none; }

.p9piq-saved-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--piq-white);
  border: 1px solid var(--piq-border);
  border-radius: var(--piq-radius);
  box-shadow: var(--piq-shadow-md);
  z-index: 30;
}
.p9piq-saved-panel-head {
  padding: .6rem .8rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--piq-muted);
  border-bottom: 1px solid var(--piq-border);
}
.p9piq-saved-list { list-style: none; margin: 0; padding: 0; }
.p9piq-saved-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .4rem .15rem .8rem;
  border-bottom: 1px solid var(--piq-border);
}
.p9piq-saved-item:last-child { border-bottom: none; }
.p9piq-saved-item.is-current { background: var(--piq-gold-pale); }
.p9piq-saved-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  background: none;
  border: none;
  padding: .55rem 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.p9piq-saved-name {
  font-size: .82rem;
  color: var(--piq-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.p9piq-saved-date { font-size: .68rem; color: var(--piq-muted-2); }
.p9piq-saved-rename,
.p9piq-saved-del {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: var(--piq-radius-sm);
  color: var(--piq-muted-2);
  cursor: pointer;
}
.p9piq-saved-rename:hover { background: var(--piq-gold-pale); color: var(--piq-gold); }
.p9piq-saved-del:hover { background: var(--piq-bad-bg); color: var(--piq-bad-fg); }
.p9piq-saved-empty {
  padding: 1rem .8rem;
  font-size: .78rem;
  color: var(--piq-muted);
  text-align: center;
}

.p9piq-saved-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.1rem .8rem;
  font-size: .78rem;
  color: var(--piq-muted);
  text-align: center;
}
.p9piq-saved-loading-spinner {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--piq-gold-pale);
  border-top-color: var(--piq-gold);
  border-radius: 50%;
  animation: piq-spin 0.7s linear infinite;
}

.p9piq-save-msg {
  font-size: .76rem;
  font-weight: 600;
  min-height: 1em;
}

/* Matches Quick Proforma's .p9pf-save-new — smaller & not bold, unlike the
   generic .p9piq-link-btn base it inherits from. */
#p9piq-save-new-btn {
  font-size: 12px;
  font-weight: normal;
  color: var(--piq-muted);
}
#p9piq-save-new-btn:hover { color: var(--piq-gold); }

@media (max-width: 640px) {
  .p9piq-toolbar { flex-direction: column; align-items: stretch; }
  .p9piq-toolbar-right { flex-wrap: wrap; }
  .p9piq-saved-panel { left: 0; right: 0; width: auto; }
}