/* yt.css — واجهة YouTube داخل CarYou (تصفح/بحث/فيديو/قناة/مكتبة). حديثة، داكنة أولاً، RTL/LTR بالخصائص المنطقية.
   حركات خفيفة فقط (ضغط بطاقة، ظهور sheet، هيكل تحميل) — وتُطفأ مع prefers-reduced-motion (utilities.css). */
.yt-view { position:fixed; inset:0; z-index:150; display:grid; grid-template-columns:1fr; grid-template-rows:1fr auto;
  background:radial-gradient(900px 420px at 80% -10%, rgba(250,10,27,.10), transparent 60%), var(--bg); color:var(--text); }
.yt-view.hidden { display:none !important; }
.yt-side { display:none; }
.yt-col { display:flex; flex-direction:column; min-height:0; min-width:0; }
.yt-head { position:relative; z-index:3; display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px;
  background:linear-gradient(var(--bg) 70%, transparent); }
.yt-iconbtn { flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text);
  display:grid; place-items:center; font-size:17px; cursor:pointer; }
.yt-iconbtn:active, .yt-card:active .yt-thumb, .yt-chip:active { transform:scale(.97); }
.yt-searchbox { position:relative; flex:1; min-width:0; }
.yt-searchbox input { width:100%; height:42px; margin:0; padding:0 44px; border-radius:999px; font-size:15px; }
.yt-searchbox .yt-sicon { position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.yt-searchbox .yt-sclear { position:absolute; inset-inline-end:4px; top:2px; width:40px; height:40px; border:0; background:transparent; color:var(--muted); font-size:15px; cursor:pointer; }
.yt-suggest { position:absolute; inset-inline:0; top:50px; z-index:5; max-height:min(60vh, 420px); overflow:auto; padding:6px;
  background:var(--card-solid, #121a2e); border:1px solid var(--border-strong, var(--border)); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.yt-suggest.hidden { display:none; }
.yt-suggest h4 { margin:8px 10px 4px; font-size:11.5px; color:var(--muted); font-weight:800; letter-spacing:.3px; }
.yt-sug { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:10px; background:transparent;
  color:var(--text); font:inherit; font-size:14.5px; text-align:start; cursor:pointer; }
.yt-sug i { color:var(--muted); width:16px; text-align:center; flex:none; }
.yt-sug span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt-sug .yt-sdel { flex:none; width:32px; height:32px; border-radius:8px; color:var(--muted); display:grid; place-items:center; }
.yt-sug:hover, .yt-sug.active { background:rgba(255,255,255,.08); }
.yt-offline { display:none; margin:0 12px 6px; padding:8px 12px; border-radius:12px; font-size:12.5px; background:rgba(251,191,36,.14); color:var(--warn); }
.yt-offline.show { display:block; }
.yt-main { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 12px 24px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.yt-main:focus { outline:none; }
.yt-chips { display:flex; gap:8px; overflow-x:auto; padding:6px 0 12px; scrollbar-width:none; }
.yt-chips::-webkit-scrollbar { display:none; }
.yt-chip { flex:none; min-height:36px; padding:0 14px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text);
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.yt-chip[aria-pressed="true"], .yt-chip.on { background:var(--grad, var(--accent)); border-color:transparent; color:#fff; }
.yt-sectitle { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 8px; font-size:15px; font-weight:900; }
.yt-sectitle small { color:var(--muted); font-weight:500; font-size:12px; }
.yt-sectitle button { border:0; background:transparent; color:var(--accent); font:inherit; font-size:13px; font-weight:800; cursor:pointer; min-height:36px; }
.yt-grid { display:grid; grid-template-columns:1fr; gap:20px 16px; }
.yt-grid.rows { grid-template-columns:1fr; max-width:900px; gap:10px; }
.yt-card { position:relative; display:flex; flex-direction:column; gap:10px; }
.yt-thumb { position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0b0f1a; transition:transform .12s ease; }
.yt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.yt-dur { position:absolute; inset-inline-end:8px; bottom:8px; padding:1px 6px; border-radius:4px; background:rgba(0,0,0,.8); color:#fff; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; direction:ltr; }
.yt-dur.live { background:var(--accent); }
.yt-meta { display:flex; gap:10px; align-items:flex-start; }
.yt-avatar { flex:none; width:36px; height:36px; border-radius:50%; background:var(--grad, var(--accent)); color:#fff; display:grid; place-items:center; font-weight:900; font-size:15px; overflow:hidden; }
.yt-avatar img { width:100%; height:100%; object-fit:cover; }
.yt-info { flex:1; min-width:0; }
.yt-title { margin:0; font-size:14px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text); text-decoration:none; }
.yt-sub { margin-top:2px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.yt-sub a { color:inherit; text-decoration:none; }
.yt-sub a:hover { color:var(--text); }
.yt-acts { display:flex; gap:4px; flex:none; }
.yt-act { width:44px; height:44px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-size:17px; cursor:pointer; display:grid; place-items:center; }
.yt-act:hover { background:rgba(255,255,255,.08); color:var(--text); }
.yt-act[aria-pressed="true"] { color:var(--accent); }
.yt-act.pop i { animation:ytPop .28s ease-out; }
@keyframes ytPop { 0% { transform:scale(.7); } 60% { transform:scale(1.3); } 100% { transform:scale(1); } }
.yt-rowcard { display:flex; gap:12px; align-items:center; padding:10px; border-radius:16px; background:var(--card); border:1px solid var(--border); color:inherit; text-decoration:none; }
.yt-rowcard .yt-avatar { width:56px; height:56px; font-size:22px; }
.yt-rowcard .yt-pthumb { flex:none; width:112px; aspect-ratio:16/9; border-radius:12px; background:#0b0f1a; overflow:hidden; display:grid; place-items:center; color:var(--muted); }
.yt-rowcard .yt-pthumb img { width:100%; height:100%; object-fit:cover; }
.yt-hscroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.yt-hscroll::-webkit-scrollbar { display:none; }
.yt-hscroll .yt-card { flex:none; width:min(64vw, 240px); }
.yt-skel { border-radius:16px; background:linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 70%); background-size:200% 100%; animation:ytShimmer 1.4s linear infinite; }
.yt-skel.thumb { aspect-ratio:16/9; } .yt-skel.line { height:14px; margin-top:10px; border-radius:7px; } .yt-skel.line.s { width:60%; }
@keyframes ytShimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
.yt-state { text-align:center; padding:44px 16px; color:var(--muted); line-height:1.9; }
.yt-state i { font-size:34px; margin-bottom:10px; display:block; color:var(--muted); }
.yt-state .btn, .yt-state button.yt-retry { margin-top:10px; }
.yt-retry { min-height:44px; padding:0 22px; border:0; border-radius:14px; background:var(--grad, var(--accent)); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.yt-sentinel { height:1px; }
.yt-more-spin { text-align:center; color:var(--muted); font-size:12.5px; padding:14px 0; }

/* ── صفحة الفيديو ── */
.yt-hero { position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#0b0f1a; }
.yt-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.yt-vtitle { margin:14px 0 6px; font-size:19px; font-weight:900; line-height:1.55; }
.yt-chanrow { display:flex; align-items:center; gap:10px; margin:10px 0; color:inherit; text-decoration:none; min-height:44px; }
.yt-cta { display:flex; gap:8px; margin:12px 0; }
.yt-send { flex:1; min-height:52px; border:0; border-radius:16px; background:var(--grad, var(--accent)); color:#fff; font:inherit; font-size:16px; font-weight:900; cursor:pointer;
  box-shadow:0 12px 28px rgba(250,10,27,.28); }
.yt-send:disabled { opacity:.78; cursor:wait; }
.yt-send.is-sending{opacity:1;background:linear-gradient(90deg,#e50914 0%,#ff3b30 28%,#ff9f0a 52%,#34c759 76%,#16a34a 100%);background-size:260% 100%;box-shadow:0 12px 30px rgba(34,197,94,.20);animation:ytSendFlow 1.65s ease-in-out infinite alternate}
.yt-send.is-sent{opacity:1;background:#22c55e;box-shadow:0 12px 30px rgba(34,197,94,.34);transform:translateY(-1px)}
.yt-send.is-error{opacity:1;background:#dc2626}
@keyframes ytSendFlow{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.yt-send.is-sending{animation:none;background:#f59e0b}}
.yt-q { flex:none; width:96px; min-height:52px; margin:0; padding:0 10px; border-radius:16px; }
.yt-toolbar { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:10px 0 14px; }
.yt-tool { min-height:56px; border:1px solid var(--border); border-radius:14px; background:var(--card); color:var(--text); font:inherit; font-size:12px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.yt-tool i { font-size:17px; }
.yt-tool[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.yt-panel { padding:14px; border-radius:16px; border:1px solid var(--border-strong, var(--border)); background:var(--card); margin:10px 0; }
.yt-step { display:flex; align-items:center; gap:10px; font-size:13.5px; padding:3px 0; color:var(--muted); }
.yt-step.done { color:var(--text); } .yt-step.done i { color:var(--ok); }
.yt-step.err { color:var(--err); }
.yt-panel .yt-pbtns { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.yt-pbtn { min-height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--border-strong, var(--border)); background:rgba(255,255,255,.06); color:var(--text); font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.yt-pbtn.primary { background:var(--grad, var(--accent)); border-color:transparent; color:#fff; }
.yt-desc { margin:12px 0; padding:12px 14px; border-radius:14px; background:var(--card); font-size:13.5px; line-height:1.85; white-space:pre-line; overflow-wrap:anywhere; }
.yt-desc.clamp { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ── القناة ── */
.yt-chhead { display:flex; align-items:center; gap:14px; margin:6px 0 10px; }
.yt-chhead .yt-avatar { width:76px; height:76px; font-size:30px; }
.yt-chhead h1 { margin:0; font-size:20px; font-weight:900; }

/* ── Bottom sheet ── */
.yt-sheetov { position:fixed; inset:0; z-index:160; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; }
.yt-sheetov.hidden { display:none; }
.yt-sheet { width:100%; max-width:520px; max-height:82vh; overflow:auto; padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--card-solid, #121a2e); border:1px solid var(--border-strong, var(--border)); border-bottom:0; border-radius:22px 22px 0 0; animation:ytSheetIn .22s ease-out; }
@keyframes ytSheetIn { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.yt-grab { width:42px; height:4px; border-radius:99px; background:var(--border-strong, var(--border)); margin:6px auto 10px; }
.yt-sheet h3 { margin:6px 4px 10px; font-size:16px; font-weight:900; }
.yt-srow { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 10px; border:0; border-radius:12px; background:transparent; color:var(--text);
  font:inherit; font-size:15px; font-weight:600; text-align:start; cursor:pointer; }
.yt-srow:hover { background:rgba(255,255,255,.07); }
.yt-srow i { width:22px; text-align:center; color:var(--muted); }
.yt-srow .yt-check { margin-inline-start:auto; width:24px; height:24px; border-radius:8px; border:2px solid var(--border-strong, var(--border)); display:grid; place-items:center; font-size:12px; color:transparent; }
.yt-srow[aria-checked="true"] .yt-check { background:var(--accent); border-color:var(--accent); color:#fff; }
.yt-srow small { color:var(--muted); font-weight:500; }
.yt-newlist { display:flex; gap:8px; margin:10px 0 4px; }
.yt-newlist input { margin:0; flex:1; width:auto; min-width:0; height:46px; }
.yt-newlist .yt-retry { flex:none; margin:0; }
.yt-cancel { width:100%; min-height:48px; margin-top:8px; border:1px solid var(--border); border-radius:14px; background:transparent; color:var(--muted); font:inherit; font-weight:700; cursor:pointer; }
.yt-switchrow { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 10px; }

/* ── التنقل السفلي (هاتف) ── */
.yt-bottom { display:flex; border-top:1px solid var(--border); background:var(--card-solid, #121a2e); padding-bottom:env(safe-area-inset-bottom,0px); }
.yt-bottom a, .yt-bottom button { flex:1; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent;
  color:var(--muted); font:inherit; font-size:10.5px; font-weight:700; text-decoration:none; cursor:pointer; }
.yt-bottom i { font-size:19px; }
.yt-bottom .on { color:var(--accent); }

/* ── الشاشات المتوسطة والكبيرة ── */
@media (min-width:640px) { .yt-grid:not(.rows) { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .yt-main { padding-inline:20px; } }
@media (min-width:900px) {
  .yt-view { grid-template-columns:240px 1fr; grid-template-rows:1fr; }
  .yt-bottom { display:none; }
  .yt-side { display:flex; flex-direction:column; gap:4px; padding:18px 12px; border-inline-end:1px solid var(--border); background:rgba(0,0,0,.18); overflow-y:auto; }
  .yt-side .yt-brand { display:flex; align-items:center; gap:10px; margin:0 8px 14px; font-weight:900; font-size:17px; }
  .yt-side .yt-brand i { color:var(--accent); font-size:22px; }
  .yt-side a, .yt-side button { display:flex; align-items:center; gap:12px; min-height:46px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--text);
    font:inherit; font-size:14.5px; font-weight:700; text-decoration:none; cursor:pointer; text-align:start; }
  .yt-side a:hover, .yt-side button:hover { background:rgba(255,255,255,.07); }
  .yt-side .on { background:rgba(250,10,27,.14); color:var(--accent); }
  .yt-side hr { border:0; border-top:1px solid var(--border); margin:8px 0; width:100%; }
  .yt-side i { width:20px; text-align:center; }
  .yt-head { padding-inline:20px; }
}
:focus-visible { outline-offset:2px; }
.yt-view :focus-visible { outline:2px solid var(--accent); }
[data-theme="light"] .yt-thumb, [data-theme="light"] .yt-hero { background:#dfe5f1; }
[data-theme="light"] .yt-skel { background:linear-gradient(100deg, rgba(15,23,42,.06) 30%, rgba(15,23,42,.13) 50%, rgba(15,23,42,.06) 70%); background-size:200% 100%; }
[data-theme="light"] .yt-sheet, [data-theme="light"] .yt-suggest, [data-theme="light"] .yt-bottom { background:#fff; }
.topbar .menu-btn#ytNavBtn i { color:var(--accent); }

@media (min-width:900px) and (max-width:1199px) {          /* الشريط الجانبي المصغّر: أيقونات فوق نص صغير */
  .yt-view { grid-template-columns:78px 1fr; }
  .yt-side { padding-inline:6px; align-items:stretch; }
  .yt-side .yt-brand span { display:none; }
  .yt-side a, .yt-side button { flex-direction:column; gap:4px; min-height:62px; padding:8px 2px; font-size:10.5px; text-align:center; justify-content:center; }
}

/* ── عناصر مضافة ── */
.yt-chips.quick { padding-top:0; }
.yt-chip.ghost { background:transparent; font-weight:500; color:var(--muted); }
.yt-chip.ghost[aria-pressed="true"] { background:var(--grad, var(--accent)); border-color:transparent; color:#fff; font-weight:600; }
.yt-chip i { margin-inline-end:4px; font-size:12px; }
.yt-note { margin:0 0 10px; padding:8px 12px; border-radius:10px; font-size:12.5px; color:var(--warn); background:rgba(251,191,36,.12); }
.yt-list { display:flex; flex-direction:column; gap:8px; }
.yt-listrow { display:flex; align-items:center; gap:6px; }
.yt-listrow .yt-rowcard { flex:1; min-width:0; }
.yt-linkbtn { border:0; background:transparent; color:var(--accent); font:inherit; font-weight:800; font-size:13px; min-height:36px; cursor:pointer; padding:0 4px; }
.yt-video { max-width:900px; margin:0 auto; }
.yt-switchrow { cursor:pointer; }
.yt-switchrow input[type="checkbox"] { flex:none; width:22px; height:22px; margin:0; padding:0; accent-color:var(--accent); }
.yt-sheet .yt-srow[role="button"], .yt-list .yt-srow { border:1px solid var(--border); background:var(--card); }
.yt-list .yt-srow span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt-hscroll .yt-thumb { border-radius:12px; }
.yt-avatar img { border-radius:50%; }
.yt-view input[type="search"]::-webkit-search-cancel-button { display:none; }

/* ── تصادم أسماء مع بطاقة البحث السريع القديمة (features.css: .yt-thumb/.yt-info) — نُلغي أثرها داخل واجهة YouTube ── */
.yt-view .yt-thumb { width:auto; flex:initial; }
.yt-view .yt-info { display:block; flex:1; min-width:0; gap:0; }

/* شريط التصنيفات يلتصق أعلى المحتوى عند التمرير (كما في يوتيوب) */
.yt-main > .yt-chips:first-child { position:sticky; top:-4px; z-index:2; margin-inline:-12px; padding:8px 12px 10px; background:var(--bg); }
@media (min-width:640px) { .yt-main > .yt-chips:first-child { margin-inline:-20px; padding-inline:20px; } }