/* Shared styles — design tokens + chrome used by every page (home, property).
   Page-specific styles stay inline in each page's <style>. */

:root {
  --rausch: #FF385C; --ink: #222222; --muted: #717171;
  --border: #DDDDDD; --bg: #FFFFFF; --soft: #F7F7F7;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 "Inter", "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* column layout so the footer stays pinned to the bottom on short pages */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
/* ---- header ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(235,235,235,.7);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--rausch); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.topnav { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.topnav a {
  color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500;
  border-radius: 999px; padding: 7px 13px; transition: background .15s;
}
.topnav a:hover { background: rgba(0,0,0,.05); }
.topbar .tagline { color: var(--muted); font-size: .85rem; margin-left: auto; }

/* width:100% matters: body is a flex column, and auto side margins would
   otherwise disable stretch and shrink-wrap the page to its content */
#root { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px 140px; }

/* ---- footer (injected by chrome.js) ---- */
/* The big bottom padding keeps the links readable above the chat dock,
   which floats over the footer's lower half. */
.site-footer {
  margin-top: auto; /* pin to the bottom when the page is shorter than the viewport */
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(235,235,235,.7);
}
.site-footer-inner { max-width: 1080px; margin: 0 auto; padding: 22px 24px 130px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 8px; }
.footer-links a { color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 500; }
.footer-links a:hover { text-decoration: underline; }
.footer-note { margin: 0; color: var(--muted); font-size: .78rem; }
.footer-note a { color: var(--ink); font-weight: 600; text-decoration: none; }
.footer-note a:hover { text-decoration: underline; }

/* ---- shared panels & text ---- */
.summary {
  background: var(--soft); border-radius: 14px; padding: 14px 18px;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.summary a { color: var(--rausch); font-weight: 600; text-decoration: none; }
.summary a:hover { text-decoration: underline; }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.chips .label { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.chip {
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
  font-size: .82rem; font-weight: 500; background: var(--bg);
}
.chip.changed { border-color: var(--rausch); color: var(--rausch); background: #FFF5F7; }

/* ---- busy / error ---- */
/* Claude-style loader: rotating spark + shimmering label */
.thinking {
  display: flex; align-items: center; gap: 10px; margin-top: 24px;
  width: fit-content; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(235,235,235,.7);
  border-radius: 999px; padding: 9px 16px; box-shadow: var(--shadow);
}
.spark { width: 18px; height: 18px; flex: none; color: var(--rausch);
  animation: spark-spin 1.8s cubic-bezier(.6,.1,.4,.9) infinite; }
@keyframes spark-spin {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(.68); }
  100% { transform: rotate(360deg) scale(1); }
}
.thinking-text {
  font-size: .9rem; font-weight: 600;
  background: linear-gradient(90deg, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .spark, .thinking-text { animation: none; }
  .thinking-text { background: none; color: var(--muted); -webkit-text-fill-color: currentColor; }
}
.error {
  background: #FFF0F1; border: 1px solid #FFD6DB; color: #C13515;
  border-radius: 10px; padding: 10px 14px; font-size: .88rem; margin-top: 18px;
}

/* ---- chat dock ----
   The prompt input is pinned to one place — bottom centre, floating over
   everything — with the agent's message bubble attached above it. The
   bubble is user-minimisable (chevron in its header); the input never
   moves or hides. Both pages share this chrome; only the bubble's
   contents differ (latest reply on the home page, the full thread on the
   property page). */
.dock {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  padding: 0 24px calc(18px + env(safe-area-inset-bottom));
  pointer-events: none; /* only the stack itself catches clicks */
}
.dock-stack { max-width: 720px; margin: 0 auto; pointer-events: auto; }

.dock-bubble {
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 30px rgba(0,0,0,.12);
  overflow: hidden;
  animation: bubble-in .18s ease-out;
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dock-bubble { animation: none; } }
.bubble-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 8px 14px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.bubble-head .avatar-mini {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--rausch); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bubble-head .avatar-mini svg { width: 14px; height: 14px; }
.bubble-head .who {
  font-size: .76rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.bubble-min {
  margin-left: auto; flex: none; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: none; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bubble-min:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.bubble-min svg { width: 16px; height: 16px; }
.bubble-body {
  padding: 14px 16px; max-height: 44vh; overflow-y: auto;
  overscroll-behavior: contain;
}
/* restore chip — the only trace of the bubble while minimised */
.dock-restore {
  display: flex; align-items: center; gap: 7px; margin: 0 6px 8px auto;
  font: 600 .8rem inherit; font-family: inherit; color: var(--ink);
  background: rgba(255,255,255,.97); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  box-shadow: var(--shadow);
}
.dock-restore:hover { box-shadow: var(--shadow-hover); }
.dock-restore .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rausch); }

.composer-inner {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 6px 6px 22px; box-shadow: var(--shadow-hover);
  transition: border-color .15s, box-shadow .15s;
}
.composer-inner:focus-within {
  border-color: rgba(230,30,77,.4);
  box-shadow: var(--shadow-hover), 0 0 0 4px rgba(230,30,77,.08);
}
/* squared top while the bubble sits attached on top of it */
.composer-inner.attached {
  border-radius: 0 0 22px 22px; border-top: 1px solid #F0F0F0;
}
.composer-inner input { flex: 1; border: none; outline: none; font: inherit; font-size: 16px; background: transparent; padding: 10px 0; min-width: 0; }
.composer-inner button {
  border: none; border-radius: 999px; width: 44px; height: 44px; flex: none;
  background: linear-gradient(90deg, #E61E4D, #E31C5F 50%, #D70466);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, filter .15s;
}
.composer-inner button:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.06); }
.composer-inner button:disabled { background: #E8E8E8; cursor: default; }
.composer-inner button svg { width: 18px; height: 18px; }

/* thinking / error lose their floating-pill margins inside the bubble */
.bubble-body .thinking, .bubble-body .error { margin-top: 0; }

/* ---- responsive: tablet (≤ 900px) ---- */
@media (max-width: 900px) {
  .topbar-inner { padding: 12px 18px; }
  .topbar .tagline { display: none; } /* menu takes priority over the tagline */
  .topnav { margin-left: auto; }
  #root { padding: 0 18px 130px; }
  .site-footer-inner { padding: 18px 18px 120px; }
  .dock { padding: 0 18px calc(14px + env(safe-area-inset-bottom)); }
}

/* ---- responsive: phone (≤ 600px) ---- */
@media (max-width: 600px) {
  .brand { font-size: 1.05rem; white-space: nowrap; }
  .brand svg { width: 26px; height: 26px; }
  /* menu links (dummy) don't fit next to the brand — footer still has them;
     a one-line topbar keeps the header at ~50px, which the home console's
     sticky offset relies on */
  .topnav { display: none; }
  #root { padding: 0 12px 116px; }
  .site-footer-inner { padding: 16px 12px 110px; }
  .footer-links { gap: 4px 16px; }
  .dock { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .bubble-body { max-height: 38vh; padding: 12px; }
  .composer-inner { padding-left: 16px; }
  .composer-inner button { width: 40px; height: 40px; }
  .summary { padding: 12px 14px; }
  .chip { padding: 5px 10px; font-size: .78rem; }
  .photo-credit { font-size: .6rem; right: 6px; bottom: calc(2px + env(safe-area-inset-bottom)); }
}