/* Mobile UX hardening: no accidental zoom, selection or blue focus chrome. */
:root{--vvh:100vh;--vv-top:0px}
@supports(height:100dvh){:root{--vvh:100dvh}}
/* iPad PWA uses the wide layout too. Reserve the system status area once:
   mobile headers already consume --sat; wide screens move their whole shell.
   Some iPadOS versions report a zero inset with a translucent status bar. */
html.is-ios-standalone{
  height:var(--app-full-height,100vh)!important;
  overflow:hidden!important;
  --device-bottom-inset:env(safe-area-inset-bottom,0px);
  --pwa-top-inset:calc(max(24px,env(safe-area-inset-top,0px)) + 4px);
  --sat:var(--pwa-top-inset);
}

@media(min-width:900px){
  html.is-ios-standalone body.has-app #listScreen,
  html.is-ios-standalone body.has-app #chatScreen,
  html.is-ios-standalone body.has-app.app-inspector-open:not(.inspector-three-column) #chatScreen.open,
  html.is-ios-standalone body.has-app.inspector-three-column.profile-inspector-open #chatScreen.open,
  html.is-ios-standalone body.has-app.inspector-three-column.group-info-open #chatScreen.open,
  html.is-ios-standalone body.has-app #setScreen,
  html.is-ios-standalone body.has-app .mac-sidebar-resizer{
    --sat:0px;
    top:calc(var(--vv-top) + var(--pwa-top-inset))!important;bottom:auto!important;
    height:calc(var(--vvh) - var(--pwa-top-inset))!important;
    min-height:0!important;max-height:calc(var(--vvh) - var(--pwa-top-inset))!important;
  }
  html.is-ios-standalone .tgios-profile-more-sheet{top:calc(var(--sat) + 58px)}
}
@media(max-width:899px){
  html,body.has-app{overflow:hidden!important;overscroll-behavior:none}
  /* Keep the safe area inside the bar's background, never below the shell. */
  body.has-app.kb-open{--sab:0px}
  body.has-app #listScreen,
  body.has-app #chatScreen,
  body.has-app #personProfileScreen,
  body.has-app #groupInfoScreen,
  body.has-app #appPortalRoot,
  body.has-app #appPortalRoot>.overlay,
  body.has-app #appPortalRoot>.tgios-context-overlay,
  body.has-app #appPortalRoot>.poll-modal,
  body.has-app #appPortalRoot>.schedule-modal,
  body.has-app #appPortalRoot>.lumo-tools,
  body.has-app #appPortalRoot>.group-create-overlay,
  body.has-app #appPortalRoot>#viewer,
  body.has-app #appPortalRoot>#callOverlay{
    top:var(--vv-top)!important;bottom:auto!important;
    height:var(--vvh)!important;min-height:0!important;max-height:var(--vvh)!important;
    margin-bottom:0!important;
  }
  body.has-app #setScreen{
    top:var(--vv-top);bottom:auto;
    height:calc(var(--vvh) - 57px - var(--sab));
  }
  body.has-app.settings-deep #setScreen{height:var(--vvh)}
}
html,body{
  touch-action:pan-x pan-y;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
body,body *{
  -webkit-tap-highlight-color:transparent;
}
/* The app itself is not a document editor: normal text must never be selected while swiping/holding. */
body.has-app,
body.has-app *:not(input):not(textarea):not([contenteditable="true"]){
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none;
}
body.has-app img,body.has-app video,body.has-app svg{
  -webkit-user-drag:none;
  user-drag:none;
}
/* Editable controls still need a caret, but no blue focus halo. 16px prevents Safari focus zoom. */
input,textarea,select,[contenteditable="true"]{
  font-size:16px!important;
  outline:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
button:focus,button:focus-visible,
input:focus,input:focus-visible,
textarea:focus,textarea:focus-visible,
select:focus,select:focus-visible,
[tabindex]:focus,[tabindex]:focus-visible{
  outline:none!important;
  outline-offset:0!important;
  box-shadow:none!important;
}
.search:focus-within,.capsule:focus-within,
#loginFields input:focus,#registerFields input:focus,
#groupTitle:focus,.poll-field input:focus,.poll-option-input input:focus,
.tools-search:focus,.control-page input:focus,.control-page textarea:focus{
  outline:none!important;
  box-shadow:none!important;
  border-color:var(--separator,var(--line))!important;
}
/* iPhone chat header: search replaces the three-dots menu. */
@media(max-width:899px){
  .head-tools #chatMenuBtn{display:none!important}
  .head-tools #chatSearchBtn{display:grid!important}
  .chat-head .head-tools #chatSearchBtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:0!important;background:transparent!important;color:var(--accent)!important}
  .chat-head .head-tools #chatSearchBtn:active{opacity:.52!important;background:transparent!important}
}
/* Shared media: only real image thumbnails, no generic mountain/sun placeholder tiles. */
.tgios-profile-media-item{background:var(--background-secondary,#e5e5ea)!important}
.tgios-profile-media-item img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.tgios-profile-media-item.is-locked{display:none!important}
.tgios-profile-voice-row.is-vnote{min-height:64px}
.tgios-profile-vnote-thumb{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;background:var(--background-secondary,#e5e5ea);display:grid;place-items:center;color:var(--accent,#0a84ff)}
.tgios-profile-vnote-thumb video{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.tgios-profile-vnote-thumb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Bottom navigation only: a window-anchored capsule with a sliding selection. */
@media(max-width:899px){
  body.has-app{--bottom-nav-gap:12px;--bottom-nav-height:64px;--bottom-nav-space:calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + 8px)}
  body.has-app #listScreen>.list-main,
  body.has-app #listScreen>.top-tab-panel:not([hidden]){padding-bottom:var(--bottom-nav-space)!important}
  body.has-app:not(.settings-deep):not(.kb-open) #setScreen{
    height:calc(100dvh - var(--vv-top,0px) - var(--bottom-nav-space));
  }
  body.has-app #iosTabBar{
    --nav-count:4;--nav-index:2;
    position:fixed!important;top:auto!important;bottom:var(--bottom-nav-gap)!important;
    left:max(12px,var(--sal,0px))!important;right:max(12px,var(--sar,0px))!important;
    width:auto!important;height:var(--bottom-nav-height)!important;
    padding:4px 5px!important;margin:0!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;gap:0!important;isolation:isolate;
    border:1px solid color-mix(in srgb,var(--label-secondary) 24%,transparent)!important;
    border-radius:38px!important;
    background:color-mix(in srgb,var(--background-primary) 86%,transparent)!important;
    backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 22px rgba(0,0,0,.14)!important;
    overflow:hidden!important;
  }
  body.has-app #iosTabBar::before{
    content:"";display:block!important;position:absolute;z-index:0;pointer-events:none;
    box-sizing:border-box;
    top:50%;left:5px;height:54px;width:calc((100% - 10px) / var(--nav-count));
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:999px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 23%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));
    box-shadow:inset 0 1px 1px color-mix(in srgb,var(--accent) 14%,transparent);
    transform:translate(calc(var(--nav-index) * 100%),-50%);
    transition:transform .3s cubic-bezier(.22,.8,.25,1);
  }
  body.has-app #iosTabBar::after{display:none!important}
  body.has-app #iosTabBar>.ios-tab{
    position:relative!important;z-index:1;min-width:0!important;
    height:54px!important;min-height:54px!important;padding:3px 0!important;
    gap:2px!important;border-radius:999px!important;background:transparent!important;
    color:var(--label-secondary)!important;font-size:10.5px!important;
  }
  body.has-app #iosTabBar>.ios-tab.active{color:var(--accent)!important}
  body.has-app #iosTabBar>.ios-tab:active{background:transparent!important;transform:scale(.94)!important}
  body.has-app #iosTabBar .ios-tab-unread{top:1px}
  body.has-app.kb-open #iosTabBar,
  body.has-app.chat-typing #iosTabBar,
  body.has-app:has(#chatScreen.open:not([hidden])) #iosTabBar,
  body.has-app.settings-deep #iosTabBar,
  body.has-app.chat-edit-mode #iosTabBar{display:none!important}
}
@media(prefers-reduced-motion:reduce){body.has-app #iosTabBar::before{transition:none!important}}
@media(prefers-reduced-transparency:reduce){body.has-app #iosTabBar{background:var(--surface-primary)!important}}

/* Installed app: match the reference's 64px capsule and 12px outer gap.
   Do not add asymmetric padding or stretch the capsule for the home indicator. */
@media(max-width:899px) and (display-mode:standalone),
      (max-width:899px) and (display-mode:fullscreen){
  body.has-app{
    --bottom-nav-gap:12px;
    --bottom-nav-height:64px;
  }
  body.has-app #iosTabBar>.ios-tab{
    height:54px!important;min-height:54px!important;
  }
  body.has-app #iosTabBar::before{height:54px}
  body.has-app #chatList{padding-bottom:8px!important}
}

/* navigator.standalone covers installed iOS versions without display-mode. */
@media(max-width:899px){
  html.is-standalone body.has-app{
    --bottom-nav-gap:12px;
    --bottom-nav-height:64px;
  }
  html.is-standalone body.has-app #iosTabBar>.ios-tab{height:54px!important;min-height:54px!important}
  html.is-standalone body.has-app #iosTabBar::before{height:54px}
  html.is-standalone body.has-app #chatList{padding-bottom:8px!important}
  body.has-app:not(.settings-deep):not(.kb-open) #setScreen{height:calc(var(--vvh) - var(--bottom-nav-space))}
}

/* iPhone PWA: a symmetric capsule at the full edge; the Home inset belongs
   to chat/sheet content, not inside the navigation capsule. */
@media(max-width:899px){
  html.is-ios-standalone body.has-app{
    --sab:min(12px,var(--device-bottom-inset));
    --bottom-nav-gap:0px;
    --bottom-nav-height:58px;
  }
  html.is-ios-standalone body.has-app.kb-open{--sab:0px}
  html.is-ios-standalone body.has-app #iosTabBar{
    /* Fixed bottom can follow iOS's stale layout viewport. Use our full edge. */
    top:calc(var(--vv-top) + var(--vvh) - var(--bottom-nav-height))!important;
    bottom:auto!important;
    padding:3px 5px!important;
  }
  html.is-ios-standalone body.has-app #iosTabBar>.ios-tab{height:50px!important;min-height:50px!important}
  html.is-ios-standalone body.has-app #iosTabBar::before{
    height:auto;top:3px;bottom:3px;
    transform:translateX(calc(var(--nav-index) * 100%));
  }
}
html.is-ios-standalone body.has-app{
  position:fixed;top:0;left:0;width:100%;height:var(--app-full-height,100vh)!important;
  overflow:hidden!important;
}