/* CSS Variables - Light Theme (Default) */
:root {
  --primary-blue: #3B82F6;
  --primary-blue-hover: #2563EB;
  --primary-blue-light: #EFF6FF;
  --accent-orange: #F97316;
  --accent-orange-light: #FFF7ED;
  --accent-coral: #FB923C;
  --bg-main: #F5F5F5;
  --bg-white: #FFFFFF;
  --bg-chat: #F0F0F0;
  --bg-input: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-white: #FFFFFF;
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --msg-user-bg: #3B82F6;
  --msg-user-text: #FFFFFF;
  --msg-bot-bg: #F3F4F6;
  --msg-bot-text: #111827;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --sidebar-width: 280px;
  --header-height: 64px;
  --input-height: 72px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}

/* Dark Theme */
[data-theme="dark"] {
  --primary-blue: #60A5FA;
  --primary-blue-hover: #3B82F6;
  --primary-blue-light: #1E3A5F;
  --accent-orange: #FB923C;
  --accent-orange-light: #431407;
  --accent-coral: #FDBA74;
  --bg-main: #0F172A;
  --bg-white: #1E293B;
  --bg-chat: #1E293B;
  --bg-input: #334155;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-white: #FFFFFF;
  --border-light: #334155;
  --border-medium: #475569;
  --msg-user-bg: #3B82F6;
  --msg-user-text: #FFFFFF;
  --msg-bot-bg: #334155;
  --msg-bot-text: #F1F5F9;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  overflow: hidden;
}

/* Layout */
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background:
    radial-gradient(circle at 0% 0%, rgba(25, 70, 120, 0.4) 0%, transparent 38%),
    radial-gradient(circle at 100% 100%, #0f325c 0%, transparent 60%),
    linear-gradient(180deg, #030C1E 0%, #051329 100%);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: width var(--transition-normal), transform var(--transition-normal);
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar.collapsed .brand-name,
.sidebar.collapsed .user-name,
.sidebar.collapsed .profile-info,
.sidebar.collapsed .nav-section-title span,
.sidebar.collapsed .nav-section-title .chevron,
.sidebar.collapsed .nav-section-items,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .new-chat-btn span,
.sidebar.collapsed .chat-item,
.sidebar.collapsed .empty-list {
  display: none;
}

.sidebar.collapsed .sidebar-header {
  padding: 12px 8px;
  justify-content: center;
}

.sidebar.collapsed .sidebar-profile,
.sidebar.collapsed .sidebar-footer {
  padding: 8px;
  justify-content: center;
}

.sidebar.collapsed .sidebar-nav {
  padding: 12px 8px;
  /* .sidebar-nav sets overflow-y: auto below; per spec, a lone overflow-y
     other than visible forces the browser to compute overflow-x as auto too,
     which clips anything positioned outside the element's box -- including
     the Conversations/Favourites/Archives tooltips, which sit to the right of
     it via left: 100%+10px. Safe to go fully visible here: the icon rail
     always hides .nav-section-items, so there is nothing left to scroll. */
  overflow: visible;
}

.sidebar.collapsed .nav-section {
  padding: 0;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px;
  width: 48px;
  height: 48px;
  margin: 4px auto;
  border-radius: var(--radius-md);
}

.sidebar.collapsed .nav-section-title {
  justify-content: center;
  padding: 8px;
  width: 48px;
  height: 48px;
  margin: 4px auto;
}

.sidebar.collapsed .new-chat-btn {
  padding: 12px;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  gap: 8px;
}

.sidebar.collapsed .brand {
  justify-content: center;
  overflow: visible;
}

.sidebar.collapsed .collapse-btn {
  transform: rotate(180deg);
}

/* Icon-rail tooltips. Labels are hidden when collapsed (rule above), so the
   icon alone is ambiguous -- these restore what each one does on hover.
   CSS-only (no hover delay, no JS state to keep in sync) and gated to the
   collapsed state, since the expanded sidebar already shows text labels and
   a second tooltip there would be redundant. */
.sidebar.collapsed [data-tooltip] {
  position: relative;
}

.sidebar.collapsed [data-tooltip]::after,
.sidebar.collapsed [data-tooltip]::before {
  /* Rendered at all times (not just on :hover) so opacity/transform can
     transition on the way in; display:none on a pseudo-element can't
     animate, it would just pop. Kept invisible and non-interactive until
     hovered. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

.sidebar.collapsed [data-tooltip]:hover::after,
.sidebar.collapsed [data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

.sidebar.collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-white);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 150;
  box-shadow: var(--shadow-md);
}

.sidebar.collapsed [data-tooltip]:hover::after {
  /* The slide-in: starts pulled back toward the icon, eases out to its
     resting position alongside the fade. */
  transform: translateY(-50%) translateX(0);
}

/* Small triangle pointing back at the icon. */
.sidebar.collapsed [data-tooltip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border: 6px solid transparent;
  border-right-color: var(--text-primary);
  z-index: 150;
}

.sidebar.collapsed [data-tooltip]:hover::before {
  transform: translateY(-50%) translateX(0);
}

/* Generic icon tooltips, for icon-only controls outside the sidebar rail
   (chat input area, message actions, PDF viewer, etc). Same CSS-only
   hover-fade approach as the sidebar tooltips above, but centered above
   the icon instead of docked to its side.

   The exclusion is wrapped in :where() so it adds no specificity. Written as
   a bare :not(.sidebar [data-tooltip]) the selector scores (0,3,0) -- higher
   than a plain class -- and the `position: relative` below then silently
   overrode `.theme-toggle`'s `position: fixed`, dropping that button into
   normal flow above .app-container (height: 100vh) and pushing the whole
   column, input bar included, off the bottom of the viewport. :where() keeps
   these generic rules at (0,1,0) so per-component styles still win. */
[data-tooltip]:not(:where(.sidebar [data-tooltip])) {
  position: relative;
}

[data-tooltip]:not(:where(.sidebar [data-tooltip]))::after,
[data-tooltip]:not(:where(.sidebar [data-tooltip]))::before {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

[data-tooltip]:not(:where(.sidebar [data-tooltip])):hover::after,
[data-tooltip]:not(:where(.sidebar [data-tooltip])):hover::before {
  opacity: 1;
  visibility: visible;
}

[data-tooltip]:not(:where(.sidebar [data-tooltip]))::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-white);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 150;
  box-shadow: var(--shadow-md);
}

[data-tooltip]:not(:where(.sidebar [data-tooltip])):hover::after {
  transform: translateX(-50%) translateY(0);
}

[data-tooltip]:not(:where(.sidebar [data-tooltip]))::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--text-primary);
  z-index: 150;
}

[data-tooltip]:not(:where(.sidebar [data-tooltip])):hover::before {
  transform: translateX(-50%) translateY(0);
}

