/* ACTYMED Inbox — the brand's own colours, from actymed.health and the logo:
   pink (#ea1368, "ACTY"), charcoal (#3a3a3c, "MED") and blush backgrounds.
   Pink means "do this / look here" (buttons, active tab, badges, links);
   charcoal is structure (bars, text, selected states).
   Status colours keep their meaning and never borrow the brand's:
   green = healthy window, amber = closing / needs agent, red = expired. */

:root {
  --bg:        #fbf4f8;   /* brand blush */
  --surface:   #ffffff;
  --ink:       #26262a;   /* charcoal text */
  --ink-soft:  #5f5a5d;
  --line:      #ece3e9;   /* brand border */
  /* Brand pink, a shade deeper than the site's #ea1368 so white text on it
     clears 4.5:1 (5.04 here, 4.38 at #ea1368). */
  --accent:    #d8115f;
  --primary:   #d8115f;   /* main action buttons */
  --primary-dark: #b80e52; /* hover / pressed — the site's own dark pink */
  --bar:       #3a3a3c;   /* the logo's charcoal, for app bars */
  --bot:       #f1eced;   /* bot bubbles: warm grey */
  --agent:     #fbe3ee;   /* staff bubbles: pink tint */
  --patient:   #ffffff;
  --ok:        #14855a;
  --warn:      #b97b00;
  /* Darker brick than before so it does not blur into the pink at a glance;
     it always comes with a word (EXPIRED, Delete, blocked). */
  --danger:    #9b1c1c;
  --font-ui:   "IBM Plex Sans", "Noto Sans Malayalam", system-ui, sans-serif;
  --font-disp: "Bricolage Grotesque", var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
/* The hidden attribute must always win. Without this, any element we give an
   explicit `display` to (e.g. #app-menu) can never be hidden from JS. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* Everything below is sized in rem, so this one value scales the whole UI.
   17px reads comfortably on a phone held at arm's length; the old 15px did not. */
html { font-size: 17px; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
}

#app { display: flex; height: 100dvh; overflow: hidden; }

/* ---------- Panes ---------- */
#list-pane {
  width: 340px; min-width: 280px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column;
}
#thread-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#thread { display: flex; flex-direction: column; height: 100%; }
#thread-placeholder {
  margin: auto; color: var(--ink-soft); font-family: var(--font-disp); font-size: 1.1rem;
}

.pane-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}
.pane-head h1 {
  font-family: var(--font-disp); font-size: 1.15rem; margin: 0; letter-spacing: .01em;
}
.pane-head h1 span { color: var(--accent); font-weight: 500; }
.me { margin-left: auto; display: flex; gap: .6rem; align-items: center; color: var(--ink-soft); font-size: .85rem; }
.me a { text-decoration: none; color: var(--danger); font-size: 1.1rem; }

/* ---------- WhatsApp-familiar app bar ---------- */
.app-bar {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bar); color: #fff;
  padding: .7rem .9rem; position: relative;
}
.app-bar h1 {
  font-family: var(--font-disp); font-size: 1.3rem; margin: 0; font-weight: 600;
}
/* The wordmark as the logo draws it: ACTY white on a pink block, MED white on
   charcoal. Large bold type, so the site's exact #ea1368 is fine here
   (4.38:1 against the 3:1 large-text bar). */
