/* Live chat attachments (widget + staff console): round crystal composer buttons, photo thumbs,
   voice player, recording bar, lightbox. Logical properties only, so RTL works unchanged. */
.mw-cm-btn{--cm-c:#0f5f5c;box-sizing:border-box;flex:0 0 36px;width:36px !important;height:36px !important;min-width:36px;min-height:36px;padding:0 !important;margin:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50% !important;cursor:pointer;color:var(--cm-c);font-size:14px;line-height:1;
  border:1px solid rgba(15,95,92,.28);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(236,246,245,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 2px rgba(15,95,92,.08),0 1px 3px rgba(15,23,42,.10);
  transition:background .15s,box-shadow .15s,transform .12s,color .15s}
.mw-cm-btn i{margin:0 !important;font-size:14px;pointer-events:none}
.mw-cm-btn:hover{background:linear-gradient(180deg,#fff,#dff1ef);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(15,95,92,.18)}
.mw-cm-btn:active{transform:scale(.93)}
.mw-cm-btn:focus-visible{outline:3px solid rgba(20,184,166,.45);outline-offset:2px}
.mw-cm-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.mw-cm-btn--primary{color:#fff;border-color:rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 55%),linear-gradient(135deg,#0f5f5c,#14807a)}
.mw-cm-btn--primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(135deg,#0b4a48,#0f6f6a)}
.mw-cm-btn.is-recording{color:#fff;border-color:#b91c1c;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),#dc2626;animation:mw-cm-pulse 1.4s ease-in-out infinite}
[dir="rtl"] .mw-cm-btn .fa-paper-plane{transform:scaleX(-1)}
@keyframes mw-cm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
/* recording bar: slim WhatsApp-style strip inside the composer */
.mw-cm-host{position:relative}
.mw-cm-recbar{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:.6rem;padding:0 .7rem;background:#fff;border-radius:inherit;color:#0f5f5c}
.mw-cm-recbar[hidden]{display:none !important}
.mw-cm-rec-icon{flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;border-radius:50%;cursor:pointer;color:#64748b;font-size:16px;transition:color .15s,background .15s,transform .1s}
.mw-cm-rec-icon i{margin:0 !important;pointer-events:none}
.mw-cm-rec-icon:hover{background:rgba(15,95,92,.08)}
.mw-cm-rec-icon:active{transform:scale(.9)}
.mw-cm-rec-icon:focus-visible{outline:3px solid rgba(20,184,166,.45);outline-offset:1px}
.mw-cm-rec-cancel:hover{color:#dc2626;background:rgba(220,38,38,.08)}
.mw-cm-rec-send{color:#fff;background:linear-gradient(135deg,#0f5f5c,#14807a);font-size:14px}
.mw-cm-rec-send:hover{background:linear-gradient(135deg,#0b4a48,#0f6f6a)}
[dir="rtl"] .mw-cm-rec-send .fa-paper-plane{transform:scaleX(-1)}
.mw-cm-rec-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#ef4444;animation:mw-cm-dot 1.2s ease-in-out infinite}
.mw-cm-rec-time{flex:0 0 auto;min-width:2.6em;font-variant-numeric:tabular-nums;color:#334155;font-size:.85rem;font-weight:600}
.mw-cm-recbar.is-ending .mw-cm-rec-time{color:#dc2626}
.mw-cm-rec-wave{flex:1 1 auto;min-width:40px;width:100%;height:24px;display:block;color:#0f5f5c}
.mw-cm-recbar.is-holding .mw-cm-rec-cancel{animation:mw-cm-nudge 1s ease-in-out infinite}
.mw-cm-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@keyframes mw-cm-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes mw-cm-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
[dir="rtl"] .mw-cm-recbar.is-holding .mw-cm-rec-cancel{animation-name:mw-cm-nudge-rtl}
@keyframes mw-cm-nudge-rtl{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.mw-cm-rec-dot,.mw-cm-recbar.is-holding .mw-cm-rec-cancel,.mw-cm-btn.is-recording{animation:none}}
/* photo bubble */
.mw-cm-photo{display:block;padding:0;margin:.15rem 0;border:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden;max-width:100%;line-height:0}
.mw-cm-photo img{display:block;max-width:min(220px,100%);height:auto;max-height:220px;object-fit:cover;border-radius:10px;background:#e2e8f0}
.mw-cm-photo:focus-visible{outline:3px solid rgba(20,184,166,.55);outline-offset:2px}
.mw-cm-has-att{white-space:normal}
.mw-cm-caption{display:block;white-space:pre-wrap;margin-top:.25rem}
/* voice bubble: slim, WhatsApp style, inherits the bubble colour */
.mw-cm-voice{display:flex;align-items:center;gap:.45rem;min-width:180px;max-width:250px;height:28px;padding:0}
.mw-cm-play{flex:0 0 22px;width:22px;height:28px;border:0;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:.9}
.mw-cm-play:hover{opacity:1}
.mw-cm-play:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.mw-cm-play i{font-size:15px;margin:0}
.mw-cm-wave{flex:1;display:flex;align-items:center;gap:2px;height:20px;cursor:pointer;min-width:0}
.mw-cm-wbar{flex:1 1 0;min-width:2px;max-width:3px;border-radius:2px;background:currentColor;opacity:.35;transition:opacity .12s}
.mw-cm-wbar.is-played{opacity:.95}
.mw-cm-dur{font-size:.7rem;font-variant-numeric:tabular-nums;opacity:.8;min-width:2.4em;text-align:end}
/* lightbox */
.mw-cm-lightbox{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:rgba(2,6,23,.86);cursor:zoom-out}
.mw-cm-lightbox[hidden]{display:none}
.mw-cm-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:default}
.mw-cm-lb-close{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.mw-cm-lock,html.mw-cm-lock body{overflow:hidden}
.mw-cm-uploading{opacity:.6}
/* widget composer */
.mw-lc .mw-lc-compose{align-items:center;gap:.35rem;padding:.55rem .7rem}
.mw-lc .mw-lc-compose .mw-lc-send{padding:0 !important}
@media (max-width:380px){.mw-cm-btn{flex-basis:34px;width:34px !important;height:34px !important;min-width:34px;min-height:34px}.mw-cm-voice{min-width:150px}.mw-cm-recbar{gap:.4rem;padding:0 .45rem}}
