/*
 * XAgent-Einführungsdialog beim ersten Start (Design-Handoff "Variante 1b")
 *
 * DOM-Overlay, siehe ExpertUI.view.main.XAgentIntro.
 *
 * Design-Tokens:
 *   teal-100 #E4F6F5  teal-400 #68CCC6  teal-500 #589999
 *   teal-600 #4A8686  teal-700 #3F7373
 *   plum-50 #F3EFF2   plum-500 #644162
 *   slate-100 #F2F4F6 slate-200 #E7EAED slate-300 #D2D7DC
 *   slate-600 #7E8B99 slate-700 #55606C slate-900 #2A3138
 *   blue #417DBF  amber #FFBC3E  amber-tint #FFF8E8 / #FFE2A6
 *
 * Das Design nennt Poppins / Mulish. Beide Webfonts liegen nicht im
 * Projekt, deshalb - wie in cd-summary.css - der Inter/System-Stack.
 *
 * Eigenes Stylesheet, weil Main.scss erst nach einem Sencha-Build wirkt.
 * No SASS / theme rebuild required.
 */

body .xaiOverlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
    background: rgba(85, 96, 108, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    opacity: 0;
    transition: opacity 200ms ease;
}

body .xaiOverlay *,
body .xaiOverlay *::before,
body .xaiOverlay *::after {
    box-sizing: border-box;
}

body .xaiOverlay.open {
    opacity: 1;
}

body .xaiDialog {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 900px;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(42, 49, 56, .18);
    opacity: 0;
    transform: scale(.98);
    transition: opacity 200ms ease, transform 200ms ease;
}

body .xaiOverlay.open .xaiDialog {
    opacity: 1;
    transform: scale(1);
}

/* ---------- linke Spalte: "Bühne" ---------- */

body .xaiStage {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 40px 40px 0;
    overflow: hidden;
    background: #2A3138;
}

body .xaiStageHead {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body .xaiBeta {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFBC3E;
    color: #2A3138;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: normal;
}

body .xaiHeadline {
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

body .xaiHeadline span {
    color: #68CCC6;
}

body .xaiChat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 -8px;
    padding: 12px 12px 0;
    border-radius: 18px 18px 0 0;
    background: #F2F4F6;
}

body .xaiChatHead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    color: #2A3138;
    font-size: 13px;
    font-weight: 600;
}

body .xaiChatLogo {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #589999;
}

body .xaiChatMsgs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 12px;
    background: #FFFFFF;
}

body .xaiBubble {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 14px;
}

body .xaiBubble i {
    display: block;
    height: 7px;
    max-width: 100%;
    border-radius: 4px;
}

body .xaiBubbleUser {
    align-self: flex-end;
    align-items: flex-end;
    border-radius: 16px 16px 4px 16px;
    background: #417DBF;
}

body .xaiBubbleUser i {
    background: rgba(255, 255, 255, .85);
}

body .xaiBubbleUser i + i {
    background: rgba(255, 255, 255, .6);
}

body .xaiBubbleBot {
    align-self: flex-start;
    border: 1px solid #E7EAED;
    border-radius: 16px 16px 16px 4px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(42, 49, 56, .08);
}

body .xaiBubbleBot i {
    background: #D2D7DC;
}

body .xaiBubbleBot i.xaiLight {
    background: #E7EAED;
}

body .xaiChatInput {
    display: flex;
    gap: 8px;
    padding-bottom: 12px;
}

body .xaiChatField {
    display: flex;
    flex: 1;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #D2D7DC;
    border-radius: 10px;
    background: #FFFFFF;
}

body .xaiChatField i {
    display: block;
    width: 90px;
    height: 6px;
    border-radius: 3px;
    background: #E7EAED;
}

