/* =========================================================
   Shadehub — mobile APP UI  (call-first, flat & fresh)
   Everything here is scoped under html.app-mobile, which is only
   added inside the Android app (or with ?appui=1 for testing).
   The website / desktop never get this class → unchanged.
   Built by static/mobile-app.js (it creates the bars + moves the
   existing dock buttons into them, so all app.js logic still works).
   ========================================================= */

html.app-mobile {
  /* layout metrics (include device safe areas) */
  --app-top:    calc(54px + env(safe-area-inset-top, 0px));
  --app-tabbar: calc(60px + env(safe-area-inset-bottom, 0px));
  --app-control: 76px;

  /* flat, fresh tokens (reuse theme accent/bg) */
  --app-card:   var(--surface);
  --app-card-2: var(--surface-2);
  --app-line:   var(--border);
  --app-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* full-bleed app shell, no rubber-band scroll on the shell itself */
html.app-mobile,
html.app-mobile body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.app-mobile body {
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

/* ---- hide the desktop chrome we replace ---- */
html.app-mobile .hdr,
html.app-mobile .dock,
html.app-mobile .room-tabs,
html.app-mobile .room-hero { display: none !important; }

/* keep the page container simple */
html.app-mobile main.page { padding: 0 !important; max-width: none !important; }

/* =========================================================
   TOP APP BAR  (built by JS: #appTopbar)
   ========================================================= */
#appTopbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--app-top);
  padding: env(safe-area-inset-top, 0px) 14px 0;
  align-items: center; gap: 10px;
  background: var(--app-card);
  border-bottom: 1px solid var(--app-line);
  z-index: 60;
}
html.app-mobile.app-in-room #appTopbar { display: flex; }
#appTopbar .apptop-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#appTopbar .apptop-room {
  font-weight: 700; font-size: 17px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#appTopbar .apptop-online { font-size: 12px; color: var(--muted); }
#appTopbar .apptop-online .dotg {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); margin-right: 5px; vertical-align: middle;
}
#appTopbar .apptop-btn {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--app-card-2); color: var(--text);
  font-size: 18px; display: grid; place-items: center; cursor: pointer;
}
#appTopbar .apptop-btn:active { background: var(--accent-soft); }

/* =========================================================
   MAIN AREA — one section at a time (call / chat / users)
   ========================================================= */
html.app-mobile .room-view {
  position: static !important;
  inset: auto !important; height: auto !important;
  padding: 0 !important; gap: 0 !important; margin: 0 !important;
}
/* IMPORTANT: never override the [hidden] attribute — the join screen relies on
   #roomView staying display:none until you connect. Only lay it out when shown. */
html.app-mobile .room-view:not([hidden]) { display: block !important; }
html.app-mobile .room-view > .col {
  position: fixed !important; left: 0; right: 0;
  top: var(--app-top); bottom: var(--app-tabbar);
  display: none !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--bg) !important;
  margin: 0 !important;
}

/* which section shows for the active tab */
html.app-mobile.app-tab-call  .room-view > .col-stage { display: flex !important; flex-direction: column; }
html.app-mobile.app-tab-chat  .room-view > .col-chat  { display: flex !important; flex-direction: column; }
html.app-mobile.app-tab-users .room-view > .col-users { display: flex !important; flex-direction: column; }

/* on the call tab leave room for the control bar above the tab bar */
html.app-mobile.app-tab-call .room-view > .col-stage { bottom: calc(var(--app-tabbar) + var(--app-control)); }

/* ---- CALL view: big participant cards ---- */
html.app-mobile .col-stage { padding: 12px !important; overflow-y: auto; }
html.app-mobile .stage-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important; align-content: start;
}
html.app-mobile .stage-grid:has(> :only-child) { grid-template-columns: 1fr !important; }
html.app-mobile .stage-tile {
  background: var(--app-card) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 18px !important;
  padding: 18px 12px !important;
  box-shadow: var(--app-shadow);
  min-height: 150px;
}
html.app-mobile .stage-tile .avatar,
html.app-mobile .stage-tile .stage-avatar { width: 72px !important; height: 72px !important; }
/* a participant sharing video/screen spans the full width */
html.app-mobile .stage-tile.has-video,
html.app-mobile .stage-tile.spotlight { grid-column: 1 / -1 !important; }

