/* ---------- Variables (défauts, seront écrasées par JS) ---------- */
:root{
    --tca-bg:#0f172a;
    --tca-text:#e5e7eb;
    --tca-muted:#9ca3af;
    --tca-accent:#38bdf8;
    --tca-bubble-bg:#0f172a;
    --tca-bubble-text:#e5e7eb;
    --tca-z:2147483000;
    --tca-title:#0b1020;
    --tca-header-bg:rgba(255,255,255,.03);
    --tca-header-tx:#e5e7eb;
    --tca-footer-bg:rgba(255,255,255,.02);
    --tca-footer-tx:#9ca3af;
    --tca-input-bg:#0b1220;
    --tca-input-tx:#e5e7eb;
}

/* Prevent FOUC: keep bubble hidden until JS marks it ready */
#tca-bubble {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Reveal once initialized */
#tca-bubble.tca-ready {
    opacity: 1;
    transform: none;
}

/* Defensive position (JS overwrites when ready, but this avoids the blue flash top-left) */
#tca-bubble {
    position: fixed;
    bottom: 22px;
    right: 15px;      /* default bottom-right */
    left: auto !important;
    z-index: 2147483645;
}

/* If you ever want a left variant explicitly */
#tca-bubble.tca-left {
    left: 25px !important;
    right: auto !important;
}


/* ---------- Overlay ---------- */
.tca-overlay{
    position:fixed; inset:0; background:rgba(2,6,23,.45);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
    z-index:calc(var(--tca-z) - 1);
}
.tca-overlay.open{ opacity:1; pointer-events:auto; }

/* ---------- Bulle ---------- */
.tca-bubble{
    position:relative; bottom:22px; right:15px;
    width:56px; height:56px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background:var(--tca-bubble-bg); color:var(--tca-bubble-text);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    z-index: calc(var(--tca-z) + 2); pointer-events:auto;
    animation:tca-pop .32s cubic-bezier(.2,.9,.2,1.2) both;
}
.tca-bubble.tca-left{ right:auto; left:18px; }
.tca-bubble::before{ content:"?"; font-weight:800; font-size:22px; }

/* ---------- Fenêtre ---------- */
.tca-window{
    position:fixed;
    width:380px; height:520px; border-radius:18px;
    background:transparent; z-index: calc(var(--tca-z) + 1);
    transform:translateY(16px) scale(.98); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
    bottom: max(90px, env(safe-area-inset-bottom));
    right: max(18px, env(safe-area-inset-right));
    left: auto;
}
.tca-window.tca-left{ right:auto; left:18px; }
.tca-window.open{ transform:none; opacity:1; pointer-events:auto; }

.tca-shell{
    display:flex; flex-direction:column; height:100%;
    background:var(--tca-bg); color:var(--tca-text);
    border-radius:18px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    backdrop-filter:saturate(120%) blur(0px);
}

/* ---------- Header ---------- */
.tca-header{
    position:sticky; top:0; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; background:rgba(255,255,255,.03);
    border-bottom:1px solid rgba(255,255,255,.06);
    background:var(--tca-header-bg); color:var(--tca-header-tx);
}
.tca-title{ margin:0; font-size:18px; font-weight:700; color:var(--tca-title);}
.tca-close{ background:transparent; border:none; color:var(--tca-text);
    font-size:24px; line-height:1; cursor:pointer; opacity:.8; }
.tca-close:hover{ opacity:1; transform:scale(1.05); }

/* ---------- Body (messages) ---------- */
.tca-body{
    flex: 1;
    overflow: auto;
    padding: 0px 22px 0px 22px;
    color: var(--tca-text);
    margin: 0px 0px 20px 0px;
    font-size: 14px;
    background-color: #202020;
}
.tca-msg{ margin:10px 0; line-height:1.5; max-width:90%; }
.tca-msg:not(.tca-you){ color:var(--tca-text); max-width: 90%; text-align: justify; width:fit-content;
    background: rgb(65 65 65);
    padding: 5px 12px;
    border-radius: 14px;}

.tca-msg.tca-you{
    margin-left: auto;
    text-align: left;
    display: flex;
    background: rgb(45, 154, 244);
    padding: 5px 12px;
    border-radius: 14px;
    width: fit-content;
    max-width: 85%;
}

/* ---------- Zone de saisie ---------- */
.tca-input {
    width: 100%;
    padding: 0px 15px;
}

.tca-input input{
    flex:1; border-radius:12px; border:1px solid rgba(255,255,255,.12); /* force */
    padding:12px 14px; outline:none; line-height:1.2;
    background:var(--tca-input-bg);
    color:var(--tca-input-tx) !important;
    width: 70%;
}
.tca-input input::placeholder{ color:var(--tca-muted); opacity:.9; transition:color .12s ease; }
.tca-input input:focus::placeholder{ color:transparent; }

/* ---------- Bouton envoyer : hover lisible, pas de noir ---------- */
.tca-btn{
    font-weight:700; background:var(--tca-accent) !important; color:#081018 !important;
    cursor:pointer; transition:transform .08s ease, filter .15s ease;
    border: none;
    border-radius: 12px;
    padding: 8px 0px;
    min-width: 100px;
    font-weight: 700;

}
.tca-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.tca-btn:active{ transform:translateY(0); }
.tca-btn:disabled{ opacity:.5; cursor:default; transform:none; filter:none; }

