/* ==========================================================================
   chat.css: the WhatsApp-style building blocks, in the light-blue water theme.
   Everyone knows WhatsApp, so the app uses the same layout:
     - a coloured header bar with tabs under it
     - lists that look like the chat list (round initials, name, time, last line)
     - a chat screen with message bubbles and quick-reply buttons at the bottom
     - a round floating action button
   Colours come from the variables in styles.css (--head, --wall, --bub-in ...).
   No WhatsApp logo or name is used anywhere: only the familiar layout.
   ========================================================================== */

/* ---------- header bar (phone and admin left pane) ---------- */
.wa-head{display:flex;align-items:center;gap:10px;background:var(--head);color:var(--head-ink);
  padding:10px 8px 10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));min-height:56px}
.wa-head .t{flex:1;min-width:0}
.wa-head .t b{display:block;font-family:var(--f-display);font-size:17px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-head .t span{display:block;font-size:12.5px;color:var(--head-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-ib{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.wa-ib:hover,.wa-ib:focus-visible{background:rgba(255,255,255,.14)}
.wa-ib svg{width:22px;height:22px}

/* ---------- tabs under the header ---------- */
.wa-tabs{display:flex;background:var(--head);color:var(--head-sub)}
.wa-tabs button{flex:1;border:0;background:none;color:inherit;font:inherit;font-weight:600;font-size:14.5px;
  padding:11px 6px 9px;border-bottom:3px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wa-tabs button[aria-selected="true"]{color:var(--head-ink);border-bottom-color:var(--head-ink)}
.wa-tabs .cnt{background:var(--head-ink);color:var(--head);border-radius:99px;font-size:11px;font-weight:700;padding:0 6px;min-width:18px;line-height:18px}

/* ---------- chat-list rows ---------- */
.wa-list{display:flex;flex-direction:column;background:var(--surface)}
.wa-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:0;background:none;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;min-width:0}
.wa-row:hover,.wa-row:focus-visible{background:var(--alt)}
.wa-row[aria-current="true"]{background:var(--surface2)}
.wa-row .mid{flex:1;min-width:0;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:-10px;display:flex;flex-direction:column;gap:2px}
.wa-row:last-child .mid{border-bottom:0}
.wa-row .l1,.wa-row .l2{display:flex;align-items:baseline;gap:8px;min-width:0}
.wa-row .nm{flex:1;min-width:0;font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row .tm{flex:none;font-size:12px;color:var(--muted)}
.wa-row .tm.hot{color:var(--accent);font-weight:700}
.wa-row .pv{flex:1;min-width:0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row .bd{flex:none;background:var(--accent);color:var(--accent-ink);border-radius:99px;font-size:11.5px;font-weight:700;min-width:20px;line-height:20px;padding:0 6px;text-align:center}
.wa-row .bd.bad{background:var(--bad);color:#fff}
.wa-row .bd.warn{background:var(--warn);color:#fff}

/* round initials (the "profile photo") */
.wa-av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);
  font-weight:700;font-size:16px;color:#fff;background:var(--av,var(--accent));letter-spacing:.02em}
.wa-av.sm{width:38px;height:38px;font-size:14px}
.wa-av svg{width:22px;height:22px}
/* in a blue header the circle can be the same blue: give it a thin light ring */
.wa-head .wa-av{box-shadow:0 0 0 2px var(--head-ink)}

/* section label inside a list ("Today", "Due soon") */
.wa-sec{padding:12px 14px 4px;font-size:13px;font-weight:700;color:var(--accent)}

/* ---------- chat screen ---------- */
.wa-chat{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--wall)}
.wa-msgs{flex:1;overflow-y:auto;padding:10px 10px 14px;display:flex;flex-direction:column;gap:6px;min-height:0}
/* message bubbles: "in" = from the office / system (left), "out" = what this user did (right) */
.bub{max-width:86%;padding:7px 10px 5px;border-radius:10px;font-size:14.5px;line-height:1.45;box-shadow:0 1px .5px rgba(0,0,0,.13);
  overflow-wrap:anywhere;position:relative}
.bub.in{align-self:flex-start;background:var(--bub-in);border-top-left-radius:2px}
.bub.out{align-self:flex-end;background:var(--bub-out);border-top-right-radius:2px}
.bub .who{display:block;font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:1px}
.bub .meta{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:11px;color:var(--bub-meta);margin-top:2px;white-space:nowrap}
.bub .meta svg{width:16px;height:11px;color:var(--tick)}
.bub.bad{box-shadow:inset 3px 0 0 var(--bad),0 1px .5px rgba(0,0,0,.13)}
.bub.warn{box-shadow:inset 3px 0 0 var(--warn),0 1px .5px rgba(0,0,0,.13)}
.bub .kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13.5px}
.bub .kv dt{color:var(--muted)}
.bub .kv dd{margin:0;min-width:0}
.bub a{color:var(--accent)}
/* small grey date chip in the middle ("Today", "Mon 5 Oct") */
.wa-day{align-self:center;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;
  box-shadow:0 1px .5px rgba(0,0,0,.1);margin:6px 0}
/* yellow system note in the middle ("Messages are saved for the office") */
.wa-sys{align-self:center;max-width:90%;text-align:center;background:var(--warn-bg);color:var(--warn);font-size:12.5px;padding:5px 10px;border-radius:8px}

/* quick-reply buttons at the bottom of a chat (the actions) */
.wa-qr{display:flex;flex-wrap:wrap;gap:8px;padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--wall);border-top:1px solid var(--line)}
.wa-qr button,.wa-qr a{flex:1 1 calc(50% - 8px);min-height:46px;border:0;border-radius:24px;background:var(--surface);color:var(--accent);
  font:inherit;font-weight:700;font-size:15px;padding:8px 12px;cursor:pointer;box-shadow:0 1px .5px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;text-align:center}
.wa-qr .pri{background:var(--accent);color:var(--accent-ink)}
.wa-qr .bad{color:var(--bad)}
.wa-qr .full{flex-basis:100%}
.wa-qr button:disabled{opacity:.5;cursor:default}
.wa-qr svg{width:18px;height:18px}

/* message-box style input row (amount, note) */
.wa-compose{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;background:var(--wall)}
.wa-compose .box-in{flex:1;min-width:0;background:var(--surface);border-radius:24px;padding:4px 14px;display:flex;align-items:center;gap:6px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wa-compose input,.wa-compose textarea{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--fg);padding:9px 0;outline:none;resize:none}
.wa-send{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--fab);color:#fff;display:grid;place-items:center;cursor:pointer}
.wa-send:disabled{opacity:.5}
.wa-send svg{width:22px;height:22px}

/* choice chips inside a chat (minutes, reason, payment mode) */
.wa-chips{display:flex;flex-wrap:wrap;gap:6px}
.wa-chips button{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:18px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer;min-height:38px}
.wa-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* round floating action button (bottom right) */
.wa-fab{position:absolute;right:16px;bottom:calc(64px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:16px;border:0;
  background:var(--fab);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);display:grid;place-items:center;cursor:pointer;z-index:3}
.wa-fab svg{width:24px;height:24px}

/* ---------- phone shell ---------- */
.phone{background:var(--surface)}
.phone .ph-body{padding:0;gap:0;background:var(--surface)}
/* padded pages (profile etc.). "pad" is also the PIN keypad class, so undo its grid here */
.phone .ph-body.pad{padding:12px;gap:12px;display:flex;flex-direction:column;grid-template-columns:none}
/* the chat screen slides over the list, like opening a chat */
#ph-chat{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:var(--wall)}
#ph-chat[hidden]{display:none}

/* ---------- admin shell (like the computer version: list on the left, chat on the right) ---------- */
.desk .side{padding:0;gap:0;background:var(--surface)}
/* a little wider menu so every line fits without "..." */
@media (min-width:761px){
  .desk .desk-main{grid-template-columns:236px minmax(0,1fr)}
  /* the menu stays in place while a long page scrolls */
  .desk .side{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow-y:auto}
}
.desk .side .wa-row .pv{font-size:12.5px}
.desk .side .wa-head{position:sticky;top:0;z-index:1}
.desk .side .wa-row{padding:9px 12px}
.desk .side .wa-row .nm{font-size:14.5px}
.desk .side .wa-av{width:38px;height:38px;background:var(--accent-soft);color:var(--accent)}
.desk .side .wa-row[aria-current="true"] .wa-av{background:var(--accent);color:var(--accent-ink)}
.desk .side .wa-av svg{width:20px;height:20px}
/* agency name may wrap to two lines instead of being cut off */
.desk .side .wa-head .t b{white-space:normal;font-size:15.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.desk .content{background:var(--wall)}
.desk .content>.sec>header h2{font-family:var(--f-display)}
.desk .card,.desk .tile,.desk .tw{border-radius:12px;box-shadow:0 1px .5px rgba(0,0,0,.1)}
@media (max-width:760px){
  .desk .side{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;background:var(--head)}
  .desk .side .wa-head{display:none}
  .desk .side .wa-row{flex:none;width:auto;color:var(--head-sub);padding:10px 12px;border-bottom:3px solid transparent}
  .desk .side .wa-row[aria-current="true"]{background:none;color:var(--head-ink);border-bottom-color:var(--head-ink)}
  .desk .side .wa-row .wa-av{display:none}
  .desk .side .wa-row .mid{border:0;margin:0;padding:0}
  .desk .side .wa-row .pv{display:none}
  .desk .side .wa-row .nm{font-size:14px}
}

/* While a chat is open, lift pop-up messages above the message box and buttons */
body:has(#ph-chat:not([hidden])) #toasts{bottom:calc(150px + env(safe-area-inset-bottom,0px))}

/* On a phone, page descriptions under the title take one line only */
@media (max-width:640px){
  .desk .content>.sec>header p.sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
}