/* Navbar responsivo */

/* Esconde o nome no navbar em telas pequenas, mostra a partir de 640px */
.nb-name {
  display: none;
}
@media (min-width: 640px) {
  .nb-name {
    display: inline;
    font-weight: 600;
  }
}
/****************************
 * VARS + BASE DO APP
 ****************************/
:root{
  --bg:#0B1220;
  --card:#141b2d;
  --txt:#e7eefc;
  --accent:#4da3ff;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--txt);
}
a{ color:var(--txt); text-decoration:none; opacity:.95; }
a:hover{ opacity:1; }

/* NAV */
.nav{
  display:flex; gap:16px; align-items:center;
  padding:12px 16px; background:#0f172a; position:sticky; top:0; z-index:5;
}
.nav .spacer{ flex:1; }
.nav button{
  background:transparent; border:1px solid #243a53; color:var(--txt);
  padding:6px 10px; border-radius:8px; cursor:pointer;
}

/* LAYOUT */
.container{ max-width:1100px; margin:24px auto; padding:0 16px; color:var(--txt); }
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}
.card{
  background:var(--card);
  border-radius:12px;
  padding:12px;
  box-shadow: 0 10px 16px rgba(0,0,0,.25);
}

/* espaçamento entre views e likes */
.card span {
  margin-right: 6px;
}

.thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:8px;
  background:#081a37;
  object-fit:cover;
}
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.badge{ font-size:12px; opacity:.85; }
hr{ border:0; border-top:1px solid #223; margin:14px 0; }

input, button, textarea{
  padding:10px 12px; border:1px solid #243a53; border-radius:8px;
  background:#0e162b; color:#fff;
}
button{ cursor:pointer; }
button[disabled]{ opacity:.6; cursor:not-allowed; }

/****************************
 * TAGS (chips – home + watch)
 ****************************/
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tags .chip{
  background:#1e2a42;
  padding:6px 10px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
  font-size:12px;
}
.card .tags{ margin-top:8px; }
.card .tags .chip{ font-size:11px; }

/****************************
 * PLAYER (overlay minimal)
 ****************************/
#player-box{
 position: relative;
 width: 100%;
 max-width: 960px;
 margin: 0 auto 24px;
 border-radius: 12px;
 overflow: hidden;
 background: #000;
 aspect-ratio: 16/9;
}

#player-box video{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  background:#000;
}

/* barra de controlos “flutuante” */
.player-controls.overlay{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:8px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85));
  border-radius:8px;

  display:flex;
  align-items:center;
  gap:12px;

  z-index: 2;
}

/* botões (ícones) */
.btn-icon{
  background: rgba(255,255,255,.12);
  border:0; border-radius:8px;
  padding:6px 10px;
  color:#fff;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn-icon:hover{ background: rgba(255,255,255,.25); transform: scale(1.06); }

/* ===== PROGRESSO slim ===== */
.progress-wrap{
  position:relative;
  flex: 1;
  height: 18px;
  min-width: 160px; /* corrigido (:) -> (;) */
}
.progress-wrap.slim{ height:16px; }

.progress-track{
  position:relative;
  width:100%; height:4px;
  background: rgba(255,255,255,.25);
  border-radius:9999px;
  overflow:hidden;
}
.progress-buffer{
  position:absolute; inset:0;
  width:var(--buffer,0%); height:100%;
  background: rgba(255,255,255,.2);
  border-radius:inherit;
}
.progress-fill{
  position:absolute; inset:0;
  width:var(--fill,0%); height:100%;
  background: #4da3ff;
  border-radius:inherit;
}
.progress-thumb{
  position:absolute; top:50%;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid #4da3ff;
  transform: translate(-50%,-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;
  transition:.08s ease;
}
.progress-wrap:hover .progress-thumb{ transform: translate(-50%,-50%) scale(1.06); }

/* input invisível por cima para drag/click */
.progress-input{
  position:absolute; inset:-4px 0;
  width:100%; height:calc(100% + 8px);
  appearance:none; background:transparent; cursor:pointer; opacity:0;
}

/* tempo */
.time{ min-width: 72px; text-align: center; font-size:12px; opacity: .85; color:rgba(255,255,255,.65); } /* corrigido 'cneter' */

/* ===== Volume (range com preenchimento) ===== */
.volume-wrap{ width:120px; }
.volume-wrap .range{
  appearance:none; width:100%; height:8px; border-radius:9999px;
  outline:none; background: linear-gradient(90deg, #4da3ff var(--fill,0%), rgba(255,255,255,.2) var(--fill,0%));
}
.volume-wrap .range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid #4da3ff; margin-top:-4px;
  cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.volume-wrap .range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid #4da3ff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.volume-wrap .range::-moz-range-track{
  height:8px; border-radius:9999px; background: rgba(255,255,255,.25);
}
.volume-wrap .range:active::-webkit-slider-thumb{ transform: scale(1.05); }

/****************************
 * WATCH: tags em LINHA nas cards de “Relacionados”
 ****************************/
.related .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.related .tags .chip{ background:#1e2a42; }
.related .card .tags{ margin-top:6px; }

/****************************
 * UPLOAD – layout vertical e inputs full-width
 ****************************/
.upload h2{ margin-top:0; }
.upload_form{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
  max-width: 820px;
}
.upload_form label{ display:block; }
.upload_form span{ display:block; margin-bottom:6px; opacity:.85; font-size:14px; }
.upload_form input[type="text"],
.upload_form textarea,
upload_form input[type="file"]{ width:100%; }

/* barra de progresso do upload (mesma linguagem visual do player) */
.upload .bar{
  height:10px; background:#1b2540; border-radius:6px; overflow:hidden;
}
.upload .bar > div{
  height:100%; background:#4da3ff; width:0%;
}

/****************************
 * HOME (layout desktop + mobile)
 ****************************/
.page-home {
  display: grid;
  grid-template-columns: 1fr 320px; /* MAIN à esquerda | sidebar à direita (desktop) */
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .page-home {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-home .main {
    order: 1;
    width: 100%;
  }
  .page-home .sidebar {
    order: 2;
    width: 100%;
  }
  .page-home .sidebar input[type="search"],
  .page-home .sidebar input[type="text"],
  .page-home .sidebar .search,
  .page-home .sidebar .search input,
  .page-home .sidebar .search button {
    width: 100%;
    box-sizing: border-box;
  }
  .page-home h1,
  .page-home h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 8px 0;
  }
  .page-home .card {
    padding: 12px;
    border-radius: 12px;
  }
}

/****************************
 * SEARCH (desktop) – largura maior e ícone alinhado
 ****************************/
.searchbox{
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 12px 0;
}
.searchbox .search-input{
  width: 100%;
  padding-left: 40px;
}
.searchbox .search-ico{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: #fff;
  pointer-events: none;
  opacity: .9;
}
.searchbox .search-ico{ fill:#fff !important; }

/****************************
 * AJUSTES MÓVEL (player e pesquisa)
 ****************************/
@media (max-width:640px){
  .volume-wrap{ width:90px; }
  .player-controls.overlay{
  position: absolute;
  left:12px;
  right:12px;
  bottom:24px;
  padding:8px;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
  border-radius: 8px;
  display: flex; align-items: center; gap: 12px;
  z-index: 2;
  }

  /* === Forçar o MESMO player no fullscreen e esconder a barra nativa === */

  /* Container fullscreen */
  #player-box:fullscreen,
  #player-box:-webkit-full-screen,
  #player-box:-moz-full-screen,
  #player-box:-ms-fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Vídeo ocupa o container (sem controles nativos) */
  #player-box:fullscreen video,
  #player-box:-webkit-full-screen video,
  #player-box:-moz-full-screen video,
  #player-box:-ms-fullscreen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Esconde controles nativos */
  #player-box video::-webkit-media-controls { display: none !important; }
  #player-box video::-moz-media-controls { display: none !important; }
  #player-box video::-ms-media-controls { display: none !important; }

  /* Barra personalizada — igual à normal */
  #player-box:fullscreen .player-controls.overlay,
  #player-box:-webkit-full-screen .player-controls.overlay,
  #player-box:-moz-full-screen .player-controls.overlay,
  #player-box:-ms-fullscreen .player-controls.overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    pointer-events: auto;
  }

  /* Barra de pesquisa (reafirma 100% no mobile) */
  .searchbox{
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 12px 0;
  }
  .searchbox .search-input{
    width: 100%;
    padding-left: 36px;
  }
  .searchbox .search-ico{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: #fff;
    pointer-events: none;
    opacity: .9;
  }
  .searchbox .search-ico{ fill:#fff !important; }
}

/* ===== MOBILE – forçar 1 coluna e esconder a coluna da direita ===== */
@media (max-width: 768px){

  /* container mais solto */
  .container{ max-width:100% !important; padding: 0 12px !important; }

  /* qualquer grade/row vira 1 coluna */
  .grid,
  .row,
  .columns,
  .layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* tentar apanhar nomes comuns de coluna direita/aside */
  .aside,
  .right,
  .sidebar,
  [class*="aside"],
  [class*="right"],
  [class*="sidebar"] {
    display: none !important;
  }

  /* cartões ocupam a largura toda */
  .card{ width:100% !important; }

  /* procura ocupa 100% */
  .searchbox,
  .searchbox .search-input{
    max-width:100% !important;
    width:100% !important;
  }

  /* === substituição SEGURA do antigo nth-child para o Home === */
  .page-home{ grid-template-columns: 1fr; }
  .page-home .sidebar{ display:none !important; }
  .page-home .main{ width:100%; }

  /* === Mostrar o texto do perfil (“Eu”) no mobile === */
  .nb-name{
    display: inline !important;
    white-space: nowrap;
  }
}

/* === ÚNICA ADIÇÃO PEDIDA: garantir 1 coluna no mobile (cards em tela cheia) === */
@media (max-width: 768px){
  .grid{ display:grid !important; grid-template-columns: 1fr !important; }
}

/* ===== WATCH (MOBILE) — manter o player dentro do “cartão” ===== */
@media (max-width: 768px){
  /* respiro lateral e limite de largura no watch */
  .watch .container{ padding: 0 12px; }

  /* player como card, sem “sangrar” */
  #player-box{
    max-width: 100%;
    width: 100%;
    margin: 8px 0 16px;
    border-radius: 12px;
    overflow: hidden;                 /* corta fuga dos controlos */
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 16px rgba(0,0,0,.25);
    background: #000;
  }

  /* controlos mais dentro do cartão */
  #player-box .player-controls.overlay{
    left: 8px;
    right: 8px;
    bottom: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
  }

  /* vídeo nunca passa do container */
  #player-box video{
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }
}

/* ======== NOVO: espaçamento correto do texto abaixo do player (MOBILE) ======== */
@media (max-width: 768px){
  /* seleciona o bloco imediatamente a seguir ao player */
  #player-box + *{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;      /* espaço entre itens */
    margin-top: 8px !important;    /* respiro abaixo do vídeo */
    line-height: 1.45 !important;  /* altura das linhas */
    letter-spacing: 0.1px !important;
  }
  #player-box + * > *{
    margin: 0 !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
  }
}