/* Elegant glassmorphic override for shared live-chat widget.
     Loaded *after* live-chat-global.js styles so these win without !important
     where possible, with !important on positioning/visual essentials. */
  #chatWidget { right: 28px !important; bottom: 28px !important; z-index: 100050 !important; }

  /* — Toggle button: gradient orb with breathing pulse + halo ring — */
  #chatToggleBtn {
    width: 62px !important; height: 62px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 25%, #818cf8 0%, #6366f1 40%, #4f46e5 75%, #3730a3 100%) !important;
    color: #fff !important;
    box-shadow:
      0 18px 38px -10px rgb(79,70,229,.65),
      0 6px 14px -4px rgb(15,23,42,.45),
      inset 0 1px 0 rgb(255,255,255,.35),
      inset 0 -8px 18px rgb(15,23,42,.25) !important;
    border: 1px solid rgb(255,255,255,.18) !important;
    position: relative !important;
    overflow: visible !important;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
    animation: erpChatBreathe 3.4s ease-in-out infinite;
  }

  #chatToggleBtn::before {
    content: '';
    position: absolute; inset: -10px;
    border-radius: 50%;
    background:
      conic-gradient(from 0deg,
        rgb(34,211,238,0)   0deg,
        rgb(34,211,238,.95) 70deg,
        rgb(168,85,247,1)   140deg,
        rgb(236,72,153,.0)  200deg,
        rgb(99,102,241,0)   240deg,
        rgb(56,189,248,.85) 300deg,
        rgb(168,85,247,.0)  360deg);
            -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 72%, transparent 76%);
                    mask: radial-gradient(circle, transparent 54%, #000 58%, #000 72%, transparent 76%);
    filter:
      blur(1.5px)
      drop-shadow(0 0 6px rgb(34,211,238,.7))
      drop-shadow(0 0 12px rgb(168,85,247,.55))
      drop-shadow(0 0 18px rgb(99,102,241,.45));
    opacity: .95;
    z-index: -1;
    animation: erpChatSpiral 4s linear infinite;
    pointer-events: none;
  }

  #chatToggleBtn::after {
    content: " ";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgb(165,180,252,.55);
    opacity: 0;
    animation: erpChatRing 2.6s ease-out infinite;
    pointer-events: none;
  }

  #chatToggleBtn:hover {
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow:
      0 24px 48px -10px rgb(79,70,229,.75),
      0 8px 18px -4px rgb(15,23,42,.55),
      inset 0 1px 0 rgb(255,255,255,.4) !important;
  }
  #chatToggleBtn:active { transform: translateY(-1px) scale(1.02) !important; }
  #chatToggleBtn:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 4px; }

  /* Toggle icon */
  #chatToggleBtn .erp-chat-icon {
    width: 26px; height: 26px;
    display: block;
    filter: drop-shadow(0 2px 3px rgb(15,23,42,.35));
    animation: erpChatIconWiggle 4.2s ease-in-out infinite;
  }
  #chatToggleBtn .erp-chat-icon .dot { transform-origin: center; animation: erpChatDots 1.6s ease-in-out infinite; }
  #chatToggleBtn .erp-chat-icon .dot.d2 { animation-delay: .2s; }
  #chatToggleBtn .erp-chat-icon .dot.d3 { animation-delay: .4s; }

  @keyframes erpChatBreathe {
    0%, 100% { box-shadow:
      0 18px 38px -10px rgb(79,70,229,.55),
      0 6px 14px -4px rgb(15,23,42,.45),
      inset 0 1px 0 rgb(255,255,255,.35),
      inset 0 -8px 18px rgb(15,23,42,.25); }

    50% { box-shadow:
      0 22px 46px -10px rgb(79,70,229,.78),
      0 8px 16px -4px rgb(15,23,42,.55),
      inset 0 1px 0 rgb(255,255,255,.45),
      inset 0 -8px 18px rgb(15,23,42,.25); }
  }

  @keyframes erpChatSpiral { to { transform: rotate(360deg); } }

  @keyframes erpChatRing {
    0%   { transform: scale(1);    opacity: .8; }
    80%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
  }

  @keyframes erpChatIconWiggle {
    0%, 88%, 100% { transform: rotate(0); }
    92% { transform: rotate(-9deg); }
    96% { transform: rotate(7deg); }
  }

  @keyframes erpChatDots {
    0%, 60%, 100% { transform: translateY(0); opacity: .55; }
    30%           { transform: translateY(-2px); opacity: 1; }
  }

  /* Notification badge */
  #chatToggleBtn .erp-chat-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg,#f97316,#ef4444);
    color: #fff;
    font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
    border: 2px solid #1e1b4b;
    box-shadow: 0 4px 10px rgb(239,68,68,.5);
    pointer-events: none;
  }

  /* Open state */
  #chatWidget.erp-chat-open #chatToggleBtn::before,
  #chatWidget.erp-chat-open #chatToggleBtn::after { animation: none; opacity: 0; }
  #chatWidget.erp-chat-open #chatToggleBtn { animation: none; }

  /* Window */
  #chatWindow {
    width: 380px !important;
    height: 540px !important;
    bottom: 80px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgb(15,23,42,.92), rgb(2,6,23,.96)) !important;
    border: 1px solid rgb(148,163,184,.18) !important;
    box-shadow:
      0 30px 70px -15px rgb(2,6,23,.7),
      0 12px 30px -8px rgb(2,6,23,.6),
      inset 0 1px 0 rgb(255,255,255,.06) !important;
            -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    transform-origin: bottom right;
  }

  #chatWidget.erp-chat-open #chatWindow {
    animation: erpChatPop .3s cubic-bezier(.34,1.56,.64,1) both;
  }

  @keyframes erpChatPop {
    0%   { opacity: 0; transform: translateY(12px) scale(.94); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
  }

  /* Header */
  #chatWindow .ec-head {
    padding: 14px 16px !important;
    background: linear-gradient(135deg,#4f46e5 0%, #6366f1 50%, #8b5cf6 100%) !important;
    border-bottom: 1px solid rgb(255,255,255,.08);
    position: relative;
  }

  #chatWindow .ec-head::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255,255,255,.25), transparent);
  }
  #chatWindow .ec-head strong { font-size: 14px !important; font-weight: 600; letter-spacing: .2px; }

  #chatWindow .ec-head small {
    font-size: 11px !important;
    display: inline-flex !important; align-items: center; gap: 6px;
  }

  #chatWindow .ec-head small::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgb(74,222,128,.7);
    animation: erpChatLive 1.8s ease-in-out infinite;
  }

  @keyframes erpChatLive {
    0%, 100% { box-shadow: 0 0 0 0 rgb(74,222,128,.6); }
    50%      { box-shadow: 0 0 0 6px rgb(74,222,128,0); }
  }

  #chatWindow .ec-close {
    width: 28px; height: 28px;
    border-radius: 8px !important;
    background: rgb(255,255,255,.12) !important;
    transition: background .2s ease, transform .2s ease;
  }
  #chatWindow .ec-close:hover { background: rgb(255,255,255,.22) !important; transform: rotate(90deg); }

  /* Messages */
  #chatMessages {
    height: 360px !important;
    padding: 14px !important;
    background: linear-gradient(180deg, rgb(15,23,42,.6), rgb(2,6,23,.85)) !important;
    scrollbar-width: thin;
    scrollbar-color: rgb(99,102,241,.4) transparent;
  }
  #chatMessages::-webkit-scrollbar { width: 6px; }
  #chatMessages::-webkit-scrollbar-thumb { background: rgb(99,102,241,.45); border-radius: 3px; }

  .ec-msg {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgb(0,0,0,.25);
    animation: erpChatMsgIn .25s ease-out both;
  }

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

  .ec-msg.customer {
    background: linear-gradient(135deg,#6366f1,#4f46e5) !important;
    border-bottom-right-radius: 4px !important;
  }

  .ec-msg.agent {
    background: rgb(30,41,59,.85) !important;
    border: 1px solid rgb(148,163,184,.2) !important;
    color: #e2e8f0 !important;
    border-bottom-left-radius: 4px !important;
  }

  .ec-msg.system {
    background: rgb(30,58,138,.25) !important;
    border: 1px dashed rgb(129,140,248,.45) !important;
    color: #c7d2fe !important;
    text-align: center; align-self: center; font-size: 12px !important;
  }

  /* Actions + form */
  .ec-actions {
    background: rgb(2,6,23,.6) !important;
    border-top: 1px solid rgb(148,163,184,.1) !important;
    padding: 10px 14px !important;
  }

  .ec-agent-btn {
    background: rgb(99,102,241,.15) !important;
    border: 1px solid rgb(99,102,241,.4) !important;
    color: #c7d2fe !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-size: 12px !important; font-weight: 500;
    transition: all .2s ease;
  }

  .ec-agent-btn:hover {
    background: rgb(99,102,241,.28) !important;
    border-color: rgb(99,102,241,.6) !important;
    transform: translateY(-1px);
  }

  #chatForm {
    background: rgb(2,6,23,.7) !important;
    border-top: 1px solid rgb(148,163,184,.1) !important;
    padding: 12px !important; gap: 10px !important;
  }

  #chatInput {
    background: rgb(15,23,42,.7) !important;
    border: 1px solid rgb(148,163,184,.2) !important;
    color: #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  #chatInput::-moz-placeholder { color: rgb(148,163,184,.6); }
  #chatInput::placeholder { color: rgb(148,163,184,.6); }

  #chatInput:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgb(99,102,241,.25) !important;
  }

  .ec-send-btn {
    background: linear-gradient(135deg,#6366f1,#4f46e5) !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgb(79,70,229,.4);
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .ec-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(79,70,229,.55); }

  @media (width <=640px) {
    #chatWidget,
    #chatToggleBtn,
    #chatWindow {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }