/* App-specific layer, loaded after tokens.css / components.css / kiosk.css /
   desk.css. Those three carry the Zencia OPD design system; this file wires
   it to the elements specific to index.html, doctor.html and the chat views
   patient.html and index.html share. */

/* ---------- top bar (index.html, doctor.html, kiosk.html) ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-5); background: var(--c-surface); border-bottom: 1px solid var(--c-line-soft);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand h1 { font-size: var(--t-md); font-weight: 700; letter-spacing: .02em; color: var(--c-brand); }
.brand p { margin: 0; font-size: var(--t-xs); color: var(--c-ink-3); }
.dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--c-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-green) 20%, transparent);
}
.topbar-right { display: flex; align-items: center; gap: var(--s-4); }
.toggle { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--c-ink-2); cursor: pointer; }
a.navlink { color: var(--c-ink-2); text-decoration: none; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 7px 13px; font-size: var(--t-sm); }
a.navlink:hover { color: var(--c-ink); border-color: var(--c-brand); }
button.ghost { background: transparent; color: var(--c-ink-2); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 7px 13px; font-size: var(--t-sm); cursor: pointer; }
button.ghost:hover { border-color: var(--c-brand); color: var(--c-ink); }
button.primary { background: var(--c-brand); color: #fff; border: 1px solid var(--c-brand); border-radius: var(--r-md); padding: 10px 20px; font-weight: 600; cursor: pointer; }
button.primary:hover { background: var(--c-brand-dark); }
button.primary:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- registration screen (index.html) ---------- */
.screen { max-width: 1080px; margin: var(--s-6) auto; padding: 0 var(--s-4); display: grid; gap: var(--s-4); }
#chatScreen { grid-template-columns: minmax(0, 1fr); }
#chatScreen.with-side { grid-template-columns: minmax(0, 1fr) 320px; }
#chatScreen.with-side .assessment { grid-column: 1 / -1; }
@media (max-width: 860px) {
  #chatScreen.with-side { grid-template-columns: minmax(0, 1fr); }
}

.form { max-width: 640px; margin: 0 auto; width: 100%; }
.form h2 { margin: 0 0 4px; font-size: var(--t-md); }
.form > .muted { margin: 0 0 var(--s-5); font-size: var(--t-sm); }
.field.small { flex: 0 0 110px; }
.field em { font-weight: 400; font-style: normal; }
input:not([type="checkbox"]):not([type="radio"]), select {
  font: inherit; color: var(--c-ink); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 10px 12px; width: 100%;
}
input:focus:not([type="checkbox"]):not([type="radio"]), select:focus { outline: 2px solid var(--c-brand); outline-offset: -1px; border-color: transparent; }
.error { color: var(--c-red); font-size: var(--t-sm); margin: var(--s-3) 0 0; }

/* ---------- toggle switch (doctor.html Profile, and anywhere a checkbox
   should read as an on/off switch rather than a native checkbox) ---------- */
.switch-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-2); cursor: pointer; }
.switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 40px; height: 22px; }
.switch input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--c-line);
  transition: background-color .15s ease;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease;
}
.switch input[type="checkbox"]:checked ~ .switch-track { background: var(--c-brand); }
.switch input[type="checkbox"]:checked ~ .switch-track .switch-thumb { transform: translateX(18px); }
.switch input[type="checkbox"]:focus-visible ~ .switch-track { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ---------- chat, shared by index.html and patient.html ---------- */
.chat-card { display: flex; flex-direction: column; min-height: 460px; }
.chat-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line-soft); flex-wrap: wrap;
}
.chat-head .muted { font-size: var(--t-xs); margin-left: var(--s-2); }
.confidence { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); }
.bar { width: 90px; height: 6px; border-radius: 3px; background: var(--c-line-soft); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--c-brand); transition: width .35s ease; }
.chat-progress { margin: var(--s-2) 0 0; }
.chat-progress i { transition: width .4s ease; }

