/* ==========================================================================
   LUFLY — bathroom planner
   --------------------------------------------------------------------------
   1. .planner       the page: hero, the two columns (chat + plan)
   2. .planner-*     the conversation: bubbles, choices, the rotating line
   3. .planp-*       the plan: facts, item list, catalogue picks, handoff
   4. .plan-svg      the scaled drawing (its own classes, print-safe)
   5. @media print   only the plan leaves the printer

   Built from the design-system tokens, so light and dark both work without a
   second palette.
   ========================================================================== */

.planner {
  --planner-gap: var(--space-8);
  position: relative;
  padding: var(--space-16) 0 var(--space-20);
  background:
    radial-gradient(120% 80% at 12% -10%, var(--ds-primary-tint), transparent 60%),
    var(--ds-bg);
  color: var(--ds-text);
}

.planner-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---------- hero ---------- */

.planner-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
  padding: var(--space-8);
  margin-bottom: var(--planner-gap);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-xl);
  background: var(--ds-glass-bg);
  backdrop-filter: var(--ds-glass-blur);
  overflow: hidden;
}

.planner-beam {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, transparent, var(--ds-primary), transparent);
  opacity: 0.85;
}

.planner-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.planner-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.planner-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--ds-text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.planner-trail {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.planner-trail-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--ds-text-muted);
  background: var(--ds-surface);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.planner-trail-step span {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.planner-trail-step.is-on {
  color: var(--ds-primary-text);
  background: var(--ds-primary);
  border-color: transparent;
}

.planner-trail-step.is-done {
  color: var(--ds-primary);
  border-color: var(--ds-primary-line);
  background: var(--ds-primary-soft);
}

/* ---------- the two columns ---------- */

.planner-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: var(--planner-gap);
  align-items: start;
}

.planner-chat {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-xl);
  background: var(--ds-surface);
  box-shadow: var(--shadow-1);
}

.planner-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-height: min(64vh, 620px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.planner-msg {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  animation: planner-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.planner-msg.is-visitor {
  justify-content: flex-end;
}

@keyframes planner-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.planner-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  color: var(--ds-primary);
  background: var(--ds-primary-soft);
}

.planner-avatar svg {
  width: 18px;
  height: 18px;
}

.planner-bubble {
  max-width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-xs);
  background: var(--ds-surface-alt);
  font-size: 15px;
  line-height: 1.6;
}

.planner-msg.is-visitor .planner-bubble {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-xs);
  border-color: transparent;
  background: var(--ds-primary);
  color: var(--ds-primary-text);
}

.planner-msg.is-plain .planner-bubble {
  border-top-left-radius: var(--radius-lg);
}

.planner-bubble p {
  margin: 0 0 var(--space-3);
}

.planner-bubble p:last-child {
  margin-bottom: 0;
}

