/**
 * Sage Terrace (54) — production overrides on top of ui_shell_components.css
 * Active when body[data-ui-variant="sage"]
 */
@import url('ui_shell_components.css');

body[data-ui-variant="sage"],
[data-ui-variant="sage"] .ui-app {
  --sage-chat-copy-fs: var(--font-size-base, 1rem);
  --sage-chat-copy-lh: var(--line-height-base, 1.75);
  --safety-rail-title-size: var(--font-size-base, 1rem);
  --safety-rail-status-size: var(--font-size-base, 1rem);
  --safety-rail-chip-size: var(--font-size-base, 1rem);
  font-size: var(--ui-font-size, var(--font-size-base, 1rem));
  line-height: var(--line-height-base, 1.75);
}

[data-ui-variant="sage"] {
  --ui-primary: #5b7c99;
  --ui-primary-dark: #3d5a73;
  --ui-primary-soft: #e8eef4;
  --ui-accent: #c9846a;
  --ui-warn: #c9846a;
  --ui-bg-outer: linear-gradient(165deg, #f5f3f0 0%, #ebe8e4 45%, #e2e6ec 100%);
  --ui-bg-chat: #faf9f7;
  --ui-bg-surface: #fff;
  --ui-bg-header: linear-gradient(180deg, #5b7c99 0%, #4d6d88 100%);
  --ui-text-on-primary: #fff;
  --ui-text: #2c3440;
  --ui-text-muted: #6b7280;
  --ui-border: #d4dce6;
  --sage-bar-bg: linear-gradient(90deg, #eeebe6 0%, #dfe6ef 100%);
  --sage-bar-border: #bcc6d4;
  --ui-bubble-user-bg: #5b7c99;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-font: "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", "BIZ UDPGothic", system-ui, sans-serif;
  --focus-color: #5b7c99;
  --ui-carousel-card-width: min(85vw, 300px);
}

[data-ui-variant="sage"] body,
body[data-ui-variant="sage"] {
  font-family: var(--ui-font);
  background: var(--ui-bg-outer);
  background-attachment: fixed;
  color: var(--ui-text);
}

[data-ui-variant="sage"] .chat-container {
  border: 1px solid var(--ui-border);
  box-shadow: 0 10px 40px rgba(59, 90, 115, 0.1);
  background: var(--ui-bg-surface);
}

[data-ui-variant="sage"] .legacy-header {
  display: none !important;
}

[data-ui-variant="sage"] .sage-header {
  display: grid;
}

[data-ui-variant="legacy"] .sage-header,
[data-ui-variant="legacy"] #safetyRailMount {
  display: none !important;
}

[data-ui-variant="sage"] .chat-messages-viewport {
  background: var(--ui-bg-chat);
}

[data-ui-variant="sage"] .chat-messages {
  background: transparent;
}

[data-ui-variant="sage"] .message.user .message-content {
  background: var(--ui-bubble-user-bg);
  color: #fff;
  border-radius: 18px 18px 8px 18px;
  font-size: var(--sage-chat-copy-fs);
  line-height: var(--sage-chat-copy-lh);
}

[data-ui-variant="sage"] .message.bot .message-content {
  border-radius: 18px 18px 8px 18px;
  border: 1px solid var(--ui-border);
  background: #fff;
  font-size: var(--sage-chat-copy-fs);
  line-height: var(--sage-chat-copy-lh);
}

[data-ui-variant="sage"] .message.bot .message-content.admin-request {
  background: #fff3cd;
  border: 2px solid #d97706;
  color: #4a3800;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.18);
}

[data-ui-variant="sage"] .message.bot > .ui-bubble--reco,
[data-ui-variant="sage"] .ui-bubble--reco {
  --fs: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
  max-width: 96%;
  padding: 0.55rem 0.65rem;
  border-radius: 18px 18px 12px 18px;
  border: 1px solid var(--ui-border);
  background: #fff;
  box-shadow: 0 2px 12px rgba(59, 90, 115, 0.06);
  font-size: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
  line-height: var(--sage-chat-copy-lh, var(--line-height-base, 1.75));
}

[data-ui-variant="sage"] .chat-messages {
  --sage-chat-copy-fs: var(--font-size-base, 1rem);
  --sage-chat-copy-lh: var(--line-height-base, 1.75);
}

[data-ui-variant="sage"] #initial-greeting {
  font-size: var(--sage-chat-copy-fs);
  line-height: var(--sage-chat-copy-lh);
}

[data-ui-variant="sage"] #initial-examples {
  display: inline-block;
  margin-top: 0.35em;
  font-size: var(--sage-chat-copy-fs);
  line-height: var(--sage-chat-copy-lh);
  color: var(--ui-text-muted, #5a6b7a);
}

[data-ui-variant="sage"] #initial-greeting + br {
  display: none;
}

[data-ui-variant="sage"] .message.bot.message--sage-chat > .ui-bubble--chat,
[data-ui-variant="sage"] .message.bot > .ui-bubble--status-plain {
  max-width: 88%;
  padding: 0.48rem 0.72rem;
  border-radius: 18px 18px 8px 18px;
  border: 1px solid var(--ui-border);
  background: #fff;
  box-shadow: none;
  font-size: var(--sage-chat-copy-fs);
  line-height: var(--sage-chat-copy-lh);
}

[data-ui-variant="sage"] .ui-bubble--status-plain .ui-chat-plain__text {
  margin: 0;
  color: var(--ui-text);
}

[data-ui-variant="sage"] .message.bot.message--sage-reco > .ui-reco-ancillary {
  margin-top: 10px;
  max-width: 96%;
}

[data-ui-variant="sage"] .ui-reco-block .ui-reco-feedback,
[data-ui-variant="sage"] .ui-reco-block .ui-feedback {
  margin-top: 8px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
}

/* Compact inline feedback (status + reco) — override legacy main.css .feedback-buttons */
[data-ui-variant="sage"] .ui-bubble--status .feedback-buttons.ui-feedback-compact,
[data-ui-variant="sage"] .ui-bubble--reco .feedback-buttons.ui-feedback-compact,
[data-ui-variant="sage"] .ui-status-block .feedback-buttons.ui-feedback-compact,
[data-ui-variant="sage"] .ui-reco-block .feedback-buttons.ui-feedback-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px !important;
  padding: 5px 10px !important;
  background: #f6f8fa !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  font-size: var(--sage-chat-copy-fs, var(--font-size-base, 1rem)) !important;
  line-height: var(--sage-chat-copy-lh, var(--line-height-base, 1.75)) !important;
  width: auto !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

