@font-face {
    font-family: 'Baloo Thambi 2';
    src: local('Baloo Thambi 2'), local('Baloo'), url('../font/BalooThambi2-Regular.ttf') format('truetype');
}


/* BUTTON */

.spoter-btn-content {
    display: inline-block;
    text-align: center;
    align-self: flex-end;
    padding: 8px;
}

.spoter-btn-content:hover {
    cursor: pointer;
}

.spoter-button {
    display: block;
    margin: 0 auto;
    z-index: -999;
    border-radius: 50%;
    height: 72px;
    width: 72px;
    background-color: var(--indigo-900); /* 2026-07-23: era #29236c, confirmado por Flor — drift chico contra el valor anterior (#2e245a) */
    box-shadow: rgba(var(--pink-500-rgb), 0.25) 0px 0px 0px 3.2px; /* 2026-07-23: era rgba(228,45,127,.25), match exacto a --pink-500, se agregó --pink-500-rgb en tokens.css */
}

.spoter-label {
    display: block;
    margin-top: -8px;
    z-index: 999;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 8px;
    background-color: var(--pink-500); /* 2026-07-23: era #e42d7f, match exacto */
    color: var(--grey-25); /* 2026-07-23: era #f7f7f7, drift ~1% (más cercano a grey-25 que a --text-on-brand puro blanco) */
}

.spoter-icon {
    margin-left: -12px;
    margin-bottom: 4px;
    color: var(--text-on-brand); /* 2026-07-23: era #fff, patrón ya confirmado (icono/texto blanco sobre superficie de color) */
}


/* CHAT */

.spoter-content {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 65vh;
    background-color: transparent;
    background-image: url('../img/body-bg.png');
    background-size: contain;
    background-position-y: bottom;
    background-repeat: no-repeat;
    font-family: "Baloo Thambi 2", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
    padding: .5rem .75rem;
}

.spoter-alert {
    text-align: center;
    margin: 8px;
    padding: 8px;
    clear: both;
}

.spoter-alert span {
    width: -moz-min-content;
    width: -webkit-min-content;
    border-radius: 7.5px;
    font-size: 13px;
    color: var(--text-secondary); /* 2026-07-23: era #888, mismo mapeo confirmado en whatsapp.css (.chat-dia span) */
    box-shadow: 1px 1px var(--border-strong); /* 2026-07-23: era #bbb, mismo mapeo confirmado */
    background-color: #e0f1fa; /* NO tocado — familia de color de burbuja, decisión pendiente */
    margin: 8px;
    padding: 8px;
}

.spoter-burbuja-content {
    display: block;
    width: 100%;
    clear: both;
    min-height: 32px;
}

.spoter-burbuja {
    border-radius: 7.5px;
    margin: 2px 6px 2px 10px;
    padding: 1px 8px 1px 8px;
    box-shadow: 1px 1px var(--border-strong); /* 2026-07-23: era #bbb, mismo mapeo confirmado */
    position: relative;
    min-height: 28px;
    min-width: 35%;
    width: fit-content;
}

.spoter-msj-propio {
    background-color: var(--chat-bubble-out); /* 2026-07-28 fix paridad (sugerencia de Flor): antes #dcf8c6 fijo, decisión pendiente resuelta reusando --chat-bubble-out */
    max-width: 75%;
    border-top-right-radius: 0;
    float: right;
    margin-left: 6px;
    margin-right: 25px;
    margin-bottom: 4px;
}

.spoter-msj-propio:before {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: var(--border-strong); /* 2026-07-23: era #bbb, mismo mapeo confirmado */
    border-right: 0;
    border-top: 0;
    margin-top: -5px;
    margin-right: -10px;
}

.spoter-msj-propio:after {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: var(--chat-bubble-out); /* fix paridad: era #dcf8c6 fijo */
    border-right: 0;
    border-top: 0;
    margin-top: -5px;
    margin-right: -10px;
}

.spoter-msj-ajeno {
    background-color: var(--chat-bubble-in); /* fix paridad: era #fefefe fijo */
    max-width: 75%;
    border-top-left-radius: 0;
    display: inline-block;
}

.spoter-msj-ajeno:before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: var(--border-strong); /* 2026-07-23: era #bbb, mismo mapeo confirmado */
    border-left: none;
    border-top: none;
    margin-top: -5px;
    margin-left: -10px;
}

.spoter-msj-ajeno:after {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: var(--chat-bubble-in); /* fix paridad: era #fefefe fijo */
    border-left: none;
    border-top: none;
    margin-top: -5px;
    margin-left: -10px;
}

.spoter-texto {
    font-size: 14.2px;
    width: 95%;
    overflow-wrap: break-word;
    line-height: 1.4;
    margin-bottom: 2px;
    overflow: hidden;
    display: inline;
}

.spoter-image {
    width: 191px;
    height: 248px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 0px;
    border-radius: 7.5px;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.spoter-audio {
    width: 179px;
    filter: invert(8%) sepia(28%) saturate(281%) hue-rotate(42deg) brightness(103%) contrast(95%);
}

.spoter-video {
    width: 191px;
    max-height: 248px;
    border: 0px;
    border-radius: 7.5px;
}


/* POPOVER */

.popover {
    max-width: 348px !important;
    font-family: "Baloo Thambi 2", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
}

.popover-header {
    background-color: var(--pink-500) !important; /* 2026-07-23: era #e42d7f, match exacto */
    color: var(--text-on-brand) !important; /* 2026-07-23: era #fff, patrón ya confirmado */
    font-size: 14px !important;
    font-weight: 400;
}

.popover-body {
    background-color: var(--grey-50); /* 2026-07-23: era #e9ebeb, drift ~8% */
    padding: 0;
}

.popover-footer {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    background-color: var(--grey-25); /* 2026-07-23: era #f7f7f7, drift ~1% */
    border-top: thin solid var(--grey-50); /* 2026-07-23: era #ebebeb, drift ~7% */
}

textarea.spoter-textarea {
    border-color: var(--border-default); /* 2026-07-23: era #ccc, mismo mapeo confirmado */
}

.spoter-cancel:hover {
    cursor: pointer;
}

.spoter-submit {
    display: block;
    margin: auto;
    border-radius: 5px;
    background-color: var(--pink-500); /* fix paridad: tokenizado, mismo valor */
    border-color: var(--pink-500);
    font-style: italic;
}