/* ---------- reset + ground ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: var(--obsidian-deep);
  color: var(--ivory);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
input, textarea, button, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
/* Inline icons carry a viewBox but no intrinsic size; without this they
   stretch to fill whatever flex or grid container they land in. */
svg:not([width]) { width: 20px; height: 20px; flex: none; }
::selection { background: rgba(216,190,141,.28); }

/* Atmospheric ground: faint champagne haze top, rosewood ember low. */
#atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(216,190,141,.14), transparent 60%),
    radial-gradient(90% 60% at 12% 108%, rgba(176,117,122,.12), transparent 62%),
    radial-gradient(80% 60% at 92% 82%, rgba(126,148,131,.08), transparent 60%),
    linear-gradient(180deg, #0A0B0E 0%, var(--obsidian-deep) 55%, #06070A 100%);
}
#atmos::after {
  content: ''; position: absolute; inset: 0; opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>");
}

#app {
  position: relative; z-index: 1;
  min-height: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex; flex-direction: column;
}

/* ---------- typography ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 23px; line-height: 1.2; }
h3 { font-size: 16px; letter-spacing: .01em; }
p  { margin: 0; line-height: 1.55; color: var(--ivory-dim); }
.eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--champagne-deep); font-weight: 600;
}
.dim { color: var(--ivory-faint); }
.serif { font-family: var(--font-serif); }

/* ---------- screens + motion ---------- */
.screen {
  flex: 1; display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 22px) 20px 24px;
  animation: screenIn .42s var(--ease-lift) both;
}
.screen.has-tabs { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 26px); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.988); } to { opacity: 1; transform: none; } }
.stagger > * { animation: riseIn .5s var(--ease-lift) both; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .16s; }
.stagger > *:nth-child(4) { animation-delay: .22s; }
.stagger > *:nth-child(5) { animation-delay: .28s; }
.stagger > *:nth-child(6) { animation-delay: .34s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.spacer { flex: 1; min-height: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 34px; }
.topbar .title { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; color: var(--ivory-dim);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: var(--edge-top), 0 1px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .18s var(--ease-soft), color .18s;
}
.iconbtn:active { transform: scale(.92); color: var(--champagne); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px;
  border-radius: var(--radius-lg); font-size: 16px; font-weight: 600; letter-spacing: .01em;
  transition: transform .16s var(--ease-soft), box-shadow .22s var(--ease-soft), opacity .2s;
  overflow: hidden;
}
.btn:active { transform: translateY(2px) scale(.99); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-primary {
  color: #1A150C;
  background: linear-gradient(178deg, var(--champagne-bright) 0%, var(--champagne) 46%, var(--champagne-deep) 100%);
  box-shadow:
    0 14px 30px rgba(216,190,141,.22),
    0 4px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 6px rgba(120,92,48,.45);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 62%);
  transform: translateX(-120%); animation: sheen 5.5s var(--ease-soft) 1.2s infinite;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 26%, 100% { transform: translateX(130%); } }
.btn-primary:active { box-shadow: 0 6px 14px rgba(216,190,141,.18), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 4px rgba(120,92,48,.5); }

.btn-secondary {
  color: var(--ivory);
  background: linear-gradient(180deg, var(--graphite-high), var(--graphite-raised));
  box-shadow: var(--edge-top), inset 0 0 0 1px rgba(216,190,141,.16), var(--shadow-low);
}
.btn-ghost { color: var(--ivory-dim); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); min-height: 50px; font-weight: 500; }
.btn-quiet { color: var(--ivory-faint); background: none; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.btn-quiet:active { color: var(--ivory-dim); }
.btn-danger { color: var(--danger); background: transparent; box-shadow: inset 0 0 0 1px rgba(197,122,114,.28); min-height: 50px; }
.btn-sm { min-height: 44px; font-size: 14px; border-radius: var(--radius-md); }
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; }
.btn .arrow { font-size: 18px; line-height: 1; transition: transform .22s var(--ease-lift); }
.btn:active .arrow { transform: translateX(3px); }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* ---------- surfaces ---------- */
.card {
  position: relative;
  background: linear-gradient(168deg, var(--graphite-raised) 0%, var(--graphite) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge-top), inset 0 0 0 1px rgba(255,255,255,.05), var(--shadow-mid);
  padding: 18px;
}
.card-glass {
  background: linear-gradient(160deg, rgba(42,46,54,.72), rgba(20,22,26,.62));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--edge-champagne), var(--edge-top), var(--shadow-mid);
}
.card-accent { box-shadow: var(--edge-top), inset 0 0 0 1px rgba(216,190,141,.26), var(--shadow-high); }
.card-title { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-deep); font-weight: 600; margin-bottom: 10px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 10px var(--champagne-glow); flex: none; }
.dot.sage { background: var(--sage); box-shadow: 0 0 10px var(--sage-glow); }
.dot.rose { background: var(--rosewood); box-shadow: 0 0 10px var(--rosewood-glow); }
.hr { height: 1px; background: linear-gradient(90deg, transparent, var(--graphite-line), transparent); margin: 16px 0; }