[data-ui-variant="sage"] .ui-feedback-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 6px 10px;
  background: #f6f8fa;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  font-size: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
  line-height: var(--sage-chat-copy-lh, var(--line-height-base, 1.75));
}

[data-ui-variant="sage"] .ui-bubble--status .ui-feedback-compact__label,
[data-ui-variant="sage"] .ui-bubble--reco .ui-feedback-compact__label,
[data-ui-variant="sage"] .ui-feedback-compact__label {
  color: var(--ui-text-muted);
  font-weight: 500;
  font-size: inherit !important;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

[data-ui-variant="sage"] .ui-feedback-compact__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

[data-ui-variant="sage"] .ui-feedback-compact__btn {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ui-border);
  background: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

[data-ui-variant="sage"] .ui-feedback-compact__btn:hover {
  transform: scale(1.06);
}

[data-ui-variant="sage"] .feedback-btn-positive.ui-feedback-compact__btn:hover {
  border-color: #3d7a5c;
  background: #eef6f0;
}

[data-ui-variant="sage"] .feedback-btn-negative.ui-feedback-compact__btn:hover {
  border-color: #b85c5c;
  background: #fdf0f0;
}

[data-ui-variant="sage"] .ui-feedback-compact--done {
  justify-content: center;
  padding: 5px 12px;
  background: #eef6f0;
  border-color: #c8e6d0;
}

[data-ui-variant="sage"] .ui-feedback-compact__thanks {
  font-size: inherit;
  font-weight: 600;
  color: #3d7a5c;
}

[data-ui-variant="sage"] .ui-reco-feedback__q {
  margin: 0 0 8px;
  width: 100%;
  font-size: inherit;
  font-weight: 600;
  color: var(--ui-text);
}

[data-ui-variant="sage"] .ui-reco-block .ui-feedback {
  margin-top: 8px;
  padding: 8px 10px;
}

[data-ui-variant="sage"] .ui-reco-block .ui-feedback button {
  min-width: 0;
  min-height: 0;
}

[data-ui-variant="sage"] .ui-reco-block .ui-feedback button[data-feedback="up"]:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

[data-ui-variant="sage"] .ui-reco-followup .ui-followup-list {
  margin: 8px 0 10px;
  padding-left: 1.2em;
  line-height: 1.5;
}

[data-ui-variant="sage"] .ui-reco-followup__intro {
  margin: 6px 0 0;
  line-height: 1.5;
}

[data-ui-variant="sage"] .ui-reco-usage {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-ui-variant="sage"] .ui-reco-block .ui-sage-collapse.collapsible-section {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  box-shadow: none;
  background: #fff;
}

[data-ui-variant="sage"] .ui-reco-block .ui-sage-collapse.collapsible-section:hover {
  box-shadow: none;
}

[data-ui-variant="sage"] .ui-reco-block .ui-sage-collapse .collapse-toggle {
  min-height: 0;
  margin: 0;
  transform: none;
  border-radius: 0;
}

[data-ui-variant="sage"] .ui-reco-block .ui-sage-collapse .collapse-toggle:hover,
[data-ui-variant="sage"] .ui-reco-block .ui-sage-collapse .collapse-toggle:active {
  transform: none;
}

[data-ui-variant="sage"] .ui-reco-block .ui-sage-collapse .collapse-content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

[data-ui-variant="sage"] .ui-reco-block .ui-alert,
[data-ui-variant="sage"] .ui-reco-block .ui-reco-overlap {
  margin: 8px 0;
}

[data-ui-variant="sage"] .ui-reco-cautions {
  margin: 0 0 12px;
}

[data-ui-variant="sage"] .ui-overlap-card {
  border-radius: var(--ui-radius-md);
}

[data-ui-variant="sage"] .ui-overlap-card--danger {
  border-color: #f0d4cc;
}

[data-ui-variant="sage"] .ui-overlap-card--info {
  border-color: #c8daf0;
  background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
}

[data-ui-variant="sage"] .ui-overlap-card--info .ui-overlap-card__badge {
  background: #eef6ff;
  color: #3d5a73;
}

[data-ui-variant="sage"] .ui-card-usage-db,
[data-ui-variant="sage"] .ui-card-usage-extra {
  border-top-color: var(--ui-border);
}

[data-ui-variant="sage"] .ui-carousel-dot {
  min-width: 8px !important;
  min-height: 8px !important;
  width: 8px;
  height: 8px;
  padding: 0;
  display: block;
  flex-shrink: 0;
}

[data-ui-variant="sage"] .ui-sage-collapse {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: #fff;
  overflow: hidden;
}

[data-ui-variant="sage"] .ui-sage-collapse__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  background: var(--ui-primary-soft);
  color: var(--ui-primary-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

[data-ui-variant="sage"] .ui-sage-collapse__icon {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

[data-ui-variant="sage"] .ui-sage-collapse[data-default-expanded="false"] .ui-sage-collapse__icon,
[data-ui-variant="sage"] .ui-sage-collapse .collapse-toggle[aria-expanded="false"] .ui-sage-collapse__icon {
  transform: rotate(-90deg);
}

[data-ui-variant="sage"] .ui-sage-collapse__body {
  padding: 10px 12px 12px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ui-text);
}

[data-ui-variant="sage"] .ui-reco-voice .voice-read-main-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: var(--ui-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 600;
  min-height: 44px;
}

[data-ui-variant="sage"] .ui-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0 4px;
}

[data-ui-variant="sage"] .message.bot.message--sage-reco > .ui-reco-ancillary .collapsible-section {
  border-radius: var(--ui-radius-md);
  border-color: var(--ui-border);
}

[data-ui-variant="sage"] .mic-btn,
[data-ui-variant="sage"] .ui-mic {
  background: var(--ui-primary-soft);
  color: var(--ui-primary-dark);
}

[data-ui-variant="sage"] .ui-header--toolbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

[data-ui-variant="sage"] .ui-brand--toolbar {
  container-type: inline-size;
  container-name: toolbar-brand;
}

[data-ui-variant="sage"] .ui-brand--toolbar h1 {
  font-weight: 600;
  letter-spacing: 0.06em;
  overflow: visible;
  text-overflow: clip;
}

/* main.css #appTitle（最大28px）より優先し、ブランド列幅に追従 */
[data-ui-variant="sage"] #sageToolbarHeader #appTitle {
  font-size: clamp(0.58rem, calc((100vw - 11rem) / 14), 0.95rem);
}

