/* ============================================================================
   JOEG Chat — a WhatsApp-authentic chat widget (framework-free).
   ONE stylesheet, TWO mounts: full-screen (the sim) + floating launcher (the
   landing pages). Light + dark (prefers-color-scheme + [data-joeg-theme]),
   mobile-first (390px) → desktop. No external assets (CSP-safe): the doodle
   background + all glyphs are inline SVG data-URIs.
   ============================================================================ */

.joeg-cw, .joeg-cw *, .joeg-cw *::before, .joeg-cw *::after { box-sizing: border-box; }

.joeg-cw {
  /* WhatsApp-accurate palette (light) */
  --wa-green:#008069;            /* header / send button */
  --wa-green-d:#017561;
  --wa-out:#d9fdd3;              /* outgoing bubble */
  --wa-out-tick:#53bdeb;         /* blue read tick */
  --wa-in:#ffffff;               /* incoming bubble */
  --wa-bg:#efeae2;               /* thread background */
  --wa-panel:#f0f2f5;            /* header / composer bars */
  --wa-ink:#111b21;
  --wa-sub:#667781;              /* timestamps, presence */
  --wa-line:rgba(0,0,0,.08);
  --wa-shadow:0 1px .5px rgba(11,20,26,.13);
  --wa-radius:7.5px;
  --joeg-brass:#c6a56a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--wa-ink);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  .joeg-cw:not([data-joeg-theme="light"]) {
    --wa-green:#00a884; --wa-green-d:#008069;
    --wa-out:#005c4b; --wa-out-tick:#53bdeb;
    --wa-in:#202c33; --wa-bg:#0b141a; --wa-panel:#202c33;
    --wa-ink:#e9edef; --wa-sub:#8696a0; --wa-line:rgba(255,255,255,.08);
    --wa-shadow:0 1px .5px rgba(0,0,0,.35);
  }
}
.joeg-cw[data-joeg-theme="dark"] {
  --wa-green:#00a884; --wa-green-d:#008069;
  --wa-out:#005c4b; --wa-out-tick:#53bdeb;
  --wa-in:#202c33; --wa-bg:#0b141a; --wa-panel:#202c33;
  --wa-ink:#e9edef; --wa-sub:#8696a0; --wa-line:rgba(255,255,255,.08);
  --wa-shadow:0 1px .5px rgba(0,0,0,.35);
}

/* ---------- Launcher (floating bubble) ---------- */
.joeg-launcher {
  position: fixed; z-index: 2147483000; right: 20px; bottom: 20px;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--wa-green); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .18s ease, box-shadow .18s ease;
}
.joeg-launcher:hover { transform: scale(1.06); }
.joeg-launcher:active { transform: scale(.96); }
.joeg-launcher svg { width: 30px; height: 30px; }
.joeg-launcher .joeg-unread {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700;
  display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--wa-bg);
}
.joeg-launcher.has-unread .joeg-unread { display: flex; }
@media (max-width: 480px){ .joeg-launcher{ right:16px; bottom:16px; width:56px; height:56px; } }

