/* house.css — stanmaxx companion house page styles.
   The cozy house itself is drawn inline by house.jsx (SVG + black-borders
   pixel-toy style). Everything *around* the house — top bar, sidebar,
   compose form, sheets — uses the same Liquid Glass tokens as the
   linktree (glass.css) so the two pages feel like one product.
   Day sky picks up the owner's --c1..--c4 palette via .house-stage-day.
   Night sky is its own gradient (the cozy starfield) since a dark mode
   on top of the user's gradient would look muddy. */

html, body, #root {
  min-height: 100lvh;
  min-height: 100dvh;
}
body.house-page {
  margin: 0;
  font-family: "Fredoka", system-ui, -apple-system, "SF Pro Text",
               "Helvetica Neue", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  /* Stop scroll-chaining/rubber-band from causing the body to "twitch"
     when the user flings the page down — without this, iOS reflows the
     entire document when the URL bar collapses and the dvh changes. */
  overscroll-behavior-y: contain;
}

/* ── Whole-page background ───────────────────────────────────────────────
   The house page does NOT use the shared animated gradient (.bg) for the
   page canvas. Instead:
     · the SKY is painted only inside the stage (.house-stage-day for day,
       the House component's own dark gradient for night), and
     · everything BELOW / AROUND the house is solid "outdoor" colour set on
       the body, keyed by [data-house-mode].
   This is what makes night mode cover the entire screen (no day-gradient
   band under the house) and removes the white strip that used to show at
   the very bottom on iOS. */
body.house-page .bg { display: none !important; }

/* Overscroll / rubber-band canvas behind the body. One colour for both
   modes — a deep grass tone reads as "ground" either way and is only ever
   glimpsed at the extreme edges. (house.css is loaded only by the house
   page, so this doesn't affect the linktree pages.) */
html { background: #1F3A2A; }

body.house-page[data-house-mode="day"]   { background: #7FB672; }
body.house-page[data-house-mode="night"] { background: #0B132E; }
/* Fallback before the mode is known (first paint of the loader). */
body.house-page:not([data-house-mode]) { background: #0B132E; }

/* ── Layout ─────────────────────────────────────────────────────────────
   Two columns on desktop: the house stage (left) and the wall sidebar
   (right). Stacks on mobile. We keep the stage scrollable on its own so
   the sidebar stays visible while you pan through floors. */

.house-shell {
  position: relative;
  min-height: 100lvh;
  width: 100%;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 920px) {
  .house-shell {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 400px);
    gap: 22px;
    padding: 0 22px;
  }
}

/* ── Top bar ───────────────────────────────────────────────────────────
   Floats over the stage; switches to a denser tint at night so it stays
   readable on the dark sky. Mirrors landing.html's nav-action chip. */

.house-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding:
    max(14px, calc(env(safe-area-inset-top) + 10px))
    16px
    12px;
  pointer-events: none;
}
.house-top > * { pointer-events: auto; }

.house-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: .5px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  transition: background .15s, transform .12s;
}
.house-brand:hover { background: rgba(255,255,255,.28); }
.house-brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3),
              0 0 14px 2px rgba(255,255,255,.55);
}
.house-brand .muted { opacity: .7; font-weight: 500; }
.house-brand .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  opacity: .82;
}

.house-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.house-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  min-width: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: .5px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .12s;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.house-chip:hover { background: rgba(255,255,255,.30); }
.house-chip:active { transform: translateY(1px); }
.house-chip.is-active {
  background: rgba(255,255,255,.85);
  color: #1c0828;
  border-color: rgba(255,255,255,.85);
  text-shadow: none;
}
.house-chip.is-icon { padding: 0; width: 38px; }
.house-chip-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E15B5B;
  color: #fff;
  border: 1.5px solid #111;
  border-radius: 999px;
  font-family: "Fredoka", system-ui;
  font-weight: 700;
  font-size: 10px;
  text-shadow: none;
  pointer-events: none;
}
.house-chip-wrap {
  position: relative;
  display: inline-flex;
}

/* Night styling — slightly more contrast so glass chips read on the
   dark cozy sky behind. */
.house-shell.is-night .house-brand,
.house-shell.is-night .house-chip {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
}
.house-shell.is-night .house-brand:hover,
.house-shell.is-night .house-chip:hover {
  background: rgba(255,255,255,.20);
}
.house-shell.is-night .house-chip.is-active {
  background: #FFE08A;
  color: #1c0828;
  border-color: #FFE08A;
}

/* ── Stage ─────────────────────────────────────────────────────────────
   The actual cozy house lives inside .house-stage. We anchor the house
   silhouette horizontally centered and let the canvas scroll vertically
   if there are many floors. */

