:root {
  --brand: #406766;
  --brand-strong: #315655;
  --brand-muted: #628886;
  --brand-soft: #e4efee;
  --brand-focus: #c3d7d5;
}

body.view-app {
  min-height: 100vh;
  background: #f3f7f4;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  max-width: none;
  padding: 0;
}

.app-sidebar {
  display: flex;
  position: sticky;
  top: 0;
  flex-direction: column;
  width: 248px;
  height: 100vh;
  padding: 22px 14px 16px;
  color: #e8f5ef;
  background: var(--brand);
  transition: width .2s ease, transform .2s ease;
}

.app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.app-sidebar.collapsed { width: 76px; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 7px; }
.sidebar-brand .brand-mark { flex: none; color: var(--brand); background: #edf5f4; }
.sidebar-brand-toggle { display: grid; place-items: center; border: 0; cursor: default; }
.sidebar-brand-copy { display: grid; min-width: 0; gap: 2px; }
.sidebar-brand-copy strong { font-size: 1rem; }
.sidebar-brand-copy span, .account-copy span { color: #b9d8cb; font-size: .74rem; }
.sidebar-toggle, .mobile-sidebar-toggle, .sidebar-logout { display: grid; place-items: center; border: 0; color: inherit; background: transparent; }
.sidebar-toggle { width: 34px; height: 34px; margin-left: auto; border-radius: 8px; }
.sidebar-toggle:hover, .sidebar-logout:hover { background: rgba(255,255,255,.12); }
.sidebar-toggle svg, .sidebar-logout svg, .mobile-sidebar-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sidebar-nav { display: grid; gap: 5px; margin-top: 40px; }
.sidebar-tab { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 44px; border: 0; border-radius: 10px; padding: 10px 12px; color: #d7ece3; background: transparent; text-align: left; font-weight: 650; }
.sidebar-tab svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sidebar-tab:hover { color: #fff; background: rgba(255,255,255,.14); }
.sidebar-tab.active { color: #fff; background: var(--brand-muted); box-shadow: inset 3px 0 0 #e1f0ee; }
.sidebar-account { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 7px 0; border-top: 1px solid rgba(232,245,239,.2); }
.account-avatar, .user-card-avatar { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .8rem; font-weight: 800; }
.account-copy { display: grid; min-width: 0; gap: 2px; }
.account-copy strong { overflow: hidden; max-width: 145px; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.sidebar-logout { width: 34px; height: 34px; margin-left: auto; border-radius: 8px; }
.app-sidebar.collapsed .sidebar-brand-copy, .app-sidebar.collapsed .sidebar-tab span, .app-sidebar.collapsed .account-copy { display: none; }
.app-sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0; }
.app-sidebar.collapsed .sidebar-brand-toggle { cursor: pointer; }
.app-sidebar.collapsed .sidebar-toggle, .app-sidebar.collapsed .sidebar-logout { display: none; }
.app-sidebar.collapsed .sidebar-tab { justify-content: center; }
.app-sidebar.collapsed .sidebar-account { justify-content: center; padding-left: 0; padding-right: 0; }
.app-main { min-width: 0; padding: 0 28px 32px; }
.app-shell.audit-open .app-main { padding-right: min(508px, 60vw); }
.topbar { display: flex; align-items: center; min-height: 76px; margin: 0 -28px 22px; padding: 14px 28px; border-bottom: 1px solid #e0ebe5; background: rgba(243,247,244,.9); }
.page-context { display: grid; gap: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.page-context .eyebrow { margin: 0; font-size: .68rem; }
.page-context strong { font-size: 1.08rem; }
.mobile-brand { display: none; align-items: center; gap: 10px; }
.mobile-sidebar-toggle { display: none; color: var(--brand); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin: 18px 0 26px; }
.page-heading h2 { margin-bottom: 6px; font-size: 1.7rem; letter-spacing: -.03em; }
.page-heading p { margin: 0; color: #547068; }
.pets-view, .users-view, .feedback-view { width: min(880px, 100%); margin: 0 auto; }
.users-list, .feedback-list { display: grid; gap: 12px; }
.user-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 15px 18px; border: 1px solid #dbe7e0; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(26,65,51,.05); }
.user-card-actions { display: flex; gap: 8px; align-items: center; }
.pets-list .pet-card { min-height: 72px; padding: 14px 18px; gap: 0; }
.pets-list .pet-card-top { align-items: center; }
.user-card h3, .feedback-card h3 { margin: 0 0 4px; font-size: 1rem; }
.user-card p { margin: 0; color: #547068; font-size: .85rem; }
.user-delete:disabled { cursor: not-allowed; opacity: .5; }
.feedback-card { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid #ead7d2; border-left: 4px solid #b35c4d; border-radius: 14px; background: #fff; }
.feedback-card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.feedback-card-details { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.feedback-card-heading time, .feedback-card-meta { color: #6b7e76; font-size: .8rem; }
.message-count-badge { border-radius: 999px; padding: 3px 8px; color: #355f52; background: #e7f2ec; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.feedback-card-copy { margin: 0; color: #29483e; line-height: 1.5; }
.feedback-card-meta { margin: 0; }
.audit-drawer { position: fixed; z-index: 5; top: 0; right: 0; display: flex; flex-direction: column; width: min(480px, 100vw); height: 100vh; border-left: 1px solid #c8d9d2; background: #f8fbf9; transform: translateX(105%); transition: transform .22s ease; }
.audit-drawer.open { transform: translateX(0); }
.audit-drawer-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 22px 24px 14px; border-bottom: 1px solid #dbe7e0; background: #fff; }
.audit-drawer-heading h2 { margin: 0; font-size: 1.15rem; }
.audit-drawer .audit-timeline { overflow-y: auto; }
.feedback-thread-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid #dbe7e0; border-radius: 16px; padding: 0; color: #19322c; background: #f8fbf9; box-shadow: 0 16px 48px rgba(26,65,51,.2); }
.feedback-thread-modal::backdrop { background: rgba(20,42,34,.42); }
.feedback-thread-modal .modal-heading { padding: 22px 24px 14px; border-bottom: 1px solid #dbe7e0; background: #fff; }
.feedback-thread-modal .modal-heading h2 { margin-bottom: 4px; }
.feedback-thread-meta { margin: 0; color: #6b7e76; font-size: .82rem; }
.feedback-thread-messages { display: grid; gap: 12px; padding: 20px 24px 26px; }
.review-message { max-width: 88%; padding: 12px 15px; border-radius: 12px; background: #fff; border: 1px solid #dbe7e0; }
.review-message.owner { justify-self: end; color: #fff; background: var(--brand); border-color: var(--brand); }
.review-message strong { display: block; margin-bottom: 4px; font-size: .76rem; opacity: .8; }
.review-message p { margin: 0; white-space: pre-wrap; line-height: 1.5; }

/* The chat is the page surface; only the message column is constrained. */
.chat-view { min-height: calc(100vh - 100px); gap: 0; background: transparent; }
.chat-panel { min-height: calc(100vh - 100px); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chat-thread { background: transparent; }
.chat-heading { width: 100%; margin: 0; border-bottom: 0; }
.chat-thread { width: 100%; }
.chat-panel .messages { width: 100%; margin: 0; }
.chat-panel .message-form { position: sticky; bottom: 0; z-index: 2; width: 100%; margin: 0; border: 0; background: linear-gradient(180deg, rgba(243,247,244,0), #f3f7f4 24%); padding-top: 24px; }
.chat-panel .composer { align-items: center; padding-top: 6px; padding-bottom: 6px; background: #fff; box-shadow: 0 8px 24px rgba(26,65,51,.08); }
.chat-panel .composer textarea { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.chat-panel .send-button { align-self: center; }
.chat-panel .composer-hint { margin-top: 2px; }

.audit-summary { margin: 0; padding: 16px 24px; color: #3e6256; background: #edf6f1; font-size: .91rem; line-height: 1.5; }
.audit-timeline { display: grid; gap: 18px; overflow-y: auto; padding: 20px 24px 32px; }
.explanation-loading { margin: 0; padding: 16px; border-radius: 12px; color: #45695d; background: #edf6f1; font-size: .9rem; line-height: 1.45; }
.explanation-recommendation { padding: 17px; border: 1px solid #bcd9ce; border-radius: 14px; background: #fff; }
.explanation-recommendation > span:first-child { display: block; margin-bottom: 6px; color: #497467; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.explanation-recommendation h3 { margin: 0; color: #153f34; font-size: 1rem; line-height: 1.4; }
.urgency-chip { display: inline-block; margin-top: 12px; border-radius: 999px; padding: 4px 9px; color: #155a49; background: #dff0e8; font-size: .76rem; font-weight: 750; }
.explanation-timeline { position: relative; display: grid; gap: 20px; }
.explanation-timeline::before { position: absolute; top: 12px; bottom: 12px; left: 11px; width: 2px; background: #bad8cb; content: ""; }
.explanation-event { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.explanation-event-marker { z-index: 1; display: block; width: 24px; height: 24px; border: 5px solid #e9f5ef; border-radius: 50%; background: var(--brand); box-sizing: border-box; }
.explanation-event-copy { padding: 1px 0 2px; }
.explanation-event h3 { margin: 0 0 5px; color: #183c32; font-size: .94rem; }
.explanation-event p { margin: 0; color: #58736a; font-size: .84rem; line-height: 1.5; }
.trace-evidence-list, .policy-match-list { display: grid; gap: 9px; margin-top: 12px; }
.trace-evidence-list blockquote { margin: 0; border-left: 3px solid #5d967f; padding: 9px 12px; color: #244b3f; background: #f2f8f5; font-size: .9rem; font-style: normal; line-height: 1.45; }
.trace-evidence-list p { padding-left: 12px; }
.policy-match { padding: 13px 14px; border: 1px solid #bcd9ce; border-radius: 11px; background: #f5faf7; }
.policy-match strong, .explanation-model strong { display: block; margin-bottom: 4px; color: #244b3f; font-size: .84rem; }
.policy-match p { margin-bottom: 8px; }
.policy-match small { display: block; color: #55766a; font-size: .75rem; line-height: 1.45; }
.reviewer-notes, .technical-trace { border: 1px solid #dbe8e1; border-radius: 12px; background: #fff; }
.reviewer-notes summary, .technical-trace summary { cursor: pointer; padding: 14px 16px; color: #254b40; font-size: .86rem; font-weight: 750; }
.reviewer-notes p { margin: 0; border-top: 1px solid #e5eee9; padding: 0 16px 15px; color: #58736a; font-size: .85rem; line-height: 1.5; }
.technical-trace[open] summary { border-bottom: 1px solid #e5eee9; }
.explanation-models { display: grid; gap: 9px; padding: 14px 16px 16px; }
.explanation-models h3 { margin: 0 0 1px; color: #183c32; font-size: .9rem; }
.explanation-models > p { margin: 0; color: #58736a; font-size: .84rem; }
.explanation-model { padding: 11px 12px; border: 1px solid #dbe8e1; border-radius: 10px; background: #f8fbf9; }
.explanation-model p { margin: 0; color: #58736a; font-size: .8rem; line-height: 1.45; }
.permission-fieldset { display: grid; gap: 10px; margin: 0; border: 1px solid #c8d9d2; border-radius: 10px; padding: 12px; }
.permission-fieldset legend { padding: 0 5px; color: var(--brand-strong); font-size: .85rem; font-weight: 750; }
.permission-fieldset label, #user-management-permissions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
#user-management-permissions { gap: 9px; padding: 10px 0 0 20px; border-top: 1px solid #e2ece7; }
.permission-fieldset input { width: auto; }

/* Shared primary actions and interactive accents. This block is loaded last. */
.primary, .send-button, .chat-empty-mark, .message-row.bot .message-avatar {
  background: var(--brand);
}
.primary:hover, .send-button:hover { background: var(--brand-strong); }
.brand-mark, .message.owner, .message-row.owner .message-avatar { background: var(--brand); }
.chat-panel .message.owner { background: var(--brand); }
.brand-mark, .message-row.bot .message-avatar { color: #fff; }
.message-row.owner .message-avatar { color: var(--brand); background: var(--brand-soft); }
.inspect-turn, .reaction-button, .text-button, .eyebrow, .bot-questions li::marker { color: var(--brand); }
.chat-panel .bot-questions li::marker { color: var(--brand); }
.inspect-turn:hover, .reaction-button:hover { background: var(--brand-soft); }
.chat-prompt, .secondary, .icon-button { color: var(--brand-strong); }
.chat-prompt:hover { border-color: var(--brand); background: var(--brand-soft); }
.composer:focus-within, input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.composer:focus-within { outline-color: var(--brand-focus); }
input:focus, select:focus, textarea:focus { outline-color: var(--brand-focus); }
@media (max-width: 760px) {
  .app-shell { display: block; }
  .app-sidebar { position: fixed; z-index: 10; transform: translateX(-105%); box-shadow: 12px 0 35px rgba(20,55,43,.2); }
  .app-sidebar.mobile-open { transform: translateX(0); }
  .app-main { padding: 0 16px 24px; }
  .app-shell.audit-open .app-main { padding-right: 16px; }
  .topbar { justify-content: space-between; margin: 0 -16px 18px; padding: 12px 16px; }
  .mobile-brand { display: none; }
  .mobile-sidebar-toggle { display: flex; }
  .page-context { display: grid; }
  .mobile-sidebar-toggle { order: -1; }
  .page-heading { flex-direction: column; }
  .audit-drawer { width: min(440px, 100vw); }
}