#phone{position:relative;width:100%;height:var(--bolha-phone-height);flex-shrink:0;border:6px solid #172331;border-radius:30px;background:#eaf0f5;color:#22364a;box-shadow:0 24px 90px #0007;z-index:55;display:flex;flex-direction:column;overflow:hidden;font:13px system-ui}#phone .phone-notch{height:10px;width:68px;flex-shrink:0;background:#172331;margin:0 auto;border-radius:0 0 16px 16px}#phone header{display:flex;align-items:center;gap:8px;padding:5px 9px;border-bottom:1px solid #cad7e1}#phone header strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#phone header span{font-size:11px}#phone main{padding:10px;overflow:auto;flex:1;min-height:0}#phone footer{padding:5px 10px 8px;text-align:center}#phone button{font:inherit;border:0;border-radius:10px;background:#365d7a;color:#fff;padding:10px;cursor:pointer}#phone button:disabled{opacity:.5}#phone header button{padding:4px 8px;background:transparent;color:#253e52;font-size:24px}#phone footer button{width:100%;padding:7px;background:#d2dfe9;color:#253e52}#phone form{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}#phone input:not([type=range]),#phone textarea,#phone select{font:inherit;width:100%;min-width:0;padding:10px;border:1px solid #a9bdcc;border-radius:8px;background:white;color:#203047}#phone form input{flex:1;width:0!important}#phone label{display:block;margin:16px 0}#phone input[type=range]{display:block;width:100%;margin-top:10px}#phone iframe{width:100%;height:340px;background:white;border:1px solid #b2c4d2;border-radius:8px;margin-top:14px}#phone a{color:#285c86;font-size:12px}.phone-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 9px}.phone-apps button{white-space:pre-line;background:#dae5ed!important;color:#203e53!important;min-height:85px;line-height:1.8}.phone-note{font-size:12px;line-height:1.5;color:#526b7e}.phone-contact{border-bottom:1px solid #c9d5df;padding:12px 0}.phone-contact b,.phone-contact small{display:block;overflow-wrap:anywhere}.phone-contact small{margin:5px 0;color:#5c7488}.phone-contact button{margin:5px 5px 0 0;font-size:12px!important}.phone-subtle{background:#d5e0e9!important;color:#35536a!important}.phone-messages{height:260px;overflow:auto;display:flex;flex-direction:column;gap:8px}.phone-messages p{margin:0;max-width:90%;padding:10px;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere}.phone-messages small{display:block;font-size:10px;margin-top:6px;opacity:.6}.phone-received{align-self:flex-start;background:white}.phone-sent{align-self:flex-end;background:#c8e0d9}#phone textarea{height:65px;resize:none}#phone main>[data-mic],#phone main>[data-listen]{margin:5px 5px 0 0}

.phone-icon{display:block;font-size:27px;line-height:1.5}#phone-open{font-size:25px!important;line-height:1;padding:10px!important}

#phone-open.mic-on{background:#347559;border-color:#9feac0}


