/* ================================================================
   CliniVet AI — Product styles
   Built on Ihungo Design System tokens
   ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

.cv-app {
  display: grid;
  grid-template-columns: var(--cv-sidebar-w, 248px) 1fr;
  height: 100%;
  background: var(--bg-canvas);
  font-family: var(--font-body);
  color: var(--fg-primary);
  overflow: hidden;
}

/* ---------- SIDEBAR ---------- */
.cv-sidebar {
  background: var(--neutral-900);
  color: var(--neutral-100);
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.cv-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cv-brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.cv-brand-mark::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  position: absolute; top: 8px; right: 8px;
  box-shadow: 0 0 0 2px var(--neutral-900);
}
.cv-brand-mark svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 1.8; }
.cv-brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: white; letter-spacing: -0.02em;
}
.cv-brand-name b { color: var(--primary); font-weight: 700; }
.cv-brand-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--neutral-400); margin-left: auto;
}

.cv-sidebar-search {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex; align-items: center; gap: 8px;
  color: var(--neutral-400); font-size: 12.5px;
}
.cv-sidebar-search kbd {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--neutral-500); background: rgba(255,255,255,0.05);
  padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
}

.cv-nav-section { display: flex; flex-direction: column; gap: 2px; }
.cv-nav-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--neutral-500);
  padding: 8px 12px 4px;
}
.cv-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  color: var(--neutral-300); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background 120ms;
  text-decoration: none;
}
.cv-nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.cv-nav-item.active {
  background: rgba(41, 73, 218, 0.18);
  color: white; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(184,191,234,0.12);
}
.cv-nav-item.active::before {
  content: ""; width: 3px; height: 16px; border-radius: 2px;
  background: var(--primary); margin-right: -3px; margin-left: -3px;
}
.cv-nav-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cv-nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 9999px;
  background: var(--primary); color: white;
}
.cv-nav-badge.muted { background: rgba(255,255,255,0.08); color: var(--neutral-300); font-weight: 600; }

.cv-sidebar-foot {
  margin-top: auto; padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
  border-radius: 0;
}
.cv-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
  font-family: var(--font-display);
}
.cv-avatar.sec { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); }
.cv-avatar.purp { background: linear-gradient(135deg, #A06CDB 0%, #7449A8 100%); }
.cv-avatar.green { background: linear-gradient(135deg, var(--success) 0%, #008168 100%); }
.cv-avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.cv-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.cv-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cv-user-name { font-size: 13px; font-weight: 600; color: white; line-height: 1.2; }
.cv-user-role { font-size: 11px; color: var(--neutral-400); line-height: 1.2; }
.cv-user-info-light .cv-user-name { color: var(--fg-primary); }
.cv-user-info-light .cv-user-role { color: var(--fg-tertiary); }

/* ---------- MAIN ---------- */
.cv-main { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }

/* ---------- TOPBAR ---------- */
.cv-topbar {
  height: 60px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  flex-shrink: 0;
}
.cv-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-tertiary); }
.cv-crumbs a { color: var(--fg-tertiary); cursor: pointer; }
.cv-crumbs .sep { color: var(--neutral-300); }
.cv-crumbs .now { color: var(--fg-primary); font-weight: 600; }

.cv-search {
  flex: 1; max-width: 380px; height: 36px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  color: var(--fg-tertiary); font-size: 13px;
}
.cv-search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cv-search kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); background: var(--bg-subtle);
  padding: 1px 5px; border-radius: 4px;
}

.cv-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cv-icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.cv-icon-btn:hover { background: var(--bg-subtle); }
.cv-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cv-icon-btn .cv-dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  border: 2px solid white;
}

/* ---------- PILL PERSONA SWITCHER ---------- */
.cv-persona {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: 9999px;
  background: var(--bg-canvas); border: 1px solid var(--border-subtle);
  cursor: pointer; transition: all 120ms;
}
.cv-persona:hover { border-color: var(--border-default); }
.cv-persona .cv-avatar { width: 28px; height: 28px; font-size: 11px; }
.cv-persona-label {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding-right: 6px;
}
.cv-persona-name { font-size: 12.5px; font-weight: 600; color: var(--fg-primary); }
.cv-persona-role { font-size: 10px; color: var(--fg-tertiary); }
.cv-persona-caret { color: var(--fg-muted); margin-right: 4px; }

