/* ==================================================================
 * XAgent-Button im Header mit Puls-Ring
 * Design-Handoff "XAgent-Button mit Puls-Ring", Variante 2b.
 * Logik (wann der Ring laeuft): ExpertUI.view.main.XAgentPulse
 *
 *   teal-100 #E4F6F5  teal-200 #C0EAE7  teal-400 #68CCC6
 *   teal-700 #3F7373  focus-ring rgba(88,153,153,.55)
 *
 * Der Button ist ein Ext-Button (id xplainHeaderAgentChat), daher die
 * ID im Selektor: die Header-Regeln aus Main.scss
 * (body .xplainHeader .x-btn:not(...):hover usw.) sind sehr spezifisch.
 *
 * Eigenes Stylesheet, weil Main.scss erst nach einem Sencha-Build wirkt.
 * No SASS / theme rebuild required.
 * ================================================================== */

body a#xplainHeaderAgentChat.xagentHeaderBtn {
    position: relative;
    overflow: visible !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #E4F6F5 !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 160ms ease;
}

body a#xplainHeaderAgentChat.xagentHeaderBtn:hover,
body a#xplainHeaderAgentChat.xagentHeaderBtn.x-btn-over {
    background: #C0EAE7 !important;
}

body a#xplainHeaderAgentChat.xagentHeaderBtn:active,
body a#xplainHeaderAgentChat.xagentHeaderBtn.x-btn-pressed {
    background: #68CCC6 !important;
}

body a#xplainHeaderAgentChat.xagentHeaderBtn:focus-visible,
body a#xplainHeaderAgentChat.xagentHeaderBtn.x-btn-focus.x-keyboard-focus {
    outline: 3px solid rgba(88, 153, 153, .55) !important;
    outline-offset: 2px;
}

/* Ext legt mehrere Ebenen in den Button - alle transparent und zentriert */
body a#xplainHeaderAgentChat.xagentHeaderBtn .x-btn-wrap,
body a#xplainHeaderAgentChat.xagentHeaderBtn .x-btn-button {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

body a#xplainHeaderAgentChat.xagentHeaderBtn .x-btn-icon-el {
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 18px !important;
    color: #3F7373 !important;
    transition: color 160ms ease;
}

body a#xplainHeaderAgentChat.xagentHeaderBtn:active .x-btn-icon-el,
body a#xplainHeaderAgentChat.xagentHeaderBtn.x-btn-pressed .x-btn-icon-el {
    color: #ffffff !important;
}

/* ---- Puls-Ring ---- */
body #xplainHeaderAgentChat .xagentPulseRing {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #68CCC6;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
}

/* Rundenzahl setzt XAgentPulse (MAX_MS / ITERATION_MS) */
body #xplainHeaderAgentChat.is-pulsing .xagentPulseRing {
    animation-name: xagentPulse;
    animation-duration: 2.4s;
    animation-timing-function: ease-out;
}

@keyframes xagentPulse {
    0%        { transform: scale(1);   opacity: .9; }
    70%, 100% { transform: scale(1.9); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
    body #xplainHeaderAgentChat.is-pulsing .xagentPulseRing {
        animation: none;
    }
}

/* ---- Dunkles Design ---- */
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn {
    background: rgba(88, 153, 153, .22) !important;
}
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn:hover,
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn.x-btn-over {
    background: rgba(88, 153, 153, .36) !important;
}
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn .x-btn-icon-el {
    color: #8FD0CC !important;
}

/* Der Ring waechst auf 1,9-fache Groesse (~65px) und ragt ueber den 50px
   hohen Header hinaus - die Header-Ebenen duerfen ihn nicht abschneiden.
   Der Header bekommt dafuer keinen z-index-Vorrang; der Ring ist ohnehin
   fast ausgeblendet, wenn er den Rand erreicht. */
body #xplainHeaderNorth,
body #xplainHeaderNorth-bodyWrap,
body #xplainHeaderNorth-body,
body #xplainHeaderNorth .x-toolbar,
body #xplainHeaderNorth .x-toolbar > .x-box-inner {
    overflow: visible !important;
}

/* ---- Nach der ersten Frage (XAgentPulse.markUsed): wie die anderen
   Header-Icons, ohne gruene Flaeche und ohne Ring ---- */
body a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed {
    background: transparent !important;
}
body a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed:hover,
body a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed.x-btn-over {
    background: rgba(0, 0, 0, .06) !important;
}
body a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed .x-btn-icon-el {
    color: #505050 !important;
}
body a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed .xagentPulseRing {
    display: none;
}
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed {
    background: transparent !important;
}
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed:hover,
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed.x-btn-over {
    background: rgba(255, 255, 255, .08) !important;
}
body.oe-theme-dark a#xplainHeaderAgentChat.xagentHeaderBtn.xagentUsed .x-btn-icon-el {
    color: var(--oe-text-dim) !important;
}