/* Presence sits above the small home screen without capturing game input. */
#bolha-online{display:flex;flex-direction:column;width:100%;flex-shrink:0;border:1px solid #70849b80;border-radius:14px;background:#182a3ee8;box-shadow:0 6px 24px #0003;color:#edf5ff;font:13px system-ui;overflow:hidden}
#bolha-online button{font:inherit;color:inherit;border:0;cursor:pointer}
#bolha-online>button{width:100%;text-align:left;font-weight:700;padding:11px 12px;background:#ffffff0a}
#bolha-online-list{max-height:max(0px,min(198px,calc(100dvh - var(--bolha-phone-height) - 200px)));overflow:auto;overscroll-behavior:contain}
#bolha-online-list p{padding:0 12px;color:#b8c9db}
#bolha-online .online-player{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:46px;padding:5px 12px;background:transparent;text-align:left;border-top:1px solid #ffffff12}
#bolha-online button:focus-visible{background:#ffffff15}
.online-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-player>span:last-child{display:flex;gap:8px;flex-shrink:0}.online-on{opacity:1}.online-off{opacity:.35;filter:grayscale(1)}
#bolha-friend-arrival{position:fixed;right:18px;top:max(80px,env(safe-area-inset-top));max-width:min(330px,calc(100vw - 32px));z-index:60;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid #70c9a5;border-radius:12px;background:#193a32f5;color:#eafff4;box-shadow:0 6px 24px #0004;font:14px system-ui}
#bolha-friend-arrival span{overflow-wrap:anywhere}#bolha-friend-arrival button{border:0;background:transparent;color:inherit;font-size:22px;cursor:pointer}
#phone input[type=checkbox]{width:auto}#phone .phone-apps{gap:10px 6px}#phone .phone-apps button{min-width:0;padding:8px 3px;font-size:12px;overflow-wrap:anywhere}
/* One body for home and apps. Shared dimensions keep the work panel beside it. */
:root{--bolha-phone-width:240px;--bolha-phone-height:400px;--bolha-hud-right:18px;--bolha-hud-bottom:18px}
#bolha-phone-dock{position:fixed;right:max(var(--bolha-hud-right),env(safe-area-inset-right));bottom:max(var(--bolha-hud-bottom),env(safe-area-inset-bottom));width:var(--bolha-phone-width);display:flex;flex-direction:column;gap:8px;z-index:24}
#bolha-phone-dock.engaged{z-index:55}
#phone header strong{font-size:13px}#phone header [data-time]{font-size:11px}#phone header button{padding:2px 5px;font-size:22px}
#phone.home footer{display:none}#phone .phone-apps{gap:6px}#phone .phone-apps button{min-height:66px;padding:5px 2px;font-size:11px;line-height:1.2;border-radius:10px}
#phone .phone-icon{font-size:25px;line-height:1.2}#phone .phone-apps button span:last-child{display:block;overflow-wrap:normal;white-space:normal}
#phone-open{display:none!important}
#bolha-online .online-player.online-speaking{background:#32735b55;box-shadow:inset 3px 0 #84e4b4}#bolha-online .online-speaking .online-name{color:#aaf3cd}
#bolha-online .online-speaking .voice-chip[data-kind="mic"]{background:#28684e;color:#bcffda;box-shadow:0 0 8px #84e4b455}
@media(max-width:600px){#bolha-online-list{max-height:max(0px,min(198px,calc(100dvh - var(--bolha-phone-height) - 110px)))}:root{--bolha-phone-width:220px;--bolha-phone-height:376px;--bolha-hud-right:8px;--bolha-hud-bottom:12px}#bolha-phone-dock{max-width:calc(100vw - 16px)}#phone .phone-apps button{min-height:60px}#phone .phone-icon{font-size:24px}#bolha-friend-arrival{right:8px}#menu{bottom:12px!important}}
@media(max-height:500px){:root{--bolha-phone-width:220px;--bolha-phone-height:min(260px,calc(100dvh - 112px));--bolha-hud-bottom:12px}#phone{border-width:4px;border-radius:24px;font-size:12px}#phone main{padding:6px}#phone header{padding:2px 7px}#phone .phone-apps{gap:4px}#phone .phone-apps button{min-height:44px;font-size:10.5px;padding:2px 1px}#phone .phone-icon{font-size:20px;line-height:1.1}#bolha-online>button{padding:8px 10px}#bolha-online .online-player{height:38px}}

/* Crisp monochrome voice states: colour, crossed icon and text all agree. */
#bolha-online .online-player{height:auto;min-height:66px;padding:7px 9px;gap:6px}
.online-info{min-width:0;flex:1}.online-name{display:block;font-weight:700}.online-place{display:block;font-size:11px;line-height:1.25;color:#c4d2e2;margin-top:3px}
.online-meta{display:flex;align-items:center;gap:4px;min-width:0;margin-top:3px;white-space:nowrap}
.online-meta .online-place{flex:0 1 auto;min-width:0;margin-top:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-voice-label{display:inline-flex;align-items:center;gap:3px;flex:none;padding:1px 4px;border-radius:4px;background:#29485e;color:#dce9f8;font:500 10px/1.25 system-ui;white-space:nowrap}
.online-voice-label[hidden]{display:none}.online-voice-label .hud-icon{width:11px;height:11px}
#bolha-online .online-states{display:flex;gap:4px;flex-shrink:0}.voice-chip{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:34px;padding:4px;border:1px solid;border-radius:7px}
.voice-chip .ic{position:relative;width:18px;height:18px}.voice-chip small{font-size:9px;line-height:1;font-weight:800}.voice-chip.on{color:#c4ffdd;background:#1e6548;border-color:#72d99e}.voice-chip.off{color:#ffd0ce;background:#662f35;border-color:#ce7e83}
.voice-chip.off[data-kind=speaker]:after{content:'';position:absolute;left:5px;top:14px;width:24px;height:2px;background:currentColor;transform:rotate(-45deg)}
@media(max-height:500px){#bolha-online-list{max-height:max(0px,min(120px,calc(100dvh - var(--bolha-phone-height) - 54px)))}#bolha-online .online-player{min-height:60px}.voice-chip{min-width:32px}.online-place{font-size:10px}}

/* Folded phone (#28): a small button in the online list's style; the phone and the button hide by their own attribute. */
#phone[hidden],#phone-unfold[hidden]{display:none}
#phone-unfold{align-self:flex-end;border:1px solid #70849b80;border-radius:14px;background:#182a3ee8;color:#edf5ff;font:700 13px system-ui;padding:10px 14px;cursor:pointer;box-shadow:0 6px 24px #0003}#phone-unfold:focus-visible{outline:2px solid #9fd0ff}

#bolha-online button.voice-chip{font:inherit;cursor:pointer;appearance:none}#bolha-online button.voice-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}#bolha-online button.voice-chip:disabled{cursor:wait;opacity:.65}

/* Developer destinations stay inside the normal scrollable phone screen. */
.phone-teleport input{box-sizing:border-box;width:100%;min-width:0}
.phone-teleport button{display:block;width:100%;min-height:42px;text-align:left;margin:5px 0;white-space:normal}
.phone-teleport h3{font-size:12px;margin:16px 0 7px;color:#87b6d3}
.phone-teleport [role=status]:empty{display:none}

#bolha-online .online-voice-mode{padding:9px 12px;text-align:left;background:#28465b;font-size:12px;border-top:1px solid #ffffff20}
#bolha-voice-invite{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);box-sizing:border-box;width:min(360px,calc(100vw - 24px));max-height:45dvh;overflow:auto;z-index:150;padding:12px;border:1px solid #8bcbb7;border-radius:12px;background:#183c35;color:#f2fff9;font:14px/1.4 system-ui;box-shadow:0 8px 28px #0006}
#bolha-voice-invite[hidden]{display:none}#bolha-voice-invite p{margin:0 0 8px;overflow-wrap:anywhere}#bolha-voice-invite button{font:inherit;padding:8px 12px;margin:3px;border:1px solid #8bcbb7;border-radius:8px;background:#305e51;color:white;cursor:pointer}


/* #202: compact voice screen. Keep main actions visible and separate from profile tools. */
#bolha-profile #bolha-online .online-voice-mode{box-sizing:border-box;width:calc(100% - 16px);margin:8px 8px 10px;padding:10px 12px;border:1px solid #42648566;border-radius:10px;background:#19364c;color:var(--hud-ink);font:550 12px/1.4 system-ui;text-align:left;min-height:38px;cursor:pointer}
#bolha-profile #bolha-online .online-voice-mode:hover{background:#25495f}
#bolha-profile #bolha-online .online-voice-mode:focus-visible{outline:2px solid var(--hud-blue);outline-offset:2px}

#phone.voice-app main{padding:14px 14px 10px;scrollbar-gutter:stable}
#phone.voice-app .phone-voice-modes{color:var(--hud-ink);font:12px/1.45 system-ui}
#phone.voice-app .phone-voice-modes button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:500 12px/1.4 system-ui;min-height:34px;padding:7px 9px;margin:0;border:0;border-radius:9px;white-space:normal;background:#19364b;color:var(--hud-ink)}
#phone.voice-app .phone-voice-modes .hud-icon{width:16px;height:16px}
#phone.voice-app .voice-tabs{display:grid;grid-template-columns:1fr 1fr 1.18fr;gap:3px;background:#183044;padding:3px;border-radius:10px}
#phone.voice-app .voice-tabs button{padding:6px 3px;min-height:30px;font-size:11px;background:transparent;border-radius:8px}
#phone.voice-app .voice-tabs button[aria-pressed=true]{background:#2a4a60;color:#fff;box-shadow:0 1px 4px #0003}
#phone.voice-app .voice-mode-info{margin:0;padding:13px 1px 17px;color:#b7c9d8;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#phone.voice-app .voice-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 5px}
#phone.voice-app .voice-section-head strong{font-size:12px;font-weight:600}
#phone.voice-app .voice-lock{font-size:10px;background:#19364b;color:#b7c9d8;border-radius:12px;padding:3px 7px}
#phone.voice-app .voice-members{max-height:126px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6383aa transparent}
#phone.voice-app .voice-person{display:flex;align-items:center;gap:9px;padding:7px 0;min-height:44px}
#phone.voice-app .voice-person+.voice-person{border-top:1px solid #36557166}
#phone.voice-app .voice-avatar{display:grid;place-items:center;flex:none;width:30px;height:32px;border-radius:9px;background:#1c3b51;background-repeat:no-repeat;overflow:hidden}
#phone.voice-app .voice-avatar .hud-icon{width:24px;height:24px}
#phone.voice-app .voice-person-info{flex:1;min-width:0;overflow-wrap:anywhere}
#phone.voice-app .voice-person-name{display:block;font-size:12px}
#phone.voice-app .voice-person small,#phone.voice-app .voice-group small{display:block;color:#9fb7ca;font-size:11px;margin-top:2px}
#phone.voice-app .voice-person-mic{position:relative;flex:none;color:#a7c0d7;padding:2px}
#phone.voice-app .voice-person-mic.off{opacity:.5}
#phone.voice-app .voice-person-mic.off:after{content:'';position:absolute;height:1px;width:20px;background:currentColor;transform:rotate(45deg);left:0;top:10px}
#phone.voice-app .voice-person-mic.speaking{color:#a6dfc8}
#phone.voice-app .phone-voice-modes .voice-invite-action{display:flex;width:100%;margin-top:10px;background:#afdcca;color:#102b23;min-height:36px;font-weight:600}
#phone.voice-app .voice-inline-note{font-size:11px;color:#a5bacd;margin:7px 0}
#phone.voice-app .voice-compact-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
#phone.voice-app .voice-compact-controls button{position:relative;padding:8px 5px;font-size:11px;min-height:36px}
#phone.voice-app .voice-compact-controls button[aria-pressed=false]{color:#f1aab0;background:#2c3040}
#phone.voice-app .voice-compact-controls button[aria-pressed=false] .hud-icon{opacity:.7}
#phone.voice-app label.voice-volume{display:flex;align-items:center;gap:10px;font-size:11px;color:#aec2d3;margin:14px 0 0}
#phone.voice-app .voice-volume input[type=range]{flex:1;min-width:0;width:100%;margin:0;accent-color:#afdcca}
#phone.voice-app .voice-status{color:#e4c9a1;margin:8px 0 0;font-size:11px;line-height:1.4}
#phone.voice-app .voice-status:empty{display:none}
#phone.voice-app .voice-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:10px;border-top:1px solid #36557188}
#phone.voice-app .phone-voice-modes .voice-directory-action{background:transparent;padding:6px 0;text-align:left;color:#aec2d3;font-size:11px;justify-content:flex-start}
#phone.voice-app .phone-voice-modes .voice-leave{background:transparent;color:#f1aab0;padding:6px 0;font-size:11px}
#phone.voice-app .voice-picker-head{display:flex;align-items:center;gap:9px;margin-bottom:3px}
#phone.voice-app .voice-picker-head strong{font-size:13px;font-weight:600}
#phone.voice-app .voice-picker-head button{padding:6px;background:transparent;color:#b8cddd;font-size:11px}
#phone.voice-app .voice-group{padding:12px 0;border-bottom:1px solid #36557188}
#phone.voice-app .voice-group strong{display:block;font-weight:500;overflow-wrap:anywhere}
#phone.voice-app .voice-group button{margin-top:9px}
#phone.voice-app .voice-picker .voice-person button{flex:none;font-size:11px;padding:6px}
#phone.voice-app .voice-audio-resume{margin-top:10px}
#phone.voice-app [hidden]{display:none!important}
#bolha-voice-invite .voice-notice+.voice-notice{margin-top:10px;padding-top:10px;border-top:1px solid #8bcbb766}
@media(max-width:700px) and (orientation:portrait){#phone.voice-app main{padding:16px 16px 10px}#phone.voice-app .voice-tabs button{min-height:36px;font-size:12px}#phone.voice-app .voice-compact-controls button{min-height:40px;font-size:12px}#phone.voice-app .voice-invite-action{min-height:40px}}
@media(max-height:500px) and (orientation:landscape){#phone.voice-app main{padding:10px 12px}#phone.voice-app .voice-mode-info{padding:10px 1px 12px}#phone.voice-app .voice-members{max-height:88px}}
#phone.voice-app footer{display:none}
#phone.voice-app main{padding-bottom:20px}
@media(max-width:700px) and (max-height:740px) and (orientation:portrait){#phone.voice-app main{padding:10px 12px 14px}#phone.voice-app .voice-tabs button{min-height:30px;font-size:11px}#phone.voice-app .voice-mode-info{padding:10px 1px 12px}#phone.voice-app .voice-members{max-height:72px}#phone.voice-app .voice-person{min-height:36px;padding:3px 0}#phone.voice-app .voice-avatar{height:28px;width:28px}#phone.voice-app .voice-invite-action{min-height:34px;margin-top:8px}#phone.voice-app .voice-compact-controls{margin-top:10px}#phone.voice-app .voice-compact-controls button{min-height:34px;font-size:11px}#phone.voice-app label.voice-volume{margin-top:10px}#phone.voice-app .voice-actions{margin-top:10px;padding-top:8px}}
/* Voice uses the shared phone shell; controls must also fit its narrow desktop width. */
#phone.voice-app .voice-compact-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
#phone.voice-app .voice-compact-controls button{min-width:0;flex-wrap:wrap}
#phone.voice-app .voice-compact-controls button span{min-width:0;overflow-wrap:anywhere}

/* Выбор провайдера на странице интеграций. */
.phone-integration-tabs{display:flex;gap:6px;margin:0 0 10px}
#phone .phone-integration-tabs button{flex:1;min-width:0;width:auto!important}
#phone .phone-integration-tabs button[aria-pressed=true]{border-color:#e5bb70;background:#6e562b;color:#fff3d7}

#phone form.clockify-connect-form>input{flex:0 0 100%;width:100%!important;box-sizing:border-box}
#phone form.clockify-connect-form>label{width:100%;margin:4px 0}
#phone form.clockify-connect-form>label select{box-sizing:border-box;margin-top:5px}
#phone form.clockify-connect-form>button{width:100%}
#phone .clockify-setup>h3{margin:14px 0 8px}
#phone .clockify-setup>p{margin:0 0 18px;line-height:1.45}
#phone .clockify-setup .clockify-connect-form{display:block;margin:18px 0 12px}
#phone .clockify-setup .clockify-connect-form>label{margin:0 0 8px}
#phone .clockify-setup .clockify-connect-form>label:has(select){margin:14px 0}
#phone .clockify-setup [hidden]{display:none!important}
#phone .clockify-setup details{margin:8px 0;font-size:12px;line-height:1.5}
#phone .clockify-setup summary{padding:10px 0;color:#9fc6ed;cursor:pointer;min-height:36px}
#phone .clockify-setup details p{margin:8px 0}
#phone .clockify-setup details ol{padding-left:20px;margin:4px 0 10px}
#phone .clockify-setup details li{margin:8px 0}
#phone .clockify-setup details a{font-size:inherit}
#phone .clockify-setup details label{margin:10px 0}
#phone .clockify-setup details select{box-sizing:border-box;margin-top:7px}
#phone .clockify-setup .clockify-connect-submit{margin:10px 0 8px;background:#d1ad6f;color:#1c2630;font-weight:600}
#phone .clockify-setup .clockify-private-note{font-size:12px;color:#abc0d3;margin:12px 0}
#phone .phone-player-color{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #6383aa55}
#phone .phone-player-color h3{margin:4px 0 12px}
#phone form.player-color-form{display:block;margin:0}
#phone .player-color-form label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
#phone .player-color-form input[type=color]{flex:none;width:56px!important;height:42px;min-width:56px;padding:3px}
#phone .player-color-preview{padding:16px;border-radius:3px;font-weight:600;overflow-wrap:anywhere}
#phone .player-color-code{display:block;font-size:11px;margin:9px 0;color:#bfd1e4}
#phone .player-color-actions{display:flex;gap:7px;flex-wrap:wrap}
#phone .player-color-actions button{min-height:40px}
#phone .phone-player-color .phone-note{margin:10px 0 0;line-height:1.5}