/* Ported verbatim from frontend/css/style.css -- app shell, sidebar,
   topbar, and the persistent bottom player's grid placement. */

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "sidebar content" "player player";
  min-height: 100vh;
}

.app-sidebar {
  grid-area: sidebar;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  /* Fills its own grid row (the "sidebar" area only spans row 1, not
     the "player" row below) rather than the full viewport -- height:
     100vh here would ignore that row split and visually cover the
     persistent bottom player. */
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  margin-bottom: 16px;
  padding: 0 4px;
}
.sidebar-brand .brand-icon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sidebar-nav-item:hover { background: var(--panel-hover); color: var(--text); }
.sidebar-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-spacer { flex: 1; }

.sidebar-status-chip, .status-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--muted);
  margin-bottom: 8px;
}
.sidebar-status-chip .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sidebar-status-chip.ready { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.sidebar-status-chip.ready .status-dot { animation: record-pulse 1.6s ease-in-out infinite; }
.sidebar-status-chip.not-ready { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }

/* Generic version of the chip above, used outside the sidebar (LM Studio
   connection status in Settings, and the AI Transform panel's local-AI
   status chip) -- same visual language, .connected/.disconnected instead
   of .ready/.not-ready since there's no pulse animation need there. */
.status-chip { margin-bottom: 0; }
.status-chip.connected { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.status-chip.disconnected { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.app-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.app-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar-search { min-width: 260px; }
.topbar-spacer { flex: 1; }
.topbar-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.engine-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
.topbar-chip-privacy { color: var(--success); }

/* Persistent, app-wide recording indicator -- lives in the topbar (a
   sibling of every toggled page section, never unmounted by navigation),
   not inside the New Recording dialog, so an active recording stays
   visible and controllable from any page. Hidden by default; shown only
   while a recording is in progress (see global-recording-bar.js). */
.global-recording-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
#global-recording-timer { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.global-recording-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .global-recording-state { display: none; } /* dot + timer + Stop are the essentials on narrow screens */
}
.topbar-icon-btn, .topbar-profile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar-icon-btn:hover, .topbar-profile:hover { border-color: var(--border-strong); background: var(--panel-hover); }
.topbar-profile { border-radius: 50%; }

.app-main {
  flex: 1;
  padding: 32px 40px 40px;
  overflow-y: auto;
  min-height: 0;
}

/* Persistent bottom player -- lives outside #library-view/
   #transcript-view-panel so it survives navigating back to Home; it
   drives the SAME <video id="player"> element that still lives (and is
   visibly shown, for video files) inside the transcript workspace --
   hiding that panel doesn't pause playback, so audio keeps going while
   browsing. Shown once a job has been opened at least once. */
.bottom-player {
  grid-area: player;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 28px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}
.player-left { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.player-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.player-meta { min-width: 0; }
.player-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.player-status-label { margin-top: 1px; }
.player-center { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.player-scrubber {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.player-time {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--muted);
  align-self: flex-end;
}
.player-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.playback-rate-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.playback-rate-label select {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}
.player-volume { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.player-volume-slider { width: 80px; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "sidebar" "content" "player"; }
  .app-sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .sidebar-brand { margin-bottom: 0; margin-right: auto; }
  .sidebar-nav { flex-direction: row; margin-top: 0; flex-wrap: wrap; }
  .sidebar-spacer { display: none; flex-basis: 100%; }
  .sidebar-status-chip { flex-basis: 100%; }
  .app-topbar { padding: 12px 16px; flex-wrap: wrap; }
  .topbar-search { min-width: 0; flex: 1 1 100%; order: 3; }
  .app-main { padding: 20px; }
  .bottom-player { flex-wrap: wrap; padding: 10px 16px; }
  .player-left { min-width: 0; flex: 1 1 auto; }
  .player-center { flex-basis: 100%; order: 3; }
  .player-right { margin-left: auto; }
}