/* ==== Design tokens (YT-like - 1:1 Matched) ============================== */
* { box-sizing: border-box }
html, body { height: 100% }

:root{
  /* Dark (default) - Matched from screenshot */
  --bg: #0f0f0f;
  --surface: #0f0f0f; 
  --ink: #f1f1f1;
  --muted: #aaaaaa;
  --line: #222222; 
  --chip: #272727;
  --chip-border: #383838;
  --pill: #121212;
  --elev: #1a1a1a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
  
  /* YT-specific tokens */
  --yt-red: #ff0000;
  --yt-blue: #3ea6ff;
  --search-border: #303030;
  --search-btn-bg: #222222;
  --input-bg: #121212;
  --input-border: #303030;
  --btn-bg: #f1f1f1;
  --btn-text: #0f0f0f;
  --btn-hover-bg: #d9d9d9;
  --icon-btn-hover: rgba(255, 255, 255, 0.1);
  --rail-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --premium-badge-bg: #272727;
  --premium-badge-text: #f1f1f1;
}

/* Light mode (Values adjusted for YT Light) */
:root.light{
  --bg: #fff;
  --surface: #fff;
  --ink: #0f0f0f;
  --muted: #606060;
  --line: #e5e5e5;
  --chip: #f2f2f2;
  --chip-border: #dcdcdc;
  --pill: #f7f7f7;
  --elev: #fff;
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);

  --yt-blue: #065fd4;
  --search-btn-bg: #f8f8f8;
  --search-border: #cccccc;
  --input-bg: #fff;
  --input-border: #cccccc;
  --btn-bg: #0f0f0f;
  --btn-text: #f1f1f1;
  --btn-hover-bg: #272727;
  --icon-btn-hover: rgba(0, 0, 0, 0.05);
  --rail-hover-bg: rgba(0, 0, 0, 0.04);
  --sidebar-active-bg: rgba(0, 0, 0, 0.05);
  --premium-badge-bg: #f2f2f2;
  --premium-badge-text: #0f0f0f;
}

body{
  margin:0;
  font-family: "Roboto", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
}

/* ==== Page visibility ===================================================== */
.page { display:none }
.page.active { display:block }

/* ==== Home (unchanged structure, refined visuals) ======================== */
.home-wrap{ max-width: 1200px; margin: 32px auto; padding: 0 16px }
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px }
.logo-pill{ width:44px; height:44px; border-radius:10px; background:#ff4e45; display:grid; place-items:center; font-size:22px }
.home-grid{ display:grid; grid-template-columns: 260px 1fr; gap:16px }
@media (max-width: 960px){ .home-grid{ grid-template-columns: 1fr } }

.home-nav{ background: var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px }
.nav-item{
  width:100%; text-align:left; padding:12px 14px; border-radius:10px;
  border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer
}
.nav-item:hover { background: var(--rail-hover-bg); }
.nav-item.active{ background: var(--sidebar-active-bg); border-color: transparent; }

.home-content .tab{ display:none }
.home-content .tab.view{ display:block }

.uploader{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; align-items:start }
@media (max-width: 960px){ .uploader{ grid-template-columns: 1fr } }

.thumb-drop{
  background: var(--surface); border:2px dashed var(--line); border-radius:16px;
  height: 280px; display:grid; place-items:center; position:relative
}
.thumb-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer }
.thumb-drop .ghost{ color:var(--muted); font-weight:600; letter-spacing:.4px }

/* Apply YT input styling */
.fields .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.fields .field input, .fields .field select{
  background: var(--input-bg); 
  color: var(--ink); 
  border:1px solid var(--input-border);
  border-radius:10px; padding:10px 12px;
  outline: none;
  transition: border-color .15s ease;
}
.fields .field input:focus, .fields .field select:focus {
  border-color: var(--yt-blue);
}


.session-list{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:8px }
.session-card{ background: var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer }
.session-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.session-card .meta{ padding:10px 12px }
.preset-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.preset-chip{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--line); border-radius:999px; cursor:pointer; background:var(--surface)
}
.preset-chip img{ width:22px; height:22px; border-radius:50% }

/* ==== Mobile view frame (for your feed preview) ========================== */
.mobile-on #feedPage .content{ max-width: 390px; margin: 0 auto }
.mobile-on #feedPage .grid{ grid-template-columns: 1fr !important }

/* ==== FEED =============================================================== */
/* Topbar: 1-1 Match */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg); /* Solid background */
}
.topbar .left, .topbar .center, .topbar .right{ display:flex; align-items:center; gap:8px }
.topbar .left { gap: 16px; } /* Gap between hamburger and logo */

