.footer-menu, .deposit-btn-container{
    padding-bottom: env(safe-area-inset-bottom);
}

.text-white{
    color: #ffffff!important;
}

/******************************** Main menu ****************************************/
.navbar-flatty .container .header-navigation .navbar-nav.navbar-main_menu menu a{
    color: #FFFFF0;
}
/***********************************************************************************/

h1:not(.magazine-profile__name),.h1:not(.magazine-profile__name){
    font-size: 32px;
    font-weight: normal;
    padding: 0px 0px 12px;
    color: inherit;
}

.footer-languages .fa-globe{
    font-size: 18px;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 0;
}

.footer-languages span{
    color: #fff;
}

.footer-languages .active{
    color: inherit;
    font-weight: bold;
    cursor: default;
    text-decoration: none;
}

.footer-menu-title-block {
    text-transform: uppercase;
    font-size: 14px;
    color: #000;
    font-weight: bold;
    padding: 5px 0 0;
}

@media (min-width: 768px) {
    .footer-menu-list-block a{
        color: #333;
    }
}

/************************* users/search - page *******************************/

.search-header h1.title{
    color: #ffffff;
}

.user-search .users-sort .active{
    color: #ffffff;
}
.user-search .users-sort span:hover{
    color: #ffffff;
}

/********************************** media/index ***********************************/

.g-flatty-block{
    background: #ededed;
    border: 1px #ddd solid;
    border-radius: 5px;
    padding: 15px 15px;
}
@media (max-width: 768px) {
    #onesignal-bell-container.onesignal-reset.onesignal-bell-container-bottom-right{
        margin-bottom: 64px;
    }
}

/********************************** chat/index ***********************************/
.chatbox.dialog-opened {
    display: flex;
    flex-flow: column;
}
.chatbox.dialog-opened .chatbox-content{
    flex-grow: 1;
    min-height: auto;
}
.chatbox.dialog-opened .chatbox-content .chatbox-dialog{
    height: 100%;
    display: flex !important;
    flex-flow: column;
}
.chatbox.dialog-opened .chatbox-content .chatbox-dialog .chatbox-dialog__messages{
    flex-grow: 1;
}
@media (max-width: 768px) {

    .chatbox.dialog-opened {
        width: 100%;
        bottom: 0;
        z-index: 10;
        display: flex;
        position: fixed;
        flex-flow: column;
        margin-top: 0;
        max-height: calc(100vh - env(safe-area-inset-bottom));
        max-height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom));
    }

    .chatbox.dialog-opened h1{
        display: none;
    }
    .chatbox.dialog-opened .chatbox-container{
        /*height: calc(100% - 26px);*/
        overflow: hidden;
    }
    .chatbox.dialog-opened .chatbox-content{
        flex-grow: 1;
        min-height: auto;
    }
    .chatbox.dialog-opened .chatbox-content .chatbox-dialog{
        height: 100%;
        display: flex;
        flex-flow: column;
    }
    .chatbox.dialog-opened .chatbox-content .chatbox-dialog .chatbox-dialog__messages{
        flex-grow: 1;
    }
    .chatbox-dialog__h-user{
        padding: 4px 0;
    }
    .chatbox-dialog__header .chatbox-dialog__h-user-image{
        width: 48px;
        height: 48px;
    }
    .chatbox-dialog__header .chatbox-dialog__h-user-location{
        margin-top: 0;
    }
}
.chatbox-dialog__footer-msgbox i.emoji-picker-icon-attach.emoji-picker{
    left: unset!important;
}

/* === CHATBOX-FRESHENING v1.0.9 (fantasy) === */
/* ====================================================================
   Vastaamattomien viestien siivous — moderni ulkoasu
   (countdown-chip, dialogin keskitetty countdown, pikavastaus, popup)
   Aikavyohyke: amber = "vanhenee pian". Pikavastaus = teeman primary.
   ==================================================================== */