/* Bulle "en cours…" */
.tca-thinking{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.06);
    padding:8px 12px; border-radius:14px; max-width:85%;
    color:var(--tca-footer-tx); /* gris lisible par défaut */
}
.tca-dots i{
    display:inline-block; width:6px; height:6px; margin-right:4px;
    border-radius:50%; background:var(--tca-footer-tx);
    animation:tca-bounce 1s infinite ease-in-out; opacity:.6;
}
.tca-dots i:nth-child(2){ animation-delay:.15s }
.tca-dots i:nth-child(3){ animation-delay:.30s }


.tca-mem{
    display:flex; align-items:center; gap:8px;
    font-size:12px; color:var(--tca-footer-tx);
    margin-right:auto;  /* pousse le crédit à droite */
}
.tca-mem input{ accent-color: var(--tca-accent); }
.tca-mem .tca-mem-clear{
    margin-left:8px; font-size:11px; padding:4px 8px; border-radius:8px;
    border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--tca-footer-tx);
    cursor:pointer;
}
.tca-mem .tca-mem-clear:hover{ background:rgba(255,255,255,.06); }
.tca-mem .tca-mem-clear:disabled{ opacity:.5; cursor:default; }


@keyframes tca-bounce{
    0%,80%,100%{ transform:translateY(0); opacity:.35 }
    40%{ transform:translateY(-4px); opacity:1 }
}


/* ---------- Footer ---------- */

.tca-footer{
    padding:10px 16px; font-size:12px;
    border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
    display:flex; justify-content:flex-end;
    background:var(--tca-footer-bg); color:var(--tca-footer-tx);
}

/* ---------- Animations ---------- */
@keyframes tca-pop{
    0%{ transform:scale(.8); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}

/* ==== Petits écrans : mobile portrait & paysage ==== */

/* iOS safe areas + nouveaux unités de viewport */
@supports (height: 100dvh) {
    .tca-window {
        /* sur mobile on passe en “drawer” plein bas */
        bottom: max(90px, env(safe-area-inset-bottom));
        right: max(18px, env(safe-area-inset-right));
        left: auto;
    }
}

/* ≤ 640px: plein écran (ou quasi), inputs larges, gros touch targets */
@media (max-width: 640px) {

    #tca-bubble {
        width: 36px !important;
        height: 36px !important;
        right: 15px !important;
        bottom: 122px !important;
        z-index: 2147483001 !important;
        left: auto !important;
    }

    .tca-mem{ flex-wrap:wrap; gap:6px 10px; }

    .tca-window{
        /* occupe presque tout l’écran */
        bottom: max(80px, env(safe-area-inset-bottom));
        right: max(0px, env(safe-area-inset-right));
        left: max(0px, env(safe-area-inset-left));
        /* top: max(0px, env(safe-area-inset-top)); */
        width: 100vw !important;
        height: 60dvh !important;
        border-radius: 0;
        transform: translateY(8px) scale(1); /* petite anim d’entrée */
    }
    .tca-shell{
        border-radius: 0;
        height: 100%;
    }
    .tca-header{ padding:14px 16px; }
    .tca-title{ font-size:16px; }
    .tca-body{
        font-size: 15px;
        padding:14px 14px 8px 14px;
    }
    .tca-msg{ max-width: 92%; }
    .tca-msg.tca-you{ max-width: 92%; }

    .tca-input{
        padding:10px 12px;
        gap:8px;
    }
    .tca-input input{
        padding:12px 12px;
        font-size:16px; /* meilleure lisibilité + clavier iOS */
    }
    .tca-btn{
        min-width: 88px;
        padding:12px 14px;
        font-size:14px;
    }

    /* La bulle se colle au bord bas avec safe-area */
    .tca-bubble{
        bottom: calc(14px + env(safe-area-inset-bottom));
        right: calc(14px + env(safe-area-inset-right));
    }
    .tca-bubble.tca-left{
        left: calc(14px + env(safe-area-inset-left));
        right: auto;
    }
}

/* Paysage très bas (ex: iPhone landscape) */
@media (max-height: 520px) and (max-width: 900px) {
    .tca-window{
        height: calc(100dvh - 20px);
        bottom: 10px;
    }
    .tca-body{ padding:12px; }
    .tca-input{ padding:10px 12px; }
}

/* ==== Tablette (641–1024px) : fenêtre plus large/haute ==== */
@media (min-width: 641px) and (max-width: 1024px) {
    .tca-window{
        width: min(480px, 92vw);
        height: min(680px, 88dvh);
        right: 24px;
        bottom: 84px;
        border-radius: 16px;
    }
    .tca-body{ font-size:15px; }
    .tca-input input{ font-size:15px; }
}

/* ==== Desktop large: confort ==== */
@media (min-width: 1025px) {
    .tca-window{
        width: 420px;
        height: 600px;
    }
}

/* ==== Accessibilité & motion ==== */
@media (prefers-reduced-motion: reduce) {
    .tca-window{ transition:none !important; }
    .tca-overlay{ transition:none !important; }
    .tca-bubble{ animation:none !important; }
}

/* ==== Option: masquer la bulle quand la fenêtre est ouverte ==== */
.tca-window.open ~ .tca-bubble.hide-when-open { visibility:hidden; }

/* ==== Option: offsets finement configurables (si tu exposes ui.offsetX/Y) ==== */
:root{
    --tca-offset-x: 18px;
    --tca-offset-y: 18px;
}
.tca-bubble{
    right: var(--tca-offset-x);
    bottom: var(--tca-offset-y);
}
.tca-bubble.tca-left{
    left: var(--tca-offset-x);
    bottom: var(--tca-offset-y);
}