/* ============================================================================
   Portal live chat — STRUCTURAL base (theme-agnostic).
   Drawer that slides from the right and PUSHES the page content left (not a float).
   The launcher lives in the theme header (.tc-chat-launch). All colours/fonts come
   from --tcc-* variables — to skin per theme, override them in
   templates/{theme}/comm-chat.css (do NOT edit this file).
   ============================================================================ */
.tc-chat {
    --tcc-accent:        var(--brand-button, #0d6efd);
    --tcc-accent-text:   #ffffff;
    --tcc-bg:            #ffffff;
    --tcc-surface:       #f6f7f9;
    --tcc-text:          #1b1f24;
    --tcc-muted:         #6b7280;
    --tcc-border:        #e5e7eb;
    --tcc-bubble-in:     #f1f3f5;
    --tcc-bubble-in-text:#1b1f24;
    --tcc-font:          inherit;
    --tcc-drawer-w:      380px;

    /* --- Launcher FAB tokens (theme-overridable) --- */
    --tcc-launch-radius:       28px;           /* pill by default; theme overrides */
    --tcc-launch-tracking:     1.5px;
    --tcc-launch-shadow:       0 6px 24px rgba(0,0,0,.26);
    --tcc-launch-shadow-hover: 0 12px 32px rgba(0,0,0,.36);
    --tcc-launch-hover-filter: brightness(1.08);
    --tcc-launch-focus-ring:   var(--tcc-accent);   /* override in light themes — see §6 */
    --tcc-teaser-bg:           var(--tcc-accent);
    --tcc-teaser-text:         var(--tcc-accent-text);
    --tcc-teaser-radius:       10px;
}

/* ---- Launcher: FAB pinned bottom-right, horizontal pill ---- */
.tc-chat-launch {
    position: fixed;
    right: 32px;
    bottom: 32px;
    top: auto;                                 /* remove the old top:75% centering */
    transform: none;
    z-index: 99990;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--tcc-launch-radius, 28px);
    background: var(--tcc-accent);
    color: var(--tcc-accent-text);
    cursor: pointer;
    font-family: var(--tcc-font, inherit);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tcc-launch-tracking, 1.5px);
    text-transform: uppercase;
    box-shadow: var(--tcc-launch-shadow, 0 6px 24px rgba(0,0,0,.26));
    transition: transform .2s cubic-bezier(.4,0,.2,1),
                box-shadow .2s ease,
                filter .2s ease;
    /* overflow: visible is the CSS default — do NOT add overflow:hidden here;
       the teaser + badge must bleed outside the element bounds */
}

.tc-chat-launch:hover {
    transform: translateY(-4px);
    box-shadow: var(--tcc-launch-shadow-hover, 0 12px 32px rgba(0,0,0,.36));
    filter: var(--tcc-launch-hover-filter, brightness(1.08));
}

.tc-chat--open .tc-chat-launch { opacity: 0; pointer-events: none; }

/* Icon — remove the old writing-mode override (no longer needed) */
.tc-chat-launch-ico {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Text label — stays visible on desktop; hidden on mobile (see media query) */
.tc-chat-launch-text {
    white-space: nowrap;
}

/* Badge — relocated to top-right of the FAB */
.tc-chat-launch-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    left: auto;                               /* clear the old left:-7px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    border: 2.5px solid #fff;                 /* separation ring — works on both theme button colors */
    background: #e02424;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    writing-mode: horizontal-tb;
    box-sizing: border-box;
}
.tc-chat-launch-badge[hidden] { display: none; }

/* Teaser speech bubble — appears above the FAB on a delay, vanishes automatically */
.tc-chat-launch-teaser {
    position: absolute;
    bottom: calc(100% + 10px);               /* floats above the button */
    right: 0;
    padding: 6px 13px;
    border-radius: var(--tcc-teaser-radius, 10px);
    background: var(--tcc-teaser-bg, var(--tcc-accent));
    color: var(--tcc-teaser-text, var(--tcc-accent-text));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: tc-teaser-show 4.5s ease 3s both;
}
/* Downward arrow — points to the FAB below */
.tc-chat-launch-teaser::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 18px;
    border: 5px solid transparent;
    border-top-color: var(--tcc-teaser-bg, var(--tcc-accent));
}

/* Teaser keyframe: 0.3 s fade-in at 6.7%, holds until 93.3%, 0.3 s fade-out */
@keyframes tc-teaser-show {
    0%    { opacity: 0; transform: translateY(6px); }
    6.7%  { opacity: 1; transform: translateY(0);   }
    93.3% { opacity: 1; transform: translateY(0);   }
    100%  { opacity: 0; transform: translateY(6px); }
}

