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

/* --- Page width system ---
   One width ladder, shared by every page-level wrapper, so an index page and a
   show page put their content at the same width. `--content-max-width` is the
   single knob (stepped up at the lg/2xl breakpoints below, and consumed again by
   the chat-canvas pin near the bottom of this file); the wrappers only read it.

   .content-container       — the row/section wrapper, used on every page
   .page-details-container  — show-page body wrapper (wraps .content-container rows)
   .content-width-container — page chrome above the body (back bars, tab subnavs)

   They MUST resolve to the same width. Show pages nest .content-container inside
   .page-details-container, and a nested wrapper reads 100% of its parent — so any
   cap that differs between them silently narrows the page it wraps, which is
   exactly how show pages drifted 180px narrower than index pages at 2xl. */
:root {
  --content-max-width: none;
}

.content-container,
.page-details-container,
.content-width-container {
  max-width: var(--content-max-width);
  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;
}

/* Chat panel header icon buttons — fixed 36×36 hit target (TA-507) */
.btn.just-icon-btn.chat-header-btn {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* Settings subnav "back to hub" — 36×36 so it matches the height of the .subnav
   pill bar it sits beside. */
.btn.just-icon-btn.settings-back-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
}

/* Icon sized to match the main nav (.sidenav-item svg), so the back arrow reads
   as the same weight of control as the sidebar icons. Keep the two in step. */
.btn.just-icon-btn.settings-back-btn svg {
  width: 0.88rem;
  height: 0.88rem;
}

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

/* A settings destination the IA lists but which has not been built yet. Same
   box metrics as a real tab so the bar keeps its shape — just visibly inert.
   It is a <span>, not an <a>, so it is unreachable by keyboard and pointer
   without needing to defend against clicks. */
.subnav-item--disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  padding: 4px 12px;
  border-radius: 8px;
  color: var(--neutral-300);
  cursor: not-allowed;
  user-select: none;
}

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

/* TA-502 — client directory rows.

   The row IS the .list-item (it used to be a div wrapping a link, because the
   Switch button was a form). That means .list-item's own `flex-direction:
   column; align-items: flex-start` now governs the column layout and has to be
   turned back into a row here — Tailwind's `flex-row`/`items-center` cannot do
   it, because Tailwind v4 emits utilities inside `@layer utilities` and any
   layered rule loses to an unlayered one like .list-item, whatever the source
   order. Same reason the 12px inset lives here rather than as `px-3`.

   The inset matches .list-item's 12px vertical padding, so the logo sits the
   same distance from the left edge as from the top and bottom. */
.client-list .list-item {
  flex-direction: row;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
}

/* The current client's row is marked exactly the way hover marks a row — bone
   fill with the divider borders recoloured to match it. Recolouring is what
   makes the radius work: left as bone-200, the dividers cut straight lines
   across the rounded corners. */
.list-item--current,
.list-item--current:hover {
  background-color: var(--bone-100);
  border: 1px solid var(--bone-100);
  border-radius: 8px;
}

/* Same suppression the hover rules do, so neighbouring dividers don't run
   into the rounded corners. */
.list-item:has(+ .list-item--current) {
  border-bottom-color: transparent;
}

.list-item--current + .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%;
  }

  /* Chats index search fills its half of the header row (TA-507) */
  .chats-index-search .search-input-container {
    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: 18px;
}

.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: -4px;
  margin-bottom: 20px;
}

/* 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,
.message-content ul ol,
.message-content ol ul {
  padding-left: 16px;
}

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

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

/* Uniform body text colour (TA-507): chat prose is always neutral-500 —
   headings, bold labels, table cells and quotes included. Links (orange) and
   inline code (red) keep their semantic colour. Placed last so it wins over the
   per-element colours above. */
.message-content,
.message-content p,
.message-content li,
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6,
.message-content strong,
.message-content em,
.message-content blockquote,
.message-content th,
.message-content td {
  color: var(--neutral-500);
}

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

  :root {
    --content-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 */
  :root {
    --content-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;
  }
}

