/* 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. */
:root {
  /* Brand orb: cyan → indigo → magenta (not the green Workforce KPI). */
  --erp-chat-orb-cyan: #38bdf8;
  --erp-chat-orb-indigo: #6366f1;
  --erp-chat-orb-pink: #ec4899;
  --erp-chat-orb-bg: radial-gradient(circle at 30% 26%, #7dd3fc 0%, #6366f1 48%, #db2777 100%);
  --erp-chat-orb-border: rgba(196, 181, 253, 0.55);
  --erp-chat-icon-ink: #ffffff;
}

  #chatWidget { right: 28px !important; bottom: 28px !important; z-index: 100050 !important; }

  /* — Toggle button: brand gradient fill + white chat icon — */
  #chatToggleBtn {
    width: 62px !important; height: 62px !important;
    border-radius: 50% !important;
    background: var(--erp-chat-orb-bg) !important;
    background-color: var(--erp-chat-orb-indigo) !important;
    color: var(--erp-chat-icon-ink) !important;
    box-shadow:
      0 20px 42px -8px rgba(99, 102, 241, 0.45),
      0 10px 24px -6px rgb(15,23,42,.55),
      0 4px 12px rgb(236, 72, 153, .28),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -8px 18px rgba(79, 70, 229, 0.18) !important;
    border: 1px solid var(--erp-chat-orb-border) !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,
        rgba(56, 189, 248, 0)   0deg,
        rgba(56, 189, 248, .8)  70deg,
        rgba(99, 102, 241, 1)  140deg,
        rgba(236, 72, 153, 0)  200deg,
        rgba(236, 72, 153, 0)  240deg,
        rgba(236, 72, 153, .75) 300deg,
        rgba(56, 189, 248, 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 rgba(56, 189, 248, .55))
      drop-shadow(0 0 12px rgba(99, 102, 241, .5))
      drop-shadow(0 0 18px rgba(236, 72, 153, .35));
    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 rgba(167, 139, 250, .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 28px 52px -8px rgba(99, 102, 241, .55),
      0 14px 28px -6px rgb(15,23,42,.6),
      0 6px 16px rgba(236, 72, 153, .35),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  #chatToggleBtn:active { transform: translateY(-1px) scale(1.02) !important; }
  #chatToggleBtn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

  /* Toggle icon */
  #chatToggleBtn .erp-chat-icon {
    width: 26px; height: 26px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35));
    animation: erpChatIconWiggle 4.2s ease-in-out infinite;
  }

  #chatToggleBtn .erp-chat-icon path,
  #chatToggleBtn .erp-chat-icon .dot {
    fill: var(--erp-chat-icon-ink) !important;
  }

  #chatToggleBtn .erp-chat-icon path {
    stroke: rgba(255, 255, 255, 0.85) !important;
  }

  #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 rgba(99, 102, 241, .32),
      0 6px 14px -4px rgb(15,23,42,.45),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -8px 18px rgba(236, 72, 153, 0.1); }

    50% { box-shadow:
      0 22px 46px -10px rgba(99, 102, 241, .5),
      0 8px 16px -4px rgb(15,23,42,.55),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -8px 18px rgba(236, 72, 153, 0.16); }
  }

  @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 — pin to the viewport so a 540px sheet cannot climb above
     the visible top (short laptops, tablets, and phones all clip the X). */
  #chatWindow {
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    top: auto !important;
    width: 380px !important;
    max-width: calc(100vw - 24px) !important;
    height: min(540px, calc(100dvh - 88px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: column !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%);
            -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    transform-origin: bottom right;
  }

  #chatWidget.erp-chat-open #chatWindow {
    display: flex !important;
    flex-direction: column !important;
    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 — flex so the thread shrinks when the sheet is height-capped. */
  #chatMessages {
    flex: 1 1 auto !important;
    min-height: 120px !important;
    height: auto !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); }

  /* Landing visitors must be able to open and close chat on phones/tablets.
     erp-mobile-shell-fix.css hides the widget at ≤900px for in-app chrome. */
  @media (width <= 900px) {
    html[data-active-module="landing"]:not(.erp-nav-drawer-open):not([data-active-shell-mode="app"]) #chatWidget,
    html[data-active-module="landing"]:not(.erp-nav-drawer-open):not([data-active-shell-mode="app"]) #chatToggleBtn {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      width: auto !important;
      height: auto !important;
      overflow: visible !important;
    }
  }

  @media (width <= 900px), (height <= 760px) {
    /* Anchor the header (and its close control) to the visible top, and the
       composer above the floating toggle. 100vh on mobile includes browser
       chrome, so top+bottom — not a vh height — keeps the X on screen. */
    #chatWidget {
      right: max(12px, env(safe-area-inset-right, 0px)) !important;
      bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    #chatToggleBtn { width: 52px !important; height: 52px !important; }
    #chatToggleBtn .erp-chat-icon { width: 22px; height: 22px; }

    #chatWindow {
      position: fixed !important;
      left: 8px !important;
      right: 8px !important;
      top: max(8px, env(safe-area-inset-top, 0px)) !important;
      bottom: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))) !important;
      width: auto !important;
      max-width: none !important;
      height: auto !important;
      max-height: min(68dvh, calc(100dvh - 88px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
      flex-direction: column !important;
      transform-origin: bottom center;
    }

    #chatMessages {
      flex: 1 1 auto !important;
      min-height: 120px !important;
      height: auto !important;
    }
  }

  @media (width <= 640px) {
    #chatToggleBtn { width: 52px !important; height: 52px !important; }
  }

body.modal-open #chatWidget { z-index: 1030 !important; }
body.modal-open #chatWidget #chatWindow { display: none !important; }