.wordmark { display: inline-flex; align-items: stretch; letter-spacing: .02em; line-height: 1; }
.wordmark .wm-acty, .wordmark .wm-med { padding: .28rem .4rem .3rem; color: #fff; }
.wordmark .wm-acty { background: #ea1368; border-radius: 4px 0 0 4px; }
.wordmark .wm-med  { background: #3a3a3c; border-radius: 0 4px 4px 0; }
/* On the charcoal bar MED's own charcoal box is invisible, so its padding read
   as an empty gap after the pink block. Pull MED in to sit beside ACTY. */
.app-bar .wordmark .wm-acty { padding-right: .3rem; }
.app-bar .wordmark .wm-med  { padding-left: .12rem; }
.app-bar-actions { margin-left: auto; display: flex; gap: .1rem; }
.app-bar-actions button {
  background: none; border: 0; color: #fff; font-size: 1.25rem;
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.app-bar-actions button:hover { background: rgba(255,255,255,.15); }

/* Line icons drawn in the page's own colour, instead of emoji that every phone
   paints differently (the 🔍 came out blue and purple on the charcoal bar). */
.ic {
  width: 1.3rem; height: 1.3rem; display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
}
/* Search open: the button turns into a pink close button. */
#search-btn .ic-close { display: none; }
#search-btn[aria-expanded="true"],
#search-btn[aria-expanded="true"]:hover { background: var(--accent); }
#search-btn[aria-expanded="true"] .ic-search { display: none; }
#search-btn[aria-expanded="true"] .ic-close { display: block; }
#app-menu {
  position: absolute; right: .6rem; top: 100%; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16); min-width: 190px; padding: .3rem 0;
  display: flex; flex-direction: column;
}
#app-menu a {
  padding: .75rem 1rem; color: var(--ink); text-decoration: none; font-size: 1rem;
}
#app-menu a:hover { background: var(--bg); }
#app-menu .menu-who {
  padding: .55rem 1rem; font-size: .85rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); margin-bottom: .2rem;
}
#app-menu .menu-danger { color: var(--danger); }
#search-wrap { padding: .5rem .7rem; background: var(--surface); border-bottom: 1px solid var(--line); }
#search-input {
  width: 100%; border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem .9rem .5rem 2.4rem; font: inherit;
  /* the same magnifier, in the soft ink colour, inside the box */
  background: var(--bg) no-repeat .85rem center / 1.05rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a5d' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 20 20'/%3E%3C/svg%3E");
}
#search-input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Avatars */
.avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .02em;
}
#thread-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .75rem; }

/* ---------- Tabs ---------- */
#tabs {
  display: flex; gap: .1rem; padding: .3rem .4rem 0;
  border-bottom: 1px solid var(--line); background: var(--surface);
  overflow-x: auto;
}
.tab {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--ink-soft);
  padding: .45rem .6rem; border-bottom: 2px solid transparent;
  white-space: nowrap; display: flex; align-items: center; gap: .3rem;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-count:empty { display: none; }
.tab-count {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .68rem; padding: 0 .35rem; min-width: 1.1em; text-align: center;
}
#filter-wrap {
  display: flex; gap: .4rem; padding: .4rem .6rem;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
#filter-wrap select {
  flex: 1 1 0; min-width: 0; padding: .35rem .5rem;
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
.empty-list { padding: 1.2rem; color: var(--ink-soft); text-align: center; }

/* ---------- Reminders / daily tasks ---------- */
.task-group {
  padding: .5rem .9rem .25rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  background: var(--bg);
}
.task {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--line); cursor: pointer;
}
.task:hover { background: var(--bg); }
.task.overdue { border-left: 3px solid var(--danger); }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.task-when { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); }
.task.overdue .task-when { color: var(--danger); font-weight: 600; }
.task-who { font-weight: 600; font-size: 1rem; }
/* Show the whole reminder — cropping it to one line hid the useful part. */
.task-note {
  font-size: .9rem; color: var(--ink-soft);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
.task-src { font-size: .68rem; color: var(--ink-soft); font-style: italic; }
.task-done {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--ok); border-radius: 50%; width: 30px; height: 30px;
  font-size: .95rem; cursor: pointer; line-height: 1;
}
.task-done:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
#remind-btn { border-color: var(--accent); }
.task-assign { color: var(--accent); font-weight: 600; font-size: .8rem; margin-left: .35rem; }
.task-new { padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.task-new button {
  width: 100%; background: var(--primary); color: #fff; border: 0; border-radius: 8px;
  padding: .5rem; font: inherit; font-weight: 600; cursor: pointer;
}

/* ---------- Modal (reminder / task dialog) ---------- */
/* Overlay for every dialog. This was scoped to #remind-modal alone, so a second
   dialog rendered as a plain block inside the composer — visible enough to work
   on a desktop, clipped and unreachable on a phone. Add new dialog ids here. */
#remind-modal, #quick-modal, #pay-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(38, 38, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
#remind-modal[hidden], #quick-modal[hidden], #pay-modal[hidden] { display: none; }
.modal-card {
  background: var(--surface); border-radius: 12px; padding: 1.2rem;
  width: min(420px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: .7rem;
}
.modal-card h2 { font-family: var(--font-disp); font-size: 1.05rem; margin: 0; }
.modal-card label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .75rem; color: var(--ink-soft);
}
.modal-card input, .modal-card select, .modal-card textarea {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg);
}
.modal-for { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.modal-card .opt { text-transform: none; font-weight: 400; opacity: .8; }

/* Test-mode banner on the payment dialog. Loud on purpose: a test link behaves
   exactly like a real one right up to the point where no money has moved. */
.paywarn {
  margin: 0; padding: .4rem .6rem; border-radius: 8px;
  background: #fdf3e0; color: var(--warn);
  font-size: .78rem; font-weight: 600;
}

/* ---- Bottom navigation (shared with admin.css pages) ------------------- */
.tabnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabnav a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .45rem .2rem .4rem; text-decoration: none; color: var(--ink-soft);
  font-size: .68rem; min-height: 52px; position: relative;
}
/* Line icons (nav.php nav_icon), a touch lighter than the app-bar ones. */
.tabnav .ic-nav { width: 1.5rem; height: 1.5rem; stroke-width: 2; stroke-linejoin: round; }
.tabnav a.on { color: var(--accent); }
.tabnav a.on::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
}
.tabnav .badge {
  position: absolute; top: .25rem; left: 55%; background: var(--danger); color: #fff;
  border-radius: 999px; font-size: .62rem; padding: 0 .3rem; min-width: 1rem; text-align: center;
}
/* Mobile: a bottom bar, and only over the LIST — inside a chat the composer needs
   the room and the back arrow already gets you out.
   Desktop: a permanent left rail, same as the other pages. */
@media (max-width: 760px) {
  #list-pane #conv-list { padding-bottom: 56px; }
}
@media (min-width: 761px) {
  .inbox-nav {
    top: 0; right: auto; bottom: 0; width: 84px; flex-direction: column;
    border-top: 0; border-right: 1px solid var(--line); padding-top: 1rem;
  }
  .inbox-nav a { flex: 0 0 auto; padding: .8rem .2rem; font-size: .72rem; }
  .inbox-nav a.on::before {
    top: 22%; bottom: 22%; left: 0; right: auto; width: 2px; height: auto;
  }
  /* The rail is fixed, so the two panes start after it. */
  #app { padding-left: 84px; box-sizing: border-box; }
  #app-menu { right: .6rem; }
}

/* ---- Quoted replies ---- */
/* pan-y keeps the list scrolling vertically while we take the horizontal drag. */
.msg { touch-action: pan-y; transition: transform .18s ease; }
/* On a phone, holding a bubble opens the message menu, which has Copy text.
   Native text selection wants the same long press, and on iOS it takes the
   touch before the menu can open — so on touch screens it is off for bubbles,
   as in WhatsApp. A mouse can still select text as before. */
@media (hover: none) and (pointer: coarse) {
  .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.msg.will-reply { box-shadow: -3px 0 0 0 var(--accent); }
.msg.flash { animation: quoteflash 1.2s ease; }
@keyframes quoteflash {
  0%, 60% { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
  100%    { background-color: transparent; }
}
.quoted {
  display: block; border-left: 3px solid var(--accent); border-radius: 4px;
  background: rgb(0 0 0 / .05); padding: .25rem .45rem; margin: 0 0 .3rem;
  font-size: .82rem; line-height: 1.3; cursor: pointer;
}
.quoted b { display: block; color: var(--accent); font-size: .76rem; }
.quoted span { display: block; opacity: .8; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
#reply-bar {
  /* order:-1 puts it on its own line at the top of the wrapped composer,
     whatever its position in the markup. */
  order: -1;
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4rem .6rem; margin-bottom: .35rem;
  background: var(--bg); border-radius: 8px; font-size: .85rem;
}
#reply-bar .reply-mark { width: 3px; align-self: stretch; background: var(--accent);
                         border-radius: 2px; flex: none; }
#reply-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
#reply-cancel { background: none; border: 0; color: var(--ink-soft); cursor: pointer;
                font-size: 1rem; padding: .2rem .3rem; min-height: 0; }