@supports (container-type: inline-size) {
  [data-ui-variant="sage"] #sageToolbarHeader #appTitle {
    font-size: clamp(0.58rem, 7cqi, 0.95rem);
  }
}

[data-ui-variant="sage"] #sageToolbarHeader #appTitle .app-title-core--short {
  display: none;
}

/* 狭い画面: 絵文字 → (dev) → 短縮タイトル → 文字縮小の順（末尾省略はしない） */
@media (max-width: 560px) {
  [data-ui-variant="sage"] #sageToolbarHeader #appTitle .app-title-emoji {
    display: none;
  }
}

@media (max-width: 480px) {
  [data-ui-variant="sage"] #sageToolbarHeader #appTitle .app-title-env {
    display: none;
  }

  [data-ui-variant="sage"] #sageToolbarHeader #appTitle {
    letter-spacing: 0.03em;
  }
}

@media (max-width: 420px) {
  [data-ui-variant="sage"] #sageToolbarHeader #appTitle .app-title-core {
    display: none;
  }

  [data-ui-variant="sage"] #sageToolbarHeader #appTitle .app-title-core--short {
    display: inline;
  }
}

@media (max-width: 360px) {
  [data-ui-variant="sage"] #sageToolbarHeader #appTitle {
    font-size: clamp(0.55rem, calc((100vw - 10rem) / 15), 0.82rem);
    letter-spacing: 0.01em;
  }

  @supports (container-type: inline-size) {
    [data-ui-variant="sage"] #sageToolbarHeader #appTitle {
      font-size: clamp(0.55rem, 6.5cqi, 0.82rem);
    }
  }
}

[data-ui-variant="sage"] .chat-container.ui-app {
  position: relative;
  overflow: hidden;
}

/* DEV badge — 54 同様に ui-app 左上固定 */
[data-ui-variant="sage"] .chat-container.ui-app > .ui-dev-badge {
  position: absolute;
  top: 6px;
  left: 8px;
  transform: none;
  z-index: 20;
  background: #ffc107;
  color: #212529;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  pointer-events: none;
}