/* Inline animated ellipsis for in-progress labels (TA-510) — three dots that
   pulse in sequence in the current text colour, tuned subtler than
   .typing-indicator's bounce so it sits inline after a word. */
.loading-dots {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 2px;
  margin-left: 3px;
}

.loading-dots span {
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background-color: currentColor;
  opacity: 0.35;
  animation: loading-dots 1.2s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes loading-dots {
  0%,
  70%,
  100% {
    opacity: 0.35;
  }
  35% {
    opacity: 1;
  }
}

/* ── Tool-call trail (TA-510, Figma redesign) ────────────────────────────────
   No container box: clean rows of icon + tracked-caps label + chevron. The
   aggregate bar and each per-tool-call card share .tc-row; expanded items hang
   off a 1px connector. Default neutral-500, hover orange-500; the chevron shows
   only on hover or when expanded. */
.tc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 20px;
  padding: 4px 0 8px 0;
  background: none;
  border: 0;
  border-radius: 4px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tc-ic {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--neutral-400);
  transition: color 0.15s ease;
}
.tc-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--neutral-400);
  transition: color 0.15s ease;
}
.tc-row:hover .tc-ic,
.tc-row:hover .tc-label,
.tc-row:focus-visible .tc-ic,
.tc-row:focus-visible .tc-label {
  color: var(--orange-500);
}

/* Items under a card — 1px connector line, names (or verbatim text + chips) */
.tc-items {
  list-style: none;
  margin: 2px 0 8px 6px;
  padding: 0 0 0 8px;
  border-left: 1px solid var(--bone-300);
}
.tc-item {
  padding: 2px 0 4px 6px;
  font-size: 11px;
}
.tc-name {
  font-size: 11px;
  line-height: 20px;
  color: var(--neutral-400);
  text-decoration: none;
}
a.tc-name:hover {
  color: var(--orange-500);
}
.tc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.45;
  color: var(--neutral-400);
  text-decoration: none;
}
a.tc-text:hover {
  color: var(--orange-500);
}
.tc-text.tc-quote {
  font-style: italic;
}
.tc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 12px;
}
.tc-chip {
  font-size: 8px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--neutral-400);
  background: #fff;
  border: 1px solid var(--bone-200);
  padding: 1px 4px;
  border-radius: 4px;
}
.tc-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--neutral-400);
  padding: 4px 0;
}
/* An empty search sits inside a .tc-items connector so it lines up with the
   rows a hit would have produced — item font-size, item padding, no double
   border of its own. */
.tc-items .tc-empty {
  font-size: 11px;
  padding: 2px 0 4px 6px;
}

/* Literal animated ellipsis for the searching state — the three periods reveal
   in sequence (opacity only, no layout shift). */
.tc-ell {
  display: inline-block;
  letter-spacing: 1.5px;
}
.tc-ell i {
  font-style: normal;
  opacity: 0;
  animation: tc-ell 1.4s infinite steps(1, end);
}
.tc-ell i:nth-child(2) {
  animation-delay: 0.23s;
}
.tc-ell i:nth-child(3) {
  animation-delay: 0.46s;
}
@keyframes tc-ell {
  0%,
  92%,
  100% {
    opacity: 0;
  }
  22%,
  84% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-ell i {
    animation: none;
    opacity: 0.7;
  }
}

/* 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;
  /* Exit (closing): shorter + accelerate (ease-in) — the panel gets out of the
     way quickly once dismissed. See enter easing on .show below. */
  transition: all 0.22s cubic-bezier(0.4, 0, 1, 1);
}

/* Enter (opening): a touch longer + decelerate (ease-out) — the panel slides in
   and settles, so a deliberate open reads as "arriving". The asymmetry (open
   slower/decelerate, close quicker/accelerate) is the standard motion
   convention. */