:root {
    --cb-amber-bg: rgba(245, 158, 11, .14);
    --cb-amber-bd: rgba(245, 158, 11, .30);
    --cb-amber-fg: #b45309;
    /* Violetti vain hienovaraisena gradientti-aksenttina (napit/ikonit/borderit) */
    --cb-grad: linear-gradient(135deg, #c01e74, #e0398f 55%, #ff6fb3);
    --cb-primary: linear-gradient(135deg, #c01e74, #e0398f 55%, #ff6fb3);
    --cb-primary-fg: #fff;
    --cb-radius: 14px;
}

/* --- Countdown-chip contact-listassa: pieni amber-pilleri (ei tokero punainen teksti) --- */
.chatbox-users__countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 9px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--cb-amber-fg);
    background: var(--cb-amber-bg);
    border: 1px solid var(--cb-amber-bd);
    border-radius: 999px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chatbox-users__countdown i { font-size: 10px; opacity: .9; }

/* --- Dialogin keskitetty countdown-banneri: tarttuu yläreunaan --- */
.cb-dialog-countdown {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 10px 12px 4px;
    pointer-events: none;
}
.cb-dialog-countdown__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cb-amber-fg);
    background: linear-gradient(180deg, rgba(255,251,235,.96), rgba(254,243,199,.96));
    border: 1px solid var(--cb-amber-bd);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(180, 83, 9, .12);
    backdrop-filter: blur(4px);
}
.cb-dialog-countdown__chip i { font-size: 13px; }

