/*
 * bulli-chat.css — plugin Bulli, VASEMMASSA laidassa (teeman base hoitaa asemoinnin).
 *
 * Plugin renderöi saman dg-bulli-widget-DOM:n kuin teema, joten teeman CSS
 * (inc/gutenberg/css/common.css ~1570–1738) hoitaa koko ulkoasun JA asemoinnin
 * vasempaan alanurkkaan (left:0, opener left:20px, close right:-30px, flex row).
 *
 * Aiemmin (kun teeman Bulli oli vielä käytössä) tässä oli .dg-bulli-widget--plugin
 * -peilaus joka siirsi plugin-instanssin OIKEAAN reunaan teeman vasemman rinnalle.
 * Antti poisti teeman dummy-Bullin käytöstä 2026-06-01 (functions.php: dg_bulli_widget
 * + dg_bulli_widget_scripts add_actionit kommentoitu) → plugin-Bulli on nyt AINOA →
 * peilaus poistettu, palautettu teeman alkuperäiseen vasempaan asemointiin (Teemu 2.6.2026).
 *
 * --plugin-modifier säilyy elementissä (PHP) vain chat-kuplatyylien skooppaukseen
 * (alla) + JS-instanssin ID-erotteluun — EI enää asemointia.
 */

/*
 * Chat-viestialue (Vaihe 2). Teemassa ei ole valmista keskustelukupla-tyyliä
 * (Bulli oli vain preview + form), joten määritellään tässä. Brand-väri
 * theme.json-muuttujasta + fallback; neutraalit harmaat bottikuplalle.
 * Skoopattu plugin-instanssiin ettei vaikuta teeman Bulliin (jos palautetaan).
 */
.dg-bulli-widget--plugin .dg-bulli-chat__messages {
    display: none;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    margin: 10px 0;
    padding-right: 4px;
}
.dg-bulli-widget--plugin .dg-bulli-chat__messages:not(:empty) {
    display: flex;
}
.dg-bulli-widget--plugin .dg-bulli-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.dg-bulli-widget--plugin .dg-bulli-msg--user {
    align-self: flex-end;
    background: var(--wp--preset--color--primary-dark, #7a0012);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.dg-bulli-widget--plugin .dg-bulli-msg--bot {
    align-self: flex-start;
    background: #f1f1f1;
    color: #1a1a1a;
    border-bottom-left-radius: 4px;
}
.dg-bulli-widget--plugin .dg-bulli-msg--bot p { margin: 0 0 6px; }
.dg-bulli-widget--plugin .dg-bulli-msg--bot p:last-child { margin-bottom: 0; }
.dg-bulli-widget--plugin .dg-bulli-msg--bot a {
    color: var(--wp--preset--color--primary-dark, #7a0012);
    text-decoration: underline;
}
.dg-bulli-widget--plugin .dg-bulli-msg--loading {
    font-size: 1.3rem;
    letter-spacing: 3px;
    opacity: 0.55;
}
.dg-bulli-widget--plugin .dg-bulli-msg--error {
    background: #fde8e8;
    color: #8a1c1c;
}

/*
 * Etusivun Bulli-hero (joroinen-chat/bulli-hero -lohko). Sama viestikupla-logiikka
 * kuin kelluvassa widgetissä, mutta skoopattuna hero-containeriin (.dg-bulli-ai)
 * ja sovitettuna dark-red taustaan (teema common.css ~1504): bot-kupla warm-gray
 * (kuten Antin __preview), user-kupla brand-tumma. EI vaikuta widget-skooppaukseen.
 * __messages korvaa Antin staattisen __preview-laatikon.
 */
.dg-bulli-ai .dg-bulli-chat__messages {
    display: none;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 25px;
    padding-right: 4px;
}
.dg-bulli-ai .dg-bulli-chat__messages:not(:empty) {
    display: flex;
}
.dg-bulli-ai .dg-bulli-msg {
    max-width: 85%;
    padding: 10px 18px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: break-word;
}
.dg-bulli-ai .dg-bulli-msg--bot {
    align-self: flex-start;
    background: var(--wp--preset--color--warm-gray);
    color: #333;
    border-bottom-left-radius: 0;
}
.dg-bulli-ai .dg-bulli-msg--bot p { margin: 0 0 6px; }
.dg-bulli-ai .dg-bulli-msg--bot p:last-child { margin-bottom: 0; }
.dg-bulli-ai .dg-bulli-msg--bot a {
    color: var(--wp--preset--color--dark-red, #7a0012);
    text-decoration: underline;
}
.dg-bulli-ai .dg-bulli-msg--user {
    align-self: flex-end;
    background: #7A0305;
    color: #fff;
    border-bottom-right-radius: 0;
}
.dg-bulli-ai .dg-bulli-msg--loading {
    font-size: 1.3rem;
    letter-spacing: 3px;
    opacity: 0.7;
}
.dg-bulli-ai .dg-bulli-msg--error {
    background: #fde8e8;
    color: #8a1c1c;
}

/*
 * Disclosure + tallenna-keskustelu (digipalvelulaki 6 a §, kohdat 4 ja 6).
 * Disclosure näkyy aina (pysyvä, ei riipu editoitavasta intro-tekstistä eikä
 * uusi/palaava-tilasta). Tallenna-nappi näkyy vasta kun keskustelussa on
 * sisältöä (~ -sisarvalitsin: messages ei-tyhjä).
 */
.dg-bulli-widget--plugin .dg-bulli-chat__disclosure {
    margin: 0 0 8px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #fff;
}
/* Widget-lomakkeelle ei teeman common.css:n negatiivisia sivumarginaaleja —
 * override scopattuna (2 luokkaa > teeman 1) → ei kosketa Antin teemaan. (Teemu 17.6.) */
.dg-bulli-widget--plugin .dg-bulli-chat__form {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.dg-bulli-widget--plugin .dg-bulli-chat__tools {
    display: none;
    margin-top: 8px;
    text-align: right;
}
.dg-bulli-widget--plugin .dg-bulli-chat__messages:not(:empty) ~ .dg-bulli-chat__tools {
    display: block;
}
.dg-bulli-widget--plugin .dg-bulli-chat__save {
    background: none;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--wp--preset--color--primary-dark, #7a0012);
    text-decoration: underline;
}
.dg-bulli-widget--plugin .dg-bulli-chat__save:hover { opacity: 0.8; }

.dg-bulli-ai .dg-bulli-chat__disclosure {
    margin: 0 0 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #fff;
}
/* Hero-lohkossa (.dg-bulli-ai) ei teeman common.css:n negatiivisia
 * sivumarginaaleja lomakkeelle — override scopattuna, ei kosketa Antin
 * teemaan. 2 luokkaa > teeman 1 luokka → voittaa !important-kisan. (Teemu 17.6.) */
.dg-bulli-ai .dg-bulli-chat__form {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.dg-bulli-ai .dg-bulli-chat__tools {
    display: none;
    margin-top: 10px;
    text-align: right;
}
.dg-bulli-ai .dg-bulli-chat__messages:not(:empty) ~ .dg-bulli-chat__tools {
    display: block;
}
.dg-bulli-ai .dg-bulli-chat__save {
    background: none;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #fff;
    text-decoration: underline;
}
.dg-bulli-ai .dg-bulli-chat__save:hover { opacity: 0.8; }