.house-stage {
  position: relative;
  /* Lock to the LARGEST viewport size (100lvh) instead of the dynamic one
     (100dvh). Dynamic units shrink/grow as the iOS URL bar shows/hides
     during scroll, which reflows the stage and makes the page tremble
     during fast scrolling. 100lvh is fixed across that, so scrolling is
     smooth at the cost of a slight extra height behind the chrome —
     totally invisible since the stage just stays a tiny bit taller. */
  min-height: 100lvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* The owner-palette day sky lives behind everything else when night = off.
   We paint a multi-stop radial mix of the four user colors so the daytime
   matches the linktree page. At night we don't override anything — house.jsx
   draws its own cozy NightSky inline (with stars + moon) which only needs a
   neutral container. */
.house-stage-day {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 70% 12%, var(--c1) 0%, transparent 50%),
    radial-gradient(120% 80% at 18% 20%, var(--c2) 0%, transparent 55%),
    radial-gradient(120% 80% at 50% 95%, var(--c4) 0%, transparent 60%),
    linear-gradient(var(--grad-angle, 180deg),
      var(--c1) 0%, var(--c2) 38%, var(--c3) 70%, var(--c4) 100%);
  filter: saturate(var(--grad-intensity, 1));
}

.house-stage-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Pull the house down so the roof sits below the top bar. No bottom
     padding: the garden must sit flush at the stage's bottom edge so it
     meets the road/earth of the wall below with no sky strip between. */
  padding-top: 4px;
  padding-bottom: 0;
}

/* ── Sidebar (wall / replies) ──────────────────────────────────────────
   The wall of public replies sits OUT IN THE YARD, not on the gradient.
   The panel is "earth" (a grassy-soil ground), full-bleed so no gradient
   peeks around it, with a little dirt road across the top separating the
   garden (the house's ground, above) from the wall (below). The paper
   reply cards and the glass compose button still read clearly against it.
   At night the earth darkens to match the cozy night palette. */

