/* --- Tailwind Responsive Breakpoints --- */

/* --- Colors --- */

/*
  Tailwind Default Colors (https://tailwindcss.com/docs/colors):

  Neutral Colors:
  neutral-50:  #fafafa
  neutral-100: #f5f5f5
  neutral-200: #e5e5e5
  neutral-300: #d4d4d4
  neutral-400: #a3a3a3
  neutral-500: #737373
  neutral-600: #525252
  neutral-700: #404040
  neutral-800: #262626
  neutral-950: #0a0a0a

  Orange Colors:
  orange-50:   #fff7ed
  orange-100:  #ffedd5
  orange-200:  #fed7aa
  orange-300:  #fdba74
  orange-400:  #fb923c
  orange-500:  #f97316
  orange-600:  #ea580c
  orange-700:  #c2410c
  orange-800:  #9a3412
  orange-900:  #7c2d12
  orange-950:  #431407

  Bone Colors:
  bone-50:   #FCFBFA
  bone-100:  #F8F7F4
  bone-200:  #F4F2ED
  bone-300:  #EFEDE6
  bone-400:  #EBE9E0
  bone-500:  #C9C5B8
  bone-600:  #A8A291
  bone-700:  #87816E
  bone-800:  #65614F
  bone-900:  #454234
  bone-950:  #2A281F
*/

:root {
  /* Neutral */
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-950: #0a0a0a;

  /* Orange */
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;

  /* Bone */
  --bone-50: #fcfbfa;
  --bone-100: #f8f7f4;
  --bone-200: #f4f2ed;
  --bone-300: #efede6;
  --bone-400: #ebe9e0;
  --bone-500: #c9c5b8;
  --bone-600: #a8a291;

  /* Forms */
  --form-bg-color: var(--bone-100);
  --form-border-color: var(--bone-100);
  --form-focus-border-color: var(--bone-100);
  --form-placeholder-color: #b0b0b0;
  --form-text-color: var(--neutral-700);
  --form-label-color: #1f2937;
  --form-border-radius: 8px;
  --form-padding-y: 8px;
  --form-padding-x: 12px;
  --form-text-line-height: 20px;
}

/* @import "forms"; */

/* Custom radio button styling */
input[type="radio"][name="interaction_mode"] {
  accent-color: var(--neutral-800);
}

input[type="radio"][name="interaction_mode"]:checked {
  background-color: var(--neutral-800);
  border-color: var(--neutral-800);
}

input[type="radio"][name="interaction_mode"]:focus {
  --tw-ring-color: rgb(23 23 23 / 0.5);
  box-shadow: 0 0 0 2px rgb(23 23 23 / 0.5);
}

/* Custom checkbox styling for consent */
input[type="checkbox"]#consent_confirmed {
  accent-color: var(--neutral-800);
}

input[type="checkbox"]#consent_confirmed:checked {
  background-color: var(--neutral-800);
  border-color: var(--neutral-800);
}

input[type="checkbox"]#consent_confirmed:focus {
  --tw-ring-color: rgb(23 23 23 / 0.5);
  box-shadow: 0 0 0 2px rgb(23 23 23 / 0.5);
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* font-family: "DM Sans", sans-serif; */
  /* font-family: "Satoshi", sans-serif; */
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  /* letter-spacing: -0.015em; */
  background-color: var(--bone-100);
}

.content-container {
  margin-left: auto;
  margin-right: auto;
}

/* --- Typography --- */

h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.03em;
  color: var(--neutral-800);
}

h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.03em;
  color: var(--neutral-800);
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.03em;
  color: var(--neutral-800);
}

h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--neutral-800);
}

h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: var(--neutral-800);
}

.text-xxs {
  font-size: 9px;
}

.agent-text {
  font-size: 20px; /* Mobile first: text-xl */
  font-weight: 450; /* Corresponds to font-medium */
  line-height: 1.5; /* Adjust as needed, e.g., 28px for text-xl */
  text-align: center;

  margin-right: auto; /* Centering block with max-width */
  margin-left: auto; /* Centering block with max-width */
  color: var(--neutral-800);
}

.bg-bone-50 {
  background-color: var(--bone-50);
}
.hover\:bg-bone-50:hover {
  background-color: var(--bone-50);
}
.border-bone-50 {
  border-color: var(--bone-50);
}

.bg-bone-100 {
  background-color: var(--bone-100);
}
.hover\:bg-bone-100:hover {
  background-color: var(--bone-100);
}
.border-bone-100 {
  border-color: var(--bone-100);
}

.bg-bone-200 {
  background-color: var(--bone-200);
}
.border-bone-200 {
  border-color: var(--bone-200);
}

.bg-bone-300 {
  background-color: var(--bone-300);
}
.border-bone-300 {
  border-color: var(--bone-300);
}

.bg-bone-400 {
  background-color: var(--bone-400);
}
.border-bone-400 {
  border-color: var(--bone-400);
}

.text-bone-400 {
  color: var(--bone-400);
}

.notice {
  position: absolute;
  bottom: -60px;
  background-color: var(--neutral-800);
  color: #ffffff;
  border-radius: 16px;
  padding: 10px 16px 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  z-index: 1050;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: fit-content;
  transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.45, 1.3);
}

.notice-show {
  bottom: 28px;
}

.notice-close-icon {
  cursor: pointer;
}

/* --- Toast Notification System --- */

#toast-container {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  z-index: 1060;
  pointer-events: none;
}

.toast {
  background-color: var(--neutral-800);
  color: #ffffff;
  border-radius: 16px;
  padding: 10px 16px 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  width: fit-content;
  max-width: 90vw;
  pointer-events: auto;
  transform: translateY(80px);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.68, -0.55, 0.45, 1.3),
    opacity 0.3s cubic-bezier(0.68, -0.55, 0.45, 1.3);
}

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

.toast-dismissing {
  transform: translateY(80px);
  opacity: 0;
  transition:
    transform 0.2s ease-in,
    opacity 0.2s ease-in;
}

.toast-close-icon {
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Button --- */

.btn {
  border-radius: 12px;
  line-height: 16px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  align-self: center;
  justify-self: center;
  font-size: 13px;
}

/* --- Button Icon --- */

.btn.has-icon-left {
  padding-left: 12px;
}

.btn.has-icon-right {
  padding-right: 12px;
}

.btn.just-icon-on-mobile {
  padding-left: 12px;
  padding-right: 12px;
}

.btn.just-icon-btn {
  padding: 12px;
}

.btn.just-icon-on-mobile span {
  /* hide the label */
  display: none;
}

.btn.just-icon-on-desktop svg {
  display: none;
}

.btn-sm-icon {
  padding: 10px;
  border-radius: 8px;
}

/* --- Button Hotkey --- */

.btn.has-hotkey {
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.btn kbd {
  display: none;
  font-size: 9px;
  font-weight: 550;
  border: 2px solid;
  border-radius: 6px;
  height: 20px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
}

.btn-primary kbd {
  display: none;
  color: #ffd6a7;
  border: 2px solid #ff8904;
}

.btn-secondary kbd {
  display: none;
  color: var(--neutral-300);
  border: 2px solid var(--neutral-500);
}

.btn-tertiary kbd,
input kbd.tertiary {
  display: none;
  color: var(--neutral-400);
  border: 2px solid var(--neutral-200);
  transition: all 0.3s ease;
}

.btn-tertiary:hover kbd,
.btn-tertiary:focus kbd,
.btn-tertiary:focus-visible kbd,
.btn-tertiary:active kbd {
  color: var(--orange-500);
  border-color: var(--orange-200);
}

kbd.tertiary {
  display: none;
  font-size: 9px;
  border: 2px solid;
  border-radius: 6px;
  height: 20px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
  color: var(--neutral-400);
  border: 2px solid var(--neutral-200);
}

/* .btn-tertiary kbd {
  font-size: 9px;
  color: #a3a3a3;
  border: 2px solid #e5e5e5;
  border-radius: 6px;
  height: 20px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px; 
} */

.btn-sm {
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 11px;

  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
}

.btn-lg {
  font-size: 15px;
  font-weight: 500;
  border-radius: 16px;
  line-height: 16px;
  padding: 16px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
}

.gsi-material-button-icon {
  height: 20px;
  margin-right: 2px;
  min-width: 20px;
  width: 20px;
}

.btn-primary {
  color: rgba(255, 255, 255, 0.9);
  background-color: var(--orange-500);
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
  color: rgba(255, 255, 255, 1);
  background-color: var(--orange-500);
  border: none;
  outline: none;
}

.btn-secondary {
  color: rgba(255, 255, 255, 0.9);
  background-color: var(--neutral-800);
  transition: all 0.3s ease;
  border: none;
  outline: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active {
  background-color: var(--neutral-950);
  /* box-shadow: 0 0 0 3px var(--neutral-300); */
  border: none;
  outline: none;
}

.btn-tertiary {
  color: var(--neutral-500);
  background-color: var(--bone-100);
  transition: all 0.3s ease;
  border: none;
  outline: none;
}

.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:focus-visible,
.btn-tertiary:active {
  color: var(--orange-500);
  background-color: var(--orange-50);
}

/* Screener pill-style answer buttons */
.screener-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  transition: all 0.2s ease;
  user-select: none;
  color: var(--neutral-500);
}

.pill-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.screener-pill:hover {
  scale: 1.02;
}

.screener-pill.selected {
  background-color: #dcfce7; /* green-100 */
  color: #166534; /* green-800 */
}

.btn-danger-primary {
  color: rgba(255, 255, 255, 0.9); /* text-white/90 */
  background-color: #dc2626; /* bg-red-600 */
  transition: all 0.3s ease;
}

.btn-danger-secondary {
  color: #c10007;
  background-color: #fee2e2; /* bg-red-50 */
  transition: all 0.3s ease;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active {
  color: #ffffff; /* text-white */
  background-color: #b91c1c; /* bg-red-700 */
  box-shadow: 0 0 0 3px #ffd7d7; /* shadow-red-400 */
  border: none;
  outline: none;
}

/* Ensure buttons with the .hidden class are actually hidden */
.btn.hidden {
  display: none;
}

/* Start of Selection */
.sidenav-item {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  width: 100%;
  transition: all 0.3s ease;
  margin-bottom: 2px;
  transition: all 0.3s ease;
}

.sidenav-item:hover {
  background-color: var(--bone-50);
  color: var(--orange-500);
}

.sidenav-item.active {
  background-color: #ffffff;
  color: var(--orange-500);
}

/* End of Selection */

/* --- Low Credit Banner --- */

.low-credit-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: 12px;
  overflow: hidden;
}

.low-credit-banner__link {
  display: flex;
  width: 100%;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  transition: background-color 0.15s ease;
}

.low-credit-banner__link:hover {
  background-color: rgba(251, 191, 36, 0.15);
}

.low-credit-banner__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-color: #fbbf24;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #92400e;
}

.low-credit-banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.low-credit-banner__title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.2;
}

.low-credit-banner__balance {
  font-size: 11px;
  color: #a16207;
  line-height: 1.3;
}

.low-credit-banner__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #a16207;
}

.low-credit-banner__message {
  padding: 12px;
  background-color: rgba(251, 191, 36, 0.1);
  border-top: 1px solid #fcd34d;
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}

/* --- Subnav Header --- */

.subnav-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.subnav-left {
  display: flex;
  flex: 0;
  align-items: center;
  justify-content: flex-start;
}

.subnav-middle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.subnav-right {
  display: flex;
  flex: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.subnav {
  display: flex;
  background-color: var(--bone-100);
  border-radius: 12px;
  height: 36px;
  padding: 4px;
  gap: 4px;
}

a.subnav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  /* padding: 6px 16px; */
  padding: 4px 12px;
  transition: all 0.3s ease;
  border-radius: 8px;
  color: var(--neutral-500);
}

a.subnav-item:hover {
  background-color: var(--bone-50);
  color: var(--orange-500);
}

/* --- Content Header --- */

.content-header {
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.header-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
}

.header-right {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.header-right .btn {
  align-self: auto;
}

ul.breadcrumb {
  display: none;
}

.capitalize {
  color: var(--neutral-500);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  line-height: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.capitalize-small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  line-height: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-header-item a {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.content-header-item a:hover {
  color: var(--neutral-800);
  transition: all 0.3s ease;
}

.header-tags {
  display: flex;
  gap: 4px;
  margin-top: -8px;
  margin-bottom: 24px;
}

.tag {
  display: inline-flex; /* Use inline-flex to align text and icon */
  align-items: center; /* Vertically center items */
  color: var(--neutral-300);
  background-color: var(--neutral-800);
  border-radius: 8px; /* Fully rounded corners for pill shape */
  padding: 6px 8px; /* Vertical and horizontal padding */
  font-size: 9px; /* Slightly smaller font size */
  line-height: 12px; /* Adjust line height for padding */
  white-space: nowrap; /* Prevent tags from wrapping */
  text-transform: uppercase;
  letter-spacing: 1.4px;
  transition: all 0.3s ease;
}

.tag-sm {
  display: inline-flex; /* Use inline-flex to align text and icon */
  align-items: center; /* Vertically center items */
  border-radius: 8px; /* Fully rounded corners for pill shape */
  padding: 3px 5px 3px 5px; /* Vertical and horizontal padding */
  font-size: 9px; /* Slightly smaller font size */
  line-height: 12px; /* Adjust line height for padding */
  white-space: nowrap; /* Prevent tags from wrapping */
  text-transform: uppercase;
  letter-spacing: 1.4px;
  transition: all 0.3s ease;
}

.tag-light {
  background-color: var(--bone-100);
  color: var(--neutral-500);
  font-weight: 500;
}

.tag-white {
  background-color: #ffffff;
  color: var(--neutral-500);
  font-weight: 500;
  border: 1px solid var(--bone-200);
}

.client-status-banner {
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  padding: 10px 20px;
  text-align: center;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Main Content --- */

.list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: -1px;
  width: 100%;
  color: var(--neutral-800);
  transition: all 0.3s ease;
  border-top: 1px solid var(--bone-200);
  border-bottom: 1px solid var(--bone-200);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.list-item:hover {
  background-color: var(--bone-100);
  color: var(--neutral-800);
  border: 1px solid var(--bone-100);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.list-item:has(+ .list-item:hover) {
  border-bottom-color: transparent;
}

.list-item:hover + .list-item {
  border-top-color: transparent;
}

.list-item-title {
  text-wrap: wrap;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

/* TA-502 — the settings hub filter hides non-matching rows with the `hidden`
   attribute. `.list-item` sets `display: flex`, which ties with `[hidden]` on
   specificity; this rule outranks both so filtered rows actually disappear. */
[data-settings-search-target][hidden] {
  display: none;
}

.key-value-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.key-value-content span {
  color: var(--neutral-500);
  font-size: 12px;
  display: block;
  padding-bottom: 4px;
}

/* --- Forms --- */

/* Labels */
label {
  display: block;
  margin-bottom: 8px; /* Reduced margin (0.4rem * 16px/rem = 6.4px, but 8px is used) */
  font-weight: 450; /* Medium weight */
  color: var(--form-label-color);
  font-size: 13px; /* Tailwind's text-sm */
  line-height: 20px; /* Tailwind's leading-tight (1.25rem * 16px/rem) */
}

/* Common styles for text-based inputs, select, textarea */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 7px 12px;
  font-size: 13px; /* Base font size */
  line-height: var(
    --form-text-line-height
  ); /* Added to control content height */
  color: var(--form-text-color);
  background-color: var(--form-bg-color);
  border: 1px solid var(--form-border-color);
  border-radius: var(--form-border-radius);
  box-sizing: border-box;
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  appearance: none; /* Remove default styling, especially for select */
}

/* Placeholder text style */
input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder-color);
  opacity: 1; /* Ensures placeholder is visible, especially in Firefox */
}

/* Focus styles */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border: 1px solid var(--form-focus-border-color);
  background-color: var(--form-bg-color); /* White on focus */
  /* Adjust padding to prevent layout shift due to thicker border */
  padding: 7px 12px;
}

/* Styling for select dropdown arrow (minimal example) */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center; /* 0.75rem * 16px/rem */
  background-size: 1.25em 1.25em;
  padding-right: 40px; /* Make space for the arrow (2.5rem * 16px/rem) */
}

/* Disabled styles */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--bone-100);
  color: var(--neutral-500);
  cursor: not-allowed;
  border-color: var(--bone-200);
}

