/* =========================================================
   FILE: assets/css/app.css
   Theme + Layout + Player UI + Recording UI + Dock (scroll fix + polish)
   - Updated:
     ✅ Dock: fixed max-height + scrollable body (header stays visible)
     ✅ Dock: nicer scrollbars + better contrast
     ✅ Dock: prevents “growing upward forever”
     ✅ UI polish: job spacing, line-height, progress visibility
     ✅ Responsive: tighter toolbar/buttons on phones, dock width tweaks
========================================================= */

/* -------------------------
   Theme variables
------------------------- */
:root{
  --bg:#0b0b0c;
  --panel:#141416;
  --border:#1f2023;
  --muter:#9aa0a6;
  --ring:#9ad0ff;
}

/* -------------------------
   Base
------------------------- */
body{ background:var(--bg); color:#f2f4f7; }
.card{ background:var(--panel); border:1px solid var(--border); }

/* -------------------------
   Navbar
------------------------- */
.app-nav{
  background:rgba(11,12,16,.96);
  backdrop-filter:saturate(120%) blur(4px);
}

/* -------------------------
   Hero / Player
------------------------- */
.hero{
  background:#000;
  border-radius:16px;
  overflow:hidden;            /* keeps video + toolbars clipped to radius */
  border:1px solid #1f2023;
  position:relative;
}

.avatar{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  background:#1a1b1e;
  border:1px solid #2a2c31;
}

.muted{ color:var(--muter); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid #2a2d33;
  background:#16181d;
  color:#eaf2ff;
  font-size:.9rem;
  text-decoration:none;
}
.pill:focus{ outline:2px solid var(--ring); outline-offset:2px; }

video#mfcVideo{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
  background:#000;
}

.smallcode{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.85rem;
}

/* Player toolbar */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding:.65rem .75rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,12,.55);
  backdrop-filter:saturate(120%) blur(6px);
}