.chat-sidebar.show {
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* TA-506: a restored/reopened panel is revealed already-open (chat-toggle adds
   this for one reflow around the .show flip) so it does not slide in on every
   navigation. A deliberate user open animates (via .show above); a close
   animates (via the base rule). */
.chat-sidebar--no-anim {
  transition: none !important;
}

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

/* The page content wrapper on project/study/interview show pages. Its width
   comes from the shared ladder at the top of this file — do not give it a
   max-width of its own, or the .content-container rows nested inside it get
   clamped to a different width than the same rows on an index page. (The
   .chat-active squeeze variant is gone — the main card flexes on its own when
   the chat card opens.) */
.page-details-container {
  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 page wrappers at the width available when the chat card is
     OPEN, in both states: closed → they sit centred with whitespace either
     side; open → the main card narrows to hug them. Content width never
     changes, so nothing reflows on toggle. min(100%, cap) keeps the
     readable max-width without overflowing a narrower ancestor — which is
     also what makes the nesting safe, since a .content-container inside a
     .page-details-container just resolves to its already-pinned parent.
     All three wrappers are pinned together; pinning only some of them is
     what used to make show-page chrome jump while its body stayed put. */
  .chat-panel-canvas .content-container,
  .chat-panel-canvas .page-details-container,
  .chat-panel-canvas .content-width-container {
    width: calc(100vw - var(--chat-canvas-chrome));
    max-width: min(100%, var(--content-max-width));
  }
}

/* --- 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.

   Its width now comes from the shared ladder at the top of this file, so it
   tracks the body it sits above at every breakpoint. */

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

/* Logo variant: same square, but the image supplies the fill — so drop the
   dark plate that backs the initial, and crop rather than distort. The hairline
   keeps a white or near-white logo from dissolving into the card behind it.
   box-sizing is border-box globally, so the square stays 24px. */
.sidenav-client-avatar--image {
  background-color: transparent;
  object-fit: cover;
  border: 1px solid var(--bone-300);
}

/* --- Client switcher menu (TA-502) --- */

/* The row holds its own space so nothing shifts when the card lifts out of
   flow: .sidenav-item is 36px tall with a 2px bottom margin. */
.sidenav-client-item {
  position: relative;
  min-height: 38px;
}

/* Open state: the card — row AND list — lifts out of flow at top:0, exactly
   where the row already sat, so the row does not move and the menu hovers over
   the nav below instead of pushing it down.

   The hairline is a box-shadow ring rather than a border: a border would add a
   pixel and nudge the row it is supposed to leave alone.

   :has() rather than an extra class, so the shared dropdown controller (which
   only toggles `hidden` on the menu) needs no changes. */
.sidenav-client-item:has(.client-switcher-menu:not(.hidden)) .client-switcher-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--bone-200),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* The row is a <button>, which has no pointer cursor of its own — the sibling
   nav items get theirs for free by being <a>. Its 2px bottom margin is also
   dropped: with the card flush to the row's top edge, that margin made the gap
   below the row 2px wider than the gap above it. .sidenav-client-item keeps a
   38px min-height, so the closed state's spacing is unaffected. */
.client-switcher-card .sidenav-item {
  margin-bottom: 0;
  cursor: pointer;
}

.client-switcher-menu {
  padding: 4px;
  border-top: 1px solid var(--bone-200);
}

.client-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Buttons and the current-client span share one box so the list does not jump
   between an <a>, a <button> and a <span>. */
.client-switcher-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
  color: var(--neutral-800);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Text-only hover, matching the rest of the app's list rows: the option already
   sits on a white card, so a fill would fight the card rather than read as a
   highlight. */
.client-switcher-option:hover {
  color: var(--orange-500);
}

.client-switcher-empty {
  padding: 8px;
  color: var(--neutral-400);
  font-size: 12px;
}

.client-switcher-manage {
  display: block;
  margin-top: 4px;
  padding: 8px;
  border-top: 1px solid var(--bone-200);
  color: var(--neutral-500);
  font-size: 12px;
}

.client-switcher-manage:hover {
  color: var(--orange-500);
}

.client-switcher-loading {
  padding: 8px;
  color: var(--neutral-400);
  font-size: 12px;
}

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