/* Read-only styles (to match the image's last field appearance if it's readonly) */
input[readonly],
textarea[readonly] {
  background-color: var(--form-bg-color); /* Same as normal */
  color: var(--form-text-color);
  /* border-color: var(--form-border-color); /* Keep normal border or make it less prominent if desired */
  /* cursor: default; */
}

/* Wrapper for label and input, helps with spacing */
.form-group {
  margin-bottom: 120px; /* 14px (0.875rem * 16px/rem) */
}

.form-field {
  margin-bottom: 24px; /* 14px (0.875rem * 16px/rem) */
}

input.search-input {
  border-color: var(--bone-100);
  border-radius: 12px;
  padding-left: 34px !important;
}

/* Search input container - responsive width with focus expansion on desktop */
.search-input-container {
  position: relative;
  width: 100%;
  max-width: 260px;
  transition: max-width 0.2s ease-in-out;
}

@media (min-width: 768px) {
  .search-input-container {
    max-width: 200px;
  }

  .search-input-container:focus-within {
    max-width: 100%;
  }
}

/* Phone input styling - intl-tel-input integration */
.phone-input-container {
  position: relative;
}

.phone-input-container .iti {
  width: 100%;
}

.phone-input-container .iti__input {
  width: 100% !important;
  padding: var(--form-padding-y) var(--form-padding-x) !important;
  padding-left: 50px !important; /* Space for country flag */
  padding-right: 90px !important; /* Reduced from 97px to 90px */
  font-size: 13px !important;
  line-height: var(--form-text-line-height) !important;
  color: var(--form-text-color) !important;
  background-color: var(--form-bg-color) !important;
  border: 2px solid var(--form-border-color) !important;
  border-radius: var(--form-border-radius) !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out !important;
}

.phone-input-container .iti__input:focus {
  outline: none !important;
  border: 2px solid var(--form-focus-border-color) !important;
}

.phone-input-container .iti__input::placeholder {
  color: var(--form-placeholder-color) !important;
  opacity: 1 !important;
}

/* Country dropdown styling */
.phone-input-container .iti__country-list {
  border: 1px solid var(--form-border-color);
  border-radius: var(--form-border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.phone-input-container .iti__selected-country {
  padding: 0 8px;
}

/* Error state styling */
.phone-input-container .iti__input.border-red-300 {
  border-color: #fca5a5 !important;
}

.phone-input-container .iti__input.border-green-300 {
  border-color: #86efac !important;
}

.pagination {
  background-color: var(--bone-100);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.page a {
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--neutral-500);
  transition: all 0.3s ease;
  border-radius: 8px;
}

.page a:hover {
  color: var(--orange-500);
  background-color: var(--bone-50);
  border-radius: 8px;
}

.page.current {
  background-color: #ffffff;
  border-radius: 8px;
  color: var(--orange-500);
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.page.gap {
  background-color: var(--bone-100);
  color: var(--neutral-500);
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.study-guide-content h1,
.study-guide-content h2,
.study-guide-content h3,
.study-guide-content h4,
.study-guide-content h5,
.study-guide-content h6 {
  color: var(--neutral-800);
  padding-bottom: 4px;
  font-size: 16px;
}

.study-guide-content p {
  padding-bottom: 16px;
}

.study-guide-content:last-child {
  padding-bottom: 0;
}

.content-paragraphs p {
  margin-bottom: 8px;
}

.question-prompt p {
  line-height: 16px;
  margin-bottom: 4px;
}

.simple_format p {
  margin-bottom: 8px;
}

.block-prompt p {
  margin-bottom: 8px;
}

/* Message content - comprehensive markdown styling */
.message-content {
  line-height: 1.6;
  color: var(--neutral-700);
}

.message-content p {
  margin-bottom: 16px;
  color: var(--neutral-500);
}

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

/* Headings */
.message-content h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 16px;
  margin-top: 24px;
  color: var(--neutral-800);
}

.message-content h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 12px;
  margin-top: 20px;
  color: var(--neutral-800);
}

.message-content h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 12px;
  margin-top: 16px;
  color: var(--neutral-800);
}

.message-content h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 8px;
  margin-top: 16px;
  color: var(--neutral-800);
}

.message-content h5,
.message-content h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 8px;
  margin-top: 12px;
  color: var(--neutral-800);
}

/* Lists */
.message-content ul,
.message-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.message-content li {
  margin-bottom: 8px;
  color: var(--neutral-500);
}

.message-content li:last-child {
  margin-bottom: 0;
}

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

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

.message-content ul ul,
.message-content ol ol,
.message-content ul ol,
.message-content ol ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Code */
.message-content code {
  background-color: var(--bone-100);
  color: #dc2626; /* text-red-600 */
  padding: 2px 6px;
  border-radius: 4px;
  font-family:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New",
    monospace;
  font-size: 12px;
}

.message-content pre {
  background-color: var(--bone-100);
  border: 1px solid var(--bone-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  overflow-x: auto;
  font-family:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New",
    monospace;
  font-size: 12px;
  line-height: 1.4;
}

.message-content pre code {
  background: none;
  color: var(--neutral-800);
  padding: 0;
  border-radius: 0;
}

/* Blockquotes */
.message-content blockquote {
  border-left: 4px solid var(--orange-500);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--neutral-600);
  font-style: italic;
}

.message-content blockquote p {
  margin-bottom: 8px;
}

/* Links */
.message-content a {
  color: var(--orange-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.message-content a:hover {
  color: var(--orange-700);
}

/* Tables */
.message-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 13px;
}

.message-content th,
.message-content td {
  border: 1px solid var(--bone-200);
  padding: 8px 12px;
  text-align: left;
}

.message-content th {
  background-color: var(--bone-100);
  font-weight: 600;
  color: var(--neutral-800);
}

.message-content td {
  color: var(--neutral-700);
}

/* Horizontal rule */
.message-content hr {
  border: none;
  height: 1px;
  background-color: var(--bone-200);
  margin: 24px 0;
}

/* Strong and emphasis */
.message-content strong {
  font-weight: 600;
  color: var(--neutral-800);
}

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

/* Images */
.message-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

/* Nested lists styling */
.message-content ul ul,
.message-content ol ol {
  padding-left: 20px;
}

/* First element margin reset */
.message-content > *:first-child {
  margin-top: 0;
}

/* Last element margin reset */
.message-content > *:last-child {
  margin-bottom: 0;
}

.analysis-summary p {
  margin-bottom: 12px;
}

/* --- Responsive Styles --- */

/* Small screens (sm) */
@media (min-width: 640px) {
  /* Add sm styles here */

  .list-item-title {
    text-wrap: wrap;
    text-transform: capitalize;
    transition: all 0.3s ease;
    font-size: 13px;
    line-height: 20px;
  }

  .btn.has-hotkey {
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .btn kbd {
    display: inline-flex;
  }

  .btn.just-icon-on-mobile {
    padding-left: 16px;
    padding-right: 16px;
  }

  .btn.just-icon-on-mobile span {
    display: inline; /* show the label */
  }
}

/* Medium screens (md) */
@media (min-width: 768px) {
  /* Add md styles here */

  h1 {
    font-size: 36px;
    line-height: 40px;
  }

  h2 {
    font-size: 24px;
    line-height: 32px;
  }

  h3 {
    font-size: 20px;
    line-height: 28px;
  }

  h4 {
    font-size: 18px;
    line-height: 26px;
  }

  h5 {
    font-size: 16px;
    line-height: 24px;
  }

  ul.breadcrumb {
    display: flex;
    align-items: center;
    color: var(--neutral-500);
    gap: 8px; /* This gap will now be between the li (including its ::after) and the next li */
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 12px;
    margin-bottom: 16px;
    padding-left: 0; /* Remove default ul padding */
    list-style: none; /* Remove default list bullets */
  }

  /* Add the separator after each list item except the last one */
  ul.breadcrumb li:not(:last-child)::after {
    content: "//";
    color: var(--neutral-500);
    margin-left: 8px;
    color: inherit;
    position: relative;
    top: -1px;
    text-decoration: none;
    pointer-events: none;
  }

  ul.breadcrumb li a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
  }

  ul.breadcrumb li a:hover {
    color: var(--orange-500);
  }

  .agent-text {
    font-size: 24px; /* md:text-2xl */
    line-height: 1.5; /* Adjust as needed, e.g., 32px for text-2xl */
  }

  .list-item {
    flex-direction: row;
    align-items: center;
  }

  .subnav-left {
    flex: 1;
  }

  .subnav-right {
    flex: 1;
  }
}

/* Large screens (lg) */
@media (min-width: 1024px) {
  /* Add lg styles here */

  .agent-text {
    font-size: 32px; /* lg:text-3xl */
    line-height: 48px;
    letter-spacing: -0.035em;
    /* padding remains md:px-6 as per original example, or adjust if needed */
  }

  .content-container {
    max-width: 820px;
  }
}

/* Extra large screens (xl) */
@media (min-width: 1280px) {
  /* Add xl styles here */
}

/* Double extra large screens (2xl) */
@media (min-width: 1536px) {
  /* Add 2xl styles here */
  .content-container {
    max-width: 1000px;
  }
}

/* Sortable Styles */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  /* outline: 2px solid #f97316;
  outline-offset: 2px; */
}

.sortable-drag {
  transform: rotate(5deg);
}

/* Drag handle styles */
.drag-handle {
  transition: all 0.2s ease;
  /* padding: 10px; */
  background-color: white;
  border-radius: 8px;
  cursor: grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  color: var(--neutral-500);
}

.drag-handle:hover {
  color: var(--orange-500);
}

/* AI Typing Indicator Animation */
.typing-indicator {
  display: flex;
  gap: 4px;
  margin-left: 2px;
}

.typing-indicator span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #9ca3af; /* text-neutral-200 */
  animation: typing 1.4s infinite;
}

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

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

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Fade-in animation for content transitions */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

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

/* Enhanced block type selection cards */
.block-type-card {
  transition: all 0.2s ease-in-out;
  transform: translateY(0);
}