.messages { flex: 1; overflow-y: auto; max-height: 52vh; padding: var(--s-4) 2px; display: flex; flex-direction: column; gap: var(--s-3); scroll-behavior: smooth; }
/* Same visual language as the kiosk chat bubbles (kiosk.css .bubble-bot / .bubble-you) */
.msg {
  max-width: 78%; padding: var(--s-4); border-radius: var(--r-lg); font-size: var(--t-md);
  white-space: pre-wrap; word-wrap: break-word; box-shadow: var(--shadow-1);
  animation: msg-in .32s cubic-bezier(.34, 1.56, .64, 1) both;
}
.msg.assistant { transform-origin: bottom left; }
.msg.patient { transform-origin: bottom right; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.msg.assistant { background: var(--c-surface); border: 1px solid var(--c-line-soft); border-bottom-left-radius: var(--s-1); align-self: flex-start; }
.msg.patient { background: var(--c-brand); color: #fff; border-bottom-right-radius: var(--s-1); align-self: flex-end; box-shadow: none; }
.msg.typing { padding: var(--s-3) var(--s-4); display: inline-flex; }

.msg-text { display: block; }
/* A blinking caret at the end of the text while the reply is still being
   typed out - visual-only cue that it's "live", not a finished static block. */
.msg-text.is-typing::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: currentColor; vertical-align: -2px; animation: caret-blink .8s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.msg-time { display: block; margin-top: 5px; font-size: 10px; letter-spacing: .02em; font-weight: 600; opacity: .5; }
.msg.assistant .msg-time { color: var(--c-ink-3); }
.msg.patient .msg-time { color: rgba(255, 255, 255, .85); text-align: right; }
.msg.typing .msg-time { display: none; }

/* Three bouncing dots, replacing the old blinking-ellipsis text indicator */
.typing-dots { display: inline-flex; gap: 5px; align-items: center; height: 1.1em; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-3); animation: dot-bounce 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.composer { display: flex; gap: var(--s-3); align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--c-line-soft); }
.composer input { flex: 1; border-radius: var(--r-pill); }
.send-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--c-brand); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
}
.send-btn svg { margin-left: 2px; }
.send-btn:hover:not(:disabled) { background: var(--c-brand-dark); }
.send-btn:active:not(:disabled) { transform: scale(.92); }
.send-btn:disabled { background: var(--c-line); cursor: not-allowed; }