/* What the patient has discussed, above the routing controls in a thread. */
.thread-tags { display: flex; flex-wrap: wrap; gap: .3rem; padding: .25rem .75rem .1rem; }
.ttag { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.ttag.condition { background: color-mix(in srgb, #c98a1a 20%, transparent); }
.ttag.treatment { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Quick replies picker.
   Block layout, not flex: as flex items the buttons shrank below their own
   content height once the list was taller than the container, and the text
   spilled out over the row below. Block children cannot be compressed. */
#quick-list { max-height: 46vh; overflow-y: auto; flex: 0 0 auto; }
.qr {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .7rem; margin: 0 0 .35rem; cursor: pointer; font: inherit;
  color: inherit; min-height: 0; line-height: 1.35;
}
.qr:last-child { margin-bottom: 0; }
.qr:hover { border-color: var(--accent); }
.qr b { display: block; font-size: .9rem; }
.qr span { display: block; font-size: .8rem; color: var(--ink-soft);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reminder "when": one-tap presets over native date/time pickers. */
.quickwhen { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.2rem 0 .1rem; }
.quickwhen .chip {
  font: inherit; font-size: .85rem; padding: .4rem .7rem; min-height: 38px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--accent); cursor: pointer;
}
.quickwhen .chip:active { background: var(--ink); color: #fff; border-color: var(--ink); }
.whenrow { display: flex; gap: .5rem; }
.whenrow label { flex: 1 1 0; min-width: 0; }
.whenread { margin: .1rem 0 .2rem; font-size: .85rem; color: var(--ink-soft); }
.whenread.warn { color: var(--danger); }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .3rem; }
.modal-actions button {
  font: inherit; border: 0; border-radius: 8px; padding: .5rem 1rem;
  background: var(--primary); color: #fff; cursor: pointer;
}
.modal-actions .ghost { background: none; color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------- Conversation list ---------- */
#conv-list { overflow-y: auto; flex: 1; }
/* Each clinic has its own colour, so a list of mixed branches sorts itself at a
   glance. The dot carries the colour; the name is a darker shade that stays
   readable (>= 4.5:1). Blue / violet / magenta stay apart for colour-blind staff
   and clear of the colours that already mean something here: brand pink,
   green (window open), amber (needs agent), red (expired), brown (ad
   campaign). Kottarakkara is the logo's charcoal — every hue left over
   (magenta, teal, olive) collided with one of those. A branch without a
   colour falls back to grey. */
.br-thodupuzha   { --br: #2a78d6; --br-ink: #1c5cab; }
.br-perumbavoor  { --br: #4a3aa7; --br-ink: #4a3aa7; }
.br-kottarakkara { --br: #3a3a3c; --br-ink: #3a3a3c; }
.branch-tag {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .72rem; font-weight: 600; padding: .08rem .45rem; border-radius: 4px;
  background: color-mix(in srgb, var(--br, var(--ink-soft)) 18%, #fff);
  color: var(--br-ink, var(--ink-soft));
}
.branch-tag::before {
  content: ''; flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--br, var(--ink-soft));
}
/* Which ad campaign brought this chat in — a burst of new leads then reads as
   one group instead of thirty strangers. Clamped: campaign names can be long. */
.camp-tag {
  font-size: .68rem; padding: .05rem .4rem; border-radius: 4px;
  background: color-mix(in srgb, #8a5a3d 14%, transparent); color: #8a5a3d;
  max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* WhatsApp-style chat rows: avatar · name/preview · time/badges */
.conv {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem .9rem; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.conv:hover, .conv.active { background: var(--bg); }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.conv-top { display: flex; align-items: baseline; gap: .5rem; }
.conv .name { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .when { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.conv .preview {
  color: var(--ink-soft); font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv .badges { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.unread {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .72rem; padding: .1rem .45rem; font-weight: 600;
}
.mode-tag { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.mode-tag.human { color: var(--warn); font-weight: 600; }

/* ---------- Window clock — the signature element ---------- */
.clock {
  font-family: var(--font-mono);
  font-size: .8rem; font-weight: 500;
  padding: .15rem .5rem; border-radius: 4px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  white-space: nowrap;
}
.clock.warn   { background: color-mix(in srgb, var(--warn) 14%, transparent);   color: var(--warn); }
.clock.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* ---------- Thread ---------- */
.thread-head { gap: .6rem; }
#back-btn { display: none; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); }
.thread-title { display: flex; flex-direction: column; line-height: 1.2; }
.thread-title span { color: var(--ink-soft); font-size: .88rem; }
.thread-meta { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
#mode-badge { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
#mode-badge.bot   { color: var(--accent); }
#mode-badge.human { color: var(--warn); }
.thread-actions { display: flex; gap: .4rem; }
.thread-actions button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 6px; padding: .3rem .7rem; font-size: .8rem; cursor: pointer;
}
.thread-actions button:hover { border-color: var(--accent); color: var(--accent); }
/* Block sits with the other actions rather than shouting in red. It is
   reversible and deletes nothing — Delete is the destructive one here, and if
   both look equally alarming neither warning carries any weight. */
#block-btn:hover { border-color: var(--danger); color: var(--danger); }
#block-banner {
  padding: .5rem .9rem; font-size: .82rem; line-height: 1.4;
  color: var(--danger); background: #fdecea; border-bottom: 1px solid var(--line);
}
/* Amber, not red: a flag is a question for a human, and colouring it like the
   block would make the two read as the same thing at a glance. */
#block-banner.suspected { color: var(--warn); background: #fff6e5; }
#notspam-btn:hover { border-color: var(--ok); color: var(--ok); }
/* Row marker in the Spam tab, so a flagged number is distinguishable from an
   already-blocked one without opening it. */
.conv .spam-mark { color: var(--warn); font-weight: 600; }
.conv .blocked-mark { color: var(--danger); font-weight: 600; }
/* Call button — same shape as the others, sized for a thumb since it is the one
   control here that gets used mid-conversation on a phone. */
.thread-actions .callbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
  padding: .3rem .6rem; font-size: 1rem; text-decoration: none; line-height: 1.4;
}
.thread-actions .callbtn:hover { border-color: var(--accent); }

/* ---------- Saved chats & bookmarks ---------- */
/* Gold, not the green accent: green already means "window open" here. */
.save-btn {
  border: 0; background: none; cursor: pointer; padding: .1rem .25rem;
  font-size: 1.35rem; line-height: 1; color: var(--ink-soft);
}
.save-btn:hover { color: var(--warn); }
.save-btn.on { color: var(--warn); }
#saved-bar {
  padding: .45rem .9rem; border-bottom: 1px solid var(--line);
  background: #fffaf0;
}
/* Wraps rather than squeezing: on a phone the label keeps its line and the
   bookmark button or hint drops below it. */
.saved-row { display: flex; align-items: center; gap: 0 .6rem; flex-wrap: wrap; }
#saved-label {
  flex: 1 1 12rem; min-width: 0; text-align: left; cursor: pointer;
  border: 0; background: none; padding: .2rem 0; font: inherit;
  font-size: .85rem; font-weight: 600; color: var(--warn);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#saved-label .saved-by { font-weight: 400; color: var(--ink-soft); }
#bm-toggle {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: .8rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: .3rem .75rem;
}
#bm-toggle:hover:not(:disabled) { border-color: var(--warn); color: var(--warn); }
/* No bookmarks yet: the button becomes the instruction for making one. */
#bm-toggle.hint {
  border: 0; background: none; cursor: default; padding: .3rem 0;
  color: var(--ink-soft); font-style: italic;
}
#bm-list {
  display: flex; flex-direction: column; gap: .35rem;
  margin-top: .45rem; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
}
.bm-row { display: flex; align-items: stretch; gap: .3rem; }
.bm-go {
  flex: 1; min-width: 0; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  padding: .45rem .65rem; display: flex; flex-direction: column; gap: .1rem;
}
.bm-go:hover { border-color: var(--warn); }
.bm-name { font-size: .85rem; font-weight: 600; color: var(--ink); }
.bm-text {
  font-size: .82rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bm-when { font-size: .7rem; color: var(--ink-soft); }
.bm-del {
  flex: 0 0 2.4rem; border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); font-size: .9rem; border-radius: 8px;
}
.bm-del:hover { background: #fdecea; color: var(--danger); }
/* The bookmark's name sits on top of the bubble it marks. */
.bm-tag {
  display: block; margin-bottom: .15rem;
  font-size: .72rem; font-weight: 600; font-style: normal; color: var(--warn);
}
.conv .saved-tag {
  font-size: .72rem; color: var(--warn); font-weight: 600;
  max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv .bm-count { font-size: .72rem; color: var(--ink-soft); }

/* Hold a message (right-click on a computer). Same look as the "+" menu. */
#msg-menu {
  position: fixed; z-index: 60; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18); padding: .3rem 0;
  display: flex; flex-direction: column;
}
#msg-menu button {
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: .65rem 1rem; font: inherit; font-size: .9rem; color: var(--ink);
}
#msg-menu button:hover { background: var(--bg); }
#msg-menu button.danger { color: var(--danger); }

/* Routing controls in the thread header */
.thread-routing { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.thread-routing label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em;
}
.thread-routing select {
  font: inherit; font-size: .8rem; text-transform: none; letter-spacing: normal;
  padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
/* The branch picker wears its clinic's colour, so the open chat says where it
   belongs as plainly as its row in the list did. */
#branch-select[class^="br-"] {
  border-left: 5px solid var(--br);
  background: color-mix(in srgb, var(--br) 8%, var(--surface));
}
#mode-badge.closed { color: var(--ink-soft); }
.mode-tag.closed { color: var(--ink-soft); }

/* Chat area — subtle patterned backdrop, WhatsApp-style bubbles with tails */
#messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .4rem;
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
.msg {
  position: relative;
  max-width: 72%; padding: .45rem .65rem .5rem; border-radius: 8px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,.07);
}
.msg.in  { align-self: flex-start; background: var(--patient); border-top-left-radius: 0; }
.msg.out { align-self: flex-end; border-top-right-radius: 0; }
.msg.out.bot   { background: var(--bot); }
.msg.out.agent { background: var(--agent); }
/* bubble tails */
.msg.in::before, .msg.out::before {
  content: ''; position: absolute; top: 0; width: 0; height: 0; border: 7px solid transparent;
}
.msg.in::before  { left: -7px;  border-top-color: var(--patient); border-right-color: var(--patient); }
.msg.out.bot::before   { right: -7px; border-top-color: var(--bot);   border-left-color: var(--bot); }
.msg.out.agent::before { right: -7px; border-top-color: var(--agent); border-left-color: var(--agent); }
.msg .meta {
  display: block; margin-top: .25rem;
  font-size: .68rem; color: var(--ink-soft); text-align: right;
}
.msg.template { font-style: italic; }
/* Messages from an earlier, closed conversation — visible for context, visibly older */
.msg.past { opacity: .72; }

/* Dividers between conversations and days */
.thread-divider, .day-divider {
  align-self: center; margin: .6rem 0 .3rem; text-align: center; width: 100%;
}
.thread-divider span, .day-divider span {
  display: inline-block; font-size: .7rem; padding: .18rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft);
}
.thread-divider span {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-weight: 600;
}

/* Internal notes — staff only, never sent to the patient */
.note {
  align-self: center; max-width: 78%;
  background: #fff8dc; border: 1px solid #e6d9a8; border-left: 3px solid #c9a227;
  border-radius: 8px; padding: .45rem .7rem;
  font-size: .95rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  color: #4a3d10;
}
.note .note-tag {
  display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: #8a6d1f; font-weight: 700; margin-bottom: .15rem;
}
.note .meta { display: block; margin-top: .25rem; font-size: .66rem; color: #8a7a45; text-align: right; }
/* Brief highlight when you jump to a note from the Tasks list */
.note.flash { animation: noteflash 2.2s ease; }
@keyframes noteflash {
  0%, 40% { box-shadow: 0 0 0 3px var(--accent); background: #fff3bf; }
  100%    { box-shadow: 0 0 0 0 transparent; }
}
#note-btn { border-color: #c9a227; }

/* ---------- Composer ---------- */
#composer {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: .6rem; display: flex; gap: .5rem; align-items: flex-end;
  flex-wrap: wrap;
}
#msg-input {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .7rem; font: inherit; max-height: 8rem; background: var(--bg);
}
#msg-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
#send-btn {
  background: var(--primary); color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1.1rem; font-weight: 600; cursor: pointer;
}
#send-btn:disabled { opacity: .5; cursor: default; }
#send-btn:hover:not(:disabled), .modal-actions button:not(.ghost):hover,
.task-new button:hover, .login-card button:hover { background: var(--primary-dark); }

/* Single "+" entry point for attachments, voice, notes and reminders */
.hidden-actions { display: none; }
#plus-btn {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  border-radius: 50%; width: 38px; height: 38px; flex: 0 0 38px;
  font-size: 1.35rem; line-height: 1; color: var(--ink-soft);
}
#plus-btn:hover { border-color: var(--accent); color: var(--accent); }
#plus-btn.recording {
  background: var(--danger); border-color: var(--danger); color: #fff;
  font-size: 1rem; animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }

#composer-menu {
  position: absolute; bottom: 3.4rem; left: .6rem; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18); padding: .3rem 0; min-width: 200px;
  display: flex; flex-direction: column;
}
#composer-menu button {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: .6rem .9rem; font: inherit; font-size: .9rem; color: var(--ink);
}
#composer-menu button:hover { background: var(--bg); }
#composer { position: relative; }
#upload-status {
  width: 100%; font-size: .8rem; color: var(--ink-soft);
  padding: .3rem .2rem 0; text-align: center;
}

