/* CarYou v6 — responsive surfaces, safe areas, and a compact floating YouTube dock. */
:root { --ui-panel:#131a2b; --ui-panel-soft:#182136; --ui-shadow:0 14px 38px rgba(0,0,0,.18); --muted:#a4afc6; --ui-ease:cubic-bezier(.22,.75,.25,1); }
html[data-theme="light"] { --ui-panel:#fff; --ui-panel-soft:#f1f4f9; --ui-shadow:0 10px 30px rgba(20,34,59,.07); --muted:#556178; }
body { padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); }
body::before,body::after { display:none; }
.wrap { max-width:680px; }
.topbar { position:sticky; top:env(safe-area-inset-top,0px); z-index:30; flex-wrap:wrap; gap:12px; margin-bottom:24px; padding:10px; border:1px solid var(--border); border-radius:24px; background:var(--ui-panel); box-shadow:var(--ui-shadow); }
.topbar::before { content:""; position:absolute; top:calc(-1 * env(safe-area-inset-top,0px)); height:env(safe-area-inset-top,0px); inset-inline:-20px; background:var(--bg); }
.brand { gap:8px; }
.brand small { font-size:12px; }
.menu-btn,.icon-btn { width:44px; height:44px; border-radius:15px; }
.menu-btn i,.icon-btn i,.yt-view i { margin-inline-end:0; }
.toggles { margin-inline-start:auto; gap:6px; }
.account-actions { display:flex; position:relative; align-items:center; gap:8px; }
.user-chip { color:var(--text); font:inherit; cursor:pointer; min-height:44px; padding:4px; border-color:var(--border-strong); background:var(--ui-panel-soft); }
.user-chip .avatar { width:34px; height:34px; font-size:15px; }
#whoTop { display:none; }
.profile-menu { position:absolute; inset-inline-end:0; top:calc(100% + 12px); width:min(280px,calc(100vw - 32px)); z-index:60; padding:8px; border:1px solid var(--border-strong); border-radius:20px; background:var(--ui-panel); box-shadow:0 18px 50px rgba(0,0,0,.28); animation:profileIn .18s var(--ui-ease); }
.profile-heading { padding:12px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.profile-heading strong,.profile-heading small { display:block; }
.profile-heading small { margin-top:4px; color:var(--muted); font-size:13px; }
.profile-menu button { width:100%; min-height:48px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:0; border-radius:12px; background:transparent; color:var(--text); text-align:start; font:inherit; cursor:pointer; }
.profile-menu button:hover { background:var(--ui-panel-soft); }
.profile-menu button:last-child { color:var(--err); }
@keyframes profileIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
#appView > .card { margin-block:0 20px; border-radius:24px; padding:24px; background:var(--ui-panel); backdrop-filter:none; box-shadow:var(--ui-shadow); }
#appView .hero-card { border-color:rgba(250,10,27,.23); background:linear-gradient(145deg,rgba(250,10,27,.04),transparent 65%),var(--ui-panel); }
.hero-title { font-size:19px; }
.welcome-strip { margin-block:4px 20px; gap:12px; }
.welcome-strip h2 { font-size:22px; }
.welcome-strip h2 .fa-hand { display:none; }
.warn-box { background:var(--ui-panel-soft); border:1px solid var(--border); color:var(--muted); font-size:13px; line-height:1.9; }
.field input,input,select { font-size:16px; }
button,a,input,select,summary { touch-action:manipulation; }
button:not(:disabled),a,summary { -webkit-tap-highlight-color:rgba(127,127,127,.08); }
button:active { opacity:.8; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.source-details { margin-top:10px; max-width:100%; border-top:1px solid var(--border); padding-top:8px; text-align:start; }
.source-details summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; cursor:pointer; color:var(--muted); list-style:none; font-size:13px; }
.source-details summary::-webkit-details-marker { display:none; }
.source-details summary::after { content:"›"; flex:none; font:24px system-ui; transition:transform .18s; }
.source-details[open] summary::after { transform:rotate(90deg); }
.source-details summary i { display:none; }
.source-details span,.source-details a { overflow-wrap:anywhere; direction:ltr; unicode-bidi:plaintext; font-size:12px; line-height:1.8; }
.source-details .source-name { direction:inherit; font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer { width:min(400px,92vw); inset-block:0; background:var(--ui-panel); border-radius:0 28px 28px 0; box-shadow:20px 0 70px rgba(0,0,0,.3); padding-top:env(safe-area-inset-top,0px); }
html[dir="rtl"] .drawer { left:auto; right:0; border-radius:28px 0 0 28px; transform:translateX(105%); }
html[dir="rtl"] .drawer.open { transform:translateX(0); }
.drawer-overlay { background:rgba(3,7,15,.72); backdrop-filter:blur(7px); }
.drawer-head { padding:18px 20px; }
.drawer-head b { font-size:19px; }
.drawer-body { padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px)); overscroll-behavior:contain; }
.drawer-section { padding:16px; margin-bottom:16px; border:1px solid var(--border); border-radius:20px; background:var(--ui-panel-soft); }
.drawer-section > h3 { color:var(--text); font-size:15px; letter-spacing:0; gap:6px; }
.drawer-section > h3 .muted { margin-inline-start:auto; }
.drawer-section .controls-row { gap:8px; }
.drawer-section .btn-soft { min-height:44px; }
.yt-quick-search { position:relative; z-index:4; }
.yt-quick-search .yt-suggest { top:calc(100% + 8px); background:var(--ui-panel); }
.yt-quick-search .yt-sug { font-size:15px; }
#ytCard { position:relative; }
#ytCard:focus-within { z-index:5; }
#ytList .yt-item { padding:12px 0; gap:12px; }
#ytList .yt-t { font-size:15px; line-height:1.55; }
#ytList .yt-b button { min-height:44px; }
.image-fallback { object-fit:contain!important; padding:24px; background:var(--ui-panel-soft); }
.yt-avatar .image-fallback { padding:7px; }
/* YouTube is an opaque app page. The dashboard cannot show through it. */
.yt-view { height:100vh; height:100dvh; width:100%; isolation:isolate; background:var(--bg); grid-template-rows:1fr; }
body.yt-active > .wrap { visibility:hidden; }
.yt-view .yt-head { padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px)); background:var(--bg); border-bottom:1px solid var(--border); gap:8px; }
.yt-view .yt-iconbtn { border-radius:15px; background:var(--ui-panel); width:44px; height:44px; }
.yt-view .yt-searchbox input { height:46px; font-size:16px; background:var(--ui-panel); border-radius:17px; }
.yt-view .yt-searchbox .yt-sclear { top:1px; height:44px; width:44px; }
.yt-view .yt-suggest { top:54px; border-radius:20px; background:var(--ui-panel); }
.yt-main { padding:16px max(16px,env(safe-area-inset-right,0px)) calc(112px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); scroll-padding-top:12px; }
.yt-main > .yt-chips:first-child { top:-16px; margin-inline:-16px; padding:8px 16px 12px; }
.yt-chip { min-height:44px; border-radius:14px; font-size:14px; }
.yt-sectitle { font-size:21px; margin:20px 0 16px; }
.yt-sectitle small { font-size:13px; }
.yt-grid { gap:28px 20px; }
.yt-thumb,.yt-view .yt-thumb { border-radius:20px; }
.yt-meta { gap:10px; }
.yt-card .yt-meta { display:grid; grid-template-columns:36px minmax(0,1fr); }
.yt-card .yt-acts { grid-column:2; margin-top:-6px; gap:8px; }
.yt-card .yt-acts .yt-act { width:44px; height:44px; font-size:16px; border:1px solid var(--border); background:var(--ui-panel); }
.yt-card .yt-queue-card { color:var(--text); }
.yt-title { font-size:16px; line-height:1.6; font-weight:700; }
.yt-sub { font-size:13px; }
.yt-card .yt-avatar { margin-top:3px; }
.yt-hero { border-radius:24px; }
.yt-vtitle { font-size:22px; }
.yt-import { padding:20px; background:var(--ui-panel); border:1px solid var(--border); border-radius:22px; margin-block:0 20px; }
.yt-import label { display:block; margin-bottom:10px; font-size:16px; font-weight:700; }
.yt-import p { color:var(--muted); font-size:13px; line-height:1.75; margin-bottom:0; }
.yt-playlist-actions { display:flex; flex-wrap:wrap; gap:10px; margin-block:0 20px; }
.yt-playlist-actions .yt-pbtn { flex:1; justify-content:center; }
.yt-enqueue { width:100%; justify-content:center; margin-bottom:14px; }
.yt-newlist { margin-block:12px 20px; }
.yt-newlist input { height:48px; border-radius:14px; }
.yt-import .yt-newlist { margin:0; }
.yt-sheetov { background:rgba(3,7,15,.75); backdrop-filter:blur(8px); }
.yt-sheet { background:var(--ui-panel); border-radius:28px 28px 0 0; padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px)); }
.yt-sheet .yt-srow { min-height:56px; }
.yt-bottom { display:flex; position:absolute; z-index:5; bottom:calc(14px + env(safe-area-inset-bottom,0px)); left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); transform:none; width:auto; max-width:430px; margin-left:auto; margin-right:auto; box-sizing:border-box; padding:6px; gap:2px; border:1px solid var(--border-strong); border-radius:28px; background:var(--ui-panel); box-shadow:0 12px 42px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04); }
.yt-bottom a,.yt-bottom button { position:relative; z-index:1; min-width:0; min-height:60px; padding:4px 2px; border-radius:21px; color:var(--muted); font-size:11px; font-weight:700; gap:5px; transition:color .22s ease; }
.yt-bottom i { font-size:20px; transition:transform .3s var(--ui-ease); }
.yt-bottom .on { color:var(--text); }
.yt-bottom .on i { transform:translateY(-2px); color:var(--accent); }
.yt-nav-indicator { position:absolute; top:6px; bottom:6px; left:0; border-radius:21px; background:var(--ui-panel-soft); box-shadow:inset 0 1px 0 var(--border); transition:transform .35s var(--ui-ease); pointer-events:none; }
.yt-rowcard { min-height:80px; padding:14px; border-radius:20px; background:var(--ui-panel); }
.yt-rowcard .yt-pthumb { width:min(112px,28vw); }
.yt-sug .yt-sdel { width:44px; height:44px; }
.yt-sug { min-height:48px; }
#ytmHome { flex:none; }
@media (min-width:640px) { .yt-main { padding-inline:24px; } .yt-main > .yt-chips:first-child { margin-inline:-24px; padding-inline:24px; } }
@media (min-width:900px) {
  .yt-main { padding-bottom:40px; }
  .yt-bottom { display:none; }
  .yt-side { background:var(--ui-panel); padding-top:calc(24px + env(safe-area-inset-top,0px)); gap:8px; }
  .yt-side .yt-brand { margin-bottom:24px; }
  .yt-side a,.yt-side button { min-height:52px; border-radius:16px; }
  .yt-view .yt-head { padding-inline:24px; }
  .yt-searchbox { max-width:800px; margin-inline:auto; }
}
@media (max-width:540px) {
  body { padding-left:max(12px,env(safe-area-inset-left,0px)); padding-right:max(12px,env(safe-area-inset-right,0px)); }
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-radius:22px; padding:10px; }
  .topbar .brand { grid-column:1; grid-row:1; }
  .topbar .account-actions { grid-column:2; grid-row:1; justify-content:flex-end; }
  .topbar .toggles { grid-column:1 / -1; grid-row:2; margin:0; display:flex; border-top:1px solid var(--border); padding-top:10px; gap:8px; }
  .toggles .menu-btn { flex:1; }
  .brand b { font-size:23px; }
  .brand small { font-size:12px; }
  #appView > .card { padding:20px 16px; margin-bottom:18px; }
  .status-pill { max-width:45%; font-size:12px; }
  .yt-sectitle { font-size:19px; }
  .yt-main { padding-top:8px; }
  .yt-main > .yt-chips:first-child { top:-8px; }
  .yt-vtitle { font-size:20px; }
  .yt-grid { gap:24px; }
  .yt-view .yt-head { padding-left:max(10px,env(safe-area-inset-left,0px)); padding-right:max(10px,env(safe-area-inset-right,0px)); gap:6px; }
  .yt-view .yt-searchbox input { padding-inline:36px; }
  .yt-searchbox .yt-sicon { inset-inline-start:12px; }
  .yt-newlist .yt-retry { padding-inline:16px; }
  .yt-import { padding:16px; }
  #ytList .yt-thumb { width:100px; }
}
@media (max-height:500px) and (max-width:899px) {
  .yt-view .yt-head { padding-top:calc(6px + env(safe-area-inset-top,0px)); padding-bottom:6px; }
  .yt-bottom { bottom:calc(6px + env(safe-area-inset-bottom,0px)); max-width:380px; }
  .yt-bottom a,.yt-bottom button { min-height:48px; }
  .yt-main { padding-bottom:90px; }
  .yt-suggest { max-height:45dvh; }
}

.source-details summary > span[aria-hidden="true"] { display:none; }
.yt-active #toastStack { bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
@media(min-width:900px) { .yt-active #toastStack { bottom:24px; } }
/* Phone controls retain comfortable tap areas after legacy topbar rules. */
.topbar .icon-btn,.topbar .top-btn,#menuBtn,#langBtn,#themeBtn,#ytNavBtn,#installTopBtn,#userChip{min-height:44px;min-width:44px}
@media(max-width:600px){.topbar{gap:12px}.topbar .top-btn,.topbar .icon-btn{height:44px}}


/* v6.4 — keep long URLs/metadata from ever widening the phone canvas. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body,.wrap,#appView,.card,.hero-card,.status-box,.screen-media,.screen-copy,.field,.add-row,.link-row,.links-box,.drawer-section,.drawer-body{min-width:0;max-width:100%}
.wrap{width:min(100%,560px)}
input,select,button{min-width:0;max-width:100%}
#videoUrl{width:100%;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.screen-media{display:grid;grid-template-columns:auto minmax(0,1fr)}
.screen-copy{min-width:0;overflow:hidden}
.screen-copy h3,.screen-copy p{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-details{min-width:0;max-width:100%;overflow:hidden}
.source-details summary{min-width:0}
.source-details .source-name{min-width:0;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.source-details .source-more{margin-inline-start:auto;min-width:0;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}
.source-details .source-url{display:block;width:100%;max-width:100%;padding:8px 0 2px;overflow:auto;white-space:nowrap;overscroll-behavior-inline:contain}
.history-section>summary{display:flex;align-items:center;gap:9px;min-height:48px;cursor:pointer;list-style:none;font-weight:800}
.history-section>summary::-webkit-details-marker{display:none}
.history-section>summary::after{content:"›";margin-inline-start:auto;font:24px system-ui;transition:transform .18s}
.history-section[open]>summary::after{transform:rotate(90deg)}
.history-section-body{padding-top:12px}
.history-section[open] #histList{max-height:min(62dvh,620px);overflow-y:auto;overscroll-behavior:contain;padding-inline-end:2px}
.hist-item,.hist-item .row1,.hist-item .t{min-width:0}
@media(max-width:540px){.wrap{width:100%;max-width:100%}.source-details .source-name{max-width:52%}.source-details .source-more{max-width:48%}}