/* Assistant citoyen du site vitrine (application/views/home/layout/_assistant.php) :
   couleur de la commune (--thm-primary), vert WhatsApp pour le relais vers un agent. */
.eca { --eca-brand: var(--thm-primary, #12307a); --eca-wa: #1f9d55; --eca-ink: #0f172a; --eca-muted: #64748b;
    --eca-line: #e2e8f0; --eca-bg: #f8fafc; position: fixed; right: 16px; bottom: 76px; z-index: 1000;
    font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--eca-ink); }
.eca * { box-sizing: border-box; }
.eca-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eca-launcher { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--eca-brand);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .28); display: grid; place-items: center; transition: transform .15s ease; }
.eca-launcher:hover { transform: scale(1.05); }
.eca-launcher:focus-visible, .eca button:focus-visible, .eca a:focus-visible, .eca input:focus-visible {
    outline: 3px solid #f5a800; outline-offset: 2px; }
.eca-launcher svg { width: 28px; height: 28px; fill: #fff; }
.eca .eca-i-close, .eca[data-state="open"] .eca-i-open { display: none; }
.eca[data-state="open"] .eca-i-close { display: block; }

.eca-panel { position: absolute; right: 0; bottom: 68px; width: 360px; max-width: calc(100vw - 32px);
    height: min(560px, calc(100vh - 170px)); display: flex; flex-direction: column; background: #fff;
    border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, .25); overflow: hidden; }
.eca-panel[hidden] { display: none; }

.eca-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--eca-brand); color: #fff; }
.eca-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid;
    place-items: center; font-weight: 700; flex: none; }
.eca-head-text { flex: 1; min-width: 0; }
.eca-head-text strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eca-head-text span { display: block; font-size: 12px; opacity: .85; }
.eca-close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }

.eca-log { flex: 1; overflow-y: auto; padding: 14px; background: var(--eca-bg); display: flex; flex-direction: column; gap: 8px;
    overscroll-behavior: contain; }
.eca-msg { max-width: 86%; padding: 8px 12px; border-radius: 14px; word-wrap: break-word; }
.eca-bot { align-self: flex-start; background: #fff; border: 1px solid var(--eca-line); border-bottom-left-radius: 4px; }
.eca-me { align-self: flex-end; background: var(--eca-brand); color: #fff; border-bottom-right-radius: 4px; }
.eca-link { align-self: flex-start; font-weight: 600; color: var(--eca-brand); text-decoration: none; padding: 2px 4px; }
.eca-link:hover { text-decoration: underline; }

.eca-agents { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.eca-agent { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff;
    border: 1px solid var(--eca-line); color: var(--eca-ink); text-decoration: none; }
.eca-agent:hover { border-color: var(--eca-wa); }
.eca-agent-text { display: flex; flex-direction: column; }
.eca-agent-text small { color: var(--eca-muted); }
.eca-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; flex: none; }
.eca-agent.is-online .eca-dot { background: var(--eca-wa); box-shadow: 0 0 0 3px rgba(31, 157, 85, .18); }

.eca-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--eca-line);
    max-height: 132px; overflow-y: auto; }
.eca-chips:empty { display: none; }
.eca-chip { border: 1px solid var(--eca-brand); color: var(--eca-brand); background: #fff; border-radius: 999px;
    padding: 5px 12px; font-size: 13px; cursor: pointer; }
.eca-chip:hover { background: var(--eca-brand); color: #fff; }
.eca-chip-ghost { border-color: var(--eca-line); color: var(--eca-muted); }
.eca-chip-wa { border-color: var(--eca-wa); color: var(--eca-wa); }
.eca-chip-wa:hover { background: var(--eca-wa); color: #fff; }

.eca-ask { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--eca-line); }
.eca-ask input { flex: 1; min-width: 0; border: 1px solid var(--eca-line); border-radius: 999px; padding: 8px 14px; font: inherit; }
.eca-ask button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--eca-brand); cursor: pointer;
    display: grid; place-items: center; flex: none; }
.eca-ask button svg { width: 18px; height: 18px; fill: #fff; }
.eca-foot { margin: 0; padding: 6px 12px 10px; font-size: 11px; color: var(--eca-muted); text-align: center; }

/* téléphone : panneau pleine largeur en bas de l'écran */
@media (max-width: 480px) {
    .eca { right: 12px; bottom: 70px; }
    .eca-panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 85vh;
        border-radius: 16px 16px 0 0; }
    .eca[data-state="open"] .eca-launcher { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eca-launcher { transition: none; } }