.planner-q {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.planner-hint {
  margin: 0 0 var(--space-4);
  color: var(--ds-text-muted);
  font-size: 14px;
}

.planner-progress {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

/* ---------- the choices ---------- */

.planner-choices {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
}

.planner-choices.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-choices.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface);
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.planner-chip:hover:not(:disabled) {
  border-color: var(--ds-primary-line);
  background: var(--ds-primary-tint);
  transform: translateY(-1px);
}

.planner-chip:focus-visible {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 2px;
}

.planner-chip:disabled {
  opacity: 0.55;
  cursor: default;
}

.planner-chip.is-ghost {
  color: var(--ds-primary);
  border-style: dashed;
  border-color: var(--ds-primary-line);
  background: transparent;
}

.planner-chip-text {
  min-width: 0;
}

.planner-chip-icon svg {
  width: 22px;
  height: 22px;
  color: var(--ds-primary);
}

.planner-swatch {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 1px solid var(--ds-border);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.planner-swatch.is-modern-chrome {
  background: linear-gradient(135deg, #f4f6f8, #c9d2d8 45%, #eef2f4);
}

.planner-swatch.is-modern-matte {
  background: linear-gradient(135deg, #3a3f44, #1d2024);
}

.planner-swatch.is-classic-chrome {
  background: linear-gradient(135deg, #efe4d2, #c9b391 55%, #f6efe2);
}

.planner-swatch.is-minimal-steel {
  background: linear-gradient(135deg, #e2e6e8, #a9b3b7 50%, #dfe4e6);
}

/* typing a size of your own */
.planner-numbers {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ds-text-muted);
}

.planner-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 15px;
}

.planner-field input:focus-visible {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 1px;
}

.planner-submit {
  grid-column: 1 / -1;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--ds-primary);
  color: var(--ds-primary-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.planner-error {
  margin: var(--space-3) 0 0;
  color: var(--ds-danger);
  font-size: 13px;
}

/* ---------- the line that rotates while the server works ---------- */

.planner-thinking {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-5);
  border: 1px dashed var(--ds-primary-line);
  border-radius: var(--radius-lg);
  background: var(--ds-primary-tint);
  color: var(--ds-text-muted);
  font-size: 14px;
}

.planner-thinking-text {
  transition: opacity 220ms ease;
}

.planner-thinking.is-fresh .planner-thinking-text {
  animation: planner-line 400ms ease both;
}

@keyframes planner-line {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.planner-dots {
  display: inline-flex;
  gap: 4px;
}

.planner-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ds-primary);
  animation: planner-pulse 1.2s infinite ease-in-out;
}

.planner-dots i:nth-child(2) { animation-delay: 0.16s; }
.planner-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes planner-pulse {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- the board on the right ---------- */

.planner-board {
  min-height: 320px;
  scroll-margin-top: 96px;
}

.planner-board-empty {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  border: 1px dashed var(--ds-border);
  border-radius: var(--radius-xl);
  color: var(--ds-text-muted);
  text-align: center;
}

.planner-board-icon svg {
  width: 46px;
  height: 46px;
  color: var(--ds-primary);
  opacity: 0.7;
}

.planner-board-plan.is-ready {
  animation: planner-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- the plan itself ---------- */

.planp {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-xl);
  background: var(--ds-surface);
  box-shadow: var(--shadow-1);
}

.planp-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.planp-title {
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.planp-summary {
  margin: 0;
  color: var(--ds-text-muted);
}

.planp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-alt);
}

.planp-fact dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.planp-fact dd {
  margin: 4px 0 0;
  font-size: 15px;
}

.planp-h3 {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.planp-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.planp-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
}

.planp-n {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-primary);
}

.planp-item-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 6px;
  font-weight: 600;
}

.planp-zone {
  font-size: 12px;
  font-weight: 400;
  color: var(--ds-text-muted);
}

.planp-zone::before {
  content: "· ";
}

.planp-item-size {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: 14px;
}

.planp-size-label {
  color: var(--ds-text-muted);
}

.planp-size-value {
  font-variant-numeric: tabular-nums;
}

.planp-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.planp-pick {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface-alt);
}

.planp-pick-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 1;
  background: var(--ds-surface);
}

.planp-pick-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.planp-pick-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.planp-pick-name:hover {
  color: var(--ds-primary);
}

.planp-pick-size,
.planp-pick-link {
  display: block;
  font-size: 12px;
  color: var(--ds-text-muted);
}

.planp-pick-link {
  margin-top: 2px;
  color: var(--ds-primary);
}

.planp-pick .favbtn {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  --fav-size: 30px;
}

/* the drawing */

.planp-draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.planp-canvas {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-alt);
  overflow-x: auto;
}

.planp-note {
  margin: var(--space-3) 0 0;
  color: var(--ds-text-muted);
  font-size: 13px;
}

.planp-clearance {
  margin: var(--space-3) 0 0;
  padding: 12px var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
}

.planp-clearance.is-ok {
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

.planp-clearance.is-tight {
  background: var(--ds-warning-soft);
  color: var(--ds-warning);
}

/* the picture */

.planp-render-out {
  margin-top: var(--space-4);
  color: var(--ds-text-muted);
  font-size: 14px;
}

.planp-render-out.is-image {
  margin-top: var(--space-4);
}

.planp-render-out img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ds-border);
}

/* handing the plan over */

.planp-handoff-actions {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  margin-top: var(--space-4);
}

.planp-mail {
  display: flex;
  gap: var(--space-3);
  align-items: end;
  flex-wrap: wrap;
}

.planp-field {
  display: grid;
  gap: 6px;
  flex: 1 1 220px;
  font-size: 13px;
  color: var(--ds-text-muted);
}

.planp-field input {
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 15px;
}

.planp-field input:focus-visible {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 1px;
}

.planp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface);
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.planp-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--ds-primary-line);
}

.planp-btn.is-primary {
  border-color: transparent;
  background: var(--ds-primary);
  color: var(--ds-primary-text);
}

.planp-btn.is-whatsapp {
  border-color: transparent;
  background: #1f9d55;
  color: #fff;
}

.planp-btn.is-quiet {
  background: var(--ds-surface-alt);
}

.planp-btn.is-ghost {
  border-style: dashed;
  background: transparent;
  color: var(--ds-text-muted);
}