/* --- Pikavastaus suoraan chatissa: irrallinen, keskitetty CTA (ei kiinni inputissa) --- */
.cb-quick-reply {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 10px auto 18px;
    padding: 0 16px;
    text-align: center;
}
.cb-quick-reply__hint {
    font-size: 12.5px;
    color: rgba(120, 120, 130, .9);
}
.cb-quick-reply__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--cb-primary-fg);
    background: var(--cb-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cb-quick-reply__btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.cb-quick-reply__btn:active { transform: translateY(0); }
.cb-quick-reply__btn:disabled { opacity: .6; cursor: default; transform: none; }

/* === Sessiomuistutus-popup (siistitty, moderni kortti) === */
.cb-reminder {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
    padding: 18px 18px 16px;
    animation: cbReminderIn .28s cubic-bezier(.2, .7, .3, 1);
}
@keyframes cbReminderIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.cb-reminder__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    font-size: 18px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cb-reminder__close:hover { background: rgba(0, 0, 0, .1); color: #333; }
.cb-reminder__inner { display: flex; align-items: flex-start; gap: 14px; }
.cb-reminder__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.cb-reminder__content { flex: 1 1 auto; min-width: 0; }
.cb-reminder__title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: #1a1a1a; }
.cb-reminder__text { font-size: 13px; color: #555; margin-bottom: 12px; line-height: 1.45; word-wrap: break-word; }
.cb-reminder__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-reminder__actions .btn { padding: 7px 16px; font-size: 13px; border-radius: 999px; }
.cb-reminder .cb-reminder__quick { background: var(--cb-primary); color: var(--cb-primary-fg); border: 0; }

@media (max-width: 768px) {
    .cb-reminder {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    }
    .cb-reminder__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* === Chatbox-sivun moderni viimeistely (turvallista, additiivista) === */
.chatbox-users__user {
    transition: background-color .15s ease;
    border-radius: 12px;
}
.chatbox-dialog__footer-msgbox .form-control,
.chatbox-dialog__footer__textarea {
    border-radius: 14px !important;
}
.chatbox-dialog__messages { scroll-behavior: smooth; }

/* ========================================================================
   Chatbox-tabit (Kaikki / Lukemattomat / Vastaamattomat) — geneerinen pohja
   (kaikki sivustot; varit teemamuuttujista -> pelkistetty, sopii kaikkialle)
   ======================================================================== */
.cb-tabs {
    display: none; /* nakyviin sivustokohtaisesti (aloitus: vain fantasy) */
    gap: 6px;
    padding: 10px 10px 8px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[data-theme="fantasy"] .cb-tabs { display: flex; }
.cb-tabs::-webkit-scrollbar { display: none; }
.cb-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: hsl(var(--bc, 0 0% 20%) / .6);
    background: hsl(var(--bc, 0 0% 20%) / .05);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.cb-tab:hover { color: hsl(var(--bc, 0 0% 20%) / .9); background: hsl(var(--bc, 0 0% 20%) / .06); }
.cb-tab.is-active { color: hsl(var(--pc, 0 0% 100%)); background: hsl(var(--p, 326 73% 56%)); }
.cb-tab__count { font-size: 11px; font-weight: 700; opacity: .85; }
.cb-tab__count:empty { display: none; }
.cb-tab-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: hsl(var(--bc, 0 0% 20%) / .5); }

/* ========================================================================
   TREFFITSUOMI24 — chatbox: pelkistetty harmaa/valkoinen/musta -paletti.
   EI sinista/violettia pintoina. Violetti vain hienovaraisena gradientti-
   aksenttina (aktiivinen tab, lukematon-badge, lahetysnappi, aktiivirivin
   border, ikonit). Korkeus rajattu -> lista ja dialogi samankorkuiset.
   ======================================================================== */
[data-theme="fantasy"] .chatbox {
    /* Neutralisoi DaisyUI base-varit chatboxin sisalla -> KAIKKI tw-bg-base-* /
       tw-text-base-content muuttuvat harmaiksi/tummiksi automaattisesti (Tailwind
       important:true voittaa muuten yksittaiset saannot). Vain chatbox-scope. */
    --b1: 0 0% 100%;
    --b2: 240 5% 96%;
    --b3: 240 5% 91%;
    --bc: 232 9% 14%;
    --n: 232 9% 18%;
    --nc: 0 0% 100%;

    --cbx-surface: #ffffff;
    --cbx-panel: #f1f1f3;
    --cbx-item: #ffffff;
    --cbx-hover: rgba(0, 0, 0, .035);
    --cbx-text: #1d1d20;
    --cbx-muted: rgba(0, 0, 0, .5);
    --cbx-border: rgba(0, 0, 0, .08);
    --cbx-grad: linear-gradient(135deg, #c01e74, #e0398f 55%, #ff6fb3);
    --cbx-accent: #e0398f;
    --cbx-bubble-in: #eeeef0;
    --cbx-bubble-out: #2b2b30;
}

/* --- Kontti: yksi siisti valkoinen kortti, korkeus rajattu, sisainen scroll --- */
[data-theme="fantasy"] .chatbox-container {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cbx-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--cbx-surface);
    height: clamp(420px, calc(100dvh - 215px), 780px);
    min-height: 0;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22), 0 0 0 1px rgba(224, 57, 143, .14);
}
[data-theme="fantasy"] .chatbox-users {
    border-right: 1px solid var(--cbx-border);
    /* hienovarainen gradientti paneeliin (ei lattea harmaa) */
    background: linear-gradient(180deg, #f5f4f7 0%, #ececef 100%);
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
    min-height: 0;
}
[data-theme="fantasy"] .chatbox-users__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 10px;
}
[data-theme="fantasy"] .chatbox-content {
    background: var(--cbx-surface);
    height: 100%;
    min-height: 0;
    padding: 0;
}
/* Teksti tummaksi koko chatboxiin (tw-text-current peri muuten vaalean varin
   -> valkoinen valkoisella). #chatbox-id voittaa Tailwindin important-saannot. */
[data-theme="fantasy"] #chatbox { color: var(--cbx-text) !important; }
[data-theme="fantasy"] #chatbox .chatbox-users__username { color: var(--cbx-text) !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
/* tiiviimpi kortti: poista sisaisten lohkojen ylimaarainen pystypadding */
[data-theme="fantasy"] #chatbox .chatbox-users__cinner { padding: 0 !important; }
[data-theme="fantasy"] #chatbox .chatbox-users__message { padding: 0 !important; margin-top: 2px !important; }
[data-theme="fantasy"] #chatbox .chatbox-users__message,
[data-theme="fantasy"] #chatbox .chatbox-users__your,
[data-theme="fantasy"] #chatbox .chatbox-messages__timing,
[data-theme="fantasy"] #chatbox .chatbox-messages__time { color: var(--cbx-muted) !important; }
/* Esikatselun emoji-placeholderit (emoji-picker img.img + valkoinen :code:-teksti)
   nakyivat outoina valkoisina laatikoina / valkoisena tekstina -> piilota esikatselusta. */
[data-theme="fantasy"] #chatbox .chatbox-users__message img { display: none !important; }
[data-theme="fantasy"] #chatbox .chatbox-messages__bubble-left .chatbox-messages__message { color: var(--cbx-text) !important; }

/* --- Tabit: segmented control joka MAHTUU (tasakolmannekset, ei scrollia) --- */
[data-theme="fantasy"] .cb-tabs {
    display: flex;
    gap: 3px;
    margin: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, .05);
    border-radius: 12px;
    border-bottom: 0;
    overflow: visible;
}
[data-theme="fantasy"] .cb-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding: 8px 3px;
    font-size: 11.5px;
    color: var(--cbx-muted);
    background: transparent;
    border-radius: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="fantasy"] .cb-tab:hover { background: rgba(0, 0, 0, .04); color: var(--cbx-text); }
[data-theme="fantasy"] .cb-tab.is-active {
    background: var(--cbx-grad);
    color: #fff;
    box-shadow: 0 3px 10px rgba(224, 57, 143, .35);
}
[data-theme="fantasy"] .cb-tab__count { font-size: 10.5px; opacity: .9; }
[data-theme="fantasy"] .cb-tab-empty { color: var(--cbx-muted); }

/* --- Kontaktirivit: erottuvat valkoiset kortit --- */
[data-theme="fantasy"] #chatbox .chatbox-users__user {
    display: flex;                     /* EI !important -> tabin suodatin (inline display:none) voi piilottaa rivin */
    align-items: center !important;   /* avatar pystysuunnassa keskelle korttia */
    gap: 0;                            /* valistys hoidetaan avatarin margin-rightilla (luotettava) */
    padding: 8px 12px;                 /* tiiviimpi kortti */
    margin: 0 0 6px;
    border-radius: 14px;
    border: 1px solid rgba(224, 57, 143, .10) !important;
    /* ei pelkkaa valkoista: hailakka lavender-gradientti -> eloa */
    background: linear-gradient(150deg, #ffffff 0%, #fdf3f8 100%) !important;
    box-shadow: 0 1px 2px rgba(224, 57, 143, .05);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
[data-theme="fantasy"] #chatbox .chatbox-users__user:hover {
    background: linear-gradient(150deg, #fef9fc 0%, #fce9f3 100%) !important;
    border-color: rgba(224, 57, 143, .28) !important;
    box-shadow: 0 6px 18px rgba(224, 57, 143, .16);
    transform: translateY(-1px);
}
/* aktiivinen = violetti gradientti-border (padding/border-box -temppu pyoristaa) + hailakka tayttogradientti + varjo */
[data-theme="fantasy"] #chatbox .chatbox-users__user.active {
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(150deg, #fefbfd, #fcebf4) padding-box,
        var(--cbx-grad) border-box !important;
    box-shadow: 0 8px 22px rgba(224, 57, 143, .22) !important;
}
/* avatar: lapinakyva tausta (ei laatikkoa kulmiin) + kiintea koko + selkea valistys teksteihin */
[data-theme="fantasy"] #chatbox .chatbox-users__photo {
    background: transparent !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 14px 0 0 !important;   /* 14px avatarin ja tekstien valiin -> ei limity */
    padding: 0 !important;            /* esti kuvaa siirtymasta oikealle (limittyi tekstiin) */
    overflow: hidden;                 /* leikkaa mahd. ylivuoto -> ei valu tekstin paalle */
    border-radius: 50%;
}
[data-theme="fantasy"] #chatbox .chatbox-users__photo img {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: block;
    object-fit: cover;
}
[data-theme="fantasy"] .chatbox-users__photo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
[data-theme="fantasy"] #chatbox .chatbox-users__content {
    margin: 0 !important;            /* tw-ml-20 (80px) pois -> nimi/viesti lahemmas avataria */
    background: transparent !important; /* aktiivirivin harmaa laatikko pois -> yhtenainen kortti */
    height: auto !important;          /* poista kiintea korkeus -> tiiviimpi rivi */
    min-height: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}
