/* Author: Tobalt — https://tobalt.lt */

.tcb-root {
    /* v0.14.0 — adopt host-site Elementor kit colors when present so the
       chatbot reads as part of the surrounding brand, not Tobalt. Tobalt
       hex defaults survive for non-Elementor sites and as a safety net. */
    --tcb-accent:      var(--e-global-color-primary,   #0A0C00); /* launcher/header bg */
    --tcb-accent-text: var(--e-global-color-secondary, #E3FF04); /* text/icon on accent */
    --tcb-cta-bg:      var(--e-global-color-accent,    #E3FF04); /* user bubble + send btn bg */
    --tcb-cta-text:    var(--e-global-color-text,      #0A0C00); /* text on CTA */
    --tcb-bot-bg:      #F6F5F3;                                  /* bot bubble — neutral smoke */
    --tcb-bot-text:    var(--e-global-color-text,      #0A0C00);
    --tcb-border:      #dee2e6;
    --tcb-focus:       #c8b6ff;                                  /* lavender focus ring (neutral) */
    --tcb-radius: 12px;
    --tcb-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #0A0C00;
    box-sizing: border-box;
}
.tcb-root *, .tcb-root *::before, .tcb-root *::after { box-sizing: inherit; }

/* Launcher button */
.tcb-launcher {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--tcb-accent);
    color: var(--tcb-accent-text);
    border: none;
    box-shadow: var(--tcb-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 2147483646;
}
.tcb-launcher:hover  { transform: scale(1.06); }
.tcb-launcher:focus  { outline: 3px solid var(--tcb-focus); outline-offset: 2px; }
.tcb-launcher.is-open { transform: scale(0); }

/* Dialog */
.tcb-dialog {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: var(--tcb-radius);
    box-shadow: var(--tcb-shadow);
    display: flex;
    flex-direction: column;
    z-index: 2147483647;
    overflow: hidden;
    animation: tcb-slide-in 0.2s ease;
}
@keyframes tcb-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tcb-dialog[hidden] { display: none; }

/* Header */
.tcb-header {
    background: var(--tcb-accent);
    color: var(--tcb-accent-text);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    /* v0.20.1 — `.tcb-consent` (below) is `position:absolute; inset:0;
       z-index:10` inside this `position:fixed` dialog, so its inset:0 spans
       the WHOLE dialog including this header. Header/close button were
       unpositioned (static, z-index:auto), so the opaque overlay painted
       over the close button — a mobile visitor who declines has no exit but
       a page reload. Promote the header into its own positioned stacking
       context above the gate so its chrome (title, provider toggle, close
       button) stays visible and clickable while the gate is up. The gate
       still geometrically covers the messages area underneath. */
    position: relative;
    z-index: 11;
}
.tcb-title-block { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tcb-bot-avatar  { display: flex; align-items: center; }
.tcb-header .tcb-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--tcb-accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Provider toggle */
.tcb-provider-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 2px;
}
.tcb-provider-btn {
    background: transparent;
    color: var(--tcb-accent-text);
    border: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.tcb-provider-btn:hover            { background: rgba(255, 255, 255, 0.15); }
.tcb-provider-btn.is-active        { background: rgba(255, 255, 255, 0.95); color: var(--tcb-accent); }
.tcb-provider-btn:focus            { outline: 2px solid var(--tcb-focus); outline-offset: 2px; }


/* Close button */
.tcb-close {
    background: transparent;
    border: none;
    color: var(--tcb-accent-text);
    cursor: pointer;
    width: 36px;
    height: 36px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.tcb-close:hover { background: rgba(255, 255, 255, 0.15); }
.tcb-close:focus { outline: 2px solid var(--tcb-focus); outline-offset: 2px; }

/* Messages area */
.tcb-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fafbfc;
}

.tcb-msg { display: flex; }
.tcb-msg-user { justify-content: flex-end; }
.tcb-msg-bot  { flex-direction: column; align-items: flex-start; }
.tcb-msg-bot > .tcb-bubble,
.tcb-msg-bot > .tcb-sources,
.tcb-msg-bot > .tcb-msg-meta { max-width: 100%; }

.tcb-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.tcb-msg-user .tcb-bubble {
    background: var(--tcb-cta-bg);
    color: var(--tcb-cta-text);
    border-bottom-right-radius: 4px;
}
.tcb-msg-bot .tcb-bubble {
    background: var(--tcb-bot-bg);
    color: var(--tcb-bot-text);
    border-bottom-left-radius: 4px;
}

.tcb-msg-meta {
    font-size: 11px;
    color: #495057;
    margin-top: 4px;
    padding: 0 8px;
}

/* Inline links rendered from markdown [text](url) inside bot bubbles */
.tcb-msg-bot .tcb-bubble .tcb-inline-link {
    color: var(--tcb-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}
.tcb-msg-bot .tcb-bubble .tcb-inline-link:hover {
    text-decoration-thickness: 2px;
}
.tcb-msg-bot .tcb-bubble .tcb-inline-link:focus-visible {
    outline: 2px solid var(--tcb-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sources sit BELOW the bubble as a separate block, not glued to it.
   No top border, no internal padding — let each card breathe on its own. */
.tcb-sources {
    margin-top: 12px;
    padding: 0;
    width: 100%;
}
.tcb-sources-heading {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #495057;
    margin-bottom: 6px;
}
.tcb-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: tcb-source;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tcb-source-item {
    counter-increment: tcb-source;
    margin: 0;
    padding: 0;
}
/* Each source is a contained, clickable card. The whole row gets the bg —
   wrapped text stays inside, hanging-indented under the title. */
.tcb-source {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 8px;
    align-items: baseline;
    background: var(--tcb-bot-bg);
    border: 1px solid var(--tcb-border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--tcb-accent);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tcb-source::before {
    content: "[" counter(tcb-source) "]";
    color: #495057;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.tcb-source-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
.tcb-source-arrow {
    color: #495057;
    font-size: 12px;
    opacity: 0.7;
    align-self: center;
}
.tcb-source:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    text-decoration: underline;
    text-decoration-color: var(--tcb-accent);
    text-underline-offset: 2px;
}
.tcb-source:hover .tcb-source-text { text-decoration: underline; }
.tcb-source:focus-visible {
    outline: 2px solid var(--tcb-accent);
    outline-offset: 2px;
}

/* Typing indicator */
.tcb-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.tcb-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #adb5bd;
    animation: tcb-pulse 1.4s infinite ease-in-out;
}
.tcb-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.tcb-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes tcb-pulse {
    0%, 60%, 100% { opacity: 0.3; }
    30%           { opacity: 1.0; }
}

/* Quick starts */
.tcb-quick-starts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.tcb-chip {
    background: #f4f4f4;
    color: #1a1a1a;
    border: 1px solid var(--tcb-accent);
    border-radius: 999px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tcb-chip:hover {
    background: var(--tcb-accent);
    color: var(--tcb-accent-text);
}
.tcb-chip:focus {
    outline: 2px solid var(--tcb-accent);
    outline-offset: 2px;
}

/* Error banner */
.tcb-error {
    background: #fff5f5;
    color: #c92a2a;
    border: 1px solid #ffc9c9;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
}

/* Input area */
.tcb-input-area {
    border-top: 1px solid var(--tcb-border);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: #ffffff;
    flex-shrink: 0;
}
.tcb-input {
    flex: 1;
    border: 1px solid var(--tcb-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    resize: none;
    max-height: 96px;
    overflow-y: auto;
    font-family: inherit;
    color: inherit;
}
.tcb-input:focus { outline: 2px solid var(--tcb-accent); outline-offset: 1px; }
.tcb-input:disabled { background: #f8f9fa; cursor: not-allowed; }
.tcb-send {
    background: var(--tcb-cta-bg);
    color: var(--tcb-cta-text);
    border: none;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}
.tcb-send:hover    { opacity: 0.9; }
.tcb-send:focus    { outline: 2px solid var(--tcb-focus); outline-offset: 2px; }
.tcb-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mobile */
@media (max-width: 600px) {
    .tcb-launcher { bottom: 16px; left: 16px; }
    .tcb-dialog {
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    /* Tighter spacing — reclaim screen real estate on phones */
    .tcb-header        { padding: 10px 12px; gap: 8px; }
    .tcb-messages      { padding: 12px; gap: 8px; }
    .tcb-bubble        { padding: 9px 12px; max-width: 85%; }
    .tcb-input-area    { padding: 8px 10px; gap: 6px; }
    .tcb-sources       { margin-top: 10px; padding: 0; }
    .tcb-input         { font-size: 16px; }    /* iOS Safari skips zoom-on-focus when ≥16px */
    .tcb-msg-bot .tcb-bubble,
    .tcb-msg-user .tcb-bubble { font-size: 15px; line-height: 1.45; }
    .tcb-quick-starts  { gap: 4px; }
    .tcb-chip          { font-size: 13px; padding: 7px 12px; }
    /* Tighter source cards on mobile */
    .tcb-source        { padding: 7px 9px; font-size: 13px; }
}

/* Theme-override safety net — defeat host-theme `button:hover { color: ... }` rules
   that beat our (0,1,0) base selectors on hover. (0,2,0) here beats (0,1,1). */
.tcb-root .tcb-launcher,
.tcb-root .tcb-launcher:hover,
.tcb-root .tcb-close,
.tcb-root .tcb-close:hover,
.tcb-root .tcb-provider-btn,
.tcb-root .tcb-provider-btn:hover,
.tcb-root .tcb-location-btn,
.tcb-root .tcb-location-btn:hover { color: var(--tcb-accent-text); }
/* Send button sits on lime CTA bg — icon must be dark, not lime-on-lime. */
.tcb-root .tcb-send,
.tcb-root .tcb-send:hover { color: var(--tcb-cta-text); }
.tcb-root .tcb-provider-btn.is-active,
.tcb-root .tcb-provider-btn.is-active:hover { color: var(--tcb-accent); }
/* Chip default: light bg + dark text (WCAG AAA ~16:1). Hover: accent bg + white.
   Uses (0,2,0) to beat Elementor-kit `button` rules at (0,1,1). */
.tcb-root .tcb-chip { background: #f4f4f4; color: #1a1a1a; }
.tcb-root .tcb-chip:hover { background: var(--tcb-accent); color: #ffffff; }
.tcb-root .tcb-chip:focus { outline: 2px solid var(--tcb-accent); outline-offset: 2px; }
.tcb-root .tcb-source,
.tcb-root .tcb-source:hover { color: var(--tcb-accent); }

/* ---- Visual Styling C (v0.10.2) — stop pills, time chips, route badges ---- */

/* Stop name pill */
.tcb-stop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #e8f0fe;
    color: #1a3d6b;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.93em;
    white-space: nowrap;
    line-height: 1.4;
}
.tcb-stop::before {
    content: '🚏';
    font-size: 0.85em;
}

/* Time chip */
.tcb-time {
    display: inline-block;
    padding: 1px 6px;
    background: #f4f4f4;
    color: #1a1a1a;
    border-radius: 6px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid #e0e0e0;
}

/* Route number badge */
.tcb-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--tcb-accent);
    color: var(--tcb-accent-text);
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85em;
    line-height: 1;
}

/* ---- Inline "Nustatyti vietą" location link (v0.10.2) ---- */
/* Uses (0,3,0) specificity — beats any host theme rule at (0,1,1) or (0,2,0). */
.tcb-root .tcb-msg-bot .tcb-bubble a[href="#tobalt-set-location"],
.tcb-root .tcb-msg-bot .tcb-bubble a[href="#tobalt-set-location"]:hover {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--tcb-accent);
    color: var(--tcb-accent-text);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}
.tcb-root .tcb-msg-bot .tcb-bubble a[href="#tobalt-set-location"]:hover {
    opacity: 0.88;
}
.tcb-root .tcb-msg-bot .tcb-bubble a[href="#tobalt-set-location"]::before {
    content: '📍';
    font-size: 0.85em;
}
.tcb-root .tcb-msg-bot .tcb-bubble a[href="#tobalt-set-location"]:focus-visible {
    outline: 2px solid var(--tcb-focus);
    outline-offset: 2px;
    border-radius: 999px;
}

/* Screen reader only */
.tcb-root .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* v0.11.0 — handoff CTA card (rendered by chatbot.js appendHandoffCard) */
.tcb-root .tcb-handoff-card {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba( 0, 0, 0, 0.03 );
    border: 1px solid var( --tcb-border, #d0d4dc );
    border-left: 4px solid var( --tcb-accent, #0A0C00 );
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.tcb-root .tcb-handoff-card .tcb-handoff-title {
    display: block;
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var( --tcb-bot-text, #0A0C00 );
}

.tcb-root .tcb-handoff-card .tcb-handoff-body {
    margin: 0 0 10px 0;
    color: var( --tcb-bot-text, #0A0C00 );
}

.tcb-root .tcb-handoff-card .tcb-handoff-btn,
.tcb-root .tcb-handoff-card a.tcb-handoff-btn {
    display: inline-block;
    padding: 8px 14px;
    background: var( --tcb-accent, #0A0C00 );
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    transition: opacity .15s ease;
}

.tcb-root .tcb-handoff-card .tcb-handoff-btn:hover,
.tcb-root .tcb-handoff-card a.tcb-handoff-btn:hover {
    opacity: 0.88;
    color: #fff;
    text-decoration: none;
}

.tcb-root .tcb-handoff-card .tcb-handoff-btn:focus-visible {
    outline: 2px solid #E3FF04;
    outline-offset: 2px;
}

@media ( max-width: 600px ) {
    .tcb-root .tcb-handoff-card {
        padding: 12px 14px;
        font-size: 13px;
    }
}

/* v0.12.0 — Chatwoot live-agent mode: system pills, agent bubbles, agent avatar */
.tcb-root .tcb-msg-system {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.tcb-root .tcb-system-pill {
    background: rgba( 0, 0, 0, 0.06 );
    color: var( --tcb-bot-text, #0A0C00 );
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.35;
    max-width: 80%;
    text-align: center;
}

.tcb-root .tcb-msg-agent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
}

.tcb-root .tcb-avatar-agent {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var( --tcb-agent-accent, #1a7e3a );
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.tcb-root .tcb-bubble-agent {
    background: var( --tcb-agent-accent, #1a7e3a );
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px 12px 12px 4px;
    max-width: 80%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tcb-root .tcb-agent-label {
    font-size: 11px;
    color: var( --tcb-text-secondary, #555 );
    margin-top: 2px;
}

/* v0.12.4 — back-to-bot recovery button on the soft-notice pill */
.tcb-root .tcb-back-to-bot-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}
.tcb-root .tcb-back-to-bot-btn {
    background: var( --tcb-accent );
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.tcb-root .tcb-back-to-bot-btn:hover { filter: brightness( 1.1 ); }
.tcb-root .tcb-back-to-bot-btn:focus-visible {
    outline: 2px solid var( --tcb-accent );
    outline-offset: 2px;
}

/* v0.13.0 — "Paaiškinkite paprasčiau" recovery button under each bot reply */
.tcb-root .tcb-simplify-wrap {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
    margin-left: 4px;
}
.tcb-root .tcb-simplify-btn {
    background: transparent;
    color: var( --tcb-accent, #0A0C00 );
    border: 1px solid var( --tcb-accent, #0A0C00 );
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tcb-root .tcb-simplify-btn:hover:not(:disabled) {
    background: var( --tcb-accent, #0A0C00 );
    color: #fff;
}
.tcb-root .tcb-simplify-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* v0.13.0 — persistent footer with phone + email (always-visible escape hatch) */
.tcb-root .tcb-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    background: var( --tcb-bg-soft, #f1f3f5 );
    border-top: 1px solid var( --tcb-border, #dee2e6 );
    font-size: 13px;
    color: var( --tcb-text, #212529 );
}
.tcb-root .tcb-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var( --tcb-accent, #0A0C00 );
    text-decoration: none;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.tcb-root .tcb-footer-link:hover { background: rgba( 0, 0, 0, 0.05 ); }
.tcb-root .tcb-footer-icon { font-size: 14px; }

/* v0.14.0 — launcher tooltip ("Ar turite klausimų?") shown 3s after page load. */
.tcb-root .tcb-launcher-tip {
    position: fixed;
    bottom: 36px;
    left: 96px;
    max-width: 220px;
    background: var(--tcb-accent);
    color: var(--tcb-accent-text);
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    box-shadow: var(--tcb-shadow);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    z-index: 2147483645;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.tcb-root .tcb-launcher-tip[hidden] { display: none; }
.tcb-root .tcb-launcher-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.tcb-root .tcb-launcher-tip::before {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 14px;
    width: 12px;
    height: 12px;
    background: var(--tcb-accent);
    transform: rotate(45deg);
    border-radius: 2px;
}
@media (max-width: 600px) {
    .tcb-root .tcb-launcher-tip {
        bottom: 28px;
        left: 84px;
        max-width: calc(100vw - 100px);
        font-size: 13px;
    }
}

/* v0.20.0 — privacy consent gate */
/* Author-origin `display` on `.tcb-consent` always beats the UA stylesheet's
   `[hidden] { display: none }` regardless of selector specificity (normal
   author rules outrank normal UA rules in the cascade) — so JS setting
   `consentGate.hidden = true` on acceptance was cosmetically a no-op: the
   overlay stayed visually on top of the dialog and every control inside it
   stayed tab-reachable forever, even after a successful accept. `.tcb-dialog`
   already carries the equivalent `[hidden] { display: none }` override two
   rules below (see .tcb-dialog[hidden]); `.tcb-consent` needs the same one.
   Found while browser-verifying F1/F2 for this same overlay — not one of
   the five numbered findings, fixed alongside them because it sits in the
   exact code path already under test and left unfixed would make F1/F2's
   correctness moot once the gate is dismissed. */
.tcb-consent[hidden] { display: none; }
.tcb-consent {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* `.tcb-dialog` is `overflow:hidden`, and VMB's real consent sentence is
       long enough to overflow a short mobile viewport — without its own
       scroll, the checkbox and/or start button become permanently
       unreachable (soft lock). Plain `justify-content: center` on an
       overflowing flex column clips the first child above the scroll
       origin (verified with a headless-browser probe: scrollTop stayed 0
       but the heading rendered above the visible area, negative offset).
       `justify-content: safe center` fixes that in browsers that support
       the `safe`/`unsafe` alignment keywords, but support is still patchy
       on older engines a public-sector visitor may be running, so we use
       the universally-supported `flex-start` + top padding instead — content
       always starts reachable at scrollTop 0 and the scrollbar (added
       below) reaches the last child either way. */
    justify-content: flex-start;
    gap: 12px;
    padding: 28px;
    overflow-y: auto;
    text-align: center;
    background: var(--tcb-surface, #fff);
}
.tcb-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}
.tcb-consent-check input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--tcb-accent);
}
.tcb-consent-start {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    /* v0.20.1 — client feedback: "after checking checkbox, button should
       change color to active". Opacity alone (the old rule) left a faded
       accent-coloured button that still READ as coloured/active, so ticking
       the box produced no obvious change. The two states now differ in HUE
       (neutral grey vs full accent), not just alpha, and transition so the
       swap is perceptible rather than instant. */
    transition: background-color .18s ease, color .18s ease;
}
.tcb-consent-start[disabled] {
    background: var(--tcb-border, #dee2e6); /* neutral grey — reads as "not yet available" */
    color: #868e96;
    cursor: not-allowed;
}
.tcb-consent-start:not([disabled]) {
    background: var(--tcb-accent);
    color: #fff;
    cursor: pointer;
}
.tcb-consent-start:not([disabled]):hover {
    opacity: .9;
}
.tcb-consent-start:not([disabled]):focus-visible {
    outline: 2px solid var(--tcb-accent);
    outline-offset: 2px;
}
/* v0.20.1 — consent-path error (Important 4). Reuses .tcb-error's palette
   for visual consistency with the rest of the widget's error banners. */
.tcb-consent-error {
    width: 100%;
    background: #fff5f5;
    color: #c92a2a;
    border: 1px solid #ffc9c9;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin: 0;
    text-align: left;
}
.tcb-consent-error[hidden] { display: none; }