/* ═══════════════════════════════════════════════════════════════════════════
   TeamControlSheet — UX hardening layer (v4.1)
   ---------------------------------------------------------------------------
   Loaded AFTER the page's own styles, on every page. It never re-designs the
   product: it fixes the platform-level things that make a good design feel
   bad on real devices.

   What it guarantees
     · every scroll container actually scrolls, on iOS too
     · panes/tabs stay scrollable at any width and *show* that they can scroll
     · modals never exceed the visible viewport (dvh, not vh) and never
       scroll-chain the page behind them
     · the notch / home-bar never covers a button (safe-area insets)
     · inputs don't trigger the iOS zoom jump
     · focus is always visible for keyboard users
     · tap targets are ≥44px on touch screens
     · motion-sensitive users get a still interface
     · the app prints like a report
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. tokens ─────────────────────────────────────────────────────────── */
:root{
  --ux-tap: 44px;
  --ux-radius: 12px;
  --ux-edge: 0 0 0 1px rgba(0,0,0,.04);
  --ux-focus: #4f7cff;
}
[data-theme="dark"]{ --ux-focus:#9db2ff; }

/* ── 1. the viewport is the source of truth ────────────────────────────── */
@supports (height: 100dvh){
  .app,
  .main{ height: calc(100dvh - 58px) !important; }
  @media (min-width: 761px){
    .app,
    .main{ height: calc(100dvh - 62px) !important; }
  }
  .login-wrap{ min-height: 100dvh; }
}

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  overscroll-behavior-y: none;        /* no rubber-band flash on iOS/Android */
  -webkit-tap-highlight-color: transparent;
}

/* every scroll region: momentum scrolling + no chaining to the page behind */
.content,
.msgs,
.pal-list,
.chat-side,
.done-rail,
.modal,
.notes-wrap{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
}
.content{ scroll-padding-top: 8px; }

/* thin, theme-aware scrollbars on WebKit/Blink */
.content::-webkit-scrollbar,
.msgs::-webkit-scrollbar,
.pal-list::-webkit-scrollbar,
.chat-side::-webkit-scrollbar,
.modal::-webkit-scrollbar{ width: 10px; height: 10px; }
.content::-webkit-scrollbar-thumb,
.msgs::-webkit-scrollbar-thumb,
.pal-list::-webkit-scrollbar-thumb,
.chat-side::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.content::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--text) 34%, transparent);
  background-clip: content-box;
}

