/* Device simulation shared by all six concepts.
   Not part of any proposed design: it only draws the phone chrome (status bar, notch,
   home indicator / Android nav bar, on-screen keyboard) and switches mock states.
   Concepts use --sat / --sab exactly where production would use env(safe-area-inset-*). */

@font-face { font-family: "Samsung Sans"; src: url("../assets/SamsungSans-Light.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Samsung Sans"; src: url("../assets/SamsungSans-Bold.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #e9ebef; font-family: "Samsung Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
html.embedded body { background: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Device ---------- */
.device {
    --sat: 47px;              /* iPhone 12–15 notch safe area */
    --sab: 34px;              /* home indicator */
    --kbd: 0px;
    position: relative; width: 390px; height: 844px; overflow: hidden;
    margin: 0 auto; background: #fff;
}
html:not(.embedded) .device { margin: 24px auto; border-radius: 48px; box-shadow: 0 0 0 10px #1b1d22, 0 0 0 11px #3a3d44, 0 30px 60px -20px rgba(0,0,0,.45); }
@media (max-width: 440px) { html:not(.embedded) .device { margin: 0 auto; border-radius: 0; box-shadow: none; } }

html[data-os="android"] .device { --sat: 36px; --sab: 48px; }
html[data-state="keyboard"] .device { --kbd: 336px; --sab: 0px; }
html[data-state="keyboard"][data-os="android"] .device { --kbd: 290px; }

/* The app screen. When the keyboard is up the WebView is resized (Capacitor resize: "native"),
   so the screen ends where the keyboard starts. */
.screen { position: absolute; inset: 0 0 var(--kbd) 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }

/* ---------- Status bar ---------- */
.sb { position: absolute; z-index: 50; top: 0; left: 0; right: 0; height: var(--sat); display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 44px; font: 600 16px/1 -apple-system, "SF Pro Text", system-ui, sans-serif; color: #000; pointer-events: none; }
.sb .island { position: absolute; left: 50%; top: 11px; width: 122px; height: 34px; margin-left: -61px; border-radius: 20px; background: #000; }
.sb .glyphs { display: flex; gap: 6px; align-items: center; }
.sb .glyphs svg { height: 12px; fill: currentColor; }
html.sb-light .sb { color: #fff; }
html[data-os="android"] .sb { padding: 0 20px; font: 500 14px/1 Roboto, system-ui, sans-serif; }
html[data-os="android"] .sb .island { width: 14px; height: 14px; top: 11px; margin-left: -7px; }

/* ---------- Bottom chrome ---------- */
.home { position: absolute; z-index: 50; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #111; pointer-events: none; }
html.sb-light .home { background: #fff; }
html[data-os="android"] .home { display: none; }
.navbar { display: none; position: absolute; z-index: 50; bottom: 0; left: 0; right: 0; height: 48px; align-items: center; justify-content: space-around; padding: 0 60px; background: rgba(0,0,0,.04); }
html[data-os="android"] .navbar { display: flex; }
html[data-os="android"].sb-light .navbar { background: rgba(255,255,255,.04); }
.navbar i { width: 14px; height: 14px; border: 2px solid #555; display: block; }
.navbar i:nth-child(1) { border-width: 0 0 2px 2px; transform: rotate(45deg); border-radius: 1px; }
.navbar i:nth-child(2) { border-radius: 50%; }
.navbar i:nth-child(3) { border-radius: 3px; }
html.sb-light .navbar i { border-color: #ccc; }

/* ---------- Keyboard (full keyboard – the personal number may contain letters) ---------- */
.kbd { display: none; position: absolute; z-index: 60; left: 0; right: 0; bottom: 0; height: var(--kbd); background: #d1d4da; padding: 0 3px; font-family: -apple-system, system-ui, sans-serif; }
html[data-state="keyboard"] .kbd { display: block; }
.kbd .predict { height: 44px; display: flex; align-items: center; justify-content: space-around; font-size: 16px; color: #111; margin: 0 -3px 4px; border-bottom: .5px solid #b9bcc2; }
.kbd .predict span + span { border-left: 1px solid #b9bcc2; padding-left: 30px; }
.kbd .kr { display: flex; gap: 6px; margin-bottom: 11px; }
.kbd .kr.mid { padding: 0 19px; }
.kbd .k { flex: 1; height: 42px; border-radius: 5px; background: #fff; box-shadow: 0 1px 0 #898a8d; display: grid; place-items: center; color: #000; font-size: 22px; }
.kbd .k.fn { flex: 1.35; background: #abb0ba; font-size: 17px; }
.kbd .k.w { flex: 2.3; font-size: 15px; }
.kbd .k.space { flex: 5.5; font-size: 15px; }
html.kbd-dark .kbd { background: #2b2b2e; }
html.kbd-dark .kbd .predict { color: #fff; border-color: #444; }
html.kbd-dark .kbd .k { background: #6b6b6e; color: #fff; box-shadow: 0 1px 0 #111; }
html.kbd-dark .kbd .k.fn { background: #464649; }
html[data-os="android"] .kbd { background: #eef0f4; padding: 10px 4px 48px; }
html[data-os="android"] .kbd .k { border-radius: 8px; box-shadow: none; height: 46px; font-family: Roboto, system-ui, sans-serif; }
html[data-os="android"] .kbd .k.fn { background: #d3e3fd; }
html[data-os="android"] .kbd .navbar { display: flex; }

/* ---------- Mock state switching ---------- */
html:not([data-state="error"]) .only-error,
html:not([data-state="keyboard"]) .only-keyboard,
html:not([data-state="loading"]) .only-loading,
html:not([data-state="code"]) .only-code,
html:not([data-state="loading"]):not([data-state="code"]) .only-progress { display: none !important; }
html[data-state="keyboard"] .hide-keyboard,
html[data-state="error"] .hide-error,
html[data-state="loading"] .hide-loading,
html[data-state="loading"] .hide-progress,
html[data-state="code"] .hide-progress,
html[data-state="code"] .hide-code { display: none !important; }

/* Shared spinner, concepts colour it with currentColor */
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* Standalone switcher (only when a concept is opened on its own) */
.switcher { max-width: 390px; margin: 0 auto 32px; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px; font: 13px/1.2 system-ui, sans-serif; }
.switcher a { padding: 7px 11px; border-radius: 99px; background: #fff; color: #222; text-decoration: none; border: 1px solid #d4d7dd; }
.switcher a[aria-current="true"] { background: #1d61a1; color: #fff; border-color: #1d61a1; }
.switcher .back { margin-right: auto; background: transparent; border-color: transparent; color: #1d61a1; }
html[data-os="android"].kbd-dark .kbd { background: #1f2023; }
html[data-os="android"].kbd-dark .kbd .k { background: #3c3d41; color: #fff; }
html[data-os="android"].kbd-dark .kbd .k.fn { background: #2d4a73; }