/* ===== Intercom-style support messenger ===== */
:root {
  --im-blue: #003798;
  --im-blue-dark: #00296e;
  --im-bg: #fff;
  --im-muted: #697386;
  --im-border: #e3e8ee;
  --im-user-bubble: #003798;
  --im-agent-bubble: #f2f4f7;
  --im-ease: cubic-bezier(.16,1,.3,1);
}

/* Launcher */
.im-launcher{
  position:fixed; bottom:20px; right:20px; z-index:2147483000;
  border:none; border-radius:100px; cursor:pointer;
  height:52px; min-width:52px; padding:0 20px;
  display:flex; align-items:center; gap:9px;
  background:#003798; color:#fff;
  font-family:Inter,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:14px; font-weight:600;
  box-shadow:0 4px 14px rgba(0,45,110,.32);
  transition:transform .2s var(--im-ease), box-shadow .2s var(--im-ease);
  animation: im-pop .4s var(--im-ease) both;
}
.im-launcher:hover{ transform:translateY(-2px); box-shadow:0 7px 20px rgba(0,45,110,.4); }
.im-launcher .im-ic{ width:22px; height:22px; flex-shrink:0; }
.im-launcher .im-unread{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px;
  background:#ff4747; color:#fff; border-radius:9px; font-size:11px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 5px;
  border:2px solid #fff;
}
.im-launcher.has-unread .im-unread{ display:flex; }

@keyframes im-pop{ from{ opacity:0; transform:translateY(10px) scale(.9);} to{ opacity:1; transform:translateY(0) scale(1);} }

/* Window */
.im-window{
  position:fixed; bottom:84px; right:20px; z-index:2147483000;
  width:376px; max-width:calc(100vw - 32px); height:580px; max-height:calc(100vh - 110px);
  background:#fff; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 12px 44px rgba(16,24,40,.25), 0 1px 3px rgba(16,24,40,.1);
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .22s var(--im-ease), transform .22s var(--im-ease);
}
.im-window.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Header */
.im-header{
  padding:16px 18px 14px; display:flex; align-items:center; gap:11px;
  background:#fff; border-bottom:1px solid var(--im-border);
}
.im-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#003798,#0057b3); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; letter-spacing:.3px;
}
.im-header-meta{ flex:1; min-width:0; }
.im-header-name{ font-size:14.5px; font-weight:700; color:#0a0f1c; line-height:1.2; }
.im-header-status{ font-size:12px; color:#0e9f6e; display:flex; align-items:center; gap:5px; margin-top:2px; }
.im-header-status .dot{ width:7px; height:7px; border-radius:50%; background:#0e9f6e; animation: im-breathe 2.2s ease-in-out infinite; }
@keyframes im-breathe{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
.im-actions{ display:flex; align-items:center; gap:4px; }
.im-min{ background:none; border:none; color:#687385; font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:6px; }
.im-min:hover{ background:#f2f4f7; }

/* Home card */
.im-home{ padding:20px 18px; flex:1; overflow-y:auto; }
.im-home .im-greet{
  background:linear-gradient(135deg,#003798,#0057b3); color:#fff;
  border-radius:14px; padding:18px 16px; margin-bottom:18px;
  animation: im-pop .4s var(--im-ease) both;
}
.im-home .im-greet .h{ font-size:15px; font-weight:700; margin-bottom:6px; }
.im-home .im-greet .s{ font-size:13px; line-height:1.45; opacity:.94; }
.im-qr-label{ font-size:12px; font-weight:600; color:var(--im-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.im-qr{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--im-border); border-radius:100px;
  padding:8px 15px; margin:0 6px 8px 0; background:#fff; cursor:pointer;
  font-size:13.5px; color:#0a0f1c; font-family:inherit; font-weight:500;
  transition:border-color .15s, background .15s, transform .12s var(--im-ease);
  animation: fadeUp .35s var(--im-ease) both;
}
.im-qr:hover{ border-color:#003798; background:#f5f8ff; }
.im-qr:active{ transform:scale(.97); }

/* Thread */
.im-thread{ flex:1; overflow-y:auto; padding:16px 16px 8px; background:#fff; display:none; flex-direction:column; gap:10px; }
.im-thread.on{ display:flex; }
.im-msg{ max-width:82%; padding:10px 14px; font-size:14px; line-height:1.5; word-wrap:break-word; animation: fadeUp .3s var(--im-ease) both; }
.im-msg.agent{ align-self:flex-start; background:var(--im-agent-bubble); color:#0a0f1c; border-radius:16px 16px 16px 4px; }
.im-msg.user{ align-self:flex-end; background:var(--im-user-bubble); color:#fff; border-radius:16px 16px 4px 16px; }
.im-msg b{ font-weight:600; }
.im-msg .im-phone{ font-weight:700; color:#003798; white-space:nowrap; }
.im-row{ display:flex; align-items:flex-end; gap:8px; max-width:82%; align-self:flex-start; animation: fadeUp .3s var(--im-ease) both; }
.im-row .im-avatar{ width:24px; height:24px; font-size:10px; }

/* typing indicator */
.im-typing{ display:none; align-items:center; gap:5px; padding:12px 16px; align-self:flex-start; background:var(--im-agent-bubble); border-radius:16px 16px 16px 4px; animation: fadeUp .3s var(--im-ease) both; }
.im-typing.on{ display:flex; }
.im-typing span{ width:6px; height:6px; background:#8a94a6; border-radius:50%; animation: im-tp 1.2s infinite; }
.im-typing span:nth-child(2){ animation-delay:.18s; } .im-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes im-tp{ 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

/* Composer */
.im-composer{ display:none; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--im-border); background:#fff; }
.im-composer.on{ display:flex; }
.im-composer input{
  flex:1; border:1px solid var(--im-border); border-radius:100px;
  padding:10px 16px; font-size:14px; font-family:inherit; color:#0a0f1c;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.im-composer input:focus{ border-color:#003798; box-shadow:0 0 0 3px rgba(0,55,152,.12); }
.im-send{
  width:40px; height:40px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  background:#003798; color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .12s var(--im-ease);
}
.im-send:hover{ background:#00296e; }
.im-send:active{ transform:scale(.93); }
.im-send svg{ width:18px; height:18px; }
.im-send:disabled{ background:#c3cbd6; cursor:default; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width:420px){
  .im-window{ right:8px; bottom:76px; width:calc(100vw - 16px); }
  .im-launcher{ right:12px; }
}