/* ── 2. overlays & modals ──────────────────────────────────────────────── */
.overlay{
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 60;
}
.modal{
  max-height: min(90vh, calc(100dvh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 16px;
  margin: auto;                        /* keeps it centred when it overflows */
}
@media (max-width: 560px){
  .overlay{ padding: 10px; align-items: flex-end; }
  .modal{
    max-width: none;
    border-radius: 20px 20px 16px 16px;
    max-height: min(92dvh, 92vh);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}
/* the page behind a modal must not scroll */
body.ux-modal-open{ overflow: hidden !important; }

/* the command palette behaves like a sheet on phones */
@media (max-width: 560px){
  .pal-wrap{ align-items: flex-end !important; }
  .pal-list{ padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* ── 3. tab bars / segmented controls / panes ───────────────────────────── */
.stabbar,
.seg,
.ltabs,
.chat-side{
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px;
  scrollbar-width: none;               /* the affordance is the fade, not a bar */
}
.stabbar::-webkit-scrollbar,
.seg::-webkit-scrollbar,
.ltabs::-webkit-scrollbar,
.chat-side::-webkit-scrollbar{ display: none; }
.stabbar > *,
.ltabs > *{ scroll-snap-align: start; }

/* fade the edge that has more content — added by js/ux.js when scrollable */
.ux-scrollable-l{ mask-image: linear-gradient(90deg, transparent 0, #000 18px); }
.ux-scrollable-r{ mask-image: linear-gradient(270deg, transparent 0, #000 18px); }
.ux-scrollable-l.ux-scrollable-r{
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.seg,
.stabbar{ -webkit-mask-image: none; }

/* sticky headers must not slide under the top bar */
.seg, .stabbar{ top: 0; background-clip: padding-box; }

/* ── 4. touch ergonomics ──────────────────────────────────────────────── */
@media (pointer: coarse){
  .iconbtn{ min-width: var(--ux-tap); min-height: var(--ux-tap); }
  .nav button{ min-height: var(--ux-tap); }
  .btn{ min-height: var(--ux-tap); }
  .stabbar button,
  .ltabs button,
  .seg button{ min-height: 40px; }
  /* iOS zooms the whole page when a focused field is under 16px */
  input.inp,
  select.inp,
  textarea.inp,
  #msgInput{ font-size: 16px !important; }
  .side,
  .demobar{ padding-bottom: env(safe-area-inset-bottom); }
  .side{ height: auto; min-height: 64px; }
}


/* Pointer media queries are not always reported (desktop browsers in mobile
   emulation, some Android WebViews). A narrow viewport is the reliable signal:
   guarantee the same ergonomics there. */
@media (max-width: 760px){
  .iconbtn{ min-width: var(--ux-tap); min-height: var(--ux-tap); }
  .nav button{ min-height: var(--ux-tap); }
  .btn{ min-height: var(--ux-tap); }
  .stabbar button,
  .ltabs button,
  .seg button{ min-height: 40px; }
  input.inp,
  select.inp,
  textarea.inp,
  #msgInput{ font-size: 16px !important; }
}

/* ── 5. keyboard & screen-reader affordances ──────────────────────────── */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--ux-focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.ux-skip{
  position: fixed; left: 12px; top: -60px; z-index: 10000;
  background: var(--accent, #4f6cff); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  font: 700 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none; transition: top .15s ease;
}
.ux-skip:focus{ top: 0; }

.ux-sr{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 6. toasts (they replace window.alert) ─────────────────────────────── */
#ux-toasts{
  position: fixed; z-index: 9500;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none; max-width: min(420px, calc(100vw - 28px));
}
.ux-toast{
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--panel, #161a24);
  color: var(--text, #eef1f8);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-left: 3px solid var(--ux-focus);
  border-radius: 12px;
  padding: 11px 13px;
  font: 600 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  animation: ux-in .18s ease both;
  max-width: 100%;
}
.ux-toast.ux-err{ border-left-color: #e5484d; }
.ux-toast.ux-ok{ border-left-color: #2fb344; }
.ux-toast.ux-warn{ border-left-color: #f5a524; }
.ux-toast button{
  background: none; border: 0; color: inherit; opacity: .6;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 0 0;
}
.ux-toast button:hover{ opacity: 1; }
@keyframes ux-in{ from{ opacity: 0; transform: translateY(8px) scale(.98); } }

/* ── 7. offline / connection banner ───────────────────────────────────── */
#ux-net{
  position: fixed; left: 50%; transform: translateX(-50%);
  top: max(10px, env(safe-area-inset-top));
  z-index: 9400;
  background: #b4541b; color: #fff;
  font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 9px 16px; border-radius: 99px;
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  display: none;
}
#ux-net.show{ display: block; }
body.ux-online-banner #ux-net{ display: none; }

/* ── 8. upgrade sheet (plan limits) ───────────────────────────────────── */
.ux-up{ max-width: 560px; }
.ux-up h3{ margin: 0 0 6px; font-size: 20px; }
.ux-up .ux-up-lede{ font-size: 13.5px; line-height: 1.55; color: var(--muted, #8b93a9); margin-bottom: 16px; }
.ux-plans{ display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
@media (max-width: 460px){ .ux-plans{ grid-template-columns: 1fr; } }
.ux-plan{
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 14px; padding: 14px;
  background: var(--card2, rgba(255,255,255,.03));
}
.ux-plan.hot{ border-color: var(--ux-focus); box-shadow: 0 0 0 1px var(--ux-focus) inset; }
.ux-plan b{ display: block; font-size: 14px; margin-bottom: 2px; }
.ux-plan .ux-price{ font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.ux-plan .ux-price small{ font-size: 11px; font-weight: 600; color: var(--muted, #8b93a9); }
.ux-plan ul{ margin: 9px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.7; color: var(--muted, #8b93a9); }
.ux-up-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ux-up-actions .btn{ flex: 1 1 auto; }

/* ── 9. motion & printing ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cf, .cf-flower{ display: none !important; }
}

@media print{
  .side, .brandbar, .demobar, .iconbtn, #ux-toasts, #ux-net,
  .seg, .stabbar, .fab, .mob-nav, .ux-skip{ display: none !important; }
  .app{ display: block !important; height: auto !important; }
  .main{ height: auto !important; }
  .content{ overflow: visible !important; padding: 0 !important; }
  .tcard, .kpi, .dash-tile, .nb-entry{
    break-inside: avoid; box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  body{ background: #fff !important; color: #111 !important; }
}

/* ── 10. long-content pages (marketing/legal/content hub) ─────────────── */
.ux-prose{ max-width: 74ch; }
.ux-prose h2{ margin-top: 2.2em; }
.ux-prose p, .ux-prose li{ line-height: 1.72; }
.ux-table-wrap{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 14px;
}
.ux-table-wrap table{ min-width: 560px; border-collapse: collapse; width: 100%; }
.ux-table-wrap th,
.ux-table-wrap td{ padding: 11px 13px; text-align: left; font-size: 13.5px; vertical-align: top; }
.ux-table-wrap thead th{ background: var(--card2, #f2f4f9); font-weight: 800; }
.ux-table-wrap tr + tr td{ border-top: 1px solid var(--line, rgba(0,0,0,.08)); }

/* ═══════════════════════════════════════════════════════════════════════════
   v4.1.1 — auth card sizing + bell badge + alert centre
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Login / "Create your workspace" card ───────────────────────────────
   The wrapper was overflow:hidden with place-items:center. A create-workspace
   form (7 fields + terms) is taller than a laptop viewport, so the card was
   centred and BOTH ends were clipped — the "Create account" button simply
   disappeared. The card now scrolls inside the viewport, and the page itself
   is allowed to scroll while the auth screen is up (body had overflow:hidden
   for the app shell). */
body.ux-auth{ overflow-y:auto !important; height:auto !important; min-height:100dvh; }
html:has(body.ux-auth){ height:auto !important; overflow-y:auto !important; }
.login-wrap{
  overflow-y:auto !important;
  overflow-x:hidden;
  align-items:flex-start !important;
  place-items:initial !important;
  padding-top:max(22px, env(safe-area-inset-top));
  padding-bottom:max(22px, env(safe-area-inset-bottom));
}
.login-shell{ margin:auto; width:100%; }
.login-box{ max-height:none !important; overflow:visible !important; }

/* short windows (laptops, split screen): tighten so the primary button stays
   on screen instead of merely becoming reachable by scrolling */
@media (max-height: 900px){
  .login-wrap{ padding-top:10px; padding-bottom:12px; }
  .login-box{ padding:16px 22px 14px !important; }
  .login-box .lbrand{ margin-bottom:9px !important; }
  .login-box .lbrand .logo svg, .login-box .lbrand .mark{ height:30px !important; width:30px !important; }
  .login-box h2{ font-size:20px !important; margin:0 0 2px !important; }
  .login-box .lsub{ margin-bottom:9px !important; font-size:12.5px !important; }
  .login-box .ltabs{ margin-bottom:10px !important; }
  .login-box .ltabs button{ padding:7px 8px !important; font-size:12px !important; }
  .login-box .field{ margin-bottom:7px !important; }
  .login-box .lab{ font-size:10px !important; margin-bottom:3px !important; }
  .login-box .inp{ padding:7px 11px !important; font-size:13.5px !important; }
  .pwhint{ font-size:10.5px; min-height:13px; margin-top:2px; }
  .login-box .row2{ gap:9px !important; margin-bottom:0 !important; }
  .login-box .btn.big{ padding:11px 16px !important; font-size:14.5px !important; margin-top:4px !important; }
  .login-box .tiny, .login-box .terms, .login-box .login-foot{ font-size:10.5px !important; line-height:1.45 !important; }
  .login-box .login-foot{ margin-top:8px !important; gap:6px !important; }
  .login-box .lforgot{ margin:6px 0 0 !important; font-size:12px !important; }
}
@media (max-height: 620px){
  .login-shell{ margin:0 auto; }
  .login-wrap{ align-items:flex-start !important; }
}

/* ── B. Bell badge ─────────────────────────────────────────────────────── */
.iconbtn{ position:relative; }
.bell-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px;
  padding:0 4px; border-radius:99px; background:#e5484d; color:#fff;
  font:800 10px/17px system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center; box-shadow:0 0 0 2px var(--panel,#0f1219);
  pointer-events:none;
}
.iconbtn.has-alerts{ border-color:#e5484d; }

/* ── C. Alert centre ───────────────────────────────────────────────────── */
.alert-list{
  max-height:min(52vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:12px; background:var(--card);
  margin:6px 0 12px;
}
.alert-row{
  display:flex; gap:11px; align-items:flex-start; padding:11px 13px;
  cursor:pointer; border-bottom:1px solid var(--line);
}
.alert-row:last-child{ border-bottom:0; }
.alert-row:hover{ background:var(--card2); }
.alert-ic{ font-size:17px; line-height:1.2; width:22px; text-align:center; flex-shrink:0; }
.alert-t{ font-weight:800; font-size:13px; }
.alert-b{ font-size:12.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.alert-foot{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 12px; border-radius:12px; background:var(--card2); margin-bottom:12px;
}

/* ── D. Password field: eye toggle + live hint ──────────────────────────── */
.pwwrap{ position:relative; }
.pwwrap .inp{ padding-right:46px; }
.pweye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; cursor:pointer;
  border-radius:9px; font-size:15px; line-height:1; color:var(--muted);
}
.pweye:hover{ background:var(--card2); }
.pwhint{ font-size:11.5px; margin-top:4px; min-height:15px; color:var(--muted); }
.pwhint.ok{ color:var(--success); }
.pwhint.bad{ color:var(--danger); }
.lerr.ok{ color:var(--success); }

/* ── E. One-time code input ─────────────────────────────────────────────── */
#otp_code{ font-variant-numeric:tabular-nums; }

/* eye button: filled = password visible */
.pweye svg{ transition:opacity .15s; }
.pweye.on{ background:var(--card2); color:var(--accent); }
.pweye.on::after{
  content:""; position:absolute; left:9px; right:9px; top:50%; height:2px;
  background:currentColor; transform:rotate(-38deg); border-radius:2px;
}

.pwhint:empty{ display:none; }

/* ── F. In-app alert toasts (work with notifications blocked) ───────────── */
.alert-host{
  position:fixed; z-index:2147483000; right:16px; bottom:calc(74px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:9px; width:min(340px, calc(100vw - 32px));
  pointer-events:none;
}
.alert-toast{
  pointer-events:auto; cursor:pointer; background:var(--panel,#10131a); color:var(--text,#fff);
  border:1px solid var(--line,rgba(255,255,255,.14)); border-left:3px solid #7c5cff;
  border-radius:12px; padding:10px 13px; box-shadow:0 10px 30px rgba(0,0,0,.34);
  animation:alertIn .22s ease-out;
}
.alert-toast.out{ opacity:0; transform:translateX(18px); transition:opacity .24s, transform .24s; }
.alert-toast:hover{ border-left-color:#22c55e; }
.at-t{ font-weight:800; font-size:13px; }
.at-b{ font-size:12px; opacity:.82; margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
@keyframes alertIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (max-width:640px){
  .alert-host{ right:10px; left:10px; width:auto; bottom:calc(74px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){ .alert-toast{ animation:none; } }