/* ---------- BUTTONS ---------- */
.cv-btn {
  padding: 8px 14px; border-radius: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: filter 120ms, background 120ms;
  white-space: nowrap;
}
.cv-btn:hover { filter: brightness(0.95); }
.cv-btn:active { filter: brightness(0.88); }
.cv-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cv-btn-primary { background: var(--primary); color: white; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02); }
.cv-btn-secondary { background: var(--secondary); color: white; box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.cv-btn-dark { background: var(--neutral-900); color: white; }
.cv-btn-ghost { background: transparent; color: var(--fg-secondary); border: 1px solid var(--border-default); }
.cv-btn-ghost:hover { background: var(--bg-subtle); filter: none; }
.cv-btn-soft-primary { background: var(--primary-10); color: var(--primary-dark); }
.cv-btn-soft-secondary { background: var(--secondary-10); color: var(--secondary-dark); }
.cv-btn-success { background: var(--success); color: white; }
.cv-btn-danger { background: var(--danger); color: white; }
.cv-btn-lg { padding: 11px 18px; font-size: 14px; }
.cv-btn-sm { padding: 5px 10px; font-size: 12px; gap: 5px; }
.cv-btn-block { width: 100%; justify-content: center; }
.cv-btn-icon { padding: 8px; }
.cv-btn-icon svg { width: 16px; height: 16px; }

/* ---------- CONTENT ---------- */
.cv-content { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; gap: 20px; overflow: auto; min-height: 0; }
.cv-content.tight { padding: 20px 24px; gap: 16px; }

.cv-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cv-page-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.02em; line-height: 1.2; }
.cv-page-head .sub { font-size: 13.5px; color: var(--fg-tertiary); margin-top: 4px; }
.cv-page-head h1 .cv-chip { vertical-align: middle; margin-left: 10px; }

/* ---------- CARDS / PANELS ---------- */
.cv-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cv-panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cv-panel-head h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg-primary);
  display: flex; align-items: center; gap: 8px;
}
.cv-panel-head .actions { display: flex; gap: 6px; align-items: center; }
.cv-panel-body { padding: 18px; }
.cv-panel-body.compact { padding: 14px; }
.cv-panel-body.flush { padding: 0; }

.cv-panel.tinted-blue { background: linear-gradient(180deg, var(--secondary-10) 0%, var(--bg-surface) 60%); }
.cv-panel.tinted-orange { background: linear-gradient(180deg, var(--primary-10) 0%, var(--bg-surface) 60%); }

/* ---------- BADGES / CHIPS ---------- */
.cv-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
}
.cv-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cv-b-ok { background: var(--success-bg); color: #008168; }
.cv-b-warn { background: var(--warning-bg); color: #8A6212; }
.cv-b-err { background: var(--danger-bg); color: #B33F23; }
.cv-b-info { background: var(--secondary-10); color: var(--secondary-dark); }
.cv-b-neutral { background: var(--bg-subtle); color: var(--fg-secondary); }
.cv-b-primary { background: var(--primary-10); color: var(--primary-dark); }

.cv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 9999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-secondary);
}
.cv-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cv-chip-ai {
  background: linear-gradient(135deg, var(--primary-10), var(--secondary-10));
  border-color: rgba(228,135,59,0.25);
  color: var(--primary-dark);
}
.cv-chip-ai svg { stroke: var(--primary-dark); }

/* ---------- AI / COPILOT VISUAL LANGUAGE ---------- */
.cv-ai-glow {
  background: radial-gradient(circle at 30% 0%, rgba(228,135,59,0.10), transparent 50%),
              radial-gradient(circle at 80% 100%, rgba(41,73,218,0.08), transparent 60%),
              var(--bg-surface);
}
.cv-ai-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary-10), var(--secondary-10));
  border: 1px solid rgba(228,135,59,0.2);
  color: var(--primary-dark);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.cv-ai-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(228,135,59,0.5);
  animation: cv-pulse 1.6s ease-out infinite;
}
@keyframes cv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(228,135,59,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(228,135,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(228,135,59,0); }
}