.house-side {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
  border-radius: 0;
  border: 0;
  /* Day earth: grassy soil with a faint speckle for texture. */
  background:
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(180deg, #79AE6B 0%, #6B9E5E 38%, #6B8C4E 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
}
.house-shell.is-night .house-side {
  /* Night earth: deep grass / soil. */
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(180deg, #203A2A 0%, #1B3022 40%, #15261B 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
@media (min-width: 920px) {
  .house-side {
    position: sticky;
    top: 0;
    margin: 0;
    /* Same reasoning as .house-stage: lvh, not dvh, so the desktop sticky
       column doesn't bounce when the viewport resizes during scroll. */
    min-height: 100lvh;
    max-height: none;
    overflow: auto;
  }
}

/* Dirt road across the top of the earth — the separator between the
   garden and the wall. Full-bleed (cancels the side padding) with thick
   black edges (the toy/pixel look) and a dashed centre line. */
.house-road {
  position: relative;
  height: 34px;
  margin: 0 -16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid #111;
  background:
    /* dashed centre line */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.85) 0 16px, transparent 16px 34px) center / auto 4px no-repeat,
    /* dirt */
    linear-gradient(180deg, #D8C49A 0%, #C7B083 100%);
}
.house-shell.is-night .house-road {
  background:
    repeating-linear-gradient(90deg,
      rgba(255,240,200,.4) 0 16px, transparent 16px 34px) center / auto 4px no-repeat,
    linear-gradient(180deg, #5b4e34 0%, #4a3f2a 100%);
}
/* A little "the wall" signpost chip sitting on the road. */
.house-road-sign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #FFF8E0;
  border: 2px solid #111;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #111;
  color: #1c0828;
  font-family: "Fredoka", system-ui;
  font-weight: 700;
  font-size: 11px;
  text-shadow: none;
}

.house-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.house-side-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.house-side-sub {
  display: block;
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  opacity: .82;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.house-side-empty {
  padding: 18px 12px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  border: 1px dashed rgba(255,255,255,.6);
  border-radius: 10px;
  opacity: .78;
}

/* Wall posts — Polaroid-ish cards, slight rotation for charm. Honors the
   stanmaxx ink palette so they read on the gradient backdrop. */
.house-wall-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.house-wall-card {
  position: relative;
  padding: 12px 14px 14px;
  background: #FFFAF0;
  border: 2.5px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #111;
  color: #1c0828;
  text-shadow: none;
}
.house-wall-card:nth-child(2n)   { transform: rotate(-.5deg); }
.house-wall-card:nth-child(3n+1) { transform: rotate(.4deg); }
.house-wall-card-from {
  font-family: "Fredoka", system-ui;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: rgba(28,8,40,.55);
  text-transform: lowercase;
}
.house-wall-card-text {
  margin-top: 4px;
  font-family: "Caveat", cursive;
  font-size: 19px;
  line-height: 1.2;
  color: #1c0828;
}
.house-wall-card-time {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: rgba(28,8,40,.45);
  text-align: right;
}
.house-wall-card-del {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #111;
  border-radius: 50%;
  background: #E15B5B;
  color: #fff;
  font-family: "Fredoka", system-ui;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  box-shadow: 1.5px 1.5px 0 #111;
}

/* ── Compose form (visitor → owner letter) ────────────────────────────── */

.house-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
}

/* Embedded variant — when the composer lives inside a light Sheet (the
   visitor's "leave a note" dialog) rather than the dark sidebar. No glass
   panel, and dark text so labels/notes stay readable on white. */
.house-compose.is-embedded {
  padding: 0;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.house-compose.is-embedded label,
.house-compose.is-embedded .house-compose-meta,
.house-compose.is-embedded .house-compose-meta span { color: #4A3B33; opacity: .9; text-shadow: none; }
.house-compose.is-embedded .house-compose-status { color: #1c0828; text-shadow: none; }
.house-compose.is-embedded input,
.house-compose.is-embedded textarea {
  background: #fff;
  border: 1px solid rgba(74,59,51,.28);
}
.house-compose.is-embedded > div[style] { color: #6a5a52 !important; opacity: 1 !important; text-shadow: none !important; }
.house-compose.is-embedded > div[style] a { color: #1c0828 !important; }

/* Collapsed trigger — the only thing shown until the visitor taps to open
   the writing area. Keeps the sidebar compact by default (notably on
   mobile, where an always-open textarea would dominate the screen). Glass
   chip with the same recipe as .house-chip so it reads as a clear CTA. */
.house-compose-open {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
          backdrop-filter: blur(20px) saturate(170%);
  color: #fff;
  font-family: "Fredoka", system-ui;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,.16);
  transition: background .15s, transform .12s;
}
.house-compose-open:hover { background: rgba(255,255,255,.30); }
.house-compose-open:active { transform: translateY(1px); }

/* Header row of the open composer: the label + a close (×) button that
   folds the writing area back to the trigger. */
.house-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.house-compose-close {
  appearance: none;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.house-compose-close:hover { background: rgba(255,255,255,.32); }
.house-compose-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.house-compose label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
  opacity: .82;
}
.house-compose input,
.house-compose textarea {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  background: rgba(255,255,255,.9);
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: "Fredoka", system-ui;
  font-size: 14px;
  color: #1c0828;
  outline: none;
  text-shadow: none;
}
.house-compose textarea {
  font-family: "Caveat", cursive;
  font-size: 18px;
  line-height: 1.25;
  resize: vertical;
  min-height: 80px;
}
.house-compose-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  opacity: .82;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.house-compose-send {
  appearance: none;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, #1c0828 0%, #2a0d3a 100%);
  color: #fff;
  font-family: "Fredoka", system-ui;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 4px 14px -2px rgba(28,8,40,.32);
  transition: transform .14s, box-shadow .15s;
}
.house-compose-send:hover { transform: translateY(-1px); }
.house-compose-send:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.house-compose-anon-warn {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 10px;
  padding: 8px 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.house-compose-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
  opacity: .9;
}
.house-compose-status.is-sent  { color: #B7F4C7; }
.house-compose-status.is-error { color: #FBB6B6; }

/* Small color swatches for visitors to tint their avatar bubble. */
.house-compose-colors {
  display: flex;
  gap: 5px;
}
.house-compose-color {
  appearance: none;
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.house-compose-color.is-on {
  border-color: #fff;
  transform: scale(1.12);
}

/* Highlight band on the sidebar when the visitor just sent — fades out. */
.house-side.is-flash {
  animation: house-side-flash 1.6s ease;
}
@keyframes house-side-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(255,232,138,0); }
  30%  { box-shadow: inset 0 0 0 3px rgba(255,232,138,.9); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,232,138,0); }
}

/* ── Empty state (house disabled, owner mode) ──────────────────────────
   Same glass card recipe as the linktree's preview. The CTA mirrors the
   landing's primary button so the visual rhythm is identical. */

.house-empty {
  margin: 80px auto;
  max-width: 420px;
  padding: 24px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6),
    0 14px 30px -10px rgba(28,8,40,.25);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.16);
}
.house-empty h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.house-empty p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  opacity: .92;
}
.house-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  height: 50px;
  padding: 0 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1c0828 0%, #2a0d3a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 14px -2px rgba(28,8,40,.32);
  transition: transform .14s;
}
.house-empty-cta:hover { transform: translateY(-2px); }

/* ── Edit-mode floating chips (owner) ────────────────────────────────── */

.house-edit-bar {
  position: sticky;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 14px;
  z-index: 60;
}
.house-edit-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 2px solid #111;
  color: #1c0828;
  font-family: "Fredoka", system-ui;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 #111;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
}
.house-edit-pill.is-primary {
  background: #FFE08A;
}
.house-edit-pill.is-danger {
  background: #FBE0E0;
}

/* Disable text selection on the cozy stage so dragging to scroll doesn't
   highlight the SVG room labels. The sidebar keeps normal text selection
   so visitors can copy/paste wall replies. */
.house-stage,
.house-stage * { -webkit-user-select: none; user-select: none; }
.house-side,
.house-side * { -webkit-user-select: text; user-select: text; }

/* The save state banner near the edit bar — same vibe as edit.html's
   "Enregistré" pill. */
.house-savestate {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom));
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(28,8,40,.85);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  z-index: 90;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.house-savestate.is-visible { opacity: 1; }
.house-savestate.is-error { background: #7B2D2D; }