.planp-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.planp-phone {
  margin: var(--space-3) 0 0;
  color: var(--ds-text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.planp-mail-state {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  color: var(--ds-text-muted);
}

.planp-mail-state.is-ok {
  color: var(--ds-success);
}

.planp-restart {
  justify-self: start;
}

/* ---------- toast ---------- */

.planner-toast {
  position: fixed;
  inset-inline: 0;
  bottom: 24px;
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--ds-border);
  background: var(--ds-glass-bg-strong);
  backdrop-filter: var(--ds-glass-blur);
  box-shadow: var(--shadow-2, var(--shadow-1));
  font-size: 14px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.planner-toast.is-on {
  opacity: 1;
  transform: none;
}

/* ---------- the drawing (plain SVG, prints on its own) ---------- */

.plan-svg {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.plan-bg {
  fill: var(--ds-surface);
}

.plan-room {
  fill: none;
  stroke: var(--ds-text);
  stroke-width: 3;
}

.plan-block rect {
  fill: var(--ds-primary-soft);
  stroke: var(--ds-primary);
  stroke-width: 1.6;
}

.plan-block text {
  fill: var(--ds-text);
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.plan-door {
  stroke: var(--ds-surface);
  stroke-width: 6;
}

.plan-swing {
  fill: none;
  stroke: var(--ds-text-muted);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}

.plan-leaf {
  stroke: var(--ds-text);
  stroke-width: 2;
  stroke-linecap: round;
}

.plan-window {
  stroke: var(--ds-primary);
  stroke-width: 6;
}

.plan-dim line,
.plan-scale line {
  stroke: var(--ds-text-muted);
  stroke-width: 1;
}

.plan-dim text,
.plan-scale text {
  fill: var(--ds-text-muted);
  font-size: 12px;
  text-anchor: middle;
}

.plan-scale text {
  text-anchor: end;
}

/* ---------- the picture: promised, not offered (free quota) ---------- */

.planp-pill {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ds-primary-line);
  border-radius: var(--radius-full);
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}

.planp-render.is-soon .planp-note {
  max-width: 60ch;
}

/* ---------- "does it fit my bathroom?" ---------- */

.planp-fit {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-5);
  border: 1px solid var(--ds-primary-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 100% at 0% 0%, var(--ds-primary-tint), transparent 62%),
    var(--ds-surface-alt);
}

.planp-fit .planp-note {
  max-width: 62ch;
}

.planp-fit-about {
  margin: 0;
  font-size: 13px;
  color: var(--ds-text-muted);
}

.planp-fit-about strong {
  color: var(--ds-text);
  font-weight: 600;
}

.planp-fit-out {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-xs);
  background: var(--ds-surface);
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-line;
}

.planp-fit-out.is-loading {
  color: var(--ds-text-muted);
}

/* ==========================================================================
   the floating chat — the planner in the corner of every page
   --------------------------------------------------------------------------
   A bubble opens the same conversation as /planner inside a panel that can be
   expanded or dragged to any size, remembered per browser.
   ========================================================================== */

.aichat {
  --aichat-w: 396px;
  --aichat-h: min(620px, calc(100vh - 148px));
}

.aichat-fab {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 92;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* the words hold the start of the bar and the mark its end: at rest the two
     are neighbours (the bar is only as wide as they are), and as the bar
     stretches the auto margin carries the mark out to the right — the label
     stays where it is, which is what makes the growth read as one movement */
  padding: 8px 10px 8px 20px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-full);
  background: var(--ds-glass-bg-strong);
  backdrop-filter: var(--ds-glass-blur);
  color: var(--ds-text);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  /* the width is part of the motion: the button stretches out to the width of
     the panel it is about to become */
  width: auto;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms ease, border-color 200ms ease, opacity 200ms ease;
}

/* Pointing at it is enough to show what it becomes. Mouse only: a touch screen
   would keep the stretched state after a tap. */
@media (hover: hover) {
  .aichat-fab:hover {
    width: var(--aichat-fab-w, var(--aichat-w));
    max-width: calc(100vw - 40px);
  }
}

/* and it stays that wide for as long as the chat is open — the panel grows out
   of it, so the bar is the chat's own base */
.aichat.is-open .aichat-fab {
  width: var(--aichat-fab-w, var(--aichat-w));
  max-width: calc(100vw - 40px);
  border-color: var(--ds-primary-line);
}

.aichat-fab:hover {
  transform: translateY(-2px);
  border-color: var(--ds-primary-line);
  box-shadow: var(--shadow-3, var(--shadow-2));
}

.aichat-fab:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 3px;
}

.aichat-fab-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--ds-primary);
  color: var(--ds-primary-text);
}