/* Confidence semaphore */
.cv-conf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 9999px;
  font-size: 10.5px; font-weight: 700;
  font-family: var(--font-mono);
}
.cv-conf-hi  { background: var(--success-bg); color: #008168; }
.cv-conf-mid { background: var(--warning-bg); color: #8A6212; }
.cv-conf-lo  { background: var(--danger-bg);  color: #B33F23; }
.cv-conf-bar {
  width: 30px; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,0.08); overflow: hidden;
}
.cv-conf-bar > i {
  display: block; height: 100%; border-radius: 2px;
  background: currentColor;
}

/* SOAP field highlight by confidence */
.cv-field {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  position: relative;
}
.cv-field.hi  { border-color: var(--success-bg); background: linear-gradient(180deg, rgba(224,246,241,0.4) 0%, var(--bg-surface) 30%); }
.cv-field.mid { border-color: var(--warning); background: linear-gradient(180deg, rgba(254,245,224,0.5) 0%, var(--bg-surface) 30%); }
.cv-field.lo  { border-color: var(--danger);  background: linear-gradient(180deg, rgba(251,232,225,0.6) 0%, var(--bg-surface) 30%); box-shadow: inset 0 0 0 1px rgba(225,112,85,0.18); }
.cv-field-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.cv-field-body { font-size: 13.5px; line-height: 1.55; color: var(--fg-primary); }
.cv-field-body em { font-style: normal; background: var(--warning-bg); padding: 0 3px; border-radius: 3px; }
.cv-field-body mark.lo { background: var(--danger-bg); color: var(--neutral-900); padding: 0 3px; border-radius: 3px; }

/* Voice waveform */
.cv-wave {
  display: flex; align-items: center; gap: 3px; height: 36px;
}
.cv-wave i {
  display: block; width: 3px; background: currentColor;
  border-radius: 2px; opacity: 0.9;
  animation: cv-wave 1.1s ease-in-out infinite;
}
.cv-wave i:nth-child(1)  { height: 30%; animation-delay: 0.00s; }
.cv-wave i:nth-child(2)  { height: 80%; animation-delay: 0.07s; }
.cv-wave i:nth-child(3)  { height: 45%; animation-delay: 0.14s; }
.cv-wave i:nth-child(4)  { height: 100%; animation-delay: 0.21s; }
.cv-wave i:nth-child(5)  { height: 60%; animation-delay: 0.28s; }
.cv-wave i:nth-child(6)  { height: 35%; animation-delay: 0.35s; }
.cv-wave i:nth-child(7)  { height: 90%; animation-delay: 0.42s; }
.cv-wave i:nth-child(8)  { height: 50%; animation-delay: 0.49s; }
.cv-wave i:nth-child(9)  { height: 75%; animation-delay: 0.56s; }
.cv-wave i:nth-child(10) { height: 40%; animation-delay: 0.63s; }
.cv-wave i:nth-child(11) { height: 85%; animation-delay: 0.70s; }
.cv-wave i:nth-child(12) { height: 55%; animation-delay: 0.77s; }
.cv-wave.paused i { animation-play-state: paused; opacity: 0.35; }
@keyframes cv-wave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Forms */
.cv-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-family: inherit; font-size: 13.5px;
  background: var(--bg-surface);
  color: var(--fg-primary);
  transition: border-color 120ms, box-shadow 120ms;
  outline: none;
}
.cv-input::placeholder { color: var(--fg-muted); }
.cv-input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.cv-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-tertiary);
  display: block; margin-bottom: 6px;
}

/* Tables */
.cv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cv-table th {
  text-align: left; padding: 10px 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
}
.cv-table td {
  padding: 12px 16px; color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.cv-table tr:last-child td { border-bottom: 0; }
.cv-table tr:hover td { background: var(--bg-canvas); }
.cv-table .name { font-weight: 600; color: var(--fg-primary); }
.cv-table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-tertiary); }

/* Stat cards */
.cv-stats { display: grid; gap: 14px; }
.cv-stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cv-stats.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cv-stats.cols-5 { grid-template-columns: repeat(5, 1fr); }

