@font-face { font-family: 'Unbounded'; src: url('/assets/unbounded-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/figtree-latin-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --ink: #fff7fb;
  --soft: #efdcee;
  --edge: rgba(255, 255, 255, .24);
  --glass: rgba(255, 255, 255, .13);
  --pink: #ff74bd;
  --hot: #ee2f96;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; color: var(--ink); background: linear-gradient(#3a1a57 0%, #7d2a8a 55%, #e0669f 100%) fixed #3a1a57; font: 400 17px / 1.45 'Figtree', system-ui, sans-serif; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.top { flex: none; display: flex; align-items: center; gap: 4px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px 12px; }
.top img { width: 34px; height: 34px; }
.top h1 { flex: 1; margin: 0 0 0 4px; font: 500 20px 'Unbounded', sans-serif; letter-spacing: -.02em; }
.icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.icon:active { background: var(--glass); }
#speak[aria-pressed="false"] { opacity: .55; }
#speak[aria-pressed="false"] .waves { display: none; }
#mic.on { background: var(--pink); color: #3a0a33; }

#log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 14px; }
.hello { margin: auto 0; padding: 0 6px 8vh; }
.hello h2 { margin: 0 0 10px; font: 500 clamp(30px, 9vw, 46px) / 1.08 'Unbounded', sans-serif; letter-spacing: -.03em; }
.hello p { margin: 0; color: var(--soft); }
.you, .bibi { max-width: 86%; padding: 10px 14px; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.you { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--pink); color: #3a0a33; font-weight: 500; }
.bibi { align-self: flex-start; border-bottom-left-radius: 6px; border: 1px solid var(--edge); background: rgba(42, 16, 70, .55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.bibi.thinking { color: var(--soft); }
.bibi.problem { border-color: var(--pink); }

.ask { flex: none; display: flex; align-items: flex-end; gap: 6px; margin: 0 10px calc(env(safe-area-inset-bottom) + 10px); padding: 5px; border: 1px solid var(--edge); border-radius: 28px; background: rgba(42, 16, 70, .6); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
#text { flex: 1; min-width: 0; max-height: 30vh; padding: 9px 4px 9px 12px; border: 0; outline: 0; resize: none; background: none; font-size: 17px; }
#text::placeholder { color: var(--soft); }
.send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ff9fd3, var(--pink)); color: #3a0a33; }
.send:disabled { opacity: .45; }

dialog { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 22px; overflow-y: auto; border: 1px solid var(--edge); border-radius: 28px; color: var(--ink); background: #2f1450; }
dialog::backdrop { background: rgba(30, 8, 50, .6); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0; font: 500 24px / 1.15 'Unbounded', sans-serif; letter-spacing: -.02em; }
dialog p, dialog ol { margin: 0; color: var(--soft); }
dialog ol { padding-left: 22px; }
dialog a { color: #fff; }
dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
dialog input { padding: 11px 13px; border: 1px solid var(--edge); border-radius: 14px; outline: 0; background: rgba(30, 10, 50, .45); font-size: 16px; }
dialog input:focus { border-color: var(--pink); }
dialog button { min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--edge); }
dialog .primary { border: 0; background: linear-gradient(135deg, #ff9fd3, var(--pink)); color: #3a0a33; font-weight: 600; }
.error { color: #ffc4e6; }