/* 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-logo {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  user-select: none;
}

.brand-logo .letter-j {
  color: #ffffff;
}

.brand-logo .letter-b {
  color: #a87661;
}

.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;
}

.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 {
  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);
  margin-right: 60px;
}

.chat-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 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. */
.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);
}

.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;
}

/* 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;
}

.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 {
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-top-left-radius: 4px;
}

.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;
}

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

.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;
}

.podcast-message {
  margin-top: 8px;
}

/* 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: 8px;
}

.podcast-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.podcast-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  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 */
.related-questions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.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);
  }

  .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;
  }

  .chat-title-bar {
    margin-right: 50px;
  }

}

/* 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;
  z-index: 1000;
}

.limit-modal {
  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);
}

.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);
}

/* Scroll container for the rendered pages. */
#pdfContainer {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

/* 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;
}

/* 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 */
.top-questions {
  max-width: 720px;
  padding: 24px;
  margin: 20px 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  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;
}

/* 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%;
}

.app-container.no-sidebar .chat-title-bar {
  margin-right: 60px;
}

/* 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);
}