.block-type-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.block-type-card.selected {
  border-color: #3b82f6 !important;
  background-color: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Hide textarea resize handle while keeping functionality */
textarea {
  resize: vertical;
}

textarea::-webkit-resizer {
  display: none;
}

/* Global chat module (TA-460): three-card canvas [ Nav | Main content | Chat ].
   The chat panel is a layout-level sibling card of the main content card. Nav
   (14rem) and the chat card (400px) are fixed widths; only the main content
   card flexes. Opening/closing is a client-side class toggle (.show) — no
   page load, no sidenav collapse. */
:root {
  --chat-card-width: 400px;
  /* Fixed horizontal chrome around .content-container while the chat card is
     open: sidenav (224px) + main padding (16px) + main card padding (48px) +
     chat card incl. its gap (408px). Used to pin the container width so
     content never reflows on toggle — only card width + whitespace animate. */
  --chat-canvas-chrome: 696px;
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* The chat card itself: a white rounded module matching the nav and main
   content cards. Fixed inner width so text never rewraps mid-animation. */
.chat-sidebar-content {
  width: var(--chat-card-width);
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 1.5rem;
}

/* The panel's single scroll region (TA-461): min-height 0 lets the flex item
   shrink below its content so the messages scroll while the header and
   composer stay fixed. Auto-scroll pinning lives in chat-scroll. */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-input-area {
  flex-shrink: 0;
  padding-top: 16px;
}

/* Kept for the page content wrappers on project/study/interview show pages
   (the .chat-active squeeze variant is gone — the main card flexes on its
   own when the chat card opens). */
.page-details-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile + tablet (<1024px): the chat card is a bottom sheet. */
@media (max-width: 1023.98px) {
  .chat-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 60vh;
    z-index: 1000;
  }

  .chat-sidebar.show {
    width: 100vw;
    opacity: 1;
    pointer-events: auto;
  }

  .chat-sidebar-content {
    width: 100%;
    border-top: 2px solid var(--bone-200);
    border-radius: 1.5rem 1.5rem 0 0;
  }
}

/* Narrow desktop (1024–1439px): insetting the card would squeeze content
   below a readable width (~700px min), so the chat card overlays instead. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .chat-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 1000;
  }

  .chat-sidebar.show {
    width: calc(var(--chat-card-width) + 0.5rem);
    padding: 0.5rem 0.5rem 0.5rem 0;
    opacity: 1;
    pointer-events: auto;
  }

  .chat-sidebar-content {
    border: 2px solid var(--bone-200);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  }
}

/* Wide desktop (≥1440px): inset mode — the chat card is a flex sibling on
   the canvas; the main content card narrows to make room. */
@media (min-width: 1440px) {
  .chat-sidebar {
    flex-shrink: 0;
    height: 100%;
  }

  .chat-sidebar.show {
    width: calc(var(--chat-card-width) + 0.5rem);
    padding: 0.5rem 0.5rem 0.5rem 0;
    opacity: 1;
    pointer-events: auto;
  }

  /* Pin the content container at the width available when the chat card is
     OPEN, in both states: closed → it sits centred with whitespace either
     side; open → the main card narrows to hug it. Content width never
     changes, so nothing reflows on toggle. min(100%, cap) keeps the
     existing readable max-widths without overflowing narrower wrappers. */
  .chat-panel-canvas .content-container {
    width: calc(100vw - var(--chat-canvas-chrome));
    max-width: min(100%, 820px);
  }
}

@media (min-width: 1536px) {
  .chat-panel-canvas .content-container {
    max-width: min(100%, 1000px);
  }
}

/* --- Researcher summon (TA-490 Phase C) --- */

/* The AI researcher's avatar in the content card's top-right corner: the one
   consistent way to open a chat anchored to the page you're on, replacing the
   per-page "Ask <researcher>" CTAs that only ever existed on four pages.

   Placement is absolute so the slot is identical on every page regardless of
   what chrome the page puts at the top. Below 1280px the content runs the full
   width of the card, so the card reserves the corner with extra right padding;
   above it the contained page headers (see .content-width-container and the
   .content-container rows) leave that corner empty on their own and the card's
   own padding is enough. */
.content-card--summon {
  position: relative;
  padding-right: 3.5rem;
}

.researcher-summon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--bone-100);
  box-shadow:
    0 0 0 2px #ffffff,
    0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* chat-toggle hides the summon while the panel is open. application.css loads
   after Tailwind, so the display above would otherwise beat .hidden. */
.researcher-summon.hidden {
  display: none;
}

.researcher-summon:hover {
  box-shadow:
    0 0 0 2px var(--orange-200),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

.researcher-summon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .content-card--summon {
    padding-right: 4.5rem;
  }

  .researcher-summon {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  /* Matches the card's own md:p-6 — the reserve is no longer needed. */
  .content-card--summon {
    padding-right: 1.5rem;
  }
}

/* Header-width cleanup (TA-490 Phase C). Page chrome that used to run the full
   width of the content card — back bars, tab subnavs — is contained to the same
   width as the body content beneath it (.page-details-container). Two things
   follow: the page reads as one column, and the card's top-right corner is left
   free, which is what makes the summon slot land in the same place everywhere.
   Index pages use .content-container instead, matching their own list bodies. */
.content-width-container {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Shimmer text effect for loading states */

/* For heading text with neutral-800 base color */
.shimmer-text-900 {
  background: linear-gradient(
    90deg,
    var(--neutral-800) 0%,
    var(--neutral-800) 20%,
    var(--bone-200) 40%,
    var(--bone-200) 60%,
    var(--neutral-800) 80%,
    var(--neutral-800) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
  /* Ensure shimmer works on mobile webkit browsers */
  -webkit-animation: shimmer 4s linear infinite;
}

/* For body text with neutral-500 base color */
.shimmer-text-500 {
  background: linear-gradient(
    90deg,
    var(--neutral-500) 0%,
    var(--neutral-500) 20%,
    var(--neutral-200) 40%,
    var(--neutral-200) 60%,
    var(--neutral-500) 80%,
    var(--neutral-500) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
  /* Ensure shimmer works on mobile webkit browsers */
  -webkit-animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Webkit-specific keyframes for mobile Safari */
@-webkit-keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Custom Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bone-300);
  transition: background-color 0.3s ease;
  border-radius: 8px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px; /* 32px - 8px (4px padding top and bottom) */
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  border-radius: 4px;
}

input:checked + .toggle-slider {
  background-color: var(--neutral-800);
}

input:checked + .toggle-slider:before {
  transform: translateX(
    22px
  ); /* Moves from 4px to 28px (56px - 24px toggle - 4px padding) */
  background-color: #ffffff;
}

/* Remove default browser focus outline */
input:focus + .toggle-slider {
  outline: none;
}

.toggle-slider:focus {
  outline: none;
}

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

/* Body scroll lock when mobile sidebar is open */
.sidebar-body-locked {
  overflow: hidden;
}

/* --- Mobile header --- */
.sidebar-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.5rem;
}

.sidebar-mobile-logo {
  height: 1.75rem;
  width: auto;
}

.sidebar-toggle-btn {
  padding: 0.5rem;
  padding-right: 0.25rem;
  color: var(--neutral-800);
  cursor: pointer;
}

.sidebar-toggle-btn:focus {
  outline: none;
}

.sidebar-toggle-btn svg,
.sidebar-close-btn svg {
  width: 1rem;
  height: 1rem;
}

/* --- Mobile overlay --- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
  z-index: 40;
  display: none;
}

.sidebar-overlay.sidebar-overlay--visible {
  display: block;
}

/* --- Mobile close button --- */
.sidebar-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--bone-100);
  color: var(--neutral-500);
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
}

