/* ───────────────────────────────────────────────────────────────────────────
   Layout de toque (telefone e tablet). O app e desenhado num canvas fixo de
   1920 escalado por
   --app-scale, otimo para TV e desktop. Numa tela estreita isso encolhe tudo,
   entao aqui o canvas e desligado e o conteudo reflui: a navegacao vira barra
   inferior, a lateral de categorias vira faixa horizontal, e cada area mantem
   o proprio scroll para a virtualizacao de lista/grade continuar funcionando. Desktop (>=1024px) e TV (>=1920px) ficam intocados.

   O corte em 1023 e medido, nao escolhido: a 768px o canvas escalava para
   0.4, o que renderiza texto de 7.2px e alvo de toque de 10px. Tablet ficava
   entre dois mundos — largo demais para o layout de telefone antigo (640) e
   estreito demais para o canvas ser legivel.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  html { overflow: hidden; }

  /* Drop the 1920 canvas: render at device pixels, no shrink. */
  body {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* dynamic vh: excludes the mobile address bar so nothing is cut. Phone-only
       (inside @media), so the Chrome-68 TV — which lacks dvh — never sees it. */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100dvh;
    transform: none;
    overflow: hidden;
    font-size: 15px;
  }

  .view {
    width: 100vw;
    height: 100vh;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100dvh;
  }

  /* Stack: content on top, nav as a fixed bottom bar. */
  .home-shell,
  .channel-view {
    flex-direction: column;
    height: 100vh;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100dvh;
  }

  /* ── Bottom navigation bar ─────────────────────────────────────────────── */
  .nav-rail {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow: visible;
    z-index: 600;
  }
  .nav-rail-item {
    flex: 1;
    margin: 0;
    padding: 5px 1px;
    border-radius: 0;
    border: none;
    gap: 2px;
  }
  .nav-rail-icon { width: 22px; height: 22px; }
  .nav-rail-icon .icon { width: 20px; height: 20px; }
  .nav-rail-label { font-size: 13px; }
  .nav-rail-item.active { background: transparent; }
  .nav-rail-profile { margin-top: 0; }
  .nav-rail-avatar { width: 22px; height: 22px; font-size: 13px; }

  /* ── Home ──────────────────────────────────────────────────────────────── */
  .home-view {
    height: 100%;
    padding: 14px 12px 70px; /* bottom pad clears the nav bar */
  }
  .home-header { margin-bottom: 16px; }
  .home-title { font-size: 26px; }
  .home-upgrade {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .home-upgrade strong { font-size: 15px; }
  .home-search-btn { padding: 8px 14px; font-size: 15px; }
  .home-tiles { display: none; } /* shortcuts live in the bottom bar on phones */
  .home-rail { margin-bottom: 22px; }
  .home-rail-title { font-size: 17px; }
  /* Carousel: hide the side arrows on phones (auto-rotate + dots carry it). */
  .home-hero-arrow { display: none; }
  .home-hero-dots { right: 12px; bottom: 10px; }
  .home-card { width: 33vw; max-width: 150px; padding: 4px; }
  .home-card-thumb { height: 46vw; max-height: 210px; }
  .home-card-live .home-card-thumb { height: 22vw; max-height: 100px; }
  /* Let titles wrap to 2 lines instead of being cut off to one ellipsis word —
     unreadable on a ~115px card in portrait. */
  .home-card-title {
    font-size: 13px;
    margin-top: 6px;
    white-space: normal;
    display: -webkit-box;
    /* stylelint-disable-next-line value-no-vendor-prefix, property-no-vendor-prefix */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    min-height: 2.5em;
  }
  .resume-remove { width: 30px; height: 30px; font-size: 15px; opacity: 1; } /* always tappable */

  /* Phone header: the desktop greeting is one row, which makes the account
     name fight the search button for the same 320px. Keep the greeting below
     the brand and reserve a fixed, reachable search target. */
  .home-header { align-items: flex-start; gap: 10px; }
  .home-brand { flex: 1 1 auto; min-width: 0; }
  .home-title { font-size: 22px; gap: 9px; }
  .home-title img { width: 28px; height: 28px; }
  .home-greeting {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    margin-top: 6px;
  }
  .home-greeting-name { font-size: 19px; line-height: 1.15; }
  .home-greeting-sub { font-size: 15px; line-height: 1.25; }
  .home-search-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 8px 12px;
    font-size: 15px;
  }

  /* A 44vh desktop banner consumes most of a portrait phone. The content
     remains readable, but the next rail is now visible without a long swipe. */
  .home-hero {
    height: 320px;
    min-height: 0;
    margin-bottom: 24px;
  }
  .home-hero-content { right: 20px; bottom: 22px; left: 20px; }
  .home-hero-title { font-size: 30px; line-height: 1.06; margin-bottom: 8px; }
  .home-hero-plot { font-size: 15px; margin-bottom: 10px; -webkit-line-clamp: 2; }
  .home-hero-btn { min-height: 46px; padding: 9px 18px; font-size: 18px; }

  /* Remote artwork is optional. On a weak mobile network a branded panel is
     more useful than a single huge initial that looks like a broken card. */
  .home-card .poster-fallback,
  .poster-card .poster-fallback {
    font-size: 0;
    background:
      radial-gradient(circle at 75% 18%, rgba(228, 32, 47, 0.28), transparent 42%),
      linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
  }
  .home-card .poster-fallback::after,
  .poster-card .poster-fallback::after {
    content: 'IPTV UAI';
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  /* ── Browser (Live / Movies / Series / +18) ────────────────────────────── */
  /* Category sidebar → a compact strip at the top (block, NOT a growing flex
     column), so it can never push the content off-screen. Chips scroll
     horizontally; the content area below takes the rest of the height. */
  .sidebar {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 8px 10px 4px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-header { margin-bottom: 6px; }
  .sidebar-title h2 { font-size: 20px; }
  .channel-count { font-size: 13px; }
  .group-list,
  .playlist-tabs {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 2px 0 6px;
  }
  .group-item {
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
  }
  .group-item .group-count { display: none; }
  .group-item .group-name { font-size: 13px; white-space: nowrap; }

  .channel-main {
    flex: 1 1 0; /* basis 0 → fills the height left by the sidebar (matches Home) */
    min-height: 0;
    padding: 8px 10px 64px; /* bottom pad clears the nav bar */
  }
  .channel-search { margin-bottom: 8px; }
  .channel-search-input { font-size: 16px; padding: 10px 12px; }

  /* Grid poster titles: wrap to 2 readable lines instead of one cut-off word. */
  .poster-title {
    font-size: 13px;
    white-space: normal;
    display: -webkit-box;
    /* stylelint-disable-next-line value-no-vendor-prefix, property-no-vendor-prefix */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
  }

  /* Detail (movie/series) stacks the poster above the meta. */
  .series-detail,
  .movie-detail { flex-direction: column; gap: 14px; }
  .series-detail-poster { width: 50vw; max-width: 200px; margin: 0 auto; }
  .series-detail-title { font-size: 22px; }

  /* ── Settings / Account ────────────────────────────────────────────────── */
  .settings-view { padding: 14px 12px 70px; height: 100%; }
  .settings-title { font-size: 26px; }
  .settings-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .playlist-header-row { display: none; } /* column labels make no sense stacked */
  .xtream-fields { flex-direction: column; }
  .settings-input { font-size: 16px; padding: 12px; } /* ≥16px avoids iOS zoom-on-focus */
  .playlist-add-buttons { flex-direction: column; }
  .upload-section { flex-direction: column; }

  .account-box { width: 92vw; padding: 28px 20px; }
  .account-box-wide { min-width: 0; }
  .account-input { font-size: 16px; }
  .account-brand-panel { display: none; }
  .account-login-box { width: 92vw; padding: 30px 22px 24px; }
  .account-login-heading h2 { font-size: 26px; }
  .account-login-heading p { font-size: 15px; }
  .profile-grid { gap: 16px; }
  /* The profile picker used a desktop flex row here. On a phone, three tiles
     plus the action buttons could overflow the account card and make the
     "Quem está assistindo?" screen look broken. Keep two predictable columns
     and let the card scroll vertically when needed. */
  .profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }
  .profile-tile {
    min-width: 0;
    padding: 8px 4px;
  }
  .profile-avatar { width: 88px; height: 88px; font-size: 40px; }
  .profile-name {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .account-actions-row {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .account-actions-row .account-skip {
    flex: 1 1 120px;
    margin-top: 0;
    padding: 9px 8px;
    font-size: 15px;
    text-align: center;
  }

  /* ── Player ────────────────────────────────────────────────────────────── */
  #view-player { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
  .player-sidebar { width: 84vw; }

  /* On-screen display (channel info + transport) scaled down from TV sizes. */
  .player-osd {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
  }
  .osd-channel { gap: 10px; margin-bottom: 6px; }
  .osd-channel-number { font-size: 22px; min-width: 32px; }
  .osd-channel-logo { width: 30px; height: 30px; }
  .osd-channel-name { font-size: 16px; }
  .osd-now-label,
  .osd-next-label { font-size: 13px; }
  .osd-programme-detail { gap: 10px; }
  .osd-programme-icon { width: 60px; height: 40px; }
  .osd-programme-title { font-size: 15px; }
  .osd-programme-time,
  .osd-remaining,
  .osd-time-current,
  .osd-time-end,
  .osd-next-time { font-size: 13px; }
  .osd-description,
  .osd-next-title { font-size: 13px; }
  .osd-message { font-size: 15px; }

  /* Transport buttons: smaller, but still finger-friendly. */
  .osd-transport { gap: 8px; flex-wrap: wrap; }
  .osd-btn { min-width: 46px; height: 44px; font-size: 17px; }
  .osd-btn-play { min-width: 56px; font-size: 20px; }
  .osd-back { min-width: 44px; height: 44px; font-size: 22px; }
  .osd-progress[data-seekbar] { height: 28px; }

  /* ── Landing publica ───────────────────────────────────────────────────────
     Ela nunca teve versao de toque: as classes .public-* foram desenhadas para
     o canvas de 1920 e, com o canvas desligado, 34 elementos ficavam cortados
     a 320px (medido) — cortados, nao rolaveis, porque o body e overflow:hidden.
     Aqui a grade vira coluna unica, os tamanhos fixos viram fluidos e os alvos
     de toque sobem para 48px. */
  .public-landing { padding: 20px 16px 40px; }

  .public-landing img { max-width: 100%; height: auto; }

  .public-header {
    flex-wrap: wrap;
    gap: 14px;
    max-width: none;
  }
  .public-brand { gap: 12px; }
  .public-brand img { width: 44px; height: 44px; }
  .public-brand strong { font-size: 24px; }
  .public-brand span { font-size: 15px; }

  /* O menu quebra para a linha de baixo e ocupa a largura toda, em vez de
     espremer dois botoes ao lado da marca. */
  .public-nav {
    width: 100%;
    gap: 10px;
  }
  .public-nav > * {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
  }

  .public-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .public-copy h1 {
    margin-top: 18px;
    /* 8vw acompanha a tela; o teto de 48px impede titulo gigante no celular e
       o piso de 30px mantem hierarquia sobre o corpo de 17px. */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    font-size: clamp(30px, 8vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }
  .public-copy p { font-size: 17px; }
  .public-eyebrow { font-size: 13px; }

  .public-actions { gap: 12px; margin-top: 24px; }
  .public-actions .public-button {
    flex: 1 1 240px;
    min-height: 52px;
    justify-content: center;
  }
  .public-price-row { gap: 10px; font-size: 15px; }
  .public-hero-downloads { font-size: 15px; margin-top: 14px; }
  .public-hero-downloads > * { min-height: 44px; display: inline-flex; align-items: center; }

  .public-product-card { padding: 12px; }
  /* The five real screenshots used to make one extremely tall card. They are
     still all available, but form a touch-scrollable gallery after the main
     screen so the first fold stays focused on the product and CTA. */
  .public-mini-shots {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .public-mini-shots img { flex: 0 0 76%; }

  /* Grades fixas viram coluna unica; o tablet reabre para duas mais abaixo. */
  .public-trust,
  .public-download-cards,
  .public-device-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }

  /* Item de grid nao encolhe abaixo do proprio conteudo por padrao
     (min-width: auto), entao o rotulo do botao "Baixar para PC (.exe)" fixava
     uma largura minima e o cartao estourava 7px a 320px. */
  .public-download-cards > *,
  .public-trust > *,
  .public-device-grid > *,
  .public-mini-shots > * { min-width: 0; }

  .public-downloads { padding: 22px 14px; }

  /* Tela de conta: a caixa mede 584px de altura. Num aparelho de 568px ela ia
     de -8 a 576 com a view em overflow visible — o formulario ficava cortado e
     inalcancavel, porque o body e overflow:hidden. Agora a view rola. */
  .account-view {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }
  .account-box,
  .account-login-box {
    /* align-self: center na caixa vencia o align-items do container: com a
       caixa mais alta que a tela ela comecava 8px ACIMA do topo, e nao existe
       rolar para cima de zero — o topo do formulario ficava inalcancavel. */
    align-self: flex-start;
    margin: 16px auto;
  }

  /* Modal de screenshot: cabe no viewport e o botao de fechar vira alvo de dedo. */
  .public-lightbox { padding: 12px; }
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  .public-lightbox img { max-width: 100%; max-height: 78dvh; height: auto; }
  .public-lightbox-close { min-width: 48px; min-height: 48px; }

  /* ── Telas legais ──────────────────────────────────────────────────────── */
  .legal-card { padding: 20px 16px; }
}

/* A phone cannot fit nine primary destinations into one fixed bar. Keep every
   destination reachable by horizontal touch scroll instead of shrinking labels
   to the point where "Trocar Lista" and the profile overflow into neighbours.
   This is intentionally below the tablet breakpoint: tablet keeps the fuller
   64px bar defined above, and desktop/TV never match this media query. */
@media (max-width: 640px) {
  .nav-rail {
    height: 64px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .nav-rail-item {
    flex: 0 0 68px;
    min-width: 68px;
    padding: 5px 2px 4px;
  }
  .nav-rail-label {
    max-width: 64px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-rail-item[data-rail="trocar-lista"],
  .nav-rail-profile { flex-basis: 72px; min-width: 72px; }
  .nav-rail-item[data-rail="trocar-lista"] .nav-rail-label,
  .nav-rail-profile .nav-rail-label { font-size: 0; }
  .nav-rail-item[data-rail="trocar-lista"] .nav-rail-label::after {
    content: 'Listas';
    font-size: 11px;
  }
  .nav-rail-profile .nav-rail-label::after {
    content: 'Perfil';
    font-size: 11px;
  }
  .home-view,
  .channel-main,
  .settings-view { padding-bottom: 78px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Tablet (768–1023px). Mesmo layout de toque do telefone, com a folga que a
   tela maior permite: duas colunas onde o telefone usa uma, cartaz maior,
   linha de ajuste voltando a caber lado a lado. Nada aqui alcanca desktop
   (>=1024) nem TV (>=1920).
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Navegacao: a barra inferior ganha altura e rotulo legivel de perto. */
  .nav-rail { height: 64px; }
  .nav-rail-icon { width: 26px; height: 26px; }
  .nav-rail-icon .icon { width: 24px; height: 24px; }
  .nav-rail-label { font-size: 15px; }
  .nav-rail-avatar { width: 26px; height: 26px; font-size: 15px; }

  /* Home: cartaz maior porque cabe, e os atalhos voltam (no telefone eles
     vivem so na barra inferior por falta de espaco). */
  .home-view { padding: 18px 20px 84px; }
  .home-title { font-size: 30px; }
  .home-rail-title { font-size: 20px; }
  .home-card { width: 23vw; max-width: 210px; }
  .home-card-thumb { height: 31vw; max-height: 290px; }
  .home-card-live .home-card-thumb { height: 15vw; max-height: 140px; }
  .home-tiles { display: flex; }

  /* Lista de canais: a faixa de categorias respira. */
  .group-item .group-name { font-size: 15px; }
  .poster-title { font-size: 15px; }

  /* Ajustes: com 768px a linha volta a caber em duas colunas. */
  .settings-view { padding: 20px 24px 84px; }
  .settings-row { flex-direction: row; align-items: center; gap: 16px; }
  .playlist-header-row { display: flex; }
  .xtream-fields { flex-direction: row; }

  /* Conta: caixa com largura de leitura, nao 92vw. */
  .account-box { width: 92vw; max-width: 560px; }
  .account-login-box { width: 92vw; max-width: 520px; }

  /* Landing: duas colunas onde o telefone usa uma. */
  .public-landing { padding: 28px 32px 48px; }
  .public-nav { width: auto; }
  .public-nav > * { flex: 0 0 auto; }
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  .public-copy h1 { font-size: clamp(40px, 6vw, 60px); }
  .public-copy p { font-size: 19px; }
  .public-trust,
  .public-download-cards,
  .public-device-grid { grid-template-columns: repeat(2, 1fr); }
}