[data-ui-variant="sage"] .ui-brand--toolbar .ui-header-phase {
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

[data-ui-variant="sage"] .ui-header-toolbar--line-icons .ui-toolbar-btn--pharmacist {
  background: var(--ui-primary-dark);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-ui-variant="sage"] .ui-header-toolbar--line-icons .ui-toolbar-btn--pharmacist .ui-toolbar-icon--filled {
  color: #fff;
}

[data-ui-variant="sage"] .ui-safety-rail--compact {
  background: var(--sage-bar-bg);
  border-bottom: 1px solid var(--sage-bar-border);
  padding: 5px 12px;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-rail__icon-svg--person {
  color: #3d5a73;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-rail__body {
  font-size: var(--safety-rail-title-size);
  gap: 6px;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-rail__body strong {
  color: #3d5a73;
  font-size: var(--safety-rail-title-size);
  font-weight: 600;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-chip {
  border-color: #d4dce6;
  font-size: var(--safety-rail-chip-size);
  padding: var(--safety-rail-chip-pad-y) var(--safety-rail-chip-pad-x);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-chip--ok {
  background: #eef4f8;
  color: #3d5a73;
  border-color: #b8cce0;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-chip--warn,
[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-chip--pending {
  background: #fdf8f3;
  color: #9a5c45;
  border-color: #e8cfc4;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-rail__status--pending {
  background: #fdf4f0;
  color: #9a5c45;
  font-size: var(--safety-rail-status-size);
  font-weight: 700;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-rail__status--ok {
  background: #eef4f8;
  color: #3d5a73;
  font-size: var(--safety-rail-status-size);
  font-weight: 700;
}

[data-ui-variant="sage"] .ui-safety-rail--compact .ui-safety-rail__cta {
  border-color: #b8cce0;
  color: #3d5a73;
  background: #eef4f8;
  font-size: var(--safety-rail-chip-size);
  font-weight: 600;
  padding: var(--safety-rail-chip-pad-y) var(--safety-rail-chip-pad-x);
  line-height: 1.25;
  border-radius: 999px;
  min-height: 0;
  white-space: nowrap;
}

[data-ui-variant="sage"] .chat-input.ui-input-bar {
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sage-bar-border);
  background: var(--sage-bar-bg);
}

[data-ui-variant="sage"] .chat-input .ui-input-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin: 0;
}

[data-ui-variant="sage"] .chat-input .message-input-field {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  min-height: 38px;
  max-height: 120px;
  background: #fff;
  box-shadow: none;
}

[data-ui-variant="sage"] .chat-input .message-input-field:focus-within {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 1px rgba(91, 124, 153, 0.22);
}

[data-ui-variant="sage"] .chat-input #messageInput.ui-textarea {
  width: 100%;
  border: none;
  border-radius: 0;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 12px;
  font-size: max(16px, 0.85rem);
  line-height: 1.4;
  background: transparent;
  box-shadow: none;
}

[data-ui-variant="sage"] .chat-input #messageInput.ui-textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

[data-ui-variant="sage"] .chat-input .ui-mic,
[data-ui-variant="sage"] .chat-input .mic-btn.ui-mic {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  display: grid;
  place-items: center;
  border: none;
  flex-shrink: 0;
}

[data-ui-variant="sage"] .chat-input .ui-send {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  border: none;
  flex-shrink: 0;
  background: var(--ui-primary);
  color: #fff;
}

[data-ui-variant="sage"] .chat-input .ui-send:hover {
  background: var(--ui-primary-dark);
}

[data-ui-variant="sage"] .ui-card--pro {
  border-color: var(--ui-border);
  box-shadow: 0 4px 18px rgba(91, 124, 153, 0.08);
  border-radius: 14px;
}

[data-ui-variant="sage"] .sage-header.ui-header {
  display: grid;
  background: var(--ui-bg-header);
  color: var(--ui-text-on-primary);
  position: relative;
  z-index: 6;
  flex-shrink: 0;
}

[data-ui-variant="sage"] .sage-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

[data-ui-variant="sage"] .sage-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[data-ui-variant="sage"] .sage-toggle span {
  width: 44px;
  height: 26px;
  background: #d4dce6;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
}

[data-ui-variant="sage"] .sage-toggle span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

[data-ui-variant="sage"] .sage-toggle input:checked + span {
  background: var(--ui-primary);
}

[data-ui-variant="sage"] .sage-toggle input:checked + span::after {
  transform: translateX(18px);
}

[data-ui-variant="sage"] .ui-particles {
  display: none;
}

/* Info modal /about link row */
[data-ui-variant="sage"] #about-site-link.list-item {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
}

[data-ui-variant="sage"] #about-site-link .list-item-title {
  color: var(--ui-primary-dark);
}

/* Special message cards */
[data-ui-variant="sage"] .crisis-support-card,
[data-ui-variant="sage"] .emergency-response-modern,
[data-ui-variant="sage"] .otc-lock-banner,
[data-ui-variant="sage"] .store-incident-banner {
  border-radius: var(--ui-radius-md);
  border-color: var(--ui-border);
}

[data-ui-variant="sage"] .recommendation-result {
  background: transparent;
  border: none;
  padding: 0;
  gap: 12px;
}

[data-ui-variant="sage"] .recommendation-result h4 {
  border-bottom-color: var(--ui-primary);
  color: var(--ui-primary-dark);
}

@media (min-width: 600px) {
  [data-ui-variant="sage"] {
    --ui-carousel-card-width: 320px;
  }
}

@media (min-width: 769px) {
  [data-ui-variant="sage"] {
    --ui-carousel-card-width: 360px;
  }
}

/* Modals */
[data-ui-variant="sage"] .modal-content {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  box-shadow: 0 16px 48px rgba(59, 90, 115, 0.18);
}

[data-ui-variant="sage"] .modal-header {
  background: var(--ui-primary-soft);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-primary-dark);
}

[data-ui-variant="sage"] .modal-header h3 {
  color: var(--ui-primary-dark);
}

/* Admin chat — keep branded header (override ui-primary-soft above) */
[data-ui-variant="sage"] .admin-modal .modal-header,
[data-ui-variant="sage"] .admin-modal-content .modal-header {
  background: var(--ui-bg-header);
  color: var(--ui-text-on-primary);
  border-bottom: none;
}

[data-ui-variant="sage"] .admin-modal .modal-header .modal-title,
[data-ui-variant="sage"] .admin-modal .modal-header h2,
[data-ui-variant="sage"] .admin-modal .modal-header h3 {
  color: var(--ui-text-on-primary);
}

[data-ui-variant="sage"] .admin-modal .modal-header .close-btn {
  color: var(--ui-text-on-primary);
}

[data-ui-variant="sage"] .submit-attributes-btn,
[data-ui-variant="sage"] #userInfoForm button[type="submit"] {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

[data-ui-variant="sage"] .ui-bubble--status .ui-feedback-compact .feedback-btn-positive,
[data-ui-variant="sage"] .ui-bubble--status .ui-feedback-compact .feedback-btn-negative,
[data-ui-variant="sage"] .ui-bubble--reco .ui-feedback-compact .feedback-btn-positive,
[data-ui-variant="sage"] .ui-bubble--reco .ui-feedback-compact .feedback-btn-negative,
[data-ui-variant="sage"] .ui-feedback-compact .feedback-btn-positive,
[data-ui-variant="sage"] .ui-feedback-compact .feedback-btn-negative {
  min-height: 0 !important;
  min-width: 0 !important;
  background: #fff !important;
  color: inherit !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
}

/* Feedback buttons (legacy full-size) */
[data-ui-variant="sage"] .feedback-buttons:not(.ui-feedback-compact) {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-ui-variant="sage"] .feedback-btn-positive {
  background: #3d7a5c !important;
  border-radius: 10px !important;
  min-height: 44px;
}

[data-ui-variant="sage"] .feedback-btn-negative {
  background: #b85c5c !important;
  border-radius: 10px !important;
  min-height: 44px;
}

/* Onboarding */
[data-ui-variant="sage"] .onboarding-overlay {
  background: rgba(44, 52, 64, 0.55);
}

[data-ui-variant="sage"] #onboarding-container,
[data-ui-variant="sage"] .onboarding-container {
  background: #ffffff;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 20px 60px rgba(59, 90, 115, 0.22);
}

[data-ui-variant="sage"] .onboarding-title {
  color: var(--ui-primary-dark);
  font-weight: 700;
}

[data-ui-variant="sage"] .onboarding-subtitle {
  color: #3d5a73;
  font-weight: 600;
}

[data-ui-variant="sage"] .onboarding-desc p,
[data-ui-variant="sage"] .onboarding-desc ul,
[data-ui-variant="sage"] .onboarding-agree,
[data-ui-variant="sage"] .onboarding-checklist-text {
  color: #2c3440;
}

[data-ui-variant="sage"] .onboarding-last-updated {
  color: #4a5568;
}

[data-ui-variant="sage"] .onboarding-last-updated-commit:hover,
[data-ui-variant="sage"] .onboarding-last-updated-commit:focus-visible {
  color: var(--ui-primary-dark);
}

[data-ui-variant="sage"] .onboarding-slide-footer {
  background: #ffffff;
  box-shadow: 0 -8px 14px -12px rgba(59, 90, 115, 0.14);
}

[data-ui-variant="sage"] .onboarding-commit-hash {
  background: #eef3f7;
  border-color: #d4dce6;
  color: #3d5a73;
}

[data-ui-variant="sage"] .onboarding-btn {
  background: var(--ui-primary);
}

[data-ui-variant="sage"] .onboarding-btn:hover,
[data-ui-variant="sage"] .onboarding-btn:focus {
  background: var(--ui-primary-dark);
}

[data-ui-variant="sage"] .onboarding-btn:disabled {
  background: #9aa8b8;
}

[data-ui-variant="sage"] .onboarding-agree input {
  accent-color: var(--ui-primary);
}

[data-ui-variant="sage"] .onboarding-skip {
  color: var(--ui-primary-dark);
  font-weight: 600;
}

[data-ui-variant="sage"] .onboarding-skip:hover,
[data-ui-variant="sage"] .onboarding-skip:focus {
  color: var(--ui-primary);
}

[data-ui-variant="sage"] .onboarding-language-selector .onboarding-lang-toggle {
  background: var(--ui-bg-muted, #f4f7fa);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

[data-ui-variant="sage"] .onboarding-language-selector .onboarding-lang-toggle:hover,
[data-ui-variant="sage"] .onboarding-language-selector .onboarding-lang-toggle:focus {
  background: #eef3f7;
  border-color: var(--ui-primary);
}

[data-ui-variant="sage"] .onboarding-slide h2 {
  color: var(--ui-primary-dark);
}

[data-ui-variant="sage"] .onboarding-nav button,
[data-ui-variant="sage"] .slide-indicator button[aria-current="true"] {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
}

[data-ui-variant="sage"] .onboarding-highlight {
  box-shadow: 0 0 0 4px rgba(91, 124, 153, 0.45),
              0 0 20px 8px rgba(91, 124, 153, 0.25) !important;
}

/* Info modal — match userInfoModal sizing */
[data-ui-variant="sage"] #infoModal {
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

[data-ui-variant="sage"] #infoModal .modal-content {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  box-shadow: 0 16px 48px rgba(59, 90, 115, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 640px);
  height: fit-content;
  padding: 0;
  margin: 0;
  width: 90%;
  max-width: 600px;
  flex-shrink: 0;
  align-self: center;
  background: var(--ui-bg-surface);
}

[data-ui-variant="sage"] #infoModal .modal-header {
  background: var(--ui-bg-header);
  color: var(--ui-text-on-primary);
  border-bottom: none;
  padding: 12px 14px;
  margin: 0;
}

[data-ui-variant="sage"] #infoModal .modal-header .modal-title {
  color: var(--ui-text-on-primary);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

[data-ui-variant="sage"] #infoModal .modal-close {
  color: var(--ui-text-on-primary);
  opacity: 0.9;
  font-size: 1.25rem;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

[data-ui-variant="sage"] #infoModal .modal-close:hover {
  opacity: 1;
}

[data-ui-variant="sage"] #infoModal .info-modal-back-btn {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ui-text-on-primary);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
}