/* ---- empty call state nudge ---- */
html.app-mobile .col-stage .stage-grid:empty::after {
  content: "Поки ти один у кімнаті 👋\A Запроси друзів: ☰ Меню → Запросити";
  white-space: pre-line;
  display: block; grid-column: 1 / -1; text-align: center;
  color: var(--muted); padding: 40px 20px; font-size: 15px; line-height: 1.6;
}

/* ---- CHAT view: header / scrolling messages / pinned input ---- */
html.app-mobile .col-chat { padding: 0 !important; display: flex !important; flex-direction: column; }
html.app-mobile .col-chat .col-head { flex: 0 0 auto; padding: 10px 14px !important; }
html.app-mobile .col-chat .chat-messages {
  flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
  padding: 12px 14px !important; gap: 12px !important;
}
html.app-mobile .col-chat .chat-input-row {
  flex: 0 0 auto; padding: 10px 12px !important;
  background: var(--app-card) !important;
  border-top: 1px solid var(--app-line) !important;
}
html.app-mobile .chat-input-wrap input,
html.app-mobile #chatInput { font-size: 16px !important; } /* 16px stops Android zoom-on-focus */
html.app-mobile .chat-input-row .btn-primary { min-width: 52px; }

/* ---- USERS view ---- */
html.app-mobile .col-users { padding: 8px !important; }
html.app-mobile .col-users .col-head { padding: 8px 8px 10px !important; }
html.app-mobile .user-card {
  background: var(--app-card) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 14px !important;
  padding: 12px !important; margin-bottom: 8px;
}

/* =========================================================
   CONTROL BAR  (JS moves mic/deafen/cam/screen/leave here)
   ========================================================= */
#appControlBar {
  display: none;
  position: fixed; left: 0; right: 0;
  bottom: var(--app-tabbar);
  height: var(--app-control);
  align-items: center; justify-content: center; gap: 14px;
  padding: 0 16px;
  background: var(--app-card);
  border-top: 1px solid var(--app-line);
  z-index: 55;
}
html.app-mobile.app-in-room.app-tab-call #appControlBar { display: flex; }

#appControlBar .dock-btn {
  width: 54px !important; height: 54px !important;
  border-radius: 50% !important;
  background: var(--app-card-2) !important;
  border: 1px solid var(--app-line) !important;
  color: var(--text) !important;
  display: grid !important; place-items: center;
}
#appControlBar .dock-btn svg { width: 24px !important; height: 24px !important; }
#appControlBar .dock-btn.active {
  background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent) !important;
}
#appControlBar .dock-btn:disabled { opacity: .4; }
#appControlBar .dock-leave {
  background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important;
}

/* =========================================================
   BOTTOM TAB BAR  (built by JS: #appTabbar)
   ========================================================= */
#appTabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--app-tabbar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--app-card);
  border-top: 1px solid var(--app-line);
  z-index: 58;
}
html.app-mobile.app-in-room #appTabbar { display: flex; }
#appTabbar .app-tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 11px; position: relative;
}
#appTabbar .app-tab .app-tab-ico { font-size: 20px; line-height: 1; }
#appTabbar .app-tab.active { color: var(--accent); }
#appTabbar .app-tab .app-tab-badge {
  position: absolute; top: 8px; left: 50%; margin-left: 4px;
  min-width: 8px; height: 8px; border-radius: 5px; background: var(--danger);
}

/* =========================================================
   MENU BOTTOM SHEET  (built by JS: #appMenuSheet)
   ========================================================= */