/* Icons near the top of the viewport (theme toggle) would clip a tooltip
   rendered above; flip those to open downward instead. */
.theme-toggle[data-tooltip]::after {
  top: calc(100% + 10px);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
}

.theme-toggle[data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

.theme-toggle[data-tooltip]::before {
  top: calc(100% + 4px);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
  border-top-color: transparent;
  border-bottom-color: var(--text-primary);
}

.theme-toggle[data-tooltip]:hover::before {
  transform: translateX(-50%) translateY(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.brand-name {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.collapse-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s, background-color 0.2s, transform 0.3s ease;
}

.collapse-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

.collapse-icon {
  width: 18px;
  height: 18px;
}

.sidebar-profile {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
}

.profile-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.nav-section {
  margin-bottom: 8px;
}

.nav-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.nav-section-title:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.nav-section-title svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nav-section-title span {
  flex: 1;
}

.nav-section-title .chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.nav-section.collapsed .nav-section-title .chevron {
  transform: rotate(-90deg);
}

.nav-section-items {
  overflow: visible;
  padding-left: 12px;
  margin-top: 4px;
}

.nav-section-items .nav-item {
  padding-left: 20px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-section.collapsed .nav-section-items {
  display: none;
}

/* Played once (JS adds/removes this class) when a nav icon is clicked from
   the collapsed icon rail: the sidebar widens AND this section's list
   appears for the first time in the same gesture, so the list gets its own
   brief entrance instead of just snapping into view mid-expand. */
@keyframes nav-section-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-section-items.section-reveal {
  animation: nav-section-reveal 220ms ease;
}

.nav-section-settings {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.6);
}

.nav-item.active svg {
  color: #FFFFFF;
}

/* Chat Items in Sidebar */
.chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 2px;
}

.chat-item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  transition: background var(--transition-fast);
  min-width: 0;
}

.chat-item-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.chat-item.active .chat-item-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.chat-item-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
}

.chat-item.active .chat-item-btn svg {
  color: #FFFFFF;
}

.chat-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-actions {
  position: relative;
  flex-shrink: 0;
}

.chat-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.chat-item:hover .chat-menu-btn {
  opacity: 1;
}

.chat-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.chat-menu-dropdown {
  position: fixed;
  width: 180px;
  background: #1a2744;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
  z-index: 1000;
  display: none;
}

.chat-menu-dropdown.open {
  display: block;
}

.chat-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--transition-fast);
}

.chat-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.chat-menu-item.delete {
  color: #ef4444;
}

.chat-menu-item.delete:hover {
  background: rgba(239, 68, 68, 0.15);
}

.chat-menu-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Empty list state */
.empty-list {
  padding: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  text-align: center;
  font-style: italic;
}

/* Bulk chat selection (multi-select delete) */
.chat-selection-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 8px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.chat-selection-bar.active {
  display: flex;
}

.chat-selection-all {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
}

.chat-selection-all input[type="checkbox"] {
  accent-color: var(--accent-orange, #F97316);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

.chat-selection-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.chat-selection-cancel,
.chat-selection-delete {
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.chat-selection-cancel {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.chat-selection-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.chat-selection-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.chat-selection-delete:hover {
  background: rgba(239, 68, 68, 0.25);
}

.chat-selection-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-selection-cancel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.chat-selection-all input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-item.selectable .chat-item-select-label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
}

.chat-item.selectable .chat-item-select-label:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chat-item.selectable.selected .chat-item-select-label {
  background: rgba(249, 115, 22, 0.12);
  color: #FFFFFF;
}

.chat-item-checkbox {
  accent-color: var(--accent-orange, #F97316);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.new-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.new-chat-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.new-chat-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.05);
}

.new-chat-btn svg {
  width: 18px;
  height: 18px;
}

.new-chat-btn.logout-btn {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.15);
  color: #FCA5A5;
  margin-bottom: 8px;
}

.new-chat-btn.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.25);
  color: #FFFFFF;
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-main);
  transition: margin-left var(--transition-normal);
}

.sidebar.collapsed + .main-content,
.main-content.expanded {
  margin-left: 64px;
}

/* Chat Header */
.chat-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: 16px 24px;
  /* Sized by its content only -- never squeezed to make room for, nor
     stretched by, the scroll area between it and the input bar. */
  flex-shrink: 0;
}

.welcome-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.welcome-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}


.chat-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.chat-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* "Full Book" -- opens the whole book in the reader rather than the single
   chapter a citation points at. Sits in the title bar's right-hand action area
   beside the auth/admin clusters. Rendered hidden and revealed by init.js only
   for readers entitled to the book, so it must not claim layout while hidden
   ([hidden] is honoured by the flex display below via the attribute rule). */
.book-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.book-btn:hover {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.book-btn[hidden] {
  display: none;
}

.book-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* A <span>, not an <input>: it carries contenteditable for logged-in users and
   is plain text for public visitors. */
.chat-title-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  flex: 1;
  min-width: 0;
  transition: all 0.2s ease;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* An input reserved its own height; a span has to be told to. */
  display: block;
  line-height: 20px;
  min-height: 20px;
  cursor: default;
}

/* Only the editable copy should invite a click. */
/* Explicit, though .chat-title-input sets no display of its own: the guest view
   hides the title via the `hidden` attribute, and any future `display` rule added
   above would silently defeat the UA stylesheet's [hidden] { display: none }. */
.chat-title-input[hidden] {
  display: none;
}

.chat-title-input[contenteditable="true"] {
  cursor: text;
}

.chat-title-input[contenteditable="true"]:hover {
  background: var(--bg-chat);
}

.chat-title-input:focus {
  outline: none;
  background: var(--bg-white);
  border-color: var(--primary-blue);
}

/* Rename affordance. The title itself no longer carries contenteditable in
   the markup -- clicking this is the only way in, so a stray click on the
   title text can't accidentally start an edit. */
.chat-title-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.chat-title-edit-btn svg {
  width: 14px;
  height: 14px;
}

/* Hidden until the row is hovered/focused so the header doesn't stay busy at
   rest, but always shown once editing is underway. */
.chat-title-wrapper:hover .chat-title-edit-btn,
.chat-title-wrapper:focus-within .chat-title-edit-btn,
.chat-title-input[contenteditable="true"] ~ .chat-title-edit-btn {
  opacity: 1;
}

.chat-title-edit-btn:hover {
  color: var(--primary-blue);
  background: var(--bg-chat);
}

/* Guest-only "clear chat history". Unlike the rename affordance above this is
   NOT hover-revealed: a guest's transcript lives only in localStorage, so the
   control that clears it has to be discoverable without hunting for it. It is
   still understated at rest and only turns destructive-red on hover. */
.chat-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.chat-clear-btn[hidden] {
  display: none;
}

.chat-clear-btn svg {
  width: 13px;
  height: 13px;
}

.chat-clear-btn:hover {
  color: #dc2626;
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}

.chat-clear-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* The label is the affordance on desktop; on narrow screens the icon carries it
   so the header doesn't wrap. */
@media (max-width: 640px) {
  .chat-clear-btn span {
    display: none;
  }
  .chat-clear-btn {
    padding: 0 7px;
  }
}

.favourite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.favourite-btn svg {
  width: 18px;
  height: 18px;
}

.favourite-btn .star-filled {
  display: none;
}

.favourite-btn:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.favourite-btn.active {
  color: #f59e0b;
}

.favourite-btn.active .star-outline {
  display: none;
}

.favourite-btn.active .star-filled {
  display: block;
}

/* Ghost badge for the "chat moved to Favourites" animation. Freshly built
   markup, not a clone of the real .chat-item -- that element carries an
   onclick bound to this exact session id and a menu with a duplicate-prone
   id (menu-<sessionId>); cloning it into document.body would duplicate both. */
.favourite-fly-ghost {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 250;
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.3, 0.7, 0.4, 1), opacity 420ms ease;
}

.favourite-fly-ghost svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #f59e0b;
}

.favourite-fly-ghost span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auth Buttons for Public Users */
.auth-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-btn {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.auth-btn-login {
  background: transparent;
  color: #0f325c;
  border: 1px solid #0f325c;
}

.auth-btn-login:hover {
  background: rgba(15, 50, 92, 0.1);
}

.auth-btn-register {
  background: #0f325c;
  color: #ffffff;
  border: 1px solid #0f325c;
}

.auth-btn-register:hover {
  background: #051329;
  border-color: #051329;
}

/* Interview Me: filled bright like Sign Up (not the outlined Log In style),
   plus a glow that plays a few times on first render to draw the eye without
   looping forever. */
.auth-btn-interview {
  background: #0f325c;
  color: #ffffff;
  border: 1px solid #0f325c;
}

.auth-btn-interview:hover {
  background: #051329;
  border-color: #051329;
}

/* Added by chat_v2.html's inline script only the first time a visitor's
   browser has ever seen this button (tracked in localStorage). Loops until
   the script removes the class, after 30s or a click, whichever is first. */
.auth-btn-interview.glow-intro {
  animation: auth-btn-interview-glow 1.6s ease-in-out infinite;
}

@keyframes auth-btn-interview-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(15, 50, 92, 0); }
  50% { box-shadow: 0 0 14px 4px rgba(15, 50, 92, 0.55); }
}

/* Admin Buttons */
.admin-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 12px;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 1px solid;
}

/* Admin attachment button in chat input */
.admin-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #10B981;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  transition: all var(--transition-fast);
}

.admin-attach-btn:hover {
  background: #059669;
  transform: scale(1.05);
}

.admin-attach-btn svg {
  width: 18px;
  height: 18px;
}

/* Adjust input wrapper padding when admin button is present */
.input-wrapper:has(.admin-attach-btn) {
  padding-left: 6px;
}

.admin-download-btn {
  background: #0f325c;
  color: white;
  border-color: #0f325c;
}

.admin-download-btn:hover {
  background: #051329;
  border-color: #051329;
}

.admin-download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Stop is a destructive-ish action mid-run, so it reads red rather than
   borrowing the download button's navy. */
.admin-stop-btn {
  background: #B91C1C;
  color: #FFFFFF;
  border-color: #B91C1C;
}

.admin-stop-btn:hover:not(:disabled) {
  background: #991B1B;
  border-color: #991B1B;
}

/* Between the press and the current question landing. */
.admin-stop-btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

.admin-progress {
  font-size: 12px;
  font-weight: 600;
  /* Tabular figures stop the row jittering as the counter climbs through
     changing digit widths (9/27 -> 10/27). */
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  padding: 4px 8px;
  background: var(--bg-chat);
  border-radius: var(--radius-sm);
}

.admin-panel-btn {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  border: none !important;
}

.admin-panel-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(11, 25, 44, 0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #183861;
  transition: all var(--transition-fast);
}

.share-btn:hover {
  background: rgba(11, 25, 44, 0.12);
  color: #0f2440;
}

.share-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.share-btn:hover svg {
  transform: scale(1.08);
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  /* A flex item's automatic minimum size is min-content, not 0, so without
     this the scroll area refuses to shrink below its content height:
     overflow-y never engages and the column grows past the 100vh on
     .main-content, pushing .chat-input-area out of the viewport. */
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--bg-main);
  /* Fill from the top. An earlier revision used justify-content: flex-end to
     hug the input bar, but in a scroll container that breaks scrolling
     outright: overflow spills past the START edge, and browsers create no
     scrollable region there, so once a conversation exceeds the viewport the
     earlier messages are clipped off the top and unreachable. Top-aligned is
     also what scrollToBottom() in utils.js assumes. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.message {
  display: flex;
  margin-bottom: 16px;
  max-width: 720px;
}

.message.user {
  margin-left: auto;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.message.bot .message-avatar {
  background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-coral) 100%);
  color: white;
}

.message.user .message-avatar {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  color: white;
}

.message-content {
  flex: 1;
}

/* The one card boundary for an entire bot response -- text, reply-actions,
   podcast card, related-questions, starter chips (welcome message), all of
   it. Previously only .message-bubble (the text) had its own border/
   background; everything after it sat outside that box with no shared
   boundary, which is what made a multi-part response (answer + podcast +
   follow-ups) read as several loose, disconnected pieces rather than one
   self-contained reply paired with the user's question above it. Scoped to
   .message.bot only -- .message.user keeps its own bubble-only look
   (right-aligned, no actions/extras to group), untouched below. */
.message.bot .message-content {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  border-top-left-radius: 4px;
  padding: 12px 16px;
  /* Anchors .share-link-btn to this card's top-right corner. */
  position: relative;
}

/* "Copy link" lives in the answer card's top-right rather than in the
   bottom .reply-actions row: it acts on the whole response (share this
   answer) instead of being one more reaction to it, and the corner keeps it
   clear of the copy/feedback cluster. Only rendered when the answer has a
   question to link to, so the welcome bubble never shows one -- see
   buildShareButton in chat.js. */
.share-link-btn.action-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.share-link-btn.action-icon svg {
  width: 15px;
  height: 15px;
}

/* Revealed on hover/focus so it does not compete with the answer text, but
   kept permanently visible on touch devices, which have no hover state. */
.message.bot .message-content:hover .share-link-btn.action-icon,
.share-link-btn.action-icon:focus-visible,
.share-link-btn.action-icon.copied {
  opacity: 1;
}

@media (hover: none) {
  .share-link-btn.action-icon {
    opacity: 1;
  }
}

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.message-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
}

.message-bubble {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.5;
}

.message.bot .message-bubble {
  /* No background/border/radius of its own -- .message.bot .message-content
     above now carries the one card boundary for the whole response. */
  padding: 0;
  border-radius: 0;
  color: var(--text-primary);
}

.message.user .message-bubble {
  background: linear-gradient(90deg, #1a4a7a 0%, #0c2545 100%);
  border: 1px solid #0f325c;
  color: #e2e8f0;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.06);
  border-top-right-radius: 4px;
}


/* Typing Indicator */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Related Questions */
.related-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  max-width: 720px;
}

.question-chip {
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.question-chip:hover {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* Citation Pills */
.citation-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin: 0 2px;
  background-color: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 12px;
  text-decoration: none;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.citation-pill:hover {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}

.citation-pill .favicon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.citation-pill .citation-num {
  font-weight: 600;
  color: var(--primary-blue);
}

.citation-pill .citation-domain {
  font-weight: 500;
  color: var(--text-secondary);
}

/* Citation pills in user messages (dark background) */
.message.user .citation-pill {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}

.message.user .citation-pill:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.message.user .citation-pill .citation-num {
  color: #94a3b8;
}

.message.user .citation-pill .citation-domain {
  color: #e2e8f0;
}

.citation-source-link {
  color: var(--primary-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message.user .citation-source-link {
  color: #e2e8f0;
}

/* 'bothLevels' reveal button: nests inside the level1 answer's own
   .message-content, alongside its podcast card/related-questions (see
   chat.js's addNextLevelButton) -- a plain block-level child there, not a
   flex item, so no align-self/stretch concerns the way a top-level
   .chat-messages child would have. margin-top (not -bottom) because it's
   the closing element of that box, with nothing else following it inside
   .message-content. Sits below .reply-actions' own divider like every
   other section there.
   .level2-message (elevateToLevel2's own answer block, appended as a
   separate top-level entry after level1's) needs no styling of its own: it
   carries the same .message.bot markup as level1's card, so
   .message/.message-bubble above already give it identical spacing and
   appearance for free. */
/* Same pill shape/sizing as .question-chip (related questions), but with an
   explicit whitish background instead of var(--bg-white) -- that token is
   the SAME color as .message.bot .message-content's own card background
   (they're both var(--bg-white)), so a chip using it just blends into the
   card behind a barely-there border. rgba white (not flat #FFFFFF) reads as
   a lifted, slightly-brighter pill against that card in both themes, while
   still clearly a sibling of the related-question chips rather than an
   unrelated bold CTA. */
.next-level-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.next-level-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
}

/* A translucent white overlay reads as a lifted pill against the dark card
   background above (the default this app is normally seen in), but the same
   overlay would wash out to near-invisible on light theme's white card --
   the exact bug this button already had once. Swap to a visible tinted gray
   there instead. */
[data-theme="light"] .next-level-btn {
  background: #F3F4F6;
  border-color: var(--border-medium);
}

[data-theme="light"] .next-level-btn:hover {
  background: #E5E7EB;
  border-color: var(--border-medium);
}

/* Reply Actions Toolbar */
.reply-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  margin-top: 4px;
}

/* The one divider between the answer+actions and whatever follows inside
   this same .message-content -- a podcast card, related-questions chips,
   and/or the level2 "next-level-btn" reveal (see chat.js's renderAnswerExtras
   and addNextLevelButton). Living on .reply-actions itself, gated by
   :not(:last-child), means exactly one line appears exactly when there IS
   something after it, regardless of which of those sections (one, several,
   or none) actually rendered -- instead of each section trying to carry its
   own top border, which either double-lines when two stack or shows no line
   at all when the section that would have carried it isn't the one present. */
.reply-actions:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}

.action-group,
.feedback-group {
  display: flex;
  gap: 2px;
}

.action-divider {
  width: 1px;
  height: 14px;
  background-color: var(--border-medium);
  margin: 0 4px;
}

.action-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-icon svg {
  width: 16px;
  height: 16px;
}

.action-icon:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.06);
}

.action-icon.active-up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.action-icon.active-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.action-icon.copied {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.action-icon.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Feedback Modal */
.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.feedback-modal {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 450px;
  overflow: hidden;
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.feedback-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.feedback-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.feedback-close-btn:hover {
  color: var(--text-primary);
}

.feedback-modal-body {
  padding: 20px;
}

.feedback-modal-body textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.feedback-modal-body textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.feedback-modal-body textarea::placeholder {
  color: var(--text-muted);
}

.feedback-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-chat);
}

.feedback-cancel-btn,
.feedback-submit-btn {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.feedback-cancel-btn {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
}

.feedback-cancel-btn:hover {
  background: var(--bg-chat);
  border-color: var(--text-muted);
}

.feedback-submit-btn {
  background: var(--primary-blue);
  border: none;
  color: white;
}

.feedback-submit-btn:hover {
  background: #2563eb;
}

/* Feedback Expandable Card */
.feedback-expandable-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background-color: var(--bg-chat);
  border-radius: 10px;
  border: 1px solid var(--border-light);
  margin-top: 8px;
}

.feedback-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.chip-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.chip.selected {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  font-weight: 500;
}

.feedback-text {
  width: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  resize: none;
  transition: border-color 0.2s ease;
}

.feedback-text:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.feedback-text::placeholder {
  color: var(--text-muted);
}

.card-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cancel-feedback-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-feedback-btn:hover {
  background: var(--bg-chat);
  color: var(--text-primary);
}