[data-theme="fantasy"] .chatbox-users__cinner { display: block; }
[data-theme="fantasy"] .chatbox-users__username {
    font-size: 14px; font-weight: 600; color: var(--cbx-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="fantasy"] .chatbox-users__message {
    font-size: 12.5px; color: var(--cbx-muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
[data-theme="fantasy"] .chatbox-users__your { color: var(--cbx-muted); }
[data-theme="fantasy"] .chatbox-users__message .fa-check { display: none; }
/* lukematon = violetti gradientti-badge */
[data-theme="fantasy"] .chatbox-users__new_msg { position: static; margin-left: auto; flex: 0 0 auto; }
[data-theme="fantasy"] .chatbox-users__new_msg span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--cbx-grad); color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(224, 57, 143, .35);
}
[data-theme="fantasy"] .chatbox-users__favorites { color: rgba(0, 0, 0, .25); }
[data-theme="fantasy"] .chatbox-users__favorites.selected { color: var(--cbx-accent); }

/* --- Neutraali countdown (ei amberia fantasy:lla); violetti vain ikonissa --- */
[data-theme="fantasy"] .chatbox-users__countdown {
    color: var(--cbx-muted); background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .08);
}
[data-theme="fantasy"] .cb-dialog-countdown__chip {
    color: var(--cbx-text); background: #fff; border: 1px solid var(--cbx-border);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08); backdrop-filter: none;
}
[data-theme="fantasy"] .chatbox-users__countdown i,
[data-theme="fantasy"] .cb-dialog-countdown__chip i {
    background: var(--cbx-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Dialogin otsikko --- */
[data-theme="fantasy"] .chatbox-dialog { display: flex; flex-direction: column; height: 100%; min-height: 0; }
[data-theme="fantasy"] .chatbox-dialog__header { border-bottom: 1px solid var(--cbx-border); padding: 10px 14px; background: var(--cbx-surface); }
[data-theme="fantasy"] .chatbox-dialog__h-user-name { font-size: 15px; font-weight: 600; color: var(--cbx-text); }
[data-theme="fantasy"] .chatbox-dialog__h-user-location .text-overflow { color: var(--cbx-muted); }

/* --- Viestialue + kuplat: harmaa (saapuva) / tumma (lahteva), ei violettia pintana --- */
[data-theme="fantasy"] .chatbox-dialog__messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--cbx-surface); padding: 14px 16px; }
[data-theme="fantasy"] .chatbox-messages__bubble {
    border: 0 !important;
    padding: 9px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}
