/* ITAHUKA Video Platform v4.9.0 Mobile/PWA RC1
   Loaded after the existing theme stack. Desktop behavior is intentionally unchanged. */

:root {
  --it-safe-top: env(safe-area-inset-top, 0px);
  --it-safe-right: env(safe-area-inset-right, 0px);
  --it-safe-bottom: env(safe-area-inset-bottom, 0px);
  --it-safe-left: env(safe-area-inset-left, 0px);
  --it-mobile-header: 58px;
  --it-mobile-bottom-nav: 62px;
}

.youtube-ui .mobile-search-button,
.mobile-search-button,
.mobile-search-overlay,
.mobile-bottom-nav,
.pwa-install-nav,
.pwa-status-host {
  display: none !important;
}

.account-dropdown-action {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.account-dropdown-action:hover { background: rgba(127,127,127,.12); }

.pwa-status-host {
  display: block !important;
  position: fixed;
  z-index: 5000;
  right: max(16px, var(--it-safe-right));
  bottom: max(16px, var(--it-safe-bottom));
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.pwa-status {
  min-height: 52px;
  margin-top: 10px;
  padding: 10px 10px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d9dee5;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  box-shadow: 0 14px 38px rgba(15,23,42,.2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
}
.pwa-status.is-visible { opacity: 1; transform: translateY(0); }
.pwa-status[data-tone="warning"] { border-left: 4px solid #d97706; }
.pwa-status[data-tone="success"] { border-left: 4px solid #15803d; }
.pwa-status__message { min-width: 0; font-size: 14px; line-height: 1.4; }
.pwa-status__actions { display: flex; align-items: center; gap: 4px; }
.pwa-status__actions button {
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: #0f5132;
  color: #fff;
  font-weight: 750;
  cursor: pointer;
}
.pwa-status__actions .pwa-status__close { width: 38px; padding: 0; background: transparent; color: inherit; font-size: 24px; }

html[data-it-color-resolved="dark"] .pwa-status,
.viewer-dark .pwa-status { background: #181b20; color: #f8fafc; border-color: #343b45; }

@media (max-width: 1100px) {
  html { overflow-x: hidden; }
  body { min-width: 0; overflow-x: hidden; }

  .navigation-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1680 !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    border: 0;
    background: rgba(0,0,0,.48) !important;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.sidebar-open .navigation-backdrop,
  body.admin-menu-open .navigation-backdrop { visibility: visible; opacity: 1; }

  .public-sidebar,
  .admin-nav,
  .broadcast-nav {
    z-index: 1690 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-area .admin-content,
  .admin-area .site-content,
  .public-area .public-content,
  .public-area .site-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 900px) {
  :root { --it-header-height: var(--it-mobile-header); }

  .public-area { padding-bottom: calc(var(--it-mobile-bottom-nav) + var(--it-safe-bottom)); }
  .public-area .site-footer { margin-bottom: 0; }

  .youtube-ui .site-header.yt-header,
  .site-header.yt-header {
    height: calc(var(--it-mobile-header) + var(--it-safe-top)) !important;
    padding-top: var(--it-safe-top) !important;
  }
  .youtube-ui .site-header .nav-shell,
  .site-header .nav-shell {
    width: 100% !important;
    height: var(--it-mobile-header) !important;
    min-height: var(--it-mobile-header) !important;
    padding: 0 max(8px, var(--it-safe-right)) 0 max(8px, var(--it-safe-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
  }
  .header-left { min-width: 0 !important; gap: 6px !important; }
  .youtube-ui .menu-button,
  .menu-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
    border-radius: 50% !important;
  }
  .youtube-ui .brand.yt-brand,
  .brand.yt-brand {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: calc(100vw - 190px) !important;
  }
  .youtube-ui .brand-logo-image,
  .brand-logo-image {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
  }
  .youtube-ui .site-logo-text { display: flex !important; }
  .youtube-ui .site-logo-text strong { max-width: 96px !important; font-size: 17px !important; }

  .header-center { display: none !important; }
  .account-links { min-width: 0 !important; gap: 2px !important; }
  .youtube-ui .mobile-search-button,
  .mobile-search-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }
  .mobile-search-button svg { width: 25px; height: 25px; fill: currentColor; }
  .youtube-ui .account-menu,
  .youtube-ui .account-menu summary,
  .youtube-ui .account-menu .avatar,
  .youtube-ui .account-menu .avatar-small,
  .account-menu,
  .account-menu > summary {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }
  .youtube-ui .sign-in-button,
  .sign-in-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
  }

  .mobile-search-overlay {
    position: fixed;
    z-index: 2100;
    inset: 0 0 auto 0;
    height: calc(var(--it-mobile-header) + var(--it-safe-top));
    padding: var(--it-safe-top) max(8px, var(--it-safe-right)) 0 max(8px, var(--it-safe-left));
    background: var(--it-header-bg, #fff);
    border-bottom: 1px solid rgba(127,127,127,.25);
    box-shadow: 0 4px 18px rgba(15,23,42,.12);
  }
  .mobile-search-overlay[hidden] { display: none !important; }
  .mobile-search-overlay:not([hidden]) { display: block !important; }
  .mobile-search-overlay form {
    height: var(--it-mobile-header);
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center;
    gap: 5px;
  }
  .mobile-search-overlay button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; }
  .mobile-search-overlay input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #c9d0d8;
    border-radius: 999px;
    background: var(--it-surface, #fff);
    color: inherit;
    font-size: 16px;
  }
  .mobile-search-open { overflow: hidden; }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1600;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--it-mobile-bottom-nav) + var(--it-safe-bottom));
    padding: 4px max(4px, var(--it-safe-right)) var(--it-safe-bottom) max(4px, var(--it-safe-left));
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr));
    align-items: stretch;
    border-top: 1px solid rgba(127,127,127,.25);
    background: rgba(255,255,255,.96);
    color: #111827;
    box-shadow: 0 -4px 18px rgba(15,23,42,.08);
    backdrop-filter: blur(16px);
  }
  .mobile-bottom-nav a {
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav a > span { min-height: 25px; display: grid; place-items: center; font-size: 23px; line-height: 1; }
  .mobile-bottom-nav a > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.1; font-weight: 650; white-space: nowrap; }
  .mobile-bottom-nav a.active { color: #0f713f; background: rgba(15,113,63,.08); }
  .mobile-bottom-nav .mobile-bottom-live--live > span { color: #e11d48; }

  html[data-it-color-resolved="dark"] .mobile-bottom-nav,
  .viewer-dark .mobile-bottom-nav { background: rgba(18,20,24,.96); color: #f8fafc; }
  html[data-it-color-resolved="dark"] .mobile-search-overlay,
  .viewer-dark .mobile-search-overlay { background: #15181d; color: #f8fafc; }

  .pwa-install-nav {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }
  .pwa-install-nav[hidden] { display: none !important; }
  .pwa-install-nav span { width: 24px; font-size: 22px; text-align: center; }

  .page-space { padding-bottom: 24px !important; }
  .page-space > .container,
  .it-canvas-root,
  .viewer-canvas-full .it-canvas-root,
  .viewer-canvas-boxed .it-canvas-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Universal mobile touch and overflow contract. */
  button,
  input[type="button"], input[type="submit"], input[type="reset"],
  .button, .filter-chips a, .channel-tabs a, .program-actions button,
  .native-action, .native-subscribe, .comments-sort-button,
  .schedule-filters button, .schedule-week-arrow, .schedule-week-strip button {
    min-height: 44px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea { max-width: 100%; font-size: 16px; }
  img, video, iframe, canvas, svg { max-width: 100%; }
  pre, code { max-width: 100%; overflow-wrap: anywhere; }
  .panel, .admin-card, .settings-section, .content-section, .page-heading { min-width: 0; max-width: 100%; }
  .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 680px; }

  /* Public cards and lists. */
  .video-grid, .playlist-grid, .history-grid, .profile-grid, .post-grid,
  .grid, .cards-grid, .featured-grid, .video-library-grid,
  .broadcast-video-grid, .channel-video-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px 10px !important;
  }
  .video-card, .playlist-card, .history-card, .profile-card,
  .broadcast-video-card, .community-post, .notification-card { min-width: 0; }
  .video-card img, .playlist-card img, .history-card img,
  .broadcast-video-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
  .community-post, .community-compose, .notification-card { padding: 14px !important; border-radius: 14px !important; }
  .community-image { width: 100%; height: auto; }
  .community-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .inline-comment { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 8px !important; }
  .inline-comment input { min-width: 0; }

  .channel-profile-row { align-items: start !important; }
  .channel-tabs { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .channel-tabs::-webkit-scrollbar { display: none; }
  .channel-tabs a { flex: 0 0 auto; min-width: 72px; }

  /* Watch/player, descriptions and comments. */
  .watch-layout, .broadcast-watch-layout, .native-watch-layout,
  .playlist-watch-layout, .live-layout, .live-hub-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important;
  }
  .watch-player-shell, .broadcast-player-frame, .native-player-shell,
  .it-player-shell, .live-player-shell, .live-video-panel,
  .video-player, .player-shell {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    margin-left: -12px !important;
    border-radius: 0 !important;
    overflow: hidden;
    aspect-ratio: 16/9;
  }
  .watch-player-shell iframe, .broadcast-player-frame iframe,
  .native-player-shell iframe, .live-player-shell iframe,
  .watch-player-shell video, .broadcast-player-frame video,
  .native-player-shell video, .live-player-shell video {
    width: 100% !important; height: 100% !important; display: block;
  }
  .program-body h1, .native-watch-main h1, .broadcast-watch-main h1 { font-size: clamp(19px,5vw,25px) !important; line-height: 1.25; }
  .program-actions, .native-action-row, .broadcast-watch-actions,
  .channel-strip, .video-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .program-actions > *, .native-action-row > *, .broadcast-watch-actions > * { flex: 0 0 auto; }
  .video-description, .native-description, .broadcast-description,
  .comments-section, .native-comments, .broadcast-comments { min-width: 0; border-radius: 14px !important; }
  .comment, .community-comment { min-width: 0; }
  .comment-content, .comment-content p, .community-comment p { min-width: 0; overflow-wrap: anywhere; }
  .native-comment-form, .comment-form { min-width: 0; }
  .native-comment-form textarea, .comment-form textarea { min-width: 0; width: 100%; }
  .compact-video-list { grid-template-columns: 1fr !important; }
  .compact-video-list > a { grid-template-columns: minmax(120px,40%) minmax(0,1fr) !important; }
  .compact-video-list img { width: 100% !important; height: auto !important; }

  /* Live and chat stack. Chat remains network-only. */
  .it-live-grid { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  .it-live-main, .it-live-player-card, .it-live-chat-column,
  .it-live-chat-column > .it-community-chat { min-width: 0 !important; max-width: 100% !important; }
  .it-live-player-card .itahuka-linear-player,
  .it-live-player-card .itahuka-player-stage { width: 100% !important; max-width: 100% !important; }
  .it-live-chat-column > .it-community-chat { position: relative !important; top: auto !important; height: min(72dvh,680px) !important; min-height: 480px !important; }
  .it-live-action, .it-community-chat__header-actions button,
  .it-community-chat__composer .it-chat-tool, .it-community-chat__composer .it-chat-send,
  .it-chat-emoji-menu button, .it-community-chat__error button {
    min-width: 44px !important; min-height: 44px !important; height: 44px !important;
  }
  .it-community-chat__composer { padding-bottom: max(10px,var(--it-safe-bottom)) !important; }
  .live-chat-panel, .chat-panel, .it-live-chat,
  .broadcast-chat-panel { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: min(66vh,560px); }
  .chat-messages, .live-chat-messages { min-height: 220px; max-height: none; }
  .chat-composer, .chat-form { position: sticky; bottom: 0; padding-bottom: max(10px,var(--it-safe-bottom)); }
  .chat-composer textarea, .chat-form textarea, .chat-form input { min-width: 0; }

  /* Schedule and world-time layout. */
  .schedule-page { min-width: 0; }
  .schedule-page-head { align-items: flex-start !important; gap: 12px !important; }
  .schedule-timezone { min-height: 44px; }
  .schedule-week-navigation { grid-template-columns: 44px minmax(0,1fr) 44px !important; gap: 4px !important; }
  .schedule-week-strip { overflow-x: auto !important; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .schedule-week-strip::-webkit-scrollbar { display: none; }
  .schedule-week-strip button { min-width: 74px; scroll-snap-align: center; }
  .schedule-filters { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .schedule-filters::-webkit-scrollbar { display: none; }
  .schedule-filters button { flex: 0 0 auto; white-space: nowrap; }
  .schedule-dashboard { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  .schedule-now-column, .schedule-side-column { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
  .schedule-world-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .schedule-world-clock { min-width: 0; }
  .schedule-world-value time { font-size: clamp(18px,5vw,25px); }

  /* Forms, registration, profiles, reports and support. */
  .narrow-form, .admin-form, .auth-card, .auth-layout,
  .report-case-form, .support-form, .settings-two-column,
  .field-row, .form-grid, .profile-editor-head {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .field-row, .form-grid, .settings-two-column { grid-template-columns: minmax(0,1fr) !important; }
  .auth-card, .narrow-form, .report-case-form { padding: 18px !important; }
  label { min-width: 0; }
  textarea { resize: vertical; }

  /* Studio/admin: readable stacked controls, scrollable data only where required. */
  .admin-area .page-space > .container,
  .admin-area .it-canvas-root { padding-left: 10px !important; padding-right: 10px !important; }
  .admin-area .page-heading { width: 100% !important; align-items: stretch !important; flex-direction: column !important; gap: 12px !important; }
  .admin-area .page-heading > form,
  .admin-area .page-heading .split-actions { width: 100%; }
  .admin-area .page-heading .button { min-height: 44px; }
  .admin-area .stats-grid, .admin-area .admin-grid,
  .admin-area .studio-grid, .admin-area .settings-grid,
  .admin-area .dashboard-grid, .admin-area .field-row {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .admin-area .panel, .admin-area .admin-card, .admin-area .settings-section { width: 100% !important; padding: 14px !important; }
  .admin-area .split-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .admin-area .split-actions > * { flex: 1 1 160px; }
  .admin-area table input, .admin-area table select, .admin-area table textarea { min-width: 150px; }
  .admin-area .tabs, .admin-area .admin-tabs, .admin-area .broadcast-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .admin-area .tabs > *, .admin-area .admin-tabs > *, .admin-area .broadcast-tabs > * { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .youtube-ui .site-logo-text { display: none !important; }
  .youtube-ui .brand.yt-brand, .brand.yt-brand { max-width: 48px !important; }
  .notification-link { display: grid !important; width: 44px !important; height: 44px !important; }
  .sign-in-button { font-size: 0 !important; width: 44px !important; padding: 0 !important; }
  .sign-in-button span { font-size: 21px !important; }
  .account-dropdown { position: fixed !important; top: calc(var(--it-mobile-header) + var(--it-safe-top) + 4px) !important; right: max(8px,var(--it-safe-right)) !important; left: max(8px,var(--it-safe-left)) !important; width: auto !important; max-height: calc(100vh - var(--it-mobile-header) - var(--it-safe-top) - var(--it-safe-bottom) - 16px); overflow-y: auto; }

  .video-grid, .playlist-grid, .history-grid, .profile-grid, .post-grid,
  .grid, .cards-grid, .featured-grid, .video-library-grid,
  .broadcast-video-grid, .channel-video-grid { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; }

  .page-heading { align-items: stretch !important; flex-direction: column !important; gap: 10px !important; }
  .page-heading .button, .page-heading form { width: 100%; }
  .page-heading form .button { width: 100%; }
  .channel-profile-row { grid-template-columns: 64px minmax(0,1fr) !important; gap: 12px !important; }
  .channel-avatar-large { width: 64px !important; height: 64px !important; min-width: 64px !important; }
  .channel-profile-row .subscribe-pill { grid-column: 1 / -1 !important; width: 100%; }

  .program-actions, .native-action-row, .broadcast-watch-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .program-actions > *, .native-action-row > *, .broadcast-watch-actions > * { width: 100%; min-width: 0; justify-content: center; }
  .channel-strip { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }

  .schedule-page-head { flex-direction: column !important; }
  .schedule-timezone { width: 100%; justify-content: center; }
  .schedule-world-grid { grid-template-columns: minmax(0,1fr) !important; }
  .schedule-panel { border-radius: 14px !important; }
  .schedule-page-title h1 { font-size: 28px !important; }
  .schedule-page-note { align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; }

  .native-comment-form, .comment-form { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  .native-comment-form .avatar { display: none !important; }
  .inline-comment { grid-template-columns: minmax(0,1fr) !important; }
  .inline-comment button { width: 100%; }

  .pwa-status-host { right: max(8px,var(--it-safe-right)); bottom: calc(var(--it-mobile-bottom-nav) + var(--it-safe-bottom) + 8px); width: calc(100vw - max(16px, var(--it-safe-left) + var(--it-safe-right))); }
}

@media (max-width: 420px) {
  .notification-link { display: none !important; }
  .mobile-bottom-nav a > b { font-size: 9px; }
  .mobile-bottom-nav a > span { font-size: 21px; }
  .program-actions, .native-action-row, .broadcast-watch-actions { grid-template-columns: minmax(0,1fr); }
  .compact-video-list > a { grid-template-columns: 128px minmax(0,1fr) !important; }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  :root { --it-mobile-header: 50px; --it-mobile-bottom-nav: 52px; }
  .youtube-ui .menu-button, .menu-button,
  .mobile-search-button, .account-menu, .account-menu > summary { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  .mobile-bottom-nav { padding-top: 1px; }
  .mobile-bottom-nav a { min-height: 46px; gap: 0; }
  .mobile-bottom-nav a > span { min-height: 22px; font-size: 20px; }
  .mobile-bottom-nav a > b { font-size: 9px; }
  .watch-player-shell, .broadcast-player-frame, .native-player-shell,
  .it-player-shell, .live-player-shell, .live-video-panel { max-height: calc(100vh - var(--it-mobile-header) - var(--it-mobile-bottom-nav) - var(--it-safe-top) - var(--it-safe-bottom)); }
  .live-chat-panel, .chat-panel, .it-live-chat, .broadcast-chat-panel { height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-status, .navigation-backdrop { transition: none !important; }
}