/**
 * MHQ v5 - My Health Questions Redesign
 * Dual-theme support: Health Chat (Purple) / Clinical Trials (Teal)
 */

/* ========================================
   CSS Variables - Theme System
   ======================================== */

:root {
  /* Health Chat Mode Colors (Blue) */
  --hc-primary: #3B49B5;
  --hc-primary-light: #616ED9;
  --hc-primary-dark: #2D3A8F;
  --hc-sidebar-bg: #DBE9FB;
  --hc-accent-bg: #F5F3FA;
  --hc-btn-active-bg: #3B49B5;
  --hc-btn-create-profile: #3B49B5;
  --hc-btn-voice-chat: #3B49B5;

  /* Clinical Trials Mode Colors (Teal) */
  --ct-primary: #2B9B9B;
  --ct-primary-light: #4BB5B5;
  --ct-primary-dark: #1F7A7A;
  --ct-sidebar-bg: #E5F5F5;
  --ct-accent-bg: #C5E9E9;
  --ct-btn-active-bg: #2B9B9B;
  --ct-badge-bg: #D4FDFF;

  /* Dynamic Theme Variables (Default: Health Chat) */
  --primary-color: var(--hc-primary);
  --primary-light: var(--hc-primary-light);
  --primary-dark: var(--hc-primary-dark);
  --sidebar-bg: var(--hc-sidebar-bg);
  --accent-bg: var(--hc-accent-bg);
  --btn-active-bg: var(--hc-btn-active-bg);
  --btn-create-profile: var(--hc-btn-create-profile);
  --btn-voice-chat: var(--hc-btn-voice-chat);


  /* Neutral Colors */
  --white: #FFFFFF;
  --gray-50: #F8F9FA;
  --gray-100: #F0F3F7;
  --gray-200: #E0E0E0;
  --gray-300: #D0D0D0;
  --gray-400: #A0A0A0;
  --gray-500: #666666;
  --gray-600: #4A4A4A;
  --gray-700: #333333;
  --gray-800: #1A1A1A;
  --black: #000000;

  /* Text Colors */
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-inverse: #FFFFFF;

  /* Message Colors */
  --user-bubble-bg: #E8F2FB;
  --user-bubble-text: #1A1A1A;
  --bot-text: #1A1A1A;

  /* Status Colors */
  --success: #28A745;
  --warning: #FFC107;
  --error: #DC3545;
  --info: #17A2B8;

  /* Layout Dimensions */
  --sidebar-width: 340px;
  --profile-drawer-width: 400px;
  --trials-drawer-width: 450px;
  --header-height: 60px;
  --input-area-height: 120px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 15px 30px rgba(0, 0, 0, 0.2);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-small-button: 10px;
  --radius-button: 14px;

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-tooltip: 1200;
}

/* Clinical Trials Mode Theme Override */
.mhq-app-container.clinical-trials-mode {
  --primary-color: var(--ct-primary);
  --primary-light: var(--ct-primary-light);
  --primary-dark: var(--ct-primary-dark);
  --accent-bg: var(--ct-accent-bg);
  --btn-active-bg: var(--ct-btn-active-bg);
}

/* Keep sidebar profile icons blue in Clinical Trials mode */
.mhq-app-container.clinical-trials-mode .profile-dropdown-btn .profile-icon,
.mhq-app-container.clinical-trials-mode .sidebar-profile-item .profile-icon,
.mhq-app-container.clinical-trials-mode .popup-profile-item .profile-icon {
  background-color: var(--hc-primary);
}

.mhq-app-container.clinical-trials-mode .sidebar-profile-item.active .profile-icon,
.mhq-app-container.clinical-trials-mode .popup-profile-item.active .profile-icon {
  background-color: var(--white);
}

.mhq-app-container.clinical-trials-mode .sidebar-profile-item.active .profile-icon svg,
.mhq-app-container.clinical-trials-mode .popup-profile-item.active .profile-icon svg {
  color: var(--hc-primary);
}

/* Keep create profile button hover consistent in Clinical Trials mode */
.mhq-app-container.clinical-trials-mode .create-profile-btn:hover {
  background-color: var(--gray-50);
}

/* ========================================
   Base Reset & Typography
   ======================================== */

.mhq-app-container {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mhq-app-container *,
.mhq-app-container *::before,
.mhq-app-container *::after {
  box-sizing: inherit;
}

.mhq-app-container button {
  font-family: inherit;
  cursor: pointer;
}

.mhq-app-container input,
.mhq-app-container textarea,
.mhq-app-container select {
  font-family: inherit;
  font-size: inherit;
}

/* ========================================
   Main Layout Container
   ======================================== */

.mhq-app-container {
  display: flex;
  height: 100vh; /* Fallback for older browsers */
  height: 100dvh; /* Dynamic viewport - adjusts for browser chrome */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: var(--white);
  overflow: hidden;
}

/* Mobile Layout - Stack vertically */
@media (max-width: 992px) {
  .mhq-app-container {
    flex-direction: column;
  }
}

/* ========================================
   Sidebar
   ======================================== */

.mhq-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 20px 30px 48px;
  transition: background-color var(--transition-normal);
  overflow-y: auto;
  overflow-x: hidden;
  order: 0;
  flex-shrink: 0;
}

/* Sidebar Header */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.sidebar-hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 8px;
  transition: background-color var(--transition-fast);
}

.sidebar-hamburger:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-hamburger:focus {
  outline: none;
}

.sidebar-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--gray-700);
  border-radius: 1px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
}

.sidebar-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-logo-text {
  display: flex;
  flex-direction: column;
}

.sidebar-logo-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.2;
  padding-top: 6px;
}

.sidebar-logo-title span:last-child {
  color: var(--hc-primary);
}

.sidebar-logo-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Profile Section */
.sidebar-profile-section {
  margin-bottom: 16px;
}

.profile-helper-text {
  font-size: 13px;
  color: #292C45;
  margin-bottom: 12px;
}

.profile-dropdown-btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 16px;
}

.profile-dropdown-btn:hover {
  /* No border color change on hover */
}

.profile-dropdown-btn:focus {
  outline: none;
}

.profile-dropdown-btn .profile-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-small-button);
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-dropdown-btn .profile-icon svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.profile-dropdown-btn .profile-text {
  flex: 1;
  text-align: left;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--text-primary);
}

.profile-dropdown-btn .profile-arrow {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}

.profile-dropdown-btn.open {
  border-radius: var(--radius-button) var(--radius-button) 0 0;
}

.profile-dropdown-btn.open .profile-arrow {
  transform: rotate(180deg);
}

.sidebar-profile-dropdown-container.open .profile-dropdown-btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Sidebar Profile Dropdown Container */
.sidebar-profile-dropdown-container {
  position: relative;
  margin-bottom: 12px;
}

.sidebar-profile-dropdown-container:focus-visible {
  outline: none;
}

.sidebar-profile-dropdown-container .profile-dropdown-btn {
  margin-bottom: 0;
}

/* Sidebar Profile Dropdown Menu */
.sidebar-profile-dropdown-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0 0 var(--radius-button) var(--radius-button);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  z-index: 100;
}

.sidebar-profile-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sidebar-profile-dropdown-container.open .sidebar-profile-dropdown-menu {
  top: 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Sidebar Profile Items */
.sidebar-profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-profile-item:last-child {
  border-bottom: none;
}

.sidebar-profile-item:hover {
  background-color: var(--gray-50);
}

.sidebar-profile-item.active {
  background-color: var(--hc-primary);
}

.sidebar-profile-item.active .profile-name {
  color: var(--white);
}

.sidebar-profile-item.active .profile-icon {
  background-color: var(--white);
}

.sidebar-profile-item.active .profile-icon svg {
  color: var(--primary-color);
}

.sidebar-profile-item .profile-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-profile-item .profile-icon svg {
  width: 14px;
  height: 14px;
  color: var(--white);
}

.sidebar-profile-item .profile-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Create profile option in sidebar dropdown */
.sidebar-profile-item.create-option {
  color: var(--primary-color);
  padding-top: 12px;
}

.sidebar-profile-item.create-option svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--hc-primary);
}

.sidebar-profile-item.create-option .profile-name {
  color: var(--hc-primary);
  font-weight: 500;
}

/* No profile option in sidebar dropdown */
.sidebar-profile-item.no-profile-option .no-profile-x-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gray-600);
}