.send-feedback-btn {
  background: var(--primary-blue);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.send-feedback-btn:hover {
  background: var(--primary-blue-hover);
}

/* Podcast Player */
.podcast-card {
  width: 100%;
  max-width: 520px;
  padding: 18px 24px;
  border-radius: 18px;
  background: linear-gradient(90deg, #c24d24 0%, #4a2d45 45%, #051329 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  margin-top: 12px;
}

.podcast-text {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.2px;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #f7dcd0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.play-btn:hover {
  transform: scale(1.04);
  background-color: #ffffff;
}

.play-btn svg {
  width: 22px;
  height: 22px;
  color: #121212;
  margin-left: 3px;
}

.podcast-info {
  flex: 1;
  min-width: 0;
}

/* Nested inside the answer's own .message-content (see chat.js's
   renderAnswerExtras). The divider above this section (when it's not the
   only thing following the answer) lives on .reply-actions, not here -- see
   its ":not(:last-child)" rule -- so this is spacing only; .podcast-card's
   own margin-top adds the rest of the breathing room before the gradient
   card itself. */
.podcast-message {
  margin-top: 4px;
}

/* Multi-result pick-list, shown when the backend returns an array of matching
   podcasts instead of a single one. Sits on the same gradient card as the
   single-podcast player; choosing an entry expands that podcast's full player
   beneath the list. */
.podcast-list-message {
  margin-top: 4px;
}

/* selectFromList expands one entry's full player right after the list
   itself (see insertPodcastCard's "afterend" fallback) -- a plain sibling
   spacing case, nothing to zero out now that neither rule above carries a
   border. */
.podcast-list-message + .podcast-message {
  margin-top: 12px;
}

/* Fixed-height, scrollable pick-list. The catalogue is expected to grow from
   ~15 to 30-50 episodes, and an unbounded list would push the whole chat
   off-screen. Roughly 4-5 entries are visible at once; the rest scroll inside
   the card. min() keeps it from taking most of the viewport on short screens.
   The card heading ("We found N podcasts...") stays outside the scroll area. */
.podcast-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(60vh, 380px);
  overflow-y: auto;
  /* Room for the scrollbar so it never overlaps entries, and for the 1px hover
     lift + border on the first/last entry, which overflow clipping would cut. */
  padding: 2px 6px 2px 0;
  /* Thin, translucent scrollbar that reads on the gradient card. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

.podcast-list::-webkit-scrollbar {
  width: 6px;
}

.podcast-list::-webkit-scrollbar-track {
  background: transparent;
}

.podcast-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.podcast-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.podcast-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Never shrink to fit the scroll area -- overflow and scroll instead. */
  flex-shrink: 0;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font-family: inherit;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.podcast-list-item:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

/* Marks the entry whose player is already open below. */
.podcast-list-item.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.podcast-list-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.85);
}

.podcast-list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.podcast-list-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.podcast-list-desc {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

/* Podcast Header with Title and Date */
.podcast-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.podcast-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

.podcast-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.podcast-description {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* Audio Controls Row - All in one line */
.audio-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 10px;
  flex-wrap: wrap;
}

.progress-bar {
  flex: 1;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  transition: width 0.1s ease;
}

.volume-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.volume-btn:hover {
  opacity: 1;
}

.volume-btn svg {
  width: 26px;
  height: 26px;
}

/* Related Questions. The divider above this section (when it's not the only
   thing following the answer) lives on .reply-actions, not here -- see its
   ":not(:last-child)" rule -- so this is spacing only. */
.related-questions {
  margin-top: 16px;
}

.related-questions-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.related-question-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--bg-chat);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.related-question-btn:hover {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* Input Area */
.chat-input-area {
  background: var(--bg-white);
  border-top: 1px solid var(--border-light);
  padding: 14px 24px;
  flex-shrink: 0;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: 28px;
  padding: 6px 8px;
  transition: border-color var(--transition-fast);
}

.input-wrapper:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-light);
}