/* ---------- writing board ---------- */
.board {
  position: relative;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 24%),
    linear-gradient(165deg, #1A1D22 0%, #121418 62%, #0E1014 100%);
  box-shadow:
    inset 0 0 0 1px rgba(216,190,141,.20),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 48px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.6);
  padding: 18px 18px 12px;
  transition: box-shadow .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.board::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23p)' opacity='.5'/></svg>");
  opacity: .16;
}
.board.is-focus {
  box-shadow:
    inset 0 0 0 1px rgba(216,190,141,.42),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 4px rgba(216,190,141,.07),
    0 28px 56px rgba(0,0,0,.6);
  transform: translateY(-2px);
}
.board textarea {
  position: relative; z-index: 1;
  width: 100%; min-height: 190px; resize: none;
  background: transparent; border: 0; outline: none; box-shadow: none; appearance: none;
  color: var(--ivory); caret-color: var(--champagne-bright);
  font-size: 17px; line-height: 1.6; letter-spacing: .005em;
}
.board textarea::placeholder { color: rgba(147,140,128,.72); font-style: italic; }
.board-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.05); }
.counter { font-size: 12px; color: var(--ivory-faint); font-variant-numeric: tabular-nums; }
.counter.warn { color: var(--champagne); }
.counter.over { color: var(--danger); }

/* mic: polished black ceramic with a champagne ring */
.mic {
  position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 22%, #3A3F47 0%, #191C21 46%, #0C0E11 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -3px 8px rgba(0,0,0,.8),
    0 0 0 1px rgba(216,190,141,.34),
    0 10px 22px rgba(0,0,0,.6);
  display: grid; place-items: center; color: var(--champagne-bright);
  transition: transform .2s var(--ease-lift), box-shadow .25s;
}
.mic:active { transform: scale(.93); }
.mic.recording {
  color: #F0D9DA;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.2), inset 0 -3px 8px rgba(0,0,0,.8), 0 0 0 1px rgba(176,117,122,.6), 0 0 26px rgba(176,117,122,.4), 0 10px 22px rgba(0,0,0,.6);
  animation: micBreath 2.4s var(--ease-in-out) infinite;
}
@keyframes micBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.055); } }