.sidebar-profile-item.no-profile-option.active .no-profile-x-icon {
  color: var(--white);
}

.create-profile-btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 10px;
  background-color: var(--white);
  color: #292C45;
  border: none;
  border-radius: var(--radius-button);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  transition: background-color var(--transition-fast);
}

.create-profile-btn:hover {
  background-color: var(--gray-50);
}

.create-profile-btn svg {
  color: #292C45;
}

/* Shared Icon Container for sidebar buttons */
.icon-container {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Navigation Buttons */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.nav-btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-button);
  font-family: 'CircularStd-Medium', 'CircularStd', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.nav-btn:focus-visible, .nav-btn:focus {
  outline: none;
}

.nav-btn:hover {
  background-color: var(--white);
}

.nav-btn.active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-bg);
  color: var(--white);
}

.nav-btn.active svg {
  color: var(--white);
}

.nav-btn.active svg path {
  stroke: var(--white);
}

/* Ad Slot */
.sidebar-ad-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  margin-bottom: 24px;
}

.ad-placeholder {
  width: 100%;
  max-width: 300px;
  height: 250px;
  background-color: var(--gray-100);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Voice Chat Button */
.sidebar-voice-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 10px 10px;
  background-color: var(--btn-voice-chat);
  color: var(--white);
  border: none;
  border-radius: var(--radius-button);
  font-family: 'CircularStd-Medium', 'CircularStd', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  margin-top: auto;
  margin-bottom: 10px;
  transition: background-color var(--transition-fast);
}

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

/* Footer Links */
.sidebar-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid #F0F3F7;
  background: transparent;
  justify-content: center;
}

.sidebar-footer a {
  font-size: 12px;
  line-height: 1.2;
  color: #41477B;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sidebar-footer a:hover {
  color: var(--primary-color);
}

/* ========================================
   Main Content Area
   ======================================== */

.mhq-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  position: relative;
  overflow: hidden;
  order: 2;
  min-width: 0; /* Allow shrinking in flex context */
}

/* Main Header */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  min-height: var(--header-height);
  max-width: 840px;
  margin: 0 auto;
}

.mode-selector {
  position: relative;
}

.mode-selector:focus-visible, .mode-selector:focus {
  outline: none;
}

.mode-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background-color: var(--white);
  border: none;
  border-radius: 0;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mode-selector-btn:hover {
  /* Border removed for alignment */
}

.mode-selector-btn:focus-visible,
.mode-selector-btn:focus,
.mode-selector-btn:hover,
.mode-selector-btn:active {
  outline: none;
}

.mode-selector-btn .mode-label {
  color: var(--hc-primary);
  font-weight: bold;
}

.mode-selector-btn .mode-value {
  font-weight: 500;
}

.mode-selector-btn svg {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}

.mode-selector-btn.open svg {
  transform: rotate(180deg);
}

.mode-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 200px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
}

.mode-selector-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mode-option:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.mode-option:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.mode-option:hover {
  background-color: var(--gray-50);
}

.mode-option.active {
  background-color: var(--accent-bg);
}

.mode-option span {
  font-size: 14px;
  color: var(--text-primary);
}

/* Trials Found Banner (Desktop) */
.trials-found-banner {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  margin-left: 16px;
  z-index: 1; /* Keep below drawers */
}

/* Mobile Trials Banner (Mobile only) */
/* Ensure mobile banner is hidden on desktop, even with visible class */
.mobile-trials-banner,
.mobile-trials-banner.visible {
  display: none !important;
}

.trials-found-banner.visible {
  display: flex;
}

.trials-found-banner .banner-text {
  font-size: 14px;
  color: var(--ct-primary-dark);
}

.trials-found-banner .banner-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: var(--ct-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.trials-found-banner .banner-btn:hover {
  background-color: var(--ct-primary-dark);
}

.trials-found-banner .banner-btn svg {
  width: 16px;
  height: 16px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--gray-500);
  transition: all var(--transition-fast);
}

.header-action-btn:hover {
  background-color: var(--gray-100);
  color: var(--text-primary);
}

.header-action-btn svg {
  width: 22px;
  height: 22px;
}

.mhq-close-btn:hover {
  background-color: var(--gray-100);
  color: var(--error);
}

/* User Menu with Greeting (Logged In Users) */
.user-menu-container {
  position: relative;
  display: flex;
  align-items: center;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--gray-500);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.user-menu-btn:hover {
  background-color: var(--gray-100);
  color: var(--text-primary);
}

.user-menu-btn .user-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.user-menu-btn .user-greeting {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.user-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.user-menu-item:hover {
  background-color: var(--gray-50);
}

.user-menu-item svg {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.user-menu-item span {
  font-size: 14px;
  font-weight: 500;
}

/* Mobile User Menu Dropdown */
.mobile-user-menu-container {
  position: relative;
}

.mobile-user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.mobile-user-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-user-menu-name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--gray-200);
  cursor: default;
}

.mobile-user-menu-name svg {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.mobile-user-menu-name span {
  font-size: 14px;
}

.mobile-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.mobile-user-menu-item:hover {
  background-color: var(--gray-50);
}

.mobile-user-menu-item svg {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.mobile-user-menu-item span {
  font-size: 14px;
  font-weight: 500;
}

/* User Avatar Initial */
.user-avatar-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--hc-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.mobile-action-btn .user-avatar-initial {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

/* ========================================
   Chat Messages Area
   ======================================== */

.chat-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}

.message {
  display: flex;
  max-width: 100%;
  animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* User Message */
.user-message {
  justify-content: flex-end;
}

.user-message .message-bubble {
  max-width: min(70%, 400px);
  padding: 20px;
  background-color: var(--user-bubble-bg);
  color: var(--user-bubble-text);
  border-radius: 18px 18px 4px 18px;
  font-family: 'CircularStd-Book', 'CircularStd', sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-wrap: break-word;
}

/* Clinical trials mode user bubble */
.clinical-trials-mode .user-message .message-bubble {
  background-color: var(--ct-accent-bg);
}

/* Bot Message */
.bot-message {
  justify-content: flex-start;
}

.bot-message .message-content {
  max-width: 85%;
  font-family: 'CircularStd-Book', 'CircularStd', sans-serif;
  font-weight: 450;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.bot-message p {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.bot-message p:last-child {
  margin-bottom: 0;
}

/* Bot Follow-up Separator */
.bot-followup-separator {
  border: none;
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  margin: 0;
  width: 85%;
}

/* Article Recommendations */
.message.recos {
  background-color: transparent;
  padding: 0;
}

.message.recos .message-content {
  max-width: 100%;
}

.recos-header {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 15px;
}

.rec-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rec-results li {
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
}

.rec-results li a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-primary);
  border-radius: 8px;
  border: 1.5px solid #DBE9FB;
  overflow: hidden;
  height: 100%;
}

.rec-results li a:hover {
  border-color: #c0d8f5;
}

.rec-results li a img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.rec-results li a img.rec-card-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rec-card-body {
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex: 1;
}

.rec-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.rec-source-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.rec-source span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.rec-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  flex: 1;
}

.rec-date {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  margin-top: 12px;
}

/* Suggested Questions */
.message.suggested-questions {
  background-color: transparent;
  padding: 0;
}

.message.suggested-questions .message-content {
  max-width: 100%;
}

.suggested-questions-header {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 16px;
}

.suggested-questions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.suggested-questions-list li {
  display: flex;
  align-items: center;
}

.suggested-question-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  color: var(--hc-primary);
  text-decoration: underline;
  text-align: left;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.suggested-question-btn::before {
  content: "\25B6";
  font-size: 10px;
  text-decoration: none;
  display: inline-block;
  flex-shrink: 0;
  font-style: normal;
}

.suggested-question-btn:hover {
  color: var(--hc-primary-light);
}

/* Markdown Content Styles */
.markdown-content {
  color: var(--text-primary);
  line-height: 1.7;
}

/* Markdown Headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.markdown-content h5:first-child,
.markdown-content h6:first-child {
  margin-top: 0;
}

.markdown-content h1 {
  font-size: 28px;
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 8px;
}

.markdown-content h2 {
  font-size: 24px;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 6px;
}

.markdown-content h3 {
  font-size: 20px;
}

.markdown-content h4 {
  font-size: 18px;
}

.markdown-content h5 {
  font-size: 16px;
}

.markdown-content h6 {
  font-size: 14px;
  color: var(--gray-600);
}

/* Markdown Text Styling */
.markdown-content strong {
  font-weight: 700;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content s,
.markdown-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

.markdown-content u,
.markdown-content ins {
  text-decoration: underline;
}

/* Markdown Lists */
.markdown-content ul,
.markdown-content ol {
  margin: 16px 0;
  padding-left: 24px;
}

.markdown-content ul {
  list-style-type: disc;
}

.markdown-content ol {
  list-style-type: decimal;
}

.markdown-content li {
  margin: 8px 0;
  line-height: 1.7;
  color: var(--text-primary);
}

.markdown-content li > p {
  margin: 4px 0;
}

.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
  margin: 8px 0;
}

.markdown-content ul ul {
  list-style-type: circle;
}

.markdown-content ul ul ul {
  list-style-type: square;
}

/* Markdown Code */
.markdown-content code {
  background-color: var(--gray-100);
  color: var(--text-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 14px;
}

.markdown-content pre {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
}

.markdown-content pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.6;
  display: block;
}

/* Markdown Links */
.markdown-content a {
  color: var(--primary-color);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.markdown-content a:hover {
  color: var(--primary-color);
  opacity: 0.8;
}

.markdown-content a:visited {
  color: var(--primary-color);
  opacity: 0.9;
}

/* Markdown Blockquotes */
.markdown-content blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--gray-600);
  font-style: italic;
}

.markdown-content blockquote p {
  margin: 8px 0;
}

.markdown-content blockquote p:first-child {
  margin-top: 0;
}

.markdown-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Markdown Tables */
.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
}