body .xaiChatSend {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    background: #417DBF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

/* ---------- rechte Spalte: Inhalt ---------- */

body .xaiContent {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 40px 32px;
}

body .xaiClose {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7E8B99;
    cursor: pointer;
}

body .xaiClose:hover {
    background: #F2F4F6;
    color: #2A3138;
}

body .xaiTitle {
    color: #2A3138;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}

body .xaiSubtitle {
    color: #55606C;
    font-size: 14px;
    line-height: 1.55;
}

body .xaiCard {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid #E7EAED;
    border-radius: 16px;
}

body .xaiCardIcon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

body .xaiCardPlum .xaiCardIcon {
    background: #F3EFF2;
    color: #644162;
}

body .xaiCardTeal .xaiCardIcon {
    background: #E4F6F5;
    color: #3F7373;
}

body .xaiCardBeta {
    border-color: #FFE2A6;
    background: #FFF8E8;
}

body .xaiCardBeta .xaiCardIcon {
    background: #FFBC3E;
    color: #2A3138;
    font-size: 16px;
}

body .xaiCardText {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body .xaiCardTitle {
    color: #2A3138;
    font-size: 14px;
    font-weight: 700;
}

body .xaiCardBody {
    color: #55606C;
    font-size: 13px;
    line-height: 1.5;
}

body .xaiCardBody b {
    color: #2A3138;
}

body .xaiCardBody a {
    color: #417DBF;
    text-decoration: none;
}

body .xaiCardBody a:hover {
    color: #4A8686;
    text-decoration: underline;
}

body .xaiBtns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

body .xaiBtn {
    height: 44px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

body .xaiBtn:focus {
    outline: none;
}

body .xaiBtn:focus-visible,
body .xaiClose:focus-visible {
    outline: 3px solid rgba(88, 153, 153, .55);
    outline-offset: 2px;
}

body .xaiBtnGhost {
    padding: 0 22px;
    border: 1.5px solid #589999;
    background: #FFFFFF;
    color: #589999;
}

body .xaiBtnGhost:hover {
    border-color: #4A8686;
    color: #4A8686;
}

body .xaiBtnPrimary {
    padding: 0 24px;
    border: 0;
    background: #589999;
    color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(88, 153, 153, .28);
}

body .xaiBtnPrimary:hover {
    background: #4A8686;
}

body .xaiBtnPrimary:active {
    background: #3F7373;
}

/* kleine Viewports: Illustrationsspalte ausblenden */
@media (max-width: 939px) {
    body .xaiDialog {
        grid-template-columns: 1fr;
        width: 480px;
    }

    body .xaiStage {
        display: none;
    }
}

/* ---------- Dark Theme ---------- */

body.oe-theme-dark .xaiDialog {
    background: var(--oe-elevated);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

body.oe-theme-dark .xaiStage {
    background: var(--oe-bg);
}

body.oe-theme-dark .xaiTitle,
body.oe-theme-dark .xaiCardTitle,
body.oe-theme-dark .xaiCardBody b {
    color: var(--oe-text-strong);
}

body.oe-theme-dark .xaiSubtitle,
body.oe-theme-dark .xaiCardBody {
    color: var(--oe-text-dim);
}

body.oe-theme-dark .xaiCard {
    border-color: var(--oe-border);
}

body.oe-theme-dark .xaiCardPlum .xaiCardIcon {
    background: #3a2a39;
    color: #d9b8d6;
}

body.oe-theme-dark .xaiCardTeal .xaiCardIcon {
    background: #1d3534;
    color: #68CCC6;
}

body.oe-theme-dark .xaiCardBeta {
    border-color: #5a4720;
    background: #2a2416;
}

body.oe-theme-dark .xaiCardBody a {
    color: var(--oe-accent-light);
}

body.oe-theme-dark .xaiClose:hover {
    background: var(--oe-hover);
    color: var(--oe-text);
}

body.oe-theme-dark .xaiBtnGhost {
    background: transparent;
    border-color: #68CCC6;
    color: #68CCC6;
}