.aichat-fab-icon svg {
  width: 20px;
  height: 20px;
}

.aichat-fab-text {
  display: grid;
  text-align: start;
  line-height: 1.25;
}

.aichat-fab-text strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.aichat-fab-text em {
  font-size: 11.5px;
  font-style: normal;
  color: var(--ds-text-muted);
}

/* the little "we are here" light rides on the icon, so the bar's own width can
   change without it drifting */
.aichat-fab-dot {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--ds-success);
  box-shadow: 0 0 0 2px var(--ds-primary);
  animation: aichat-ping 2.8s ease-out infinite;
}

@keyframes aichat-ping {
  0%, 62%, 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
  22% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ds-success) 22%, transparent); }
}

/* the "mail it to me" sheet lives in the same corner: give it the floor */
body.has-favmail .aichat-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.aichat-panel {
  position: fixed;
  inset-block-end: 92px;
  inset-inline-end: 24px;
  z-index: 94;
  display: flex;
  flex-direction: column;
  width: var(--aichat-w);
  max-width: calc(100vw - 40px);
  height: var(--aichat-h);
  max-height: calc(100vh - 124px);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-xl);
  background: var(--ds-surface);
  box-shadow: var(--shadow-3, var(--shadow-2));
  overflow: hidden;
  /* It is unrolled out of the launcher: the bar under it is already the panel's
     own width, and the panel's bottom edge is where the bar is, so revealing it
     from that edge upward reads as the chat being formed out of the button.
     Nothing inside is scaled, so no text is ever squashed on the way in. */
  animation: aichat-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.aichat-panel[hidden] {
  display: none;
}

@keyframes aichat-in {
  0% {
    clip-path: inset(100% 0 0 0 round var(--radius-xl));
    transform: translateY(10px);
    opacity: 0.5;
  }
  45% { opacity: 1; }
  100% {
    clip-path: inset(0 0 0 0 round var(--radius-xl));
    transform: translateY(0);
    opacity: 1;
  }
}

/* Closing is the same move backwards: the top edge comes down and the panel is
   rolled back into the bar, which then returns to its own size. The class stays
   on until the frame is over — frontend/assistant/assistant.js hides the panel
   on animationend, and keeps a timer as the safety net. */
.aichat.is-closing .aichat-panel {
  animation: aichat-out 320ms cubic-bezier(0.4, 0, 0.7, 0.3) both;
  pointer-events: none;
}

@keyframes aichat-out {
  0% {
    clip-path: inset(0 0 0 0 round var(--radius-xl));
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(100% 0 0 0 round var(--radius-xl));
    transform: translateY(8px);
    opacity: 0.75;
  }
}

.aichat.is-wide .aichat-panel {
  width: min(1020px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 124px));
}

.aichat.is-resizing .aichat-panel {
  animation: none;
  transition: none;
}

body.is-chat-resizing {
  cursor: nwse-resize;
}

.aichat-grip {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-start-start-radius: var(--radius-lg);
  cursor: nwse-resize;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.aichat-grip::before {
  content: '';
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 9px;
  width: 10px;
  height: 10px;
  border-block-start: 1.5px solid var(--ds-text-muted);
  border-inline-start: 1.5px solid var(--ds-text-muted);
  border-start-start-radius: 4px;
}

.aichat-grip:hover {
  opacity: 1;
}

.aichat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 12px 12px 44px;
  border-block-end: 1px solid var(--ds-border);
  background: var(--ds-glass-bg-strong);
  backdrop-filter: var(--ds-glass-blur);
}

.aichat-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
}

.aichat-mark svg {
  width: 18px;
  height: 18px;
}

.aichat-head-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.aichat-head-text strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aichat-head-text em {
  font-size: 11.5px;
  font-style: normal;
  color: var(--ds-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aichat-icon-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 12px);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.aichat-icon-btn svg {
  width: 16px;
  height: 16px;
}

.aichat-icon-btn:hover {
  border-color: var(--ds-border);
  background: var(--ds-surface-alt);
  color: var(--ds-text);
}

.aichat-icon-btn:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 1px;
}

/* The way out, said plainly. The visitor should not have to find the launcher
   again to put the chat away, so closing is a button of its own — visible at
   rest, not only on hover. */
.aichat-icon-btn[data-aichat-close] {
  width: 34px;
  height: 34px;
  border-color: var(--ds-border);
  background: var(--ds-surface-alt);
  color: var(--ds-text);
}

.aichat-icon-btn[data-aichat-close]:hover {
  border-color: var(--ds-primary-line);
  background: var(--ds-primary-soft);
}