.markdown-content table th,
.markdown-content table td {
  border: 1px solid var(--gray-300);
  padding: 10px 12px;
  text-align: left;
}

.markdown-content table th {
  background-color: var(--gray-100);
  font-weight: 700;
  color: var(--text-primary);
}

.markdown-content table tr:nth-child(even) {
  background-color: var(--gray-50);
}

.markdown-content table tr:hover {
  background-color: var(--gray-100);
}

/* Markdown Horizontal Rules */
.markdown-content hr {
  border: none;
  border-top: 2px solid var(--gray-200);
  margin: 24px 0;
}

/* Responsive adjustments for markdown */
@media (max-width: 768px) {
  .markdown-content h1 {
    font-size: 24px;
  }

  .markdown-content h2 {
    font-size: 20px;
  }

  .markdown-content h3 {
    font-size: 18px;
  }

  .markdown-content h4 {
    font-size: 16px;
  }

  .markdown-content pre {
    padding: 12px;
    font-size: 13px;
  }

  .markdown-content code {
    font-size: 13px;
  }

  .markdown-content table {
    font-size: 13px;
  }

  .markdown-content table th,
  .markdown-content table td {
    padding: 8px 10px;
  }
}

/* Clinical Trial Message */
.clinical-trial-message {
  position: relative;
  display: flex;
  flex-direction: column;
}

.clinical-trial-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  order: 1; /* Push below message content using flexbox order */
}

.clinical-trial-message .message-content {
  order: 0;
}

/* Clinical Trial Action Buttons */
.exit-clinical-trials-btn,
.clinical-trial-message .view-trials-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.exit-clinical-trials-btn:hover,
.clinical-trial-message .view-trials-btn:hover {
  border-color: var(--primary-color);
  background-color: var(--gray-50);
}

.exit-clinical-trials-btn svg,
.clinical-trial-message .view-trials-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Exit button specific styling - slightly muted */
.exit-clinical-trials-btn {
  color: var(--text-secondary);
}

.exit-clinical-trials-btn:hover {
  color: var(--text-primary);
}

/* Key Points Section */
.key-points {
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid var(--gray-200);
}

.key-points-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.key-points ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.key-points li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.key-points li:last-child {
  margin-bottom: 0;
}

/* Additional Context Section */
.additional-context {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.additional-context-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.additional-context p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* ========================================
   Chat Input Area
   ======================================== */

.chat-input-area {
  padding: 16px 0 48px;
  background-color: var(--white);
}

.chat-input-wrapper {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 24px;
  line-height: 1;
  height: 60px;
}

.chat-input-field {
  width: 100%;
  height: 100%;
  padding: 17px 60px 17px 16px;
  background-color: var(--white);
  border: 1.5px solid var(--hc-sidebar-bg);
  border-radius: var(--radius-button);
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.chat-input-field:focus {
  border-color: var(--primary-color);
}

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

.chat-send-btn {
  position: absolute;
  right: 32px;
  bottom: 8px;
  top: 8px;
  width: 46px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hc-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.chat-send-btn:hover {
  background-color: var(--primary-dark);
  transform: scale(1.05);
}

.chat-send-btn:disabled {
  background-color: var(--gray-300);
  cursor: not-allowed;
  transform: none;
}

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

.chat-disclaimer {
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  color: #292C45;
  margin-top: 24px;
  margin-bottom: 0;
  font-weight: 500;
}

.chat-disclaimer a {
  color: #292C45;
  text-decoration: underline;
}

.chat-disclaimer a:hover {
  text-decoration: underline;
}

@media (max-width: 992px) {
  .chat-disclaimer {
    display: none;
  }
  .main-header.collapsed {
    display: none !important;
  }
}

/* ========================================
   Profile Drawer (Middle Column)
   ======================================== */

.profile-drawer {
  width: 0;
  height: 100%;
  background-color: var(--hc-primary);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  order: 1; /* Between sidebar (0) and main content (2) */
  transition: width 150ms ease-out;
}

.profile-drawer.open {
  width: var(--profile-drawer-width);
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
}

.drawer-profile-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.drawer-profile-selector:hover {
  background-color: var(--gray-50);
}

.drawer-profile-selector .profile-icon {
  width: 28px;
  height: 28px;
  background-color: var(--hc-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-profile-selector .profile-icon svg {
  width: 16px;
  height: 16px;
  color: var(--white);
}

.drawer-profile-selector .profile-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-primary);
}

.drawer-profile-selector .dropdown-arrow {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  color: var(--gray-400);
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.drawer-remove-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.drawer-remove-link:hover {
  color: var(--white);
}

.drawer-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-fast);
}

.drawer-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

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

/* Create Profile Header */
.drawer-header.create-profile-header {
  justify-content: space-between;
  padding: 20px 32px;
}

.drawer-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

/* Create Profile Section */
.create-profile-section {
  padding: 20px 32px;
}

.create-profile-description {
  font-size: 16px;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 20px;
}

.create-profile-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.create-profile-form .form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.create-profile-name-input {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.create-profile-name-input::placeholder {
  color: var(--text-muted);
}

.create-profile-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background-color: #C5F1EE;
  color: #000000;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.create-profile-submit-btn:hover {
  background-color: #A8E0DD;
}

.create-profile-submit-btn svg {
  width: 14px;
  height: 14px;
}

.create-profile-submit-btn:disabled,
.create-profile-submit-btn.disabled {
  background-color: #6c757d;
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  opacity: 0.6;
}

.create-profile-submit-btn:disabled:hover,
.create-profile-submit-btn.disabled:hover {
  background-color: #6c757d;
}

/* Edit Profile Section (mirrors create profile styling) */
.edit-profile-section {
  padding: 20px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.edit-profile-description {
  font-size: 16px;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 20px;
}

.edit-profile-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-profile-form .form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.edit-profile-name-input {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.edit-profile-name-input.error {
  border: 2px solid var(--error-color);
}

/* Hide edit section in create mode */
.profile-drawer:not(.edit-mode) .edit-profile-section {
  display: none;
}

/* Save Profile Button (edit mode) */
.edit-profile-form .save-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background-color: #C5F1EE;
  color: #000000;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.edit-profile-form .save-profile-btn:hover {
  background-color: #A8E0DD;
}

.edit-profile-form .save-profile-btn svg {
  width: 14px;
  height: 14px;
}

.edit-profile-form .save-profile-btn:disabled,
.edit-profile-form .save-profile-btn.disabled {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.edit-profile-form .save-profile-btn:disabled:hover,
.edit-profile-form .save-profile-btn.disabled:hover {
  background-color: #e0e0e0;
}

/* Hide create section when editing existing profile */
.profile-drawer.edit-mode .create-profile-header,
.profile-drawer.edit-mode .create-profile-section {
  display: none;
}

.profile-drawer.edit-mode .edit-profile-header {
  display: flex !important;
}

/* Drawer Content */
.drawer-content {
  flex: 1;
  padding: 24px 32px;
}

.drawer-header-section {
  display: flex;
  justify-content: space-between;
}

.drawer-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-inverse);
}

.drawer-description {
  font-size: 16px;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Profile Form */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  margin: 0;
}

.form-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
}

.form-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.form-input {
  padding: 12px 14px;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
}

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

/* Age and Zip field font styling */
#profile-age,
#profile-zip,
#mobile-profile-zip,
#mobile-create-profile-zip {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  text-align: center;
}

