/* =========================================
   AUSOL FAQ Chatbot — Diseño v2
   Tokens de marca: Manual de Identidad AUSOL
   ========================================= */

.ausol-chatbot {
    --ac-surface:    #F7F8F4;
    --ac-divider:    #E6E8DF;
    --ac-ink:        #1F2021;
    --ac-muted:      #7A7D7E;
    --ac-online:     #7BD86B;
    --ac-green-soft: #EDF4DC;
    font-family: Arial, Helvetica, sans-serif;
}

/* ─── Reset global: anula colores que inyectan los temas WP en <button> y <a> ─── */
.ausol-chatbot button {
    color: inherit !important;
    text-decoration: none !important;
}
.ausol-chatbot button::before,
.ausol-chatbot button::after,
.ausol-chatbot button *::before,
.ausol-chatbot button *::after {
    content: none !important;
    display: none !important;
}
.ausol-chatbot button:hover,
.ausol-chatbot button:focus,
.ausol-chatbot button:active {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none;
    outline: none;
}
.ausol-chatbot a:hover,
.ausol-chatbot a:focus {
    color: var(--ausol-primary, #8CB04C) !important;
}

/* ─── Chatbot flotante — contenedor raíz ─── */
.ausol-chatbot--floating {
    position: fixed;
    right:  var(--ausol-bubble-pos-r, 18px);
    left:   var(--ausol-bubble-pos-l, auto);
    bottom: 18px;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* ─── Launcher / burbuja flotante ─── */
.ausol-chatbot__bubble {
    width:  var(--ausol-bubble-size, 56px);
    height: var(--ausol-bubble-size, 56px);
    border-radius: 50%;
    background: var(--ausol-primary, #8CB04C);
    border: none;
    box-shadow: 0 8px 24px rgba(140,176,76,.45), 0 2px 6px rgba(0,0,0,.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .15s ease;
    flex-shrink: 0;
    padding: 0;
}
.ausol-chatbot__bubble:hover,
.ausol-chatbot__bubble:focus,
.ausol-chatbot__bubble:active {
    background: var(--ausol-primary, #8CB04C) !important;
    color: #fff !important;
    outline: none;
}
.ausol-chatbot__bubble:hover { transform: scale(1.06); }
.ausol-chatbot__bubble:focus-visible {
    outline: 3px solid var(--ausol-primary, #8CB04C) !important;
    outline-offset: 3px;
}

/* ─── Panel del chatbot ─── */
.ausol-chatbot__panel {
    display: none;
    flex-direction: column;
    width: var(--ausol-panel-width, 360px);
    height: var(--ausol-panel-height, 600px);
    background: #fff;
    border-radius: var(--ausol-radius, 20px);
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(46,52,28,.22), 0 4px 12px rgba(0,0,0,.08);
    border: 1px solid var(--ac-divider);
}
.ausol-chatbot__panel.is-open { display: flex; }

/* ─── Chatbot inline (shortcode) ─── */
.ausol-chatbot--inline {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    height: var(--ausol-panel-height, 600px);
    background: #fff;
    border-radius: var(--ausol-radius, 20px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border: 1px solid var(--ac-divider);
    font-family: Arial, Helvetica, sans-serif;
}

/* ─── Header ─── */
.ausol-chatbot__header {
    background: var(--ausol-primary, #8CB04C);
    color: #fff;
    flex-shrink: 0;
}

/* Barra superior: avatar + título + botón X */
.ausol-chatbot__header-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.ausol-chatbot__header-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.ausol-chatbot__header-avatar {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: contain;
}
.ausol-chatbot__online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: var(--ac-online, #7BD86B);
    border-radius: 50%;
    border: 2px solid var(--ausol-primary, #8CB04C);
}
.ausol-chatbot__header-info { flex: 1; min-width: 0; }
.ausol-chatbot__header-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ausol-chatbot__header-status {
    font-size: 10px;
    opacity: .85;
    margin-top: 2px;
}

/* Botón X de cierre */
.ausol-chatbot__close {
    flex-shrink: 0;
    background: rgba(255,255,255,.15) !important;
    border: none !important;
    color: #fff !important;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .12s ease, filter .12s ease;
}
.ausol-chatbot__close:hover,
.ausol-chatbot__close:focus,
.ausol-chatbot__close:active {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    filter: brightness(1.18);
}
.ausol-chatbot__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Banner de bienvenida — se oculta en estado chat */
.ausol-chatbot__header-banner {
    position: relative;
    padding: 6px 18px 22px;
    overflow: hidden;
}
.ausol-chatbot__header-banner-text {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    white-space: pre-line;
}
.ausol-chatbot__header-watermark {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 110px;
    height: 110px;
    pointer-events: none;
    opacity: var(--ausol-watermark-opacity, 0.15);
}
.ausol-chatbot__header-watermark--img {
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ─── Pantalla de bienvenida (tarjetas FAQ) ─── */
.ausol-chatbot__welcome {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    background: var(--ausol-panel-bg, #F7F8F4);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ausol-chatbot__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 2px;
    margin-left: 34px; /* 28px avatar + 6px gap — alinea con la burbuja del bot */
}

.ausol-chatbot__card {
    background: #fff !important;
    color: var(--ausol-primary, #8CB04C) !important;
    border: 1.5px solid var(--ausol-primary, #8CB04C);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    width: auto;
    box-sizing: border-box;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap;
}
.ausol-chatbot__card:hover,
.ausol-chatbot__card:focus,
.ausol-chatbot__card:active {
    background: var(--ausol-primary, #8CB04C) !important;
    color: #fff !important;
    box-shadow: none;
    transform: none;
}
.ausol-chatbot__card:focus-visible {
    outline: 2px solid var(--ausol-primary, #8CB04C);
    outline-offset: 2px;
}

.ausol-chatbot__card-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.ausol-chatbot__card-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

/* ─── Área de mensajes ─── */
.ausol-chatbot__messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 8px;
    background: var(--ausol-panel-bg, #F7F8F4);
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

/* ─── Filas de mensajes ─── */
.ausol-chatbot__row--bot {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.ausol-chatbot__row--user {
    display: flex;
    justify-content: flex-end;
}

.ausol-chatbot__bot-avatar {
    display: block;
    flex-shrink: 0;
    border-radius: 10px;
    width: 28px;
    height: 28px;
}

/* ─── Burbuja bot ─── */
.ausol-chatbot__msg--bot {
    background: #fff;
    color: var(--ac-ink, #1F2021);
    border: 1px solid var(--ac-divider, #E6E8DF);
    padding: 10px 13px;
    border-radius: 4px 18px 18px 18px;
    max-width: 82%;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.ausol-chatbot__msg-body {
    text-align: justify;
    overflow-wrap: break-word;
}
.ausol-chatbot__msg--bot ul,
.ausol-chatbot__msg--bot ol {
    margin: 6px 0 6px 18px;
    padding: 0;
}
.ausol-chatbot__msg--bot li { margin-bottom: 4px; line-height: 1.5; }
.ausol-chatbot__msg--bot strong { font-weight: 600; }
.ausol-chatbot__msg--bot a { color: var(--ausol-primary) !important; text-decoration: underline !important; }
.ausol-chatbot__msg--bot a:hover { color: var(--ausol-primary-hover, #7a9c3e) !important; }
.ausol-chatbot__msg--bot p { margin: 0 0 8px; }
.ausol-chatbot__msg--bot p:last-child { margin-bottom: 0; }

.ausol-chatbot__msg-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--ac-ink, #1F2021);
    margin-bottom: 4px;
}

/* ─── Burbuja usuario ─── */
.ausol-chatbot__msg--user {
    background: var(--ausol-primary, #8CB04C);
    color: #fff;
    padding: 9px 13px;
    border-radius: 18px 18px 4px 18px;
    max-width: 78%;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    word-break: break-word;
}

/* ─── Typing indicator ─── */
.ausol-chatbot__typing {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.ausol-chatbot__typing-dots {
    background: #fff;
    border: 1px solid var(--ac-divider, #E6E8DF);
    padding: 10px 14px;
    border-radius: 4px 18px 18px 18px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.ausol-chatbot__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ausol-primary, #8CB04C);
    display: inline-block;
    animation: ausolDotPulse 1.2s infinite ease-in-out;
}
.ausol-chatbot__dot:nth-child(2) { animation-delay: 150ms; }
.ausol-chatbot__dot:nth-child(3) { animation-delay: 300ms; }
@keyframes ausolDotPulse {
    0%, 80%, 100% { opacity: .3; transform: scale(.85); }
    40%           { opacity: 1;  transform: scale(1); }
}

/* ─── Rating ─── */
.ausol-chatbot__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--ac-divider, #E6E8DF);
    font-size: 10px;
    color: var(--ac-muted, #7A7D7E);
}
.ausol-chatbot__rating-btn {
    background: none !important;
    border: 1px solid transparent !important;
    color: inherit !important;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    line-height: 1;
    border-radius: 4px;
    transition: background .12s ease, border-color .12s ease;
}
.ausol-chatbot__rating-btn:hover:not([disabled]),
.ausol-chatbot__rating-btn:focus:not([disabled]) {
    background: var(--ac-green-soft, #EDF4DC) !important;
    border-color: var(--ausol-primary, #8CB04C) !important;
    color: inherit !important;
}
.ausol-chatbot__rating-btn:focus-visible {
    outline: 2px solid var(--ausol-primary, #8CB04C);
    outline-offset: 1px;
}
.ausol-chatbot__rating-btn--active {
    background: var(--ausol-primary, #8CB04C) !important;
    border-color: var(--ausol-primary, #8CB04C) !important;
}
.ausol-chatbot__rating-btn[disabled] { opacity: .45; cursor: default; }
.ausol-chatbot__rating-btn--active[disabled] { opacity: 1; }
.ausol-chatbot__rating-confirm {
    font-size: 10px;
    color: var(--ac-muted, #7A7D7E);
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--ac-divider, #E6E8DF);
}
.ausol-chatbot__rating-unlike-msg {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--ac-divider, #E6E8DF);
    font-size: 11px;
    color: var(--ac-muted, #7A7D7E);
    line-height: 1.4;
}
.ausol-chatbot__rating-unlike-msg a {
    color: var(--ausol-primary, #8CB04C) !important;
    text-decoration: none !important;
}
.ausol-chatbot__rating-unlike-msg a:hover {
    color: var(--ausol-primary, #8CB04C) !important;
    text-decoration: underline !important;
}

/* ─── Input pill ─── */
.ausol-chatbot__input-wrap {
    padding: 10px 12px 12px;
    background: #fff;
    border-top: 1px solid var(--ac-divider, #E6E8DF);
    flex-shrink: 0;
}

.ausol-chatbot__input-pill {
    display: flex;
    align-items: center;
    background: var(--ausol-panel-bg, #F7F8F4);
    border: 1px solid var(--ac-divider, #E6E8DF);
    border-radius: 24px;
    padding: 6px 6px 6px 12px;
    gap: 6px;
    transition: border-color .15s;
}
.ausol-chatbot__input-pill:focus-within {
    border-color: var(--ausol-primary, #8CB04C);
}

.ausol-chatbot__input-icon {
    flex-shrink: 0;
    color: var(--ac-muted, #7A7D7E);
}

.ausol-chatbot__input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13px;
    font-family: inherit;
    color: var(--ac-ink, #1F2021);
    min-width: 0;
    padding: 2px 0;
}
.ausol-chatbot__input::placeholder { color: var(--ac-muted, #7A7D7E); }

.ausol-chatbot__send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ac-divider, #E6E8DF) !important;
    border: none !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background .15s ease;
    flex-shrink: 0;
    padding: 0;
}
.ausol-chatbot__send:not([disabled]) {
    background: var(--ausol-primary, #8CB04C) !important;
    color: #fff !important;
    cursor: pointer;
}
.ausol-chatbot__send:not([disabled]):hover,
.ausol-chatbot__send:not([disabled]):focus,
.ausol-chatbot__send:not([disabled]):active {
    filter: brightness(1.12);
    background: var(--ausol-primary, #8CB04C) !important;
    color: #fff !important;
}
.ausol-chatbot__send:focus-visible {
    outline: 2px solid var(--ausol-primary, #8CB04C);
    outline-offset: 2px;
}

/* ─── Footer ─── */
.ausol-chatbot__footer {
    text-align: center;
    font-size: 10px;
    color: var(--ac-muted, #7A7D7E);
    padding: 0 0 8px;
    background: #fff;
    flex-shrink: 0;
}

/* ─── Responsive (≤ 640 px) ─── */
@media (max-width: 640px) {
    .ausol-chatbot--floating {
        right: 8px !important;
        left:  auto !important;
        bottom: 16px;
    }
    .ausol-chatbot__panel {
        width:  calc(100vw - 16px);
        height: min(calc(100vh - 90px), var(--ausol-panel-height, 600px));
    }
    .ausol-chatbot__header-banner-text { font-size: 17px; }
}