/* Stonehinge — Hinge-inspired aesthetic.
   White background, coral accent, photo-first cards, generous whitespace.
   Modern sans-serif throughout. Light + dark mode. */

:root {
  --bg: #ffffff;
  --bg-deep: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #f6f6f6;
  --surface-3: #ebebeb;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #8e8e8e;
  --line: #e6e6e6;
  --line-soft: #f0f0f0;
  --accent: #ff5864;
  --accent-hover: #e84a56;
  --accent-soft: #ffe5e8;
  --moss: #2bb673;
  --moss-soft: #dff3e6;
  --gold: #c5a572;
  --gold-soft: #f5e9d0;
  --danger: #d14848;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.14);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
}

/* Dark mode intentionally disabled — Stonehinge is a white-background app. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; }

.app-shell {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  padding-bottom: 80px;
}
.app-grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--surface) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.app-main { position: relative; flex: 1; z-index: 1; }

.muted { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.section-label { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

.v-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.v-button:disabled { opacity: 0.4; cursor: not-allowed; }
.v-button.primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.v-button.primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.v-button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.v-button.secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); }
.v-button.ghost { background: transparent; color: var(--ink-2); }
.v-button.ghost:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.v-button.small { min-height: 34px; padding: 7px 14px; font-size: 13px; border-radius: var(--radius-pill); }
.v-button.block { width: 100%; }

.field { display: block; margin-bottom: 18px; }
.field input, .field textarea, .field select {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.45; }
.hidden-input { display: none; }

/* ─── Login ─────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at top, #fff5f6 0%, var(--bg) 60%);
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 28px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.brand { text-align: center; margin-bottom: 28px; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 36px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(255, 88, 100, 0.3);
}
.brand-title { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 4px; }
.brand-tagline { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.login-form { margin-bottom: 16px; }
.login-form .submit { width: 100%; margin-top: 6px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emoji-option {
  aspect-ratio: 1;
  font-size: 22px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 2px solid transparent;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.emoji-option:hover { background: var(--surface-3); transform: scale(1.05); }
.emoji-option.selected { background: var(--accent-soft); border-color: var(--accent); transform: scale(1.05); }
.login-note {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}

.screen-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
}
.screen-title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; text-align: center; }
.header-spacer { width: 60px; }

.screen-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 16px;
}
.screen-intro { font-size: 13px; color: var(--ink-2); }

/* ─── Home ──────────────────────────────────────────────────────── */
.home-screen { padding-bottom: 8px; }
.home-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 4px; }
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-row .brand-mini {
  width: 32px; height: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.brand-row .brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.user-emoji {
  width: 32px;
  height: 32px;
  background: var(--surface-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.user-name { font-weight: 600; font-size: 13px; }

.hero { padding: 28px 20px 16px; }
.hero-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.hero-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 24px; }
.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  min-height: 96px;
}
.cta-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--ink-3); }
.cta-card.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cta-card.primary .cta-sub { color: rgba(255,255,255,0.85); }
.cta-glyph {
  font-size: 22px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--accent);
  margin-bottom: 8px;
}
.cta-card.primary .cta-glyph { background: rgba(255,255,255,0.2); color: #fff; }
.cta-title { font-size: 16px; font-weight: 700; }
.cta-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.cta-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 22px;
  text-align: center;
}
.cta-card.primary .cta-badge { background: #fff; color: var(--accent); }

.home-section { padding: 8px 20px 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-link {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
}

.active-stone-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  width: 100%;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.active-stone-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.active-stone-photo {
  width: 80px;
  height: 80px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.active-stone-photo .stone-svg { width: 100%; height: 100%; display: block; }
.active-stone-info { flex: 1; min-width: 0; }
.active-stone-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.active-stone-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.active-stone-bio {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stone-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.mini-stone {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.mini-stone:hover { transform: translateY(-2px); border-color: var(--accent); }
.mini-stone.active { border-color: var(--accent); background: var(--accent-soft); }
.mini-stone-photo {
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
  background: var(--surface-2);
  border-radius: 50%;
  overflow: hidden;
}
.mini-stone-photo .stone-svg { width: 100%; height: 100%; }
.mini-stone-name { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stone-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }

/* ─── Upload ────────────────────────────────────────────────────── */
.upload-screen { padding-bottom: 40px; }
.upload-form { padding: 16px 20px; }
.upload-photo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.upload-preview {
  width: 180px;
  height: 180px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.upload-preview img, .upload-preview .stone-svg { width: 100%; height: 100%; display: block; }
.upload-photo-actions { display: flex; gap: 8px; }
.upload-hint { font-size: 12px; color: var(--ink-3); text-align: center; max-width: 280px; font-family: var(--font-mono); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.type-option {
  padding: 10px 8px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  transition: all 0.15s;
}
.type-option:hover { border-color: var(--ink-3); }
.type-option.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.char-count { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ─── Swipe ─────────────────────────────────────────────────────── */
.swipe-screen { padding-bottom: 0; }
.swipe-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 8px; }
.swipe-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.swipe-eyebrow strong { color: var(--accent); font-weight: 700; }

.active-stone-banner { padding: 8px 20px 14px; }
.active-banner-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.active-banner-row::-webkit-scrollbar { display: none; }
.active-banner-stone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.active-banner-stone:hover { border-color: var(--ink-3); }
.active-banner-stone.selected { background: var(--accent-soft); border-color: var(--accent); }
.abs-photo {
  width: 28px;
  height: 28px;
  background: var(--surface-2);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.abs-photo .stone-svg { width: 100%; height: 100%; }
.abs-name { font-size: 13px; font-weight: 600; }
.active-banner-empty {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-size: 13px;
  text-align: center;
}

.card-stack {
  position: relative;
  margin: 8px 20px 0;
  height: 520px;
}
.card-stack.empty { height: auto; padding: 40px 20px; display: flex; align-items: center; justify-content: center; }

/* Single, unambiguous card surface — pointer events live here. */
.swipe-card {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
}
.swipe-card.pos-back { transform: scale(0.95) translateY(14px); opacity: 0.6; z-index: 1; }
.swipe-card.pos-mid { transform: scale(0.97) translateY(7px); opacity: 0.85; z-index: 2; }
.swipe-card.pos-top { z-index: 3; cursor: grab; }
.swipe-card.pos-top.dragging { cursor: grabbing; }

.swipe-photo {
  flex: 1;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.swipe-photo img, .swipe-photo .stone-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.swipe-caption {
  position: absolute;
  top: 20px;
  left: 16px;
  right: 16px;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}

.swipe-info-bar {
  padding: 16px 20px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.swipe-name-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.swipe-name { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; flex: 1; min-width: 0; }
.swipe-type {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.swipe-owner { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.owner-emoji { font-size: 16px; }
.owner-name { font-weight: 600; }
.swipe-location { color: var(--ink-3); }
.swipe-info-btn {
  margin-top: 8px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-align: left;
  font-weight: 700;
}

.swipe-overlay {
  position: absolute;
  top: 60px;
  padding: 10px 18px;
  border: 3px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
}
.overlay-left { left: 20px; color: #fff; background: var(--danger); border-color: var(--danger); transform: rotate(-12deg); }
.overlay-right { right: 20px; color: #fff; background: var(--moss); border-color: var(--moss); transform: rotate(12deg); }

.swipe-actions { display: flex; justify-content: center; align-items: center; gap: 28px; padding: 22px 20px 24px; }
.action-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  font-weight: 700;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
}
.action-btn:hover { transform: scale(1.06); box-shadow: var(--shadow-md); }
.action-btn:active { transform: scale(0.95); }
.action-btn.skip:hover { border-color: var(--danger); color: var(--danger); }
.action-btn.like {
  width: 72px;
  height: 72px;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(255, 88, 100, 0.35);
}
.action-btn.like:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ─── Inbox ─────────────────────────────────────────────────────── */
.inbox-screen { padding-bottom: 40px; }
.inbox-section { padding: 0 20px 28px; }
.inbox-section .section-head { margin-bottom: 14px; }
.proposal-list { display: flex; flex-direction: column; gap: 12px; }
.proposal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.proposal-card.pending { border-left: 3px solid var(--accent); }
.proposal-card.accepted { border-left: 3px solid var(--moss); opacity: 0.85; }
.proposal-card.rejected { border-left: 3px solid var(--ink-3); opacity: 0.7; }
.proposal-stones { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.proposal-stone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  transition: transform 0.15s;
}
.proposal-stone:hover { transform: translateY(-2px); }
.proposal-stone .stone-svg { width: 80px; height: 80px; }
.proposal-stone-name { font-size: 13px; font-weight: 700; text-align: center; margin-top: 6px; }
.proposal-stone-owner { font-size: 11px; color: var(--ink-3); text-align: center; }
.proposal-arrow { font-size: 18px; color: var(--ink-3); flex-shrink: 0; font-weight: 700; }
.proposal-text { font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-bottom: 10px; }
.proposal-text em { font-style: normal; color: var(--ink); font-weight: 700; }
.proposal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.proposal-time { color: var(--ink-3); }
.proposal-status { padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700; }
.status-pending { background: var(--accent-soft); color: var(--accent); }
.status-accepted { background: var(--moss-soft); color: var(--moss); }
.status-rejected { background: var(--surface-3); color: var(--ink-3); }
.proposal-actions { display: flex; gap: 8px; }
.proposal-actions .v-button { flex: 1; }

.empty-state { text-align: center; padding: 40px 20px; }
.empty-state.inline { padding: 20px 16px; background: var(--surface-2); border-radius: var(--radius-md); }
.empty-state.small { padding: 16px; }
.empty-state p { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.empty-mark { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.empty-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.empty-sub { font-size: 14px; color: var(--ink-2); max-width: 320px; margin: 0 auto 20px; line-height: 1.45; }

/* ─── Stone detail ─────────────────────────────────────────────── */
.stone-screen { padding-bottom: 40px; }
.stone-hero { padding: 0 20px 12px; }
.stone-hero-photo {
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: 0 auto;
  max-width: 420px;
}
.stone-hero-photo img, .stone-hero-photo .stone-svg { width: 100%; height: 100%; display: block; object-fit: cover; }

.stone-meta-card {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.stone-name-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.stone-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; flex: 1; min-width: 0; }
.stone-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.stone-location { font-size: 14px; color: var(--ink-3); margin-bottom: 12px; }
.stone-bio-large { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin-bottom: 16px; }
.stone-owner-row { display: flex; }
.owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: border-color 0.15s;
}
.owner-chip:hover { border-color: var(--accent); }

.action-banner {
  margin: 0 20px 20px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  text-align: center;
}
.action-banner.info { background: var(--surface-2); color: var(--ink-2); }
.action-banner.status-pending { background: var(--accent-soft); color: var(--accent); }
.action-banner.status-accepted { background: var(--moss-soft); color: var(--moss); font-weight: 600; }
.action-banner.status-rejected { background: var(--surface-3); color: var(--ink-3); }
.action-banner + .v-button.block, .v-button.block { margin: 0 20px 20px; }

.detail-section { padding: 8px 20px 28px; }
.detail-section .section-head { margin-bottom: 14px; }

.polycule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.polycule-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.polycule-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.polycule-photo {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  background: var(--surface-2);
  border-radius: 50%;
  overflow: hidden;
}
.polycule-photo .stone-svg { width: 100%; height: 100%; }
.polycule-name { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polycule-owner { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.emoji-list { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  font-size: 18px;
}
.emoji-picker {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.emoji-pick {
  aspect-ratio: 1;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 22px;
  transition: transform 0.1s;
}
.emoji-pick:hover { transform: scale(1.15); background: var(--accent-soft); }

/* ─── My Stones ────────────────────────────────────────────────── */
.mystones-screen { padding-bottom: 40px; }
.my-stones-list { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.my-stone-card {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.my-stone-card.active { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 30%); }
.my-stone-photo-btn { flex-shrink: 0; background: transparent; padding: 0; }
.my-stone-photo {
  width: 110px;
  height: 110px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.my-stone-photo img, .my-stone-photo .stone-svg { width: 100%; height: 100%; display: block; }
.my-stone-info { flex: 1; min-width: 0; }
.my-stone-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.my-stone-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.active-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.my-stone-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.my-stone-bio {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.my-stone-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
}
.stat-pill.warning { background: var(--accent-soft); color: var(--accent); }
.stat-icon { font-size: 12px; }
.my-stone-actions { display: flex; gap: 6px; }

.inbox-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 12px;
  padding: 12px 16px;
  background: var(--gold-soft);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.inbox-callout > span:first-child { font-size: 18px; }

/* ─── Connected celebration ────────────────────────────────────── */
.connected-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece {
  position: absolute;
  top: -20px;
  font-size: 18px;
  color: var(--accent);
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.connected-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 32px 28px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.connected-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 700;
}
.connected-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.1; }
.connected-sub { font-size: 14px; color: var(--ink-2); margin-bottom: 24px; line-height: 1.5; }
.connected-pair { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }
.connected-stone {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 10px;
  transition: transform 0.15s;
}
.connected-stone:hover { transform: scale(1.04); }
.connected-stone .stone-svg { width: 110px; height: 110px; display: block; }
.cs-name { font-size: 14px; font-weight: 700; margin-top: 6px; }
.cs-owner { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.connected-tie { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.connected-actions { display: flex; gap: 10px; }
.connected-actions .v-button { flex: 1; }

/* ─── Bottom nav ───────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 0 calc(env(safe-area-inset-bottom, 8px) + 8px);
  z-index: 10;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  color: var(--ink-3);
  transition: color 0.15s;
  min-height: 56px;
}
.nav-item.active { color: var(--accent); }
.nav-glyph { font-size: 22px; line-height: 1; font-weight: 700; }
.nav-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.nav-badge {
  position: absolute;
  top: 4px;
  right: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  min-width: 18px;
  text-align: center;
  font-family: var(--font-mono);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  color: var(--ink-3);
}

/* ─── Destructive button variant ───────────────────────────────── */
.v-button.destructive { color: #c83838; }
.v-button.destructive:hover:not(:disabled) {
  color: #fff;
  background: #c83838;
  border-color: #c83838;
}

/* ─── Polycule disconnect affordance ───────────────────────────── */
.polycule-wrap { position: relative; }
.polycule-disconnect {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: all 120ms ease;
}
.polycule-disconnect:hover {
  color: #fff;
  background: #c83838;
  border-color: #c83838;
  transform: scale(1.08);
}

/* ─── My-stone action area ─────────────────────────────────────── */
.mine-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Footer (parody disclaimer) ──────────────────────────────── */
.app-footer {
  position: relative;
  z-index: 1;
  padding: 24px 20px 100px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.footer-mark {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
  letter-spacing: 0.005em;
}
.footer-text strong {
  color: var(--ink-2);
  font-weight: 600;
}

/* ─── Cancelled connection visual ─────────────────────────────── */
.proposal-card.cancelled { opacity: 0.55; }
.status-cancelled {
  color: #8a7a7a;
  background: rgba(138, 122, 122, 0.1);
  border-color: rgba(138, 122, 122, 0.25);
}

/* ─── Guest / tour mode ───────────────────────────────────────── */
.login-guest-link {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 0;
  margin: 4px 0 8px;
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.005em;
  transition: color 120ms ease;
}
.login-guest-link:hover { color: var(--accent); }

.guest-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #fff4e6, #ffe9d6);
  border-bottom: 1px solid #f0d8b8;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.35;
}
.guest-banner-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guest-banner-mark {
  font-size: 16px;
  line-height: 1;
}
.guest-banner strong {
  color: var(--accent);
  font-weight: 600;
}

.signup-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  min-height: 60vh;
  gap: 12px;
}
.signup-gate-mark {
  font-size: 56px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.signup-gate-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.signup-gate-sub {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 0 8px;
}

@media (max-width: 380px) {
  .hero-title { font-size: 30px; }
  .swipe-name { font-size: 22px; }
  .stone-title { font-size: 24px; }
  .connected-title { font-size: 22px; }
  .connected-stone .stone-svg { width: 86px; height: 86px; }
}

/* ─── Magic-link Login additions ────────────────────────────────────────── */

.login-sent {
  margin: 8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-sent p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.login-sent .muted { color: var(--ink-3); font-size: 13px; }

.login-extra {
  margin: -4px 0 4px;
  border-radius: var(--radius-sm);
}
.login-extra summary {
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.login-extra summary::-webkit-details-marker { display: none; }
.login-extra summary::before { content: '+'; margin-right: 6px; font-weight: 600; }
.login-extra[open] summary::before { content: '−'; }
.login-extra-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 0 4px;
}

.login-error {
  background: var(--accent-soft);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-top: -2px;
}

.login-error-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-soft);
  color: var(--danger);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.muted { color: var(--ink-3); }

/* ─── Sign-out floating button ─────────────────────────────────────────── */

.signout-fab {
  position: fixed;
  bottom: 84px;
  right: 16px;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  z-index: 30;
  box-shadow: var(--shadow-sm);
  transition: color .15s, border-color .15s;
}
.signout-fab:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
@media (max-width: 640px) {
  .signout-fab { right: 12px; bottom: 76px; }
}

/* ── Chat styles ─────────────────────────────────────────────────────── */

.chat-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 32px;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.chat-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}

.back-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.back-btn:hover { background: var(--surface-2); }

.chat-loading, .chat-error {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}

.chat-error {
  color: var(--danger);
  background: #fde6e6;
  border-radius: 10px;
  cursor: pointer;
  margin: 8px 0;
}

.chat-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-2);
}

.chat-empty-emoji { font-size: 48px; margin-bottom: 16px; }
.chat-empty-hint { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

.chat-section { margin-bottom: 24px; }
.chat-section h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Incoming request card */
.chat-request-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.chat-request-emoji {
  font-size: 32px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-request-body { flex: 1; min-width: 0; }
.chat-request-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.chat-request-opener { font-size: 14px; color: var(--ink-2); font-style: italic; margin-top: 4px; line-height: 1.4; }
.chat-request-time { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

.chat-request-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.chat-accept-btn, .chat-decline-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.chat-accept-btn { background: var(--accent); color: #fff; }
.chat-accept-btn:hover:not(:disabled) { background: var(--accent-hover); }
.chat-decline-btn { background: var(--surface-2); color: var(--ink-2); }
.chat-decline-btn:hover:not(:disabled) { background: var(--surface-3); }

.chat-accept-btn:disabled, .chat-decline-btn:disabled { opacity: 0.5; cursor: default; }

/* Outgoing pending card */
.chat-outgoing-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  opacity: 0.85;
}

/* Conversation thread card (active chats) */
.chat-thread-card {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.chat-thread-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.chat-thread-main:hover { background: var(--surface-2); }

.chat-thread-emoji {
  font-size: 32px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-thread-body { flex: 1; min-width: 0; }
.chat-thread-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.chat-thread-preview {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-time {
  font-size: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}

.chat-leave-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  flex-shrink: 0;
}

.chat-leave-btn:hover:not(:disabled) { color: var(--danger); }
.chat-leave-btn:disabled { opacity: 0.5; cursor: default; }

/* Conversation screen */
.chat-conv-screen {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  padding-bottom: 0;
}

.chat-conv-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.chat-conv-emoji { font-size: 22px; }

.chat-leave-top-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.chat-leave-top-btn:hover { color: var(--danger); border-color: var(--danger); }

.chat-conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-conv-empty {
  text-align: center;
  color: var(--ink-3);
  padding: 40px 16px;
  font-size: 14px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: 2px;
}

.chat-msg.mine { align-self: flex-end; }
.chat-msg.theirs { align-self: flex-start; }

.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-msg.mine .chat-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg.theirs .chat-msg-bubble {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.chat-msg-time {
  font-size: 11px;
  color: var(--ink-3);
  padding: 0 6px;
}

.chat-msg.mine .chat-msg-time { text-align: right; }

.chat-conv-input {
  display: flex;
  gap: 8px;
  padding: 12px 0 8px;
  border-top: 1px solid var(--line-soft);
}

.chat-conv-input input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
}

.chat-conv-input input:focus { outline: none; border-color: var(--accent); }

.chat-send-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.chat-send-btn:disabled { opacity: 0.5; cursor: default; }
.chat-send-btn:hover:not(:disabled) { background: var(--accent-hover); }

/* Chat request modal (StoneDetail) */
.chat-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}

.chat-modal {
  background: var(--surface);
  border-radius: 16px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.chat-modal-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.chat-modal-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-2);
}

.chat-modal-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  min-height: 64px;
  margin-bottom: 12px;
}

.chat-modal-textarea:focus { outline: none; border-color: var(--accent); }

.chat-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}