/* The patient app's chat (patient_app_chat.js, server/patient_chat.py).
 *
 * The same look the staff's chat was given on 1 Oct 2026 - "it should look like WhatsApp, I want
 * that feel", in bright green ("not that green teal"), with the Sara mark, faint, on the wall
 * behind the messages ("Sara logo in background") - brought to the patient app the next night:
 * "same thing we will implement in patient app also." The look only: no logo or name that is not ours.
 */
.pc-fab {
  --pc: #1FA855; --pc-go: #25D366; --pc-ink: #06301A;
  position: fixed; right: 14px; bottom: calc(var(--bar) + 16px + env(safe-area-inset-bottom)); z-index: 28;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--pc-go); color: var(--pc-ink);
  box-shadow: 0 4px 14px -4px rgba(6, 48, 26, .55), 0 14px 30px -14px rgba(31, 168, 85, .9);
  transition: transform .16s ease, opacity .2s ease;
}
.pc-fab:active { transform: scale(.95); }
.pc-fab svg { width: 27px; height: 27px; }
.pc-fab b { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: #F75601; color: #fff; font-size: 12px; font-weight:600; line-height: 21px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.pc-fab b[hidden] { display: none; }
body.pc-open .pc-fab { opacity: 0; pointer-events: none; }
body.pc-open { overflow: hidden; }

.pc-pane {
  --pc: #1FA855; --pc-deep: #0B6B3A; --pc-go: #25D366; --pc-ink: #06301A; --pc-out: #D9FDD3; --pc-wall: #F3F1EC; --pc-sub: #667781;
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--pc-wall);
  font-size: 15px; line-height: 1.38; color: #111B21;
  transform: translateY(8%); opacity: 0; transition: transform .22s ease, opacity .18s ease;
}
.pc-pane.in { transform: none; opacity: 1; }
.pc-pane svg { display: block; }
.pc-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top));
  background: var(--pc); color: #fff; }
.pc-back { flex: none; width: 40px; height: 40px; border: 0; background: none; color: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.pc-back svg { width: 24px; height: 24px; }
.pc-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.pc-av img { width: 26px; height: 26px; object-fit: contain; }
.pc-who { flex: 1; min-width: 0; }
.pc-who b { display: block; font-size: 16.5px; font-weight:500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-who small { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pc-log { flex: 1; overflow-y: auto; padding: 10px max(10px, 4%) 6px; display: flex; flex-direction: column; gap: 3px;
  background-image: var(--pc-paper, none); -webkit-overflow-scrolling: touch; }
.pc-day { align-self: center; font-size: 12px; color: #54656F; background: #fff; border-radius: 8px; padding: 4px 12px; margin: 8px 0 6px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.pc-hello { align-self: center; max-width: 430px; text-align: center; background: #fff; border-radius: 12px; padding: 14px 16px; margin: 12px 0;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); color: #3B4A54; font-size: 14px; }
.pc-hello b { display: block; color: #111B21; font-size: 16px; margin-bottom: 4px; }
.pc-msg { position: relative; max-width: 86%; padding: 6px 9px 7px; border-radius: 9px; background: #fff; align-self: flex-start;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; white-space: pre-wrap; margin-top: 4px; }
.pc-msg.me { align-self: flex-end; background: var(--pc-out); }
.pc-msg .from { display: block; font-size: 12.5px; font-weight:500; color: var(--pc-deep); margin-bottom: 1px; white-space: normal; }
.pc-msg .from.hosp { color: #0267C2; }
.pc-msg .ttl { display: block; font-weight:500; }
.pc-msg time { float: right; font-size: 11px; color: var(--pc-sub); margin: 7px 0 -3px 12px; }
.pc-msg.red { background: #FDECEC; border: 1.5px solid #F2B8B8; }
.pc-msg.red .from { color: #B91C1C; }
.pc-msg.dim { color: #54656F; }
.pc-cards { display: grid; gap: 6px; margin-top: 7px; white-space: normal; clear: both; }
.pc-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit;
  background: #F0F2F5; border-radius: 9px; padding: 8px 10px; color: #111B21; }
.pc-card i { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: #0267C2; }
.pc-card i svg { width: 19px; height: 19px; }
.pc-card.video i { background: #E11D48; }
.pc-card.call { background: #B91C1C; color: #fff; }
.pc-card.call i { background: rgba(255, 255, 255, .22); }
.pc-card span { flex: 1; min-width: 0; font-weight:500; font-size: 14px; }
.pc-card span small { display: block; font-weight: 500; font-size: 12px; color: var(--pc-sub); }
.pc-card.call span small { color: rgba(255, 255, 255, .85); }
.pc-card em { flex: none; font-style: normal; font-weight:500; font-size: 13px; color: #027EB5; }
.pc-card.call em { color: #fff; }
/* The hospital's number under an ordinary answer: the red one is for an emergency only. */
.pc-card.call.calm { background: #E7F7EE; color: #0B4F2C; }
.pc-card.call.calm i { background: #1FA855; }
.pc-typing { align-self: flex-start; background: #fff; border-radius: 9px; padding: 10px 12px; margin-top: 4px; display: inline-flex; gap: 4px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.pc-typing b { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: pc-dot 1.2s infinite ease-in-out; }
.pc-typing b:nth-child(2) { animation-delay: .15s; }
.pc-typing b:nth-child(3) { animation-delay: .3s; }
@keyframes pc-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.pc-quick { flex: none; display: flex; gap: 7px; overflow-x: auto; padding: 7px 10px 2px; background: #F0F2F5; scrollbar-width: none; }
.pc-quick::-webkit-scrollbar { display: none; }
.pc-chip { flex: none; border: 1px solid #D1D7DB; background: #fff; color: #111B21; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight:500;
  padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.pc-chip.ask { color: var(--pc-deep); border-color: #BFE8CD; background: #EFFBF3; }
.pc-compose { flex: none; display: flex; align-items: flex-end; gap: 7px; padding: 7px 8px; background: #F0F2F5; }
.pc-compose textarea { flex: 1; min-width: 0; border: 0; border-radius: 22px; padding: 11px 15px; font: inherit; font-size: 16px; line-height: 1.3;
  background: #fff; color: #111B21; resize: none; max-height: 120px; outline: none; }
.pc-round { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--pc-go); color: var(--pc-ink); display: grid;
  place-items: center; cursor: pointer; }
.pc-round svg { width: 23px; height: 23px; }
.pc-round.mic { background: #fff; color: #54656F; }
.pc-round.mic.on { background: #F75601; color: #fff; }
.pc-round:disabled { opacity: .5; }
.pc-note { flex: none; text-align: center; font-size: 11.5px; color: var(--pc-sub); background: #F0F2F5; padding: 0 12px calc(7px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) {
  .pc-pane { left: auto; width: 440px; box-shadow: -12px 0 40px -18px rgba(16, 23, 37, .5); }
}
@media (prefers-reduced-motion: reduce) { .pc-pane, .pc-fab { transition: none; } .pc-typing b { animation: none; } }