/* ===== Chat widget styles (copied & slightly adjusted) ===== */

:root{
  --bg:#f7f8fa;--panel:#fff;--muted:#8a8f98;--ink:#1f2a37;--accent:#0a8f7a;--sep:#e5e7eb;
  --shadow:0 24px 50px rgba(2,6,23,.18);--bubble:#fff;--bubble-me:#e9fff7;--bubble-me-border:#b7f0e3;
}
*{box-sizing:border-box}

/* IMPORTANT: do not override global font/background of Angular app */
body{overflow-x:hidden;}

/* launcher */
.chat-launcher{position:fixed;right:18px;bottom:18px;z-index:2147483000}
.launcher-btn{
  width:56px;height:56px;border-radius:50%;border:0;background:var(--accent);color:#fff;
  box-shadow:0 10px 24px rgba(10,143,122,.35);cursor:pointer;font-size:22px;display:grid;place-items:center;
  transition:all .28s ease;position:relative;overflow:hidden
}
.launcher-btn:hover{transform:scale(1.1);background:#0c9b85}
.launcher-btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(10,143,122,.4);
  animation:pulse 2s infinite
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(10,143,122,.4)}
  70%{box-shadow:0 0 0 22px rgba(10,143,122,0)}
  100%{box-shadow:0 0 0 0 rgba(10,143,122,0)}
}
.launcher-badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:12px;padding:0 6px;border:2px solid #fff}
.hide{display:none!important}

/* widget */
.widget{
  position:fixed;
  right:18px;
  bottom:10px;
  width:min(92vw,380px);
  height:min(76vh,640px);
  border-radius:18px;
  box-shadow:var(--shadow);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:2147483000
}
.header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--sep);background:#fff}
.agent{display:flex;align-items:center;gap:10px}
.agent .avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.agent .avatar img{width:100%;height:100%;object-fit:cover}
.agent .name{font-weight:700}
.agent .role{font-size:12px;color:var(--muted)}
.header .spacer{flex:1}
.header .btn{border:0;background:transparent;font-size:18px;cursor:pointer;color:#6b7280}
.chip.active{ background:#e9fff7; border-color:#b7f0e3 }

/* Network bar */
.netbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--sep);background:#fff;font-size:12px}
.netbar .dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.netbar .label{font-weight:700}
.netbar .spacer{flex:1}
.netbar {
  display:none;
}
.state-ok{color:#10b981}
.state-connecting{color:#f59e0b}
.state-reconnecting{color:#f59e0b}
.state-offline{color:#ef4444}

.scroll{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#fafbfc,#f3f5f7);
  padding:10px;
}
.scroll.centered{justify-content:center;align-items:center}

/* prechat */
.prechat{width:100%;max-width:360px}
.pcard{
  width:100%;background:#fff;border:1px solid #E5E7EB;border-radius:14px;
  box-shadow:0 12px 32px rgba(2,6,23,.08);padding:14px
}
.pcard-title{font-size:15px;margin:6px 6px 10px;color:#2b2f36;text-align:center}
.pfield{margin:8px 6px}
.pfield label{display:block;margin-bottom:6px;font-weight:700;font-size:14px}
.pfield input{
  width:100%;padding:11px;border-radius:12px;border:2px solid #cfe9e5;outline:none;font-size:14px;background:#fff
}
.pfield input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0a8f7a22}
.pbtn{
  display:block;width:100%;max-width:260px;margin:14px auto 2px auto;background:var(--accent);color:#fff;border:0;
  padding:11px 14px;border-radius:14px;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(10,143,122,.25);
  transition:transform .15s ease,box-shadow .15s ease
}
.pbtn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(10,143,122,.30)}

/* messages */
.pad{
  padding:4px 2px 12px 2px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.row{position:relative;display:flex;gap:8px;align-items:flex-end;animation:in .22s ease-out}
.row.me{justify-content:flex-end}
.row .avatar-left{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:0 0 auto}
.row .avatar-left img{width:100%;height:100%;object-fit:cover}
.pad .bubble{
  background:var(--bubble);border-radius:14px;padding:8px 10px;max-width:82%;min-width: 70%;
  box-shadow:0 8px 22px rgba(2,6,23,.08);line-height:1.5;white-space:pre-wrap;word-break:break-word;font-size:14px
}
.row.me .bubble{background:var(--bubble-me);border:1px solid var(--bubble-me-border)}
.meta{margin-top:4px;font-size:10.5px;color:#9aa0aa}
.system{
  display:none;
  align-self:center;color:#6b7280;background:#fff;border:1px dashed #e5e7eb;font-size:12px;
  padding:4px 8px;border-radius:10px;margin:6px 0;opacity:.92;text-align:center
}
.row.me .tools .react-toggle{display: none}
/* reactions */
.bubble .tools{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.react-toggle{border:1px solid #e5e7eb;background:#fff;border-radius:999px;font-size:12px;padding:3px 8px;cursor:pointer;opacity:.9}
.reactions{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #e5e7eb;background:#fff;border-radius:999px;font-size:12px;padding:3px 8px;display:inline-flex;align-items:center;gap:6px}
.chip small{color:#6b7280}
.popover{position:absolute;bottom:100%;transform:translateY(-6px);right:6px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 28px rgba(2,6,23,.1);padding:6px;display:none;flex-wrap:wrap}
.popover.open{display:flex;gap:4px}
.emoji-btn{border:0;background:transparent;cursor:pointer;font-size:18px;padding:4px;border-radius:8px}
.emoji-btn:hover{background:#f3f4f6}

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

/* composer */
.composer{
  border-top:1px solid var(--sep);
  background:#fff;
  padding:10px;
  display:none;
  gap:8px;
  align-items:center;
  box-shadow:0 -10px 24px rgba(2,6,23,.06);
  flex-wrap:nowrap;
  flex-shrink:0;
}
.composer .input{flex:1;position:relative;border:2px solid #0a8f7a33;border-radius:22px;padding:6px 10px;background:#fff;box-shadow:inset 0 0 0 1px #0a8f7a1a}
.composer textarea{width:100%;border:0;outline:none;resize:none;min-height:22px;max-height:120px;font-size:14px;line-height:1.5}
.btn-ico{width:34px;height:34px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.btn-send{background:var(--accent);color:#fff;width:40px;height:40px;border-radius:50%;border:0;font-size:18px;cursor:pointer;box-shadow:0 8px 20px rgba(10,143,122,.35);transition:.15s}
.btn-send:active{transform:translateY(1px)}

/* Responsive */
@media (max-width:520px){
  .widget{
    right:10px;left:10px;width:auto;height:min(85vh,100vh-120px);
    border-radius:16px;
  }
  .bubble{max-width:88%}
  .pcard{padding:12px}
  .pfield input{padding:10px}
  .header{padding:8px 10px}
  .composer{padding:8px 6px}
  .composer textarea{font-size:13px}
}
@media (max-width:360px){
  .widget{height:calc(100vh - 100px);bottom:80px}
  .composer .btn-ico{width:30px;height:30px}
  .btn-send{width:34px;height:34px;font-size:16px}
  .bubble{font-size:13px}
}

.bubble { position: relative; }
.popover{
  position:absolute; bottom:100%; transform: translateY(-6px);
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 12px 28px rgba(2,6,23,.1); padding:6px;display:none;flex-wrap:wrap;z-index:10;
}
.row.me .popover{ right:6px; left:auto; }
.row:not(.me) .popover{ left:6px; right:auto; }