/* Resident phone. Réveillon City brand: Rosa Neon, Magenta, Laranja Sunset, Amarelo Dourado, Roxo Neon on Azul Noturno. */
#phone{position:fixed;right:clamp(16px,4vw,72px);bottom:3.5vh;z-index:37;--ph-h:min(58vh,560px);pointer-events:none;font-family:'Bahnschrift','Segoe UI',system-ui,sans-serif;user-select:none}
#phone.hidden{display:none}
.ph-device{
  --frame:linear-gradient(160deg,#1a1440,#07081a 55%,#140c33);--edge:#FF00A866;--screen:#0B0F2B;--ink:#fff4fb;--muted:#b9b2dc;
  --accent:#FF00A8;--accent-ink:#ffffff;--ring:#FFD166;--title:transparent;--title-ink:#FFD166;--row:linear-gradient(90deg,#FF00A8,#E6007D);--row-ink:#ffffff;--card:#151a48cc;
  pointer-events:auto;position:relative;width:calc(var(--ph-h)*.52);height:var(--ph-h);display:grid;grid-template-rows:7%  1fr 5%;
  padding:0 4.2%;border-radius:calc(var(--ph-h)*.075);background:var(--frame);box-shadow:inset 0 0 0 1px var(--edge),inset 0 2px 1px #ffffff1f,0 18px 34px #000c,0 0 0 1px #000;
  animation:ph-up .24s cubic-bezier(.2,.9,.25,1.1) both;font-size:max(10.5px,calc(var(--ph-h)*.026))
}
#phone.closing .ph-device{animation:ph-down .17s ease-in both}
@keyframes ph-up{from{transform:translateY(105%) rotate(4deg);opacity:.4}to{transform:none;opacity:1}}
@keyframes ph-down{to{transform:translateY(105%) rotate(4deg);opacity:.3}}
.ph-bezel{display:flex;align-items:center;justify-content:center;position:relative}
.ph-speaker{width:22%;height:16%;border-radius:9px;background:#000;box-shadow:inset 0 1px 2px #fff2}
.ph-brand{position:absolute;right:8%;height:46%;width:auto;opacity:.8;filter:drop-shadow(0 1px 0 #0008)}
.ph-chin{display:flex;align-items:center;justify-content:center}
.ph-chin::after{content:'';width:16%;height:22%;border-radius:9px;background:#ffffff1c}
.ph-screen{position:relative;overflow:hidden;border-radius:calc(var(--ph-h)*.018);background:var(--screen);color:var(--ink);display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);box-shadow:inset 0 0 0 2px #000,0 0 0 1px #ffffff14}
.ph-wallpaper{position:absolute;inset:0;z-index:0;pointer-events:none}
.ph-device[data-wallpaper='fogos'] .ph-wallpaper{background:radial-gradient(circle at 24% 22%,#ffd16655 0 1.2%,transparent 10%),radial-gradient(circle at 24% 22%,transparent 9%,#ffd16633 10%,transparent 17%),radial-gradient(circle at 78% 34%,#ff7ace55 0 1%,transparent 9%),radial-gradient(circle at 78% 34%,transparent 8%,#ff7ace2e 9%,transparent 15%),radial-gradient(circle at 60% 12%,#ff9fdc40 0 .8%,transparent 7%),linear-gradient(180deg,#0b0f2a,#070a1e 60%,#0f143a)}
.ph-device[data-wallpaper='cidade'] .ph-wallpaper{background:linear-gradient(180deg,#070a1ecc,#070a1e88 45%,#070a1eee),url('/assets/ui/city-arrival.webp') center/cover}
.ph-device[data-wallpaper='mar'] .ph-wallpaper{background:repeating-linear-gradient(172deg,transparent 0 14px,#ff7fd012 15px 16px),linear-gradient(180deg,#131a4a,#0b0f2b 55%,#060817)}
.ph-device[data-wallpaper='liso'] .ph-wallpaper{background:var(--screen)}
.ph-status,.ph-view,.ph-softkeys{position:relative;z-index:1}
.ph-status{display:flex;align-items:center;gap:5px;padding:4px 8px 3px;font-size:.78em;letter-spacing:.3px;background:#0007;font-variant-numeric:tabular-nums}
.ph-bars{width:1.35em;height:1.35em;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}.ph-bars.offline{opacity:.45}
.ph-carrier{font-weight:700;color:var(--accent)}.ph-day{margin-left:auto}.ph-time{font-weight:700}
.ph-battery{width:1.9em;height:.95em;border:1.5px solid var(--ink);border-radius:2px;position:relative;margin-left:3px;padding:1px}
.ph-battery::after{content:'';position:absolute;right:-4px;top:28%;width:2px;height:44%;background:var(--ink)}.ph-battery i{display:block;height:100%;width:82%;background:var(--ink)}
.ph-view{display:flex;flex-direction:column;min-height:0;min-width:0;padding:6px 7px 4px;gap:6px}

/* ---- home */
.ph-home-head{text-align:center;padding-top:1%}
.ph-home-time{display:block;font-size:2.5em;line-height:1;font-weight:700;letter-spacing:1px;text-shadow:0 2px 6px #000a}
.ph-home-date{display:block;font-size:.85em;color:var(--muted);margin-top:2px}
.ph-chips{display:flex;justify-content:center;gap:6px;margin-top:5px}
.ph-chips>span{display:flex;align-items:center;gap:3px;padding:2px 7px;border-radius:9px;background:#0009;font-size:.8em;font-weight:700}
.ph-chip-icon{width:1.2em;height:1.2em;fill:none;stroke:var(--accent);stroke-width:2}.ph-money b{color:var(--accent)}
.ph-title{background:var(--title);color:var(--title-ink);padding:2px 4px;text-align:center;border-radius:4px}
.ph-title h2{font-size:1.4em;font-weight:700;letter-spacing:.4px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000b}
.ph-title small{display:block;font-size:.72em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-home-title{margin-top:auto}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5% 8%;padding:1% 7% 3%;margin-bottom:auto}
.ph-app{border:0;padding:0;background:none;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font:inherit;min-width:0}
/* Every app keeps its own colour, like a real home screen; --glyph-cut matches the tile for cut-outs. */
.ph-app{--app:#7771a0;--app-hi:#a7a2c5}
.ph-app[data-app='zap']{--app:#E6007D;--app-hi:#FF00A8}
.ph-app[data-app='contacts']{--app:#e8681c;--app-hi:#FF8A3D}
.ph-app[data-app='shop']{--app:#b8006a;--app-hi:#FF4FC4}
.ph-app[data-app='gps']{--app:#5200c4;--app-hi:#8a3dff}
.ph-app[data-app='work']{--app:#3f1aa8;--app-hi:#6A00FF}
.ph-app[data-app='camera']{--app:#151a48;--app-hi:#3a3f86}
.ph-app[data-app='reveillon']{--app:#e8a21a;--app-hi:#FFD166}
.ph-app[data-app='room']{--app:#c2005f;--app-hi:#FF6FB5}
.ph-app[data-app='settings']{--app:#2b2f63;--app-hi:#5b5fa3}
.ph-app-face{position:relative;width:100%;aspect-ratio:1;border-radius:24%;display:grid;place-items:center;color:#fff;--glyph-cut:var(--app);
  background:linear-gradient(160deg,var(--app-hi),var(--app) 62%);box-shadow:0 3px 7px #000a,inset 0 1px 0 #ffffff70,inset 0 -2px 0 #0003;transition:transform .1s}
.ph-app-icon{width:60%;height:60%;filter:drop-shadow(0 1px 1px #0005)}
.ph-app-label{font-size:.7em;font-weight:700;letter-spacing:.2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.ph-app.active .ph-app-face{transform:scale(1.1);box-shadow:0 0 0 2px var(--ring),0 0 14px var(--ring),0 3px 7px #000a}
.ph-app.active .ph-app-label{color:var(--accent)}
.ph-badge{position:absolute;top:-12%;right:-12%;min-width:1.5em;height:1.5em;padding:0 .35em;border-radius:1em;background:#e5343a;color:#fff;font:700 .78em/1.5em 'Bahnschrift','Segoe UI',sans-serif;text-align:center;box-shadow:0 1px 3px #000a}

/* ---- lists */
.ph-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;margin:0 -2px;padding:0 2px}
.ph-section{font-size:.68em;letter-spacing:1.6px;color:var(--accent);margin:7px 3px 2px;font-weight:700}
.ph-row{display:flex;align-items:center;gap:7px;width:100%;padding:6px 7px;border:0;border-radius:5px;background:#00000059;color:var(--ink);font:inherit;text-align:left;cursor:pointer;flex-shrink:0}
.ph-row.active{background:var(--row);color:var(--row-ink)}.ph-row.active small{color:inherit;opacity:.8}.ph-row.disabled{opacity:.55}
.ph-row-icon{width:1.5em;height:1.5em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ph-row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.ph-row-text b{font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row-text small{font-size:.74em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-value{flex-shrink:0;font-size:.8em;font-weight:700;display:flex;align-items:center;gap:4px;max-width:48%}
.ph-value em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ph-value i{font-style:normal;opacity:.7}
.ph-row .ph-badge{position:static;font-size:.68em;flex-shrink:0;background:#cd1188}
.ph-avatar{position:relative;flex-shrink:0;width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.92em;box-shadow:inset 0 -2px 0 #0003}
.ph-avatar.online::after{content:'';position:absolute;right:-1px;bottom:-1px;width:.62em;height:.62em;border-radius:50%;background:#3fe08a;box-shadow:0 0 0 2px var(--screen)}
.ph-card{background:var(--card);border-left:3px solid var(--accent);border-radius:4px;padding:7px 9px;font-size:.86em;flex-shrink:0}
.ph-card strong{display:block;font-size:1.06em;color:var(--accent);margin-bottom:2px}.ph-card p{color:var(--ink);opacity:.86;line-height:1.3}
.ph-card.ph-countdown strong{font-size:1.5em;font-variant-numeric:tabular-nums}
.ph-notice{font-size:.78em;color:var(--accent);text-align:center;flex-shrink:0}
.ph-empty{font-size:.8em;color:var(--muted);text-align:center;padding:12px 0}
.ph-photo{flex-shrink:0;border-radius:5px;overflow:hidden;box-shadow:0 0 0 2px #fff3}.ph-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.ph-compose{display:flex;flex-direction:column;gap:6px}
.ph-compose input{width:100%;padding:8px;border-radius:5px;border:1px solid var(--accent);background:#000a;color:var(--ink);font:inherit;font-size:.95em}
.ph-send{align-self:flex-end;padding:6px 14px;border:0;border-radius:5px;background:var(--accent);color:var(--accent-ink);font:700 .9em 'Bahnschrift','Segoe UI',sans-serif;cursor:pointer}
.ph-flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}.ph-flash.on{animation:ph-flash .45s ease-out}
@keyframes ph-flash{from{opacity:.95}to{opacity:0}}

/* ---- RCZAP: messenger in the brand's night palette with its own green */
.zap-typing{color:#3fe08a!important;font-style:italic}
#phone[data-view='zap'] .ph-title{background:linear-gradient(100deg,#6A00FF,#E6007D 60%,#FF00A8);color:#fff;border-radius:6px}
#phone[data-view='zap'] .ph-title small{color:#ffd6f0}
.zap-chat{flex:1;min-height:0;display:flex;flex-direction:column;margin:-6px -7px -4px;background:#090c22}
.zap-head{display:flex;align-items:center;gap:7px;padding:6px 8px;background:linear-gradient(100deg,#6A00FF,#E6007D 60%,#FF00A8);color:#fff}
.zap-who{flex:1;min-width:0;display:flex;flex-direction:column}.zap-who b{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zap-who small{font-size:.72em;opacity:.9}.zap-head .zap-typing{color:#ffd6f0!important}
.zap-head .ph-avatar.online::after{box-shadow:0 0 0 2px #8e0b5e}
.zap-icon-button{width:2em;height:2em;border:0;border-radius:50%;background:#ffffff26;color:#fff;display:grid;place-items:center;cursor:pointer}
.zap-icon-button svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zap-thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:8px 7px;scrollbar-width:thin;scrollbar-color:#E6007D transparent;
  background:radial-gradient(circle at 20% 30%,#ffffff08 0 2px,transparent 3px) 0 0/26px 26px,radial-gradient(circle at 70% 80%,#ffd1660a 0 2px,transparent 3px) 0 0/34px 34px,#090c22}
.zap-empty{margin:auto 6px;padding:7px 9px;border-radius:7px;background:#ffd1661f;color:#ffe7b0;font-size:.78em;text-align:center;line-height:1.35}
.zap-msg{max-width:84%;padding:5px 8px 4px;border-radius:9px;font-size:.88em;line-height:1.3;box-shadow:0 1px 1px #0006;overflow-wrap:anywhere}
.zap-msg.theirs{align-self:flex-start;background:#171c39;color:#eef3f7;border-top-left-radius:2px}
.zap-msg.mine{align-self:flex-end;background:linear-gradient(135deg,#E6007D,#8a00c9);color:#f1fff8;border-top-right-radius:2px}
.zap-msg.failed{background:#5a1f24}
.zap-author{display:block;font-size:.8em;margin-bottom:1px}
.zap-meta{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:.66em;opacity:.75;margin-top:1px;font-variant-numeric:tabular-nums}
.zap-tick{width:1.5em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zap-meta.read{opacity:1}.zap-meta.read .zap-tick{stroke:#f14db5}
.zap-failed{font-style:normal;font-weight:700;color:#ff8a8a}
.zap-location{display:flex;align-items:center;gap:6px;width:100%;padding:6px;border:0;border-radius:6px;background:#00000040;color:inherit;font:inherit;text-align:left;cursor:pointer}
.zap-location svg{width:1.8em;height:1.8em;flex-shrink:0;fill:none;stroke:#ffd166;stroke-width:2}
.zap-location span{display:flex;flex-direction:column;min-width:0}.zap-location b{font-size:.95em}.zap-location small{font-size:.75em;opacity:.8}
.zap-quick{display:flex;gap:4px;overflow-x:auto;padding:5px 6px 2px;scrollbar-width:none;background:#090c22}.zap-quick::-webkit-scrollbar{display:none}
.zap-chip{flex-shrink:0;padding:3px 8px;border:1px solid #E6007D99;border-radius:12px;background:#E6007D1f;color:#ffc9eb;font:inherit;font-size:.74em;cursor:pointer;white-space:nowrap}
.zap-chip:disabled,.zap-send:disabled{opacity:.4;cursor:default}
.zap-compose{display:flex;gap:5px;padding:5px 6px 6px;background:#090c22}
.zap-compose input{flex:1;min-width:0;padding:7px 10px;border:0;border-radius:16px;background:#171c39;color:#fff;font:inherit;font-size:.9em}
.zap-compose input::placeholder{color:#8e87bb}
.zap-send{width:2.4em;height:2.4em;flex-shrink:0;border:0;border-radius:50%;background:#E6007D;color:#fff;display:grid;place-items:center;cursor:pointer}
.zap-send svg{width:55%;height:55%;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}

/* ---- soft keys and keyboard help */
.ph-softkeys{display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(180deg,#242a57,#0e1022);border-top:1px solid #ffffff26}
.ph-softkeys button{height:calc(var(--ph-h)*.06);border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:#c6c3db}
.ph-softkeys button+button{border-left:1px solid #0008;box-shadow:inset 1px 0 0 #ffffff14}
.ph-softkeys svg{width:50%;height:60%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ph-softkeys [data-soft='select']{color:#5be37d}.ph-softkeys [data-soft='back']{color:#ff5a4f}
.ph-softkeys button:active{background:#ffffff14}
.ph-help{position:absolute;right:calc(100% + 16px);bottom:6%;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:11px;color:#e9eef5;text-shadow:0 1px 3px #000;white-space:nowrap}
.ph-help kbd{display:inline-block;min-width:20px;padding:2px 5px;margin-left:3px;border-radius:4px;background:#090c23d9;border:1px solid #ffd16666;color:#ffd166;font:700 10px var(--fontd);text-align:center}
#phone button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- themes: brand colours on four device families */
.ph-device[data-theme='orla']{--frame:linear-gradient(160deg,#fbfcfd,#d4dbe2 50%,#aeb8c2);--edge:#ffffffcc;--screen:#0a2034;--accent:#6cc4ff;--accent-ink:#04203a;--ring:#ffffff;
  --title:linear-gradient(180deg,#a5dcff,#3f8fd9);--title-ink:#fff;--row:linear-gradient(180deg,#a5dcff,#3f8fd9);--row-ink:#fff;--card:#0d2c46d9}
.ph-device[data-theme='orla'] .ph-app-face{border-radius:18%;box-shadow:0 3px 7px #000a,inset 0 1px 0 #fff,inset 0 -10px 14px -8px #0004}
.ph-device[data-theme='orla'] .ph-app-face::before{content:'';position:absolute;inset:0 0 50%;border-radius:18% 18% 40% 40%/18% 18% 18% 18%;background:linear-gradient(#ffffff70,#ffffff10)}
.ph-device[data-theme='orla'] .ph-speaker{background:#222b}
.ph-device[data-theme='mosaico']{--frame:linear-gradient(160deg,#13172f,#06070d);--edge:#ffffff1f;--screen:#070810;--accent:#ff9d5c;--accent-ink:#200d00;--ring:#fff;
  --title:transparent;--title-ink:#fff;--row:#d66011;--row-ink:#fff;--card:#111428e6}
.ph-device[data-theme='mosaico'] .ph-app{--app:#d66011;--app-hi:#d66011}
.ph-device[data-theme='mosaico'] .ph-app-face{border-radius:2px;box-shadow:none}
.ph-device[data-theme='mosaico'] .ph-app.active .ph-app-face{background:#fff;color:#d66011;--glyph-cut:#fff;box-shadow:none}
.ph-device[data-theme='mosaico'] .ph-title{text-align:left}.ph-device[data-theme='mosaico'] .ph-row{border-radius:0}
.ph-device[data-theme='neon']{--frame:linear-gradient(160deg,#eef1f4,#bfc5cc 55%,#9aa1a9);--edge:#ffffffd9;--screen:#030503;--accent:#5dff8a;--accent-ink:#002b0d;--ring:#c9ffd6;
  --title:transparent;--title-ink:#fff;--row:#2fbf55;--row-ink:#021006;--card:#0a1a0ee0}
.ph-device[data-theme='neon'] .ph-app-face{background:transparent;box-shadow:none;--glyph-cut:#030503;color:#e8f5ea}
.ph-device[data-theme='neon'] .ph-app.active .ph-app-face{background:linear-gradient(160deg,#6dff95,#21a446);color:#021006;--glyph-cut:#3ccf66}
.ph-device[data-theme='neon'][data-wallpaper='fogos'] .ph-wallpaper{background:radial-gradient(ellipse at 70% 60%,#2bff6a40,transparent 45%),repeating-radial-gradient(circle at 30% 70%,transparent 0 9px,#2bff6a14 10px 11px),#030503}

/* ---- HUD button and incoming-message banner */
#btn-phone{pointer-events:auto;display:flex;align-items:center;gap:7px;position:absolute;right:24px;bottom:72px;padding:9px 12px;border:1px solid #ffd16666;background:#090c23a6;color:#f7f1e4;font:700 11px var(--fontd);letter-spacing:1px;cursor:pointer}
#btn-phone svg{width:17px;height:17px;fill:none;stroke:#ffd166;stroke-width:1.6}#btn-phone kbd{color:#ffd166}
#btn-phone.has-unread::after{content:attr(data-unread);position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;border-radius:9px;background:#e5343a;color:#fff;font:700 10px/18px var(--fontd);text-align:center}
.armed-local #btn-phone{bottom:196px}
.phone-open #btn-phone,.phone-open #btn-weapon-wheel,.weapon-wheel-open #btn-phone{visibility:hidden}
.phone-open #interact-prompt{opacity:.35}
.ph-toast{position:fixed;right:clamp(16px,4vw,72px);bottom:122px;z-index:39;display:flex;align-items:center;gap:9px;width:min(300px,calc(100vw - 32px));padding:9px 11px;border:1px solid #E6007D99;border-radius:12px;
  background:#090c22f2;color:#eef3f7;font-family:'Bahnschrift','Segoe UI',sans-serif;text-align:left;cursor:pointer;box-shadow:0 10px 24px #000a;animation:ph-toast .25s ease-out}
.ph-toast.hidden{display:none}
@keyframes ph-toast{from{transform:translateY(12px);opacity:0}}
.ph-toast-icon{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;color:#fff;--glyph-cut:#E6007D;background:linear-gradient(160deg,#ee31a9,#E6007D 62%)}
.ph-toast-icon svg{width:62%;height:62%}
.ph-toast-body{min-width:0;display:flex;flex-direction:column}.ph-toast-body b{font-size:12px;color:#3fe08a}
.ph-toast-body small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-open .ph-toast{bottom:calc(3.5vh + min(58vh,560px) + 10px)}
.touch-mode .ph-help,.touch-mode #btn-phone kbd{display:none}
@media(max-width:1000px){.ph-help{display:none}}
@media(max-width:650px){#phone{right:auto;left:50%;transform:translateX(-50%);bottom:2vh;--ph-h:min(66vh,540px,170vw)}#btn-phone{right:16px;bottom:211px}
  .ph-toast{right:16px;bottom:258px}.phone-open .ph-toast{top:12px;bottom:auto}}
@media(max-height:500px) and (min-width:651px){#phone{--ph-h:86vh;bottom:2vh}.phone-open .ph-toast{right:auto;left:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.ph-device,#phone.closing .ph-device,.ph-flash.on,.ph-toast{animation:none}.ph-app-face{transition:none}}