/* ---------- Panel (overlay window in launcher mode; fills the box in fullscreen) ---------- */
.joeg-panel {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--wa-bg); color: var(--wa-ink);
}
.joeg-cw--launcher .joeg-panel {
  position: fixed; z-index: 2147483001; right: 20px; bottom: 20px;
  width: 400px; height: min(640px, calc(100vh - 40px));
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.joeg-cw--launcher.is-open .joeg-panel { opacity: 1; transform: none; pointer-events: auto; }
.joeg-cw--fullscreen .joeg-panel { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 480px){
  .joeg-cw--launcher .joeg-panel{
    right:0; bottom:0; width:100vw; height:100dvh; height:100vh; border-radius:0;
  }
  .joeg-cw--launcher.is-open ~ .joeg-launcher, .joeg-cw--launcher.is-open .joeg-launcher{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .joeg-cw--launcher .joeg-panel{ transition:none; }
  .joeg-launcher{ transition:none; }
}

/* ---------- Header ---------- */
.joeg-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--wa-panel); border-bottom: 1px solid var(--wa-line);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.joeg-head .joeg-back { display: none; border: 0; background: none; color: var(--wa-ink); cursor: pointer; padding: 4px; }
.joeg-cw--launcher .joeg-head .joeg-back { display: inline-flex; }
.joeg-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--joeg-brass); color: #1a1a1a; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.joeg-head-txt { flex: 1; min-width: 0; line-height: 1.25; }
.joeg-head-name { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; }
.joeg-verified { width: 15px; height: 15px; color: var(--wa-green); flex: 0 0 auto; }
.joeg-presence { font-size: 12.5px; color: var(--wa-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joeg-presence.is-typing { color: var(--wa-green); }
.joeg-head-actions { display: flex; gap: 4px; }
.joeg-icon-btn { border: 0; background: none; color: var(--wa-sub); cursor: pointer; padding: 8px; border-radius: 50%; display: inline-flex; }
.joeg-icon-btn:hover { background: rgba(0,0,0,.05); }
@media (prefers-color-scheme: dark){ .joeg-cw:not([data-joeg-theme="light"]) .joeg-icon-btn:hover{ background:rgba(255,255,255,.06);} }

/* ---------- Thread ---------- */
.joeg-thread {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 6% 8px;
  background-color: var(--wa-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%23000' stroke-opacity='0.03' stroke-width='1.5'><circle cx='18' cy='18' r='6'/><path d='M42 12l8 8-8 8'/><path d='M8 50c6-6 12-6 18 0'/><circle cx='56' cy='52' r='4'/><path d='M30 44h14'/></g></svg>");
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){ .joeg-thread{ scroll-behavior:auto; } }
.joeg-datepill-wrap { display: flex; justify-content: center; margin: 6px 0 10px; }
.joeg-datepill {
  background: var(--wa-panel); color: var(--wa-sub); font-size: 12.5px; font-weight: 500;
  padding: 5px 12px; border-radius: 8px; box-shadow: var(--wa-shadow); text-transform: none;
}

/* rows + bubbles */
.joeg-row { display: flex; margin: 2px 0; }
.joeg-row.out { justify-content: flex-end; }
.joeg-row.in  { justify-content: flex-start; }
.joeg-bubble {
  position: relative; max-width: 82%; padding: 6px 9px 8px; border-radius: var(--wa-radius);
  box-shadow: var(--wa-shadow); font-size: 14.6px; line-height: 1.32; word-wrap: break-word;
  white-space: pre-wrap; animation: joeg-pop .18s ease;
}
@keyframes joeg-pop { from { transform: translateY(4px) scale(.98); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .joeg-bubble{ animation:none; } }
.joeg-row.out .joeg-bubble { background: var(--wa-out); border-top-right-radius: 0; }
.joeg-row.in  .joeg-bubble { background: var(--wa-in);  border-top-left-radius: 0; }
/* bubble tails */
.joeg-row.out .joeg-bubble::after, .joeg-row.in .joeg-bubble::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
}
.joeg-row.out .joeg-bubble::after {
  right: -8px; background: var(--wa-out);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}
.joeg-row.in .joeg-bubble::before {
  left: -8px; background: var(--wa-in);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.joeg-bubble .joeg-meta {
  float: right; margin: 6px 0 -2px 8px; font-size: 11px; color: var(--wa-sub);
  display: inline-flex; align-items: center; gap: 3px; user-select: none;
}
.joeg-ticks { width: 16px; height: 11px; color: var(--wa-sub); }
.joeg-ticks.read { color: var(--wa-out-tick); }

/* typing indicator bubble */
.joeg-typing { display: none; }
.joeg-typing.show { display: flex; }
.joeg-typing .joeg-bubble { padding: 11px 13px; }
.joeg-dots { display: inline-flex; gap: 4px; align-items: center; height: 8px; }
.joeg-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-sub); animation: joeg-blink 1.3s infinite; }
.joeg-dots i:nth-child(2){ animation-delay:.2s } .joeg-dots i:nth-child(3){ animation-delay:.4s }
@keyframes joeg-blink { 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)} }
@media (prefers-reduced-motion: reduce){ .joeg-dots i{ animation:none; opacity:.6; } }

/* voice-note bubble */
.joeg-voice { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.joeg-voice .joeg-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--wa-green); color: #fff; display: grid; place-items: center; }
.joeg-voice .joeg-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.joeg-voice .joeg-wave span { flex: 1; background: var(--wa-sub); opacity: .5; border-radius: 2px; min-width: 2px; }
.joeg-voice .joeg-wave span.on { background: var(--wa-green); opacity: 1; }
.joeg-voice .joeg-vdur { font-size: 11px; color: var(--wa-sub); min-width: 30px; }

