:root {
  color-scheme: dark;
  --bg: #020817;
  --surface: rgba(7, 20, 40, 0.94);
  --surface-user: linear-gradient(140deg, rgba(8, 39, 70, 0.98), rgba(5, 23, 49, 0.98));
  --text: #f0f8ff;
  --muted: #91a9c3;
  --violet: #20cfff;
  --blue: #168cff;
  --border: rgba(72, 190, 255, 0.13);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg);
}
body {
  margin: 0;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
  min-height: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 14%, rgba(0, 116, 214, 0.18), transparent 30rem),
    linear-gradient(180deg, #030b1c 0%, #010612 65%, #020817 100%);
  overflow: hidden;
  overscroll-behavior: none;
}
button, textarea { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ambient { position: fixed; pointer-events: none; filter: blur(70px); opacity: .25; border-radius: 50%; }
.ambient-one { width: 22rem; height: 22rem; top: 9rem; left: -14rem; background: #2d50ff; }
.ambient-two { width: 18rem; height: 18rem; top: 25rem; right: -12rem; background: #00bde8; }

.app-shell {
  width: min(100%, 47rem);
  height: 100vh;
  height: 100dvh;
  height: var(--visual-viewport-height, 100dvh);
  min-height: 0;
  margin: 0;
  padding: max(.75rem, env(safe-area-inset-top)) 1.15rem max(.45rem, env(safe-area-inset-bottom));
  position: fixed;
  top: var(--visual-viewport-offset-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  transition: height .2s ease, top .2s ease;
}
.topbar { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .7rem; min-height: 4rem; }
.icon-button { border: 1px solid var(--border); background: rgba(17,18,27,.84); border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-content: center; gap: 5px; box-shadow: 0 8px 30px rgba(0,0,0,.32); }
.menu-button span { display: block; width: 1.15rem; height: 2px; background: #e8e6ed; border-radius: 2px; }
.menu-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(0,0,0,.58); backdrop-filter: blur(5px); }
.main-menu { position: fixed; z-index: 49; top: 0; left: 0; width: min(82vw, 20rem); height: 100dvh; padding: max(1.1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(155deg, rgba(6,25,47,.99), rgba(1,7,18,.99)); border-right: 1px solid rgba(32,207,255,.2); box-shadow: 24px 0 60px rgba(0,0,0,.5); }
.menu-heading { display: flex; align-items: center; justify-content: space-between; color: #8ce8ff; letter-spacing: .32em; padding: .45rem .35rem 1.2rem; }
.menu-heading button { width: 2.45rem; height: 2.45rem; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.035); font-size: 1.55rem; }
.new-conversation-button { width: 100%; border: 1px solid rgba(32,207,255,.24); border-radius: 1rem; padding: .95rem 1rem; display: flex; align-items: center; gap: .72rem; background: linear-gradient(135deg, rgba(0,133,213,.2), rgba(13,48,75,.38)); text-align: left; font-weight: 650; }
.new-conversation-button span:first-child { color: #45dcff; font-size: 1.3rem; }
.new-conversation-button:disabled { opacity: .55; }
.main-menu > p { color: var(--muted); font-size: .78rem; line-height: 1.5; margin: .8rem .35rem; }
.brand { min-width: 0; text-align: center; }
.wordmark { font-size: clamp(1.3rem, 5vw, 2rem); font-weight: 300; letter-spacing: .34em; margin-left: .34em; white-space: nowrap; }
.byline { color: #bab6cb; font-size: clamp(.65rem, 2.7vw, .92rem); margin-top: .32rem; white-space: nowrap; }
.online-pill { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: 999px; padding: .7rem .82rem; background: rgba(15,16,23,.8); font-size: .82rem; box-shadow: 0 8px 24px rgba(0,0,0,.26); }
.online-dot { width: .63rem; height: .63rem; background: #1be57c; border-radius: 50%; box-shadow: 0 0 14px rgba(27,229,124,.7); }
.online-pill.offline .online-dot { background: #ff5c7c; box-shadow: 0 0 14px rgba(255,92,124,.6); }

.hero { flex: 0 0 auto; text-align: center; padding: clamp(.45rem, 1.5dvh, 1rem) 0 clamp(.45rem, 1.3dvh, .85rem); }
.core-wrap { width: clamp(11.25rem, min(53vw, 29dvh), 17rem); aspect-ratio: 1; margin: 0 auto clamp(.35rem, 1dvh, .75rem); position: relative; display: grid; place-items: center; isolation: isolate; transition: filter .35s ease, transform .35s ease, opacity .35s ease; }
.core-glow { position: absolute; inset: 11%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(0,205,255,.28), rgba(0,92,190,.16) 46%, transparent 72%); box-shadow: 0 0 62px rgba(0,174,255,.42), 0 0 110px rgba(0,93,255,.18), inset 0 0 44px rgba(0,225,255,.24); animation: aura-breathe 7s ease-in-out infinite alternate; }
.core-art { position: absolute; inset: 2.5%; z-index: 1; width: 95%; height: 95%; object-fit: cover; border-radius: 50%; clip-path: circle(49% at 50% 50%); pointer-events: none; user-select: none; filter: saturate(1.06) contrast(1.04) brightness(.98); animation: energy-breathe 8s ease-in-out infinite alternate; }
.core-particles { position: absolute; inset: 18%; z-index: 2; border-radius: 50%; pointer-events: none; opacity: .22; background-image: radial-gradient(circle, rgba(174,248,255,.9) 0 1px, transparent 1.3px), radial-gradient(circle, rgba(25,181,255,.72) 0 .8px, transparent 1.2px); background-position: 0 0, 7px 11px; background-size: 17px 19px, 23px 29px; mask-image: radial-gradient(circle, #000 0 55%, transparent 82%); animation: particle-drift 20s linear infinite; }
.core-ring { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none; border: 1px solid rgba(111,232,255,.46); filter: drop-shadow(0 0 7px rgba(0,196,255,.58)); }
.ring-one { inset: 7.5%; background: conic-gradient(from 20deg, transparent, rgba(17,160,255,.28), transparent 22%, rgba(32,231,255,.38), transparent 55%, rgba(49,126,255,.34), transparent 85%); mask: radial-gradient(transparent 58%, #000 60%, #000 64%, transparent 66%); animation: orbit 22s linear infinite; }
.ring-two { inset: 12%; transform: rotate(54deg); background: conic-gradient(from 120deg, transparent, rgba(46,226,255,.4), transparent 22%, rgba(0,123,255,.34), transparent 50%, rgba(83,236,255,.34), transparent 82%); mask: radial-gradient(transparent 60%, #000 62%, #000 65%, transparent 67%); animation: orbit-reverse 17s linear infinite; }
.ring-three { inset: 21%; border-color: rgba(87,222,255,.38); box-shadow: 0 0 20px rgba(0,177,255,.3), inset 0 0 18px rgba(0,218,255,.18); animation: breathe 5.5s ease-in-out infinite; }
.core-wave { position: absolute; inset: 30%; z-index: 4; border: 1px solid rgba(109,238,255,.7); border-radius: 50%; opacity: 0; pointer-events: none; box-shadow: 0 0 16px rgba(0,210,255,.35); }
.core-surface { width: 50%; aspect-ratio: 1; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 48% 43%, rgba(8,55,101,.38), rgba(1,14,35,.72) 68%, rgba(0,5,18,.86)); box-shadow: inset 0 0 28px rgba(0,176,255,.18), 0 0 22px rgba(0,164,255,.18); z-index: 5; }
.core-surface span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  letter-spacing: clamp(.12em, .72vw, .28em);
  padding-left: clamp(.12em, .72vw, .28em);
  font-size: clamp(.45rem, 2vw, .78rem);
  line-height: 1;
  color: #b9f3ff;
  text-align: center;
  text-shadow: 0 0 14px #16cfff;
}
.core-wrap[data-state="idle"] { animation: idle-glow 7s ease-in-out infinite alternate; }
.core-wrap[data-state="thinking"] { filter: saturate(1.18) brightness(1.12); animation: thinking-pulse 2.8s ease-in-out infinite; }
.core-wrap[data-state="thinking"] .core-ring { animation-duration: 9s; }
.core-wrap[data-state="searching"] { filter: saturate(1.28) brightness(1.16); }
.core-wrap[data-state="searching"] .ring-one { animation-duration: 4.2s; }
.core-wrap[data-state="searching"] .ring-two { animation-duration: 3.6s; }
.core-wrap[data-state="listening"] { filter: hue-rotate(-8deg) brightness(1.18); animation: listening-pulse 1.8s ease-in-out infinite; }
.core-wrap[data-state="listening"] .core-wave { animation: wave-out 1.8s ease-out infinite; }
.core-wrap[data-state="speaking"] { filter: brightness(1.25); animation: speak-pulse .82s ease-in-out infinite alternate; }
.core-wrap[data-state="speaking"] .core-art { animation: speaking-light .82s ease-in-out infinite alternate; }
.core-wrap[data-state="success"] { animation: success-glow .62s ease-out both; }
.core-wrap[data-state="error"] { animation: error-react .42s ease-out both; filter: hue-rotate(145deg) saturate(1.18); }
.core-wrap[data-state="offline"] { filter: saturate(.48) brightness(.58); opacity: .72; }
.core-wrap[data-state="offline"] .core-ring, .core-wrap[data-state="offline"] .core-art, .core-wrap[data-state="offline"] .core-particles { animation-play-state: paused; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes breathe { 50% { transform: scale(1.05) rotate(8deg); opacity: .72; } }
@keyframes aura-breathe { to { transform: scale(1.045); opacity: .82; } }
@keyframes energy-breathe { to { transform: scale(1.012); filter: saturate(1.1) contrast(1.05) brightness(1.07); } }
@keyframes particle-drift { to { background-position: 34px 38px, -39px 58px; transform: rotate(12deg); } }
@keyframes wave-out { 0% { transform: scale(.72); opacity: 0; } 22% { opacity: .62; } 100% { transform: scale(2.15); opacity: 0; } }
@keyframes speaking-light { to { filter: saturate(1.18) contrast(1.05) brightness(1.18); } }
@keyframes idle-glow { to { filter: brightness(1.06); } }
@keyframes thinking-pulse { 50% { transform: scale(1.018); filter: saturate(1.25) brightness(1.2); } }
@keyframes listening-pulse { 50% { transform: scale(1.022); filter: hue-rotate(-8deg) brightness(1.25); } }
@keyframes speak-pulse { to { transform: scale(1.028); } }
@keyframes success-glow { 45% { filter: brightness(1.42) saturate(1.25); transform: scale(1.025); } }
@keyframes error-react { 35% { transform: translateX(-2px); } 70% { transform: translateX(2px); } }
.hero h1 { color: #55d9ff; font-weight: 500; font-size: clamp(1.35rem, 5vw, 1.8rem); margin: 0 0 .5rem; text-shadow: 0 0 22px rgba(0,181,255,.38); }
.hero p { color: #afadba; max-width: 31rem; margin: 0 auto; line-height: 1.45; font-size: .98rem; }

.conversation {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: .45rem .15rem .8rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.message-row { display: flex; gap: .72rem; align-items: flex-end; max-width: 92%; }
.user-row { align-self: flex-end; justify-content: flex-end; }
.mini-core { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%; margin-bottom: 1.2rem; background: #020817 url('/static/icons/norelii-icon-192.png?v=20260825.4') center / cover no-repeat; box-shadow: 0 0 12px rgba(0,190,255,.68); border: 1px solid rgba(63,220,255,.56); }
.message { border: 1px solid var(--border); border-radius: 1.35rem; padding: 1rem 1rem .75rem; line-height: 1.5; box-shadow: 0 13px 35px rgba(0,0,0,.25); min-width: 9rem; }
.assistant-message { background: linear-gradient(145deg, rgba(29,31,41,.97), rgba(19,21,30,.96)); border-bottom-left-radius: .45rem; }
.user-message { background: var(--surface-user); border-bottom-right-radius: .45rem; }
.message-author { color: var(--violet); font-weight: 650; margin-bottom: .45rem; }
.user-message .message-author { text-align: right; color: #82ddff; }
.message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; color: #858392; font-size: .78rem; }
.listen-button { border: 0; border-radius: .7rem; padding: .45rem .65rem; background: rgba(0,142,220,.14); color: #48dfff; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.listen-button:hover, .listen-button:focus-visible { background: rgba(0,159,226,.25); outline: 1px solid rgba(55,214,255,.42); }
.memory-saved-indicator { margin-left: auto; width: 1.45rem; height: 1.45rem; display: inline-grid; place-items: center; border-radius: 50%; color: #a9f7ff; background: rgba(0,203,236,.13); border: 1px solid rgba(60,226,255,.34); box-shadow: 0 0 14px rgba(0,203,255,.24); animation: memory-confirm .7s ease-out both; }
@keyframes memory-confirm { 45% { transform: scale(1.16); filter: brightness(1.45); } }
.listen-button:disabled { opacity: .55; cursor: wait; }

.composer-zone {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 0;
  padding: .45rem 0 0;
  background: linear-gradient(180deg, transparent, rgba(4,5,10,.96) 18%, rgba(4,5,10,.99) 100%);
  backdrop-filter: blur(15px);
  transition: padding .2s ease;
}
.composer { display: grid; grid-template-columns: 1fr 2.9rem 3.3rem; align-items: end; gap: .35rem; padding: .48rem; border: 1px solid var(--border); background: rgba(14,16,24,.9); border-radius: 1.5rem; box-shadow: 0 -10px 35px rgba(5,5,15,.38); }
.composer textarea { resize: none; max-height: 9rem; min-height: 3.1rem; border: 0; outline: 0; background: linear-gradient(125deg, rgba(35,37,49,.92), rgba(24,26,36,.85)); border-radius: 1.05rem; color: var(--text); padding: .85rem .9rem; line-height: 1.4; }
.composer textarea::placeholder { color: #858492; }
.mic-button, .send-button { border: 0; cursor: pointer; display: grid; place-items: center; }
.mic-button { width: 2.9rem; height: 3.1rem; background: transparent; color: #32d8ff; }
.mic-glyph { width: .8rem; height: 1.2rem; border: 2px solid currentColor; border-radius: .6rem; position: relative; }
.mic-glyph::after { content: ""; position: absolute; width: 1.2rem; height: .7rem; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 .7rem .7rem; left: 50%; bottom: -.45rem; transform: translateX(-50%); }
.send-button { width: 3.3rem; height: 3.3rem; border-radius: 50%; background: linear-gradient(145deg, #15cfff, #0875e8); box-shadow: 0 0 24px rgba(0,181,255,.48); font-size: 2rem; font-weight: 300; }
.send-button:disabled { opacity: .55; cursor: wait; }
.bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; margin-top: .65rem; }
.bottom-nav button { border: 0; background: transparent; color: #908e9f; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .62rem; padding: .15rem; }
.nav-icon { font-size: 1.45rem; line-height: 1; }
.nav-core-button { align-self: center; }
.nav-core { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #020817 url('/static/icons/norelii-icon-192.png?v=20260825.4') center / cover no-repeat; box-shadow: 0 0 18px rgba(0,188,255,.58); border: 1px solid rgba(58,216,255,.52); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 10.8rem; transform: translate(-50%, 1rem); max-width: calc(100% - 2rem); padding: .75rem 1rem; border-radius: 999px; background: rgba(5,25,45,.96); border: 1px solid var(--border); color: #dff8ff; opacity: 0; pointer-events: none; transition: .25s ease; text-align: center; font-size: .82rem; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.settings-backdrop {
  position: fixed;
  z-index: 30;
  inset: 0;
  background: rgba(1, 2, 7, .68);
  backdrop-filter: blur(6px);
}
.settings-sheet {
  position: fixed;
  z-index: 31;
  left: 50%;
  bottom: 0;
  width: min(100%, 47rem);
  transform: translateX(-50%);
  padding: .5rem 1.2rem max(1.2rem, env(safe-area-inset-bottom));
  border: 1px solid rgba(37, 204, 255, .18);
  border-bottom: 0;
  border-radius: 1.6rem 1.6rem 0 0;
  background: linear-gradient(145deg, rgba(7, 28, 50, .99), rgba(2, 10, 23, .99));
  box-shadow: 0 -20px 55px rgba(0, 0, 0, .55), 0 0 34px rgba(0, 174, 255, .12);
  max-height: min(88dvh, 48rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.settings-handle { width: 2.8rem; height: .25rem; margin: 0 auto .8rem; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.settings-header h2 { margin: .12rem 0 0; font-size: 1.25rem; font-weight: 580; }
.settings-kicker { color: #3bd8ff; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.settings-close { width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.04); font-size: 1.55rem; color: #b8b5c4; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.setting-row + .setting-row { border-top: 0; }
.setting-row strong, .setting-volume strong { display: block; font-size: .95rem; }
.setting-row div > span, .setting-volume small { display: block; color: var(--muted); font-size: .76rem; margin-top: .2rem; }
.switch { position: relative; flex: 0 0 auto; width: 3.15rem; height: 1.8rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span:not(.sr-only) { position: absolute; inset: 0; border-radius: 999px; background: #353543; transition: .2s ease; }
.switch > span:not(.sr-only)::after { content: ""; position: absolute; width: 1.35rem; height: 1.35rem; top: .225rem; left: .24rem; border-radius: 50%; background: #d6d3dd; transition: .2s ease; box-shadow: 0 2px 7px rgba(0,0,0,.35); }
.switch input:checked + span { background: linear-gradient(135deg, #087ce8, #19d4ff); }
.switch input:checked + span::after { transform: translateX(1.3rem); background: white; }
.switch input:focus-visible + span { outline: 2px solid #45dcff; outline-offset: 2px; }
.setting-volume { padding: 1rem 0 .5rem; }
.setting-volume label { display: flex; align-items: center; justify-content: space-between; }
.setting-volume label span { color: #45dcff; font-size: .78rem; }
.setting-volume input { width: 100%; accent-color: #18cfff; margin: .9rem 0 .25rem; }
.setting-volume.disabled { opacity: .45; }
.sound-diagnostics { margin-top: .7rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.diagnostic-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.diagnostic-heading h3 { margin: .12rem 0 0; font-size: 1.05rem; }
.diagnostic-local { color: #8cdda9; border: 1px solid rgba(82, 220, 137, .18); background: rgba(50, 190, 109, .08); border-radius: 999px; padding: .35rem .55rem; font-size: .65rem; white-space: nowrap; }
.sound-test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; }
.sound-test-grid button { min-height: 2.7rem; border: 1px solid rgba(45, 207, 255, .14); border-radius: .75rem; background: rgba(255,255,255,.035); color: #e5f7ff; display: flex; align-items: center; gap: .45rem; padding: .55rem .65rem; text-align: left; font-size: .74rem; }
.sound-test-grid button:hover, .sound-test-grid button:focus-visible { background: rgba(0, 161, 225, .13); border-color: rgba(49, 212, 255, .38); outline: none; }
.sound-test-grid button:disabled { opacity: .5; cursor: wait; }
.diagnostic-status { margin: .85rem 0 0; padding: .65rem .75rem; border-radius: .85rem; background: rgba(4, 6, 13, .56); border: 1px solid var(--border); }
.diagnostic-status div { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; }
.diagnostic-status dt { color: var(--muted); font-size: .7rem; }
.diagnostic-status dd { margin: 0; color: #dcd8e8; font-size: .7rem; text-align: right; overflow-wrap: anywhere; }
.diagnostic-error { margin: .55rem 0 0; padding: .55rem .7rem; border-radius: .65rem; background: rgba(180, 54, 93, .09); color: #ffb5c8; font-size: .7rem; }
[hidden] { display: none !important; }
@media (max-width: 360px) {
  .sound-test-grid { grid-template-columns: 1fr; }
}

@media (min-width: 700px) {
  .app-shell { padding-left: 2.2rem; padding-right: 2.2rem; }
  .message-row { max-width: 78%; }
}
@media (max-width: 390px) {
  .app-shell { padding-left: .8rem; padding-right: .8rem; }
  .topbar { grid-template-columns: 2.75rem 1fr auto; }
  .icon-button { width: 2.65rem; height: 2.65rem; }
  .online-pill { padding: .6rem; }
  .online-pill #online-label { display: none; }
  .byline { font-size: .61rem; }
  .message-row { max-width: 97%; }
}
@media (max-height: 740px) {
  .topbar { min-height: 3.35rem; }
  .hero p { font-size: .86rem; line-height: 1.3; }
  .hero h1 { font-size: 1.2rem; margin-bottom: .25rem; }
  .core-wrap { width: clamp(9.75rem, min(48vw, 25dvh), 12.5rem); }
  .bottom-nav { margin-top: .35rem; }
  .nav-core { width: 2.75rem; height: 2.75rem; }
  .bottom-nav button { font-size: .56rem; }
}
@media (max-height: 560px) {
  .hero p, .hero h1 { display: none; }
  .core-wrap { width: clamp(7.25rem, 24dvh, 9rem); margin-bottom: .15rem; }
}
.app-shell.keyboard-open {
  padding-top: max(.45rem, env(safe-area-inset-top));
  padding-bottom: .15rem;
  transition-duration: .16s;
}
.app-shell.keyboard-open .topbar { min-height: 3.1rem; }
.app-shell.keyboard-open .hero { padding: .15rem 0 .25rem; }
.app-shell.keyboard-open .core-wrap {
  width: clamp(7.75rem, 22dvh, 10rem);
  margin-bottom: .1rem;
}
.app-shell.keyboard-open .hero h1,
.app-shell.keyboard-open .hero p { display: none; }
.app-shell.keyboard-open .composer-zone {
  display: flex;
  flex-direction: column;
  padding-top: .25rem;
}
.app-shell.keyboard-open .bottom-nav { order: 1; margin: 0 0 .2rem; }
.app-shell.keyboard-open .composer { order: 2; }
.app-shell.keyboard-open .nav-core { width: 2.45rem; height: 2.45rem; }
.app-shell.keyboard-open .bottom-nav button { font-size: .52rem; gap: .1rem; }
.app-shell.keyboard-open .nav-icon { font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}