/* pharmacy_wa.css — طلب 1449 (Mona 29/10 for Saud: «الـlayout يبقى قريب من layout الواتس اب»). The customer's chat
 * close to WhatsApp's, in Roshetta's colours and with no WhatsApp mark: a blue head with the pharmacy's logo in a white
 * circle, a quiet wallpaper, bubbles with a tail on the first of a run, the time and his ticks inside the bubble, the
 * words in a white pill with 📎 and 📷, one round button (🎙 empty · ➤ typing), voice notes.
 * Linked by chat/show only where Pharmacy#wa_page? (a «chat only» pharmacy with the switch on) — every other page gains
 * no byte. Every rule is under .sc-sheet.ph-wa: it is linked BEFORE store_chat.css / pharmacy.css (the layout's :head),
 * so it wins by weight, never by order.
 * ROUND IS THE EXCEPTION, AND IT IS NAMED: store_chat.css makes the chat sharp (.sc-sheet *, Mohamed 30/9); this page's
 * bubbles, pill, buttons and chips are round on purpose (Mohamed 29/10 13:10 «1449 نفّذ» on the mockup). */

/* ── the head ── */
.sc-sheet.ph-wa .sc-head { background: #0369a1; border-bottom: 0; padding: 0.5rem 0.75rem; gap: 0.625rem; color: #fff; }
.sc-sheet.ph-wa .sc-av { width: 2.625rem; height: 2.625rem; border-radius: 999px !important; background: #e0f2fe; color: #0c4a6e;
  font-size: 1.125rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.sc-sheet.ph-wa .ph-av-logo { background: #fff; }
.sc-sheet.ph-wa .ph-av-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.125rem; box-sizing: border-box;
  border-radius: 999px !important; background: #fff; }
.sc-sheet.ph-wa .sc-name { color: #fff; font-size: 1rem; line-height: 1.4; }
.sc-sheet.ph-wa .sc-sub { color: #e0f2fe; font-weight: 600; }
.sc-sheet.ph-wa .sc-dot { background: #4ade80; }
.sc-sheet.ph-wa .ph-demo { color: #fde68a; }

/* ── the wallpaper: the store's ground, a soft blue-grey with a faint dot grid (no image: CSP and no request) ── */
.sc-sheet.ph-wa { background: #e7eef4; }
.sc-sheet.ph-wa .sc-body { background-color: #e7eef4;
  background-image: radial-gradient(rgba(3, 105, 161, .07) 1.2px, transparent 1.4px), radial-gradient(rgba(3, 105, 161, .05) 1px, transparent 1.2px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; padding: 0.75rem 0.875rem 0.5rem; }
.sc-sheet.ph-wa #chat-lines { gap: 0.25rem; }

/* ── bubbles ── */
.sc-sheet.ph-wa .sc-msg { position: relative; max-width: 80%; padding: 0.375rem 0.625rem 0.25rem; border-radius: 0.625rem !important;
  box-shadow: 0 1px 0.5px rgba(15, 23, 42, .13); line-height: 1.6; }
.sc-sheet.ph-wa .sc-in { background: #fff; border: 0; }
.sc-sheet.ph-wa .sc-out { background: #d3ebfb; color: #0f172a; }
.sc-sheet.ph-wa .ph-tail { margin-top: 0.375rem; }
/* the tail: the first bubble of a run — top right for the pharmacy (RTL start), top left for him */
.sc-sheet.ph-wa .sc-in.ph-tail { border-top-right-radius: 0 !important; }
.sc-sheet.ph-wa .sc-out.ph-tail { border-top-left-radius: 0 !important; }
.sc-sheet.ph-wa .ph-tail::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.sc-sheet.ph-wa .sc-in.ph-tail::before { right: -0.5rem; border-width: 0.625rem 0.5rem 0 0; border-color: #fff transparent transparent transparent; }
.sc-sheet.ph-wa .sc-out.ph-tail::before { left: -0.5rem; border-width: 0.625rem 0 0 0.5rem; border-color: #d3ebfb transparent transparent transparent; }
.sc-sheet.ph-wa .sc-out.sc-failed { background: #fff; border: 1px solid #fecaca; color: #111827; }
.sc-sheet.ph-wa .sc-out.sc-failed.ph-tail::before { border-color: #fff transparent transparent transparent; }
.sc-sheet.ph-wa .ph-failed-t { display: block; margin-top: 0.125rem; font-size: 0.75rem; font-weight: 700; color: #b91c1c; }

/* who wrote it: the bot's grey, a pharmacist's name in blue */
.sc-sheet.ph-wa .sc-from { font-size: 0.75rem; font-weight: 700; color: #64748b; line-height: 1.5; }
.sc-sheet.ph-wa .ph-staff { background: #fff; border: 0; }
.sc-sheet.ph-wa .ph-staff .sc-from { color: #0369a1; }

/* the time (and his ticks) inside the bubble, at its end */
.sc-sheet.ph-wa .sc-msg-m { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; margin-top: 0;
  font-size: 0.6875rem; font-weight: 600; color: #64748b; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sc-sheet.ph-wa .sc-out .sc-msg-m { color: #4b6b80; }
.sc-sheet.ph-wa .ph-tick { display: inline-flex; color: #64748b; }
.sc-sheet.ph-wa .ph-tick svg { width: 1rem; height: 0.75rem; }
.sc-sheet.ph-wa .ph-tick-wait svg { width: 0.75rem; height: 0.75rem; }
.sc-sheet.ph-wa .ph-tick-seen { color: #0284c7; }
.sc-sheet.ph-wa .ph-pending { display: block; font-size: 0.75rem; font-weight: 600; color: #64748b; }

/* a photo fills its bubble; with no words, the time sits on the picture */
.sc-sheet.ph-wa .ph-thumbs { display: grid; gap: 0.1875rem; margin: 0 -0.375rem 0.25rem; }
.sc-sheet.ph-wa .ph-thumb { width: 15rem; max-width: 100%; height: auto; max-height: 20rem; aspect-ratio: auto; border: 0;
  border-radius: 0.5rem !important; object-fit: cover; background: #cbd5e1; }
.sc-sheet.ph-wa .sc-in .ph-thumbs { margin-top: 0.125rem; }
.sc-sheet.ph-wa .ph-photo-only { padding: 0.1875rem 0.1875rem; }
.sc-sheet.ph-wa .ph-photo-only .ph-thumbs { margin: 0; }
.sc-sheet.ph-wa .ph-photo-only .sc-msg-m { position: absolute; left: 0.5rem; bottom: 0.4375rem; padding: 0 0.375rem;
  border-radius: 999px !important; background: rgba(15, 23, 42, .45); color: #fff; }
.sc-sheet.ph-wa .ph-photo-only .ph-tick, .sc-sheet.ph-wa .ph-photo-only .ph-tick-seen { color: #fff; }

/* ── a voice note ── */
.sc-sheet.ph-wa .ph-vo-msg { min-width: 15.5rem; }
.sc-sheet.ph-wa .ph-vo { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0 0.125rem; }
.sc-sheet.ph-wa .ph-vo-play { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px !important; padding: 0;
  background: #0369a1; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sc-sheet.ph-wa .ph-vo-play svg { width: 1.25rem; height: 1.25rem; }
.sc-sheet.ph-wa .ph-vo-play:focus-visible { outline: 3px solid #0c4a6e; outline-offset: 2px; }
.sc-sheet.ph-wa .ph-vo-i-pause, .sc-sheet.ph-wa .ph-vo-on .ph-vo-i-play { display: none; }
.sc-sheet.ph-wa .ph-vo-on .ph-vo-i-pause { display: block; }
/* the wave starts at the ▶ (the right, in Arabic) and fills toward the length, as the page reads */
.sc-sheet.ph-wa .ph-vo-wave { flex: 1 1 auto; min-width: 0; height: 1.75rem; display: flex; align-items: center; gap: 0.125rem; }
.sc-sheet.ph-wa .ph-vo-wave i { flex: 1 1 0; max-width: 0.1875rem; min-width: 0.125rem; border-radius: 999px !important; background: #94a3b8; }
.sc-sheet.ph-wa .sc-out .ph-vo-wave i { background: #7fa6bf; }
.sc-sheet.ph-wa .ph-vo-wave i.ph-on { background: #0369a1; }
.sc-sheet.ph-wa .ph-h0, .sc-sheet.ph-wa .ph-h1 { height: 12%; }
.sc-sheet.ph-wa .ph-h2 { height: 22%; }
.sc-sheet.ph-wa .ph-h3 { height: 32%; }
.sc-sheet.ph-wa .ph-h4 { height: 42%; }
.sc-sheet.ph-wa .ph-h5 { height: 52%; }
.sc-sheet.ph-wa .ph-h6 { height: 62%; }
.sc-sheet.ph-wa .ph-h7 { height: 74%; }
.sc-sheet.ph-wa .ph-h8 { height: 86%; }
.sc-sheet.ph-wa .ph-h9 { height: 100%; }
.sc-sheet.ph-wa .ph-vo-len { flex: none; min-width: 2.25rem; font-size: 0.75rem; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; direction: ltr; }
.sc-sheet.ph-wa .ph-vo-bad .ph-vo-len { color: #b91c1c; }
.sc-sheet.ph-wa .ph-vo-audio { display: none; }

/* ── the chips: the day, the routing line, the topic bar («استشارة مع الصيدلي») ── */
.sc-sheet.ph-wa .sc-day { margin: 0.5rem 0 0.25rem; padding: 0.1875rem 0.75rem; border-radius: 0.5rem !important; background: #fff;
  color: #475569; font-size: 0.75rem; box-shadow: 0 1px 0.5px rgba(15, 23, 42, .13); }
.sc-sheet.ph-wa .tp-routed { margin: 0.25rem 0; padding: 0.25rem 0.75rem; border-radius: 0.5rem !important; background: #e0f2fe;
  color: #0c4a6e; box-shadow: 0 1px 0.5px rgba(15, 23, 42, .1); }
.sc-sheet.ph-wa .ph-status-t { border: 0; border-radius: 0.625rem !important; box-shadow: 0 1px 0.5px rgba(15, 23, 42, .13); }
.sc-sheet.ph-wa .tp-bar { justify-content: center; padding: 0.25rem 1rem 0; background: #e7eef4; border: 0; }
.sc-sheet.ph-wa .tp-bar > span { padding: 0.125rem 0.75rem; border-radius: 999px !important; background: #fff; color: #0c4a6e;
  font-size: 0.75rem; box-shadow: 0 1px 0.5px rgba(15, 23, 42, .13); }

/* ── the composer (pr[:input] == :text): a white pill + one round button, over the wallpaper ── */
.sc-sheet.ph-wa #chat-composer { background: #e7eef4; }
.sc-sheet.ph-wa .ph-wa-comp { flex-wrap: nowrap; align-items: flex-end; gap: 0.375rem; background: transparent; border-top: 0;
  padding: 0.375rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
.sc-sheet.ph-wa .ph-pill { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 0.125rem; min-height: 3rem;
  padding: 0 0.875rem 0 0.25rem; border-radius: 1.5rem !important; background: #fff; box-shadow: 0 1px 0.5px rgba(15, 23, 42, .13); box-sizing: border-box; }
.sc-sheet.ph-wa .ph-pill .sc-in-box { min-height: 3rem; padding: 0.6875rem 0 0.6875rem; border: 0; background: transparent; outline: 0; }
.sc-sheet.ph-wa .ph-pill:focus-within { box-shadow: 0 0 0 2px #7dd3fc; }
.sc-sheet.ph-wa .ph-pill-btn { flex: none; width: 2.5rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  color: #64748b; cursor: pointer; }
.sc-sheet.ph-wa .ph-pill-btn svg { width: 1.375rem; height: 1.375rem; }
.sc-sheet.ph-wa .ph-wa-comp .sc-send { width: 3rem; height: 3rem; border-radius: 999px !important; background: #0369a1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .2); }
.sc-sheet.ph-wa .ph-wa-comp .sc-send svg { width: 1.375rem; height: 1.375rem; }
/* 🎙 while the box is empty, ➤ once he types — only with JavaScript (.ph-js); without it ➤ alone */
.sc-sheet.ph-wa .ph-mic { display: none; }
.sc-sheet.ph-wa .ph-mic svg { transform: none; }
.sc-sheet.ph-wa.ph-js .ph-wa-comp:not(.ph-has-text) .ph-mic { display: flex; }
.sc-sheet.ph-wa.ph-js .ph-wa-comp.ph-has-mic:not(.ph-has-text) .ph-send { display: none; }

/* ── recording (voice_rec_controller.js) — one tap on 🎙: the bar covers the composer: 🗑 · ● time · wave · ➤ ── */
.sc-sheet.ph-wa .ph-rec { position: absolute; z-index: 3; right: 0.5rem; left: 0.5rem; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  min-height: 3rem; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem; border-radius: 1.5rem !important;
  background: #fff; box-shadow: 0 1px 0.5px rgba(15, 23, 42, .13); box-sizing: border-box; }
.sc-sheet.ph-wa .ph-rec[hidden], .sc-sheet.ph-wa .ph-vo-note[hidden], .sc-sheet.ph-wa .ph-rec [hidden] { display: none; }
/* 1449c: the mic waking up — a grey still dot, «المايك بيجهز…» in place of the wave */
.sc-sheet.ph-wa .ph-rec-warm .ph-rec-dot { background: #94a3b8; animation: none; }
.sc-sheet.ph-wa .ph-rec-warm .ph-rec-time { color: #94a3b8; }
.sc-sheet.ph-wa .ph-rec-wait { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.sc-sheet.ph-wa .ph-rec-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 999px !important; background: #dc2626;
  animation: ph-rec-blink 1s ease-in-out infinite; }
.sc-sheet.ph-wa .ph-rec-time { flex: none; min-width: 2.5rem; font-size: 1rem; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; direction: ltr; }
.sc-sheet.ph-wa .ph-rec-late .ph-rec-time { color: #dc2626; }
/* the live wave: the newest level at the end (the ➤ side), as the bubble draws it */
.sc-sheet.ph-wa .ph-rec-wave { flex: 1 1 auto; min-width: 0; height: 1.75rem; display: flex; align-items: center; justify-content: flex-start; gap: 0.125rem; overflow: hidden; }
.sc-sheet.ph-wa .ph-rec-wave i { flex: 0 0 0.1875rem; border-radius: 999px !important; background: #0369a1; }
.sc-sheet.ph-wa .ph-rec-x { flex: none; width: 2.75rem; height: 2.75rem; border: 0; padding: 0; border-radius: 999px !important; background: none;
  color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sc-sheet.ph-wa .ph-rec-x svg { width: 1.375rem; height: 1.375rem; }
.sc-sheet.ph-wa .ph-rec-x:active { color: #dc2626; }
.sc-sheet.ph-wa .ph-rec-go { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px !important; }
/* a line about the mic (refused, not supported, too short), just above the composer */
.sc-sheet.ph-wa .ph-vo-note { position: absolute; z-index: 3; right: 0.75rem; left: 0.75rem; bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.625rem !important; background: #0f172a; color: #fff; font-size: 0.8125rem;
  font-weight: 600; line-height: 1.6; text-align: center; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); }
@keyframes ph-rec-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .sc-sheet.ph-wa .ph-rec-dot { animation: none; }
}