/* Mobile: icon-only circle FAB — see §5 for full rationale */
@media (max-width: 767.98px) {
    .tc-chat-launch {
        width: 52px;
        height: 52px;
        padding: 0;
        right: 15px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
        border-radius: 50%;
        gap: 0;
    }
    .tc-chat-launch-text   { display: none; }
    .tc-chat-launch-teaser { display: none; }
}

/* Reduced motion: suppress all decorative animation (WCAG 2.1 SC 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .tc-chat-launch,
    .tc-chat-launch::before {
        animation: none !important;
    }
    .tc-chat-launch {
        transition-duration: .01ms !important;
    }
    .tc-chat-launch-teaser { display: none; }
}

/* ---- Drawer panel ---- */
.tc-chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99991;
    width: var(--tcc-drawer-w);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--tcc-bg);
    color: var(--tcc-text);
    border-left: 1px solid var(--tcc-border);
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--tcc-font);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.tc-chat--open .tc-chat-panel { transform: translateX(0); }

.tc-chat-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 16px 18px;
    background: var(--tcc-accent);
    color: var(--tcc-accent-text);
    flex-shrink: 0;
}
.tc-chat-title { font-weight: 600; font-size: 16px; flex: 1 1 auto; }
.tc-chat-end {
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    opacity: .9;
    margin-right: 8px;
}
.tc-chat-end:hover { opacity: 1; }
.tc-chat-end[hidden] { display: none; }
.tc-chat-close { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; opacity: .9; }
.tc-chat-close:hover { opacity: 1; }

.tc-chat-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

.tc-chat-prechat { padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.tc-chat-intro { font-size: 14px; color: var(--tcc-muted); margin: 0 0 4px; }
.tc-chat-prechat input {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--tcc-border); border-radius: 10px;
    background: var(--tcc-surface); color: var(--tcc-text); font-size: 15px;
}
.tc-chat-start, .tc-chat-compose button {
    border: 0; background: var(--tcc-accent); color: var(--tcc-accent-text);
    border-radius: 10px; padding: 11px 16px; font-weight: 600; cursor: pointer;
}
.tc-chat-start:disabled, .tc-chat-compose button:disabled { opacity: .6; cursor: default; }
.tc-chat-error { color: #e02424; font-size: 13px; }
.tc-chat-error[hidden] { display: none; }

.tc-chat-conversation { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tc-chat-conversation[hidden], .tc-chat-prechat[hidden] { display: none; }
.tc-chat-messages {
    flex: 1 1 auto; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 8px; background: var(--tcc-surface);
}
.tc-chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
.tc-chat-msg--in  { align-self: flex-start; background: var(--tcc-bubble-in); color: var(--tcc-bubble-in-text); border-bottom-left-radius: 4px; }
.tc-chat-msg--out { align-self: flex-end; background: var(--tcc-accent); color: var(--tcc-accent-text); border-bottom-right-radius: 4px; }

.tc-chat-compose {
    display: flex; gap: 8px; padding: 12px; flex-shrink: 0;
    border-top: 1px solid var(--tcc-border); background: var(--tcc-bg);
}
.tc-chat-input {
    flex: 1 1 auto; padding: 11px 14px;
    border: 1px solid var(--tcc-border); border-radius: 22px;
    background: var(--tcc-surface); color: var(--tcc-text); font-size: 15px;
}
.tc-chat-compose button { border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tc-chat-compose button svg { width: 18px; height: 18px; }

/* visible keyboard focus (WCAG 2.4.7) */
.tc-chat-launch:focus-visible {
    outline: 3px solid var(--tcc-launch-focus-ring, var(--tcc-accent));
    outline-offset: 2px;
}
.tc-chat-start:focus-visible,
.tc-chat-close:focus-visible,
.tc-chat-compose button:focus-visible,
.tc-chat-prechat input:focus-visible,
.tc-chat-input:focus-visible {
    outline: 3px solid var(--tcc-accent);
    outline-offset: 2px;
}

/* ---- Backdrop: the drawer is an overlay that dims the page (a true content "push"
   reliably breaks these themes' fixed/absolute layouts, so we overlay instead). ---- */
.tc-chat-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.tc-chat--open .tc-chat-backdrop { opacity: 1; visibility: visible; }

/* ---- Mobile: full-screen sheet ---- */
@media (max-width: 767.98px) {
    .tc-chat-panel { width: 100vw; max-width: 100vw; }
}