#profile-age::placeholder,
#profile-zip::placeholder,
#mobile-profile-zip::placeholder,
#mobile-create-profile-zip::placeholder {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  text-align: center;
}

/* Form Input Error States */
.form-input.error {
  border: 2px solid #dc3545;
}

.form-input.error:focus {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
}

/* Radio Group (Gender) */
.radio-group {
  display: flex;
  gap: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.radio-option:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.radio-option.selected {
  background-color: var(--white);
  color: var(--hc-primary);
  border-color: var(--white);
}

.radio-option input {
  display: none;
}

/* Yes/No Buttons */
.boolean-group {
  display: flex;
  gap: 8px;
}

.boolean-btn {
  flex: 1;
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--white);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.boolean-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.boolean-btn.selected {
  background-color: var(--white);
  color: var(--hc-primary);
  border-color: var(--white);
}

/* Select Dropdown */
.form-select {
  padding: 12px 14px;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* ========================================
   Clinical Trials Drawer (Middle Column)
   ======================================== */

.trials-drawer {
  width: 0;
  height: 100%;
  background-color: var(--ct-primary);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  order: 1; /* Between sidebar (0) and main content (2) */
  transition: width 150ms ease-out;
}

.trials-drawer.open {
  width: var(--trials-drawer-width);
  overflow-y: auto;
}

/* Fade in drawer content after width animation completes */
.trials-drawer .drawer-header,
.trials-drawer .trials-list {
  opacity: 0;
  transition: opacity 100ms ease-out;
  transition-delay: 0ms;
}

.trials-drawer.open .drawer-header,
.trials-drawer.open .trials-list {
  opacity: 1;
  transition-delay: 150ms; /* Wait for width animation to complete */
}

.trials-drawer .drawer-header {
  padding: 20px;
}

.trials-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-inverse);
  margin-bottom: 0;
}

/* Trials List */
.trials-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Trial Card */
.trial-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 16px;
  color: var(--text-primary);
  transition: box-shadow var(--transition-fast);
}

.trial-card:hover {
  box-shadow: var(--shadow-lg);
}

.trial-card-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
  line-height: 120%;
}

.trial-card-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trial-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trial-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.trial-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.trial-badge-type {
  background-color: var(--ct-badge-bg);
  color: var(--ct-primary-dark);
}

.trial-badge-distance {
  background-color: var(--ct-badge-bg);
  color: var(--text-secondary);
}

.trial-expand-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ct-primary);
  color: var(--white);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.trial-expand-btn:hover {
  background-color: var(--ct-primary-dark);
  color: var(--white);
}

.trial-expand-btn svg {
  width: 16px;
  height: 16px;
}

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

.ask-mhq-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--white);
  color: var(--ct-primary);
  border: 1.5px solid var(--ct-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ask-mhq-btn:hover {
  background-color: var(--ct-primary);
  color: var(--white);
}

/* ========================================
   Select Profile Drawer
   ======================================== */

.select-profile-drawer {
  width: 0;
  height: 100%;
  background-color: var(--hc-primary);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  order: 1; /* Between sidebar (0) and main content (2) */
  transition: width 150ms ease-out;
}

.select-profile-drawer.open {
  width: var(--profile-drawer-width);
  overflow-y: auto;
}

.select-profile-drawer .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  flex-shrink: 0;
}

.select-profile-drawer .drawer-header-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.select-profile-drawer .drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}

.profile-selector-helper-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 20px;
}

.profile-dropdown-container {
  position: relative;
  z-index: 10;
}

.profile-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-dropdown-trigger:hover {
  box-shadow: var(--shadow-md);
}

.profile-dropdown-trigger .profile-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: var(--hc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-dropdown-trigger .profile-icon svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.profile-dropdown-text {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary);
}

.profile-dropdown-trigger .profile-arrow {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}

.profile-dropdown-trigger.open .profile-arrow {
  transform: rotate(180deg);
}

/* Profile Dropdown Menu */
.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  z-index: 10;
}

.profile-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-bottom: 1px solid var(--gray-100);
}

.profile-dropdown-item:last-child {
  border-bottom: none;
}

.profile-dropdown-item:hover {
  background-color: var(--gray-50);
}

.profile-dropdown-item.active {
  background-color: var(--accent-bg);
}

.profile-dropdown-item .profile-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: var(--hc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-dropdown-item .profile-icon svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.profile-dropdown-item .profile-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.profile-dropdown-item.create-option .profile-icon {
  background-color: var(--hc-btn-create-profile);
}

.profile-dropdown-item.no-profile-option .profile-icon {
  background-color: var(--gray-400);
}

/* ========================================
   Overlay (Only visible on tablet/mobile)
   ======================================== */

.mhq-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  display: none; /* Hidden on desktop - drawers are inline columns */
}

.mhq-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   Loading & Error States
   ======================================== */

.loading-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 32px;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
}

.loading-indicator.visible {
  display: flex;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary-color);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

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

.loading-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.error-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 14px 20px;
  background-color: var(--error);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.error-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ========================================
   Typing Indicator
   ======================================== */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background-color: var(--gray-400);
  border-radius: var(--radius-full);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

/* ========================================
   Rotating loading messages
   ======================================== */

.loading-rotator {
  /* Bump this up if your messages wrap to 2 lines on mobile */
  --rotator-height: 1.6em;

  height: var(--rotator-height);
  overflow: hidden;
  position: relative;
}

.loading-rotator-track {
  display: flex;
  flex-direction: column;
  animation: mhq-rotator-scroll 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-rotator-item {
  flex: 0 0 var(--rotator-height);
  height: var(--rotator-height);
  line-height: var(--rotator-height);
  display: block;
  color:#888;
  font-family: 'CircularStd-Book', 'CircularStd', sans-serif;
}

@keyframes mhq-rotator-scroll {
  0%, 45%   { transform: translateY(0); }
  50%, 95%  { transform: translateY(calc(-1 * var(--rotator-height))); }
  100%      { transform: translateY(calc(-2 * var(--rotator-height))); }
}

/* If messages wrap on narrow screens, give them more vertical room */
@media (max-width: 600px) {
  .loading-rotator {
    --rotator-height: 3.2em;
  }
  .loading-rotator-item {
    line-height: 1.4;
    display: flex;
    align-items: center;
  }
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet - Collapsible Sidebar, Overlay Drawers */
@media (max-width: 992px) {
  .mhq-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-fixed);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

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

  .mhq-main-content {
    margin-left: 0;
    order: 0; /* Reset order for mobile */
  }

  /* On tablet/mobile, drawers become fixed overlays */
  .profile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform 150ms ease-out;
  }

  .profile-drawer.open {
    width: 100%;
    transform: translateX(0);
  }

  .trials-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-drawer);
    transform: translateX(100%);
    transition: transform 150ms ease-out;
  }

  .trials-drawer.open {
    width: 100%;
    transform: translateX(0);
  }

  .select-profile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform 150ms ease-out;
  }

  .select-profile-drawer.open {
    width: 100%;
    transform: translateX(0);
  }

  /* Show overlay on tablet/mobile */
  .mhq-overlay {
    display: block;
  }

  .mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 16px 12px;
    background-color: var(--sidebar-bg);
  }

  .mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    background-color: transparent;
    border: none;
    border-width: 0;
    outline: none;
    outline-width: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--hc-primary);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
  }

  .mobile-hamburger:focus,
  .mobile-hamburger:active,
  .mobile-hamburger:hover {
    outline: none;
    outline-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
}

/* Desktop - Show Sidebar */
@media (min-width: 993px) {
  .mobile-header {
    display: none;
  }

  .mobile-hamburger {
    display: none;
  }
}

/* Mobile - Full Width */
@media (max-width: 768px) {
  .mhq-sidebar {
    width: 100%;
  }

  .user-message .message-bubble {
    max-width: 85%;
  }

  .bot-message .message-content {
    max-width: 95%;
  }

  .chat-messages-area {
    padding: 16px;
  }

  .chat-input-area {
    padding: 14px 16px;
    /* padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); */
    background-color: var(--sidebar-bg);
    height: 76px;
  }

  .main-header {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .chat-send-btn {
    width: 40px;
    height: 40px;
    right: 4px;
    top: 4px;
    border-radius: var(--radius-button);
  }

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

  .chat-input-field {
    padding: 10px 50px 10px 14px;
    height: 48px;
  }

  .drawer-content {
    padding: 20px 16px;
  }

  .trial-card {
    padding: 14px;
  }
}

/* ========================================
   Utility Classes
   ======================================== */

/* ========================================
   Voice Chat Popup (matching original mhq4 styling)
   ======================================== */

.voice-chat-popup {
  position: fixed;
  background: linear-gradient(5.91deg, #4D9BA0 11.73%, #523F97 92.24%);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

.voice-chat-popup.show {
  opacity: 1;
  visibility: visible;
  z-index: 999999;
}

.voice-chat-popup .intro-message-wrapper {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.voice-chat-popup .inner-popup-wrapper {
  padding: 30px 30px 71px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Animated circles */
.voice-chat-popup .cricle-outer {
  width: 227px;
  height: 227px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background-color: rgba(82, 63, 151, 0.3);
  border-radius: 50%;
}

.voice-chat-popup .cricle-center {
  background-color: rgba(82, 63, 151, 0.5);
  border-radius: 50%;
  display: flex;
  width: 200px;
  height: 200px;
  align-items: center;
  justify-content: center;
}

.voice-chat-popup .cricle-center .cricle-inner {
  width: 100px;
  height: 100px;
  background-color: #4D9BA0;
  border-radius: 50%;
}

/* Voice content positioning */
.voice-chat-popup .voice-content {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  left: 50%;
  opacity: 0;
  transition: all 1s ease-in-out;
}

/* Idle state - show first circle */
.voice-chat-popup .inner-popup-wrapper.idle .voice-content:nth-of-type(1) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Active listening state - show second circle */
.voice-chat-popup .inner-popup-wrapper.active-listening .voice-content:nth-of-type(2) {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Speaking state - show third circle */
.voice-chat-popup .inner-popup-wrapper.speaking .voice-content:nth-of-type(3) {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Idle animations */
.inner-popup-wrapper .voice-content:nth-of-type(1) .cricle-outer {
  animation: outer-idle 3s ease-in-out 0.4s infinite;
}

.inner-popup-wrapper .voice-content:nth-of-type(1) .cricle-center {
  animation: center-idle 3s ease-in-out 0.2s infinite;
}

.inner-popup-wrapper .voice-content:nth-of-type(1) .cricle-inner {
  animation: inner-idle 3s ease-in-out infinite;
}

@keyframes outer-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes center-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes inner-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Active Listening animations */
.inner-popup-wrapper .voice-content:nth-of-type(2) .cricle-outer {
  animation: outer-listening 3s ease-in-out 0.3s infinite;
}

.inner-popup-wrapper .voice-content:nth-of-type(2) .cricle-center {
  animation: center-listening 3s ease-in-out 0.1s infinite;
}

.inner-popup-wrapper .voice-content:nth-of-type(2) .cricle-inner {
  animation: inner-listening 3s ease-in-out infinite;
  background-color: #523F97;
}

@keyframes outer-listening {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes center-listening {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes inner-listening {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* Speaking animations */
.inner-popup-wrapper .voice-content:nth-of-type(3) .cricle-outer {
  animation: outer-speaking 3s ease-in-out .4s infinite;
}

.inner-popup-wrapper .voice-content:nth-of-type(3) .cricle-center {
  animation: center-speaking 3s ease-in-out .2s infinite;
}

.inner-popup-wrapper .voice-content:nth-of-type(3) .cricle-inner {
  animation: inner-speaking 3s ease-in-out infinite;
  background-color: #4D9BA0;
}

@keyframes outer-speaking {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes center-speaking {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes inner-speaking {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Status text */
.voice-chat-popup .text-layer-acc {
  position: absolute;
  top: auto;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
}

.voice-chat-popup .text-layer-acc p {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  opacity: 0;
  display: none;
  transform: scale(0);
  margin: 0;
  transition: all 0.3s ease;
}

.voice-chat-popup .inner-popup-wrapper.idle:not(.waiting) .text-layer-acc p:nth-of-type(1) {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

.voice-chat-popup .inner-popup-wrapper.active-listening .text-layer-acc p:nth-of-type(1) {
  display: flex;
  transform: scale(1);
  opacity: 1;
}

.voice-chat-popup .inner-popup-wrapper.idle.waiting .text-layer-acc p:nth-of-type(2) {
  display: flex;
  transform: scale(1);
  opacity: 1;
}

.voice-chat-popup .inner-popup-wrapper.speaking .text-layer-acc p:nth-of-type(3) {
  display: flex;
  transform: scale(1);
  opacity: 1;
}

/* Control buttons */
.voice-chat-popup .icon-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 70px;
}

.voice-chat-popup .white-btn,
.voice-chat-popup .voice-popup-close {
  background-color: #ffffff;
  width: 72px;
  height: 72px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  box-shadow: 0px 7.14px 57.14px 0px rgba(65, 71, 123, 0.02);
  border: none;
}

.voice-chat-popup .white-btn img,
.voice-chat-popup .voice-popup-close img {
  width: 28px;
  height: 28px;
}

/* Microphone button states */
.voice-chat-popup .inner-popup-wrapper.idle .icon-wrapper .microphone-btn img:nth-of-type(2) {
  display: none;
}

.voice-chat-popup .inner-popup-wrapper .icon-wrapper .microphone-btn.inactive img:nth-of-type(2) {
  display: block;
}

.voice-chat-popup .inner-popup-wrapper .icon-wrapper .microphone-btn.inactive img:nth-of-type(1) {
  display: none;
}

.voice-chat-popup .inner-popup-wrapper .icon-wrapper .microphone-btn.inactive {
  background-color: rgba(255, 255, 255, .5);
}

/* Pause button - hidden by default, shown when speaking */
.voice-chat-popup .inner-popup-wrapper .icon-wrapper .pause-btn {
  display: none;
}

.voice-chat-popup .inner-popup-wrapper.speaking .icon-wrapper .pause-btn {
  display: flex;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .voice-chat-popup .intro-message-wrapper {
    font-size: 16px;
    padding: 0 20px;
  }

  .voice-chat-popup .inner-popup-wrapper {
    align-items: center;
    padding: 20px 16px 16px;
  }

  .voice-chat-popup .inner-popup-wrapper .icon-wrapper {
    justify-content: center;
    width: 100%;
  }

  .voice-chat-popup .cricle-outer {
    width: 180px;
    height: 180px;
  }

  .voice-chat-popup .cricle-center {
    width: 150px;
    height: 150px;
  }

  .voice-chat-popup .cricle-inner {
    width: 75px;
    height: 75px;
  }

  .voice-chat-popup .white-btn,
  .voice-chat-popup .voice-popup-close {
    width: 56px;
    height: 56px;
  }

  .voice-chat-popup .white-btn img,
  .voice-chat-popup .voice-popup-close img {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 575px) {
  .voice-chat-popup {
    height: calc(var(--vh, 1vh) * 100) !important;
    top: auto;
    bottom: 0 !important;
  }
}

/* ========================================
   Utility Classes
   ======================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.flex-visible {
  display: flex !important;
}

/* ========================================
   Responsive - User Menu
   ======================================== */

/* Hide greeting text on smaller screens to prevent overflow */
@media (max-width: 1200px) {
  .user-menu-btn .user-greeting {
    display: none;
  }

  .user-menu-btn {
    padding: 8px;
    width: 40px;
    height: 40px;
  }

  .user-menu-btn .user-icon {
    margin: 0;
  }
}

/* ========================================
   Mobile Header Actions
   ======================================== */

.mobile-header-actions {
  display: none;
}

@media (max-width: 992px) {
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  .mobile-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--black);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .mobile-action-btn:hover,
  .mobile-action-btn:active {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .mobile-action-btn.mhq-close-btn:hover,
  .mobile-action-btn.mhq-close-btn:active {
    color: var(--error);
  }

  .mobile-action-btn svg {
    width: 24px;
    height: 24px;
  }

  /* Hide desktop header actions on mobile */
  .header-actions {
    display: none;
  }

  /* Hide desktop trials banner on mobile */
  .trials-found-banner,
  .trials-found-banner.visible {
    display: none !important;
  }
}

/* ========================================
   Mobile Tab Navigation
   ======================================== */

.mobile-tab-nav {
  display: none;
}

@media (max-width: 992px) {
  .mobile-tab-nav {
    display: flex;
    position: relative;
    background-color: var(--sidebar-bg);
    padding: 0;
    gap: 0;
    height: 40px;
  }

  .mobile-tab {
    flex: 1;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--hc-primary);
    cursor: pointer;
    position: relative;
    overflow: visible;
    border-radius: 0;
  }

  .mobile-tab.active {
    background-color: var(--white);
    color: var(--black);
    border: none;
    margin-bottom: -1px;
    z-index: 1;
  }

  .mobile-tab:active,
  .mobile-tab:focus,
  .mobile-tab:hover,
  .mobile-tab:focus-visible {
    outline: none;
  }

  /* First tab active: curved edge on right using tab-1.png */
  .mobile-tab:first-child.active {
    border-radius: 0;
    margin-right: 0;
    padding-right: 24px;
  }

  .mobile-tab:first-child.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: -30px;
    width: 50px;
    height: 40px;
    background: url('/wp-content/themes/survivornet/assets/images/tab-middle.png') no-repeat;
    background-size: auto 100%;
  }

  /* Second tab active: curved edge on left using tab-2.png */
  .mobile-tab:nth-child(2).active {
    border-radius: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .mobile-tab:nth-child(2).active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    width: 50px;
    height: 40px;
    background: url('/wp-content/themes/survivornet/assets/images/tab-middle.png') no-repeat right;
    background-size: auto 100%;
    transform: scaleX(-1);
  }

  .mobile-tab span {
    position: relative;
    z-index: 1;
  }

  /* Hide the old tab indicator - no longer needed for folder tabs */
  .mobile-tab-indicator {
    display: none;
  }

  /* Clinical trials mode colors */
  .mhq-app-container.clinical-trials-mode .mobile-tab.active {
    color: var(--black);
  }

  /* Hide main header mode selector on mobile (using tabs instead) */
  .main-header .mode-selector {
    display: none;
  }

  /* Mobile Trials Found Banner - floats above input */
  /* Mobile Trials Banner - separate component */
  .mobile-trials-banner {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 80px; /* Above the chat input */
    left: 12px;
    right: 12px;
    padding: 12px 16px;
    background-color: var(--ct-primary);
    border-radius: var(--radius-lg);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-lg);
  }

  .mobile-trials-banner.visible {
    display: block !important;
  }

  .mobile-trials-banner .banner-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background-color: transparent;
    border: none;
    color: var(--white);
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
  }

  .mobile-trials-banner .banner-btn:hover {
    background-color: transparent;
  }

  .mobile-trials-banner .banner-btn svg {
    flex-shrink: 0;
    width: 26px;
    height: 28px;
  }

  .mobile-trials-banner .banner-btn span {
    text-align: left;
    flex: 1;
  }

  /* Add padding to chat messages when mobile banner is visible */
  body.mobile-trials-visible .chat-messages-area {
    padding-bottom: 120px !important;
  }
}

/* ========================================
   Mobile Bottom Drawer
   ======================================== */

.bottom-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--hc-primary);
  color: var(--white);
  z-index: var(--z-drawer);
  transform: translateY(100%);
  transition: transform 300ms ease;
  max-height: 90vh;
  overflow: hidden;
  will-change: transform;
  flex-direction: column;
}

@media (max-width: 992px) {
  .bottom-drawer {
    display: flex;
  }
}

/* Drawer States */
.bottom-drawer.peek {
  transform: translateY(calc(100% - 50vh)); /* Shows 50vh of drawer */
}

.bottom-drawer.expanded {
  transform: translateY(0);
}

/* Prevent body scroll when drawer is expanded */
body.drawer-expanded {
  overflow: hidden;
}

/* Drawer Header */
.bottom-drawer-header {
  padding: 16px 32px 16px;
  flex-shrink: 0;
}

.drawer-handle {
  width: 40px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  margin: 0 auto 12px;
  cursor: grab;
}

.drawer-handle:active {
  cursor: grabbing;
}

.drawer-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom-drawer .drawer-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.bottom-drawer .drawer-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 2px solid var(--white);
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.bottom-drawer .drawer-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.bottom-drawer .drawer-close-btn svg {
  width: 18px;
  height: 18px;
}

/* Peek Content */
.bottom-drawer-peek-content {
  padding: 0 32px 20px;
  flex-shrink: 0;
}

.bottom-drawer-peek-content .profile-helper-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px 0;
}

/* Mobile Profile Dropdown */
.mobile-profile-dropdown {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  margin-bottom: 12px;
  transition: background-color var(--transition-fast);
}

.mobile-profile-dropdown:hover {
  background-color: var(--gray-50);
}

.mobile-profile-dropdown .profile-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hc-primary);
  border-radius: var(--radius-md);
  color: var(--white);
}

.mobile-profile-dropdown .profile-icon svg {
  width: 18px;
  height: 18px;
}

.mobile-profile-dropdown .profile-text {
  flex: 1;
  text-align: left;
  font-size: 15px;
  color: var(--text-primary);
}

.mobile-profile-dropdown .profile-arrow {
  color: var(--text-secondary);
  transition: transform var(--transition-fast);
}

.mobile-profile-dropdown.open .profile-arrow {
  transform: rotate(180deg);
}

/* Mobile Peek Profile Selector Container */
.mobile-peek-profile-selector {
  position: relative;
  margin-bottom: 12px;
}

.mobile-peek-profile-selector .mobile-profile-dropdown {
  margin-bottom: 0;
}

/* Mobile Peek Profile Menu */
.mobile-peek-profile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  margin-top: 4px;
  display: none;
  max-height: 250px;
  overflow-y: auto;
}

.mobile-peek-profile-menu.open {
  display: block;
  max-height: 210px;
}

.mobile-peek-profile-menu .profile-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-bottom: 1px solid var(--gray-100);
}

.mobile-peek-profile-menu .profile-option:last-child {
  border-bottom: none;
}

.mobile-peek-profile-menu .profile-option:hover {
  background-color: var(--gray-50);
}

.mobile-peek-profile-menu .profile-option.active {
  background-color: var(--accent-bg);
}

.mobile-peek-profile-menu .profile-option .profile-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hc-primary);
  border-radius: var(--radius-md);
  color: var(--white);
}

.mobile-peek-profile-menu .profile-option .profile-icon svg {
  width: 16px;
  height: 16px;
}

.mobile-peek-profile-menu .profile-option.create-option {
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
  color: var(--primary-color);
}

.mobile-peek-profile-menu .profile-option.create-option svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--primary-color);
}