[data-theme="fantasy"] #chatbox .chatbox-messages__bubble-left {
    background: var(--cbx-bubble-in) !important;
    color: var(--cbx-text) !important;
    border-radius: 16px 16px 16px 4px;
}
[data-theme="fantasy"] #chatbox .chatbox-messages__bubble-right {
    background: var(--cbx-bubble-out) !important;
    color: #fff !important;
    border-radius: 16px 16px 4px 16px;
}
[data-theme="fantasy"] #chatbox .chatbox-messages__bubble-right * { color: #fff !important; }
[data-theme="fantasy"] .chatbox-messages__timing { font-size: 11px; color: var(--cbx-muted); }
[data-theme="fantasy"] .chatbox-messages__time { text-align: center; font-size: 11px; color: var(--cbx-muted); margin: 12px 0; }

/* --- Footer / syottokentta + lahetysnappi (violetti gradientti-ympyra) --- */
[data-theme="fantasy"] .chatbox-dialog__footer { border-top: 1px solid var(--cbx-border); background: var(--cbx-surface); padding: 10px 12px; }
[data-theme="fantasy"] .chatbox-dialog__footer__textarea,
[data-theme="fantasy"] .chatbox-dialog__footer-msgbox .form-control {
    background: var(--cbx-panel) !important;
    border: 1px solid var(--cbx-border) !important;
    border-radius: 22px !important;
    color: var(--cbx-text) !important;
}
[data-theme="fantasy"] #chb_send_msg_btn {
    background: var(--cbx-grad) !important;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(224, 57, 143, .35);
    border: 0;
}
[data-theme="fantasy"] #chb_send_msg_btn svg { width: 15px !important; height: 15px !important; }
[data-theme="fantasy"] #chb_send_msg_btn svg,
[data-theme="fantasy"] #chb_send_msg_btn svg path { fill: #fff !important; }