.sidebar-close-btn:hover {
  color: var(--neutral-800);
}

/* --- Sidebar content panel (mobile-first) --- */
.sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 1.5rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  width: 14rem;
  padding: 0.5rem;
  overflow-y: auto;
  transition: transform 300ms ease-in-out;
  z-index: 50;
  background-color: #ffffff;
}

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

/* --- Sidebar header (logo area, hidden on mobile) --- */
.sidebar-header {
  display: none;
  padding: 0.5rem;
  padding-top: 0.875rem;
  padding-bottom: 1.5rem;
}

.sidebar-header a {
  display: flex;
  align-items: center;
}

/* --- Sidenav items: base default color --- */
.sidenav-item {
  color: var(--neutral-800);
}

.sidenav-item svg {
  width: 0.88rem;
  height: 0.88rem;
  flex-shrink: 0;
}

/* --- Sidebar nav lists --- */
.sidebar-nav {
  margin-top: 2.5rem;
}

.sidebar-nav--bottom {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* --- Sidebar spacer --- */
.sidebar-spacer {
  flex-grow: 1;
}

/* --- Section headers: match ul.breadcrumb typography --- */
.sidenav-section-header {
  margin-left: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  line-height: 12px;
  color: var(--neutral-500);
}

.sidenav-section-header--spacing-lg {
  padding-top: 1.5rem;
}

/* --- Notification badge: inline, right-aligned within the nav item --- */
.sidenav-notification-badge {
  letter-spacing: 0.05em;
  background-color: var(--orange-500);
  color: #ffffff;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font-size: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
}

/* --- Agency client item: bottom margin + the workspace header's --first
   padding adds up to the same 1.5rem gap used before Favourites --- */
.sidenav-client-item {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .sidenav-client-item {
    margin-bottom: 0.75rem;
  }
}

/* --- Client avatar (agency current-client item) --- */
.sidenav-client-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background-color: var(--neutral-800);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Trailing chevron (client switcher) --- */
.sidenav-chevron {
  margin-left: auto;
  color: var(--neutral-500);
}

/* --- md breakpoint: tablet adjustments --- */
@media (min-width: 768px) {
  .sidebar-content {
    padding: 1rem;
    padding-top: 1.5rem;

    background-color: transparent;
  }

  .sidenav-section-header--first {
    padding-top: 0.75rem;
  }

  .sidenav-section-header--first.sidenav-section-header--after-client {
    padding-top: 1.5rem;
  }

  .sidebar-nav--bottom {
    margin-bottom: 0;
  }
}

/* --- lg breakpoint: hide mobile elements, show desktop sidebar --- */
@media (min-width: 1024px) {
  .sidebar-mobile-header {
    display: none;
  }

  .sidebar-close-btn {
    display: none;
  }

  .sidebar-overlay {
    display: none;
  }

  .sidebar-content {
    transform: translateX(0);
    position: relative;
    z-index: 0;
  }

  .sidebar-header {
    display: block;
  }

  .sidebar-nav {
    margin-top: 0;
  }
}

/* --- Desktop sidebar: fixed width, always expanded --- */
@media (min-width: 1024px) {
  .sidebar {
    width: 14rem;
    flex-shrink: 0;
  }

  .sidebar .sidebar-content {
    width: 14rem;
    padding-left: 16px;
    padding-right: 8px;
    padding-top: 24px;
    overflow-x: hidden;
  }

  .sidebar .sidenav-text {
    display: inline-block;
    height: 1.4em;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* --- Logo: background-image for proper crop, not squash --- */
  .sidebar .sidebar-logo {
    height: 25px;
    width: 220px;
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }

  .sidebar .sidebar-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  .sidebar .low-credit-banner {
    margin: 0 8px 16px;
  }
}

/* ===================================================================== */
/* --- Study Chat Input --- */
/* ===================================================================== */

.study-chat-input {
  display: flex;
  align-items: flex-end; /* Buttons stay at bottom when textarea grows */
  background-color: var(--bone-100);
  border: 2px solid var(--bone-200);
  border-radius: 16px;
  transition: border-color 0.2s ease-in-out;
}

.study-chat-input:focus-within {
  border-color: var(--orange-500);
}

.study-chat-input textarea,
.study-chat-input textarea:focus {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  resize: none;
  padding: 12px 8px 12px 16px !important;
}

.study-chat-input .study-chat-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--bone-100);
  border: 2px solid var(--bone-200);
  color: var(--neutral-400);
  transition: color 0.15s ease;
  margin: 6px 0;
}

.study-chat-input .study-chat-attach-btn:hover {
  color: var(--neutral-600);
}