.mobile-peek-profile-menu .profile-option.create-option .profile-name {
  color: var(--primary-color);
  font-weight: 500;
}

.mobile-peek-profile-menu .profile-option.no-profile-option .no-profile-x-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gray-600);
}

.mobile-peek-profile-menu .profile-option.no-profile-option.active .no-profile-x-icon {
  color: var(--white);
}

.mobile-peek-profile-menu .profile-option .profile-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* Mobile Create Profile Button */
.mobile-create-profile-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-button);
  border: none;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-create-profile-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.mobile-create-profile-btn svg {
  width: 30px;
  height: 36px;
}

/* Expanded Content */
.bottom-drawer-expanded-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.bottom-drawer.expanded .bottom-drawer-expanded-content {
  opacity: 1;
  visibility: visible;
}

/* Mobile Create Profile Section */
.mobile-create-profile-section {
  display: none;
}

.bottom-drawer.create-mode .mobile-create-profile-section {
  display: block;
}

.bottom-drawer.create-mode .mobile-edit-profile-section {
  display: none;
}

.bottom-drawer.create-mode .bottom-drawer-peek-content {
  display: none;
}

.create-section-header {
  margin-top: 32px;
}

.mobile-edit-profile-section {
  display: block;
}

.mobile-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.mobile-create-form .form-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.mobile-create-form .form-input {
  padding: 14px 16px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}

.mobile-create-form .form-input::placeholder {
  color: var(--text-muted);
}

