:root {
  --bg: #05070a;
  --ink: #e8edf2;
  --muted: #8b95a1;
  --line: rgba(255, 255, 255, 0.08);
  --blue: #3b82f6;
  --blue-2: #60a5fa;
  --you: #0c4aa0;
  --you-2: #1a73e8;
  --them: #22262e;
  --screen: #07090d;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { color-scheme: dark; }
body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.room {
  position: fixed; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,10,.72) 0%, rgba(5,7,10,.28) 46%, rgba(5,7,10,.55) 100%),
    linear-gradient(180deg, rgba(5,7,10,.2), rgba(5,7,10,.72)),
    url("../assets/room.jpg") center / cover no-repeat;
  filter: saturate(.7) brightness(.62);
  transform: scale(1.06);
  transition: filter 1.4s ease;
}
.asleep .room { filter: saturate(.4) brightness(.18); }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 8;
  opacity: .13;
  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='.8' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}

.stage {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  gap: 48px;
}

.desk-copy {
  display: none;
  max-width: 340px;
  padding: 28px 26px 30px;
  border-radius: 24px;
  background: rgba(6, 8, 12, .58);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1.1s .35s ease forwards;
}
.desk-kicker {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--blue-2);
  margin-bottom: 10px;
}
.desk-copy h1 {
  font-weight: 500;
  font-size: 42px;
  letter-spacing: -.03em;
  line-height: .95;
}
.desk-sub { margin-top: 14px; color: var(--muted); font-size: 15px; }
.desk-cta { margin-top: 28px; color: #c9d2db; font-size: 14px; }

.phone {
  width: min(402px, 100%);
  filter: drop-shadow(0 28px 48px rgba(0,0,0,.72)) drop-shadow(0 0 28px rgba(59,130,246,.16));
  transform: translateY(18px) scale(.985);
  opacity: 0;
  animation: phone-in 1s .15s ease forwards;
}
.asleep .phone { filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
@keyframes phone-in {
  to { transform: none; opacity: 1; }
}
@keyframes rise {
  to { transform: none; opacity: 1; }
}

.phone-bezel {
  background: linear-gradient(160deg, #22262e, #07080b 42%, #000);
  border-radius: 44px;
  padding: 12px 10px 16px;
  border: 1px solid #2f333c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -8px 16px rgba(0,0,0,.5);
  position: relative;
}
.phone-ear {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 118px; height: 22px;
  background: #050608;
  border-radius: 16px;
  z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.ear-speaker { width: 52px; height: 5px; border-radius: 4px; background: #1c1f26; }
.ear-cam {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a6aa3, #0b1a2c 60%, #000);
}
.screen {
  background: var(--screen);
  border-radius: 34px;
  overflow: hidden;
  height: min(78dvh, 760px);
  min-height: 560px;
  position: relative;
  display: flex; flex-direction: column;
}
.home-bar {
  width: 118px; height: 5px; border-radius: 99px;
  background: #3a3f48;
  margin: 8px auto 0;
}

.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view[hidden] { display: none !important; }

.view-lock {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, #0b1018 0%, #07090d 50%, #05070a 100%);
  padding: calc(48px + var(--safe-t)) 22px calc(22px + var(--safe-b));
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
.lock-status {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: .16em;
  color: #c5ccd4;
  padding: 0 8px;
  opacity: 0;
  animation: fade .6s .4s ease forwards;
}
.lock-icons { display: flex; align-items: center; gap: 3px; }
.sig {
  display: inline-block; width: 3px; height: 8px;
  background: #3d4550; align-self: flex-end;
}
.sig:nth-child(2) { height: 10px; }
.sig:nth-child(3) { height: 12px; }
.sig:nth-child(4) { height: 14px; }
.sig.on { background: #d7dee6; }
.bat {
  margin-left: 6px; width: 20px; height: 9px;
  border: 1px solid #c5ccd4; border-radius: 2px; position: relative;
}
.bat::after {
  content: ""; position: absolute; right: -3px; top: 2px;
  width: 2px; height: 4px; background: #c5ccd4; border-radius: 0 1px 1px 0;
}
.bat b { display: block; height: 100%; width: 62%; background: #d7dee6; }

.lock-clock { margin-top: 56px; text-align: center; }
.lock-time {
  font-weight: 400;
  font-size: 88px;
  letter-spacing: -.06em;
  line-height: .85;
  color: #f3f6f8;
  text-shadow: 0 8px 40px rgba(0,0,0,.45);
  opacity: 0;
  animation: fade .8s .55s ease forwards;
}
.lock-date {
  margin-top: 10px;
  color: #b7c0c9;
  font-size: 17px;
  opacity: 0;
  animation: fade .8s .7s ease forwards;
}

.notif {
  margin-top: 54px;
  width: 100%;
  border: 0;
  text-align: left;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  background: rgba(28, 32, 40, .72);
  backdrop-filter: blur(18px);
  color: inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(-16px) scale(.98);
}
.notif.in {
  animation: drop .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
.notif:hover { background: rgba(36, 41, 50, .86); }
.notif-ava {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 1px solid rgba(255,255,255,.08);
}
.notif-top {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted);
}
.notif-top strong { color: #fff; font-weight: 600; font-size: 14px; }
.notif-msg { margin-top: 2px; font-size: 15px; color: #e6ebf0; }
.notif-ticks svg {
  width: 28px; height: 16px; fill: none;
  stroke: #6b7380; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .4s;
}
.notif.seen .notif-ticks svg { stroke: var(--blue-2); }

.lock-bottom {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sound-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #9aa3ad;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sound-btn.off { color: #5c646c; }
.lock-hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #66707a;
  opacity: 0;
  animation: fade .6s 1.6s ease forwards;
}

@keyframes drop {
  to { transform: none; opacity: 1; }
}
@keyframes fade { to { opacity: 1; } }

.view-chat {
  background:
    radial-gradient(circle at 12% 8%, rgba(59,130,246,.07), transparent 26%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 14px),
    #0b0d12;
}
.chat-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 28px 40px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: calc(38px + var(--safe-t)) 12px 10px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 16, 22, .92);
  backdrop-filter: blur(12px);
}
.back {
  border: 0; background: none; color: var(--blue-2);
  font-size: 30px; line-height: 1;
}
.head-ava-wrap {
  position: relative; border: 0; background: none; padding: 0;
  width: 36px; height: 36px;
}
.head-ava {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
  display: block;
}
.ava-pulse {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(96,165,250,.0);
  pointer-events: none;
}
.head-ava-wrap.live .ava-pulse {
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { border-color: rgba(96,165,250,.7); transform: scale(.92); opacity: 1; }
  100% { border-color: rgba(96,165,250,0); transform: scale(1.25); opacity: 0; }
}
.head-name { font-weight: 600; font-size: 15px; }
.head-ticks { color: var(--blue-2); font-size: 12px; letter-spacing: -1px; }
.head-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.head-ticker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--blue-2);
}
.head-ticker.flash { animation: tickerflash .7s ease; }
@keyframes tickerflash {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 16px rgba(96,165,250,.9); color: #fff; }
}

.thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
.thread::-webkit-scrollbar { width: 0; }

.daychip {
  align-self: center;
  margin: 6px 0 10px;
  font-size: 11px;
  color: #8a939c;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 99px;
  font-family: "IBM Plex Mono", monospace;
}

.row { display: flex; width: 100%; }
.row.you { justify-content: flex-end; }
.row.them { justify-content: flex-start; }

.bubble {
  max-width: 78%;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.35;
  border-radius: 18px;
  animation: pop .28s ease;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.row.you .bubble {
  background: linear-gradient(180deg, var(--you-2), var(--you));
  color: #f4f8ff;
  border-bottom-right-radius: 5px;
}
.row.them .bubble {
  background: var(--them);
  color: #eef2f6;
  border-bottom-left-radius: 5px;
  border: 1px solid rgba(255,255,255,.04);
}
.bubble em { font-style: normal; color: #9ec5ff; }
.row.them .bubble em { color: var(--blue-2); }
.bubble.special {
  box-shadow: 0 0 0 1px rgba(96,165,250,.35), 0 0 24px rgba(59,130,246,.18);
}

.media {
  max-width: 58%;
  border-radius: 16px;
  overflow: hidden;
  animation: pop .28s ease;
  border: 1px solid rgba(255,255,255,.06);
}
.media img { display: block; width: 100%; }

.receipt {
  align-self: flex-end;
  font-size: 11px;
  color: #6b7380;
  padding: 0 4px 6px;
  display: flex; align-items: center; gap: 5px;
  font-family: "IBM Plex Mono", monospace;
  min-height: 16px;
}
.receipt.opened { color: var(--blue-2); }
.receipt .ticks { letter-spacing: -1px; }

.typing-row { justify-content: flex-start; }
.typing {
  display: flex; gap: 4px; align-items: center;
  background: var(--them);
  border-radius: 14px;
  padding: 10px 12px;
}
.typing[hidden] { display: none !important; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8b95a1;
  animation: blink 1.1s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@keyframes pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.composer {
  flex: 0 0 auto;
  padding: 6px 10px calc(10px + var(--safe-b));
  background: linear-gradient(180deg, transparent, #0b0d12 18%);
}
.choices[hidden] { display: none !important; }
.choices {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end;
  padding: 4px 2px 10px;
}
.choice {
  border: 1px solid rgba(96,165,250,.35);
  background: rgba(12, 22, 38, .88);
  color: #d7e6ff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  animation: pop .25s ease;
}
.choice:hover { background: rgba(30, 58, 110, .95); }
.choice.link {
  border-color: rgba(96,165,250,.7);
  background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
  color: #fff;
}

.composer-bar {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.plus {
  width: 28px; height: 28px; border-radius: 50%;
  background: #1a1f27; display: grid; place-items: center;
  color: #8b95a1; font-size: 18px;
}
.real-input {
  height: 36px; border-radius: 18px;
  border: 1px solid var(--line);
  background: #12151b;
  color: #e8edf2;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
  width: 100%;
}
.real-input::placeholder { color: #5d6670; }
.real-input:disabled {
  color: #5d6670;
}
.send {
  width: 32px; height: 32px; border-radius: 50%;
  border: 0;
  background: #243044;
  position: relative;
}
.send:not(:disabled) { background: var(--blue); }
.send::before {
  content: "";
  position: absolute; left: 11px; top: 10px;
  border: 6px solid transparent;
  border-left: 10px solid #9aa3ad;
}
.send:not(:disabled)::before { border-left-color: #fff; }

.stamp {
  align-self: center;
  margin: 16px 0 8px;
  text-align: center;
  animation: pop .4s ease;
}
.stamp b {
  display: block;
  font-size: 28px;
  letter-spacing: -.04em;
  color: var(--blue-2);
}
.stamp span {
  display: block;
  margin-top: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7b848e;
}

@media (min-width: 960px) {
  .stage {
    grid-template-columns: auto 1fr;
    justify-content: center;
    padding-left: 8vw;
    gap: 72px;
  }
  .desk-copy { display: block; opacity: 1; transform: none; }
  .phone { width: 390px; }
  .screen { height: 720px; }
}

@media (max-width: 720px) {
  .room { filter: saturate(.55) brightness(.22); }
  .phone { width: min(100%, 430px); filter: none; animation: none; opacity: 1; transform: none; }
  .phone-bezel {
    padding: 0; border-radius: 0; border: 0;
    background: #000; box-shadow: none;
  }
  .phone-ear, .home-bar { display: none; }
  .screen {
    height: 100dvh; min-height: 100dvh; border-radius: 0;
  }
  .stage { padding: 0; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .notif, .lock-time, .lock-date, .lock-status, .lock-hint, .phone, .desk-copy { opacity: 1; transform: none; }
}