.banner.danger { background: var(--c-red-bg); color: var(--c-red); border: 1px solid #f0bbb8; padding: 11px 14px; border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 600; margin: var(--s-3) 0 0; }

/* ---------- full-screen chat (patient.html only, toggled via JS) ---------- */
.kiosk-body.is-chat { padding: 0; max-width: none; justify-content: stretch; }
.kiosk-body.is-chat #step-chat.active { flex: 1; display: flex; min-height: 0; }
.kiosk-body.is-chat .chat-card {
  flex: 1; min-height: 0; width: 100%; margin: 0 auto; max-width: 720px;
  background: transparent; border: none; box-shadow: none; border-radius: 0;
}
.kiosk-body.is-chat .chat-head { padding: var(--s-4) var(--s-5) 0; border-bottom: none; }
.kiosk-body.is-chat .chat-progress { margin: var(--s-2) var(--s-5) 0; }
.kiosk-body.is-chat .messages { padding: var(--s-4) var(--s-5); max-height: none; }
.kiosk-body.is-chat .composer { padding: var(--s-3) var(--s-5) var(--s-5); border-top: 1px solid var(--c-line-soft); background: var(--c-surface); }
.kiosk-body.is-chat .error#chatError { margin: 0 var(--s-5) var(--s-3); }
@media (max-width: 559px) {
  .kiosk-body.is-chat .chat-head { padding: var(--s-3) var(--s-4) 0; }
  .kiosk-body.is-chat .chat-progress { margin: var(--s-2) var(--s-4) 0; }
  .kiosk-body.is-chat .messages { padding: var(--s-3) var(--s-4); }
  .kiosk-body.is-chat .composer { padding: var(--s-2) var(--s-4) var(--s-4); }
}

/* ---------- side panel (clinician reasoning, index.html only) ---------- */
.side h3 { margin: 0 0 var(--s-3); font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s-2); }
.tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 2px 7px; font-weight: 600; }
.side h4 { margin: var(--s-4) 0 6px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.side h4:first-of-type { margin-top: 0; }
.hyp { margin-bottom: var(--s-3); }
.hyp-top { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-sm); }
.hyp-bar { height: 4px; border-radius: 2px; background: var(--c-line-soft); margin-top: 4px; overflow: hidden; }
.hyp-bar span { display: block; height: 100%; background: var(--c-brand); }
.hyp small { color: var(--c-ink-3); font-size: var(--t-xs); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip.hot { border-color: var(--c-red); color: var(--c-red); background: var(--c-red-bg); }
.side ul { margin: 0; padding-left: 18px; font-size: var(--t-sm); }

/* ---------- assessment (clinical summary card) ---------- */
.assessment-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: 6px; }
.assessment-head h2 { margin: 0; font-size: var(--t-md); }
.triage { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid; }
.triage.EMERGENCY { color: #fff; background: var(--c-red); border-color: var(--c-red); }
.triage.URGENT { color: var(--c-orange); background: var(--c-orange-bg); border-color: var(--c-orange); }
.triage.ROUTINE { color: var(--c-blue); background: var(--c-blue-bg); border-color: var(--c-blue); }
.triage.SELF_CARE { color: var(--c-green); background: var(--c-green-bg); border-color: var(--c-green); }

.assessment h4 { margin: var(--s-4) 0 5px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.assessment h4:first-child { margin-top: 0; }
.assessment p { margin: 0; }
.dx { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; }
.assessment ul { margin: 0; padding-left: 18px; }
.assessment li { margin-bottom: 4px; }
.disclaimer { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--c-line-soft); font-size: var(--t-xs); color: var(--c-ink-3); }

/* ---------- structured clinical note (renderAssessmentHtml) ---------- */
.assessment-summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.confidence-badge { flex: none; text-align: center; background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--s-2) var(--s-4); }
.confidence-badge .n { display: block; font-size: var(--t-lg); font-weight: 700; line-height: 1.1; }
.confidence-badge .l { font-size: var(--t-xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .04em; }
/* How much the model itself trusts this diagnosis - not the triage/urgency
   color, a separate signal. Low confidence is flagged amber so a doctor
   knows at a glance to treat it as a starting point, not a conclusion. */
.confidence-badge.conf-high .n { color: var(--c-green); }
.confidence-badge.conf-medium .n { color: var(--c-blue); }
.confidence-badge.conf-low { background: var(--c-orange-bg); }
.confidence-badge.conf-low .n { color: var(--c-orange); }
.confidence-badge.conf-low .l { color: var(--c-orange); }

.clinical-quote {
  background: var(--c-surface-2); border-left: 3px solid var(--c-brand);
  padding: var(--s-3) var(--s-4); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); color: var(--c-ink-2); margin: var(--s-2) 0 0 !important;
}

.flag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* A positive red flag is the most safety-critical line on this card - it
   gets its own bordered callout, not the same quiet treatment as "Key
   findings" below it. Empty (no flags) stays plain, nothing to elevate. */
.red-flag-section.has-flags {
  background: var(--c-red-bg); border: 1px solid var(--c-red); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-2);
}
.red-flag-section.has-flags h4 { color: var(--c-red) !important; margin-top: 0 !important; }

.assessment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-2); }
@media (max-width: 640px) { .assessment-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.diff-list { display: flex; flex-direction: column; gap: var(--s-3); }
.diff-card { background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.diff-top { display: flex; justify-content: space-between; font-size: var(--t-sm); font-weight: 600; }
.diff-bar { height: 4px; border-radius: 2px; background: var(--c-line-soft); margin: 6px 0; overflow: hidden; }
.diff-bar span { display: block; height: 100%; background: var(--c-ink-3); }
.diff-card p { margin: 0; }

.action-callout {
  margin-top: var(--s-4); background: var(--c-brand-soft); border: 1px solid var(--c-brand);
  border-radius: var(--r-md); padding: var(--s-4);
}
.action-callout h4 { color: var(--c-brand-dark) !important; margin-top: 0 !important; }
.action-callout p { font-weight: 600; color: var(--c-brand-dark); }