/* ===============================
   Tech14 YTB Player – DARK THEME ONLY
   =============================== */

:root{
  --bg:#0b1020;          /* nền tổng */
  --card:#0f172a;        /* thẻ / panel */
  --txt:#e5e7eb;         /* chữ chính */
  --muted:#94a3b8;       /* chữ phụ */
  --line:#1e293b;        /* viền */
  --acc:#22c55e;         /* primary */
  --danger:#ef4444;      /* danger */
  --focus:#60a5fa;       /* ring focus */
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:#0b1020;color:#e5e7eb}
body{
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--txt);
}

/* layout */
.wrap{
  max-width:1200px;
  margin:max(16px, env(safe-area-inset-top)) auto max(16px, env(safe-area-inset-bottom));
  padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media(max-width:1000px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}
.divider{border:0;border-top:1px solid var(--line);margin:12px 0}

.grow{flex:1;min-width:0}
.small{font-size:12px}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* inputs & buttons */
input,select,button,textarea{

  border-radius:10px;border:1px solid #334155;
  background:#0a1326;color:var(--txt);
  padding:10px 12px;min-height:40px;font:inherit;
}
button{cursor:pointer;transition:filter .15s ease, transform .02s ease}
button:active{transform:translateY(1px)}
button.primary{background:var(--acc);border-color:transparent;color:#06260f;font-weight:600}
button.ghost{background:transparent;border:1px dashed #334155;color:var(--txt)}
button.danger{background:var(--danger);border:none;color:#fff}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#0a1326;border:1px solid #334155;white-space:nowrap}

/* focus ring */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  box-shadow:0 0 0 2px rgba(96,165,250,.25);
}

/* player box */

/* Khung player 16:9, chống bị 0px */
.yt{
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  /* nếu dùng grid/flex, đảm bảo khung có width thực */
}
.yt::before{
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}
/* Iframe phủ kín khung, ưu tiên vẽ */
.yt iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  /* Fix đen màn hình do GPU một số máy Windows */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}


/* favorites list */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.item{background:#0a1326;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;gap:10px}
.thumb{width:96px;height:56px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:#0b0f1a}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.title{font-weight:600;line-height:1.35}

/* leaderboard */
.pl{display:flex;flex-direction:column;gap:8px}
.pl-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px dashed #334155;background:#0a1326}

/* history carousel */
.carousel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#0a1326;padding:8px 4px;margin-top:6px}
.carousel-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:6px;-ms-overflow-style:none;scrollbar-width:none
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-card{
  scroll-snap-align:start;background:#0a1326;border:1px solid var(--line);
  border-radius:12px;display:grid;grid-template-columns:110px 1fr;gap:10px;
  padding:10px;min-height:72px
}
.carousel-thumb{width:110px;height:62px;border-radius:8px;overflow:hidden;background:#0b0f1a}
.carousel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-title{font-weight:600;line-height:1.25}
.carousel-meta{color:var(--muted);font-size:12px;margin-top:6px}

/* search suggest dropdown */
.card.row{position:relative} /* anchor */
.suggest-box{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:#0a1326;border:1px solid #334155;border-radius:10px;
  max-height:320px;overflow:auto;z-index:999;display:none;box-shadow:var(--shadow)
}
.suggest-item{display:flex;gap:8px;padding:8px;align-items:center;cursor:pointer;user-select:none}
.suggest-item:hover{background:#132036}
.suggest-item img{width:80px;height:45px;border-radius:6px;object-fit:cover;display:block}
.suggest-title{font-size:14px;color:var(--txt);font-weight:500}
.suggest-channel{font-size:12px;color:var(--muted)}

/* animations (respect reduced motion) */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .35s ease forwards;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  .fade-in{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* touch targets */
@media (pointer:coarse){
  button,.pill{min-height:44px}
}

/* RTL support */
[dir="rtl"] .row{direction:rtl}
[dir="rtl"] .carousel-track{direction:rtl}
[dir="rtl"] .suggest-box{right:0;left:auto}

/* print */
@media print{
  .yt,.carousel,.list,.pl,.row button{display:none!important}
  .card{box-shadow:none}
}

/* scrollbar (WebKit) */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#475569;border-radius:10px}
  ::-webkit-scrollbar-track{background:transparent}
}
/* ---------- Mobile responsive adjustments ---------- */
@media (max-width: 768px) {
  /* Hàng chứa ô tìm kiếm và nút */
  .card.row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Ô nhập link YouTube dài 100% */
  #url {
    width: 100%;
    flex: 1 1 auto;
    font-size: 16px;
  }

  /* Nút “Tải & phát” to dễ bấm */
  #loadBtn {
    width: 100%;
    font-size: 15px;
    padding: 12px;
  }

  /* Ẩn nút tải video trên mobile */
  #dlBtn {
    display: none !important;
  }

  /* Giãn nút ghost (ví dụ “Dán”) nếu cần */
  #pasteBtn {
    flex: 0 0 auto;
  }

  /* Dropdown gợi ý tìm kiếm full width */
  .suggest-box {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
  }

  /* Lịch sử / top thu gọn */
  .grid {
    grid-template-columns: 1fr;
  }

  /* Ẩn đổ bóng nặng trên mobile (hiệu năng) */
  .card {
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
  }
}

@media (pointer: coarse) {
  #dlBtn {
    display: none !important;
  }
}
/* ---------- Responsive mobile layout ---------- */
@media (max-width: 768px) {
  /* Bố cục dọc */
  .card.row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Ô nhập link chiếm toàn chiều ngang */
  #url {
    width: 100%;
    flex: 1 1 auto;
    font-size: 16px;
  }

  /* Nút "Tải & phát" to hơn dễ bấm */
  #loadBtn {
    width: 100%;
    font-size: 15px;
    padding: 12px;
  }

  /* Ẩn nút "Dán" và "Tải video" */
  #pasteBtn,
  #dlBtn {
    display: none !important;
  }

  /* Dropdown gợi ý tìm kiếm full width */
  .suggest-box {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
  }

  /* Grid 1 cột cho phần nội dung */
  .grid {
    grid-template-columns: 1fr;
  }

  /* Giảm bóng để tối ưu hiệu năng mobile */
  .card {
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
}