/* --- Mobiili: lista/dialog koko ruutu, korkeus rajattu, ei vaakascrollia --- */
@media (max-width: 767px) {
    [data-theme="fantasy"] .chatbox-container {
        height: clamp(360px, calc(100dvh - 120px), 100dvh);
        min-height: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
    [data-theme="fantasy"] .chatbox-users { border-right: 0; background: var(--cbx-panel); }
    [data-theme="fantasy"] .chatbox-dialog__messages { padding: 12px; }
    [data-theme="fantasy"] .chatbox-messages__bubble { max-width: 78vw; }
    [data-theme="fantasy"] .cb-tab { font-size: 11px; padding: 9px 3px; }
}

/* --- Primary-varinen chrome chatboxin sisalla -> brandiaksentti (teeman raaka --p
   saattaa olla huonokontrastinen valkoiselle ikonille; pidetaan aksentti yhtenaisena) --- */
[data-theme="fantasy"] #chatbox .tw-btn-primary {
    background: var(--cbx-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
[data-theme="fantasy"] #chatbox .tw-btn-primary:hover { filter: brightness(1.05); }

/* === CHATBOX-RESPONSIVE v1.0.9 (fantasy) ===
   Taysi responsiivisuus: kutistuu lyhyille/zoomatuille naytoille, vain sisainen
   scroll, ei rakenteen hajoamista. Poistetaan clamp-pikselilattia (420/360px) ja
   nollataan jaetun scss-pohjan kiinteat korkeudet (660/635/755px) jotta flex
   hallitsee korkeudet. dvh + --vh (i_head_init_js setVh) -fallback. */
[data-theme="fantasy"] .chatbox-container {
    /* Mahtuu ruutuun ILMAN sivun scrollia (vain kontaktilista scrollaa sisaisesti),
       eika ole jattikorkea isolla naytolla (katto 780px). Offset 250 kattaa ylapalkin
       (nav+carousel+otsikko ~240px) -> ei ylivuoto. Lyhyt ikkuna: floor 0 -> kutistuu. */
    height: clamp(0px, calc(100dvh - 250px), 780px);
    height: clamp(0px, calc((var(--vh, 1vh) * 100) - 250px), 780px);
    min-height: 0;
    overflow: hidden;
}
/* Tabit: luonnollinen leveys + vaakascrollaus kun ei mahdu (4+ valilehtea, esim. Osumat).
   flex-shrink:0 -> tab-rivi EI kutistu pystysuunnassa pitkan listan flex-paineessa
   (muuten cb-tabs litistyi ~14px:aan ja sisalto valui kontaktilistan paalle). */
[data-theme="fantasy"] .cb-tabs {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[data-theme="fantasy"] .cb-tabs::-webkit-scrollbar { display: none; }
[data-theme="fantasy"] .cb-tab { flex: 0 0 auto; white-space: nowrap; }
[data-theme="fantasy"] .chatbox-content,
[data-theme="fantasy"] .chatbox-content__inner,
[data-theme="fantasy"] .chatbox-users,
[data-theme="fantasy"] .chatbox-dialog { min-height: 0; }
/* height !important: voita Tailwind important -luokka .md:tw-h-auto (chatbox/index.twig),
   joka muuten romahduttaa flex-sarakkeen sisallon korkeuteen desktopilla -> footer (syottokentta)
   jaa keskelle lyhyessa keskustelussa. 100% -> flex tayttaa korkeuden, footer pysyy alalaidassa. */
[data-theme="fantasy"] .chatbox-content__inner { display: flex; flex-direction: column; height: 100% !important; }
[data-theme="fantasy"] .chatbox-users__list { height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
[data-theme="fantasy"] .chatbox-dialog__messages { height: auto; max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
[data-theme="fantasy"] .chatbox-dialog__header,
[data-theme="fantasy"] .chatbox-dialog__footer { flex: 0 0 auto; }

/* Mobiili: koko dynaaminen viewport, ei pikselilattiaa */
@media (max-width: 767px) {
    [data-theme="fantasy"] .chatbox-container {
        height: 100dvh;
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100dvh;
        max-height: calc(var(--vh, 1vh) * 100);
        min-height: 0;
    }
}

/* Hyvin matala / voimakkaasti zoomattu ikkuna: tiivista ja vapauta tilaa
   (ei pakoteta korkeutta -> paaclamp (floor 0) kutistaa jo oikein) */
@media (max-height: 540px) {
    [data-theme="fantasy"] .chatbox-dialog__header { padding-top: 6px; padding-bottom: 6px; }
    [data-theme="fantasy"] .chatbox-dialog__messages { padding-top: 8px; padding-bottom: 8px; }
    [data-theme="fantasy"] .chatbox h1 { display: none; }
}

/* === CHATBOX-HEADER v1.0.9 (fantasy) ===
   Mobiili: piilota online-kayttajien owl-carousel chatbox-sivulta (body.chatbox-page
   asetetaan chatbox/index.twig:ssa). "Viestikeskus"-otsikko nakyy jo mobiilin
   header-palkissa vasemmalla (a -> /users/search/); kortin oma h1 on .xhide-mob
   -> piilossa mobiilissa. Desktopilla carousel + kortin h1 sailyvat ennallaan. */
@media (max-width: 767px) {
    body.chatbox-page #active_users_inner { display: none !important; }
}


/* ========================================================================
   v1.1.1: contact-list-tabit (6 valilehtea: Kaikki/Lukemattomat/Ei vastatut/
   Osumat/Vierailijat/Tykkasi sinusta) -> NAYTA ohut vaakascrollbar jotta kaikki
   valilehdet mahtuvat ja ovat saavutettavissa myos mobiilissa. Yliajaa aiemmat
   scrollbar-piilotukset (sama spesifisyys, myohempi saanto voittaa).
   ======================================================================== */
[data-theme="fantasy"] .cb-tabs,
.cb-tabs {
    scrollbar-width: thin;
    -ms-overflow-style: auto;
    scrollbar-color: hsl(var(--bc, 0 0% 20%) / .35) transparent;
    -webkit-overflow-scrolling: touch;
}
[data-theme="fantasy"] .cb-tabs::-webkit-scrollbar,
.cb-tabs::-webkit-scrollbar { display: block; height: 6px; }
[data-theme="fantasy"] .cb-tabs::-webkit-scrollbar-thumb,
.cb-tabs::-webkit-scrollbar-thumb { background: hsl(var(--bc, 0 0% 20%) / .35); border-radius: 999px; }
[data-theme="fantasy"] .cb-tabs::-webkit-scrollbar-track,
.cb-tabs::-webkit-scrollbar-track { background: transparent; }


/* ========================================================================
   v1.1.1: tab-redesign — selkeat valilehdet, EI numerolaskureita. Punainen tappa
   vain Lukemattomat- (lukem. viestit) ja Vierailijat-tabissa (uudet vierailut) ->
   kayttaja nakee mista messenger-valikon indikaattori muodostuu ja miten sen kuittaa.
   Inaktiiviset tabit saavat oman taustan + reunan + valin (erotin) -> ne nayttavat
   selkeasti tabeilta, eivat pelkalta tekstilta. Aktiivinen tab sailyttaa teeman varin.
   ======================================================================== */
[data-theme="fantasy"] .cb-tab__count, .cb-tab__count { display: none !important; }
[data-theme="fantasy"] .cb-tabs, .cb-tabs { gap: 6px !important; }
[data-theme="fantasy"] .cb-tab, .cb-tab {
    background: hsl(var(--bc, 0 0% 20%) / .08);
    border: 1px solid hsl(var(--bc, 0 0% 20%) / .16);
    border-radius: 999px;
}
[data-theme="fantasy"] .cb-tab:not(.is-active), .cb-tab:not(.is-active) { color: hsl(var(--bc, 0 0% 20%) / .72); }
[data-theme="fantasy"] .cb-tab.is-active, .cb-tab.is-active { border-color: transparent; }
[data-theme="fantasy"] .cb-tab.cb-tab--dot::after, .cb-tab.cb-tab--dot::after {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #e0245e;
    box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%) / .55);
    flex: 0 0 auto;
}

/* ================================================================
   v1.2.0 — Chatbox mobiiliresponsiivisuus (lopullinen ohitus)
   Sijoitettu tiedoston LOPPUUN -> voittaa teemakohtaiset osiot
   (fantasy / treffitsuomi24) seka *-custom.css:n min-height:100% !important.
   App-tyylinen chat joka laitteella:
   - Keskustelunakyma = koko nakyva viewport; syottokentta aina nakyvissa.
   - Listanakyma = valilehdet (tabit) kiinni, vain kontaktilista vierii
     (ei sivun vieritysta).
   - Footer (+ kiinnitetty mobiilialavalikko) piiloon chatbox-sivulla,
     ettei se peita syottokenttaa.
   top/bottom-ankkurointi (ei dvh-riippuvuutta) -> deterministinen korkeus;
   #chatbox-id + !important kumoaa custom.css:n min-height:100% !important.
   ================================================================ */
@media (max-width: 767px) {
    /* Piilota footerin VIERIVA sisalto (bannerit/kielet/linkit), MUTTA jata
       kiinnitetty mobiilialavalikko (footer .tw-fixed = naytön alalaidan navi)
       NAKYVIIN. Chatbox-sisalto varaa sille tilan alas (bottom-offset alla)
       -> kontaktilista/input EI jaa navin alle. */
    body.chatbox-page footer > *:not(.tw-fixed) { display: none !important; }
    /* Kiinnitetyn mobiilinavin korkeus (+ iPhonen turva-alue) -> varattu tila */
    #chatbox.chatbox { --cb-mobnav: calc(68px + env(safe-area-inset-bottom)); }

    /* Kumoa pikkunaytto-overriden min-height:100% (sivuston *-custom.css) */
    #chatbox.chatbox { min-height: 0 !important; }

    /* ---------- KESKUSTELUNAKYMA: koko ruutu, input pohjassa ---------- */
    #chatbox.chatbox.dialog-opened {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: var(--cb-mobnav, 0px);
        z-index: 1100;
        display: flex;
        flex-direction: column;
        margin: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
    }
    #chatbox.dialog-opened .chatbox-container {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #chatbox.dialog-opened .chatbox-content,
    #chatbox.dialog-opened .chatbox-content__inner,
    #chatbox.dialog-opened .chatbox-dialog {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #chatbox.dialog-opened .chatbox-dialog__header { flex: 0 0 auto; }
    /* Viestialue = ainoa vieriva osa */
    #chatbox.dialog-opened .chatbox-dialog__messages {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Syottokentta kiinni pohjassa; turva-alue iPhonen home-indikaattorille */
    #chatbox.dialog-opened .chatbox-dialog__footer {
        flex: 0 0 auto;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* ---------- LISTANAKYMA: tabit kiinni, vain lista vierii ---------- */
    #chatbox.chatbox:not(.dialog-opened) {
        position: fixed;
        top: 46px; left: 0; right: 0; bottom: var(--cb-mobnav, 0px);
        z-index: 5;
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: hidden;
    }
    #chatbox:not(.dialog-opened) .chatbox-container {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #chatbox:not(.dialog-opened) .chatbox-users {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        float: none;
    }
    #chatbox:not(.dialog-opened) .cb-tabs { flex: 0 0 auto; }
    #chatbox:not(.dialog-opened) .chatbox-users__list {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}