.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--champagne-bright), var(--champagne-deep)); animation: breathe 1.9s var(--ease-in-out) infinite; }
@keyframes breathe { 0%,100% { height: 5px; opacity: .5; } 50% { height: 22px; opacity: 1; } }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 0 16px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 500; color: var(--ivory-dim);
  background: linear-gradient(168deg, #343946, #181B20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.4);
  transition: transform .18s var(--ease-lift), box-shadow .25s var(--ease-soft), color .2s, background .25s;
}
.chip:active { transform: scale(.96); }
.chip.selected {
  color: #1C1710; font-weight: 600;
  background: linear-gradient(178deg, var(--champagne-bright), var(--champagne) 55%, var(--champagne-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px rgba(216,190,141,.24), 0 2px 6px rgba(0,0,0,.4);
}
.chip .emoji { font-size: 15px; filter: saturate(.82); }
.chip.wide { width: 100%; justify-content: space-between; min-height: 54px; border-radius: var(--radius-md); padding: 0 18px; }
.chip.wide .tick { opacity: 0; transition: opacity .2s; color: #1C1710; }
.chip.wide.selected .tick { opacity: 1; }

/* style chips row */
.stylebar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 6px; margin: 0 -20px; scrollbar-width: none; }
.stylebar::-webkit-scrollbar { display: none; }
.stylebar .chip { flex: none; min-height: 42px; font-size: 14px; }

/* ---------- inputs ---------- */
.field {
  width: 100%; min-height: 54px; padding: 15px 16px; border-radius: var(--radius-md);
  background: linear-gradient(165deg, #16181D, #101216);
  color: var(--ivory); border: 0; outline: none;
  box-shadow: inset 0 0 0 1px rgba(216,190,141,.18), inset 0 1px 0 rgba(255,255,255,.04);
  caret-color: var(--champagne-bright);
  transition: box-shadow .28s var(--ease-soft);
}
.field::placeholder { color: rgba(147,140,128,.62); }
.field:focus { box-shadow: inset 0 0 0 1px rgba(216,190,141,.42), 0 0 0 4px rgba(216,190,141,.07); }
textarea.field { min-height: 90px; resize: none; line-height: 1.5; }
.label { display: block; font-size: 13px; color: var(--ivory-faint); margin-bottom: 8px; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; z-index: 60;
  height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgba(14,16,19,.86), rgba(8,9,11,.97));
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 -1px 0 rgba(216,190,141,.14), 0 -20px 40px rgba(0,0,0,.5);
  will-change: transform;
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--ivory-faint); font-size: 10.5px; letter-spacing: .04em; font-weight: 500; transition: color .22s; }
.tab svg { width: 22px; height: 22px; transition: transform .28s var(--ease-lift); }
.tab.active { color: var(--champagne-bright); }
.tab.active svg { transform: translateY(-2px); filter: drop-shadow(0 4px 10px var(--champagne-glow)); }
.tab:active svg { transform: scale(.9); }

/* ---------- misc ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 22px);
  transform: translate(-50%, 20px); z-index: 200; opacity: 0; pointer-events: none;
  padding: 13px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
  background: linear-gradient(180deg, rgba(46,50,58,.95), rgba(22,24,28,.96));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--edge-champagne), var(--shadow-high);
  transition: opacity .3s var(--ease-soft), transform .35s var(--ease-lift);
  max-width: 80%; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(4,5,7,.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 520px; padding: 24px 20px calc(26px + var(--safe-b));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(180deg, #22252B, #14161A);
  box-shadow: 0 -1px 0 rgba(216,190,141,.2), 0 -30px 60px rgba(0,0,0,.7);
  transform: translateY(100%); transition: transform .4s var(--ease-lift);
}
.sheet-backdrop.show .sheet { transform: none; }
.sheet .grab { width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.16); margin: -8px auto 18px; }

.empty { text-align: center; padding: 46px 24px; color: var(--ivory-faint); }
.empty .glyph { font-size: 30px; opacity: .5; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.badge-sage { color: var(--sage); background: rgba(126,148,131,.13); box-shadow: inset 0 0 0 1px rgba(126,148,131,.28); }
.badge-champagne { color: var(--champagne); background: rgba(216,190,141,.12); box-shadow: inset 0 0 0 1px rgba(216,190,141,.3); }
.badge-rose { color: var(--rosewood); background: rgba(176,117,122,.13); box-shadow: inset 0 0 0 1px rgba(176,117,122,.3); }

.iconbtn svg { width: 20px; height: 20px; }
.mic svg { width: 24px; height: 24px; }
.btn svg { width: 18px; height: 18px; }
.more-styles svg { width: 15px; height: 15px; }
.setting svg { width: 20px; height: 20px; }
.searchbar svg { width: 18px; height: 18px; }
.empty .glyph svg { width: 34px; height: 34px; margin: 0 auto; }
.gate .lockmark svg { width: 30px; height: 30px; }
.chip .tick svg { width: 17px; height: 17px; }