/* Ẩn trên mọi thiết bị cảm ứng (coarse pointer) */
@media (pointer: coarse) {
  #pasteBtn,
  #dlBtn {
    display: none !important;
  }
}

  /* Đảm bảo khung 16:9 và click được, kể cả khi app.js chưa tải */
  .yt { position:relative; padding-top:56.25%; background:#000; border-radius:14px; overflow:hidden; }
  .yt > iframe { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:auto; }


  /* Player pending overlay (hiện mặc định, ẩn khi app2.js sẵn sàng) */
  #playerWrap { position:relative; }
  #playerPending{
    position:absolute; inset:0; display:flex; flex-direction:column;
    gap:10px; align-items:center; justify-content:center;
    background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.35));
    color:#fff; font-weight:600; z-index:5;
    backdrop-filter: blur(2px);
  }
  #playerPending.hidden{ display:none; }
  .spinner{
    width:28px; height:28px; border-radius:50%;
    border:3px solid rgba(255,255,255,.25);
    border-top-color:#fff; animation: spin 0.8s linear infinite;
  }
  @keyframes spin{ to { transform: rotate(360deg) } }

  /* Toast giữa màn hình (đã dùng ở lần trước, để tính nhất quán) */
  #toastHost{
    position: fixed; z-index: 9999; left:50%; top:50%;
    transform: translate(-50%, -50%);
    display: grid; gap: 8px; pointer-events: none; place-items:center;
  }
  .toast{
    pointer-events:auto; min-width:280px; max-width:min(92vw,520px);
    background:#1f1f1f; color:#fff; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35);
    padding:10px 14px; display:flex; gap:10px; align-items:flex-start;
    animation: toast-in .18s ease-out both;
  }
  .toast--error{ background:#2a1b1b; border-color:#ff4d4f33; }
  .toast--info { background:#16212a; border-color:#2b7cff33; }
  .toast__icon{ font-size:18px; line-height:1; margin-top:1px; opacity:.9 }
  .toast__title{ font-weight:700; margin:0 0 2px }
  .toast__msg{ margin:0; opacity:.9; font-size:14px }
  .toast__close{ appearance:none; border:0; background:transparent; color:#fff; opacity:.7; cursor:pointer; font-size:18px; padding:0 2px; }
  .toast__close:hover{ opacity:1 }
  @keyframes toast-in{
    from{ transform: translate(-50%, calc(-50% - 8px)); opacity:0 }
    to  { transform: translate(-50%, -50%); opacity:1 }
  }
  .shake{ animation: shake .30s ease-in-out }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
  .input-error{ outline:2px solid #ff4d4f; outline-offset:2px; }

  /* Search suggest skeleton */
  .suggest-box{ position:relative; }
  .suggest-loading{
    display:grid; gap:8px; padding:8px; background:#111; border:1px solid #222; border-radius:12px;
  }
  .skel{ position:relative; overflow:hidden; background:#222; border-radius:8px; }
  .skel::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: translateX(-100%); animation: shimmer 1.2s infinite;
  }
  @keyframes shimmer{ 100%{ transform: translateX(100%); } }
  .skel-row{ display:flex; gap:10px; align-items:center; padding:8px; }
  .skel-thumb{ width:120px; height:68px; border-radius:8px; }
  .skel-lines{ flex:1; display:grid; gap:6px; }
  .skel-line{ height:12px; border-radius:6px; }
  /* LoadBtn busy */
  .btn-busy{ position:relative; pointer-events:none; opacity:.75 }
  .btn-busy::after{
    content:""; position:absolute; right:10px; top:50%; margin-top:-8px; width:16px; height:16px;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
    animation: spin .8s linear infinite;
  }