:root {
  color-scheme: light;
  --ink: #19202a;
  --muted: #697586;
  --line: #e5e9ef;
  --surface: #ffffff;
  --canvas: #f4f6f8;
  --gangnam: #13a06f;
  --tribeau: #6d55d9;
  --patient: #0c7c66;
  --assistant: #3567cc;
  --operation: #b76a16;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.signed-in-email { color: var(--muted); font-size: 11px; }
.text-button { border: 0; background: transparent; color: #526177; font-size: 12px; }
.topbar { min-height: 78px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { margin: 0 0 3px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 23px; }
h1 span { color: var(--muted); font-size: 15px; font-weight: 600; }
.icon-button, .subtle-button, .back-button { border: 1px solid var(--line); border-radius: 10px; background: white; padding: 10px 13px; color: #435064; }
.runtime-banner { min-height: 42px; padding: 9px 24px; color: #7a2e2e; background: #fff0f0; border-bottom: 1px solid #f1caca; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; }
.collection-summary { flex-basis: 100%; color: #5e6674; line-height: 1.5; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #d84949; box-shadow: 0 0 0 4px #ffdada; }
.extraction-health { margin-left: auto; padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,.7); font-weight: 750; }
.extraction-health[data-status="ok"] { color: #08704d; background: #e8f7f0; }
.extraction-health[data-status="partial"] { color: #935512; background: #fff0d7; }
.extraction-health[data-status="rejected"] { color: #a12c35; background: #ffe4e6; }
.layout { height: calc(100vh - 120px); display: grid; grid-template-columns: minmax(290px, 390px) minmax(0, 1fr); }
.inbox { background: var(--surface); border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.inbox-head { padding: 20px 20px 12px; display: flex; justify-content: space-between; align-items: center; }
.inbox-head h2 { margin: 0; font-size: 20px; }
.count { background: #1d2939; color: white; min-width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-weight: 700; }
.filters { padding: 0 16px 14px; display: flex; gap: 7px; }
.filter { border: 1px solid var(--line); background: white; color: #586579; border-radius: 18px; padding: 7px 12px; }
.filter.active { color: white; background: #1d2939; border-color: #1d2939; }
.filter.gangnam.active { background: var(--gangnam); border-color: var(--gangnam); }
.filter.tribeau.active { background: var(--tribeau); border-color: var(--tribeau); }
.conversation-list { overflow-y: auto; padding: 0 10px 20px; }
.conversation { position: relative; width: 100%; min-height: 102px; margin-bottom: 7px; padding: 14px 46px 14px 16px; text-align: left; border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: 13px; background: white; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; }
.conversation.gangnam { border-left-color: var(--gangnam); }
.conversation.tribeau { border-left-color: var(--tribeau); }
.conversation.selected { background: #f5f8ff; border-color: #a8bde8; }
.conversation-source { color: var(--muted); font-size: 11px; font-weight: 700; }
.conversation-title { grid-column: 1; font-size: 16px; font-weight: 750; }
.conversation-time { grid-column: 2; grid-row: 1 / 3; color: var(--muted); font-size: 11px; }
.conversation-preview { grid-column: 1 / 3; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.unread { position: absolute; right: 12px; bottom: 12px; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 12px; color: white; background: #e34852; display: grid; place-items: center; font-size: 12px; font-weight: 750; }
.handled-tag { position: absolute; right: 12px; bottom: 12px; color: #657184; font-size: 11px; }
.empty-list, .empty-state { padding: 40px 20px; color: var(--muted); text-align: center; }
.detail { overflow-y: auto; background: #f8fafc; }
.detail-head { position: sticky; top: 0; z-index: 5; padding: 18px 24px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
.detail-head h2 { margin: 3px 0; font-size: 23px; }
.detail-head p { margin: 0; color: var(--muted); font-size: 12px; }
.source-chip { width: fit-content; padding: 4px 9px; border-radius: 5px; color: white; font-size: 11px; font-weight: 800; }
.source-chip.gangnam { background: var(--gangnam); }
.source-chip.tribeau { background: var(--tribeau); }
.handled-button { margin-left: auto; padding: 10px 14px; border: 1px solid #a6d9c1; border-radius: 10px; color: #08704d; background: #effaf5; font-weight: 700; }
.back-button { display: none; }
.information-grid { padding: 18px 24px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.application-card, .link-card { border-radius: 15px; padding: 18px; }
.application-card { background: #fff8e8; border: 1px solid #edd69e; }
.link-card { background: white; border: 1px solid var(--line); }
.card-label { margin-bottom: 13px; color: #7f6530; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.link-card .card-label { color: var(--muted); }
.info-row { padding: 8px 0; border-top: 1px solid rgba(128, 97, 35, .14); display: grid; grid-template-columns: 100px 1fr; gap: 12px; }
.info-row span { color: #7f7155; font-size: 12px; }
.info-row strong { font-size: 14px; }
.link-card a, .patient-link a { color: #225dc2; font-weight: 700; text-decoration: none; }
.patient-link { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.match { width: fit-content; border-radius: 6px; padding: 5px 8px; font-size: 12px; font-weight: 800; }
.match.good { color: #08704d; background: #eaf8f2; }
.match.warning { color: #9a5b10; background: #fff1db; }
.timeline { max-width: 900px; margin: 0 auto; padding: 20px 24px 340px; display: flex; flex-direction: column; gap: 13px; }
.message { max-width: 76%; padding: 11px 13px; border-radius: 15px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.message.customer { align-self: flex-start; background: white; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.message.clinic { align-self: flex-end; background: #eaf4ff; border: 1px solid #bfd9f5; border-bottom-right-radius: 4px; }
.message.system { align-self: center; max-width: 90%; background: #f0f2f5; color: #596579; }
.message span, .message time { color: var(--muted); font-size: 10px; font-weight: 700; }
.message p { margin: 5px 0 7px; white-space: pre-wrap; line-height: 1.65; }
.message time { display: block; text-align: right; }
.composer { position: fixed; z-index: 10; left: max(390px, calc((100vw - 0px) * 0 + 390px)); right: 0; bottom: 0; background: white; border-top: 1px solid var(--line); box-shadow: 0 -12px 30px rgba(15, 23, 42, .08); }
.composer-tabs { padding: 10px 18px 0; display: flex; gap: 7px; }
.composer-tab { border: 1px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; padding: 9px 12px; color: var(--muted); background: #f7f8fa; font-weight: 750; }
.composer-tab.patient.active { color: white; background: var(--patient); border-color: var(--patient); }
.composer-tab.assistant.active { color: white; background: var(--assistant); border-color: var(--assistant); }
.composer-tab.operation.active { color: white; background: var(--operation); border-color: var(--operation); }
.composer-pane { display: none; padding: 14px 18px 18px; }
.composer-pane.active { display: block; }
.composer-pane label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 750; }
textarea { width: 100%; resize: vertical; border: 1px solid #cfd6e1; border-radius: 10px; padding: 11px; line-height: 1.55; }
.composer-footer { margin-top: 8px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.locked-note { color: #a43c3c; font-size: 12px; }
.send-button, .assistant-button, .operation-button { border: 0; border-radius: 9px; padding: 11px 15px; color: white; font-weight: 800; }
.send-button { background: var(--patient); }
.assistant-button { margin-top: 8px; background: var(--assistant); }
.operation-button { margin-top: 8px; background: var(--operation); }
button:disabled { cursor: not-allowed; opacity: .55; }
.operation-warning { margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; color: #854d0e; background: #fff1d8; font-weight: 800; }
.muted { color: var(--muted); }
.login-screen { position: fixed; z-index: 100; inset: 0; background: linear-gradient(145deg, #edf3f1, #f6f3ec); display: grid; place-items: center; padding: 20px; }
.login-screen[hidden] { display: none; }
.login-card { width: min(100%, 420px); padding: 34px; border: 1px solid rgba(110, 124, 144, .2); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 22px 70px rgba(42, 53, 69, .15); }
.login-mark { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 15px; color: white; background: #1c806b; display: grid; place-items: center; font-size: 22px; font-weight: 850; }
.login-card h2 { margin-bottom: 8px; font-size: 25px; }
.login-description { margin-bottom: 22px; color: var(--muted); line-height: 1.65; font-size: 13px; }
.login-card label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 750; }
.login-card input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #cbd3df; border-radius: 10px; font: inherit; }
.login-button { width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 10px; color: white; background: #1c806b; font-weight: 800; }
.login-message { margin: 14px 0 0; color: #59677a; font-size: 12px; line-height: 1.6; }
.development-login-link { display: block; margin-top: 12px; padding: 11px; border: 1px solid #9dbdd1; border-radius: 9px; color: #245f82; background: #eff8fd; text-align: center; font-size: 13px; font-weight: 800; text-decoration: none; }
.development-login-link[hidden] { display: none; }
.auth-pending .topbar, .auth-pending .runtime-banner, .auth-pending .layout { visibility: hidden; }
.replacement-dialog { width: min(92vw, 760px); max-height: 88vh; padding: 0; border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 28px 90px rgba(15, 23, 42, .25); }
.replacement-dialog::backdrop { background: rgba(16, 24, 40, .48); backdrop-filter: blur(3px); }
.replacement-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.replacement-head h2 { margin-bottom: 0; }
.dialog-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: #596579; background: white; font-size: 22px; }
.replacement-lead { margin: 0; padding: 18px 24px 0; color: var(--muted); line-height: 1.7; }
.replacement-state { margin: 16px 24px; padding: 13px 14px; border-radius: 10px; color: #405069; background: #eef2f6; font-weight: 750; }
.replacement-state.ready { color: #08704d; background: #e8f7f0; }
.replacement-state.attention { color: #8a4b0f; background: #fff0d7; }
.replacement-columns { padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.replacement-columns section { padding: 15px; border: 1px solid #bde2d3; border-radius: 12px; background: #f1faf6; }
.replacement-columns section.excluded { border-color: #efd4aa; background: #fff8ec; }
.replacement-columns h3 { margin: 0 0 9px; font-size: 14px; }
.replacement-columns ul { margin: 0; padding-left: 20px; color: #536176; font-size: 12px; line-height: 1.75; }
.replacement-steps { margin: 18px 24px; padding: 0 0 0 28px; counter-reset: replacement-step; }
.replacement-steps li { margin: 8px 0; padding-left: 5px; line-height: 1.55; font-size: 13px; }
.replacement-note { margin: 0 24px 24px; padding: 12px; border: 1px solid #f1caca; border-radius: 10px; color: #8b3434; background: #fff3f3; font-size: 12px; font-weight: 700; line-height: 1.6; }

@media (max-width: 760px) {
  .topbar { min-height: 66px; padding: 10px 14px; }
  h1 { font-size: 18px; }
  h1 span { display: block; font-size: 11px; }
  .signed-in-email { display: none; }
  .text-button { display: none; }
  .runtime-banner { padding: 8px 14px; }
  .layout { height: calc(100vh - 108px); display: block; }
  .inbox { height: 100%; border-right: 0; }
  .detail { position: fixed; z-index: 20; inset: 0; transform: translateX(100%); transition: transform .2s ease; }
  .detail.open { transform: translateX(0); }
  .detail-head { padding: 12px; }
  .detail-head h2 { font-size: 19px; }
  .back-button { display: block; padding: 8px; }
  .handled-button { padding: 8px 9px; font-size: 11px; }
  .information-grid { padding: 12px; grid-template-columns: 1fr; }
  .timeline { padding: 12px 12px 350px; }
  .message { max-width: 88%; }
  .composer { left: 0; }
  .composer-tabs { overflow-x: auto; padding-left: 10px; }
  .composer-tab { flex: 0 0 auto; font-size: 12px; }
  .composer-pane { padding: 12px; }
  .login-card { padding: 26px 22px; }
  .top-actions { gap: 5px; }
  .top-actions .icon-button { padding: 8px 9px; font-size: 11px; }
  .replacement-dialog { width: 95vw; }
  .replacement-head { padding: 18px; }
  .replacement-lead { padding: 14px 18px 0; }
  .replacement-state { margin: 14px 18px; }
  .replacement-columns { padding: 0 18px; grid-template-columns: 1fr; }
  .replacement-steps { margin: 16px 18px; }
  .replacement-note { margin: 0 18px 18px; }
}