/* image bubble */
.joeg-imgbub { padding: 3px 3px 4px; }
.joeg-imgbub img { display: block; max-width: 240px; width: 100%; border-radius: 5px; cursor: zoom-in; }
.joeg-imgbub .joeg-cap { padding: 4px 6px 0; }

/* document card (an <a> when the PDF is servable → tap to open/download) */
.joeg-doc { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 4px 2px; text-decoration: none; color: inherit; }
a.joeg-doc:hover .joeg-docname { text-decoration: underline; }
a.joeg-doc:active { opacity: .7; }
.joeg-doc .joeg-docicon { flex: 0 0 auto; width: 38px; height: 44px; display: grid; place-items: center; color: #d33; }
.joeg-doc .joeg-docmeta { min-width: 0; }
.joeg-doc .joeg-docname { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joeg-doc .joeg-docsub { font-size: 12px; color: var(--wa-sub); }

/* quick-reply chips (used sparingly for slot picking) */
.joeg-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 4px 0 6px; }
.joeg-chip { border: 1px solid var(--wa-green); background: transparent; color: var(--wa-green); font-size: 13px; padding: 6px 12px; border-radius: 16px; cursor: pointer; }
.joeg-chip:hover { background: var(--wa-green); color: #fff; }

/* system / status line (e.g. reconnexion…) */
.joeg-sys { display: flex; justify-content: center; margin: 6px 0; }
.joeg-sys span { font-size: 12px; color: var(--wa-sub); background: var(--wa-panel); padding: 4px 10px; border-radius: 8px; box-shadow: var(--wa-shadow); }

/* ---------- Composer ---------- */
.joeg-composer {
  display: flex; align-items: flex-end; gap: 6px; padding: 7px 10px;
  background: var(--wa-panel); border-top: 1px solid var(--wa-line);
  padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
}
.joeg-inputwrap { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--wa-in); border-radius: 22px; padding: 4px 6px 4px 12px; min-height: 42px; }
.joeg-input { flex: 1; border: 0; outline: 0; background: none; color: var(--wa-ink); font-size: 15px; resize: none; max-height: 96px; line-height: 1.35; padding: 8px 0; font-family: inherit; }
.joeg-input::placeholder { color: var(--wa-sub); }
.joeg-attach, .joeg-emoji { border: 0; background: none; color: var(--wa-sub); cursor: pointer; padding: 6px; display: inline-flex; border-radius: 50%; }
.joeg-sendbtn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--wa-green); color: #fff; display: grid; place-items: center; transition: transform .12s ease;
}
.joeg-sendbtn:active { transform: scale(.9); }
.joeg-sendbtn svg { width: 22px; height: 22px; }

/* recording overlay (hold-to-record) */
.joeg-recording { display: none; flex: 1; align-items: center; gap: 10px; padding: 0 6px; }
.joeg-recording.show { display: flex; }
.joeg-recording .joeg-recdot { width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; animation: joeg-recpulse 1s infinite; }
@keyframes joeg-recpulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.joeg-recording .joeg-rectime { font-variant-numeric: tabular-nums; color: var(--wa-ink); font-size: 15px; }
.joeg-recording .joeg-recslide { flex: 1; color: var(--wa-sub); font-size: 13.5px; text-align: center; }
.joeg-recording .joeg-reccancel { border: 0; background: none; color: #ff3b30; font-weight: 600; cursor: pointer; font-size: 14px; }
.joeg-mic.recording { color: #ff3b30; }

/* image zoom lightbox */
.joeg-lightbox { position: fixed; inset: 0; z-index: 2147483002; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; padding: 20px; }
.joeg-lightbox.show { display: flex; }
.joeg-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.joeg-lightbox .joeg-lbclose { position: absolute; top: 16px; right: 16px; border: 0; background: rgba(255,255,255,.15); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; }

/* empty-state hint above the first bubble */
.joeg-encnote { display: flex; justify-content: center; margin: 8px 0 12px; }
.joeg-encnote span { font-size: 11.5px; color: var(--wa-sub); background: color-mix(in srgb, var(--wa-panel) 85%, transparent); padding: 5px 12px; border-radius: 8px; text-align: center; max-width: 88%; }

.joeg-visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }