@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@400;500;600;700&display=swap");
:root { --bg:#f5f6f8; --panel:#fff; --ink:#1c2330; --muted:#667085; --line:#e3e6ec; --accent:#0a8fb0; --accent-ink:#fff; --navy:#071823; --navy2:#0c2433; --cyan:#08c8ee; --good:#1b7f4b; --bad:#b42318; --warn:#9a6700; --chip:#eef1f6; --me:#dcf8c6; --bot:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1218; --panel:#171b23; --ink:#e6e9ef; --muted:#97a0b0; --line:#2a303b; --accent:#3fd0f0; --accent-ink:#031018; --navy:#04090e; --navy2:#081620; --good:#4cc38a; --bad:#ff8a80; --warn:#e3b341; --chip:#232a36; --me:#1f3d2e; --bot:#202632; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased; }
header { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.brand { display:flex; flex-direction:column; line-height:1.15; } .brand span,.muted { color:var(--muted); } .small { font-size:12px; } .right-hd { margin-left:auto; display:flex; gap:8px; align-items:center; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; } .tabs button { background:transparent; border:1px solid transparent; color:var(--muted); } .tabs button.on { background:var(--chip); color:var(--ink); border-color:var(--line); font-weight:600; } .tabs.small button { padding:3px 8px; font-size:12px; }
button { font:inherit; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; } button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
input,textarea,select { font:inherit; padding:7px 9px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); width:100%; } select { width:auto; } textarea { min-height:70px; resize:vertical; }
label { display:flex; flex-direction:column; gap:3px; margin:8px 0; font-size:12px; color:var(--muted); } label.chk { flex-direction:row; align-items:center; margin:0; } label.chk input { width:auto; }
main { padding:12px 16px; max-width:1500px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0; }
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; } .login .card { width:100%; max-width:380px; }
.err { color:var(--bad); margin:8px 0; } .warn { color:var(--warn); } .bad { color:var(--bad); } .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; } .row input { flex:1; } .center { text-align:center; padding:20px; } .pad { padding:16px; }
.split { display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:12px; align-items:start; } @media (max-width:800px) { .split { grid-template-columns:1fr; } }
.left { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; max-height:calc(100vh - 90px); overflow-y:auto; } .right { min-width:0; }
.bar { display:flex; gap:8px; align-items:center; padding:8px; border-bottom:1px solid var(--line); flex-wrap:wrap; position:sticky; top:0; background:var(--panel); z-index:2; }
.trow { padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; } .trow:hover { background:var(--chip); } .trow.sel { background:var(--chip); box-shadow:inset 3px 0 var(--accent); } .trow.late { box-shadow:inset 3px 0 var(--bad); }
.trow-top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .right { } .trow-top .right { margin-left:auto; } .trow-sum { margin:2px 0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pri { font-size:11px; padding:1px 7px; border-radius:99px; background:var(--chip); } .pri.urgent { background:var(--bad); color:#fff; } .pri.high { background:var(--warn); color:#fff; }
.q { font-size:11px; color:var(--muted); } .q.urgent { color:var(--bad); font-weight:700; } .urgent-bar { background:var(--bad); color:#fff; padding:6px 12px; font-weight:600; }
.detail { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; } .dh { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; } .dh h3 { margin:0; } .sum { font-size:15px; }
.form h4,.detail h4 { margin:6px 0; } .conv { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px; }
.cm { max-width:85%; padding:6px 10px; border-radius:10px; white-space:pre-wrap; } .cm.patient { align-self:flex-start; background:var(--chip); } .cm.bot { align-self:flex-end; background:var(--me); }
.hist div { padding:2px 0; } table { border-collapse:collapse; width:100%; background:var(--panel); } th,td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { font-size:12px; color:var(--muted); }
.stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .stat { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 20px; display:flex; flex-direction:column; min-width:120px; } .stat b { font-size:26px; } .stat span { color:var(--muted); }
.chips { display:flex; gap:6px; flex-wrap:wrap; } .chip { background:var(--chip); padding:3px 10px; border-radius:99px; } .wrap { flex-wrap:wrap; } .row.wrap input { flex:0 1 180px; }
/* chat page */
.chat { max-width:520px; margin:0 auto; height:100vh; display:flex; flex-direction:column; background:var(--bg); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.chat-hd { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line); } .chat.wa .chat-hd { background:#075e54; color:#fff; } .chat.wa .chat-hd button { background:transparent; color:#fff; border-color:#ffffff66; }
.chat-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; } .bub { max-width:82%; padding:8px 11px; border-radius:12px; white-space:pre-wrap; box-shadow:0 1px 1px #0001; } .bub.me { align-self:flex-end; background:var(--me); } .bub.bot { align-self:flex-start; background:var(--bot); }
.bub .file { display:block; margin-top:6px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--accent); font-weight:600; background:var(--panel); }
.chat-in { display:flex; gap:8px; padding:10px; background:var(--panel); border-top:1px solid var(--line); align-items:flex-end; flex-wrap:wrap; } .chat.mail .chat-in input,.chat.mail .chat-in textarea { flex:1 1 100%; } .chat.wa .chat-in input { flex:1; }
.flash { background:var(--good); color:#fff; padding:8px 12px; font-weight:600; } .flash.bad { background:var(--warn); }
.cm.staff { align-self:flex-end; background:var(--chip); } .bub.staff { background:var(--chip); } .settings { max-width:760px; }
/* calendar, patients, notices */
.good { color:var(--good); } button.danger { background:var(--bad); color:#fff; border-color:var(--bad); } .btnlink { padding:6px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink); background:var(--panel); }
.row .right { margin-left:auto; } hr { border:0; border-top:1px solid var(--line); margin:12px 0; }
.calwrap { display:flex; gap:12px; align-items:flex-start; } .calmain { flex:1; min-width:0; overflow-x:auto; } .calside { width:290px; flex:none; display:flex; flex-direction:column; gap:6px; margin:0; position:sticky; top:70px; }
@media (max-width:900px) { .calwrap { flex-direction:column; } .calside { width:100%; position:static; } }
.week { display:grid; grid-template-columns:44px repeat(7,minmax(150px,1fr)); min-width:1100px; } .timecol div { text-align:right; padding-right:6px; transform:translateY(-8px); }
.daycol { border-left:1px solid var(--line); } .dayhd { height:28px; text-align:center; font-weight:600; border-bottom:1px solid var(--line); line-height:28px; background:var(--panel); } .daycol.today .dayhd { background:var(--accent); color:var(--accent-ink); }
.daybody { position:relative; } .hl { position:absolute; left:0; right:0; border-top:1px solid var(--line); opacity:.6; }
.appt { position:absolute; left:2px; right:2px; background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:6px; padding:2px 6px; overflow:hidden; cursor:pointer; font-size:12px; line-height:1.25; box-shadow:0 1px 2px #0002; }
.appt.req { border-style:dashed; border-left-style:solid; background:repeating-linear-gradient(135deg,var(--panel),var(--panel) 6px,var(--chip) 6px,var(--chip) 12px); } .appt.on { outline:2px solid var(--accent); z-index:3; }
.ooo-shade { position:absolute; inset:0; background:repeating-linear-gradient(45deg,#8883,#8883 8px,transparent 8px,transparent 16px); display:flex; align-items:flex-start; justify-content:center; pointer-events:none; } .ooo-shade span { background:var(--panel); font-size:11px; padding:1px 6px; margin-top:4px; border-radius:6px; border:1px solid var(--line); }
.agrow { padding:5px 0; cursor:pointer; border-bottom:1px solid var(--line); } .agrow:hover { background:var(--chip); } .agrow.req { font-style:italic; }

.hd-btns { display:flex; gap:6px; align-items:center; } .hd-btns button { white-space:nowrap; } .chat-hd .small { max-width:150px; } .hd-icon { width:32px; height:32px; padding:0; font-size:18px; line-height:1; }
.row.wrap label input,.row.wrap label select,.row.wrap label textarea,.row label input,.row label select,.row label textarea { flex:none; }

/* staff portal shell */
.wm { display:inline-flex; flex-direction:column; line-height:1; font:800 22px "Barlow Condensed",sans-serif; letter-spacing:.16em; white-space:nowrap; } .wm b { color:var(--cyan); } .wm small { font:700 8px Inter,sans-serif; letter-spacing:.5em; margin-top:5px; opacity:.7; }
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side { background:linear-gradient(180deg,var(--navy),var(--navy2)); color:#dbe8f1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:20px 12px 14px; }
.side-top { padding:0 10px 18px; border-bottom:1px solid #ffffff1a; color:#fff; } .prac { margin-top:14px; font-weight:600; font-size:13px; color:#a9bccb; }
.nav { display:flex; flex-direction:column; gap:2px; padding:14px 0; overflow-y:auto; flex:1; }
.nav button { display:flex; align-items:center; gap:12px; text-align:left; background:transparent; border:0; color:#b4c6d4; padding:9px 12px; border-radius:10px; font-weight:500; }
.nav button:hover { background:#ffffff12; color:#fff; } .nav button.on { background:#08c8ee26; color:#fff; box-shadow:inset 3px 0 var(--cyan); font-weight:600; }
.ico { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .nav button.on .ico { stroke:var(--cyan); }
.side-bot { border-top:1px solid #ffffff1a; padding:14px 6px 0; } .who { display:flex; gap:10px; align-items:center; margin-bottom:12px; } .who b { display:block; color:#fff; font-size:13px; line-height:1.2; } .who span { font-size:12px; color:#a9bccb; text-transform:capitalize; }
.av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--accent)); color:#031018; font-weight:800; display:grid; place-items:center; }
.side-btns { display:flex; gap:8px; } .side-btns button { flex:1; background:#ffffff12; border:1px solid #ffffff22; color:#e6eef5; font-size:12px; padding:6px 8px; } .side-btns button:hover { background:#ffffff22; }
.content { min-width:0; display:flex; flex-direction:column; }
.topbar { padding:22px 28px 6px; } .topbar h1 { margin:0; font:700 24px Inter,sans-serif; letter-spacing:-.02em; }
.shell main { padding:12px 28px 40px; max-width:1500px; width:100%; margin:0; }
.shell .flash { margin:10px 28px 0; border-radius:12px; padding:10px 14px; } .shell .flash button { background:#fff; color:#4a3500; border:0; font-weight:600; }
.shell .card, .shell .detail, .shell .left, .shell .stat { box-shadow:0 1px 2px rgba(11,27,43,.04); border-radius:14px; }
.shell th { text-transform:uppercase; letter-spacing:.06em; font-size:11px; } .shell table { border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.shell h4 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:22px 0 6px; }
.shell .stat b { font-size:30px; letter-spacing:-.02em; }
button.primary:hover { filter:brightness(.94); } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #08c8ee88; outline-offset:1px; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); }
@media (max-width:860px) {
  .shell { grid-template-columns:1fr; } .side { position:static; height:auto; padding:12px; }
  .side-top { border:0; padding-bottom:8px; display:flex; justify-content:space-between; align-items:center; } .prac { margin:0; }
  .nav { flex-direction:row; overflow-x:auto; padding:8px 0; } .nav button { white-space:nowrap; padding:8px 12px; } .nav button.on { box-shadow:inset 0 -3px var(--cyan); }
  .side-bot { display:flex; justify-content:space-between; align-items:center; padding-top:10px; } .who { margin:0; } .side-btns button { flex:none; }
  .topbar { padding:16px 16px 4px; } .shell main { padding:10px 16px 30px; } .shell .flash { margin:10px 16px 0; }
}
/* sign in */
.login-split { display:grid; grid-template-columns:1.1fr 1fr; min-height:100vh; }
.login-brand { background:radial-gradient(700px 400px at 20% 10%,#0c3a4d,transparent 70%),linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.login-brand .wm { font-size:34px; margin-bottom:28px; } .login-brand h1 { font:800 clamp(1.8rem,3.2vw,2.6rem)/1.1 Inter,sans-serif; letter-spacing:-.03em; margin:0; max-width:520px; } .login-brand p { color:#a9bccb; font-size:16px; max-width:440px; margin:8px 0 0; }
.login-split .login { min-height:0; } .login-split .card { padding:30px; border-radius:18px; box-shadow:0 12px 40px rgba(11,27,43,.1); } .login-split .card h2 { margin:0 0 4px; font-size:22px; letter-spacing:-.02em; }
.login-split input { padding:11px 12px; font-size:15px; } button.wide { width:100%; padding:11px; font-size:15px; margin-top:6px; border-radius:10px; }
@media (max-width:820px) { .login-split { grid-template-columns:1fr; } .login-brand { padding:28px 20px; } .login-brand .wm { margin-bottom:14px; } .login-brand h1 { font-size:1.5rem; } }
.wm span { white-space:nowrap; }
.shell .flash.bad { background:#fff4d6; color:#6b4a00; border:1px solid #f0d58a; font-weight:500; } .shell .flash.bad button { background:#6b4a00; color:#fff; }
@media (prefers-color-scheme: dark) { .shell .flash.bad { background:#33280a; color:#f3d98a; border-color:#5a4511; } .shell .flash.bad button { background:#f3d98a; color:#33280a; } }

.docgrid { display:grid; grid-template-columns:minmax(320px,520px) 1fr; gap:18px; align-items:start; } .docprev { position:sticky; top:12px; } .docprev iframe { width:100%; height:calc(100vh - 80px); min-height:520px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.docform .row input[type=text], .docform .row input:not([type]) { flex:1; } .docs .tabs.small { margin-left:8px; }
@media (max-width:1000px) { .docgrid { grid-template-columns:1fr; } .docprev { position:static; } }
.medtable{display:flex;flex-direction:column;gap:10px;margin:6px 0 10px}
.medrow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:10px;border:1px solid var(--line,#d8dee6);border-radius:8px;background:#fafbfc}
.medrow label{flex:1 1 110px;min-width:90px}.medrow label.wide{flex:2 1 200px}.medrow .medno{font-weight:700;width:22px;align-self:center}
.secrow{align-items:center;padding:4px 0;border-bottom:1px solid #eef1f4}.secrow.open{background:#f5f8fb}
.secpanel{padding:10px 8px 14px 28px;border-bottom:1px solid #eef1f4;display:flex;flex-direction:column;gap:8px}
.linkish{background:none;border:0;padding:6px 4px;font-weight:600;cursor:pointer}
.chat-body.consent{padding:18px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.chat-body.consent p{margin:0;line-height:1.5}
.chat-body.consent .chk{display:flex;gap:8px;align-items:flex-start;font-weight:600}

/* ---- tap-to-answer buttons in the chat: large, clear, easy for everyone ---- */
.bub { font-size:16px; line-height:1.5; }
.quick { display:flex; flex-direction:column; gap:8px; align-self:stretch; padding:2px 0 6px; }
.qbtn { min-height:48px; padding:10px 14px; font-size:16px; font-weight:600; line-height:1.3; text-align:left; border-radius:12px; border:2px solid var(--accent); background:var(--panel); color:var(--accent); cursor:pointer; display:flex; align-items:center; gap:10px; }
.qbtn.primary { background:var(--accent); color:var(--accent-ink); justify-content:center; text-align:center; }
.qbtn.secondary { border-color:var(--line); color:var(--ink); font-weight:500; justify-content:center; }
.qbtn.quiet { border:0; background:transparent; color:var(--muted,#667); font-weight:500; text-decoration:underline; min-height:40px; justify-content:center; }
.qbtn:hover:not(:disabled) { filter:brightness(.96); } .qbtn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .qbtn:disabled { opacity:.5; cursor:default; }
.qbtn.choice .tick { width:24px; height:24px; border:2px solid var(--accent); border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; font-size:16px; }
.qbtn.choice.on { background:var(--chip); } .qbtn.choice.on .tick { background:var(--accent); color:#fff; }

.allergy{border:2px solid #e0a800;background:#fff8e1;color:#5b4300;border-radius:10px;padding:10px 12px;font-size:15px;margin:6px 0}
.allergy.none{border-color:var(--line,#d6dde3);background:var(--card,#f5f7f9);color:inherit}
.allergy.hit{border-color:#c62828;background:#fdecea;color:#7a1010;font-weight:600}

/* number of users stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line,#d6dee6);border-radius:999px;background:var(--card,#fff);overflow:hidden}
.stepper button{width:44px;height:44px;border:0;background:transparent;font-size:1.35rem;line-height:1;cursor:pointer;color:var(--accent,#0a8fb0)}
.stepper button:hover:not(:disabled){background:var(--accent-soft,#e3f6fb)}.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:54px;text-align:center;font-weight:700;font-size:1.2rem}
.usersbox{margin:14px 0;padding:14px;border:1px solid var(--line,#d6dee6);border-radius:14px}
.usersbox .quote{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}