[data-ui-variant="sage"] #infoModal .modal-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(min(90vh, 640px) - 52px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  padding: 10px 14px;
}

/* 一覧ページはカラーテーマの影響を受けない固定配色 */
[data-ui-variant="sage"] #infoModal .list-page {
  padding: 0;
  --info-list-title: #3d5a73;
  --info-list-desc: #6b7280;
  --info-list-arrow: #5b7c99;
  --info-list-border: #e8ecf0;
  --info-list-hover-bg: #f8fafb;
}

[data-ui-variant="sage"] #infoModal .list-page .ui-list-item {
  border-bottom-color: var(--info-list-border);
}

[data-ui-variant="sage"] #infoModal .list-page .ui-list-item:hover {
  background: var(--info-list-hover-bg);
  border-color: var(--info-list-border);
  box-shadow: none;
  transform: none;
}

[data-ui-variant="sage"] #infoModal .list-page .ui-list-title,
[data-ui-variant="sage"] #infoModal .list-page .list-item-title {
  color: var(--info-list-title);
}

[data-ui-variant="sage"] #infoModal .list-page .ui-list-desc,
[data-ui-variant="sage"] #infoModal .list-page .list-item-description {
  color: var(--info-list-desc);
}

[data-ui-variant="sage"] #infoModal .list-page .ui-list-arrow,
[data-ui-variant="sage"] #infoModal .list-page .list-item-arrow {
  color: var(--info-list-arrow);
}

[data-ui-variant="sage"] #infoModal .detail-page {
  padding: 0;
}

/* Info modal detail — accent colors follow active color theme */
[data-ui-variant="sage"] #infoModal .info-section h3 {
  color: var(--ui-primary);
  border-bottom-color: var(--ui-primary);
}

[data-ui-variant="sage"] #infoModal .info-section h5 {
  color: var(--ui-primary);
  border-left-color: var(--ui-primary);
}

[data-ui-variant="sage"] #infoModal .contact-info {
  border-left-color: var(--ui-primary);
}

[data-ui-variant="sage"] #infoModal .info-section a,
[data-ui-variant="sage"] #infoModal .contact-info a {
  color: var(--ui-accent);
}

[data-ui-variant="sage"] #infoModal .nav-button.active {
  background: var(--ui-primary);
}

[data-ui-variant="sage"] #infoModal .crisis-support-card {
  border-color: var(--ui-accent);
}

[data-ui-variant="sage"] #infoModal .crisis-support-title {
  color: var(--ui-primary-dark);
}

/* Info modal — ui-list-item style (54 pattern) */
[data-ui-variant="sage"] #infoModal .modal-content.ui-modal {
  border-radius: var(--ui-radius-lg);
  background: #fff;
}

[data-ui-variant="sage"] #infoModal .ui-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

[data-ui-variant="sage"] #infoModal .ui-list-item:last-child {
  border-bottom: none;
}

[data-ui-variant="sage"] #infoModal .ui-list-item:hover {
  background: var(--ui-primary-soft);
  border-color: var(--ui-border);
  transform: none;
  box-shadow: none;
}

[data-ui-variant="sage"] #infoModal .ui-list-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

[data-ui-variant="sage"] #infoModal .ui-list-text {
  flex: 1;
  min-width: 0;
}

[data-ui-variant="sage"] #infoModal .ui-list-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ui-primary-dark);
}

[data-ui-variant="sage"] #infoModal .ui-list-desc {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  margin-top: 2px;
}

[data-ui-variant="sage"] #infoModal .ui-list-arrow {
  margin-left: auto;
  color: var(--ui-text-muted);
  font-weight: 600;
}

[data-ui-variant="sage"] #infoModal .list-item:not(.ui-list-item) {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-ui-variant="sage"] #infoModal .list-item:not(.ui-list-item):hover {
  background: #fff;
  border-color: var(--ui-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(91, 124, 153, 0.12);
}

[data-ui-variant="sage"] #infoModal .list-item-title {
  color: var(--ui-primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
}

[data-ui-variant="sage"] #infoModal .list-item-description {
  color: #4a5568;
  font-size: 0.8rem;
  line-height: 1.45;
}

[data-ui-variant="sage"] #infoModal .list-item-arrow {
  color: var(--ui-primary);
  font-weight: 600;
}

[data-ui-variant="sage"] .info-modal .list-item {
  border-radius: var(--ui-radius-md);
  border-color: var(--ui-border);
}

/* Special message cards — enhanced */
[data-ui-variant="sage"] .crisis-support-card {
  background: #fdf4f0;
  border-left: 4px solid var(--ui-accent);
  padding: 16px;
}

[data-ui-variant="sage"] .emergency-response-modern {
  background: #fff5f5;
  border-left: 4px solid #c9846a;
}

[data-ui-variant="sage"] .otc-lock-banner {
  background: #f0f4f8;
  border-left: 4px solid var(--ui-primary);
}

[data-ui-variant="sage"] .store-incident-banner {
  background: #faf9f7;
  border-left: 4px solid var(--ui-warn);
}

[data-ui-variant="sage"] .chat-status-card {
  border-radius: var(--ui-radius-md);
  border-color: var(--ui-border);
}

[data-ui-variant="sage"] .collapsible-section {
  border-radius: var(--ui-radius-md);
}

[data-ui-variant="sage"] .message.processing .message-content {
  border-color: var(--ui-border);
  background: var(--ui-primary-soft);
  color: var(--ui-primary-dark);
}

[data-ui-variant="sage"] #infoModal .settings-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-ui-variant="sage"] #infoModal .settings-page__intro {
  margin: 0;
  padding: 0 2px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ui-text-muted);
}

[data-ui-variant="sage"] #infoModal .settings-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid #eef1f4;
  border-radius: 0;
  padding: 0 0 14px;
  margin: 0;
}

[data-ui-variant="sage"] #infoModal .settings-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

[data-ui-variant="sage"] #infoModal .settings-card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #3d5a73;
  line-height: 1.35;
}

[data-ui-variant="sage"] #infoModal .settings-card__desc {
  margin: 3px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #6b7280;
}

[data-ui-variant="sage"] #infoModal .settings-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

[data-ui-variant="sage"] #infoModal .settings-card__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

[data-ui-variant="sage"] #infoModal .settings-segment {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 10px;
  background: #eef1f4;
}

[data-ui-variant="sage"] #infoModal .settings-segment-btn {
  flex: 1 1 0;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #4a5568;
  font-family: inherit;
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  line-height: var(--line-height-base, 1.75);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

[data-ui-variant="sage"] #infoModal .settings-segment-btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.55);
  color: #3d5a73;
}

[data-ui-variant="sage"] #infoModal .settings-segment-btn.is-active {
  background: #fff;
  color: #3d5a73;
  box-shadow: 0 1px 4px rgba(59, 90, 115, 0.12);
}

[data-ui-variant="sage"] #infoModal .settings-preview {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef1f4;
  color: #3d5a73;
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-base, 1.75);
  text-align: center;
}

[data-ui-variant="sage"] #infoModal .settings-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-ui-variant="sage"] #infoModal .settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef1f4;
  border: none;
}

[data-ui-variant="sage"] #infoModal .settings-toggle-row__label {
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.35;
}

[data-ui-variant="sage"] #infoModal .settings-toggle-row__hint {
  margin: 3px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ui-text-muted);
  font-weight: 400;
}

[data-ui-variant="sage"] #infoModal .settings-footnote {
  margin: 2px 0 0;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ui-text-muted);
  text-align: center;
}

[data-ui-variant="sage"] #infoModal .settings-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

[data-ui-variant="sage"] #infoModal .settings-color-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #eef1f4;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, box-shadow 0.15s;
}

[data-ui-variant="sage"] #infoModal .settings-color-option:hover {
  background: #e4e9ee;
}

[data-ui-variant="sage"] #infoModal .settings-color-option.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(59, 90, 115, 0.12);
}

[data-ui-variant="sage"] #infoModal .settings-color-swatches {
  display: flex;
  gap: 4px;
  height: 22px;
}

[data-ui-variant="sage"] #infoModal .settings-color-swatch {
  flex: 1;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ui-text) 12%, transparent);
}

[data-ui-variant="sage"] #infoModal .settings-color-label {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ui-text);
}

[data-ui-variant="sage"] .sage-display-settings {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* User info modal — match 54 pattern (#modal-userinfo) */
[data-ui-variant="sage"] #userInfoModal .modal-content {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  box-shadow: 0 16px 48px rgba(59, 90, 115, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 640px);
  background: var(--ui-bg-surface);
}

[data-ui-variant="sage"] #userInfoModal .modal-header {
  background: var(--ui-bg-header);
  color: var(--ui-text-on-primary);
  border-bottom: none;
  padding: 12px 14px;
}

[data-ui-variant="sage"] #userInfoModal .modal-header h3 {
  margin: 0;
  color: var(--ui-text-on-primary);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

[data-ui-variant="sage"] #userInfoModal .close-modal {
  color: var(--ui-text-on-primary);
  opacity: 0.9;
  font-size: 1.25rem;
  line-height: 1;
}

[data-ui-variant="sage"] #userInfoModal .close-modal:hover {
  opacity: 1;
}

[data-ui-variant="sage"] #userInfoModal #userInfoForm {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 14px;
  background: var(--ui-bg-chat);
}

[data-ui-variant="sage"] #userInfoModal .form-group {
  margin-bottom: 10px;
}

[data-ui-variant="sage"] #userInfoModal .form-group label,
[data-ui-variant="sage"] #userInfoModal .ui-form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
  color: var(--ui-text);
}

/* main.css の input{font-size:16px!important}（モバイル）と .ui-form-group の max(16px) を上書き */
[data-ui-variant="sage"] #userInfoModal .form-group input,
[data-ui-variant="sage"] #userInfoModal .form-group select,
[data-ui-variant="sage"] #userInfoModal .form-group textarea,
[data-ui-variant="sage"] #userInfoModal .ui-form-group input,
[data-ui-variant="sage"] #userInfoModal .ui-form-group select,
[data-ui-variant="sage"] #userInfoModal .ui-form-group textarea,
[data-ui-variant="sage"] #userInfoModal #userInfoForm input,
[data-ui-variant="sage"] #userInfoModal #userInfoForm select,
[data-ui-variant="sage"] #userInfoModal #userInfoForm textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  font-family: inherit;
  font-size: 0.75rem !important;
  line-height: 1.45;
  box-sizing: border-box;
  background: var(--ui-bg-surface);
  color: var(--ui-text);
}

[data-ui-variant="sage"] #userInfoModal .form-group textarea {
  min-height: 4.5em;
  resize: vertical;
}

