/* =====================================================================
   ShotGram v78.3 — style patch
   Loads AFTER styles.css and safe-area.css. Overrides only.
   Nothing in this file renames an existing class.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. MISSING CLASSES — used by JS/HTML, never defined in styles.css
   These were rendering as unstyled elements.
   --------------------------------------------------------------------- */

/* js/icons.js — identity badges rendered with no size rule at all,
   so they inherited whatever the parent font-size was. */
.identity-icon-owner,
.identity-icon-official,
.identity-icon-admin,
.identity-icon-verified{
  width:15px;height:15px;flex:none;display:inline-block;
  vertical-align:-2px;margin-inline-start:3px;
}
.identity-icon-owner   { color:#ffb63d; }
.identity-icon-official{ color:var(--cyan, #00d8ff); }
.identity-icon-admin   { color:var(--violet, #8b5cff); }
.identity-icon-verified{ color:#3ea6ff; }
.identity-icon-owner svg,
.identity-icon-official svg,
.identity-icon-admin svg,
.identity-icon-verified svg{ width:100%;height:100%;display:block; }

/* js/views/reels.js */
.reel-sound-badge{
  position:absolute;z-index:6;
  inset-block-start:max(12px,var(--sa-t,12px));
  inset-inline-end:12px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);color:#fff;
}
.reel-sound-badge svg{width:17px;height:17px}
.reel-tap-hint{
  position:absolute;z-index:6;inset-inline:0;bottom:38%;
  text-align:center;font-size:12px;font-weight:700;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  pointer-events:none;animation:sgHintFade 2.4s ease forwards;
}
@keyframes sgHintFade{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* js/sg-safearea.js + js/sg-platform.js — body flags set by JS,
   but nothing ever consumed them. */
.sg-has-top-inset    .sg-inset-top{ padding-block-start:var(--sa-t,0); }
.sg-has-bottom-inset .sg-inset-bottom{ padding-block-end:var(--sa-b,0); }
.sg-landscape .sg-hide-landscape{ display:none !important; }
.sg-portrait  .sg-hide-portrait { display:none !important; }

/* js/views/clan-channels.js */
.permission-connect,
.permission-send{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);background:#12142400;
}
.permission-connect{ border-color:rgba(var(--cyan-rgb, 0, 216, 255),.4);color:#8fe7ff; }
.permission-send   { border-color:rgba(var(--violet-rgb, 139, 92, 255),.4);color:#c3aaff; }
.has-voice-users{ border-color:rgba(62,214,122,.45) !important; }
.has-voice-users::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#3ed67a;margin-inline-start:auto;flex:none;
  box-shadow:0 0 0 3px rgba(62,214,122,.18);
}

/* js/views/clans.js */
.top-clan-voice{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;color:#3ed67a;
  padding:2px 7px;border-radius:999px;
  background:rgba(62,214,122,.12);border:1px solid rgba(62,214,122,.3);
}
.top-clan-voice svg{width:11px;height:11px}

/* js/auth.js */
.auth-birthday-field{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.auth-birthday-field select{ min-width:0; }

/* js/views/company.js */
.status-state{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;
}
.status-state::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
}
.status-state[data-state="ok"]  { color:#3ed67a;background:rgba(62,214,122,.1); }
.status-state[data-state="warn"]{ color:#ffb63d;background:rgba(255,182,61,.1); }
.status-state[data-state="down"]{ color:#ff355d;background:rgba(255,53,93,.1); }

/* js/views/contacts.js */
.user-line{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:9px 2px;
}
.user-line .grow{ min-width:0; }

/* js/views/profile.js — the "Requested" follow state had no styling,
   so a pending follow looked identical to a live Follow button. */
.btn.requested,
button.requested{
  background:#171a2b !important;color:var(--muted) !important;
  border:1px solid var(--line) !important;box-shadow:none !important;
}

/* js/calls.js */
.video-off{ background:#0b0c17 !important; }
.video-off video{ opacity:0;pointer-events:none; }
.video-off::after{
  content:"";position:absolute;inset:0;
  background:url('/assets/default-avatar-v3.png') center/64px no-repeat,#0b0c17;
  opacity:.35;
}

/* Static pages (privacy.html, terms.html, delete-my-data.html) —
   .top / .box / .meta were used but never defined, so those three pages
   rendered as raw unstyled documents. */
.top{
  display:flex;align-items:center;gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-bottom:1px solid var(--line);
}
.box{
  margin:14px auto;max-width:720px;padding:16px 18px;
  border:1px solid var(--line);border-radius:16px;background:#0c0e1a;
  line-height:1.65;
}
.box h2{ font-size:15px;margin:18px 0 7px; }
.box h2:first-child{ margin-top:0; }
.box p,.box li{ font-size:13px;color:#c9cbdb; }
.box ul{ padding-inline-start:20px;margin:6px 0; }
.meta{ font-size:11px;color:var(--muted);margin-top:4px; }


/* ---------------------------------------------------------------------
   2. STREAMER SCREEN — decrowding
   Problem: .live-control-panel is a single flat grid stacking the header,
   source tabs, title field, category row, device row, start button,
   OBS panel, LIVE activity feed, creator chat + form AND the readiness
   checklist all at once under the camera. On a 375x667 phone that is
   roughly 900px of controls under a shrunken preview.
   Fix: collapse the panel into a sheet, give the stage the screen,
   and keep only LIVE badge + viewers + end control persistent.
   --------------------------------------------------------------------- */
@media(max-width:760px){

  .live-room-shell{
    position:fixed;inset:0;z-index:40;
    display:block;background:#05060d;overflow:hidden;
  }

  /* Stage takes the whole screen instead of a letterboxed strip. */
  .live-room-shell .live-stage{
    position:absolute;inset:0;width:100%;height:100dvh;
    max-height:none;aspect-ratio:auto;border-radius:0;margin:0;
  }
  .live-room-shell .live-stage > video{
    width:100%;height:100%;object-fit:cover;display:block;
  }

  /* Nothing permanently covers the centre of frame. */
  .live-room-shell .live-stage-gradient{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to bottom,rgba(0,0,0,.55),transparent 22%),
      linear-gradient(to top,rgba(0,0,0,.65),transparent 34%);
  }

  /* Persistent HUD: close, LIVE badge + viewers, flip. Nothing else. */
  .live-room-shell .live-top-row{
    position:absolute;z-index:6;inset-inline:0;
    top:max(10px,var(--sa-t,10px));
    display:flex;align-items:center;gap:8px;padding:0 12px;
  }
  .live-room-shell .live-status-cluster{
    display:flex;align-items:center;gap:7px;margin-inline:auto;
  }
  .live-room-shell .live-status-badge{
    font-size:10px;font-weight:900;letter-spacing:.09em;
    padding:5px 9px;border-radius:999px;
    background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);
    color:#fff;backdrop-filter:blur(10px);
  }
  .live-room-shell .live-status-badge.is-live{
    background:#ff355d;border-color:#ff355d;
  }

  /* Host card sits low-start, out of frame centre. */
  .live-room-shell .live-host-card{
    position:absolute;z-index:6;
    inset-inline-start:12px;
    bottom:calc(var(--sa-b,0px) + 92px);
    inset-inline-end:auto;width:auto;max-width:62%;
    padding:7px 11px 7px 7px;border-radius:999px;
    background:rgba(0,0,0,.42);backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1);
  }
  .live-room-shell .live-host-card b{ font-size:12px; }
  .live-room-shell .live-host-card span{ font-size:10px; }

  /* ---- the control panel becomes a draggable sheet ---- */
  .live-room-shell .live-control-panel{
    position:absolute;z-index:8;inset-inline:0;bottom:0;
    max-height:78dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    border-radius:22px 22px 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    background:rgba(10,11,23,.93);backdrop-filter:blur(20px);
    padding:8px 14px calc(16px + var(--sa-b,0px));
    transform:translateY(calc(100% - 78px));
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  .live-room-shell .live-control-panel.sg-open{ transform:translateY(0); }

  /* Grab handle */
  .live-room-shell .live-control-panel::before{
    content:"";display:block;width:38px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.24);margin:0 auto 10px;
  }

  /* Collapsed: only the Start LIVE button peeks above the fold. */
  .live-room-shell .live-control-panel > *{ order:5; }
  .live-room-shell #mobileLiveControls{ order:1; }
  .live-room-shell #obsLiveControls  { order:2; }

  .live-room-shell .live-creator-command-head{
    display:grid;gap:2px;padding-bottom:4px;
  }
  .live-room-shell .live-creator-command-head h1{ font-size:16px; }
  .live-room-shell .live-creator-command-head p{ font-size:11px; }
  /* The "Secure ingest" chip and the kicker are decoration on a phone. */
  .live-room-shell .live-secure-chip,
  .live-room-shell .creator-kicker{ display:none; }

  /* Readiness checklist is pre-flight only — hide it once live. */
  .live-room-shell.is-live .live-creator-readiness,
  .live-room-shell.is-live .live-creator-command-head,
  .live-room-shell.is-live .live-field,
  .live-room-shell.is-live .live-category-row,
  .live-room-shell.is-live .live-source-tabs{ display:none; }

  .live-room-shell .live-creator-readiness{
    border:1px solid var(--line);border-radius:13px;
    padding:10px 12px;display:grid;gap:7px;
  }
  .live-room-shell .live-creator-readiness > div{
    display:flex;flex-wrap:wrap;gap:8px;
  }
  .live-room-shell .live-creator-readiness span{
    font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;
  }

  /* Device row: 44px+ targets, still three across. */
  .live-room-shell .live-device-row{ gap:9px; }
  .live-room-shell .live-device-btn{ min-height:58px; }

  .live-room-shell .live-start-btn{ height:50px;font-size:14px !important; }

  /* ---- creator chat: compact, collapsible, never full-screen ---- */
  .live-room-shell .live-creator-social{
    position:absolute;z-index:7;inset-inline:0;
    bottom:calc(var(--sa-b,0px) + 86px);
    padding:0 12px;pointer-events:none;
    display:grid;gap:6px;
  }
  .live-room-shell .live-creator-social.sg-collapsed .live-creator-chat,
  .live-room-shell .live-creator-social.sg-collapsed .live-creator-chat-form{
    display:none;
  }
  .live-room-shell .live-creator-social-head{
    pointer-events:auto;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:6px 10px;border-radius:999px;
    background:rgba(0,0,0,.42);backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1);
  }
  .live-room-shell .live-creator-social-head b{ font-size:11px; }
  .live-room-shell .live-creator-social-head > div{
    display:flex;gap:9px;align-items:center;
  }
  .live-room-shell .live-creator-social-head span{
    font-size:10px;color:#d9dbe8;display:inline-flex;align-items:center;gap:3px;
  }
  .live-room-shell .live-creator-chat{
    pointer-events:auto;
    max-height:24dvh;overflow-y:auto;overscroll-behavior:contain;
    display:grid;gap:5px;padding:2px 2px 0;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);
            mask-image:linear-gradient(to bottom,transparent,#000 22%);
  }
  .live-room-shell .live-creator-chat-line{
    display:flex;gap:7px;align-items:flex-start;
    font-size:11.5px;line-height:1.35;
    text-shadow:0 1px 6px rgba(0,0,0,.75);
  }
  .live-room-shell .live-creator-chat-line img{
    width:20px;height:20px;border-radius:50%;flex:none;object-fit:cover;
  }
  .live-room-shell .live-creator-chat-line p{ min-width:0; }
  .live-room-shell .live-creator-chat-line b{ color:#8fe7ff;font-weight:800; }
  .live-room-shell .live-creator-chat-form{
    pointer-events:auto;display:flex;gap:7px;
  }
  .live-room-shell .live-creator-chat-form .input{
    height:38px;border-radius:999px;
    background:rgba(0,0,0,.45);backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.14);font-size:12px;
  }
  .live-room-shell .live-creator-chat-form button{
    width:38px;height:38px;flex:none;border-radius:50%;
    background:var(--brand);color:#fff;display:grid;place-items:center;border:0;
  }

  /* Gift/alert toasts must never take the screen from the streamer. */
  .live-room-shell .sg-live-toast{
    position:absolute;z-index:9;
    inset-inline:12px;top:calc(var(--sa-t,0px) + 54px);
    padding:9px 12px;border-radius:14px;
    background:rgba(0,0,0,.55);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14);
    font-size:12px;color:#fff;pointer-events:none;
    animation:sgToast 3.4s ease forwards;
  }
  @keyframes sgToast{
    0%{opacity:0;transform:translateY(-8px)}
    12%{opacity:1;transform:none}
    78%{opacity:1}
    100%{opacity:0;transform:translateY(-6px)}
  }
}

/* Small phones (375x667) — tighten further. */
@media(max-width:390px){
  .live-room-shell .live-control-panel{ transform:translateY(calc(100% - 74px)); }
  .live-room-shell .live-device-btn{ min-height:54px;font-size:9.5px; }
  .live-room-shell .live-creator-chat{ max-height:20dvh; }
  .live-room-shell .live-host-card{ max-width:56%; }
}


/* ---------------------------------------------------------------------
   3. VIEWER — full-bleed, no letterbox
   .live-watch-player was aspect-ratio:9/16 with max-height:72dvh, which
   on a tall phone leaves a dead band above and below the video.
   --------------------------------------------------------------------- */
@media(max-width:760px){
  .live-watch-shell{
    position:relative;min-height:100dvh;padding-bottom:0;overflow:hidden;
  }
  .live-watch-shell .live-watch-player{
    position:absolute;inset:0;
    width:100%;height:100dvh;max-height:none;min-height:0;
    aspect-ratio:auto;border-radius:0;
  }
  .live-watch-shell .live-watch-player video,
  .live-watch-shell .live-watch-player iframe{
    width:100%;height:100%;object-fit:cover;
  }
  .live-watch-shell .live-watch-side{
    position:absolute;z-index:5;inset-inline:0;bottom:0;
    padding:0 12px calc(10px + var(--sa-b,0px));
    background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
    pointer-events:none;
  }
  .live-watch-shell .live-watch-side > *{ pointer-events:auto; }
  .live-watch-shell .live-watch-title{ display:none; }
  .live-watch-shell .live-chat-panel{
    margin:0;border:0;background:transparent;min-height:0;
    max-height:30dvh;grid-template-rows:auto 1fr auto;
  }
  .live-watch-shell .live-chat-head{ display:none; }
  .live-watch-shell .live-chat-list{
    background:transparent;padding:0;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%);
            mask-image:linear-gradient(to bottom,transparent,#000 26%);
  }
  .live-watch-shell .live-chat-message{
    font-size:12px;text-shadow:0 1px 6px rgba(0,0,0,.75);
  }
  /* Action rail clear of the chat column. */
  .live-watch-shell .live-viewer-rail{
    bottom:max(96px,calc(var(--sa-b,0px) + 78px));
  }
}


/* ---------------------------------------------------------------------
   4. RTL correctness for the live surfaces
   These used physical left/right and did not mirror in Arabic.
   --------------------------------------------------------------------- */
[dir="rtl"] .live-watch-top .live-viewers{ margin-left:0;margin-inline-start:auto; }
[dir="rtl"] .live-watch-top{ left:auto;right:auto;inset-inline:0; }
[dir="rtl"] .live-chat-empty{ text-align:start; }
[dir="rtl"] .live-creator-chat-line{ text-align:start; }
[dir="rtl"] .obs-copy-row{ flex-direction:row; }
/* Arrow-type icons mirror; brand/play/clock must not. */
[dir="rtl"] .sg-mirror svg{ transform:scaleX(-1); }
[dir="rtl"] .live-pulse,
[dir="rtl"] .obs-logo,
[dir="rtl"] .identity-icon-verified svg{ transform:none; }


/* ---------------------------------------------------------------------
   5. Arabic typography
   Inter has no Arabic coverage — Arabic text was falling back to a
   system default at Latin line-height.
   --------------------------------------------------------------------- */
:root{ --font-ar:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif; }
html[lang="ar"] body,
[dir="rtl"] body{
  font-family:var(--font-ar);
  line-height:1.75;
}
[dir="rtl"] .tiny{ font-size:11.5px; }
[dir="rtl"] .xs  { font-size:11px; }
/* Arabic must not go below 14px in body copy. */
[dir="rtl"] p,
[dir="rtl"] .box p,
[dir="rtl"] .box li{ font-size:14px; }
/* Mixed Arabic + Latin strings (usernames, hashtags) must not reorder. */
.live-creator-chat-line p,
.live-chat-message,
.msg .bubble,
.room-peer b{ unicode-bidi:plaintext; }


/* ---------------------------------------------------------------------
   6. Accessibility / motion
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .live-room-shell .live-control-panel{ transition:none; }
  .reel-tap-hint,
  .live-room-shell .sg-live-toast{ animation:none;opacity:1; }
  .live-pulse{ animation:none; }
}
.live-device-btn:focus-visible,
.live-round-btn:focus-visible,
.live-start-btn:focus-visible,
.live-viewer-rail button:focus-visible{
  outline:2px solid var(--cyan, #00d8ff);outline-offset:2px;
}