.mobile-create-form .form-input.error {
  border: 2px solid #dc3545;
}

.mobile-create-form .create-profile-submit-btn {
  margin-top: 8px;
}

/* Mobile Edit Name Form */
.mobile-edit-name-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-edit-name-form .form-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.mobile-edit-name-form .form-input {
  padding: 14px 16px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}

.mobile-edit-name-form .save-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background-color: #C5F1EE;
  color: #000000;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mobile-edit-name-form .save-profile-btn:hover {
  background-color: #A8E0DD;
}

.mobile-edit-name-form .save-profile-btn svg {
  width: 14px;
  height: 14px;
}

.mobile-edit-name-form .save-profile-btn:disabled,
.mobile-edit-name-form .save-profile-btn.disabled {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.mobile-edit-name-form .save-profile-btn:disabled:hover,
.mobile-edit-name-form .save-profile-btn.disabled:hover {
  background-color: #e0e0e0;
}

.remove-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  text-decoration: underline;
  white-space: nowrap;
}

.remove-link:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Section Header */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Section Divider */
.section-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 16px 0;
}

/* Section Title */
.bottom-drawer-expanded-content .section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.section-description {
  font-size: 16px;
  color: var(--white);
  margin: 0 0 20px 0;
  line-height: 1.2;
}

/* Mobile Profile Form */
.mobile-profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-profile-form .form-field {
  background-color: transparent;
  border: 1px solid var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
}

.mobile-profile-form .form-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  flex-shrink: 0;
}

.mobile-profile-form .form-input {
  padding: 8px 12px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
}

.mobile-profile-form .form-input::placeholder {
  color: var(--text-muted);
}

.mobile-profile-form .form-input.error {
  border: 2px solid #dc3545;
}

/* Age input specific styling */
.mobile-profile-form input[type="number"] {
  width: 120px;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.mobile-profile-form input[type="number"]::placeholder {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

/* Location input specific styling */
.mobile-profile-form input[type="text"] {
  width: 120px;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.mobile-profile-form input[type="text"]::placeholder {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

/* Gender field - special layout */
.mobile-profile-form .form-field:has(.mobile-radio-group) {
  flex-direction: row;
  align-items: center;
}

/* Mobile Radio Group */
.mobile-radio-group {
  display: flex;
  gap: 10px;
}

.mobile-radio-group .radio-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: transparent;
  border: 1px solid var(--white);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-radio-group .radio-option input[type="radio"] {
  display: none;
}

.mobile-radio-group .radio-option span {
  font-size: 14px;
  color: var(--white);
}

.mobile-radio-group .radio-option.selected,
.mobile-radio-group .radio-option:has(input:checked) {
  background-color: var(--white);
  border-color: var(--white);
}

.mobile-radio-group .radio-option.selected span,
.mobile-radio-group .radio-option:has(input:checked) span {
  color: var(--hc-primary);
}

/* Mobile Health Questions */
.mobile-health-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Bottom Drawer Overlay */
.bottom-drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: calc(var(--z-drawer) - 1);
  transition: background-color 300ms ease;
  pointer-events: none;
}

@media (max-width: 992px) {
  .bottom-drawer-overlay {
    display: block;
  }
}

.bottom-drawer-overlay.visible {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* Clinical Trials Mode - Bottom Drawer */

.mhq-app-container.clinical-trials-mode .mobile-peek-profile-menu .profile-option.create-option svg {
  color: var(--ct-primary-light);
}

.mhq-app-container.clinical-trials-mode .mobile-peek-profile-menu .profile-option.create-option .profile-name {
  color: var(--ct-primary-light);
}

.mhq-app-container.clinical-trials-mode .mobile-radio-group .radio-option.selected,
.mhq-app-container.clinical-trials-mode .mobile-radio-group .radio-option:has(input:checked) {
  background-color: var(--white);
  border-color: var(--white);
}

.mhq-app-container.clinical-trials-mode .mobile-radio-group .radio-option.selected span,
.mhq-app-container.clinical-trials-mode .mobile-radio-group .radio-option:has(input:checked) span {
  color: var(--ct-primary);
}

/* ========================================
   Mobile Health Profile Button (Chat Input)
   ======================================== */

.mobile-health-profile-btn {
  display: none;
}

@media (max-width: 992px) {
  .mobile-health-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--sidebar-bg);
    border: none;
    border-radius: var(--radius-md);
    fill: #3B48B5;
    color: var(--black);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
    padding: 0;
  }

  .mobile-health-profile-btn:hover,
  .mobile-health-profile-btn:active {
    background-color: var(--sidebar-bg);
    opacity: 0.9;
  }

  .mobile-health-profile-btn svg,
  .mobile-health-profile-btn img {
    width: 30px;
    height: 36px;
  }

  /* Adjust chat input area layout for mobile */
  .chat-input-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .chat-input-wrapper {
    flex: 1;
    padding: 0;
    height: 48px;
  }

  /* Mobile send button - use sidebar background */
  .chat-send-btn {
    background-color: var(--hc-primary);
    color: var(--white);
  }

  .chat-send-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
  }

  .chat-send-btn:disabled {
    background-color: var(--gray-300);
    color: var(--text-muted);
  }

  /* Clinical trials mode */
  .mhq-app-container.clinical-trials-mode .mobile-health-profile-btn {
    color: var(--black);
  }
}

/* ========================================
   Site-Wide Side Menu Integration
   ======================================== */

.side-menu {
  transition: transform .36s ease-out 0s;
  -webkit-transition: transform .36s ease-out 0s;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-400px);
  opacity: 0;
  background: #FFFFFF;
  padding: 30px;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  width: 299px;
  z-index: 100000; /* Above MHQ app container (99999) */
  overflow: visible;
}

.side-menu.side-menu-open {
  transform: translateX(0);
  opacity: 1;
}

/* Hamburger icon inside side-menu should be black */
.side-menu .hamburger-menu .hamburger span {
  background-color: #000000 !important;
}

@media (max-width: 767px) {
  .side-menu.side-menu-open {
    width: 100%;
    padding: 0;
    background-color: #292C45;
    padding-bottom: 180px;
    overflow-x: hidden;
  }
}

/* Ensure side menu appears above MHQ overlay */
.side-menu-open {
  z-index: 100000 !important;
}

/* Body state when menu is open */
body.hamburger-open {
  overflow: hidden;
}

/* ========================================
   MHQ Ad Styles
   ======================================== */

/* Initial ad wrapper - sticky at top of chat */
.mhq-initial-ad-wrapper {
  flex-shrink: 0;
  padding: 0;
  display: none; /* Hidden until ad is loaded */
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.mhq-initial-ad-wrapper.visible {
  display: flex;
  justify-content: center;
  padding: 0;
}

.mhq-initial-ad-wrapper .ad {
  min-width: 300px;
  min-height: 50px;
  max-width: 970px;
  margin: 0 auto;
}

/* Dynamic chat ads */
.chat-ad {
  min-width: 300px;
  margin: 16px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.chat-ad[data-mhq-ad="true"] {
  max-width: 970px;
}

.mhq-initial-ad-wrapper .ad-placeholder,
.chat-ad .ad-placeholder {
  display: none;
}

#main .ad:after {
  display: none;
}

@media (max-width: 992px) {
  .mhq-initial-ad-wrapper {
    padding: 8px 12px;
  }

  .chat-ad {
    margin: 12px auto;
  }
}

/* ========================================
   Profile Selection Popup
   ======================================== */

.profile-selection-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100001; /* Above mhq-app-container (99999) and side-menu (100000) */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.profile-selection-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Popup card - dark blue background matching primary theme */
.profile-selection-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  background-color: var(--hc-primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  max-width: 390px;
  width: 90vw;
  box-shadow: var(--shadow-xl);
  transition: transform 300ms ease;
}

.profile-selection-overlay.visible .profile-selection-popup {
  transform: translate(-50%, -50%);
}

/* Close button */
.profile-selection-popup .popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.profile-selection-popup .popup-close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

/* Title */
.profile-selection-popup .popup-title {
  font-size: 22px;
  font-weight: bold;
  color: #F0F3F7;
  margin: 0 0 20px 0;
  padding-right: 28px;
  line-height: 1.2;
}

/* Description */
.profile-selection-popup .popup-description {
  font-size: 18px;
  font-weight: 500;
  color: white;
  margin: 0 0 30px 0;
  line-height: 1.2;
}

/* Dropdown wrapper */
.profile-selection-popup .popup-dropdown-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.profile-selection-popup .popup-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

/* Dropdown trigger - matches .profile-dropdown-btn */
.profile-selection-popup .popup-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-selection-popup .popup-dropdown-btn:hover {
  border-color: var(--primary-color);
}

.profile-selection-popup .popup-dropdown-btn .profile-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: #4C5ACF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-selection-popup .popup-dropdown-btn .profile-icon svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.profile-selection-popup .popup-dropdown-btn .profile-text {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: var(--gray-800);
}