.aichat-about {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 9px var(--space-5);
  border-block-end: 1px solid var(--ds-border);
  background: var(--ds-primary-tint);
  font-size: 12.5px;
  color: var(--ds-text-muted);
}

.aichat-about-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.aichat-about strong {
  color: var(--ds-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aichat-body {
  flex: 1;
  min-height: 0;
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.aichat .planner-grid.is-chat {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.aichat.is-wide .planner-grid.is-chat {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
}

/* inside the panel the chat is the panel, not a card of its own */
.aichat .planner-chat {
  position: static;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.aichat .planner-log {
  max-height: none;
  overflow: visible;
}

.aichat .planner-board {
  min-height: 0;
}

.aichat .planner-board-empty {
  padding: var(--space-10) var(--space-5);
  border-radius: var(--radius-lg);
}

.aichat .planner-board-icon svg {
  width: 34px;
  height: 34px;
}

.aichat .planp {
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.aichat .planp-facts {
  grid-template-columns: minmax(0, 1fr);
}

.aichat .planp-handoff-actions {
  grid-template-columns: minmax(0, 1fr);
}

.aichat .plan-svg {
  max-width: 100%;
}

.aichat .planner-toast {
  z-index: 96;
}

.aichat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  border-block-start: 1px solid var(--ds-border);
  background: var(--ds-surface-alt);
  font-size: 11.5px;
  color: var(--ds-text-muted);
}

.aichat-foot-link {
  color: var(--ds-primary);
  text-decoration: none;
  white-space: nowrap;
}

.aichat-foot-link:hover {
  text-decoration: underline;
}

/* the box, in the chat's footer: a link and the number of pieces in it */
.aichat-foot-link.is-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.aichat-foot-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ds-primary) 14%, transparent);
  color: var(--ds-primary);
  font-size: 10.5px;
  font-weight: 600;
}

/* ---------- wider phones hold two columns ---------- */

@media (max-width: 1000px) {
  .planner-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .planner-chat {
    position: static;
  }

  .planner-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- phones: the chat takes the screen ---------- */

@media (max-width: 720px) {
  .aichat-fab,
  .aichat.is-open .aichat-fab {
    inset-block-end: 18px;
    inset-inline-end: 18px;
    gap: 0;
    width: 54px;
    padding: 8px;
  }

  .aichat-fab-text {
    display: none;
  }

  .aichat-panel,
  .aichat.is-wide .aichat-panel {
    inset: 0;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .aichat-grip {
    display: none;
  }

  .aichat-head {
    padding-inline-start: var(--space-4);
    padding-block-start: max(12px, env(safe-area-inset-top));
  }

  .aichat .planner-grid.is-chat,
  .aichat.is-wide .planner-grid.is-chat {
    grid-template-columns: minmax(0, 1fr);
  }

  .aichat-body {
    padding: var(--space-4);
  }

  .aichat-foot {
    padding-block-end: max(10px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .planner {
    padding-top: var(--space-10);
  }

  .planner-inner {
    padding: 0 var(--space-4);
  }

  .planp {
    padding: var(--space-5);
  }

  .planp-handoff-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .planner-choices.is-four {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a visitor who asked for less motion gets a plain show and hide */
@media (prefers-reduced-motion: reduce) {
  .aichat-panel,
  .aichat.is-closing .aichat-panel {
    animation: none !important;
  }

  .aichat.is-closing .aichat-panel {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planner-msg,
  .planner-board-plan.is-ready,
  .planner-thinking.is-fresh .planner-thinking-text,
  .planner-dots i {
    animation: none;
  }
}

/* ---------- print: the plan, and nothing else ---------- */

@media print {
  .site-header,
  .site-footer,
  .planner-hero,
  .planner-chat,
  .planner-foot,
  .planner-toast,
  .planner-board-empty,
  .planp-render,
  .planp-handoff,
  .planp-fit,
  .planp-restart,
  .favbtn,
  .aichat-fab,
  .aichat-head,
  .aichat-foot,
  .aichat-grip {
    display: none !important;
  }

  /* a closed panel has nothing to print */
  .aichat-panel[hidden] {
    display: none !important;
  }

  /* printing from the floating chat prints the plan, not the panel */
  .aichat,
  .aichat-panel,
  .aichat-body {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: none !important;
  }

  .aichat .planner-grid.is-chat {
    display: block;
  }

  .planner,
  .planner-board,
  .planp {
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
    color: #000;
  }

  .planner-grid {
    display: block;
  }

  .planp-canvas,
  .planp-item,
  .planp-facts {
    break-inside: avoid;
    border-color: #999;
    background: #fff;
  }

  .plan-svg {
    max-width: 100%;
  }
}