:root { font-family: system-ui, sans-serif; color: #183b3a; background: #f3f7f6; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 22px max(24px, calc((100vw - 900px) / 2)); background: white; border-bottom: 1px solid #dce7e4; gap: 20px; }
header strong { font-size: 1.4rem; }
a { color: #23665f; }
main { max-width: 700px; margin: 54px auto; padding: 0 24px; }
h1 { font-size: 1.8rem; font-weight: 600; }
article { background: white; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px #183b3a0d; max-width: 380px; margin: 30px auto; }
article img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
article div { padding: 10px 24px 20px; }
h2 { margin-bottom: 8px; }
article p { color: #53706c; }
.notice { text-align: center; line-height: 1.6; color: #53706c; }
.workspace { max-width: 1050px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 36px; align-items: start; }
.notebook { background: white; border: 1px solid #dce7e4; border-radius: 16px; padding: 22px; }
.notebook h2 { margin-top: 0; }
.notebook section { border-top: 1px solid #e7eeec; padding-top: 10px; }
.empty, .result-status { color: #53706c; font-size: .9rem; }
.notebook img { max-width: 100%; border-radius: 8px; }
@media (max-width: 760px) { .workspace { grid-template-columns: 1fr; margin-top: 24px; } }
[hidden] { display: none !important; }
nav { display: flex; align-items: center; gap: 18px; }
button { font: inherit; border: 1px solid #bed0cb; padding: 10px 15px; border-radius: 9px; background: #fff; color: #183b3a; cursor: pointer; }
button:hover { background: #edf5f2; }
button:disabled { opacity: .55; cursor: wait; }
.case-card { padding: 24px; background: white; border: 1px solid #dce7e4; border-radius: 16px; }
.case-card button { margin: 8px 10px 0 0; }
.patient-heading { display: flex; align-items: center; gap: 20px; margin: 22px 0; }
.patient-heading img { width: 100px; height: 100px; border-radius: 14px; object-fit: cover; }
.patient-heading h1 { margin: 0 0 8px; }
.patient-heading p { margin: 0; }
.muted, .prototype-note { color: #53706c; font-size: .9rem; }
.prototype-note { line-height: 1.5; }
#conversation { max-height: 52vh; min-height: 90px; overflow-y: auto; padding: 8px 4px; }
.message { padding: 14px 18px; border-radius: 12px; background: white; margin: 12px 0; white-space: pre-wrap; }
.message p { margin-bottom: 0; line-height: 1.5; }
.message.student { background: #e1eeea; margin-left: 24px; }
.message.result { border-left: 3px solid #397d70; }
.message.system { font-size: .9rem; }
textarea { box-sizing: border-box; width: 100%; margin: 8px 0; padding: 14px; font: inherit; border: 1px solid #bed0cb; border-radius: 10px; resize: vertical; }
.send-row { display: flex; align-items: center; justify-content: space-between; }
#send { background: #23665f; color: white; }
#chat-error { color: #923f30; }
details { background: white; border-radius: 10px; padding: 16px; margin: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }