:root {
  --green: #275ebc;
  --muted: #536784;
  --border: #dce6f3;
  --soft: #edf4fc;
  --care-paper: #f0f5fc;
  --care-surface: #ffffff;
  --care-ink: #183350;
  --care-sidebar: #193b66;
  color: var(--care-ink);
  background: var(--care-paper);
}

body { background: var(--care-paper); height: 100dvh; }
main { min-height: 0; }
main > header { background: var(--care-surface); border-color: var(--border); }
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #346ab3;
  outline-offset: 3px;
}
#page-title:focus { outline: none; }
.header-tools button, #reading-mode { min-height: 44px; color: #36587f; }
.local-badge { background: #eaf2fd; border-color: #d8e5f6; color: #365c88; }
.mobile-nav-button, .drawer-close { display: none; }

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 244px;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 0;
  padding: 26px 16px 18px;
  color: #f4f8ff;
  background: var(--care-sidebar);
  border: 0;
}
.sidebar .brand { color: #fbfdff; min-height: 45px; }
.sidebar .brand small { color: #c4d9f2; font-size: 11px; }
.sidebar .brand-icon { background: #285589; color: #d7e8ff; }
.sidebar .new-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
  min-height: 46px;
  margin-top: 21px;
  background: #dfecff;
  color: #1f4777;
}
.sidebar .new-button::after { content: none; }
.sidebar .nav-label { display: block; color: #c5d9f0; margin-top: 20px; font-size: 12px; }
.sidebar nav { display: grid; gap: 2px; margin: 7px 0 0; }
.sidebar .nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 11px;
  color: #e2eefb;
}
.sidebar .nav:hover, .sidebar .nav.active { color: #ffffff; background: #2c5280; }
.sidebar .nav.active { box-shadow: inset 3px 0 #9dc5ff; }
.sidebar .nav span { font-size: 14px; }
.sidebar-recents { border-top: 1px solid #45678c; margin-top: 14px; padding-top: 6px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-heading h2 { color: #e2eefb; margin: 0; font-size: 14px; }
.sidebar-all, .recent-chat { color: #ebf3ff; background: transparent; min-height: 44px; }
.sidebar-all { padding: 0 9px; text-decoration: underline; text-underline-offset: 3px; }
.recent-chat { display: block; text-align: left; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 8px; padding: 0 10px; font-size: 14px; }
.recent-chat:hover, .recent-chat[aria-current] { background: #2c5280; }
.recent-empty { font-size: 13px; color: #c5d9f0; margin: 5px 0 10px; }
.sidebar .side-footer { display: block; margin-top: auto; padding: 16px 0 0; color: #d3e3f5; font-size: 12px; line-height: 1.6; }
.sidebar .side-footer p { color: #bcd0eb; margin: 3px 0 0; }
.sidebar-settings { display: none; }

.chat-scroll { background: var(--care-paper) url('/chat-watermark.svg') right top / min(570px, 65%) auto no-repeat; }
.welcome { max-width: 800px; margin: clamp(16px, 6vh, 54px) auto 20px; }
.welcome-tag { color: #3f628d; background: transparent; border: 0; }
.welcome h2 { color: var(--care-ink); font-size: clamp(28px, 4vw, 39px); margin: 14px 0 8px; letter-spacing: 0; }
.welcome > p { color: #455f7e; font-size: 16px; margin: 0; }
.starter-grid { margin-top: 23px; }
.starter-grid button { background: var(--care-surface); color: #2a4e78; border-color: #d7e4f5; box-shadow: none; }
.starter-grid strong { color: #244c79; }
.starter-grid small, .welcome-bottom > span { color: #4d6483; }
.welcome-bottom button { min-height: 44px; color: #315888; }
.message.assistant { background: var(--care-surface); border-color: #dde7f4; box-shadow: none; }
.message.user .bubble { color: #233e66; background: #e2edfc; border-color: #d3e3fb; }
.message .bubble { font-size: 16px; line-height: 1.8; }
.message .who, .message.assistant .who { color: #526c90; font-size: 13px; }
.message.urgent { background: #fff3e7; border-color: #ce936b; }
.message-actions { flex-wrap: wrap; gap: 4px 14px; }
.message-actions button { min-height: 44px; color: #355b91; font-size: 13px; }
.source-links a { background: #e9f2ff; color: #345d91; }
.question-card { background: #eaf3ff; border-color: #d6e4f8; }
.choices button { min-height: 44px; color: #315888; }
.composer-area { background: var(--care-paper); }
#composer { background: var(--care-surface); border-color: #cadcf4; box-shadow: 0 4px 16px #203f6a12; }
#message-input { color: var(--care-ink); font-size: 16px; }
#message-input::placeholder { color: #536987; }
#voice-status:empty { display: none; }
#composer button, #composer label { min-height: 44px; }
#composer .subtle, #composer .audio-option, .composer-hint { color: #405e82; }
#send, .primary { background: var(--green); color: #fff; min-height: 44px; }
#send { min-width: 46px; }
.composer-hint { font-size: 12px; }
.receipts { color: #536784; }

.history-search {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 560px;
  min-height: 48px;
  margin: 12px 0 18px;
  padding: 0 14px;
  background: var(--care-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #3e6391;
}
.history-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--care-ink); font-size: 16px; }
.history-search:focus-within { outline: 3px solid #346ab3; outline-offset: 2px; }
.history-search input:focus-visible { outline: none; }
.history-list { max-width: 800px; }
.history-group { margin-bottom: 22px; }
.history-group-label { margin: 0 0 6px; color: #506a8d; font-size: 14px; }
.history-entry { display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--border); background: var(--care-surface); padding: 6px 8px; }
.history-open { min-width: 0; flex: 1; min-height: 54px; background: transparent; text-align: left; color: var(--care-ink); border-radius: 7px; padding: 5px 9px; }
.history-open:hover { background: #edf4fd; }
.history-open strong { display: block; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45; }
.history-open small { color: #536784; font-size: 12px; }
.history-more { flex: none; max-width: 96px; color: #435f85; }
.history-more summary { display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: 44px; padding: 0 10px; border-radius: 8px; }
.history-more summary:hover { background: #edf4fd; }
.history-options { display: grid; gap: 3px; }
.history-options button { min-height: 44px; color: #345b8e; }
.history-options .delete { background: transparent; color: #8a3f30; }

@media (max-width: 760px) {
  html { overscroll-behavior-x: none; }
  body { flex-direction: column; }
  .sidebar {
    position: fixed;
    z-index: 32;
    inset: 0 auto 0 0;
    width: min(324px, 88vw);
    height: 100dvh;
    align-items: stretch;
    padding: max(20px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .18s ease, visibility .18s;
  }
  .drawer-open .sidebar { visibility: visible; transform: translateX(0); }
  .drawer-backdrop { position: fixed; z-index: 31; inset: 0; width: 100%; height: 100%; background: #142e5370; border-radius: 0; }
  .drawer-close { display: grid; place-items: center; position: absolute; top: max(12px, env(safe-area-inset-top)); right: 9px; width: 44px; height: 44px; background: transparent; color: #f4f8ff; }
  .sidebar .brand { padding-right: 45px; }
  .sidebar .brand small { display: block; }
  .sidebar .nav[data-view] { display: flex; }
  .sidebar .nav span, .sidebar .new-button { font-size: 16px; }
  .sidebar-settings { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 9px; margin-top: 10px; border-top: 1px solid #45678c; }
  .sidebar-settings button, #drawer-settings #reading-mode { color: #e8f1ff; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; font-size: 14px; }
  main > header { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 3px; height: auto; min-height: 58px; padding: max(5px, env(safe-area-inset-top)) 9px 5px; }
  .header-location { display: flex; min-width: 0; justify-content: center; }
  .header-location > span, .header-tools { display: none; }
  .header-location h1 { font-size: 17px; margin: 0; text-align: center; }
  .mobile-nav-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 2px 3px; background: transparent; color: #325a91; font-size: 11px; }
  .chat-scroll { padding: 13px 13px 10px; background-size: min(310px, 81%) auto; }
  .welcome { margin: 10px 0 12px; }
  .welcome h2 { font-size: 28px; }
  .welcome > p { font-size: 15px; }
  .starter-grid { gap: 8px; margin-top: 18px; }
  .starter-grid button { display: grid; align-items: center; grid-template-columns: 29px minmax(0,1fr); min-height: 62px; padding: 8px 12px; }
  .starter-grid strong { font-size: 16px; }
  .starter-grid small { font-size: 12px; margin-top: 0; }
  .starter-grid button > svg { grid-row: span 2; margin: 0; }
  .welcome-bottom { margin-top: 9px; }
  .message.user { margin-left: 13%; }
  .message.assistant { margin-right: 0; padding: 14px 13px 8px; }
  .message-actions { gap: 1px 12px; }
  .composer-area { padding: 7px 9px max(7px, env(safe-area-inset-bottom)); }
  #composer { padding: 8px 9px 3px; }
  #message-input { min-height: 42px; }
  .composer-bottom { gap: 4px; align-items: end; margin-top: 2px; }
  .composer-bottom > div { gap: 0 7px; min-width: 0; }
  #composer .subtle, #composer .audio-option { font-size: 13px; white-space: nowrap; }
  #attach-photo svg { display: none; }
  .composer-hint { justify-content: flex-end; padding: 4px 3px 0; }
  .composer-hint > span:last-child { display: inline; }
  .desktop-compose-hint { display: none; }
  .page-view { padding: 20px 14px; }
  .section-heading { flex-wrap: wrap; }
  .history-entry { padding-inline: 4px; }
  #history .section-heading h2, #new-from-history { display: none; }
}

body.reading-large .message .bubble { font-size: 20px; }
body.reading-large #message-input { font-size: 22px; }
body.reading-large .history-open strong, body.reading-large .sidebar .nav span { font-size: 18px; }
body.reading-large .login-card, body.reading-large #speech-settings, body.reading-large .message-actions button, body.reading-large .choices button { font-size: 17px; }
body.reading-large .login-card :is(label,input,button,p), body.reading-large #speech-settings :is(label,select,button,p) { font-size: 17px; }
body.reading-large .sidebar-settings button { font-size: 17px; }
.account-trigger { display: inline-flex; align-items: center; gap: 8px; }
.account-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: #dfeafd; color: #264f95; font-weight: 700; }
.login-card, #speech-settings { box-sizing: border-box; width: min(440px,calc(100% - 28px)); max-height: min(720px,calc(100dvh - 28px)); overflow: auto; }
.login-card .account-card-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; align-items: center; height: auto; padding: 0 0 12px; background: transparent; border: 0; }
.login-card .account-card-head h3, .login-card .account-card-head p { margin: 0; overflow-wrap: anywhere; }
.login-card button, #speech-settings button, #speech-voice { min-height: 44px; }
.login-card [data-close] { min-width: 44px; font-size: 24px; background: #edf4fd; color: #254e85; border-radius: 9px; }
.account-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 12px; background: #edf4fd; border-radius: 10px; }
.account-modes button { color: #315680; background: transparent; border-radius: 8px; }
.account-modes button[aria-pressed="true"] { background: white; color: #194983; font-weight: 700; }
.login-card .account-password { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.account-password button { padding-inline: 10px; color: #244d87; background: #edf4fd; border-radius: 9px; }
.account-submit { width: 100%; }
.account-card-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#speech-voice { display: block; box-sizing: border-box; margin-top: 6px; width: 100%; padding-inline: 8px; border: 1px solid #cbd9ed; border-radius: 8px; background: white; color: #213c61; font: inherit; }
.speech-toast { position: fixed; z-index: 25; bottom: max(8px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 8px 12px; border-radius: 9px; background: #edf4fd; color: #1e4174; box-shadow: 0 3px 12px #18345122; }
.message.reading-aloud { box-shadow: 0 0 0 2px #9ebbe9; }
.case-risk { margin-top: 8px; padding: 10px 12px; color: #28466f; background: #edf4fd; border-radius: 8px; }
#case-detail-count { font-weight: 400; }
@media (max-width: 760px) {
  #drawer-settings { display: grid; grid-template-columns: 1fr; gap: 3px; }
  #drawer-settings > button { justify-content: flex-start; text-align: left; padding-inline: 8px; }
  #drawer-settings > .account-trigger { border: 1px solid #6988b1; border-radius: 9px; }
}
#chat-recovery { padding: 10px 12px; border: 1px solid #c9d9ee; border-radius: 12px; background: #edf4fd; color: #28466f; flex-wrap: wrap; }
#chat-recovery-text { flex: 1 1 12rem; line-height: 1.6; }
#chat-recovery-action { min-height: 44px; background: #d8e7fa; color: #1e4174; }
body.reading-large #chat-recovery { font-size: 18px; }
.care-track { margin-top: 20px; }
.care-track h3 { margin: 0; }
.care-track summary { cursor: pointer; padding: 9px 0; }
.care-track button { min-height: 44px; }
.care-track[aria-busy] button { cursor: progress; }
.care-track-form:not([hidden]) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.care-track-form > label:not(.track-confirm) { display: grid; gap: 6px; }
.care-track-form input:not([type=checkbox]), .care-track-form select, .care-track-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px; border: 1px solid #d5dfed; border-radius: 8px; font: inherit; }
.care-track-form > button { justify-self: start; }
.care-track .track-wide, .care-track .track-confirm { grid-column: 1 / -1; }
.care-track .track-confirm, .care-track .track-choice { display: flex; gap: 8px; align-items: center; min-height: 38px; }
.care-track .record-actions { flex-wrap: wrap; }
.care-track .track-photo-option { display: flex; gap: 16px; align-items: center; }
.care-track .track-photo-link { display: inline-block; margin: 0 12px 0 0; }
.care-observation-row { padding: 4px 0 8px; border-top: 1px solid #e2eaf5; overflow-wrap: anywhere; }
.care-observation-row details { padding-left: 20px; }
#care-track-status { overflow-wrap: anywhere; }
.track-priority { margin: 8px 0; padding: 10px 12px; border: 1px solid #e9be9e; border-radius: 9px; color: #753910; background: #fff3e7; }
.track-priority a, .track-priority-label { color: #753910; }
.track-priority-label { font-weight: 600; }
.track-comparison { margin-top: 16px; padding-top: 12px; border-top: 1px solid #d5dfed; }
.track-comparison h4 { margin: 0 0 8px; }
.track-comparison ul { padding-left: 1.25em; line-height: 1.65; }
#care-track-compare-choices { display: flex; flex-wrap: wrap; gap: 10px 16px; }
#care-track-compare-choices label { display: grid; gap: 5px; }
#care-track-compare-choices select { min-height: 44px; padding: 6px; border: 1px solid #d5dfed; border-radius: 8px; font: inherit; }
.track-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.track-pair article { min-width: 0; padding: 8px; border: 1px solid #d5dfed; border-radius: 8px; overflow-wrap: anywhere; }
.track-pair img, .track-pair p.track-pair-placeholder { width: 100%; height: clamp(110px,28vw,240px); margin: 6px 0 0; border-radius: 6px; background: #edf2f9; }
.track-pair img { display: block; object-fit: contain; }
.track-pair p.track-pair-placeholder { display: grid; place-items: center; padding: 4px; box-sizing: border-box; text-align: center; }
.track-pair a, .track-pair button { display: block; margin-top: 5px; }
#care-track-reference:not([hidden]) { display: grid; justify-items: start; gap: 4px; margin: 10px 0; padding: 10px; background: #edf4fd; border-radius: 8px; }
#care-track-reference img { width: min(100%,180px); max-height: 180px; object-fit: contain; }
@media (max-width: 600px) {
  .care-track-form:not([hidden]) { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .drawer-backdrop, button { transition: none; }
  .chat-scroll { scroll-behavior: auto; }
}