/* Shortcuts helper line */
.kbdline{
  padding:.55rem .75rem .75rem;
  color:#b7bdc6;
  font-size:.92rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,12,.40);
}
.kbdline b{ color:#eaf2ff; font-weight:600; }

/* Generic buttons (toolbar / modal) */
.toolbtn{
  border:1px solid #2a2d33;
  background:#12141a;
  color:#eaf2ff;
  border-radius:12px;
  padding:.35rem .6rem;
  font-size:.92rem;
  text-decoration:none;
  cursor:pointer;
}
.toolbtn:hover{ background:#171a22; }
.toolbtn:disabled{ opacity:.45; cursor:not-allowed; }

/* -------------------------
   Sidebar: Record card
------------------------- */
.rec-card{
  border:1px solid #2a2d33;
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  text-align:center;
}

/* Sticky sidebar on desktop */
.rec-card.sticky{
  position: sticky;
  top: 84px;
}

.rec-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem .95rem;
  border-radius:12px;
  border:1px solid #3b1c1c;
  background:#1a0f10;
  color:#ffd7d7;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.rec-btn:hover{ background:#221315; }

.rec-sub{
  color:#b7bdc6;
  font-size:.92rem;
  margin-top:8px;
}

.side-card{
  border:1px solid #2a2d33;
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}

/* -------------------------
   Modal (vanilla)
------------------------- */
.m-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.m-card{
  width:min(520px, 92vw);
  background:#111218;
  border:1px solid #2a2d33;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}

.m-head{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.m-body{ padding:16px; }

.m-foot{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.m-x{
  background:transparent;
  border:0;
  color:#cbd5e1;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.m-label{
  color:#cbd5e1;
  font-size:.95rem;
  margin-bottom:6px;
}

.m-input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #2a2d33;
  background:#0f1117;
  color:#eaf2ff;
}

.m-note{
  color:#9aa0a6;
  font-size:.9rem;
  margin-top:10px;
}

/* =========================================================
   Dock (Desktop + Mobile) — FIXED height + scroll body ✅
   WHY:
   - When many jobs exist, old dock grew upward infinitely
   - Now: dock has max-height; body scrolls; header stays visible
========================================================= */
.dock{
  /* anchored on screen */
  position:fixed;
  right:14px;
  bottom:14px;

  /* size */
  width:340px;
  max-width:92vw;

  /* look */
  background:rgba(15,17,23,.98);
  border:1px solid #2a2d33;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  z-index:9998;

  /* ✅ key: make it a column layout so header doesn't scroll away */
  display:flex;
  flex-direction:column;

  /* ✅ key: never exceed viewport (prevents “growing upward forever”) */
  max-height: min(72vh, 620px);

  /* keeps rounded corners clean */
  overflow:hidden;

  /* optional polish: looks nicer above content */
  backdrop-filter:saturate(120%) blur(8px);
}

/* Minimized dock (header-only state) */
.dock.min{
  width:220px;
  max-height:56px; /* approx header height */
}

/* Dock header (always visible) */
.dock-head{
  flex:0 0 auto; /* don't shrink */

  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  cursor:pointer;
  user-select:none;

  background:rgba(10,10,12,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dock-title{ font-weight:700; font-size:.95rem; }

.dock-badge{
  font-size:.82rem;
  padding:.15rem .5rem;
  border-radius:999px;
  border:1px solid #2a2d33;
  background:#12141a;
  color:#eaf2ff;
}

/* Dock body (scroll container) */
.dock-body{
  display:none; /* closed by default */
  padding:10px 12px;

  /* ✅ key: allow internal scrolling inside a flex container */
  flex:1 1 auto;
  min-height:0;

  /* ✅ scroll when too many jobs */
  overflow:auto;

  /* prevent “scroll the page behind” bounce */
  overscroll-behavior:contain;

  /* keep layout stable when scrollbar appears */
  scrollbar-gutter:stable;
}

/* Open state shows body */
.dock.open .dock-body{ display:block; }

/* Optional: nicer scrollbar (WebKit browsers) */
.dock-body::-webkit-scrollbar{ width:10px; }
.dock-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
  border-radius:999px;
}
.dock-body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.18);
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
}

/* Job card inside dock */
.job{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}
.job:last-child{ margin-bottom:0; }

.job-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.job-u{ font-weight:700; }
.job-st{ color:#9aa0a6; font-size:.88rem; }

/* ✅ polish: better readability with many jobs */
.job-line{
  margin-top:6px;
  color:#cbd5e1;
  font-size:.9rem;
  line-height:1.4;
}

/* Job actions row */
.job-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Dock action button style */
.a-btn{
  padding:.38rem .6rem;
  border-radius:10px;
  border:1px solid #2a2d33;
  background:#12141a;
  color:#eaf2ff;
  text-decoration:none;
  font-size:.9rem;
  cursor:pointer;
}
.a-btn:hover{ background:#171a22; }

/* Dangerous action (delete/stop) */
.a-danger{
  border-color:#3b1c1c;
  background:#1a0f10;
  color:#ffd7d7;
}
.a-danger:hover{ background:#221315; }

/* Progress bar (recording only) */
.prog{
  margin-top:8px;
  height:8px;
  background:#0f1117;
  border:1px solid #2a2d33;
  border-radius:999px;
  overflow:hidden;
}

/* ✅ polish: slightly more visible + “premium” gradient */
.prog > div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(111,186,255,.95), rgba(154,208,255,.95));
}

/* =========================================================
   Responsive tweaks
========================================================= */

/* Phones: tighter toolbar + smaller buttons */
@media (max-width:480px){
  .toolbar{ gap:.35rem; }
  .toolbtn{ padding:.30rem .50rem; font-size:.85rem; }

  /* Dock spans almost full width, smaller max-height */
  .dock{
    left:10px;
    right:10px;
    width:auto;
    max-width:none;
    bottom:10px;

    /* shorter on phones */
    max-height:55vh;
    border-radius:14px;
  }
  .dock.min{
    max-height:56px;
  }
}

/* Small tablets: slightly shorter */
@media (max-width:768px){
  .dock{
    max-height:60vh;
  }
}

/* Big desktop: allow a bit more height + tiny nudge spacing */
@media (min-width:1200px){
  .dock{
    max-height: min(76vh, 720px);
    right:18px;
    bottom:18px;
  }
}