:root {
  --cream: #fbf5ec;
  --paper: #fffaf2;
  --ink: #2d241f;
  --muted: #806f63;
  --brown: #6f4429;
  --gold: #d19a4a;
  --leaf: #4f8748;
  --sage: #eef5e8;
  --line: rgba(75, 52, 35, .16);
  --shadow: 0 24px 70px rgba(17, 10, 5, .32);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0c120f;
  color: var(--ink);
}
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }

.prototype-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 30% 15%, rgba(224,166,89,.18), transparent 32%), #07100d;
}

.phone {
  width: min(420px, 100%);
  height: min(820px, 100vh);
  min-height: 760px;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background: var(--cream);
  box-shadow: var(--shadow);
  border: 10px solid rgba(255,250,242,.72);
}
.screen {
  position: absolute;
  inset: 0;
  display: none;
  padding: 24px 22px 96px;
  overflow-y: auto;
  animation: rise .28s ease;
}
.screen.is-active { display: block; }
.screen-home { color: #fff7e8; padding: 0; }

.cafe-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16,10,5,.1), rgba(16,10,5,.72)),
    radial-gradient(circle at 25% 35%, rgba(255,210,132,.42), transparent 28%),
    linear-gradient(135deg, #2a180e 0%, #5a331c 45%, #14100b 100%);
}
.cafe-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(255,238,199,.14) 23% 25%, transparent 26% 54%, rgba(255,238,199,.12) 55% 58%, transparent 59%),
    linear-gradient(0deg, rgba(0,0,0,.42), transparent 55%);
  filter: blur(.2px);
}
.dim-layer { position:absolute; inset:0; background: rgba(0,0,0,.18); }
.home-header, .home-content { position: relative; z-index: 1; }
.home-header { display:flex; align-items:center; justify-content:space-between; padding: 26px 24px 0; }
.brand-mark {
  width: 58px; height: 58px; border-radius: 50%; position:relative;
  display:grid; place-items:center; background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.25);
}
.sprout { font-size: 1.25rem; }
.nest-arc, .nest-lines { position:absolute; left: 13px; right: 13px; border: 2px solid rgba(255,216,142,.9); }
.nest-arc { top: 10px; height: 28px; border-bottom:0; border-radius: 60px 60px 0 0; }
.nest-lines { bottom: 11px; height: 10px; border-top:0; border-radius:0 0 50px 50px; }
.menu-button { color:#fff; background:transparent; font-size: 1.45rem; }
.home-content { padding: 54px 24px 24px; }
.script-greeting { margin: 0 0 10px; font-family: Georgia, serif; font-style: italic; color: #ffe2b5; font-size: 1.05rem; }
.home-content h1 { margin:0 0 10px; font-size: clamp(2.05rem, 8vw, 2.8rem); line-height:1.04; letter-spacing:-.06em; }
.home-intent { margin: 0 0 18px; color: rgba(255,247,232,.82); line-height: 1.4; max-width: 310px; }
.time-choice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom: 16px; }
.time-choice-grid button { padding: 10px 6px; border-radius: 999px; background: rgba(255,250,242,.18); color:#fff8e9; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(0,0,0,.16); font-size: .9rem; }
.time-choice-grid button.is-selected { background: rgba(255,226,181,.9); color:#3b2314; border-color: rgba(255,255,255,.58); }
.glass-input-card {
  min-height: 112px; border-radius: 22px; padding: 16px; display:flex; gap:12px; align-items:flex-end;
  background: rgba(255,250,242,.78); color: var(--ink); backdrop-filter: blur(16px);
  box-shadow: 0 18px 42px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.45);
}
.glass-input-card textarea { flex:1; min-height: 78px; resize:none; border:0; outline:0; background:transparent; color:var(--ink); }
.round-mic { width:46px; height:46px; border-radius:50%; background:#b98250; color:#fff; box-shadow:0 10px 25px rgba(0,0,0,.22); }
.or-divider { display:flex; align-items:center; gap:10px; margin:22px 12px; color: rgba(255,255,255,.75); }
.or-divider span { height:1px; flex:1; background: rgba(255,255,255,.35); }
.or-divider em { font-style:normal; }
.need-help-pill { display:block; margin:0 auto; padding:14px 28px; border-radius:999px; background:rgba(65,35,18,.68); color:#fff8e9; border:1px solid rgba(255,255,255,.25); box-shadow: 0 14px 28px rgba(0,0,0,.28); }

.plain-header { display:flex; align-items:center; gap:12px; min-height:42px; margin-bottom:18px; }
.icon-back { width:36px; height:36px; border-radius:50%; background:rgba(80,55,35,.08); color:var(--ink); }
.tiny-brand { font-weight:700; color:#1f4b25; }
.chat-thread { display:grid; gap:16px; padding-bottom:70px; }
.user-bubble { justify-self:end; max-width:78%; background:#e8f0df; padding:14px 16px; border-radius:18px 18px 4px 18px; }
.coach-row { display:grid; grid-template-columns:36px 1fr; gap:10px; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#fff5e5; border:1px solid var(--line); }
.coach-name { margin:0 0 6px; font-weight:700; color:#1f4b25; }
.coach-bubble { background:#fffdf8; border:1px solid var(--line); padding:14px 16px; border-radius:18px; line-height:1.45; }
.coach-bubble p { margin:0 0 10px; }
.coach-bubble p:last-child { margin-bottom:0; }
.prompt-label { margin: 4px 0 -4px; font-size:.9rem; color:var(--muted); }
.option-stack, .help-options { display:grid; gap:9px; }
.option-stack button, .help-options button { text-align:left; padding:13px 14px; border-radius:13px; background:#fffdf8; border:1px solid var(--line); color:var(--ink); }
.option-stack button:first-child { background:#f3ead6; border-color:#deb67c; }
.message-bar { position:absolute; left:16px; right:16px; bottom:16px; display:grid; grid-template-columns:1fr 38px 38px; gap:8px; align-items:center; padding:10px; border-radius:22px; background:rgba(255,250,242,.95); border:1px solid var(--line); box-shadow:0 12px 32px rgba(75,52,35,.16); }
.message-bar input { border:0; outline:0; background:transparent; padding:8px; }
.message-bar button { border-radius:50%; background:#eee4d8; }
.message-bar .send { background:var(--leaf); color:#fff; }

.work-card, .help-panel { background:#fffdf8; border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow: 0 16px 40px rgba(75,52,35,.08); }
.field-label { margin:14px 0 4px; font-size:.84rem; font-weight:800; }
.work-card p { margin-top:0; }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.laptop-preview { margin:10px auto 18px; width:210px; height:120px; border-radius:12px; background:#f7f2eb; border:7px solid #26231f; display:grid; grid-template-columns:44px 1fr; overflow:hidden; box-shadow:0 18px 30px rgba(0,0,0,.18); }
.side-panel { background:#24412c; }
.preview-lines { padding:16px; display:grid; gap:10px; }
.preview-lines span { height:12px; border-radius:999px; background:#ded4c8; }
.small-textarea { width:100%; min-height:106px; resize:none; border:1px solid var(--line); border-radius:16px; padding:13px; background:#fffaf2; outline:0; }
.tool-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.tool-row button { padding:11px 8px; border-radius:12px; background:#fffaf2; border:1px solid var(--line); }
.iteration-copy { background:#fffdf8; border-radius:20px; padding:18px; line-height:1.5; border:1px solid var(--line); }
.preview-card { margin:18px 0; text-align:center; border-radius:22px; padding:22px; min-height:240px; background:linear-gradient(135deg,#f7efe4,#fffaf2); border:1px solid var(--line); box-shadow:0 16px 40px rgba(75,52,35,.08); }
.preview-logo { font-size:2rem; }
.preview-card h2 { color:#1f4b25; margin:8px 0 0; }
.preview-card input { width:85%; height:40px; border-radius:10px; border:1px solid var(--line); margin:14px 0; }
.preview-card button { display:block; margin:0 auto; padding:11px 18px; border-radius:999px; background:#f1c27b; }
.approve-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.approve-row button { padding:13px; border-radius:12px; color:#fff; }
.approve-row .yes { background:#3c9b53; }
.approve-row .no { background:#e2514c; }
.subhead { margin-top:-10px; color:var(--muted); }
.history-list { display:grid; gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fffdf8; }
.history-list button { position:relative; text-align:left; display:grid; gap:3px; padding:15px 70px 15px 16px; background:#fffdf8; border-bottom:1px solid var(--line); }
.history-list button:first-child { background:#f1eadc; }
.history-list button:last-child { border-bottom:0; }
.history-list span { color:var(--muted); font-size:.85rem; }
.history-list em { position:absolute; right:14px; top:17px; color:var(--muted); font-style:normal; font-size:.75rem; }
.help-panel h2 { margin:0; font-size:1.5rem; }
.help-panel p { margin:6px 0 16px; color:var(--muted); }

.bottom-nav { position:absolute; left:16px; right:16px; bottom:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:8px; border-radius:24px; background:rgba(22,15,10,.72); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 40px rgba(0,0,0,.25); z-index:10; }
.bottom-nav button { display:grid; gap:3px; place-items:center; padding:8px 4px; border-radius:16px; background:transparent; color:#fff5e5; font-size:1.05rem; }
.bottom-nav span { font-size:.67rem; }
.screen:not(.screen-home) + .bottom-nav, .phone:has(.screen:not(.screen-home).is-active) .bottom-nav { background:rgba(255,250,242,.96); border-color:var(--line); }
.phone:has(.screen:not(.screen-home).is-active) .bottom-nav button { color:var(--muted); }

@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
button:active { transform:scale(.98); }
@media (max-width:480px) {
  .prototype-stage { padding:0; }
  .phone { width:100%; height:100vh; min-height:100vh; border:0; border-radius:0; }
  .time-choice-grid { grid-template-columns: repeat(2, 1fr); }
}