.chat-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  max-height: 150px;
  overflow-y: auto;
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.input-shortcut {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px;
  margin-left: 8px;
  white-space: nowrap;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mic-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid rgba(11, 25, 44, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(11, 25, 44, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mic-btn .mic-icon {
  width: 20px;
  height: 20px;
  color: #0b192c;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mic-btn:hover {
  background-color: #f8fafc;
  border-color: rgba(11, 25, 44, 0.25);
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(11, 25, 44, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.mic-btn:hover .mic-icon {
  color: #183861;
  transform: scale(1.08);
}

.mic-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(11, 25, 44, 0.08);
}

.mic-btn.recording {
  background: #FEE2E2;
  border-color: #EF4444;
}

.mic-btn.recording .mic-icon {
  color: #EF4444;
}

.input-btn-inline {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.input-btn-inline .input-icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.input-btn-inline:hover {
  background: rgba(11, 25, 44, 0.06);
}

.input-btn-inline:hover .input-icon {
  color: #183861;
  transform: scale(1.08);
}

.input-btn-inline.recording {
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-recording 1.5s ease-in-out infinite;
}

.input-btn-inline.recording .input-icon {
  color: #EF4444;
}

@keyframes pulse-recording {
  0%, 100% {
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1);
  }
  50% {
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
  }
}

.send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #183861 0%, #0a192f 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.send-btn:hover {
  background: linear-gradient(145deg, #20487c 0%, #0d213d 100%);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.send-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.send-btn .send-icon {
  width: 20px;
  height: 20px;
  color: #e2e8f0;
  transform: translate(-1px, 1px);
  transition: transform 0.2s ease, color 0.2s ease;
}

.send-btn:hover .send-icon {
  color: #ffffff;
  transform: translate(1px, -1px);
}

/* Mobile Menu */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn svg {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  /* Fix mobile viewport height issues - use dvh for dynamic viewport */
  .app-container {
    height: 100dvh; /* Dynamic viewport height - accounts for mobile browser UI */
    min-height: -webkit-fill-available; /* Fallback for older iOS */
  }

  .main-content {
    margin-left: 0;
    height: 100dvh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    transform: translateX(-100%);
    height: 100dvh;
    min-height: -webkit-fill-available;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Collapsing is a desktop-only idea -- at this width the sidebar is a drawer
     that is either open or shut. sidebar.js already refuses to set .collapsed
     here (and clears it on the way down from a wider viewport); these two
     override the base rules so a stale one cannot bite even so.

     The .main-content pair in particular is not merely defensive: the base
     `.main-content.expanded` is (0,2,0) and outranks this block's own
     `.main-content { margin-left: 0 }` at (0,1,0), so a leftover .expanded
     held a 64px gutter open beside an off-canvas drawer -- an empty strip down
     the side of the chat with nothing in it. */
  .sidebar.collapsed {
    width: var(--sidebar-width);
  }

  .sidebar.collapsed + .main-content,
  .main-content.expanded {
    margin-left: 0;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .chat-header {
    padding: 16px;
    flex-shrink: 0; /* Don't let header shrink */
  }

  .chat-messages {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Important for flex children with overflow */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .chat-input-area {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* Safe area for notched phones */
    flex-shrink: 0; /* Prevent input from shrinking */
    position: relative;
    background: var(--bg-white);
  }

  .input-wrapper {
    min-height: 44px; /* Minimum touch target size */
  }

  .chat-input {
    font-size: 16px; /* Prevents zoom on iOS when focusing input */
  }

  .welcome-title {
    font-size: 20px;
  }

  .auth-buttons {
    gap: 6px;
  }

  .auth-btn {
    padding: 6px 12px;
    font-size: 13px;
  }



  /* Icon only: the title bar is already carrying the chat title, the rename
     and favourite controls and the sidebar toggle at this width, and the book
     icon is self-explanatory next to them. The accessible name stays on the
     button's aria-label, so dropping the visible text costs nothing there. */
  .book-btn {
    padding: 6px 10px;
  }

  .book-btn-label {
    display: none;
  }

}

/* Phone only (tablet and desktop keep the single-row title bar): public
   visitors get Log In / Sign Up on the first row and Interview Me, plus the
   Clear button once there is history to clear, on a second row below, both
   right-aligned. The title wrapper is what carries Interview Me, so it is
   the thing that drops a row. */
@media (max-width: 640px) {
  .chat-title-bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .chat-title-bar .auth-buttons {
    order: 1;
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .chat-title-bar .chat-title-wrapper {
    order: 2;
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}

/* Button icons only exist for the phone layout below. */
.auth-btn-icon {
  display: none;
}

/* Public (guest) page on a phone: brand header, a full-width Interview Me over
   side-by-side Log In / Sign Up, and full-width starter prompts. Kept compact so
   the header leaves most of the screen for the chat.
   Everything is scoped to .no-sidebar (public only) inside the phone breakpoint,
   so desktop, tablet and the signed-in pages are untouched. */
@media (max-width: 640px) {
  .app-container.no-sidebar .chat-header {
    padding: 10px 12px;
  }

  .app-container.no-sidebar .welcome-section {
    gap: 10px;
    padding-right: 44px; /* clear the fixed theme toggle */
    margin-bottom: 8px;
  }

  .app-container.no-sidebar .welcome-section .brand-logo--tile {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 9px;
  }

  /* Phone shows just the product name. */
  .app-container.no-sidebar .welcome-prefix {
    display: none;
  }

  .app-container.no-sidebar .welcome-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
  }

  body:has(.app-container.no-sidebar) .theme-toggle {
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .app-container.no-sidebar .chat-title-bar {
    margin-right: 0;
    padding: 8px;
    row-gap: 6px;
  }

  .app-container.no-sidebar .chat-title-bar .chat-title-wrapper {
    order: 1;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .app-container.no-sidebar .chat-title-bar .auth-buttons {
    order: 2;
    flex: 1 1 100%;
    justify-content: stretch;
    gap: 8px;
  }

  .app-container.no-sidebar .auth-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
  }

  .app-container.no-sidebar .auth-btn-interview {
    flex: 1 1 auto;
  }

  .app-container.no-sidebar .auth-btn-icon {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }

  .app-container.no-sidebar .suggestions-buttons {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .app-container.no-sidebar .suggestion-chip {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 16px;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message {
  animation: fadeIn 0.3s ease;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 8px;
}

.gap-4 {
  gap: 16px;
}

/* Limit Modal */
.limit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above .pdf-modal-overlay (z-index: 1001): pdf.js calls showLimitModal
     while the PDF viewer is still open behind it, so this has to win. */
  z-index: 1002;
}

.limit-modal {
  position: relative;
  background: var(--bg-white);
  border-radius: 16px;
  padding: 32px 40px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Same cross the retired templates/public_chat.html used (.modal-close-btn):
   plain "x", top-right, no button chrome. */
.limit-modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s ease;
}

.limit-modal-close-btn:hover {
  color: var(--text-primary, #333);
}

.limit-modal h2 {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.limit-modal p {
  margin: 0 0 24px 0;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.limit-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.limit-modal .btn-primary {
  background: var(--primary-blue);
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}

.limit-modal .btn-primary:hover {
  background: var(--primary-blue-hover);
}

.limit-modal .btn-secondary {
  background: var(--bg-light);
  color: var(--text-primary);
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border-medium);
  transition: background 0.2s ease;
}

.limit-modal .btn-secondary:hover {
  background: var(--border-light);
}

/* PDF Modal */
.pdf-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.pdf-modal {
  background: var(--bg-white);
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.pdf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
}

.pdf-filename {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.pdf-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 0 8px;
  transition: color 0.2s ease;
}

.pdf-close-btn:hover {
  color: var(--text-primary);
}

.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdf-page-counter {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pdf-tool-btn {
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pdf-tool-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.pdf-modal-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--bg-chat);
  /* Row so the chapter sidebar can sit beside the pages. With the sidebar
     hidden (the plain viewer) the container simply takes the full width. */
  display: flex;
}

/* Owns the spinner's positioning context, so a chapter switch dims only the
   pages and leaves the sidebar usable. */
.pdf-page-area {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Scroll container for the rendered pages. */
#pdfContainer {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  /* Prepending a chapter is compensated for in JS (appendSegment). Chrome's
     scroll anchoring would silently do the same thing, and the two corrections
     stack -- which threw the reader forward by about a chapter's height every
     time the previous chapter loaded. One corrector only. */
  overflow-anchor: none;
}

/* ── Book mode: chapter sidebar ── */

/* Wider than the plain viewer so the sidebar does not eat the page area. */
.pdf-modal.book-mode {
  max-width: 1180px;
}

/* Must outrank the `display: flex` below, or the `hidden` attribute pdf.js sets
   for non-book readers loses the cascade and leaves an empty 232px gutter --
   the UA's own [hidden] rule is only a class-strength selector. */
.pdf-chapters[hidden] {
  display: none;
}

.pdf-chapters {
  flex: 0 0 232px;
  height: 100%;
  overflow-y: auto;
  padding: 16px 12px;
  border-right: 1px solid var(--border-light);
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdf-chapters-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 10px 8px;
}

.pdf-chapter-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pdf-chapter-item:hover {
  background: var(--bg-chat);
}

.pdf-chapter-item.active {
  background: var(--primary-blue);
  color: #ffffff;
}

/* ── Horizontal chapter strip ──
   Mobile/tablet-only fallback for the sidebar above: below the breakpoint
   where that becomes an off-canvas drawer, this sits under the header instead
   as a scrollable row of chapter pills, so a reader who never notices the
   hamburger can still get to another chapter by swiping sideways. Hidden by
   default and unhidden only alongside .pdf-chapters, in lockstep, by
   renderSidebar() in pdf.js -- same book-mode-only condition, just a second
   element. Must outrank the flex/inline-flex below for the same reason as
   .pdf-chapters[hidden]: the UA's own [hidden] rule is only class-strength. */
.pdf-chapters-strip[hidden] {
  display: none;
}

.pdf-chapters-strip {
  display: none;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  /* A scrollable row with no visible affordance reads as "that's the whole
     list" -- the fade at each edge is the only hint there is more off-screen. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

/* Below the sidebar's inline breakpoint (1024px, matched to
   CHAPTERS_INLINE_QUERY in pdf.js) AND only in book mode -- the plain
   single-document viewer never gets a strip, same as it never gets a
   sidebar. */
@media (max-width: 1024px) {
  .pdf-modal.book-mode .pdf-chapters-strip:not([hidden]) {
    display: flex;
  }
}

.pdf-chapter-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--bg-chat);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pdf-chapter-pill:hover {
  background: var(--border-light);
}

.pdf-chapter-pill.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #ffffff;
}

/* Marks where one chapter's document ends and the next begins in the
   continuous scroll, so crossing a boundary still reads as a chapter break. */
.pdf-chapter-divider {
  align-self: stretch;
  margin: 20px 24px 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pdf-chapter-divider:first-child {
  margin-top: 0;
}

/* Guests hitting a truncated document: a persistent bar at the foot of the
   viewer (not a toast -- it should stay up the whole time they're reading a
   truncated doc, not flash and vanish), linking to signup with the full-book
   request checkbox pre-checked. Toggled by pdf.js's updateFullAccessBanner();
   [hidden] wins over the flex display below when it isn't applicable. */
.pdf-full-access-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  background: #b91c1c;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}

.pdf-full-access-banner[hidden] {
  display: none;
}

.pdf-full-access-banner a {
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-decoration: underline;
}

.pdf-full-access-banner a:hover {
  text-decoration: none;
}

/* Landing indicator: pops in oversized, shrinks as it settles to the foot of
   the viewer, holds, then fades. Purely informational, so it never takes
   pointer events away from the page underneath. */
.pdf-page-toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  /* Above .pdf-full-access-banner (z-index: 4) -- that banner sits at the
     very bottom of the viewer too, and without this the toast's pop-in
     animation rendered underneath it, invisible, instead of over it. */
  z-index: 5;
  padding: 10px 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  /* A chapter title can be long, so it wraps rather than running off the
     viewer; the page line below it stays on one line regardless. */
  max-width: min(420px, 80%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  /* Governs the fade-out when .is-visible is dropped. */
  transition: opacity 300ms ease;
}

/* Steady state while the reader is turning pages. */
.pdf-page-toast.is-visible {
  opacity: 1;
}

.pdf-page-toast-chapter {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.pdf-page-toast-page {
  font-size: 15px;
  white-space: nowrap;
}

/* Alongside a chapter name the page count is the supporting detail, so it
   steps back rather than competing. */
.pdf-page-toast.has-chapter .pdf-page-toast-page {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.72;
}

/* Plays only when the indicator arrives, not on every page turn -- see
   flashPageIndicator(). Ends exactly on the .is-visible resting state, so it
   settles rather than snapping when the animation finishes. */
.pdf-page-toast.is-pop {
  animation: pdfPageToast 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pdfPageToast {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-52px) scale(2.4);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-page-toast.is-pop {
    animation: none;
  }
}

/* Drawer toggle: hidden outside book mode (there is nothing to open) at every
   screen size, including desktop -- the sidebar collapses there too, it just
   collapses to nothing (display:none) rather than sliding off-canvas, since
   there is no need to overlay content it was never covering. Visibility is
   driven purely by CSS rather than a `hidden` attribute, which a class-level
   `display` would silently override. */
.pdf-chapters-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.pdf-modal.book-mode .pdf-chapters-toggle {
  display: inline-flex;
}

/* Desktop collapse: no overlay/backdrop needed here (unlike the drawer below)
   because the sidebar sits inline in the flex row rather than covering the
   pages -- collapsing it just gives that flex space back to .pdf-page-area.
   OPEN by default at this width: pdf.js adds .chapters-open when it opens the
   viewer on a screen this wide (chaptersAreInline(), which matches the 1025px
   below and must be changed with it). The drawer below still starts closed --
   there the sidebar would cover the page it was opened to read. */
@media (min-width: 1025px) {
  .pdf-modal.book-mode .pdf-chapters {
    display: none;
  }

  .pdf-modal.book-mode.chapters-open .pdf-chapters {
    display: flex;
  }
}

.pdf-chapters-toggle svg {
  width: 18px;
  height: 18px;
}

.pdf-chapters-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Above the spinner (2) and the page indicator (3): when the drawer is open it
   is the only thing meant to be interactive. */
.pdf-chapters-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.45);
}

/* The filename has to yield space to the toolbar rather than pushing it off
   the edge on a narrow header. */
.pdf-filename {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tablet and phone: the sidebar becomes a collapsible drawer OVER the
   pages (position:absolute + slide + backdrop) instead of the desktop
   collapse above, which just gives back inline flex space. There is no room
   to spare at these widths to shrink the pages further, so the drawer floats
   on top instead. Collapsed is still the starting state for free -- .pdf-
   chapters is off-canvas (translateX(-100%)) unless .chapters-open is
   present, and nothing here adds that class automatically. Phone-only
   refinements (edge-to-edge modal, thumb-sized targets, smaller type) live in
   the narrower block below; this one is the shared drawer mechanics both
   sizes use. ── */
@media (max-width: 1024px) {
  .pdf-modal,
  .pdf-modal.book-mode {
    width: 96%;
    max-width: none;
    height: 92vh;
  }

  .pdf-chapters {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 6;
    flex-basis: auto;
    width: min(70%, 320px);
    transform: translateX(-100%);
    transition: transform 240ms ease;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3);
  }

  .pdf-modal.chapters-open .pdf-chapters {
    transform: translateX(0);
  }

  .pdf-modal.chapters-open .pdf-chapters-backdrop {
    display: block;
  }
}

/* ── Phone: edge-to-edge modal and touch-sized refinements, on top of the
   drawer mechanics above (this block still matches, being narrower). ── */
@media (max-width: 720px) {
  .pdf-modal-overlay {
    /* Edge-to-edge; a centred card wastes screen a phone cannot spare. */
    align-items: stretch;
    justify-content: stretch;
  }

  .pdf-modal,
  .pdf-modal.book-mode {
    width: 100%;
    max-width: none;
    height: 100vh;
    /* Accounts for mobile browser chrome that appears and disappears. */
    height: 100dvh;
    border-radius: 0;
  }

  .pdf-modal-header {
    padding: 12px 14px;
  }

  .pdf-filename {
    font-size: 14px;
  }

  .pdf-page-counter {
    min-width: 0;
    font-size: 12px;
  }

  .pdf-chapters {
    width: min(80%, 300px);
  }

  .pdf-chapter-item {
    /* Comfortable thumb target. */
    padding: 12px 12px;
    font-size: 14px;
  }

  .pdf-chapters-strip {
    padding: 8px 12px;
  }

  .pdf-chapter-pill {
    /* Comfortable thumb target, same reasoning as .pdf-chapter-item above. */
    padding: 8px 14px;
    font-size: 13px;
  }

  .pdf-chapter-divider {
    margin: 16px 14px 4px;
  }

  #pdfContainer {
    gap: 10px;
    padding: 10px 0;
  }

  .pdf-page-toast {
    bottom: 20px;
    padding: 9px 18px;
    max-width: 88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-chapters {
    transition: none;
  }
}

/* One sized placeholder per page; the canvas is added when it scrolls near. */
.pdf-page {
  position: relative;
  flex: none;
  max-width: 100%;
  background: var(--bg-white);
  box-shadow: var(--shadow-md);
  border-radius: 2px;
  scroll-margin-top: 16px;
}

.pdf-page canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Brief flash on the page a citation pointed at. */
.page-highlight {
  outline: 3px solid var(--primary-blue);
  outline-offset: 2px;
  transition: outline-color 600ms ease;
}

.pdf-status {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.pdf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-chat);
  z-index: 2;
}

.pdf-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: pdf-spin 700ms linear infinite;
}

@keyframes pdf-spin {
  to { transform: rotate(360deg); }
}

/* Podcast Player Enhancements */
.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.podcast-card audio {
  display: none;
}

/* Seek Bar */
.seek-bar {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.seek-track {
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.seek-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f7dcd0, #ffffff);
  border-radius: 10px;
  transition: width 0.05s linear;
}

.seek-thumb {
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  pointer-events: none;
}

.seek-bar:hover .seek-thumb,
.seek-bar.seeking .seek-thumb {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.seek-bar:hover .seek-track,
.seek-bar.seeking .seek-track {
  height: 7px;
}

.seek-bar.seeking .seek-fill {
  transition: none;
}

/* Audio Player Container */
.audio-player-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Replaces the whole player when the audio can't be loaded (backend 404, or
   the <audio> element's own error event -- e.g. a SAS URL that Azure still
   returns but the underlying blob doesn't exist). Previously this only
   changed the small duration label to "Error loading", which was easy to
   miss and left the play button sitting there looking clickable. */
.podcast-load-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-size: 13px;
}

.podcast-load-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Skip Buttons */
.skip-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
}

.skip-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.skip-btn svg {
  width: 18px;
  height: 18px;
}

.skip-label {
  font-size: 11px;
  font-weight: 600;
}

/* Secondary Controls Row */
.audio-secondary-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Volume Control */
.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.volume-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.volume-btn:hover {
  color: #ffffff;
}

.volume-btn svg {
  width: 20px;
  height: 20px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Speed Control */
.speed-control {
  display: flex;
  align-items: center;
}

.speed-select {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #ffffff;
  padding: 6px 24px 6px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='white'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all 0.2s ease;
}

.speed-select:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

.speed-select:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

.speed-select option {
  background: #333;
  color: #ffffff;
}

/* Top Questions / Suggestion Chips */
/* Nested inside the welcome message's own .message-content now (see
   sessions.js/chat.js passing introMessage into showTopQuestions), so this
   no longer needs its own card -- the outer .message.bot .message-content
   already provides one, and stacking a second bordered/padded box inside it
   would just double up. The divider above this section (when it's not the
   only thing following the intro text) lives on .reply-actions, not here. */
.top-questions {
  margin-top: 16px;
  animation: fadeIn 0.3s ease;
}

.suggestions-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.suggestions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.suggestion-chip {
  background: var(--bg-chat);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  line-height: 1.4;
}

.suggestion-chip:hover {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.suggestion-chip:active {
  transform: translateY(0);
}

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 32px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.theme-toggle:hover {
  background: var(--bg-chat);
  box-shadow: var(--shadow-md);
  transform: scale(1.05);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

/* Dark theme sidebar adjustments */
[data-theme="dark"] .sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(30, 58, 95, 0.5) 0%, transparent 38%),
    radial-gradient(circle at 100% 100%, #1e3a5f 0%, transparent 60%),
    linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
}

[data-theme="dark"] .welcome-title {
  color: var(--text-primary);
}

/* Dark theme input area */
[data-theme="dark"] .chat-input-area {
  background: var(--bg-white);
  border-color: var(--border-light);
}

[data-theme="dark"] .input-wrapper {
  background: var(--bg-input);
  border-color: var(--border-light);
}

[data-theme="dark"] .chat-input {
  background: transparent;
  color: var(--text-primary);
}

[data-theme="dark"] .chat-input::placeholder {
  color: var(--text-muted);
}

/* Dark theme chat header */
[data-theme="dark"] .chat-header {
  background: var(--bg-white);
  border-color: var(--border-light);
}

[data-theme="dark"] .chat-title-bar {
  background: var(--bg-main);
  border-color: var(--border-light);
}

/* Dark theme auth buttons */
[data-theme="dark"] .auth-btn-login {
  color: #60A5FA;
  border-color: #60A5FA;
}

[data-theme="dark"] .auth-btn-login:hover {
  background: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .auth-btn-register {
  background: #60A5FA;
  color: #0F172A;
  border-color: #60A5FA;
}

[data-theme="dark"] .auth-btn-register:hover {
  background: #3B82F6;
  border-color: #3B82F6;
}

[data-theme="dark"] .auth-btn-interview {
  background: #60A5FA;
  color: #0F172A;
  border-color: #60A5FA;
}

[data-theme="dark"] .auth-btn-interview:hover {
  background: #3B82F6;
  border-color: #3B82F6;
}

[data-theme="dark"] .auth-btn-interview.glow-intro {
  animation-name: auth-btn-interview-glow-dark;
}

@keyframes auth-btn-interview-glow-dark {
  0%, 100% { box-shadow: 0 0 0 rgba(96, 165, 250, 0); }
  50% { box-shadow: 0 0 14px 4px rgba(96, 165, 250, 0.6); }
}

/* Dark theme admin buttons */
[data-theme="dark"] .admin-progress {
  background: var(--bg-input);
  color: var(--text-secondary);
}

[data-theme="dark"] .admin-download-btn {
  background: #60A5FA;
  color: #0F172A;
  border-color: #60A5FA;
}

[data-theme="dark"] .admin-download-btn:hover {
  background: #3B82F6;
  border-color: #3B82F6;
}

/* Dark theme feedback modal */
[data-theme="dark"] .feedback-modal {
  background: var(--bg-white);
  border-color: var(--border-light);
}

[data-theme="dark"] .feedback-textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* Dark theme scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-main);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-medium);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* No sidebar layout for public users */
.app-container.no-sidebar .main-content {
  margin-left: 0;
  width: 100%;
}

/* Toast notifications ------------------------------------------------------
   Container/toasts are created on demand by JobBot.utils.showToast(); nothing
   here needs to exist in the template. */
.toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  /* Anchored to the top, so plain `column` puts the newest toast below the
     ones already showing -- reading order follows arrival order. */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}

/* Deliberately NOT theme-tokened. Painting the toast with --bg-white/
   --text-primary made it dark-on-dark in dark mode, leaving only a 3px stripe
   to find it by. A notification has to read as an overlay on top of the page
   rather than as part of it, so these are fixed semantic colours that hold
   their contrast in both themes. */
.toast {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: #15803D;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  /* Enters by sliding down from above, matching the top anchor. */
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast-error {
  background: #B91C1C;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}