[data-ui-variant="sage"] #userInfoModal .submit-attributes-btn {
  width: 100%;
  margin-top: 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary);
  color: #fff;
  cursor: pointer;
  min-height: 0;
}

[data-ui-variant="sage"] #userInfoModal .submit-attributes-btn:hover {
  filter: brightness(1.05);
}

@media (max-width: 480px) {
  [data-ui-variant="sage"] #infoModal {
    padding: 12px;
  }

  [data-ui-variant="sage"] #infoModal .modal-content {
    width: 95%;
    max-height: min(85vh, calc(100vh - 24px));
  }

  [data-ui-variant="sage"] #infoModal .settings-color-grid {
    grid-template-columns: 1fr;
  }
}

/* Color theme: dark — hardcoded surfaces follow CSS variables */
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] .message.bot .message-content,
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] .message.bot > .ui-bubble--reco,
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] .ui-reco-block .ui-sage-collapse.collapsible-section {
  background: var(--ui-bg-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] #infoModal .modal-content,
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] #infoModal .modal-body {
  background: #fff;
  color: var(--ui-text);
}

body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] #infoModal .settings-toggle-row,
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] #infoModal .settings-color-option,
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] #infoModal .settings-segment {
  background: #eef1f4;
  color: #2c3440;
}

body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] .ui-textarea,
body[data-ui-variant="sage"][data-sage-color-theme="dark-clinical"] .ui-chip {
  background: var(--ui-bg-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

/* Color theme: minimal — light header toolbar */
body[data-ui-variant="sage"][data-sage-color-theme="minimal-zen"] .sage-header,
body[data-ui-variant="sage"][data-sage-color-theme="minimal-zen"] .ui-header--toolbar {
  border-bottom: 1px solid var(--ui-border);
}

.ui-reco-detail-skeleton {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-reco-detail-skeleton .ui-skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ui-border) 25%, rgba(255, 255, 255, 0.5) 50%, var(--ui-border) 75%);
  background-size: 200% 100%;
  animation: ui-reco-skeleton-shimmer 1.2s ease-in-out infinite;
}

.ui-reco-detail-skeleton .ui-skeleton-line--short {
  width: 60%;
}

@keyframes ui-reco-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ui-bubble--status,
.ui-bubble--qa {
  --fs: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
  max-width: min(100%, 42rem);
  font-size: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
  line-height: var(--sage-chat-copy-lh, var(--line-height-base, 1.75));
}

[data-ui-variant="sage"] .message.bot > .ui-bubble--status,
[data-ui-variant="sage"] .message.bot > .ui-bubble--qa {
  max-width: 96%;
  padding: 0.55rem 0.65rem;
  border-radius: 18px 18px 12px 18px;
  border: 1px solid var(--ui-border);
  background: #fff;
  box-shadow: 0 2px 12px rgba(59, 90, 115, 0.06);
}

[data-ui-variant="sage"] .message.bot.message--sage-status {
  max-width: 96%;
}

/* Status bubble typography — unified with initial greeting / plain chat */
.ui-bubble--status .ui-status-intro__title,
.ui-bubble--qa .ui-status-intro__title,
.ui-bubble--status .ui-status-advice__text,
.ui-bubble--qa .ui-status-advice__text,
.ui-bubble--status .ui-status-advice__lead,
.ui-bubble--qa .ui-status-advice__lead,
[data-ui-variant="sage"] .ui-bubble--status-plain .ui-chat-plain__text {
  font-size: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
  line-height: var(--sage-chat-copy-lh, var(--line-height-base, 1.75));
}
.ui-bubble--status .ui-overlap-card__title,
.ui-bubble--qa .ui-overlap-card__title,
.ui-bubble--status .ui-followup-list,
.ui-bubble--qa .ui-followup-list,
.ui-bubble--status .ui-alert,
.ui-bubble--qa .ui-alert,
.ui-bubble--status .ui-status-compact__title,
.ui-bubble--status .ui-status-compact__lead,
.ui-bubble--status .ui-status-compact__row,
.ui-bubble--qa .ui-status-compact__title,
.ui-bubble--qa .ui-status-compact__lead,
.ui-bubble--qa .ui-status-compact__row,
.ui-bubble--status .ui-status-message--plain,
.ui-bubble--qa .ui-status-message--plain {
  font-size: inherit;
  line-height: inherit;
}

.ui-bubble--status .ui-overlap-card__badge,
.ui-bubble--qa .ui-overlap-card__badge,
.ui-bubble--status .ui-status-compact__meta,
.ui-bubble--qa .ui-status-compact__meta,
.ui-bubble--status .ui-status-compact__hint,
.ui-bubble--qa .ui-status-compact__hint {
  font-size: 0.875em;
  line-height: inherit;
}

.ui-status-block--pro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-status-block--compact {
  gap: 0;
}

.ui-status-compact__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ui-status-compact__icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  color: var(--ui-primary);
  margin-top: 0.12em;
}

.ui-status-compact__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ui-status-compact__title {
  font-weight: 700;
  color: var(--ui-primary-dark);
  line-height: inherit;
}