.profile-selection-popup .popup-dropdown-btn .profile-arrow {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}

.profile-selection-popup .popup-dropdown-btn.open .profile-arrow {
  transform: rotate(180deg);
}

/* Dropdown menu - matches .sidebar-profile-dropdown-menu */
.profile-selection-popup .popup-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  z-index: 10;
}

.profile-selection-popup .popup-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown items - matches .sidebar-profile-item */
.profile-selection-popup .popup-profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-bottom: 1px solid var(--gray-100);
}

.profile-selection-popup .popup-profile-item:last-child {
  border-bottom: none;
}

.profile-selection-popup .popup-profile-item:hover {
  background-color: var(--gray-50);
}

.profile-selection-popup .popup-profile-item.active {
  background-color: var(--primary-color);
}

.profile-selection-popup .popup-profile-item.active .profile-name {
  color: var(--white);
}

.profile-selection-popup .popup-profile-item.active .profile-icon {
  background-color: var(--white);
}

.profile-selection-popup .popup-profile-item.active .profile-icon svg {
  color: var(--primary-color);
}

.profile-selection-popup .popup-profile-item .profile-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-selection-popup .popup-profile-item .profile-icon svg {
  width: 14px;
  height: 14px;
  color: var(--white);
}

.profile-selection-popup .popup-profile-item .profile-name {
  font-size: 14px;
  color: var(--gray-800);
}

/* Action buttons */
.profile-selection-popup .popup-actions {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin-bottom: 42px;
}

.profile-selection-popup .popup-footer {
  border-top: 1px solid var(--white);
  display: flex;
  padding-top: 36px;
  flex-direction: row;
  gap: 13px;
}

.profile-selection-popup .popup-footer svg {
  width: 30px;
  height: 36px;
  flex-shrink: 0;
}

.profile-selection-popup .popup-btn {
  width: 100%;
  padding: 16px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  text-align: center;
}

.profile-selection-popup .popup-btn-primary {
  background: var(--primary-color);
  color: var(--white);
}

.profile-selection-popup .popup-btn-primary:hover {
  opacity: 0.9;
}

#profile-popup-use {
  background: #C5F1EE;
  border-radius: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #292C45;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}

#profile-popup-skip {
  background: transparent;
  border-radius: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: white;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #C5F1EE;
  padding: 15px 16px;
}

.profile-selection-popup .popup-btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.profile-selection-popup .popup-btn-secondary:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Note text */
.profile-selection-popup .popup-note {
  font-size: 16px;
  font-weight: 450;
  color: white;
  margin: 0;
  text-align: left;
  line-height: 1.3;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .profile-selection-popup {
    padding: 24px 18px 20px;
  }

  .profile-selection-popup .popup-title {
    font-size: 18px;
  }

  .profile-selection-popup .popup-description {
    font-size: 13px;
  }
}

/* ========================================
   Onboarding Tooltips
   ======================================== */

.mhq-onboarding-tooltip {
  position: absolute;
  background-color: var(--hc-primary);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  z-index: var(--z-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms ease;
  pointer-events: none;
}

.mhq-onboarding-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

/* Desktop Profile Tooltip — arrow points left toward dropdown */
.mhq-onboarding-tooltip--desktop-profile {
  top: 118px;
  left: calc(var(--sidebar-width) - 22px);
  max-width: 260px;
}

.mhq-onboarding-tooltip--desktop-profile::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 16px solid var(--hc-primary);
}

/* Desktop Trials Tooltip — arrow points left toward nav button */
.mhq-onboarding-tooltip--desktop-trials {
  top: 332px;
  left: calc(var(--sidebar-width) - 22px);
  max-width: 310px;
}

.mhq-onboarding-tooltip--desktop-trials::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 16px solid var(--hc-primary);
}

/* Mobile Trials Tooltip — arrow points up toward Clinical Trials tab */
.mhq-onboarding-tooltip--mobile-trials {
  top: 129px;
  right: 43px;
  max-width: 280px;
}

.mhq-onboarding-tooltip--mobile-trials::before {
  content: '';
  position: absolute;
  top: -16px;
  right: 40px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid var(--hc-primary);
}

/* Mobile Profile Tooltip — arrow points down toward health profile button */
.mhq-onboarding-tooltip--mobile-profile {
  bottom: 83px;
  left: 7px;
  max-width: 260px;
}

.mhq-onboarding-tooltip--mobile-profile::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 16px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid var(--hc-primary);
}

/* Desktop tooltips hidden on mobile */
@media (max-width: 992px) {
  .mhq-onboarding-tooltip--desktop-profile,
  .mhq-onboarding-tooltip--desktop-trials {
    display: none !important;
  }
}

/* Mobile tooltips hidden on desktop */
@media (min-width: 993px) {
  .mhq-onboarding-tooltip--mobile-trials,
  .mhq-onboarding-tooltip--mobile-profile {
    display: none !important;
  }
}

/* ========================================
   Homepage Overlay
   ======================================== */

#mhq-homepage-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
}


/* ========================================
   MHQ Email Trials - Popup & Button Styles
   ======================================== */
 
/* --- Email Me Button (in trials drawer header) --- */
 
.mhq-email-trials-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #099099;
  background: transparent;
  border: 1.5px solid #099099;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
 
.mhq-email-trials-btn:hover {
  background: #099099;
  color: #ffffff;
}
 
.mhq-email-trials-btn:hover svg {
  stroke: #ffffff;
}
 
.mhq-email-trials-btn:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
 
.mhq-email-trials-btn svg {
  flex-shrink: 0;
  transition: stroke 0.2s;
}

#trials-drawer .drawer-header {
  flex-wrap: wrap;
}

.mhq-email-trials-btn {
  order: 3;
  width: auto;
  margin-top: 4px;
  margin-right: 50%;
}

 
/* --- Popup Overlay --- */
 
.mhq-email-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* max 32-bit int — sits above everything */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  padding: 20px;
}
 
.mhq-email-popup-overlay.visible {
  background: rgba(0, 0, 0, 0.55);
}
 
/* --- Popup Card --- */
 
.mhq-email-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
 
.mhq-email-popup-overlay.visible .mhq-email-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}
 
/* --- Close Button --- */
 
.mhq-email-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #9ca3af;
  transition: color 0.15s, background 0.15s;
}
 
.mhq-email-popup-close:hover {
  color: #374151;
  background: #f3f4f6;
}
 
/* --- Title & Description --- */
 
.mhq-email-popup-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
}
 
.mhq-email-popup-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}
 
/* --- Input Field --- */
 
.mhq-email-popup-field {
  margin-bottom: 20px;
}
 
.mhq-email-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  color: #1a1a2e;
  background: #f9fafb;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
 
.mhq-email-input:focus {
  border-color: #099099;
  box-shadow: 0 0 0 3px rgba(9, 144, 153, 0.15);
  background: #ffffff;
}
 
.mhq-email-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
 
.mhq-email-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #ef4444;
  min-height: 16px;
}
 
/* --- Action Buttons --- */
 
.mhq-email-popup-actions {
  display: flex;
  gap: 10px;
}
 
.mhq-email-popup-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
 
.mhq-email-popup-btn:active {
  transform: scale(0.98);
}
 
.mhq-email-popup-btn.primary {
  color: #ffffff;
  background: #099099;
}
 
.mhq-email-popup-btn.primary:hover {
  background: #077a82;
}
 
.mhq-email-popup-btn.secondary {
  color: #4a5568;
  background: #f3f4f6;
}
 
.mhq-email-popup-btn.secondary:hover {
  background: #e5e7eb;
}
 
/* --- Mobile --- */
 
@media (max-width: 480px) {
  .mhq-email-popup {
    padding: 24px 20px 20px;
  }
 
  .mhq-email-popup-actions {
    flex-direction: column;
  }
}