/* Media inside messages */
.media-img {
  display: block; max-width: 260px; max-height: 320px;
  border-radius: 8px; margin-bottom: .25rem; cursor: pointer;
}
.media-sticker { display: block; max-width: 120px; }
.media-audio { display: block; max-width: 260px; margin-bottom: .25rem; }
.media-file {
  display: inline-block; color: var(--accent); text-decoration: none;
  padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.media-file:hover { border-color: var(--accent); }
.msg .cap { margin-top: .15rem; }

/* When the 24h window is closed the composer locks — but notes are internal, so
   staff must still be able to record follow-up. */
/* Window expired: hide the composer, but keep "+" so notes and reminders still work */
#composer.locked #msg-input, #composer.locked #send-btn { display: none; }
/* Locked: one row next to "+" — the notice on the left, the picker button on the
   right — so the thread keeps its height on a phone. */
#composer-locked:not([hidden]) {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
}
#composer-locked p {
  flex: 1; min-width: 0; margin: 0; font-size: .8rem; line-height: 1.3;
  color: var(--danger);
}
#template-toggle {
  flex: 0 0 auto; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-size: .85rem;
  font-weight: 600; padding: .55rem .9rem;
}
#template-toggle[aria-expanded="true"] { background: var(--ink); }
/* The list floats above the composer like the "+" menu, so opening it covers
   the thread briefly instead of shoving it off screen. */
