/* ==== Design tokens (YouTube Exact) ============================== */
* { box-sizing: border-box }
html, body { height: 100%; margin: 0; padding: 0; }

:root{
  /* Colors */
  --bg: #0f0f0f;
  --surface: #0f0f0f; 
  --ink: #f1f1f1;
  --muted: #aaaaaa;
  --line: #2e2e2e; 
  --chip: #272727;
  --chip-border: rgba(255,255,255,0.1);
  --chip-hover: #3f3f3f;
  --pill: #121212;
  --search-border: #303030;
  --search-bg: #121212;
  --search-btn-bg: #222222;
  
  --yt-red: #ff0000;
  --yt-blue: #3ea6ff;
  
  --icon-hover: rgba(255, 255, 255, 0.1);
  --rail-hover: rgba(255, 255, 255, 0.1);
  
  /* Dimensions */
  --header-h: 56px;
  --rail-w: 72px;
}

/* Light mode overrides */
:root.light{
  --bg: #fff;
  --surface: #fff;
  --ink: #0f0f0f;
  --muted: #606060;
  --line: #e5e5e5;
  --chip: #f2f2f2;
  --chip-border: rgba(0,0,0,0.05);
  --chip-hover: #e5e5e5;
  --pill: #fff;
  --search-border: #d3d3d3;
  --search-bg: #fff;
  --search-btn-bg: #f8f8f8;
  
  --yt-blue: #065fd4;
  --icon-hover: rgba(0, 0, 0, 0.05);
  --rail-hover: rgba(0, 0, 0, 0.05);
}

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

/* ==== Utility / Home Page (Tool) ========================================= */
.page { display:none }
.page.active { display:block }

/* (Preserving your Upload/Home styling mostly as-is, just cleaned up) */
.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); }
.nav-item.active{ background: var(--icon-hover); 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 }
.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 }
.fields .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.fields input, .fields select{ background: var(--search-bg); color: var(--ink); border:1px solid var(--search-border); border-radius:8px; padding:8px 12px; }
.session-list{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:8px }

/* ==== YOUTUBE CLONE CSS ================================================= */

/* --- Header --- */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height: var(--header-h);
  background: var(--bg);
  display:flex; justify-content: space-between; align-items: center;
  padding: 0 16px;
  z-index: 2020;
}

.topbar .start, .topbar .center, .topbar .end {
  display: flex; align-items: center;
}
.topbar .start { gap: 16px; }

.icon-btn {
  background: transparent; border: none; padding: 8px;
  color: var(--ink); border-radius: 50%; cursor: pointer;
  width: 40px; height: 40px;
  display: grid; place-items: center;
}
.icon-btn:hover { background: var(--icon-hover); }

.logo { 
  display: flex; align-items: center; gap: 4px; 
  text-decoration: none; color: var(--ink); letter-spacing: -0.5px;
  position: relative;
}
.yt-icon { width: 30px; height: 24px; display: grid; place-items: center; }
.yt-wordmark { font-size: 22px; font-weight: 700; font-family: "Roboto Condensed", sans-serif; }
.country-code { 
  font-size: 10px; color: var(--muted); position: absolute; top: -2px; right: -16px;
}

.topbar .center { flex: 0 1 732px; margin-left: 40px; width: 100%; justify-content: flex-end; gap: 8px; }
.search-form { display: flex; align-items: center; flex: 1; margin: 0 40px; max-width: 640px; }
.searchbar {
  display: flex; align-items: center; flex: 1;
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 40px 0 0 40px; /* Pill shape left */
  border-radius: 40px;
  overflow: hidden;
  height: 40px;
  margin-left: 40px; /* Offset to center visually */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0);
}
.searchbar:focus-within { border-color: #1c62b9; margin-left: 40px; }
.search-input-container { flex: 1; padding: 0 4px 0 16px; }
#searchInput {
  width: 100%; background: transparent; border: none; color: var(--ink);
  font-size: 16px; outline: none; line-height: 24px;
}
.search-btn {
  width: 64px; height: 40px;
  background: var(--search-btn-bg);
  border: none; border-left: 1px solid var(--search-border);
  cursor: pointer; color: var(--ink);
  display: grid; place-items: center;
}
.search-btn:hover { background: var(--chip-hover); }
.voice-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: var(--search-btn-bg); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  flex-shrink: 0;
}
.voice-btn:hover { background: var(--chip-hover); }

.topbar .end { gap: 8px; min-width: 225px; justify-content: flex-end; }
.profile-btn {
  background: transparent; border: none; padding: 0 12px; cursor: pointer;
}
.profile-btn img { width: 32px; height: 32px; border-radius: 50%; }

/* --- Layout Frame --- */
.feed-container {
  display: flex;
  margin-top: var(--header-h);
  height: calc(100vh - var(--header-h));
}

/* --- Left Rail --- */
.yt-rail {
  width: var(--rail-w);
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 4px;
  position: fixed; top: var(--header-h); bottom: 0; left: 0;
  z-index: 2000;
}
.rail-item {
  width: 64px; height: 74px;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent; border: none; color: var(--ink);
  cursor: pointer;
  margin-bottom: 4px;
}
.rail-item:hover { background: var(--rail-hover); }
.rail-item span { font-size: 10px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rail-item.active svg { fill: var(--ink); } /* Filled icon style usually */

/* --- Main Area --- */
.main-area {
  margin-left: var(--rail-w);
  width: 100%;
  display: flex; flex-direction: column;
}

/* --- Chips --- */
.chips-bar {
  height: 56px;
  display: flex; align-items: center;
  position: sticky; top: var(--header-h);
  background: var(--bg);
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  width: 100%;
}
.chips-scroll {
  display: flex; gap: 12px;
  padding: 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  background: var(--chip); color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 0 12px; height: 32px;
  font-size: 14px; font-weight: 500; font-family: "Roboto", sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.chip:hover { background: var(--chip-hover); }
.chip.active { background: var(--ink); color: var(--bg); }

/* --- Grid System (Responsive matching YouTube) --- */
.content-wrapper {
  padding: 24px;
  flex: 1;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Standard Desktop */
  column-gap: 16px;
  row-gap: 40px;
}

/* Specific YouTube Grid Breakpoints */
@media (max-width: 500px) { .video-grid { grid-template-columns: 1fr; } }
@media (min-width: 501px) and (max-width: 800px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 801px) and (max-width: 1100px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1101px) { .video-grid { grid-template-columns: repeat(4, 1fr); } } 
@media (min-width: 1950px) { .video-grid { grid-template-columns: repeat(5, 1fr); } }

/* --- Video Card (The "Look") --- */
.video-card {
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
}

.thumbnail-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #202020;
}
.thumbnail-img { width: 100%; height: 100%; object-fit: cover; }
.thumbInput { display: none; } /* Hidden file input */

.badges {
  position: absolute; bottom: 8px; right: 8px;
}
.time-status {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px; font-weight: 500;
  padding: 3px 4px;
  border-radius: 4px;
  line-height: 12px;
}

.video-details {
  display: flex; gap: 12px;
  align-items: flex-start;
  padding-right: 24px; /* Space for dots */
  position: relative;
}

.channel-avatar { flex-shrink: 0; margin-top: 2px; }
.avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #333; }

.video-meta { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }

.video-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-metadata {
  display: flex; flex-direction: column;
  font-size: 14px;
  color: var(--muted);
  line-height: 20px;
}
.channel-name { 
  color: var(--muted); text-decoration: none; 
  transition: color 0.2s;
}
.channel-name:hover { color: var(--ink); }

.more-btn {
  position: absolute; top: 0; right: -10px;
  background: transparent; border: none;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.1s;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
}
.video-card:hover .more-btn { opacity: 1; }

/* --- Mobile View Override (for feed preview) --- */
.mobile-on #feedPage .topbar { position: absolute; }
.mobile-on #feedPage .yt-rail { display: none; }
.mobile-on #feedPage .main-area { margin-left: 0; }
.mobile-on #feedPage .video-grid { grid-template-columns: 1fr !important; gap: 0; }
.mobile-on #feedPage .content-wrapper { padding: 0; }
.mobile-on #feedPage .video-card { margin-bottom: 12px; gap: 0; }
.mobile-on #feedPage .thumbnail-container { border-radius: 0; }
.mobile-on #feedPage .video-details { padding: 12px; }

/* --- Drawer (unchanged logic, just style fix) --- */
.fab{
  position:fixed; right:24px; bottom:24px;
  width: 56px; height: 56px;
  border:none; background:#3ea6ff; color:#0f0f0f;
  border-radius: 50%; cursor:pointer; z-index: 2200;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  font-size: 24px;
  display: grid; place-items: center;
}
.drawer{
  position:fixed; inset:0 0 0 auto; width: 320px;
  background: var(--surface); 
  border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .2s;
  display:flex; flex-direction:column; z-index: 2300;
  box-shadow: -4px 0 24px rgba(0,0,0,0.5);
}
.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; margin-bottom: 12px; }
.field input, .field textarea{ background: var(--search-bg); color: var(--ink); border:1px solid var(--search-border); border-radius:4px; padding:8px; }
.btn{
  background: #3ea6ff; color: #000; border: none; padding: 8px 16px; border-radius: 18px;
  font-weight: 500; cursor: pointer;
}
.btn.outline{ background: transparent; color: #3ea6ff; border: 1px solid rgba(62, 166, 255, 0.5); }
.btn.danger{ background: #ff4e45; color: white; }
.row{ display:flex; align-items:center; gap:8px } .grow{ flex:1 }
.drawer-footer{ padding: 16px; margin-top: auto; }
.switch{ display:flex; align-items:center; gap:8px; cursor: pointer; }

/* ==== Device Preview Modes ==== */

/* Device Selector Buttons in Drawer */
.device-selector {
  display: flex; background: var(--search-bg);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.dev-btn {
  flex: 1; background: transparent; border: none; color: var(--muted);
  padding: 10px; cursor: pointer; display: grid; place-items: center;
}
.dev-btn:hover { background: var(--chip-hover); color: var(--ink); }
.dev-btn.active { background: var(--chip-hover); color: var(--yt-blue); }

/* --- Device Simulation Logic --- */

/* Base overrides for both Tablet & Mobile */
html.mode-tablet body,
html.mode-mobile body {
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: 0 0 100px rgba(0,0,0,0.5);
  position: relative; /* Containers constrained elements */
  min-height: 100vh;
}

/* When in device mode, 'fixed' elements must become absolute 
   to stay inside the device frame */
html.mode-tablet .topbar, html.mode-mobile .topbar,
html.mode-tablet .yt-rail, html.mode-mobile .yt-rail,
html.mode-tablet .chips-bar, html.mode-mobile .chips-bar {
  position: absolute; width: 100%;
}

/* == Tablet Mode == */
html.mode-tablet body { max-width: 820px; }
html.mode-tablet .video-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Hide sidebar on tablet to save space (iPad style) or keep it if you prefer */
html.mode-tablet .yt-rail { display: none; } 
html.mode-tablet .main-area { margin-left: 0; }

/* == Mobile Mode (Replaces .mobile-on) == */
html.mode-mobile body { max-width: 400px; }
html.mode-mobile .topbar { position: absolute; }
html.mode-mobile .yt-rail { display: none; }
html.mode-mobile .main-area { margin-left: 0; }
html.mode-mobile .content-wrapper { padding: 0; }
html.mode-mobile .video-grid { grid-template-columns: 1fr !important; gap: 0; }
html.mode-mobile .video-card { margin-bottom: 12px; gap: 0; }
html.mode-mobile .thumbnail-container { border-radius: 0; }
html.mode-mobile .video-details { padding: 12px; }

/* =========================================================================
   DEVICE PREVIEW MODES (Exact Replica Overrides)
   ========================================================================= */

/* --- Container Wrappers --- */
/* These simulate the physical device screen */

html.mode-tablet body {
  max-width: 1000px; /* Tablet width */
  margin: 20px auto;
  border: 12px solid #1a1a1a; /* Bezel */
  border-radius: 24px;
  height: calc(100vh - 40px);
  overflow: hidden; /* Hide scrollbars outside bezel */
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  background: var(--bg);
  position: relative;
}

html.mode-mobile body {
  max-width: 375px; /* Standard Phone width */
  margin: 20px auto;
  border: 12px solid #1a1a1a; /* Bezel */
  border-radius: 32px;
  height: calc(100vh - 40px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  background: var(--bg);
  position: relative;
}

/* Ensure absolute positioning works relative to the "Device" body */
html.mode-tablet .topbar, html.mode-mobile .topbar,
html.mode-tablet .yt-rail, html.mode-mobile .yt-rail,
html.mode-tablet .chips-bar, html.mode-mobile .chips-bar {
  position: absolute; 
}

/* =========================================================================
   1. TABLET MODE (The "iPad" Look)
   ========================================================================= */
/* - Thin sidebar (Rail) visible
   - 2 Column Grid
   - Standard Header */

html.mode-tablet .yt-rail {
  display: flex; /* Show the rail */
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: 72px;
  background: var(--bg);
  border-right: none;
  z-index: 50;
}

html.mode-tablet .main-area {
  margin-left: 72px; /* Push content for rail */
  width: calc(100% - 72px);
  height: 100%;
  overflow-y: auto; /* Scroll inside the device */
}

html.mode-tablet .video-grid {
  grid-template-columns: 1fr 1fr !important; /* Force 2 columns */
  column-gap: 16px;
  row-gap: 24px;
  padding-bottom: 80px;
}

/* =========================================================================
   2. MOBILE MODE (The "App" Look)
   ========================================================================= */
/* - Bottom Navigation Bar (Crucial)
   - Header simplified
   - 1 Column Grid */

/* --- Mobile Header --- */
html.mode-mobile .topbar {
  padding: 0 12px;
  justify-content: space-between;
}
html.mode-mobile .logo .country-code { display: none; } /* Hide US code */
html.mode-mobile .topbar .center { display: none; } /* Hide Search Bar pill */
html.mode-mobile .topbar .start { flex: 0; }
html.mode-mobile .hamburger { display: none; } /* Hide hamburger in mobile */

/* Re-enable Search Icon specifically for mobile header right side if needed, 
   but for now we stick to the provided HTML structure */

/* --- Mobile Navigation (Bottom Bar) --- */
html.mode-mobile .yt-rail {
  display: flex;
  flex-direction: row; /* Horizontal */
  top: auto;
  bottom: 0; /* Stick to bottom */
  left: 0;
  width: 100%;
  height: 48px;
  padding: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  justify-content: space-around; /* Spread items */
  align-items: center;
  z-index: 2100;
}

html.mode-mobile .rail-item {
  width: auto;
  height: 100%;
  flex: 1;
  margin: 0;
  border-radius: 0;
  padding: 4px 0;
  justify-content: center;
}

html.mode-mobile .rail-item:hover { background: transparent; }
html.mode-mobile .rail-item span { font-size: 10px; margin-top: 2px; }
html.mode-mobile .rail-item svg { width: 24px; height: 24px; }

/* --- Mobile Content --- */
html.mode-mobile .main-area {
  margin-left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto; /* Scroll content */
}

html.mode-mobile .chips-bar {
  top: 56px; /* Below header */
  width: 100%;
  z-index: 100;
}

html.mode-mobile .content-wrapper {
  padding: 0;
  margin-top: 48px; /* Offset for chips */
}

html.mode-mobile .video-grid {
  grid-template-columns: 1fr !important; /* Force 1 column */
  gap: 0;
  padding-bottom: 60px; /* Space for bottom nav */
}

/* --- Mobile Video Card Style --- */
html.mode-mobile .video-card {
  margin-bottom: 0;
  border-bottom: 4px solid var(--bg); /* Separator */
}

html.mode-mobile .thumbnail-container {
  border-radius: 0; /* Full bleed edges */
}

html.mode-mobile .video-details {
  padding: 12px;
  position: relative;
}

html.mode-mobile .more-btn {
  opacity: 1; /* Always visible on mobile */
  top: 12px;
}