#appMenuSheet { display: none; position: fixed; inset: 0; z-index: 70; }
#appMenuSheet.open { display: block; }
#appMenuSheet .app-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#appMenuSheet .app-sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--app-card);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
#appMenuSheet .app-sheet-grip {
  width: 40px; height: 4px; border-radius: 3px; background: var(--border-2);
  margin: 6px auto 14px;
}
#appMenuSheet .app-sheet-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px;
}
#appMenuSheet .app-menu-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; /* let columns shrink so all items fit — no horizontal overflow */
}
#appMenuSheet .app-menu-item .dock-btn {
  width: 56px !important; height: 56px !important; border-radius: 18px !important;
  background: var(--app-card-2) !important; border: 1px solid var(--app-line) !important;
  color: var(--text) !important; display: grid !important; place-items: center;
}
#appMenuSheet .app-menu-item .dock-btn svg { width: 24px !important; height: 24px !important; }
#appMenuSheet .app-menu-item .dock-btn.active { background: var(--accent) !important; color:#fff !important; border-color: var(--accent) !important; }
#appMenuSheet .app-menu-lbl {
  font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center;
  max-width: 100%; overflow-wrap: anywhere;
}

/* =========================================================
   WELCOME / JOIN screen — full-screen, big touch targets
   ========================================================= */
/* scrollable full-screen welcome (body is overflow:hidden, so the welcome
   itself must scroll — otherwise the nick/join buttons are unreachable).
   Use :not([hidden]) for display so it still hides once you're in a room. */
html.app-mobile .welcome {
  padding: 0 !important; height: 100dvh;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch;
}
html.app-mobile .welcome:not([hidden]) { display: block !important; }
html.app-mobile .welcome-card {
  width: 100% !important; max-width: none !important; min-height: 100%;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: var(--bg) !important;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex; flex-direction: column; gap: 12px;
}
/* bigger tap targets for the nick row + its edit button */
html.app-mobile .cv-nick-row { padding: 14px !important; }
html.app-mobile #editNickBtn { padding: 12px 16px !important; font-size: 15px !important; min-height: 44px; }
html.app-mobile .welcome-card .wc-title { font-size: 30px !important; }
html.app-mobile .welcome-card input,
html.app-mobile .welcome-card .cv-field input {
  font-size: 16px !important; padding: 14px 14px !important; border-radius: 12px !important;
}
html.app-mobile .welcome-card .btn-primary {
  padding: 16px !important; font-size: 17px !important; border-radius: 14px !important;
}
html.app-mobile .wc-rooms .rooms-grid { grid-template-columns: 1fr !important; }

/* =========================================================
   FEATURE PANELS → full-screen sheets in the app
   (#wbPanel whiteboard, #sbPanel soundboard, #ytPanel watch,
    #spatial-audio-panel, #settingsModal)
   ========================================================= */
html.app-mobile #wbPanel:not(.hidden),
html.app-mobile #sbPanel:not(.hidden),
html.app-mobile #ytPanel:not(.hidden),
html.app-mobile #spatial-audio-panel {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  border-radius: 0 !important; transform: none !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  z-index: 80 !important;
}
/* Modals must sit ABOVE the app bars (top 60 / tabs 58 / controls 55),
   otherwise the top bar covers the settings ✕ and it can't be tapped. */
html.app-mobile .modal.open { z-index: 100 !important; }

/* settings modal card → full screen with a sticky, always-reachable close (✕) */
html.app-mobile #settingsModal.open { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
html.app-mobile #settingsModal .settings-card {
  width: 100% !important; max-width: none !important; height: 100dvh !important;
  max-height: none !important; border-radius: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column;
}
html.app-mobile #settingsModal .settings-head {
  position: sticky; top: 0; z-index: 2; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
  background: var(--app-card); border-bottom: 1px solid var(--app-line);
}
html.app-mobile #settingsModal .settings-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
html.app-mobile #closeSettingsBtn {
  width: 44px !important; height: 44px !important; font-size: 22px !important;
  display: grid !important; place-items: center; border-radius: 12px;
  background: var(--app-card-2) !important; color: var(--text) !important;
}
/* generic close buttons inside panels get a bigger hit area */
html.app-mobile .wb-close, html.app-mobile .sb-close, html.app-mobile .yt-close { min-width: 40px; min-height: 40px; }

/* image lightbox already full-screen; just respect safe area */
html.app-mobile .lightbox { padding-top: env(safe-area-inset-top, 0px); }

/* kill heavy blur on the app for smoothness (flat look anyway) */
html.app-mobile * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Camera tile preview display respects default camera mirroring */