.study-chat-input .study-chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--orange-500);
  border: 2px solid var(--orange-500);
  color: #ffffff;
  transition: background-color 0.15s ease;
  margin: 6px 8px 6px 6px;
}

.study-chat-input .study-chat-send-btn:hover {
  background-color: var(--orange-700);
  border-color: var(--orange-700);
}

/* ===================================================================== */
/* --- Details chevron rotation --- */
/* ===================================================================== */

details[open] .details-chevron {
  transform: rotate(180deg);
}

/* ===================================================================== */
/* Analysis Renderers (TA-238) — one consistent visual language for the   */
/* adaptive result-block components (shape-dispatched). Not chart chaos:   */
/* every shape shares the same envelope, bar mark, and citation drill.     */
/* ===================================================================== */

.analysis-block {
  background-color: #fff;
  border: 1px solid var(--bone-200);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.analysis-block-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.analysis-block-provenance,
.analysis-block-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analysis-block-meta {
  justify-content: flex-end;
}

.analysis-kind-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--neutral-800);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.analysis-reserved-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--orange-50);
  color: var(--orange-700);
  border: 1px solid var(--orange-200);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.analysis-cohort-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--bone-100);
  color: var(--neutral-700);
  border: 1px solid var(--bone-300);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
}

.analysis-count {
  font-size: 12px;
  color: var(--neutral-500);
}

.analysis-count strong {
  color: var(--neutral-800);
}

.analysis-uncited {
  display: inline-flex;
  align-items: center;
  background-color: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.analysis-block-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 10px;
}

/* --- :scalar --- */
.analysis-scalar-label {
  font-size: 12px;
  color: var(--neutral-500);
  margin-bottom: 4px;
}

.analysis-scalar-value {
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  color: var(--neutral-800);
}

.analysis-scalar-context {
  font-size: 12px;
  color: var(--neutral-500);
}

.analysis-scalar-prevalence {
  color: var(--orange-600);
  font-weight: 600;
}

/* --- shared bar mark (distribution + journey funnel) --- */
.analysis-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 30%) 1fr auto;
  align-items: center;
  gap: 10px;
}

.analysis-bar-label {
  font-size: 12px;
  color: var(--neutral-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-bar-track {
  display: block;
  width: 100%;
  height: 10px;
  background-color: var(--bone-200);
  border-radius: 999px;
  overflow: hidden;
}

.analysis-bar-fill {
  display: block;
  height: 100%;
  background-color: var(--orange-500);
  border-radius: 999px;
}

.analysis-bar-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-800);
  white-space: nowrap;
}

.analysis-bar-pct {
  color: var(--neutral-400);
  font-weight: 400;
}

/* --- :quote_list --- */
.analysis-quote-list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-800);
  margin-bottom: 6px;
}

.analysis-quote-list-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.analysis-ai-estimate {
  font-size: 10px;
  color: var(--neutral-400);
  font-style: italic;
}

.analysis-quote-list-quotes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analysis-quote {
  border-left: 3px solid var(--bone-300);
  padding-left: 12px;
}

.analysis-quote-text,
.analysis-citation-quote {
  font-size: 13px;
  color: var(--neutral-700);
  font-style: italic;
  margin-bottom: 4px;
}

.analysis-quote-footer,
.analysis-citation-source {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.analysis-citation-link {
  color: var(--orange-600);
  font-weight: 600;
  text-decoration: none;
}

.analysis-citation-link:hover {
  color: var(--orange-700);
  text-decoration: underline;
}

.analysis-citation-link-disabled {
  color: var(--neutral-400);
  font-weight: 400;
  cursor: default;
}

.analysis-citation-attr {
  color: var(--neutral-400);
}

/* --- citation drill --- */
.analysis-citations {
  margin-top: 12px;
  border-top: 1px solid var(--bone-200);
  padding-top: 10px;
}

.analysis-citations-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
}

.analysis-citation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.analysis-citation {
  background-color: var(--bone-50);
  border-radius: 8px;
  padding: 10px 12px;
}

/* --- :contrast --- */
.analysis-contrast-dimension {
  font-size: 12px;
  color: var(--neutral-500);
  margin-bottom: 8px;
}

.analysis-contrast-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--bone-200);
}

.analysis-contrast-segment {
  display: block;
  height: 100%;
}

.analysis-contrast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.analysis-contrast-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-700);
}

.analysis-tone-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.analysis-contrast-group-value {
  font-weight: 600;
  color: var(--neutral-800);
}

/* tone scale — shared by contrast + journey sentiment */
.analysis-tone-positive {
  background-color: #16a34a;
  color: #16a34a;
}
.analysis-tone-negative {
  background-color: #dc2626;
  color: #dc2626;
}
.analysis-tone-neutral {
  background-color: var(--neutral-400);
  color: var(--neutral-500);
}

.analysis-journey-sentiment {
  background-color: transparent;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* --- :journey --- */
.analysis-journey-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analysis-journey-step {
  position: relative;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--bone-300);
  background-color: var(--bone-50);
}

.analysis-journey-step.has-friction {
  border-left-color: #dc2626;
  background-color: #fef2f2;
}

.analysis-journey-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.analysis-journey-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--neutral-800);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.analysis-journey-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
}

.analysis-journey-funnel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analysis-journey-funnel .analysis-bar-track {
  height: 8px;
}

.analysis-journey-step-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
}

.analysis-journey-dropoff {
  color: #b45309;
  font-weight: 600;
}

.analysis-journey-friction {
  color: #b91c1c;
  font-weight: 600;
}

.analysis-journey-note {
  color: var(--neutral-500);
}