.ui-status-compact__lead {
  color: var(--ui-text-muted, #5a6b7a);
  line-height: inherit;
}

.ui-status-compact__rows {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-status-compact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f6faf8 0%, #f2f7f5 100%);
  border: 1px solid rgba(74, 124, 98, 0.14);
  line-height: inherit;
}

.ui-status-compact__key {
  font-weight: 600;
  color: var(--ui-text-muted, #5a6b7a);
  flex-shrink: 0;
}

.ui-status-compact__key::after {
  content: '：';
}

.ui-status-compact__val {
  font-weight: 600;
  color: var(--ui-text);
  flex: 1 1 auto;
  min-width: 0;
}

.ui-status-compact__meta {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 600;
  color: #2d6a4f;
  background: rgba(45, 106, 79, 0.12);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.ui-status-compact__hint {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  line-height: inherit;
}

[data-ui-variant="sage"] .ui-bubble--status .ui-status-block--compact {
  --fs: var(--sage-chat-copy-fs, var(--font-size-base, 1rem));
}

.ui-status-intro {
  margin-bottom: 2px;
}

.ui-status-intro__title {
  font-weight: 700;
  color: var(--ui-primary-dark);
  line-height: 1.35;
}

.ui-status-intro__icon {
  color: var(--ui-primary);
}

.ui-status-advice__lead {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--ui-text);
}

.ui-status-advice__text {
  margin: 0;
  color: var(--ui-text);
}

.ui-bubble--status .ui-status-last-updated,
.ui-bubble--qa .ui-status-last-updated {
  margin: 10px 2px 4px;
  padding: 0;
}

[data-ui-variant="sage"] .ui-bubble--status .ui-status-last-updated,
[data-ui-variant="sage"] .ui-bubble--qa .ui-status-last-updated {
  color: var(--ui-text-muted, #757575);
}

.ui-status-message--plain {
  margin: 0;
  padding: 0 2px;
  color: var(--ui-text);
}

.ui-status-block--security .ui-status-message--plain {
  color: var(--ui-text);
}

.ui-status-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-status-section-card .ui-followup-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.ui-agent-role-item {
  display: grid;
  grid-template-columns: minmax(9.5rem, 38%) 1fr;
  gap: 8px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-border-subtle, rgba(0, 0, 0, 0.06));
}

.ui-agent-role-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ui-agent-role-item__name {
  font-weight: 700;
  color: var(--ui-primary, #5ab8a8);
  font-size: 0.92em;
  line-height: 1.45;
  word-break: break-word;
}

.ui-agent-role-item__desc {
  color: var(--ui-text);
  font-size: 0.95em;
  line-height: 1.55;
}

.ui-status-hints-card {
  margin: 0;
}

.ui-status-hints-card--chips {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(90, 184, 168, 0.1) 0%, rgba(250, 248, 243, 0.95) 100%);
  border: 1px solid rgba(90, 184, 168, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.ui-status-hints-card--chips .ui-status-hints-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(90, 184, 168, 0.16);
  color: var(--ui-primary, #5ab8a8);
}

.ui-status-hints-card__lead {
  margin: 0 0 8px;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--ui-text);
  line-height: 1.45;
}

.ui-status-hints-card__tips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-status-hints-card__tip {
  font-size: 0.9em;
  color: var(--ui-text-muted, #5f6b7a);
  line-height: 1.5;
}

.ui-status-hints-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: inherit;
  font-weight: 700;
  color: var(--ui-text);
}

.ui-status-hints-card .ui-followup-list {
  margin: 0;
}

.ui-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ui-status-actions--multi {
  margin-top: 12px;
}

.ui-status-actions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ui-status-chip.ui-status-multi-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-status-chip {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.92em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
}

.ui-status-chip.ui-status-multi-submit {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 600;
  min-height: 0;
}

.ui-status-chip.is-selected {
  background: var(--ui-primary, #5ab8a8);
  border-color: var(--ui-primary, #5ab8a8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(90, 184, 168, 0.28);
}

.ui-status-chip.is-selected:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.ui-status-chip:hover {
  transform: translateY(-1px);
}

.ui-status-block--critical .ui-status-intro__icon,
.ui-status-block--error .ui-status-intro__icon,
.ui-status-block--security .ui-status-intro__icon {
  color: #b42318;
}

.ui-status-block--critical .ui-status-intro__title,
.ui-status-block--error .ui-status-intro__title,
.ui-status-block--security .ui-status-intro__title {
  color: #b42318;
}

.ui-status-block--critical .ui-status-advice,
.ui-status-block--error .ui-status-advice,
.ui-status-block--security .ui-status-advice {
  background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  border-color: #f0d4cc;
}

.ui-status-block--caution .ui-status-intro__icon {
  color: #b54708;
}

.ui-status-block--caution .ui-status-advice {
  background: linear-gradient(180deg, #fffaf3 0%, #fff 100%);
  border-color: #fcd9b8;
}

[data-ui-variant="sage"] .ui-bubble--qa .ui-status-advice {
  background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
}

/* Legacy status hero (deprecated markup — keep for admin/legacy fallbacks) */
.ui-status-hero {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ui-status-hero__icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-border);
}

.ui-status-hero__icon {
  width: 18px;
  height: 18px;
  color: var(--ui-primary-dark);
}

.ui-status-hero__text {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.ui-status-hero__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ui-primary-dark);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.ui-status-hero__subtitle {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--ui-text-muted);
  line-height: 1.45;
}

.ui-status-body {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-border);
}

.ui-status-body__text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--ui-text);
}

.ui-status-section {
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: #fff;
  overflow: hidden;
}

.ui-status-section__title {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ui-text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #faf9f7 0%, #fff 100%);
}

.ui-status-section__body {
  padding: 8px 10px 10px;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--ui-text);
}

.ui-status-section__list {
  margin: 0;
  padding-left: 1.1em;
}

.ui-status-hints {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-status-hints li {
  position: relative;
  padding-left: 14px;
  font-size: 0.68rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

.ui-status-hints li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ui-primary);
  opacity: 0.45;
}

.ui-status-block--critical .ui-status-hero__icon-wrap,
.ui-status-block--error .ui-status-hero__icon-wrap,
.ui-status-block--security .ui-status-hero__icon-wrap {
  background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  border-color: #f0d4cc;
}

.ui-status-block--critical .ui-status-hero__icon,
.ui-status-block--error .ui-status-hero__icon,
.ui-status-block--security .ui-status-hero__icon {
  color: #b42318;
}

.ui-status-block--critical .ui-status-body,
.ui-status-block--error .ui-status-body,
.ui-status-block--security .ui-status-body {
  background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  border-color: #f0d4cc;
}

.ui-status-block--caution .ui-status-hero__icon-wrap {
  background: linear-gradient(180deg, #fffaf3 0%, #fff 100%);
  border-color: #fcd9b8;
}

.ui-status-block--caution .ui-status-hero__icon {
  color: #b54708;
}

.ui-status-block--caution .ui-status-body {
  background: linear-gradient(180deg, #fffaf3 0%, #fff 100%);
  border-color: #fcd9b8;
}

[data-ui-variant="sage"] .ui-bubble--qa .ui-status-hero__icon-wrap {
  background: linear-gradient(180deg, #eef6ff 0%, #fff 100%);
  border-color: #c8daf0;
}

[data-ui-variant="sage"] .ui-bubble--qa .ui-status-body {
  background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
}

/* Legacy status selectors (deprecated markup) */
.ui-status-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui-status-head__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-status-head__title {
  margin: 0;
  font-size: 1.05rem;
}

.ui-status-message {
  line-height: 1.6;
  white-space: pre-wrap;
}

.ui-status-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}