:root {
  --brand: #1a8a86;
  --brand-strong: #0e5856;
  --brand-muted: #4eaaa2;
  --brand-soft: #e2efed;
  --brand-focus: #f7c95d;
  --surface: #ffffff;
  --canvas: #fff6e9;
  --ink: #1c1f1c;
  --ink-soft: #3d423d;
  --muted: #6c6f68;
  --line: #eadcc6;
  --mint: #e2efed;
  --coral: #ee7757;
  --coral-soft: #fcd8c8;
  --green: #1a8a86;
  --green-soft: #e2efed;
  --yellow: #f7c95d;
  --yellow-soft: #fff0cf;
  --orange: #ee7757;
  --orange-soft: #fbe9d2;
  --chat-message-cream: #fbe9d2;
}

body.view-app {
  color: var(--ink);
  background: var(--canvas);
  font-family: Nunito, "Avenir Next", ui-rounded, system-ui, sans-serif;
}

.app-sidebar {
  color: #fff6e9;
  background: linear-gradient(180deg, #176f6c 0%, #0e5856 100%);
}

.sidebar-brand .brand-mark {
  color: #0e5856;
  background: linear-gradient(135deg, #f7c95d, #ee7757);
}
.login-card .brand-mark { color: #0e5856; background: linear-gradient(135deg, #f7c95d, #ee7757); }

.sidebar-tab { color: #e2efed; }
.sidebar-tab:hover { background: rgba(255, 246, 233, .13); }
.sidebar-tab.active {
  color: #fff;
  background: rgba(255, 246, 233, .18);
  box-shadow: inset 3px 0 0 var(--brand-focus);
}
.account-avatar, .user-card-avatar { color: var(--brand-strong); background: var(--brand-soft); }
.sidebar-account { border-color: rgba(255, 246, 233, .2); }
.sidebar-account span { color: #c6dfdb; }

.app-main { color: var(--ink); }
.topbar {
  border-color: var(--line);
  background: rgba(255, 246, 233, .94);
}
.page-context strong, .page-heading h2, .chat-heading h2,
.pet-card h3, .user-card h3, .chat-card h3, .feedback-card h3 { color: var(--ink); }
.eyebrow, .inspect-turn, .reaction-button, .text-button,
.bot-questions li::marker { color: var(--brand); }

.panel, .debug-card, .pet-card, .chat-card, .user-card, .feedback-card,
.kanban-column, .reviewer-notes, .technical-trace {
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: 0 8px 24px rgba(28, 31, 28, .055);
}
.chat-panel .messages { background: transparent; }
.chat-panel .message-form { background: linear-gradient(180deg, rgba(255, 246, 233, 0), var(--canvas) 24%); }
.chat-view, .chat-panel { background: var(--canvas); }
.chat-panel { min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.chat-panel .messages { padding: 12px 24px 18px; }
.chat-panel .message-form { padding: 12px 24px 8px; gap: 5px; }
.chat-panel .composer { min-height: 58px; gap: 8px; padding: 5px 6px 5px 18px; border: 1px solid var(--line); box-shadow: 0 5px 15px rgba(28, 31, 28, .06); }
.chat-panel .composer textarea { min-height: 38px; max-height: 120px; padding: 8px 2px; font-size: .94rem; }
.chat-panel .composer-icon-button { width: 38px; height: 38px; border: 0; background: transparent; }
.chat-panel .composer-hint { padding: 0 6px; color: var(--muted); font-size: .71rem; }
.chat-empty h3 { color: var(--ink); }
.chat-empty p, .page-heading p, .pets-heading p, .chat-card p,
.user-card p { color: var(--ink-soft); }

.message-row.bot .message-avatar { color: #fff; background: var(--brand); }
.message-row.owner .message-avatar { color: var(--ink); background: #f7c95d; }
.message.owner, .chat-panel .message.owner { color: #fff; background: var(--brand); }
.message.bot { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.chat-panel .message { border-radius: 17px 24px 24px 24px; box-shadow: 0 5px 16px rgba(28, 31, 28, .055); }
.chat-panel .message.owner { border-radius: 24px 17px 24px 24px; }
.chat-panel .message.bot { border: 1.5px solid var(--mint); border-bottom-left-radius: 17px; }
.message-row.bot.guided-row { width: min(100%, 640px); max-width: 640px; align-items: flex-start; }
.message-row.guided-row .message-avatar { margin-top: 5px; }
.message-label { color: inherit; }
.bot-questions li::marker { color: var(--brand); }
.message-actions button { color: var(--brand-strong); }
.message-actions button:hover { background: var(--brand-soft); }

.button.primary, .primary, .send-button, .chat-view-button:hover {
  color: #fff;
  background: var(--brand);
}
.button.primary:hover, .primary:hover, .send-button:hover,
.chat-view-button:hover { background: var(--brand-strong); }
.button, .chat-prompt, .answer-choice { border-radius: 999px; }
.button.secondary, .secondary, .icon-button, .chat-view-button {
  color: var(--brand-strong);
  border-color: #c5ded9;
  background: #fff;
}
.button.secondary:hover, .secondary:hover, .icon-button:hover:not(:disabled),
.chat-view-button:hover { border-color: var(--brand); }
.medical-rag-toggle { white-space: nowrap; font-size: .82rem; }
.medical-rag-toggle[aria-pressed="true"] { color: #fff; border-color: var(--brand); background: var(--brand); }
.medical-rag-toggle[aria-pressed="true"]:hover { color: #fff; background: var(--brand-strong); }
.medical-rag-toggle.is-off { color: var(--ink-muted, #687a73); }
.chat-prompt { color: var(--brand-strong); border-color: #c5ded9; }
.chat-prompt:hover { border-color: var(--brand); background: var(--brand-soft); }
.composer, .message-form, .composer textarea, input, select, textarea {
  color: var(--ink);
}
.composer, .composer:focus-within { border-color: #c5ded9; }
.composer:focus-within { outline-color: #c5ded9; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline-color: #cde8e2; }
.composer-hint, .status-chip { color: var(--ink-soft); }
.status-chip { background: var(--mint); }

.answer-choice { color: var(--brand-strong); border-color: #c5ded9; }
.answer-choice:hover { color: var(--brand-strong); border-color: var(--brand); background: var(--brand-soft); }
.answer-choice.selected,
.answer-choice[aria-pressed="true"] {
  border-color: transparent;
  color: #fff;
  background: var(--brand);
  box-shadow: none;
}
.answer-choice.selected:hover,
.answer-choice[aria-pressed="true"]:hover { color: #fff; background: var(--brand-strong); }
.answer-choice:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 2px; }
.chat-prompt { border-radius: 999px; }
.composer { border-radius: 999px; background: #fff; }
.composer textarea { border-radius: 999px; }
.send-button, .composer-icon-button { border-radius: 50%; }
.chat-panel .send-button { width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 0; }
.chat-panel .send-button::after { content: "➤"; font-size: 17px; line-height: 1; }
.composer-icon-button { color: var(--brand-strong); background: var(--mint); }
.composer-icon-button:hover { color: #fff; background: var(--brand); }
.chat-panel .message-form { background: linear-gradient(180deg, rgba(255, 246, 233, 0), var(--canvas) 24%); }
.teleconsult-cta { background: var(--brand); }
.teleconsult-cta:hover, .teleconsult-cta:focus-visible { background: var(--brand-strong); }

.pets-empty { color: var(--muted); border-color: var(--line); background: #fff; }
.chat-card { border-left-color: var(--brand); }
.chat-card:hover { border-left-color: var(--brand-strong); }
.chat-card-date, .page-info, .kanban-column-title { color: var(--brand-strong); }
.chat-stat, .kanban-count { color: var(--brand-strong); background: var(--brand-soft); }
.feedback-card[data-status="issues"] { border-left-color: var(--coral); }
.feedback-card[data-status="ready_for_testing"] { border-left-color: var(--yellow); }
.feedback-card[data-status="done"] { border-left-color: var(--green); }
.feedback-card { border-radius: 18px; }

.profile-modal, .feedback-modal, .audit-modal, .feedback-thread-modal {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 22px;
  background: var(--canvas);
  box-shadow: 0 20px 70px rgba(28, 31, 28, .22);
}
.profile-modal::backdrop, .feedback-modal::backdrop, .audit-modal::backdrop,
.feedback-thread-modal::backdrop { background: rgba(28, 31, 28, .42); }
.modal-heading, .audit-modal-heading { border-color: var(--line); }
.audit-modal-heading { background: #fff; }
.audit-summary { color: var(--brand-strong); background: var(--brand-soft); }
.audit-stage { border-color: var(--line); background: #fff; }
.audit-stage-marker { background: var(--green); }
.audit-stage.failed .audit-stage-marker { background: var(--coral); }
.explanation-event-marker { background: var(--brand); }
.rag-response-card, .reviewer-notes, .technical-trace { border-color: var(--line); background: #fff; }
.rag-status-available { color: #276c4a; background: var(--green-soft); }
.rag-status-unavailable, .rag-status-rejected { color: #8a5c00; background: var(--yellow-soft); }

/* Urgency outcome colors mirror the Flair cards in artifact.html. */
.message.outcome-card {
  width: min(100%, 760px);
  max-width: min(100%, 760px);
  border: 2px solid var(--outcome-border);
  background: var(--outcome-bg);
  color: var(--ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--outcome-border) 12%, transparent);
}
.chat-panel .message.bot.outcome-card {
  border: 2px solid var(--outcome-border);
  background: var(--outcome-bg);
  color: var(--ink);
}
.outcome-level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 2px 0 8px;
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--outcome-ink);
  background: var(--outcome-pill);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .025em;
}
.outcome-level::before { width: 8px; height: 8px; border-radius: 50%; background: var(--outcome-border); content: ""; }
.outcome-n1 { --outcome-border: #1a8a86; --outcome-bg: #e2efed; --outcome-pill: #cde5e1; --outcome-ink: #0e5856; }
.outcome-n2 { --outcome-border: #e3ad35; --outcome-bg: #fff0cf; --outcome-pill: #f7c95d; --outcome-ink: #684b08; }
.outcome-n3 { --outcome-border: #ee7757; --outcome-bg: #fbe9d2; --outcome-pill: #f7c9aa; --outcome-ink: #8e3b27; }
.outcome-n4 { --outcome-border: #a93a28; --outcome-bg: #fcd8c8; --outcome-pill: #f3b5a4; --outcome-ink: #742719; }

.guided-row { width: min(100%, 640px); }
.message-row.bot.guided-row .message-content { flex: 1 1 auto; width: auto; max-width: 100%; }
.guided-content { width: 100%; max-width: 100%; }
.guided-card {
  width: 100%; max-width: 100%; padding: 16px; border: 1px solid #eadcc6;
  border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(28, 31, 28, .055);
}
.guided-card > h3 { margin: 4px 0; color: var(--ink); font-size: 1.05rem; }
.guided-card > p { margin: 0 0 10px; color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }
.guided-eyebrow { display: block; color: var(--brand); font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.pet-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; }
.pet-select-card {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 9px; row-gap: 2px; min-height: 66px; padding: 10px;
  border: 1px solid #d9e7df; border-radius: 14px; color: var(--ink); background: #fff;
  text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pet-select-card:hover, .pet-select-card:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 8px 20px rgba(26, 138, 134, .14); }
.pet-select-card.selected { border-color: var(--brand); background: var(--mint); box-shadow: inset 0 0 0 1px var(--brand); }
.pet-select-card strong { font-size: .9rem; }
.pet-select-card small { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.pet-select-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: var(--brand-strong); background: var(--brand-soft); font-size: 1.1rem; font-weight: 800; }
.pet-select-icon svg { width: 20px; height: 20px; }
.add-pet-card { border-style: dashed; background: #fffcf5; }
.guided-form { display: grid; gap: 16px; margin-top: 16px; }
.guided-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guided-form label, .emergency-detail-label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.guided-form input, .guided-form select, .guided-form textarea, .emergency-form textarea { border-color: #eadcc6; border-radius: 11px; background: #fff; }
.guided-wide { grid-column: 1 / -1; }
.guided-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.guided-error { margin: 0; }
.emergency-form { gap: 0; margin-top: 12px; }
.emergency-question { display: grid; gap: 12px; margin: 0; border: 0; border-radius: 0; padding: 17px 0; background: transparent; }
.emergency-question legend { max-width: 100%; padding: 0 4px; color: var(--ink); font-size: 1.04rem; font-weight: 800; line-height: 1.4; }
.emergency-answer-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.emergency-choices { display: flex; gap: 7px; }
.emergency-choice { min-width: 58px; border: 1px solid #c5ded9; border-radius: 999px; padding: 8px 12px; color: var(--brand-strong); background: #fff; font-size: .84rem; font-weight: 750; }
.emergency-choice:hover, .emergency-choice.selected { border-color: var(--brand); background: var(--brand-soft); }
.emergency-choice.selected { box-shadow: inset 0 0 0 1px var(--brand); }
.emergency-choice.urgent-choice { border-color: #f1b4a8; color: #963d2e; }
.emergency-choice.urgent-choice.selected { border-color: var(--coral); background: var(--coral-soft); box-shadow: inset 0 0 0 1px var(--coral); }
.emergency-answer-row textarea { min-width: 0; min-height: 40px; max-height: 80px; resize: vertical; padding: 8px 10px; font-size: .82rem; }
.outcome-card .message-label { margin-bottom: 7px; }

/* Conversational profile setup inspired by the widget's pet card and answer pills. */
.pet-onboarding { gap: 17px; }
.onboarding-progress { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.progress-step { display: inline-flex; align-items: center; gap: 6px; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.progress-step.active { color: var(--brand-strong); }
.progress-step.active::before { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); content: ""; }
.progress-line { flex: 1; height: 1px; min-width: 14px; background: var(--line); }
.onboarding-step { display: grid; gap: 13px; }
.onboarding-label { display: block; color: var(--ink); font-size: .86rem; font-weight: 800; }
.species-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.species-choice { display: grid; justify-items: center; gap: 6px; min-height: 86px; border: 1.5px solid #d6e7e2; border-radius: 17px; padding: 11px 8px; color: var(--ink-soft); background: #fff; font: inherit; font-size: .82rem; font-weight: 750; transition: .15s ease; }
.species-choice:hover { border-color: var(--brand); background: #f5fbf8; }
.species-choice.selected { border-color: var(--brand); color: var(--brand-strong); background: var(--mint); box-shadow: inset 0 0 0 1px var(--brand); }
.species-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: var(--brand-strong); background: #fff0cf; }
.species-icon svg { width: 22px; height: 22px; }
.identity-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.onboarding-field { display: grid; gap: 6px; color: var(--ink-soft); font-size: .76rem; font-weight: 750; }
.onboarding-field input, .onboarding-field textarea { min-height: 44px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 13px; background: #fff; }
.onboarding-field input::placeholder, .onboarding-field textarea::placeholder { color: #99978f; font-size: .82rem; font-weight: 500; }
.identity-fields .onboarding-field:first-child { grid-column: 1 / -1; }
.onboarding-hint { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.details-step[hidden] { display: none; }
.pet-detail-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.pet-detail-group { display: grid; gap: 7px; }
.choice-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-pill, .quick-fill { min-height: 36px; border: 1.5px solid var(--brand); border-radius: 999px; padding: 7px 12px; color: var(--brand-strong); background: #fff; font: inherit; font-size: .76rem; font-weight: 750; cursor: pointer; }
.choice-pill:hover, .choice-pill.selected { background: var(--mint); }
.choice-pill.selected { box-shadow: inset 0 0 0 1px var(--brand); }
.weight-field { max-width: 220px; }
.onboarding-note { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 10px; }
.onboarding-note textarea { min-height: 62px; resize: vertical; }
.quick-fill { min-height: 34px; margin-bottom: 2px; border-style: dashed; border-color: #b4c9c2; color: var(--muted); font-size: .7rem; }
.quick-fill:hover, .quick-fill.selected { border-color: var(--brand); color: var(--brand-strong); background: var(--mint); }
.onboarding-back { margin-right: auto; color: var(--brand-strong); }
.onboarding-back:hover { color: var(--brand); }
.emergency-choice { border-radius: 999px; }
.emergency-form .guided-actions { justify-content: flex-start; }
.guided-actions .button { min-height: 42px; padding-inline: 18px; }

@media (max-width: 760px) {
  .app-sidebar { background: #0e5856; }
  .topbar { background: rgba(255, 246, 233, .96); }
  .chat-panel .messages { padding: 10px 14px 14px; }
  .chat-panel .message-form { padding: 8px 14px 6px; }
  .chat-panel .composer { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 54px; padding-left: 14px; }
  .chat-panel .composer textarea { grid-column: auto; min-height: 36px; }
  .chat-panel .send-button { width: 44px; min-width: 44px; height: 44px; }
  .guided-card { padding: 17px; }
  .guided-form-grid { grid-template-columns: 1fr; }
  .guided-wide { grid-column: auto; }
  .identity-fields, .pet-detail-groups { grid-template-columns: 1fr; }
  .pets-list, .users-list { grid-template-columns: 1fr; }
  .composer-hint { display: none; }
  .identity-fields .onboarding-field:first-child { grid-column: auto; }
  .chat-panel .send-button { font-size: 0; }
  .chat-panel .send-button::before { content: "→"; font-size: 1.15rem; line-height: 1; }
  .choice-pills { gap: 5px; }
  .choice-pill { padding-inline: 9px; }
}

/* Match the widget's chat surface and type hierarchy. */
.chat-panel { font-family: "Hanken Grotesk", system-ui, sans-serif; }
.chat-panel .message.bot:not(.outcome-card):not(.question-card):not(.guided-card) {
  border-color: transparent;
  background: var(--chat-message-cream);
  box-shadow: none;
}
.chat-panel .message.bot.question-card {
  border-color: var(--mint);
  background: #fff;
}
.chat-panel .message.bot.question-card.question-card-answered {
  border-color: transparent;
  background: var(--mint);
  box-shadow: none;
}
.chat-panel .emergency-clinic-finder h3,
.chat-panel .guided-card > h3 { font-family: "Familjen Grotesk", "Hanken Grotesk", sans-serif; }