/* Azmat Cables Agent — front-end widget, bottom-left, every page.
   Deliberately scoped to #azmat-agent-* so it cannot restyle the theme.
   Bottom-left: WhatsApp sits bottom-right and the social rail is on the
   right edge, so the left side is free. On phones the panel fits the
   viewport and stays clear of the fixed mobile bottom menu. */
/* v1.0.15 beauty: the panel no longer snaps open with display:none —
   it slides up and fades in, and fades out the same way. visibility +
   pointer-events keep the closed panel from catching clicks. */
#azmat-agent-toggle {
    position: fixed; left: 18px; bottom: 18px; z-index: 99990;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    /* v1.0.16: subtle vertical gloss on the Azmat red, not flat. */
    background: linear-gradient(180deg, #f31a3c 0%, #ef0d33 45%, #d80b2e 100%);
    color: #fff; font-size: 26px; line-height: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
#azmat-agent-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
@keyframes azmat-pulse {
    0% { box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 0 rgba(239,13,51,.45); }
    70% { box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 14px rgba(239,13,51,0); }
    100% { box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 0 rgba(239,13,51,0); }
}
#azmat-agent-toggle.azmat-attention { animation: azmat-pulse 2s ease-out 3; }
/* v1.0.16 liquid glass, restrained: the panel is frosted white over
   the page, not transparent. Default is near-solid white, so browsers
   without backdrop-filter still get a clean panel; the @supports block
   below adds the blur where it works. Header stays solid black and
   bubbles stay solid, so text is always readable. */
#azmat-agent-panel {
    position: fixed; left: 18px; bottom: 86px; z-index: 99990;
    width: 360px; max-width: calc(100vw - 36px); height: 480px; max-height: calc(100vh - 120px);
    background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.65); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #222;
    visibility: hidden; opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
#azmat-agent-panel.azmat-open {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #azmat-agent-panel {
        background: rgba(255,255,255,.85);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        backdrop-filter: blur(12px) saturate(150%);
    }
}
@media (prefers-reduced-transparency: reduce) {
    #azmat-agent-panel {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
#azmat-agent-head {
    background: #111; color: #fff; padding: 12px 14px; display: flex;
    justify-content: space-between; align-items: center; font-weight: bold;
}
#azmat-agent-head small { display: block; font-weight: normal; font-size: 12px; color: #ccc; }
#azmat-agent-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
/* v1.0.16 welcome block: centred badge, greeting and full-width
   starter topic rows. Shown on first open only; send() hides it. */
#azmat-agent-welcome { padding: 20px 16px 8px; text-align: center; }
#azmat-agent-welcome.azmat-gone { display: none; }
.azmat-welcome-icon {
    width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px;
    background: #ef0d33; color: #fff; font-size: 26px; line-height: 56px;
    box-shadow: 0 6px 18px rgba(239,13,51,.35);
}
.azmat-welcome-title { font-weight: bold; font-size: 16px; color: #111; margin-bottom: 4px; }
.azmat-welcome-sub { font-size: 13px; color: #666; margin-bottom: 14px; }
.azmat-welcome-topics { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.azmat-welcome-topic {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: #fff; border: 1px solid #ddd; border-radius: 12px;
    padding: 11px 14px; font-size: 13px; color: #222; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.azmat-welcome-topic:hover { border-color: #ef0d33; background: #fff5f6; }
.azmat-welcome-chev { color: #ef0d33; font-size: 18px; line-height: 1; }
#azmat-agent-messages { flex: 1; overflow-y: auto; padding: 12px; }
@keyframes azmat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
#azmat-agent-messages .azmat-msg { margin: 0 0 10px; padding: 9px 11px; border-radius: 12px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; animation: azmat-msg-in .25s ease both; }
/* v1.0.15 typing indicator: three bouncing dots while the reply loads. */
#azmat-agent-messages .azmat-typing span {
    display: inline-block; width: 7px; height: 7px; margin-right: 3px;
    border-radius: 50%; background: #999; animation: azmat-blink 1.2s infinite;
}
#azmat-agent-messages .azmat-typing span:nth-child(2) { animation-delay: .2s; }
#azmat-agent-messages .azmat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes azmat-blink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}
#azmat-agent-messages .azmat-user { background: #ef0d33; color: #fff; margin-left: 30px; }
#azmat-agent-messages .azmat-agent { background: #f2f2f2; margin-right: 30px; }
#azmat-agent-messages .azmat-agent a { color: #0b5fa5; }
#azmat-agent-suggest { padding: 0 12px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
#azmat-agent-suggest button {
    background: #f2f2f2; border: 1px solid #ddd; border-radius: 20px;
    padding: 8px 14px; font-size: 12px; cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
#azmat-agent-suggest button:hover { background: #e8e8e8; transform: translateY(-1px); }
/* v1.0.14: quick-reply chips for the agent's questions — white with an
   Azmat red border and red text, so they read as answers to tap, not
   as starter suggestions. Identity stays Azmat red, bottom-left. */
#azmat-agent-suggest button.azmat-chip-q {
    background: #fff; border: 1.5px solid #ef0d33; color: #ef0d33; font-weight: bold;
}
#azmat-agent-suggest button.azmat-chip-q:hover { background: #ef0d33; color: #fff; }
/* v1.0.16: pill input and a square paper-plane send button. */
#azmat-agent-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #ddd; }
#azmat-agent-input { flex: 1; border: none; border-radius: 20px; background: #f2f2f2; padding: 10px 14px; font-size: 14px; outline: none; }
#azmat-agent-form button {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    background: #ef0d33; color: #fff; border: none; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
#azmat-agent-form button:hover { background: #d00b2e; }
#azmat-agent-form button:disabled { opacity: .55; cursor: default; }
#azmat-agent-foot { /* padding: 6px 12px; */ font-size: 11px; color: #888; text-align: center; }
@media (max-width: 480px) {
    #azmat-agent-toggle { left: 12px; bottom: 76px; }
    #azmat-agent-panel { left: 12px; bottom: 140px; width: calc(100vw - 24px); height: calc(100vh - 220px); }
}

/* v1.0.1 cursor fix: the theme sets * { cursor: none } and replaces the
   pointer with its own red dot, which sits behind this widget — so over
   the widget there was no cursor at all. Force a normal pointer here. */
#azmat-agent-toggle, #azmat-agent-panel, #azmat-agent-panel * {
    cursor: auto !important;
}
#azmat-agent-toggle, #azmat-agent-close,
#azmat-agent-suggest button, #azmat-agent-form button,
#azmat-agent-welcome button {
    cursor: pointer !important;
}
/* v1.0.2: hyperlinks in chat messages (View Cable, WhatsApp) must show
   the hand pointer. The v1.0.1 rule above forces cursor:auto on every
   element inside the panel, which also forced links to an arrow, so
   links get their own pointer rule after it, with higher specificity. */
#azmat-agent-messages .azmat-agent a, #azmat-agent-messages a {
    cursor: pointer !important;
}
#azmat-agent-input {
    cursor: text !important;
}
/* v1.0.15: motion off for anyone who prefers reduced motion — the
   panel still opens and messages still appear, just instantly. */
@media (prefers-reduced-motion: reduce) {
    #azmat-agent-toggle, #azmat-agent-panel,
    #azmat-agent-messages .azmat-msg,
    #azmat-agent-messages .azmat-typing span,
    #azmat-agent-suggest button, #azmat-agent-form button {
        animation: none !important;
        transition: none !important;
    }
}