#template-picker {
  position: absolute; bottom: 100%; left: .6rem; right: .6rem; z-index: 40;
  margin-bottom: .4rem; max-height: min(55vh, 26rem); overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18); padding: .3rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
#template-picker button {
  background: none; border: 0; border-radius: 6px; text-align: left;
  padding: .65rem .8rem; font: inherit; font-size: .9rem; color: var(--ink);
  cursor: pointer; overflow-wrap: anywhere;
}
#template-picker button:hover { background: var(--bg); color: var(--accent); }

/* ---------- Login ---------- */
.login-page { display: grid; place-items: center; min-height: 100dvh; }
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 2rem; width: min(92vw, 340px); display: flex; flex-direction: column; gap: 1rem;
}
.login-card h1 { font-family: var(--font-disp); margin: 0 0 .5rem; font-size: 1.4rem; }
.login-card h1 span { color: var(--accent); font-weight: 500; }
.login-card label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--ink-soft); }
.login-card input {
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; font: inherit;
}
.login-card button {
  background: var(--primary); color: #fff; border: 0; border-radius: 8px;
  padding: .6rem; font-weight: 600; cursor: pointer;
}
.login-error { color: var(--danger); font-size: .85rem; margin: 0; }

/* ---------- Mobile: single pane, slide-in thread ---------- */
@media (max-width: 760px) {
  #list-pane { width: 100%; border-right: 0; }
  #thread-pane {
    /* Stops short of the bottom bar rather than running under it — the bar sits
       above this pane, so a full-height thread would have the composer hidden
       behind it. */
    position: fixed; inset: 0 0 calc(52px + env(safe-area-inset-bottom)) 0;
    background: var(--bg);
    transform: translateX(100%); transition: transform .22s ease;
    z-index: 10;
    /* Fully out of the way when closed — without this the pane still received
       taps and repainted over the list, which looked like flicker/overlap. */
    visibility: hidden; pointer-events: none;
  }
  #app.thread-open #thread-pane {
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
  }
  #list-pane { height: 100dvh; }
  #back-btn { display: block; }
  .msg { max-width: 86%; }
  .thread-actions button { padding: .3rem .5rem; }
}

/* Outbox lines in the thread — automated sends (reminders, confirmations,
   ratings, certificates) drawn as a record, not a chat bubble. Hover/long-press
   shows the parameters via the title attribute. */
.notif-line {
  align-self: center; text-align: center; width: 100%;
  font-size: .74rem; color: var(--ink-soft);
  margin: .15rem 0; padding: 0 .5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* overflow:hidden zeroes a flex item's automatic min-height, so a tall
     thread squashed these lines to slivers — never let them shrink. */
  flex-shrink: 0;
}
.notif-line .nl-label { text-transform: capitalize; }
.notif-line .nl-status { font-weight: 600; }
.notif-line.st-read .nl-status { color: #1e7a37; }
.notif-line.st-failed, .notif-line.st-failed .nl-status { color: #b3261e; }
.notif-line.st-blocked .nl-status { color: #8a6d1f; }