/* Kiosk shell on top of the Sunrise mockup styles */
html,body{height:100%;margin:0;overscroll-behavior:none}
body{padding:0!important;background:#000;overflow:hidden;font-family:"Outfit","Figtree",system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
input{-webkit-user-select:text;user-select:text}
html,body{position:fixed;left:0;top:0;width:100%;overflow:hidden}
/* The stage is pinned to the top-left and sized in JS from the real window size, so a stale viewport after rotation can never shift it sideways */
.wrap{position:fixed;left:0;top:0;width:100vw;height:100vh;max-width:none!important;margin:0!important;display:block;background:#000;gap:0;overflow:hidden}
.holder{position:absolute;left:0;top:0;margin:0!important;border-radius:0!important;overflow:hidden}

body.portal .wrap{display:none!important}
.gate{flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px}
.gate-card{width:min(480px,100%);box-sizing:border-box;padding:34px 36px;border-radius:26px;background:rgba(255,255,255,.86);color:#1d2433;box-shadow:0 20px 60px rgba(0,0,0,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:14px}
.gate-card h2{margin:0;font-size:32px;font-weight:700}
.gate-card p{margin:0;font-size:18px;color:#4c566b}
.gate-card .gate-sub{font-size:16px}
.gate-card label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:600}
.gate-card input{font:inherit;font-size:22px;padding:14px 16px;border-radius:14px;border:2px solid rgba(29,36,51,.25);background:#fff;color:#1d2433;letter-spacing:.08em}
.gate-btn{min-height:58px;border-radius:16px;background:#1d2433;color:#fff;font-size:20px;font-weight:700}
.gate-link{display:block;text-align:center;line-height:44px;min-height:44px;color:#33405a;font-size:16px;text-decoration:underline;font-weight:600}
.gate-err{color:#c2352b!important;font-weight:700}
.netchip{margin-left:10px;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.35);color:#fff;font-size:14px;font-weight:700}

.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:40}
.confetti i{position:absolute;top:-16px;width:11px;height:16px;border-radius:3px;opacity:0;animation:cf linear forwards}
@keyframes cf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(var(--dx),1300px) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

.app[data-skin="sunrise"] .timecard{color:#1d2433;text-shadow:none}
.app[data-skin="sunrise"] .timecard .tc-due,.app[data-skin="sunrise"] .timecard .tc-big{color:#1d2433}

/* ===== Messages (kids) ===== */
.msgstrip{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:18px;background:#fff3e4;border:2px solid #e8832a;color:#7a3d00;font-weight:700;font-size:20px;cursor:pointer;animation:msgpulse 1.8s infinite}
.msgstrip svg{width:26px;height:26px;color:#e8832a;flex:none}
.msgstrip .ms-t{flex:1;min-width:0}
.ms-n{min-width:28px;height:28px;border-radius:14px;background:#c2451a;color:#fff;font-weight:800;font-size:17px;display:inline-grid;place-items:center;padding:0 7px;box-sizing:border-box}
@keyframes msgpulse{0%{box-shadow:0 0 0 0 rgba(232,131,42,.5)}70%{box-shadow:0 0 0 12px rgba(232,131,42,0)}100%{box-shadow:0 0 0 0 rgba(232,131,42,0)}}
.msgs-btn{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:999px;border:2px solid transparent;background:#fff;color:#1d2433;font-weight:800;font-size:17px;position:relative}
.msgs-btn svg{width:22px;height:22px}
.msgs-btn .ms-n{margin-left:2px}
.chat{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0}
.chat-card{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:26px;background:rgba(255,255,255,.9);color:#1d2433;overflow:hidden;box-shadow:0 10px 30px rgba(20,40,80,.14)}
.chat-top{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid #dfe4ec;font-size:22px}
.chat-av{width:40px;height:40px;border-radius:50%;background:#2f3f63;color:#fff;display:grid;place-items:center}.chat-av svg{width:22px;height:22px}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.chat-empty{margin:auto;color:#5b6574;font-size:22px;text-align:center}
.chat-day{align-self:center;font-size:14px;color:#6b7587;font-weight:700;margin-top:4px}
.bub{display:flex;flex-direction:column;gap:4px;max-width:70%}
.bub.me{align-self:flex-end;align-items:flex-end}.bub.them{align-self:flex-start;align-items:flex-start}
.bub-t{padding:11px 18px;border-radius:22px;font-size:23px;line-height:1.3;overflow-wrap:anywhere}
.bub.them .bub-t{background:#eceff5;border-bottom-left-radius:6px}
.bub.me .bub-t{background:var(--kc,#1f4fa3);color:var(--onk,#fff);border-bottom-right-radius:6px}
.bub-meta{font-size:13px;color:#6b7587}
.vthumb{position:relative;width:300px;height:170px;border-radius:20px;border:0;background:linear-gradient(135deg,#4d6aa8,#8fa8d6);display:grid;place-items:center;color:#1d2433}
.vplay{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}.vplay svg{width:28px;height:28px}
.vsecs{position:absolute;left:10px;bottom:10px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-size:14px;font-weight:700;padding:2px 9px}
.vnew{position:absolute;right:10px;top:10px;border-radius:10px;background:#e8832a;color:#fff;font-size:13px;font-weight:800;padding:2px 9px}
.bub.fresh .vthumb{outline:3px solid #e8832a}
.chat-compose{border-top:1px solid #dfe4ec;padding:12px 18px 14px;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.7)}
.chat-quick{display:flex;gap:8px;flex-wrap:wrap}
.qr{min-height:46px;padding:0 18px;border-radius:23px;border:2px solid #d3dae4;background:#fff;color:#1d2433;font-weight:700;font-size:18px}
.chat-row{display:flex;gap:10px;align-items:center}
.chat-row input{flex:1;min-width:0;height:56px;border-radius:28px;border:2px solid #d3dae4;background:#fff;padding:0 22px;font-size:22px;color:#1d2433}
.chat-send,.chat-vid{height:56px;border-radius:28px;border:0;font-weight:800;font-size:19px;padding:0 26px}
.chat-send{background:var(--kc,#1f4fa3);color:var(--onk,#fff)}
.chat-vid{background:#1d2433;color:#fff;display:flex;align-items:center;gap:8px;padding:0 20px}.chat-vid svg{width:26px;height:26px}
.app.port .bub,.app.phone .bub{max-width:85%}
.app.phone .vthumb{width:240px;height:140px}
.app.phone .chat-row{flex-wrap:wrap}.app.phone .chat-row input{flex-basis:100%}
.app.port .list-head .msgs-btn,.app.phone .list-head .msgs-btn{order:2}

/* ---- Phone: a normal scrolling page (tablets keep the fixed stage above). Content runs to the very bottom and scrolls behind the home bar. ---- */
html.doc,html.doc body{position:static;height:auto;min-height:100%;overflow:visible;overflow-x:hidden;background:#6f93bd}
html.doc .wrap{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:100vh;overflow:visible;background:transparent}
html.doc .holder{position:relative;width:100%;height:auto;min-height:100vh;overflow:visible}
html.doc .app{position:relative;width:100%;height:auto;min-height:100vh;transform:none;overflow:visible}
html.doc .ui{position:relative;inset:auto;min-height:100vh}
html.doc .stage{overflow:visible;flex:1 0 auto}
html.doc .sky{position:fixed;left:0;top:0;width:100vw;height:100vh}
html.doc .skyline{position:fixed}
html.doc .app.phone .tiles,html.doc .app.phone .tiles.n1,html.doc .app.phone .tiles.n2,html.doc .app.phone .tiles.n3{grid-template-rows:none;grid-auto-rows:minmax(min-content,1fr)}
html.doc .gate{min-height:72vh}
.app.phone .gate-card{padding:26px 18px}