.cv-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.cv-stat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.cv-stat-ico {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--secondary-10); color: var(--secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.cv-stat-ico.warm { background: var(--primary-10); color: var(--primary-dark); }
.cv-stat-ico.ok { background: var(--success-bg); color: #008168; }
.cv-stat-ico.danger { background: var(--danger-bg); color: #B33F23; }
.cv-stat-ico svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cv-stat-num {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  color: var(--fg-primary); line-height: 1; letter-spacing: -0.02em;
}
.cv-stat-num small {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--fg-tertiary); margin-left: 2px;
}
.cv-stat-delta { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cv-delta-up { color: var(--success); }
.cv-delta-down { color: var(--danger); }
.cv-delta-flat { color: var(--fg-tertiary); }
.cv-stat-foot { font-size: 11.5px; color: var(--fg-tertiary); margin-top: 2px; }

/* Sparkline mini */
.cv-spark { width: 100%; height: 32px; display: block; }

/* Layout helpers */
.cv-row { display: flex; gap: 14px; }
.cv-col { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.cv-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.cv-grid-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; }
.cv-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Activity feed */
.cv-feed { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.cv-feed-item { display: flex; gap: 12px; align-items: flex-start; }
.cv-feed-ico {
  width: 30px; height: 30px; border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cv-feed-ico.ok { background: var(--success-bg); color: #008168; }
.cv-feed-ico.warn { background: var(--warning-bg); color: #8A6212; }
.cv-feed-ico.err { background: var(--danger-bg); color: #B33F23; }
.cv-feed-ico.info { background: var(--secondary-10); color: var(--secondary); }
.cv-feed-ico.warm { background: var(--primary-10); color: var(--primary-dark); }
.cv-feed-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cv-feed-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cv-feed-text { font-size: 13px; color: var(--fg-primary); line-height: 1.45; }
.cv-feed-text b { font-weight: 600; }
.cv-feed-time { font-size: 11px; color: var(--fg-tertiary); font-family: var(--font-mono); }

/* Avatar species (pet) */
.cv-pet {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  font-size: 18px;
  flex-shrink: 0;
}
.cv-pet svg { width: 22px; height: 22px; }
.cv-pet.dog { background: #FCE9D8; color: #8C5A2C; }
.cv-pet.cat { background: #E3DFFA; color: #4F3F8A; }
.cv-pet.horse { background: #D6E9D6; color: #2E6A3A; }
.cv-pet.bird { background: #DCF0FA; color: #1E5A7A; }
.cv-pet.rabbit { background: #F8DCDC; color: #8A2E2E; }

/* Splittable two-column layout (e.g. consulta + side panel) */
.cv-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  flex: 1; min-height: 0;
}
.cv-split-aside {
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Chat bubbles (concierge) */
.cv-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.5;
  word-wrap: break-word;
}
.cv-bubble-them {
  background: var(--bg-subtle);
  border-bottom-left-radius: 4px;
  color: var(--fg-primary);
  align-self: flex-start;
}
.cv-bubble-us {
  background: var(--secondary);
  color: white;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.cv-bubble-ai {
  background: linear-gradient(135deg, #FFF0E2, #EFF1FE);
  border: 1px solid rgba(228,135,59,0.18);
  color: var(--fg-primary);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.cv-bubble-meta { font-size: 10.5px; color: var(--fg-tertiary); padding: 2px 10px; font-family: var(--font-mono); }

/* Misc utilities */
.cv-divider { height: 1px; background: var(--border-subtle); border: 0; margin: 0; }
.cv-divider-v { width: 1px; background: var(--border-subtle); align-self: stretch; }
.cv-muted { color: var(--fg-tertiary); }
.cv-strong { color: var(--fg-primary); font-weight: 600; }
.cv-mono { font-family: var(--font-mono); }
.cv-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-tertiary);
}

/* Scrollable inner regions */
.cv-scroll { overflow: auto; min-height: 0; }
.cv-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.cv-scroll::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 4px; }
.cv-scroll::-webkit-scrollbar-track { background: transparent; }

/* Tiny tabs */
.cv-tabs { display: inline-flex; gap: 0; border-bottom: 1px solid var(--border-subtle); }
.cv-tab {
  padding: 8px 14px; font-size: 13px; color: var(--fg-tertiary);
  border-bottom: 2px solid transparent;
  cursor: pointer; font-weight: 500;
  margin-bottom: -1px;
}
.cv-tab:hover { color: var(--fg-secondary); }
.cv-tab.active { color: var(--secondary); border-color: var(--secondary); font-weight: 600; }

/* Segment control */
.cv-segment {
  display: inline-flex; background: var(--bg-subtle); padding: 3px; border-radius: 8px;
}
.cv-segment > button {
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  background: transparent; color: var(--fg-tertiary);
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: inherit;
}
.cv-segment > button.active { background: var(--bg-surface); color: var(--fg-primary); box-shadow: var(--shadow-1); }

/* Toggle */
.cv-toggle {
  width: 36px; height: 20px; border-radius: 9999px;
  background: var(--neutral-200); position: relative; cursor: pointer;
  transition: background 160ms;
  flex-shrink: 0;
}
.cv-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: white;
  box-shadow: var(--shadow-1);
  transition: transform 160ms;
}
.cv-toggle.on { background: var(--secondary); }
.cv-toggle.on::after { transform: translateX(16px); }
.cv-toggle.primary.on { background: var(--primary); }

/* Empty / placeholder */
.cv-placeholder-img {
  background: repeating-linear-gradient(45deg, var(--bg-subtle), var(--bg-subtle) 8px, var(--neutral-100) 8px, var(--neutral-100) 16px);
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); font-size: 11px;
}

/* Status dot lights for ops */
.cv-light { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cv-light.ok { background: var(--success); box-shadow: 0 0 0 3px rgba(0,184,148,0.18); }
.cv-light.warn { background: var(--warning); box-shadow: 0 0 0 3px rgba(253,203,110,0.20); }
.cv-light.err { background: var(--danger); box-shadow: 0 0 0 3px rgba(225,112,85,0.20); }