/* === FIX: Center container for searchbar === */
.topbar .center {
  flex: 1; /* Allows this container to grow and shrink */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* Gap between searchbar and voice button */
  min-width: 0; /* Important for flex-shrinking */
}

.topbar .right { gap: 8px; } /* Gap between icons on right */

.icon-btn{
  border: 0; 
  background: transparent; 
  color: var(--ink);
  width: 40px; height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px; 
  cursor: pointer;
  transition: background-color .15s ease;
}
.icon-btn:hover {
  background: var(--icon-btn-hover);
}

.logo{ display:flex; align-items:center; gap:4px; text-decoration:none; color:var(--ink); font-weight:700 }
.play{ display:grid; place-items:center; width:28px; height:20px; background:var(--yt-red); color:#fff; border-radius:6px; font-size: 12px; }
.logo span { font-size: 20px; letter-spacing: -0.5px; }

/* Premium badge in top-left */
.premium-badge {
  background: var(--premium-badge-bg);
  color: var(--premium-badge-text);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-left: 8px;
}

.profile{ display:flex; align-items:center; gap:8px }
.profile img{ width:32px; height:32px; border-radius:50%; background:#999 }

/* === FIX: Search pill flex properties === */
.searchbar{
  display:flex; align-items:center;
  border: 1px solid var(--search-border);
  border-radius: 40px; /* Fully rounded */
  overflow: hidden;
  background: var(--pill);
  height: 40px;
  flex: 1; /* Grow to fill center container */
  max-width: 728px; /* But don't get TOO wide */
  /* margin: 0 auto; */ /* <-- REMOVED THIS */
}
.searchbar:focus-within {
  border-color: var(--yt-blue);
}
.searchbar input{
  background: transparent; color: var(--ink); border: 0; outline: none;
  padding: 10px 16px;
  width: 100%;
  font-size: 16px;
}
.searchbar input:focus{ box-shadow: none; } 
.search-btn{
  border-left: 1px solid var(--line); 
  background: var(--search-btn-bg);
  color: var(--muted);
  padding: 0 20px;
  height: 100%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.search-btn:hover {
  background: var(--elev);
}

/* === ADDED: Voice search button style === */
.voice-search-btn {
  background: var(--chip);
}
.voice-search-btn:hover {
  background: var(--elev);
}
:root.light .voice-search-btn {
  background: var(--chip);
}
:root.light .voice-search-btn:hover {
  background: #e5e5e5;
}


/* Chips: 1-1 Match */
.chips{
  position:sticky; top:56px; z-index:9;
  display:flex; gap: 12px;
  overflow-x:auto;
  padding: 12px 16px; border-bottom:1px solid var(--line);
  background: var(--bg);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip{
  background: var(--chip); color: var(--ink);
  border: 1px solid var(--chip-border);
  padding: 0 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  cursor: pointer; white-space: nowrap; 
  font-weight: 400;
  font-size: 14px;
  transition: background-color .15s ease;
}
.chip:not(.active):hover {
  background: var(--elev);
}

.chip.active{ 
  background:#f1f1f1; 
  color:#0f0f0f; 
  border-color:#f1f1f1;
  font-weight: 700;
}
:root.light .chip.active {
  background: #0f0f0f;
  color: #f1f1f1;
  border-color: #0f0f0f;
}


/* === FIX: Grid layout for 1440p+ === */
.content{ padding: 24px 16px; } 
.grid{
  /* max-width: 1750px; margin: 0 auto; */ /* <-- REMOVED THIS */
  display:grid; 
  gap: 24px 16px; 
  grid-template-columns: repeat(6, minmax(0,1fr)); /* <-- Default to 6 columns */
}
/* Added/Adjusted breakpoints */
@media (max-width: 2000px){ .grid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 1700px){ .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } } /* Adjusted from 1750 */
@media (max-width: 1300px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Adjusted from 1400 */
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Adjusted from 1024 */
@media (max-width: 640px) { .grid{ grid-template-columns: 1fr; } }

/* Card: 1-1 Match */
.card{ background: transparent; border: 0 }
.thumb-wrap{
  position:relative; background:#000; cursor:pointer;
  border-radius: 12px;
  overflow: hidden;
}
.thumb{ width:100%; aspect-ratio: 16/9; object-fit:cover; display:block }

/* Duration badge: 1-1 Match */
.badge-row{ position:absolute; right:8px; bottom:8px; display:flex; gap:8px }
.badge.time{
  background: rgba(0,0,0,.8);
  color:#fff; border:0;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: 12px; 
  font-weight: 500;
  line-height: 1
}
.thumbInput{ display:none }

/* Meta row: 1-1 Match */
.meta{ 
  display:flex; 
  gap: 12px;
  padding: 12px 0 0;
}
.avatar{ width: 36px; height: 36px; border-radius: 50% }
.text{ min-width: 0; }
.title{
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 2.2rem;
  font-weight: 500;
}
.sub{ 
  color: var(--muted); 
  font-size: 14px;
  line-height: 1.8rem;
  font-weight: 400;
  margin: 0;
}
.sub.channel-name {
  margin-bottom: 2px;
}
.sub.metadata {
  /* No special style needed */
}

.more{ 
  margin-left: auto;
  color: var(--ink);
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  padding: 8px;
  margin-top: -8px;
  margin-right: -12px;
}
.more:hover {
  background: var(--icon-btn-hover);
}


/* Drawer + FAB (Polished) */
.drawer{
  position:fixed; inset:0 0 0 auto; width: min(460px, 90vw);
  background: var(--surface); border-left:1px solid var(--line);
  transform: translateX(100%); transition: transform .25s;
  display:flex; flex-direction:column; z-index: 20
}
.drawer.open{ transform: translateX(0) }
.drawer-header{ display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid var(--line) }
.panel{ padding:16px; border-bottom:1px solid var(--line) }
.field{ display:flex; flex-direction:column; gap:6px }
.field input, .field textarea{
  background: var(--input-bg); color: var(--ink);
  border:1px solid var(--input-border); border-radius:10px; padding:10px 12px
}
.field input:focus, .field textarea:focus {
  border-color: var(--yt-blue);
}

.row{ display:flex; align-items:center; gap:10px }
.row.gap{ gap: 12px } .grow{ flex: 1 }

.btn{
  padding: 0 16px; /* Use height and padding for sizing */
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius:18px;
  border: 0;
  background: var(--btn-bg); color: var(--btn-text); 
  font-weight:500; cursor:pointer;
  transition: background-color .15s ease;
  font-size: 14px;
}
.btn:hover { background: var(--btn-hover-bg); }
.btn.outline{ 
  background: transparent; color: var(--ink);
  border: 1px solid var(--chip-border);
}
.btn.outline:hover { background: var(--icon-btn-hover); }
.btn.danger{ background:#d33; color:#fff; border-color:#c22 }

/* === ADDED: Style for dark chip buttons === */
.btn.chip-style {
  background: var(--chip);
  color: var(--ink);
  border: 1px solid var(--chip-border);
}
.btn.chip-style:hover {
  background: var(--elev);
}
:root.light .btn.chip-style {
  background: var(--chip);
  color: var(--ink);
  border: 1px solid var(--chip-border);
}
:root.light .btn.chip-style:hover {
  background: #e5e5e5;
}


.switch{ display:flex; align-items:center; gap:10px }
.drawer-footer{ margin-top:auto; padding:16px; border-top:1px solid var(--line) }
.fab{
  position:fixed; right:18px; bottom:18px;
  border:1px solid var(--line); background:#fff; color:#000;
  padding:12px 14px; border-radius:999px; cursor:pointer; z-index:15
}

/* Utilities */
.ellipsis{ 
  display:-webkit-box; 
  -webkit-line-clamp:2; 
  -webkit-box-orient:vertical; 
  overflow:hidden;
  text-overflow: ellipsis;
  max-height: 4.4rem; /* 2 * 2.2rem line-height */
}
.muted{ color: var(--muted); font-size: 13px }


/* ===== Left mini sidebar (YouTube rail) 1-1 Match ====================== */
:root { --rail-w: 72px; }
.has-sidebar .yt-rail{
  position: fixed; top: 56px; bottom: 0; left: 0;
  width: var(--rail-w); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; 
  padding: 4px 0;
  z-index: 8;
}
.rail-item{
  width: 64px; height: 74px;
  border: 0; background: transparent; color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  cursor: pointer; 
  font-size: 10px;
  line-height: 1.4;
  font-weight: 400;
  transition: background-color .15s ease;
  padding: 0 4px;
  text-align: center;
}
.rail-item .rail-ico{ 
  font-size: 24px;
  line-height: 1 
}
.rail-item:hover{ background: var(--rail-hover-bg) }
.rail-item.active{ 
  background: var(--sidebar-active-bg);
  font-weight: 700;
}

/* Push main feed over when rail is present */
.has-sidebar .topbar { padding-left: calc(var(--rail-w) + 16px); }
.has-sidebar .chips { padding-left: calc(var(--rail-w) + 16px); }
.has-sidebar .content { padding-left: calc(var(--rail-w) + 16px); }

/* ===== Under-the-video (Removed conflict) ============================ */
.pill:empty{ display:none }