:root {
  color-scheme: dark;
  --bg: #070708;
  --panel: rgba(15, 15, 18, 0.88);
  --panel-strong: #111114;
  --ink: #f7f3f4;
  --muted: #aaa3a6;
  --line: rgba(255,255,255,.1);
  --red: #f2072f;
  --red-deep: #9e001d;
  --green: #70ff9a;
  --shadow: 0 28px 80px rgba(0,0,0,.48);
  --radius: 28px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 17% 20%, rgba(242,7,47,.17), transparent 32rem),
    radial-gradient(circle at 88% 82%, rgba(255,23,70,.08), transparent 28rem),
    linear-gradient(135deg, #050506, #0d0d10 52%, #050506);
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #ff4e6e;
  outline-offset: 3px;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.app-shell {
  width: min(1500px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
  gap: 0;
}

.avatar-panel {
  position: relative;
  min-height: 100dvh;
  padding: clamp(22px, 4vw, 58px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(242,7,47,.05), transparent 45%);
}

.avatar-panel::after {
  content: ""; position: absolute; inset: auto -18% -28% -18%; height: 62%; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.025) 23px 24px),
              repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.025) 23px 24px);
  transform: perspective(500px) rotateX(60deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000, transparent);
}

.brand-row { display: flex; align-items: center; gap: 14px; z-index: 2; }
.brand-mark {
  width: 46px; height: 46px; display:grid; place-items:center; border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px 4px 14px 4px; font: 800 20px/1 Georgia, serif; color: white;
  background: linear-gradient(145deg, var(--red), #5f0012); box-shadow: 0 10px 32px rgba(242,7,47,.25);
}
.brand-row h1 { margin: 0; font: 700 clamp(1.35rem, 2vw, 1.75rem)/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; }
.brand-row p { margin: 7px 0 0; color: var(--muted); font-size: .82rem; display:flex; align-items:center; gap:8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(112,255,154,.9); }
.status-dot.busy { background: #ff3158; box-shadow: 0 0 14px rgba(242,7,47,.9); animation: pulse 1s infinite; }

.mood-chip {
  justify-self: end; margin-top: -38px; z-index: 2; text-transform: uppercase; letter-spacing:.16em;
  color: #d6cfd1; font-size:.7rem; padding: 8px 12px; border:1px solid var(--line); border-radius:999px;
  background: rgba(0,0,0,.28); backdrop-filter: blur(14px);
}

.avatar-stage {
  position: relative; width: min(100%, 560px); min-height: 440px; align-self: stretch; justify-self:center;
  display:grid; place-items:center; cursor:pointer; user-select:none; touch-action:manipulation; z-index:1;
  --glow: rgba(242,7,47,.48); --tilt: 0deg; --scale: 1;
}
.avatar-stage::before {
  content:""; position:absolute; width:82%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, var(--glow), transparent 66%); filter:blur(34px); opacity:.8;
  transform:translateY(8%); transition:background .35s, opacity .35s;
}
.avatar-stage img {
  position:absolute; z-index:3; height:min(68vh, 720px); max-height:100%; width:auto; max-width:92%; object-fit:contain;
  filter: drop-shadow(0 26px 26px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(242,7,47,.12));
  transform: rotate(var(--tilt)) scale(var(--scale)); transform-origin:50% 82%;
  animation: breathe 4s ease-in-out infinite; transition:filter .28s, transform .28s;
}
.shadow { position:absolute; z-index:2; bottom:7%; width:48%; height:7%; border-radius:50%; background:rgba(0,0,0,.7); filter:blur(12px); animation:shadowBreath 4s ease-in-out infinite; }
.halo { position:absolute; border-radius:50%; border:1px solid rgba(242,7,47,.2); z-index:1; }
.halo-one { width:76%; aspect-ratio:1; animation:haloSpin 24s linear infinite; border-style:dashed; }
.halo-two { width:55%; aspect-ratio:1; animation:haloSpin 17s linear infinite reverse; border-color:rgba(255,255,255,.1); }

.avatar-stage[data-state="listening"] { --glow: rgba(92,255,154,.35); --scale:1.02; }
.avatar-stage[data-state="thinking"] { --glow: rgba(165,73,255,.32); --tilt:-1.5deg; }
.avatar-stage[data-state="talking"] { --glow: rgba(242,7,47,.72); --scale:1.025; }
.avatar-stage[data-state="happy"] { --glow: rgba(255,57,113,.58); --tilt:1deg; }
.avatar-stage[data-state="sassy"] { --glow: rgba(255,45,0,.5); --tilt:-2deg; }
.avatar-stage[data-state="caring"] { --glow: rgba(255,82,158,.42); }
.avatar-stage[data-state="surprised"] img { animation:surprise .55s ease both, breathe 4s .55s ease-in-out infinite; }
.avatar-stage[data-state="talking"] img { animation:talk .75s ease-in-out infinite alternate; }
.avatar-stage.reacting img { animation:tapReact .6s cubic-bezier(.2,.9,.2,1); }

.spark { position:absolute; z-index:5; left:50%; top:46%; color:#ff345a; font-size:clamp(18px,3vw,30px); pointer-events:none; animation:sparkOut .9s ease-out forwards; }
.avatar-caption {
  z-index:3; width:min(100%, 560px); justify-self:center; min-height:64px; padding:16px 18px; display:flex; gap:10px; align-items:flex-start;
  border:1px solid rgba(255,255,255,.1); border-radius:18px 6px 18px 6px; color:#e6dfe1;
  background:rgba(10,10,12,.58); backdrop-filter:blur(16px); box-shadow:0 15px 50px rgba(0,0,0,.22);
  font: 500 1rem/1.45 Georgia, serif;
}
.quote-mark { color:var(--red); font-size:1.8rem; line-height:.8; }

.chat-panel {
  min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto auto auto; padding:clamp(20px,4vw,52px); padding-bottom:max(22px, env(safe-area-inset-bottom));
  background:rgba(9,9,11,.52); backdrop-filter:blur(12px);
}
.chat-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.eyebrow { color:#ff4b6c; letter-spacing:.18em; font-size:.68rem; font-weight:800; }
.chat-toolbar h2, .settings-header h2, .lock-card h2 { margin:6px 0 0; font:700 clamp(1.5rem,3vw,2.2rem)/1 Georgia, serif; }
.toolbar-actions { display:flex; gap:8px; }
.icon-button, .mic-button, .send-button, .close-button {
  border:1px solid var(--line); background:rgba(255,255,255,.035); display:grid; place-items:center; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
}
.icon-button:hover, .mic-button:hover, .close-button:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.icon-button:active, .mic-button:active, .send-button:active { transform:scale(.94); }
.icon-button { width:43px; height:43px; border-radius:13px; }
.icon-button svg, .mic-button svg, .send-button svg { width:20px; height:20px; fill:currentColor; }
.icon-button.active { color:#ff4768; border-color:rgba(242,7,47,.5); background:rgba(242,7,47,.1); }

.messages { overflow-y:auto; min-height:0; padding:26px 8px 22px 0; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#40121b transparent; }
.message { max-width:83%; margin:0 0 20px; animation:messageIn .35s ease both; }
.message.user { margin-left:auto; }
.message-meta { margin:0 8px 7px; color:#8d8588; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.message.user .message-meta { text-align:right; }
.message-bubble { padding:15px 17px; border:1px solid var(--line); border-radius:7px 20px 20px 20px; background:#151519; color:#f0ebec; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.message.user .message-bubble { border-radius:20px 7px 20px 20px; background:linear-gradient(145deg, #bd0829, #8b001a); border-color:rgba(255,87,118,.25); color:#fff; }
.message.pending .message-bubble { width:72px; display:flex; gap:6px; align-items:center; min-height:51px; }
.typing-dot { width:7px; height:7px; background:#ff3a60; border-radius:50%; animation:typing 1s infinite ease-in-out; }
.typing-dot:nth-child(2){ animation-delay:.15s; }.typing-dot:nth-child(3){animation-delay:.3s;}

.suggestion-row { display:flex; gap:8px; overflow-x:auto; padding:4px 0 14px; scrollbar-width:none; }
.suggestion-row:empty { display:none; }
.suggestion-row button { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:9px 13px; color:#cac3c5; background:transparent; cursor:pointer; font-size:.8rem; }
.suggestion-row button:hover { color:#fff; border-color:rgba(242,7,47,.45); background:rgba(242,7,47,.07); }

.composer { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:end; padding:9px; border:1px solid rgba(255,255,255,.13); border-radius:21px; background:#111114; box-shadow:var(--shadow); }
.composer:focus-within { border-color:rgba(242,7,47,.52); box-shadow:0 0 0 3px rgba(242,7,47,.08), var(--shadow); }
.composer textarea { min-height:44px; max-height:130px; resize:none; border:0; outline:0; background:transparent; color:#fff; line-height:1.45; padding:11px 5px; }
.composer textarea::placeholder { color:#777074; }
.mic-button, .send-button { width:44px; height:44px; border-radius:14px; }
.mic-button.listening { color:#fff; background:#cb092c; border-color:#ff4d6d; animation:pulse 1s infinite; }
.send-button { background:var(--red); border-color:transparent; box-shadow:0 8px 24px rgba(242,7,47,.25); }
.send-button:hover { background:#ff2148; }
.send-button:disabled { opacity:.45; cursor:not-allowed; }
.privacy-note { color:#777074; font-size:.72rem; text-align:center; margin:11px 0 0; }

dialog { border:0; padding:0; border-radius:24px; color:var(--ink); background:transparent; width:min(700px, calc(100% - 28px)); max-height:calc(100dvh - 28px); }
dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.settings-card, .lock-card { border:1px solid rgba(255,255,255,.13); border-radius:24px; background:linear-gradient(145deg,#17171b,#0e0e11); box-shadow:0 34px 100px rgba(0,0,0,.68); }
.settings-card { padding:clamp(22px,5vw,36px); }
.settings-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; }
.close-button { width:40px; height:40px; border-radius:50%; font-size:1.7rem; line-height:1; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.settings-grid label, .lock-card label { display:grid; gap:8px; color:#bbb3b6; font-size:.82rem; font-weight:700; }
.settings-grid input, .settings-grid select, .settings-grid textarea, .lock-card input { width:100%; color:#fff; background:#0b0b0d; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 13px; outline:none; }
.settings-grid textarea { resize:vertical; line-height:1.45; }
.settings-grid .full-width { grid-column:1 / -1; }
.voice-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.preview-voice-button { border:1px solid rgba(242,7,47,.55); border-radius:12px; padding:0 16px; color:#fff; background:rgba(242,7,47,.12); font-weight:800; cursor:pointer; }
.preview-voice-button:hover { background:rgba(242,7,47,.24); }
.preview-voice-button:disabled { opacity:.55; cursor:wait; }
.field-help { color:#827a7e; font-size:.74rem; font-weight:500; line-height:1.4; }
[hidden] { display:none!important; }
.settings-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.save-button, .lock-card button { border:0; border-radius:12px; padding:12px 18px; background:var(--red); color:#fff; font-weight:800; cursor:pointer; }
.switch-label { display:flex; align-items:center; gap:10px; color:#c8c0c3; font-size:.85rem; cursor:pointer; }
.switch-label input { position:absolute; opacity:0; }
.switch { width:42px; height:24px; border-radius:999px; background:#35353a; position:relative; transition:.2s; }
.switch::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:white; transition:.2s; }
.switch-label input:checked + .switch { background:var(--red); }
.switch-label input:checked + .switch::after { transform:translateX(18px); }

.lock-screen { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 20%, rgba(242,7,47,.2), transparent 40%), #070708; }
.lock-screen[hidden] { display:none; }
.lock-card { width:min(420px,100%); padding:34px; text-align:center; }
.lock-avatar { width:110px; height:110px; margin:-86px auto 18px; border:1px solid rgba(255,255,255,.15); border-radius:50%; overflow:hidden; background:#0d0d10; box-shadow:0 0 50px rgba(242,7,47,.25); }
.lock-avatar img { width:100%; height:155%; object-fit:cover; object-position:50% 10%; }
.lock-card p { color:var(--muted); }
.lock-card label { text-align:left; margin-top:20px; }
.lock-card button { width:100%; margin-top:14px; }
.form-error { min-height:20px; margin:12px 0 0!important; color:#ff6682!important; font-size:.82rem; }

@keyframes breathe { 0%,100%{transform:rotate(var(--tilt)) translateY(0) scale(var(--scale))} 50%{transform:rotate(var(--tilt)) translateY(-8px) scale(calc(var(--scale) * 1.008))} }
@keyframes shadowBreath { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(.92);opacity:.5} }
@keyframes haloSpin { to{transform:rotate(360deg)} }
@keyframes talk { from{transform:translateY(0) rotate(-.4deg) scale(var(--scale))} to{transform:translateY(-5px) rotate(.5deg) scale(calc(var(--scale) * 1.012))} }
@keyframes surprise { 0%{transform:scale(1)} 45%{transform:translateY(-18px) scale(1.045)} 100%{transform:scale(1)} }
@keyframes tapReact { 0%{transform:scale(1)} 40%{transform:translateY(-12px) rotate(2deg) scale(1.04)} 100%{transform:scale(1)} }
@keyframes sparkOut { 0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)} 25%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.4) rotate(20deg)} }
@keyframes pulse { 50%{opacity:.45;transform:scale(.9)} }
@keyframes typing { 0%,60%,100%{transform:translateY(0);opacity:.45} 30%{transform:translateY(-5px);opacity:1} }
@keyframes messageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

@media (max-width: 900px) {
  body { overflow:hidden; }
  .app-shell { grid-template-columns:1fr; grid-template-rows:minmax(250px, 39dvh) minmax(0, 61dvh); height:100dvh; }
  .avatar-panel { min-height:0; padding:16px 18px 10px; grid-template-rows:auto 1fr; border-right:0; border-bottom:1px solid var(--line); }
  .brand-mark { width:40px; height:40px; }
  .mood-chip { margin-top:-34px; }
  .avatar-stage { min-height:0; width:100%; }
  .avatar-stage img { height:calc(100% + 45px); max-height:none; bottom:-42px; }
  .shadow { bottom:-1%; width:36%; }
  .halo-one { width:min(68%, 300px); }.halo-two { width:min(49%, 220px); }
  .avatar-caption { position:absolute; z-index:6; left:18px; right:18px; bottom:10px; width:auto; min-height:0; padding:11px 13px; font-size:.85rem; background:rgba(8,8,10,.82); }
  .chat-panel { min-height:0; padding:16px 14px max(10px, env(safe-area-inset-bottom)); grid-template-rows:auto 1fr auto auto auto; }
  .chat-toolbar { padding-bottom:12px; }
  .chat-toolbar h2 { font-size:1.35rem; }
  .chat-toolbar .eyebrow { display:none; }
  .icon-button { width:39px; height:39px; }
  .messages { padding:14px 2px 8px 0; }
  .message { max-width:89%; margin-bottom:12px; }
  .message-bubble { padding:11px 13px; font-size:.93rem; }
  .suggestion-row { padding-bottom:8px; }
  .privacy-note { display:none; }
}

@media (max-width: 560px) {
  .settings-grid { grid-template-columns:1fr; }
  .settings-grid .full-width { grid-column:auto; }
  .settings-footer { align-items:stretch; flex-direction:column; }
  .save-button { width:100%; }
  .voice-control { grid-template-columns:1fr; }
  .preview-voice-button { min-height:44px; }
}

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