/* Chatbot ALISS Widget — v2.1
   Goals: cohesive palette, soft surfaces, generous spacing, accessible.
   Refined from v2.0 based on screenshot feedback. */

:root {
    --ca-primary: #005EB8;
    --ca-primary-dark: #004A93;
    --ca-primary-soft: #E6F1FB;
    --ca-accent: #028090;
    --ca-accent-light: #00A896;
    --ca-accent-soft: #E0F2F1;
    --ca-mint: #02C39A;
    --ca-navy: #1E2D44;
    --ca-slate: #3A4A5E;
    --ca-muted: #6B7A8F;
    --ca-border: #E4E7EC;
    --ca-border-soft: #F1F3F6;
    --ca-bg: #FAFBFC;
    --ca-white: #FFFFFF;
    --ca-success: #10B981;
    --ca-danger: #DC2626;
    --ca-warning: #F59E0B;
    --ca-shadow-sm: 0 1px 2px rgba(30, 45, 68, 0.04);
    --ca-shadow: 0 8px 32px rgba(30, 45, 68, 0.08);
    --ca-shadow-lg: 0 12px 40px rgba(30, 45, 68, 0.12);
}

.chatbot-aliss-app * { box-sizing: border-box; }

.chatbot-aliss-app {
    --ca-font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--ca-font-size);
    line-height: 1.6;
    color: var(--ca-slate);
    background: var(--ca-white);
    border: 1px solid var(--ca-border);
    border-radius: 16px;
    box-shadow: var(--ca-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* INLINE MODE — auto-sizes to its content. Messages area has its own scroll cap. */
.chatbot-aliss-app.ca-mode-inline {
    width: 100%;
    margin: 1rem 0;
    height: auto;
}

/* The messages area is the flexible bit. Cap its visible height so a long
   conversation scrolls inside the messages area instead of pushing the rest
   of the page down. Tighter cap on smaller viewports. */
.chatbot-aliss-app.ca-mode-inline .ca-messages {
    min-height: 240px;
    max-height: 480px;
}

@media (min-height: 800px) {
    .chatbot-aliss-app.ca-mode-inline .ca-messages {
        max-height: 560px;
    }
}

@media (min-height: 1000px) {
    .chatbot-aliss-app.ca-mode-inline .ca-messages {
        max-height: 700px;
    }
}

/* FULLSCREEN MODE — fills the entire viewport */
.chatbot-aliss-app.ca-mode-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 99999;
}

/* v7.1.0-rc156: when the embed iframe enters the browser Fullscreen API, fill
   the screen exactly like fullscreen mode. Triggered by the ca-embed-fullscreen
   class and also matched directly via the :fullscreen pseudo-class as a
   belt-and-braces fallback. */
.chatbot-aliss-app.ca-embed-fullscreen,
:fullscreen .chatbot-aliss-app {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 99999;
}

/* When fullscreen mode, hide everything else on the page */
body.chatbot-aliss-fullscreen-page {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.chatbot-aliss-fullscreen-page > *:not(#chatbot-aliss-app):not(script):not(style) {
    display: none !important;
}

body.chatbot-aliss-fullscreen-page #wpadminbar,
body.chatbot-aliss-fullscreen-page header,
body.chatbot-aliss-fullscreen-page footer,
body.chatbot-aliss-fullscreen-page nav,
body.chatbot-aliss-fullscreen-page aside,
body.chatbot-aliss-fullscreen-page .site-header,
body.chatbot-aliss-fullscreen-page .site-footer,
body.chatbot-aliss-fullscreen-page .header,
body.chatbot-aliss-fullscreen-page .footer,
body.chatbot-aliss-fullscreen-page .navbar,
body.chatbot-aliss-fullscreen-page .navigation {
    display: none !important;
}

body.chatbot-aliss-fullscreen-page #page,
body.chatbot-aliss-fullscreen-page #content,
body.chatbot-aliss-fullscreen-page #main,
body.chatbot-aliss-fullscreen-page main,
body.chatbot-aliss-fullscreen-page article,
body.chatbot-aliss-fullscreen-page .entry-content,
body.chatbot-aliss-fullscreen-page .page-content,
body.chatbot-aliss-fullscreen-page .site-content,
body.chatbot-aliss-fullscreen-page .container,
body.chatbot-aliss-fullscreen-page .wrap {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    display: block !important;
}

.chatbot-aliss-app.ca-font-large  { --ca-font-size: 18px; }
.chatbot-aliss-app.ca-font-xlarge { --ca-font-size: 20px; }

/* ====================== HEADER ====================== */
.chatbot-aliss-app .ca-header {
    background: linear-gradient(135deg, var(--ca-primary) 0%, var(--ca-primary-dark) 100%);
    color: #fff;
    flex-shrink: 0;
}

/* v7.1.0-rc161: the header scrolling away was caused by the whole app being
   taller than the iframe, so the browser scrolled the entire app (header and
   all) instead of just the messages. position:sticky cannot help here because
   the header is a flex sibling of the messages, not inside their scroll box.
   The real fix: in fullscreen / embed, force the app to exactly fill its
   container and never overflow, so the header and input are fixed flex rows and
   ONLY the messages area scrolls. */
.chatbot-aliss-app.ca-mode-fullscreen,
.chatbot-aliss-app.ca-embed-fullscreen,
:fullscreen .chatbot-aliss-app {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.chatbot-aliss-app.ca-mode-fullscreen .ca-header,
.chatbot-aliss-app.ca-embed-fullscreen .ca-header,
:fullscreen .chatbot-aliss-app .ca-header {
    flex: 0 0 auto;
}
.chatbot-aliss-app.ca-mode-fullscreen .ca-messages,
.chatbot-aliss-app.ca-embed-fullscreen .ca-messages,
:fullscreen .chatbot-aliss-app .ca-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* Keep the input row, tools and footer pinned at the bottom (not scrolling). */
.chatbot-aliss-app.ca-mode-fullscreen .ca-input-row,
.chatbot-aliss-app.ca-mode-fullscreen .ca-tools,
.chatbot-aliss-app.ca-mode-fullscreen .ca-footer,
.chatbot-aliss-app.ca-embed-fullscreen .ca-input-row,
.chatbot-aliss-app.ca-embed-fullscreen .ca-tools,
.chatbot-aliss-app.ca-embed-fullscreen .ca-footer,
:fullscreen .chatbot-aliss-app .ca-input-row,
:fullscreen .chatbot-aliss-app .ca-tools,
:fullscreen .chatbot-aliss-app .ca-footer {
    flex: 0 0 auto;
}

.chatbot-aliss-app .ca-header-main {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.chatbot-aliss-app .ca-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.chatbot-aliss-app .ca-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ca-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chatbot-aliss-app .ca-brand-logo img {
    width: 100%; height: 100%; object-fit: cover;
}

.chatbot-aliss-app .ca-brand-title {
    font-size: 24px; /* v7.1.0-rc73: two steps larger */
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* v7.1.0-rc70: two-line brand block — assistant name on top, tagline below. */
.chatbot-aliss-app .ca-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}
.chatbot-aliss-app .ca-brand-accent { color: #FFD60A; } /* v7.1.0-rc72: yellow, not gold */
.chatbot-aliss-app .ca-brand-tagline {
    font-size: 12px;
    font-weight: 500;
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chatbot-aliss-app .ca-brand-saltire { display: block; border-radius: 3px; }

.chatbot-aliss-app .ca-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-lang-btn,
.chatbot-aliss-app .ca-icon-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background 0.15s;
}

.chatbot-aliss-app .ca-lang-btn:hover,
.chatbot-aliss-app .ca-icon-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.chatbot-aliss-app .ca-font-btn {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
    font-style: italic;
    font-size: 15px;
}

/* Language menu dropdown */
.chatbot-aliss-app .ca-lang-menu {
    position: absolute;
    top: 70px;
    right: 20px;
    background: #fff;
    border: 1px solid var(--ca-border);
    border-radius: 12px;
    box-shadow: var(--ca-shadow-lg);
    max-height: 340px;
    overflow-y: auto;
    z-index: 100;
    min-width: 200px;
    padding: 6px;
}

.chatbot-aliss-app .ca-lang-menu[hidden] { display: none; }

.chatbot-aliss-app .ca-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ca-slate);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    border-radius: 8px;
}

.chatbot-aliss-app .ca-lang-option:hover {
    background: var(--ca-bg);
}

.chatbot-aliss-app .ca-lang-option.ca-lang-active {
    background: var(--ca-accent-soft);
    color: var(--ca-accent);
    font-weight: 600;
}

/* "AI gifted by" bar */
.chatbot-aliss-app .ca-gifted {
    background: rgba(255, 255, 255, 0.12);
    padding: 8px 20px;
    font-size: 12px;
    text-align: right;
    color: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chatbot-aliss-app .ca-gifted-heart {
    color: #FFD960;
    margin-right: 6px;
}

/* ====================== MESSAGES ====================== */
.chatbot-aliss-app .ca-messages {
    flex: 1;
    overflow-y: auto;
    overflow-anchor: none;
    padding: 24px 20px;
    background: var(--ca-bg);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.chatbot-aliss-app .ca-message {
    max-width: 92%;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chatbot-aliss-app .ca-message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 0 4px;
}

.chatbot-aliss-app .ca-message-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: var(--ca-shadow-sm);
}

.chatbot-aliss-app .ca-message-name {
    font-weight: 600;
    color: var(--ca-primary);
}

.chatbot-aliss-app .ca-message-time {
    color: var(--ca-muted);
}

.chatbot-aliss-app .ca-message-listen {
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--ca-border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--ca-slate);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: all 0.15s;
}

.chatbot-aliss-app .ca-message-listen:hover {
    background: var(--ca-accent);
    color: #fff;
    border-color: var(--ca-accent);
}

.chatbot-aliss-app .ca-message-listen.ca-listening {
    background: var(--ca-accent);
    color: #fff;
    border-color: var(--ca-accent);
}

.chatbot-aliss-app .ca-message-text {
    padding: 14px 18px;
    border-radius: 16px;
    line-height: 1.65;
    font-size: var(--ca-font-size);
    box-shadow: var(--ca-shadow-sm);
}

.chatbot-aliss-app .ca-message-bot { align-self: flex-start; }
.chatbot-aliss-app .ca-message-bot .ca-message-text {
    background: #fff;
    color: var(--ca-navy);
    border: 1px solid var(--ca-border-soft);
    border-bottom-left-radius: 6px;
}

/* v7.1.0-rc68: while a non-English answer is being translated, hide the
   English source and show a calm shimmer in its place (the bot avatar above
   stays visible, so it reads as "thinking"). This stops the answer flashing up
   in English and then swapping to the chosen language. translateBotMessageDom()
   removes this class the instant the translation lands, and a safety timer
   removes it after 4s so an answer can never get stuck hidden. */
.chatbot-aliss-app .ca-message-bot.ca-msg-translating .ca-message-text { display: none; }
.chatbot-aliss-app .ca-message-bot.ca-msg-translating { position: relative; }
.chatbot-aliss-app .ca-message-bot.ca-msg-translating::after {
    content: "";
    display: block;
    margin-top: 6px;
    width: 65%;
    max-width: 240px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.05) 63%);
    background-size: 400% 100%;
    animation: ca-translating-shimmer 1.15s ease-in-out infinite;
}
@keyframes ca-translating-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .chatbot-aliss-app .ca-message-bot.ca-msg-translating::after { animation: none; }
}

.chatbot-aliss-app .ca-message-user {
    align-self: flex-end;
    align-items: flex-end;
}

.chatbot-aliss-app .ca-message-user .ca-message-text {
    background: linear-gradient(135deg, var(--ca-accent), var(--ca-accent-light));
    color: #fff;
    border-bottom-right-radius: 6px;
}

.chatbot-aliss-app .ca-message-text strong { color: var(--ca-navy); font-weight: 600; }
.chatbot-aliss-app .ca-message-user .ca-message-text strong { color: #fff; }
.chatbot-aliss-app .ca-message-text a {
    color: var(--ca-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color 0.15s;
}
.chatbot-aliss-app .ca-message-text a:hover { color: var(--ca-accent-light); }
.chatbot-aliss-app .ca-message-user .ca-message-text a { color: #fff; }

/* Links specifically pointing at aliss.org — give them a small "external" cue */
.chatbot-aliss-app .ca-message-text a[href*="aliss.org"]::after {
    content: " ↗";
    font-size: 0.85em;
    margin-left: 2px;
    opacity: 0.7;
}

/* Phone numbers — pop visually so users know they're tap-to-call on mobile */
.chatbot-aliss-app .ca-message-text a.ca-phone-link {
    background: var(--ca-accent-soft);
    color: var(--ca-accent);
    padding: 2px 8px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.15s;
    display: inline-block;
}

.chatbot-aliss-app .ca-message-text a.ca-phone-link:hover,
.chatbot-aliss-app .ca-message-text a.ca-phone-link:active {
    background: var(--ca-accent);
    color: #fff;
    border-color: var(--ca-accent);
}

.chatbot-aliss-app .ca-message-text a.ca-phone-link::before {
    content: "📞 ";
    margin-right: 2px;
}

/* Inside user messages (rare but possible), keep the white tone */
.chatbot-aliss-app .ca-message-user .ca-message-text a.ca-phone-link {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
.chatbot-aliss-app .ca-message-text p { margin: 0 0 10px 0; }
.chatbot-aliss-app .ca-message-text p:last-child { margin-bottom: 0; }

/* ========== v3.9 SERVICE CARDS ==========
   Each ALISS service result renders as its own visually distinct card.
   This replaces the old "wall of text" presentation. */
.chatbot-aliss-app .ca-service-card {
    background: #fff;
    border: 1px solid var(--ca-border);
    border-left: 4px solid var(--ca-accent);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 12px 0;
    box-shadow: 0 1px 3px rgba(30, 45, 68, 0.06);
    transition: box-shadow 0.15s, transform 0.15s;
}
.chatbot-aliss-app .ca-service-card:hover {
    box-shadow: 0 4px 12px rgba(30, 45, 68, 0.10);
    transform: translateY(-1px);
}

.chatbot-aliss-app .ca-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ca-navy);
    line-height: 1.35;
    margin-bottom: 3px;
}
.chatbot-aliss-app .ca-card-title strong {
    font-weight: 700;
    color: var(--ca-navy);
}
.chatbot-aliss-app .ca-card-title em {
    font-style: normal;
    color: var(--ca-muted);
    font-weight: 500;
    font-size: 12px;
}

.chatbot-aliss-app .ca-card-verified {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #10B981;
    background: rgba(16, 185, 129, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.chatbot-aliss-app .ca-card-summary {
    font-size: 12px;
    color: var(--ca-slate);
    line-height: 1.45;
    margin: 4px 0 8px 0;
}

.chatbot-aliss-app .ca-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 8px 0;
    align-items: center;
}

/* v5.0.6: Email and website contact links */
.chatbot-aliss-app .ca-card-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 4px 0 8px;
}
.chatbot-aliss-app .ca-contact-link {
    font-size: 12px;
    color: #005EB8;
    text-decoration: none;
    word-break: break-all;
    transition: opacity 0.2s;
}
.chatbot-aliss-app .ca-contact-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* v5.0.7: Per-card listen button */
.chatbot-aliss-app .ca-card-listen {
    background: none;
    border: 1px solid #005EB8;
    color: #005EB8;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.chatbot-aliss-app .ca-card-listen:hover {
    background: #005EB8;
    color: #fff;
}
.chatbot-aliss-app .ca-card-listen.ca-listening {
    background: #005EB8;
    color: #fff;
    animation: ca-pulse 1s infinite;
}
@keyframes ca-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Coverage badge — different colours for distance vs area vs national */
.chatbot-aliss-app .ca-card-coverage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 14px;
    background: var(--ca-accent-soft);
    color: var(--ca-accent);
}
.chatbot-aliss-app .ca-card-coverage.ca-coverage-distance {
    background: var(--ca-accent-soft);
    color: var(--ca-accent);
}
.chatbot-aliss-app .ca-card-coverage.ca-coverage-area {
    background: var(--ca-primary-soft);
    color: var(--ca-primary-dark);
}
.chatbot-aliss-app .ca-card-coverage.ca-coverage-national {
    background: rgba(2, 195, 154, 0.12);
    color: #047857;
}
.chatbot-aliss-app .ca-card-coverage.ca-coverage-online {
    background: rgba(99, 102, 241, 0.10);
    color: #4338CA;
}
.chatbot-aliss-app .ca-card-coverage .ca-card-icon {
    font-size: 12px;
}

/* Phone in card — slight override of the global phone link style */
.chatbot-aliss-app .ca-card-phone .ca-phone-link {
    background: #fff;
    border: 1px solid var(--ca-accent);
    color: var(--ca-accent);
    font-size: 12px;
    padding: 3px 8px;
}
.chatbot-aliss-app .ca-card-phone .ca-phone-link:hover,
.chatbot-aliss-app .ca-card-phone .ca-phone-link:active {
    background: var(--ca-accent);
    color: #fff;
}

.chatbot-aliss-app .ca-card-extra {
    font-size: 13px;
    color: var(--ca-muted);
    margin: 6px 0;
    line-height: 1.5;
}

.chatbot-aliss-app .ca-card-stale {
    font-size: 12px;
    color: var(--ca-warning);
    background: rgba(245, 158, 11, 0.08);
    padding: 6px 10px;
    border-radius: 6px;
    margin: 8px 0 0 0;
    line-height: 1.4;
}

.chatbot-aliss-app .ca-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ca-border-soft);
    font-size: 11px;
}
.chatbot-aliss-app .ca-card-link-wrap a.ca-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--ca-accent);
    text-decoration: none;
    font-size: 12px;
}
.chatbot-aliss-app .ca-card-link-wrap a.ca-card-link::after {
    content: " ↗";
    font-size: 0.85em;
    opacity: 0.7;
}
.chatbot-aliss-app .ca-card-link-wrap a.ca-card-link:hover {
    color: var(--ca-accent-light);
    text-decoration: underline;
}
.chatbot-aliss-app .ca-card-verified-date {
    color: var(--ca-muted);
    font-style: italic;
}

/* v4.6.9: Category and who tag pills — dark theme */
.chatbot-aliss-app .ca-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.chatbot-aliss-app .ca-tag {
    font-size: 11px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.chatbot-aliss-app .ca-tag-cat {
    background: #005EB8;
    color: #fff;
}
.chatbot-aliss-app .ca-tag-who {
    background: #005EB8;
    color: #fff;
}

/* Mobile: cards hug the full width of the message bubble */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-service-card {
        padding: 14px 14px;
        margin: 10px 0;
    }
    .chatbot-aliss-app .ca-card-meta {
        gap: 6px 8px;
    }
    .chatbot-aliss-app .ca-card-coverage,
    .chatbot-aliss-app .ca-card-phone .ca-phone-link {
        font-size: 12px;
    }
}

.chatbot-aliss-app .ca-message-intercept .ca-message-text {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-left: 4px solid #EA580C;
    color: var(--ca-slate);
}

/* v6.1.2: Tester mode banner — only visible when the operator is using
   [chatbot_aliss_tester] while logged in as a WP admin. Coral background
   so it can't be confused with anything legitimate the public would see. */
.chatbot-aliss-app .ca-tester-banner {
    flex: 0 0 auto;
    background: #E8755A; /* TFW coral */
    color: #fff;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #C25940;
}
.chatbot-aliss-app .ca-tester-banner strong {
    font-weight: 700;
    letter-spacing: 0.5px;
}
.chatbot-aliss-app .ca-tester-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFF;
    flex-shrink: 0;
    animation: ca-tester-pulse 1.6s ease-in-out infinite;
}
@keyframes ca-tester-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .chatbot-aliss-app .ca-tester-dot { animation: none; }
}

/* ========== v6.0.0 — TIERED CARDS ==========
   Same card layout for every tier; only the left border colour and the
   tier badge change. Local stays on the existing teal accent (no override
   needed). National = blue. Web = coral with a verify-directly warning.
   Empty = muted neutral. */

.chatbot-aliss-app .ca-service-card.ca-tier-national {
    border-left-color: #005EB8; /* Scottish blue */
}
.chatbot-aliss-app .ca-service-card.ca-tier-web {
    border-left-color: #E8755A; /* TFW coral */
}
.chatbot-aliss-app .ca-service-card.ca-tier-empty {
    border-left-color: var(--ca-muted);
    background: #FAFBFC;
}

/* Tier badge — sits at the top of the card, above the title.
   One row, small caps, full-width-of-content, never wraps awkwardly. */
.chatbot-aliss-app .ca-card-tier-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.chatbot-aliss-app .ca-card-tier-badge-local {
    background: #E0F2F1;
    color: #034F4A;
}
.chatbot-aliss-app .ca-card-tier-badge-nhs {
    background: #005EB8;
    color: #ffffff;
}
.chatbot-aliss-app .ca-card-tier-badge-ci {
    background: #5B2D86;
    color: #ffffff;
}
.chatbot-aliss-app .ca-card-tier-badge-local {
    background: #B8860B;
    color: #ffffff;
}
.chatbot-aliss-app .ca-card-tier-badge-national {
    background: #E6F1FB;
    color: #003F7A;
}
.chatbot-aliss-app .ca-card-tier-badge-web {
    background: #FDECE5;
    color: #A23F22;
}

/* Web-tier verify warning — sits inside the card, above the summary. */
.chatbot-aliss-app .ca-card-web-warning {
    font-size: 12px;
    color: #A23F22;
    background: #FDECE5;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.chatbot-aliss-app .ca-card-web-warning::before {
    content: "⚠️";
    flex-shrink: 0;
}

/* v5.3.5: Disclaimer overlay */
/* === v6.8.7: Disclaimer popup ===
   Was a chat-internal overlay (position: absolute inside the chat
   wrapper). Promoted to a true viewport-level modal so it reads as
   "this is a binding acknowledgement before you enter" rather than
   "this is a notice at the top of the chat". Tick boxes are required
   before the accept button activates.

   z-index high enough to sit above WordPress admin bars, theme
   stickies, and any host-page chrome. Modal box scrolls internally
   when content exceeds viewport height on mobile, with the button
   pinned to the bottom so it never disappears below the fold. */
.chatbot-aliss-app .ca-disclaimer {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Backdrop animation when first appearing — gives it modal "weight". */
    animation: ca-disclaimer-fade-in 220ms ease-out;
}
@keyframes ca-disclaimer-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.chatbot-aliss-app .ca-disclaimer.ca-hidden { display: none; }
.chatbot-aliss-app .ca-disclaimer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.chatbot-aliss-app .ca-disclaimer-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px 24px 20px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    animation: ca-disclaimer-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
    /* Reserve space at the bottom so the sticky button doesn't crash
       into the last paragraph of text. */
    padding-bottom: 0;
}
@keyframes ca-disclaimer-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.chatbot-aliss-app .ca-disclaimer-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.chatbot-aliss-app .ca-disclaimer-title {
    font-size: 20px;
    font-weight: 600;
    color: #005EB8;
    margin: 0 0 14px;
}
.chatbot-aliss-app .ca-disclaimer-text {
    text-align: left;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}
.chatbot-aliss-app .ca-disclaimer-text p { margin: 6px 0; }
.chatbot-aliss-app .ca-disclaimer-text ul { margin: 6px 0; padding-left: 18px; }
.chatbot-aliss-app .ca-disclaimer-text li { margin-bottom: 4px; }

/* === Tick-box acknowledgments === */
.chatbot-aliss-app .ca-disclaimer-acks {
    margin: 18px 0 14px;
    padding: 14px 14px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: left;
}
.chatbot-aliss-app .ca-disclaimer-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 120ms;
    min-height: 40px; /* Touch target */
}
.chatbot-aliss-app .ca-disclaimer-ack:hover {
    background: rgba(0, 94, 184, 0.04);
}
.chatbot-aliss-app .ca-ack-cb {
    /* Bigger checkbox than browser default — friendlier touch target,
       harder to miss on mobile. */
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
    accent-color: #005EB8;
}
.chatbot-aliss-app .ca-ack-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.45;
    color: #1f2937;
}
.chatbot-aliss-app .ca-ack-text strong {
    color: #005EB8;
}
/* Ticked state — subtle visual feedback that the user has engaged */
.chatbot-aliss-app .ca-disclaimer-ack:has(.ca-ack-cb:checked) {
    background: rgba(0, 94, 184, 0.05);
}
.chatbot-aliss-app .ca-disclaimer-ack:has(.ca-ack-cb:checked) .ca-ack-text {
    color: #0f172a;
}

/* === Button: disabled by default, becomes the accept once all ticked === */
.chatbot-aliss-app .ca-disclaimer-btn {
    /* Sticky to the bottom of the scrollable box so it never disappears
       below the fold on small screens. */
    position: sticky;
    bottom: 0;
    margin: 0 -24px;
    padding: 14px 28px;
    width: calc(100% + 48px);
    background: #005EB8;
    color: #fff;
    border: none;
    border-radius: 0 0 14px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
}
.chatbot-aliss-app .ca-disclaimer-btn:not(:disabled):hover {
    background: #004a96;
}
.chatbot-aliss-app .ca-disclaimer-btn:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: -3px;
}
.chatbot-aliss-app .ca-disclaimer-btn:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}

/* iOS/older browsers: :has() is supported in Safari 15.4+ and Chrome 105+.
   Universal mobile coverage as of 2024. The fallback if :has() doesn't
   resolve is just no row-highlighting — checkbox still works fine. */

/* Typing dots */
.chatbot-aliss-app .ca-typing {
    align-self: flex-start;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--ca-border-soft);
    border-radius: 16px;
    border-bottom-left-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--ca-shadow-sm);
}
.chatbot-aliss-app .ca-typing-msg {
    font-size: 13px;
    color: #005EB8;
    font-weight: 500;
    animation: ca-fade-msg 0.4s ease;
}
@keyframes ca-fade-msg {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chatbot-aliss-app .ca-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #005EB8;
    animation: ca-bounce 1.2s infinite;
}
.chatbot-aliss-app .ca-typing span:nth-child(3) { animation-delay: 0.15s; }
.chatbot-aliss-app .ca-typing span:nth-child(4) { animation-delay: 0.3s; }
@keyframes ca-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ====================== CHIPS — sit there, soft and inviting ====================== */
.chatbot-aliss-app .ca-suggestions {
    background: var(--ca-white);
    border-top: 1px solid var(--ca-border-soft);
    flex-shrink: 0;
}

/* Toggle button is hidden on desktop — chips always visible */
.chatbot-aliss-app .ca-suggestions-toggle {
    display: none;
    width: 100%;
    background: var(--ca-bg);
    border: none;
    border-bottom: 1px solid var(--ca-border-soft);
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: inherit;
    color: var(--ca-navy);
    font-weight: 600;
    font-size: 14px;
}

.chatbot-aliss-app .ca-suggestions-toggle:hover {
    background: var(--ca-primary-soft);
}

.chatbot-aliss-app .ca-suggestions-arrow {
    transition: transform 0.2s;
    color: var(--ca-primary);
}

.chatbot-aliss-app .ca-suggestions[aria-expanded="true"] .ca-suggestions-arrow,
.chatbot-aliss-app .ca-suggestions.ca-expanded .ca-suggestions-arrow {
    transform: rotate(180deg);
}

.chatbot-aliss-app .ca-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: var(--ca-white);
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-chip {
    background: var(--ca-white);
    color: var(--ca-accent);
    border: 1.5px solid var(--ca-accent-soft);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}

.chatbot-aliss-app .ca-chip:hover {
    background: var(--ca-accent);
    color: #fff;
    border-color: var(--ca-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 128, 144, 0.2);
}

.chatbot-aliss-app .ca-chip:active {
    transform: translateY(0);
}

.chatbot-aliss-app .ca-chip:focus-visible {
    outline: 2px solid var(--ca-primary);
    outline-offset: 2px;
}

/* ====================== INPUT ROW ====================== */
.chatbot-aliss-app .ca-input-row {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: var(--ca-white);
    border-top: 1px solid var(--ca-border-soft);
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-input {
    flex: 1;
    /* v6.8.1: bigger input — easier to see what you're typing, easier to
       tap on mobile, and a more inviting target for the cursor. Vertical
       padding ~40% taller (13px → 18px). Font bumped one notch above the
       base size while still respecting the font cycler at the upper end.
       border-radius bumped to match the larger feel. */
    padding: 18px 18px;
    border: 1.5px solid var(--ca-border);
    border-radius: 12px;
    /* v7.1.0-rc96: input text larger again for clear readability while typing.
       Base 16px + 9 = 25px on desktop. Still scales with the Aa font cycler. */
    font-size: calc(var(--ca-font-size) + 5px);
    font-family: inherit;
    color: var(--ca-slate);
    background: var(--ca-bg);
    min-height: 52px;
    transition: all 0.15s;
}

.chatbot-aliss-app .ca-input:focus {
    outline: none;
    border-color: var(--ca-primary);
    background: var(--ca-white);
    box-shadow: 0 0 0 3px var(--ca-primary-soft);
}

.chatbot-aliss-app .ca-input::placeholder {
    color: var(--ca-muted);
}

.chatbot-aliss-app .ca-send-btn {
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-dark));
    color: #fff;
    border: none;
    border-radius: 12px;
    /* v6.8.1: matched to the new taller input. Wider padding and larger
       font keep the button balanced against the input. min-height ensures
       it tracks the input's height across font-size variations. */
    padding: 0 28px;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    /* v7.1.0-rc66: keep the label on one line so a longer translated word (or a
       live-translated language without a curated pack) widens the button rather
       than wrapping it into a tall, broken shape. */
    white-space: nowrap;
    transition: all 0.15s;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0, 94, 184, 0.25);
}

.chatbot-aliss-app .ca-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 94, 184, 0.35);
}

.chatbot-aliss-app .ca-send-btn:focus-visible {
    outline: 2px solid var(--ca-accent);
    outline-offset: 2px;
}

.chatbot-aliss-app .ca-send-btn:disabled {
    background: var(--ca-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ====================== TOOL ROW ====================== */
.chatbot-aliss-app .ca-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 14px 20px;
    background: var(--ca-white);
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-tool {
    background: var(--ca-white);
    border: 1.5px solid var(--ca-border);
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ca-slate);
    font-family: inherit;
    transition: all 0.15s;
}

.chatbot-aliss-app .ca-tool:hover {
    border-color: var(--ca-accent);
    color: var(--ca-accent);
    transform: translateY(-1px);
}


.chatbot-aliss-app .ca-tool-print,
.chatbot-aliss-app .ca-tool-share {
    border-color: var(--ca-border);
}

.chatbot-aliss-app .ca-tool-print:hover,
.chatbot-aliss-app .ca-tool-share:hover {
    background: var(--ca-accent-soft);
}

.chatbot-aliss-app .ca-tool-clear {
    margin-left: 0;
}

.chatbot-aliss-app .ca-search-status-anchor .ca-bubble {
    border-left: 4px solid var(--ca-accent);
}

.chatbot-aliss-app .ca-tool-different-need {
    border-color: var(--ca-accent);
    color: var(--ca-accent);
    font-weight: 600;
}

.chatbot-aliss-app .ca-tool-different-need:hover {
    background: var(--ca-accent-soft);
}

.chatbot-aliss-app .ca-tool-translate[aria-pressed="true"] {
    background: var(--ca-accent-soft);
    border-color: var(--ca-mint);
    color: var(--ca-accent);
    font-weight: 600;
}

.chatbot-aliss-app .ca-tool-handsfree {
    background: var(--ca-accent);
    border-color: var(--ca-accent);
    color: #fff;
}

.chatbot-aliss-app .ca-tool-handsfree:hover {
    background: var(--ca-accent-light);
    color: #fff;
}

.chatbot-aliss-app .ca-tool-handsfree[aria-pressed="true"] {
    background: var(--ca-success);
    border-color: var(--ca-success);
}

.chatbot-aliss-app .ca-tool-speak.ca-recording {
    background: var(--ca-danger);
    border-color: var(--ca-danger);
    color: #fff;
    animation: ca-pulse 1.2s infinite;
}

@keyframes ca-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.chatbot-aliss-app .ca-tool-icon { font-size: 14px; }

/* ====================== FOOTER ====================== */
.chatbot-aliss-app .ca-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--ca-bg);
    border-top: 1px solid var(--ca-border-soft);
    font-size: 12px;
    color: var(--ca-muted);
    gap: 10px;
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-footer-contact {
    background: var(--ca-success);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.chatbot-aliss-app .ca-footer-contact:hover {
    background: #059669;
    transform: translateY(-1px);
}

.chatbot-aliss-app .ca-footer-attribution {
    flex: 1;
    text-align: center;
    font-size: 11px;
}

.chatbot-aliss-app .ca-footer-attribution a {
    color: var(--ca-primary);
    font-weight: 600;
    text-decoration: none;
}

.chatbot-aliss-app .ca-footer-attribution a:hover {
    text-decoration: underline;
}

/* THE EXIT FAST BUTTON */
.chatbot-aliss-app .ca-exit-fast {
    background: linear-gradient(135deg, var(--ca-danger), #B91C1C);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.35);
    letter-spacing: 0.02em;
}

.chatbot-aliss-app .ca-exit-fast:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45);
}

.chatbot-aliss-app .ca-exit-fast:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ====================== MOBILE ====================== */
/* On mobile, the widget ALWAYS fills the screen — regardless of inline/fullscreen mode */
@media (max-width: 768px) {
    .chatbot-aliss-app,
    .chatbot-aliss-app.ca-mode-inline,
    .chatbot-aliss-app.ca-mode-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 100vw !important;
        max-width: 100% !important;
        z-index: 99999 !important;
        box-shadow: none !important;
    }

    /* When the widget is on mobile, lock body scroll behind it */
    body:has(.chatbot-aliss-app) {
        overflow: hidden;
    }

    .chatbot-aliss-app .ca-brand-title { font-size: 20px; }
    .chatbot-aliss-app .ca-lang-btn { padding: 6px 10px; font-size: 12px; }
    .chatbot-aliss-app .ca-tools { padding: 0 14px 12px 14px; }
    .chatbot-aliss-app .ca-tool { font-size: 11px; padding: 8px 10px; }
    .chatbot-aliss-app .ca-input-row,
    .chatbot-aliss-app .ca-chips { padding-left: 14px; padding-right: 14px; }
    .chatbot-aliss-app .ca-footer {
        flex-wrap: wrap;
        padding: 10px 14px;
    }
    .chatbot-aliss-app .ca-footer-attribution {
        width: 100%;
        order: 3;
        margin-top: 6px;
    }

    /* Mobile: show the collapse toggle, hide chips by default until tapped */
    .chatbot-aliss-app .ca-suggestions-toggle {
        display: flex;
    }
    .chatbot-aliss-app .ca-suggestions:not(.ca-expanded) .ca-chips {
        display: none;
    }
}

/* ====================== v6.2.0 — GUIDED UX ====================== */

/* Optional sticky postcode field — sits above the input row.
   Compact, unintrusive. When filled, status shows a small confirmation. */
.chatbot-aliss-app .ca-postcode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 0 20px;
    background: var(--ca-white);
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-postcode-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ca-slate);
    white-space: nowrap;
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-postcode-optional {
    color: var(--ca-muted);
    font-weight: 400;
}

.chatbot-aliss-app .ca-postcode-input {
    flex: 0 1 140px;
    padding: 7px 10px;
    border: 1.5px solid var(--ca-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ca-slate);
    background: var(--ca-bg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}

.chatbot-aliss-app .ca-postcode-input::placeholder {
    color: var(--ca-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.chatbot-aliss-app .ca-postcode-input:focus {
    outline: none;
    border-color: var(--ca-primary);
    background: var(--ca-white);
    box-shadow: 0 0 0 3px var(--ca-primary-soft);
}

.chatbot-aliss-app .ca-postcode-input.ca-postcode-valid {
    border-color: #2a9d57;
    background: #f1faf3;
}

.chatbot-aliss-app .ca-postcode-input.ca-postcode-invalid {
    border-color: #d04545;
    background: #fdf3f3;
}

.chatbot-aliss-app .ca-postcode-status {
    font-size: 12px;
    color: var(--ca-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatbot-aliss-app .ca-postcode-status.ca-status-good { color: #2a9d57; }
.chatbot-aliss-app .ca-postcode-status.ca-status-bad  { color: #d04545; }

/* ============================================================ */
/*   v6.5.2 — Search row: postcode + org search side by side    */
/* ============================================================ */

.chatbot-aliss-app .ca-search-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 20px 0 20px;
    background: var(--ca-white);
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-postcode-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 200px;
    min-width: 0;
}

.chatbot-aliss-app .ca-postcode-cell .ca-postcode-label {
    margin-bottom: 0;
}

.chatbot-aliss-app .ca-postcode-cell .ca-postcode-input {
    width: 100%;
    flex: none;
}

.chatbot-aliss-app .ca-postcode-cell .ca-postcode-status {
    flex: none;
    width: 100%;
    font-size: 11px;
}

.chatbot-aliss-app .ca-orgsearch-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.chatbot-aliss-app .ca-orgsearch-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ca-slate);
    white-space: nowrap;
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-orgsearch-optional {
    color: var(--ca-muted);
    font-weight: 400;
}

.chatbot-aliss-app .ca-orgsearch-field {
    position: relative;
    width: 100%;
}

.chatbot-aliss-app .ca-orgsearch-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 32px;
    border: 1.5px solid var(--ca-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ca-slate);
    background: var(--ca-bg);
    transition: all 0.15s;

    /* Search icon as background SVG so we don't ship a new asset */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 14px 14px;
}

.chatbot-aliss-app .ca-orgsearch-input::placeholder {
    color: var(--ca-muted);
    font-weight: 400;
}

.chatbot-aliss-app .ca-orgsearch-input:focus {
    outline: none;
    border-color: var(--ca-primary);
    background-color: var(--ca-white);
    box-shadow: 0 0 0 3px var(--ca-primary-soft);
}

.chatbot-aliss-app .ca-orgsearch-listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--ca-white);
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    /* v6.10.8: bumped from 50 to 99999 so the dropdown sits above the
       chat composer / send button (which use z-index 99996-99998). */
    z-index: 99999;
    max-height: 280px;
    overflow-y: auto;
}

/* v6.10.8: when the org-search listbox is open, let the parent .ca-search-row
   overflow visibly so the dropdown is not clipped by the overflow:hidden
   that the row uses for its collapse animation. Restored to overflow:hidden
   by JS before the panel collapses, so the slide animation still clips. */
.chatbot-aliss-app .ca-search-row.ca-orgsearch-open {
    overflow: visible;
}

.chatbot-aliss-app .ca-orgsearch-listbox[hidden] {
    display: none;
}

.chatbot-aliss-app .ca-orgsearch-option {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--ca-border-soft, #eef0f3);
    transition: background 0.1s;
}

.chatbot-aliss-app .ca-orgsearch-option:last-child {
    border-bottom: none;
}

.chatbot-aliss-app .ca-orgsearch-option:hover,
.chatbot-aliss-app .ca-orgsearch-option.is-active {
    background: var(--ca-primary-soft);
}

.chatbot-aliss-app .ca-orgsearch-option-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ca-slate);
    margin: 0 0 2px 0;
}

.chatbot-aliss-app .ca-orgsearch-option-context {
    font-size: 11px;
    color: var(--ca-muted);
    line-height: 1.4;
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chatbot-aliss-app .ca-orgsearch-option-coverage {
    font-size: 10px;
    color: #2a9d57;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* v6.5.3: stale badge — ALISS hasn't reviewed this org in 12+ months */
.chatbot-aliss-app .ca-orgsearch-option-stale {
    font-size: 10px;
    color: #b25b00;
    font-weight: 600;
    margin-top: 1px;
    margin-bottom: 1px;
}

/* v6.5.3: "Did you mean..." header above fuzzy-matched results */
.chatbot-aliss-app .ca-orgsearch-dym-header {
    padding: 7px 14px;
    font-size: 11px;
    color: var(--ca-slate);
    font-weight: 600;
    background: #fff6e0;
    border-bottom: 1px solid var(--ca-border-soft, #eef0f3);
    font-style: italic;
}

.chatbot-aliss-app .ca-orgsearch-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--ca-muted);
    text-align: center;
}

.chatbot-aliss-app .ca-orgsearch-hint {
    padding: 8px 14px;
    font-size: 11px;
    color: var(--ca-muted);
    background: var(--ca-bg);
    border-top: 1px solid var(--ca-border-soft, #eef0f3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Mobile: stack vertically when row gets cramped */
@media (max-width: 520px) {
    .chatbot-aliss-app .ca-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .chatbot-aliss-app .ca-postcode-cell,
    .chatbot-aliss-app .ca-orgsearch-cell {
        flex: 1 1 auto;
        width: 100%;
    }
    .chatbot-aliss-app .ca-orgsearch-listbox {
        /* Drop down full-width on mobile */
        max-height: 240px;
    }
}

/* In-message chip rows — used for clarification AND refinement chips.
   Distinct from the welcome ca-chips so they can sit inside a bot bubble. */
.chatbot-aliss-app .ca-inline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px 0;
}

.chatbot-aliss-app .ca-inline-chip {
    background: var(--ca-white);
    color: var(--ca-accent);
    border: 1.5px solid var(--ca-accent-soft);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.3;
}

.chatbot-aliss-app .ca-inline-chip:hover {
    background: var(--ca-accent);
    color: #fff;
    border-color: var(--ca-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 128, 144, 0.18);
}

.chatbot-aliss-app .ca-inline-chip:active {
    transform: translateY(0);
}

.chatbot-aliss-app .ca-inline-chip:focus-visible {
    outline: 2px solid var(--ca-primary);
    outline-offset: 2px;
}

/* Refinement chips get a subtler look — they're a "next step" not a primary CTA */
.chatbot-aliss-app .ca-inline-chips.ca-refine-chips {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ca-border-soft);
}

.chatbot-aliss-app .ca-inline-chips.ca-refine-chips .ca-inline-chip {
    font-size: 12px;
    padding: 6px 12px;
    background: var(--ca-bg);
    color: var(--ca-slate);
    border-color: var(--ca-border);
}

.chatbot-aliss-app .ca-inline-chips.ca-refine-chips .ca-inline-chip:hover {
    background: var(--ca-primary);
    color: #fff;
    border-color: var(--ca-primary);
}

/* Mobile tweaks — tighten paddings and make postcode row compact */
@media (max-width: 768px) {
    .chatbot-aliss-app .ca-postcode-row {
        padding-left: 14px;
        padding-right: 14px;
        gap: 8px;
    }
    .chatbot-aliss-app .ca-postcode-input {
        flex: 0 1 110px;
        padding: 6px 8px;
        font-size: 12px;
    }
    .chatbot-aliss-app .ca-postcode-label {
        font-size: 11px;
    }
    .chatbot-aliss-app .ca-postcode-status {
        font-size: 11px;
    }
    .chatbot-aliss-app .ca-inline-chip {
        font-size: 12px;
        padding: 7px 12px;
    }
    .chatbot-aliss-app .ca-inline-chips.ca-refine-chips .ca-inline-chip {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* Screen reader only */
.chatbot-aliss-app .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute !important;
}

/* ============================================================
   v6.3.5: User feedback (thumbs up/down on cards & messages)
   ============================================================ */

/* Per-card feedback bar */
.chatbot-aliss-app .ca-feedback-bar {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.chatbot-aliss-app .ca-feedback-prompt {
    font-size: 11px;
    color: #888;
    flex: 1 1 auto;
}
.chatbot-aliss-app .ca-feedback-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}
.chatbot-aliss-app .ca-fb-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    color: inherit;
}
.chatbot-aliss-app .ca-fb-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}
.chatbot-aliss-app .ca-fb-btn:focus-visible {
    outline: 2px solid var(--ca-accent, #00897b);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-fb-btn.ca-fb-active-up {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}
.chatbot-aliss-app .ca-fb-btn.ca-fb-active-down {
    background: #ffebee;
    border-color: #f44336;
    color: #c62828;
}
.chatbot-aliss-app .ca-fb-icon {
    font-size: 14px;
}
.chatbot-aliss-app .ca-fb-count {
    font-size: 11px;
    font-weight: 600;
    min-width: 12px;
    text-align: center;
}

/* Reason chips that appear after thumbs-down */
.chatbot-aliss-app .ca-fb-reasons {
    flex-basis: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #fff3cd;
    border-radius: 8px;
    border-left: 3px solid #ffc107;
    animation: caFbSlideDown 0.2s ease-out;
}
.chatbot-aliss-app .ca-fb-reasons[hidden] {
    display: none;
}
@keyframes caFbSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chatbot-aliss-app .ca-fb-reasons-prompt {
    font-size: 12px;
    color: #856404;
    margin-bottom: 6px;
    font-weight: 600;
}
.chatbot-aliss-app .ca-fb-skip {
    font-weight: 400;
    opacity: 0.7;
}
.chatbot-aliss-app .ca-fb-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chatbot-aliss-app .ca-fb-reason {
    background: white;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    color: #333;
    line-height: 1.4;
}
.chatbot-aliss-app .ca-fb-reason:hover {
    background: #f0f0f0;
    border-color: #999;
}

/* Message-level feedback bar (lower visual weight) */
.chatbot-aliss-app .ca-msg-feedback {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #888;
    flex-wrap: wrap;
}
.chatbot-aliss-app .ca-msg-fb-prompt {
    flex: 1 1 auto;
}
.chatbot-aliss-app .ca-msg-fb-btn {
    background: transparent;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-radius: 12px;
    padding: 3px 10px;
    cursor: pointer;
    color: inherit;
    font-size: 12px;
    transition: all 0.15s;
    line-height: 1.3;
}
.chatbot-aliss-app .ca-msg-fb-btn:hover {
    background: rgba(127, 127, 127, 0.1);
    border-color: rgba(127, 127, 127, 0.7);
}
.chatbot-aliss-app .ca-msg-fb-btn:focus-visible {
    outline: 2px solid var(--ca-accent, #00897b);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-msg-fb-btn.ca-msg-fb-active {
    background: rgba(127, 127, 127, 0.15);
    border-color: rgba(127, 127, 127, 0.7);
}

/* Toast notification */
.ca-fb-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #2a2a2a;
    color: white;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-out;
    z-index: 999999;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-fb-toast.ca-fb-toast-show {
    transform: translateX(-50%) translateY(0);
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-feedback-prompt {
        font-size: 10px;
    }
    .chatbot-aliss-app .ca-fb-btn {
        padding: 5px 9px;
    }
    .chatbot-aliss-app .ca-msg-fb-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ============================================================
   v6.3.7: Audience badge and audience clarification chips
   ============================================================ */

/* "Helping: an adult [change]" badge above the postcode row */
.chatbot-aliss-app .ca-audience-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    border-left: 3px solid #4caf50;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.chatbot-aliss-app .ca-aud-label {
    flex: 1 1 auto;
    line-height: 1.3;
}
.chatbot-aliss-app .ca-aud-label strong {
    color: #1b5e20;
    font-weight: 700;
}
.chatbot-aliss-app .ca-aud-change {
    background: transparent;
    border: 1px solid rgba(27, 94, 32, 0.3);
    color: #1b5e20;
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    transition: all 0.15s;
}
.chatbot-aliss-app .ca-aud-change:hover {
    background: rgba(27, 94, 32, 0.1);
    border-color: rgba(27, 94, 32, 0.6);
}

/* Audience clarification chips — slightly larger / more prominent than
   refinement chips because they carry meaningful state */
.chatbot-aliss-app .ca-audience-chips {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(0, 0, 0, 0.12) !important;
}
.chatbot-aliss-app .ca-audience-chips .ca-inline-chip {
    background: white;
    border: 1px solid #00897b;
    color: #00695c;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
}
.chatbot-aliss-app .ca-audience-chips .ca-inline-chip:hover {
    background: #e0f2f1;
    border-color: #00695c;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-audience-badge {
        font-size: 11px;
        padding: 6px 10px;
    }
    .chatbot-aliss-app .ca-audience-chips .ca-inline-chip {
        font-size: 12px;
        padding: 7px 12px;
    }
}

/* ============================================================
   v6.3.9: Expanded (modal-style) view for desktop
   ============================================================ */

/* Backdrop element appended to <body> when expanded.
   Click to close. Esc key closes too (handled in JS). */
.ca-expand-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 99998;
    pointer-events: none;
    transition: background 0.25s ease-out;
}
.ca-expand-backdrop.ca-expand-backdrop-visible {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Expand button — visible only on desktop (mobile already full-width) */
.chatbot-aliss-app .ca-expand-btn {
    display: inline-flex;
}
@media (max-width: 768px) {
    .chatbot-aliss-app .ca-expand-btn {
        display: none !important;
    }
}

/* The chatbot itself when expanded — modal-style, centred, dominant.
   v6.3.10: Slightly larger than v6.3.9 (was 900x900) — gives users a
   genuinely immersive workspace without going full-screen. */
.chatbot-aliss-app.ca-expanded {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1000px, 94vw) !important;
    height: min(950px, 92vh) !important;
    max-width: 94vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    z-index: 99999 !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    animation: caExpandIn 0.25s ease-out;
    display: flex !important;
    flex-direction: column !important;
}

@keyframes caExpandIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Inside the expanded modal, give the messages area more room to breathe */
.chatbot-aliss-app.ca-expanded .ca-messages {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* The expand button shows a different icon when active (collapse arrows) */
.chatbot-aliss-app.ca-expanded .ca-expand-btn svg {
    transform: rotate(180deg);
}

/* Mobile: never expand — keep the inline view */
@media (max-width: 768px) {
    .chatbot-aliss-app.ca-expanded {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
    }
}

/* ============================================================
   v6.3.11: BUBBLE MODE — floating launcher + popup panel
   ============================================================ */

/* Launcher bubble — fixed bottom-right corner, always visible */
.ca-launcher-bubble {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ca-accent, #00897b);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 137, 123, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99996;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: caBubblePulse 2.4s ease-out 0.5s 2;
    padding: 0;
}
.ca-launcher-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(0, 137, 123, 0.55);
}
.ca-launcher-bubble:focus-visible {
    outline: 3px solid #ffeb3b;
    outline-offset: 3px;
}

/* Icon swap — closed state shows speech bubble, open state shows X */
.ca-launcher-icon-open,
.ca-launcher-icon-close {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ca-launcher-icon-close {
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
}
.ca-launcher-bubble.is-open .ca-launcher-icon-open {
    opacity: 0;
    transform: scale(0.6) rotate(90deg);
}
.ca-launcher-bubble.is-open .ca-launcher-icon-close {
    opacity: 1;
    transform: scale(1) rotate(0);
}

@keyframes caBubblePulse {
    0%   { box-shadow: 0 6px 24px rgba(0, 137, 123, 0.45), 0 0 0 0 rgba(0, 137, 123, 0.6); }
    70%  { box-shadow: 0 6px 24px rgba(0, 137, 123, 0.45), 0 0 0 14px rgba(0, 137, 123, 0); }
    100% { box-shadow: 0 6px 24px rgba(0, 137, 123, 0.45), 0 0 0 0 rgba(0, 137, 123, 0); }
}

/* Tooltip on hover (desktop only) */
.ca-launcher-tooltip {
    position: fixed;
    bottom: 32px;
    right: 96px;
    background: #1a1a1a;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 99995;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(8px);
    pointer-events: none;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ca-launcher-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1a1a1a;
}
.ca-launcher-bubble:hover + .ca-launcher-tooltip {
    opacity: 1;
    transform: translateX(0);
}
/* Hide tooltip when chat is open */
.ca-launcher-bubble.is-open + .ca-launcher-tooltip {
    opacity: 0 !important;
}

/* Backdrop element — dim when chat is open */
.ca-launcher-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 99997;
    pointer-events: none;
    transition: background 0.25s ease-out;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}
.ca-launcher-backdrop.is-visible {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* The chat panel itself in bubble mode */
.chatbot-aliss-app.ca-mode-bubble {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(1000px, 94vw);
    height: min(950px, 92vh);
    max-width: 94vw;
    max-height: 92vh;
    margin: 0;
    z-index: 99998;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

/* Closed state — fully hidden */
.chatbot-aliss-app.ca-mode-bubble.ca-bubble-closed {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.96);
    visibility: hidden;
}

/* Open state — visible, full size */
.chatbot-aliss-app.ca-mode-bubble.ca-bubble-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
}

/* Inside bubble panel, give the messages area room to breathe */
.chatbot-aliss-app.ca-mode-bubble .ca-messages {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0;
    overflow-y: auto;
}

/* In bubble mode, hide the v6.3.9 expand button — bubble IS the expand */
.chatbot-aliss-app.ca-mode-bubble .ca-expand-btn {
    display: none !important;
}

/* Mobile — bubble panel goes full-screen */
@media (max-width: 768px) {
    .ca-launcher-bubble {
        width: 56px;
        height: 56px;
        bottom: 16px;
        right: 16px;
    }
    .ca-launcher-tooltip {
        display: none;
    }
    .chatbot-aliss-app.ca-mode-bubble {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
    .chatbot-aliss-app.ca-mode-bubble.ca-bubble-closed {
        transform: none !important;
    }
    .chatbot-aliss-app.ca-mode-bubble.ca-bubble-open {
        transform: none !important;
    }
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    .ca-launcher-bubble {
        animation: none !important;
        transition: none !important;
    }
    .chatbot-aliss-app.ca-mode-bubble {
        transition: opacity 0.15s !important;
    }
}

/* ============================================================
   v6.3.12: Bigger bubble panel + compact chrome
   Squeeze the header / input / postcode rows so the messages
   area gets more room for service cards.
   ============================================================ */

/* Bigger panel — was 1000x950 with 94vw x 92vh caps */
.chatbot-aliss-app.ca-mode-bubble {
    width: min(1180px, 96vw) !important;
    height: min(1020px, 95vh) !important;
    max-width: 96vw !important;
    max-height: 95vh !important;
}

/* Compact header (saves ~12px vertical) */
.chatbot-aliss-app.ca-mode-bubble .ca-header-main {
    padding: 10px 18px !important;
}
.chatbot-aliss-app.ca-mode-bubble .ca-brand-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}
.chatbot-aliss-app.ca-mode-bubble .ca-brand-name {
    font-size: 15px !important;
    line-height: 1.2 !important;
}
.chatbot-aliss-app.ca-mode-bubble .ca-brand-tag {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* Compact postcode row (saves ~6px) */
.chatbot-aliss-app.ca-mode-bubble .ca-postcode-row {
    padding: 6px 18px 4px 18px !important;
}
.chatbot-aliss-app.ca-mode-bubble .ca-postcode-label {
    font-size: 11px !important;
}
.chatbot-aliss-app.ca-mode-bubble .ca-postcode-input {
    padding: 5px 9px !important;
    font-size: 13px !important;
}

/* Compact input row (saves ~8px) */
.chatbot-aliss-app.ca-mode-bubble .ca-input-row {
    padding: 10px 18px !important;
}
.chatbot-aliss-app.ca-mode-bubble .ca-input {
    padding: 11px 14px !important;
}

/* Tester banner if present — keep it tiny in bubble mode */
.chatbot-aliss-app.ca-mode-bubble .ca-tester-banner {
    padding: 4px 18px !important;
    font-size: 11px !important;
}

/* Mobile bubble mode unchanged — already fullscreen */
@media (max-width: 768px) {
    .chatbot-aliss-app.ca-mode-bubble {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    .chatbot-aliss-app.ca-mode-bubble .ca-header-main { padding: 12px 16px !important; }
    .chatbot-aliss-app.ca-mode-bubble .ca-postcode-row { padding: 8px 16px 4px 16px !important; }
    .chatbot-aliss-app.ca-mode-bubble .ca-input-row { padding: 10px 16px !important; }
}

/* ============================================================
   v6.3.13: Audience badge × dismiss button
   ============================================================ */

.chatbot-aliss-app .ca-aud-dismiss {
    background: transparent;
    border: 1px solid rgba(27, 94, 32, 0.3);
    color: #1b5e20;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.chatbot-aliss-app .ca-aud-dismiss:hover {
    background: rgba(27, 94, 32, 0.1);
    border-color: rgba(27, 94, 32, 0.6);
    transform: scale(1.1);
}
.chatbot-aliss-app .ca-aud-dismiss:focus-visible {
    outline: 2px solid var(--ca-accent, #00897b);
    outline-offset: 2px;
}

/* ============================================================
   v6.3.14: Need clarifier chips (second question)
   Visually distinct from audience chips — slightly warmer/coral
   to signal "we're refining, not asking again about who".
   ============================================================ */

.chatbot-aliss-app .ca-need-chips {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(0, 0, 0, 0.12) !important;
}
.chatbot-aliss-app .ca-need-chips .ca-need-chip {
    background: white;
    border: 1px solid #e8755a; /* coral — secondary brand colour */
    color: #b14a30;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.chatbot-aliss-app .ca-need-chips .ca-need-chip:hover {
    background: #fff0eb;
    border-color: #b14a30;
}
.chatbot-aliss-app .ca-need-chips .ca-need-chip:disabled {
    opacity: 0.5;
    cursor: default;
}

/* "Just show me everything" skip link */
.chatbot-aliss-app .ca-need-skip {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: #888;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    font-size: 12px;
    padding: 8px 12px 4px 12px;
    margin-top: 6px;
    text-align: center;
    transition: color 0.15s;
    font-family: inherit;
}
.chatbot-aliss-app .ca-need-skip:hover {
    color: #444;
}
.chatbot-aliss-app .ca-need-skip:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-need-chips .ca-need-chip {
        font-size: 12px;
        padding: 7px 12px;
    }
}


/* v6.4.4.13: Listen controls for guided intake questions and choices. */
.chatbot-aliss-app .ca-message.ca-bot {
    align-self: flex-start;
    max-width: min(88%, 760px);
}
.chatbot-aliss-app .ca-intake-listen-row {
    display: flex;
    justify-content: flex-start;
    margin: 2px 4px 2px;
}
.chatbot-aliss-app .ca-intake-listen {
    background: #ffffff;
    border: 1px solid var(--ca-border);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    color: var(--ca-slate);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: all 0.15s;
    margin: 0 0 6px 4px;
}
.chatbot-aliss-app .ca-intake-listen-row .ca-intake-listen {
    margin-bottom: 0;
}
.chatbot-aliss-app .ca-intake-listen:hover,
.chatbot-aliss-app .ca-intake-listen:focus-visible,
.chatbot-aliss-app .ca-intake-listen.ca-listening {
    background: var(--ca-accent);
    color: #ffffff;
    border-color: var(--ca-accent);
    outline: none;
}

/* ===== v6.4.3: Structured intake chips ===== */
.chatbot-aliss-app .ca-intake-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 4px;
    padding: 0 4px;
    /* v7.1.0-rc84: own stacking context so the chip grid always sits above
       any later-in-source sibling inside the messages area (e.g. the find-org
       row). This stops a translated, taller grid's bottom chips from being
       covered and made unclickable by an element painted on top of them. */
    position: relative;
    z-index: 1;
}

/* v6.4.4.10: Main need picker, show the six primary needs as
   3 across x 2 rows on wider screens so users do not miss options below
   the fold. Other intake chip groups keep their calmer 2-column layout.
   v6.10.33: Updated to 4 across x 2 rows to fit the 8-chip need picker
   (added Housing and Emergency numbers). Mobile breakpoints below drop
   to 2 columns so chip labels never truncate on a narrow viewport. */
.chatbot-aliss-app .ca-intake-chips.ca-intake-need-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.chatbot-aliss-app .ca-intake-chips.ca-intake-focus-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.chatbot-aliss-app .ca-intake-chips.ca-intake-detail-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chatbot-aliss-app .ca-intake-chips.ca-intake-detail-chips .ca-intake-chip:last-child {
    grid-column: 1 / -1;
}
.chatbot-aliss-app .ca-intake-chip {
    padding: 10px 12px;
    border: 1px solid #d0d4d8;
    border-radius: 10px;
    background: #ffffff;
    font-size: 13.5px;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    line-height: 1.35;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.chatbot-aliss-app .ca-intake-chip:hover,
.chatbot-aliss-app .ca-intake-chip:focus-visible {
    border-color: #1D9E75;
    background: #E1F5EE;
    outline: none;
}
.chatbot-aliss-app .ca-intake-chip:active {
    transform: scale(0.98);
}
.chatbot-aliss-app .ca-intake-chip.is-full {
    grid-column: span 2;
}
.chatbot-aliss-app .ca-intake-chip.is-muted {
    background: #f5f5f3;
    color: #5f5e5a;
    font-style: italic;
}
/* v6.10.35: Emergency-numbers chip in the need-picker grid. Soft red tint
   so it stands out without raising temperature. Matches the picker rows'
   .is-danger styling for visual continuity. */
.chatbot-aliss-app .ca-intake-chip.is-emergency {
    background: #FCEBEB;
    border-color: #F7C1C1;
    color: #501313;
}
.chatbot-aliss-app .ca-intake-chip.is-emergency:hover,
.chatbot-aliss-app .ca-intake-chip.is-emergency:focus-visible {
    background: #F7C1C1;
    border-color: #A32D2D;
    color: #501313;
}
/* v7.1.0-rc170: health "coming soon" notice chip, themed for light and dark
   so it never renders as a muddy box when the browser darkens the page. */
.chatbot-aliss-app .ca-health-notice-row {
    margin: 6px 0 10px;
}
.chatbot-aliss-app .ca-health-notice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    border-radius: 22px;
    background: #FFF8EC;
    border: 1px solid #E7BE6B;
    color: #7A5212;
    font-size: 13px;
    font-weight: 500;
}
.chatbot-aliss-app .ca-health-notice-ico {
    font-size: 16px;
    line-height: 1;
}
/* v7.1.0-rc171: two-door entry + health side. */
.chatbot-aliss-app .ca-door-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 4px;
}
.chatbot-aliss-app .ca-door {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px 14px;
    border-radius: 14px;
    border: 1px solid #cfd8e3;
    background: #f7fafd;
    cursor: pointer;
    font: inherit;
    color: #1f2937;
}
.chatbot-aliss-app .ca-door-ico { font-size: 26px; line-height: 1; }
.chatbot-aliss-app .ca-door-t { font-size: 14px; font-weight: 600; }
.chatbot-aliss-app .ca-door-s { font-size: 12px; opacity: 0.8; }
.chatbot-aliss-app .ca-door-health { border-color: #9cc3ea; background: #eaf2fb; color: #0c447c; }
.chatbot-aliss-app .ca-door-support { border-color: #7fd1b5; background: #e6f6ef; color: #0c5040; }
.chatbot-aliss-app .ca-door:hover { filter: brightness(0.98); }
.chatbot-aliss-app .ca-door:focus-visible { outline: 2px solid var(--ca-primary); outline-offset: 2px; }

.chatbot-aliss-app .ca-health-switch-row { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.chatbot-aliss-app .ca-health-switch {
    font: inherit; font-size: 12.5px; cursor: pointer;
    border: 1px solid #cfd8e3; background: #fff; color: #50607a;
    border-radius: 16px; padding: 6px 12px;
}
.chatbot-aliss-app .ca-health-switch:hover { background: #f1f5fa; }

.chatbot-aliss-app .ca-health-emergency {
    background: #FCEBEB; border: 1px solid #F2B6B6; color: #791F1F;
    border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin: 0 0 10px;
}
.chatbot-aliss-app .ca-health-pc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.chatbot-aliss-app .ca-health-pc-l { font-size: 13px; width: 100%; color: inherit; }
.chatbot-aliss-app .ca-health-pc-i {
    font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 10px;
    border: 1px solid #cfd8e3; background: #fff; color: #1f2937; min-width: 160px;
}
.chatbot-aliss-app .ca-health-pc-go {
    font: inherit; font-size: 13px; cursor: pointer; border: 0; border-radius: 10px;
    padding: 9px 16px; background: var(--ca-primary); color: #fff; font-weight: 600;
}
.chatbot-aliss-app .ca-health-reshead { font-size: 12.5px; opacity: 0.75; margin: 8px 0 8px; }
.chatbot-aliss-app .ca-health-card {
    background: #fff; border: 1px solid #e2e6ea; border-radius: 10px;
    padding: 12px 14px; margin: 0 0 10px;
}
.chatbot-aliss-app .ca-health-card-name { font-size: 14px; font-weight: 600; color: #1f2937; }
.chatbot-aliss-app .ca-health-card-dist { font-weight: 400; opacity: 0.65; font-size: 12px; }
.chatbot-aliss-app .ca-health-card-addr { font-size: 13px; color: #50607a; margin-top: 3px; }
.chatbot-aliss-app .ca-health-card-tel { font-size: 13px; margin-top: 5px; }
.chatbot-aliss-app .ca-health-card-board { font-size: 12px; opacity: 0.7; margin-top: 3px; }
.chatbot-aliss-app .ca-health-foot { font-size: 12px; opacity: 0.7; margin: 4px 0 8px; }
.chatbot-aliss-app .ca-health-loading { font-size: 13px; opacity: 0.7; margin: 8px 0; }

/* v7.1.0-rc176 (improvement 4): radius honesty note above refinement chips. */
.chatbot-aliss-app .ca-widen-note {
    background: #FFF8EC;
    border: 1px solid #E7BE6B;
    color: #7A5212;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin: 10px 0 4px;
}

.chatbot-aliss-app .ca-intake-skip {
    display: inline-block;
    background: #E1F5EE;
    color: #085041;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 4px;
    font-weight: 500;
    vertical-align: middle;
}
.chatbot-aliss-app .ca-intake-sub {
    display: block;
    font-size: 12px;
    color: #5f5e5a;
    margin-top: 4px;
    line-height: 1.5;
}
.chatbot-aliss-app .ca-hidden {
    display: none !important;
}
@media (max-width: 700px) {
    .chatbot-aliss-app .ca-intake-chips.ca-intake-need-chips,
    .chatbot-aliss-app .ca-intake-chips.ca-intake-focus-chips,
    .chatbot-aliss-app .ca-intake-chips.ca-intake-detail-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-intake-chip {
        font-size: 12.5px;
        padding: 9px 10px;
    }
}

/* ============================================================
   v6.10.33: Emergency-numbers quick-pick (Tap a number to call)
   Triggered from the 'Emergency numbers' chip in the need picker.
   Lives inside a normal bot bubble; no new container chrome needed.
   ============================================================ */
.chatbot-aliss-app .ca-emergency-picker {
    margin-top: 4px;
}
.chatbot-aliss-app .ca-emergency-title {
    margin: 0 0 2px;
    font-size: 14.5px;
    line-height: 1.4;
}
.chatbot-aliss-app .ca-emergency-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 10px 0 8px;
}
/* v6.10.36: small heading above each group of helplines. Quiet styling so
   it organises without shouting. */
.chatbot-aliss-app .ca-emergency-group-title {
    margin: 14px 0 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: #5f5e5a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.chatbot-aliss-app .ca-emergency-group-title:first-of-type {
    margin-top: 8px;
}
.chatbot-aliss-app .ca-emergency-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d0d4d8;
    border-radius: 10px;
    background: #ffffff;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 13.5px;
    line-height: 1.35;
    min-height: 44px;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.chatbot-aliss-app .ca-emergency-row:hover,
.chatbot-aliss-app .ca-emergency-row:focus-visible {
    border-color: #1D9E75;
    background: #E1F5EE;
    outline: none;
}
.chatbot-aliss-app .ca-emergency-row:active {
    transform: scale(0.99);
}
/* 999 row gets a soft danger tint so the most urgent number stands out
   without being shouty. Matches the universal-footer red family. */
.chatbot-aliss-app .ca-emergency-row.is-danger {
    background: #FCEBEB;
    border-color: #F7C1C1;
    color: #501313;
}
.chatbot-aliss-app .ca-emergency-row.is-danger:hover,
.chatbot-aliss-app .ca-emergency-row.is-danger:focus-visible {
    background: #F7C1C1;
    border-color: #A32D2D;
}
.chatbot-aliss-app .ca-emergency-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chatbot-aliss-app .ca-emergency-row-desc {
    color: #5f5e5a;
    font-size: 12px;
    line-height: 1.4;
}
.chatbot-aliss-app .ca-emergency-row.is-danger .ca-emergency-row-desc {
    color: #791F1F;
}
.chatbot-aliss-app .ca-emergency-row-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.chatbot-aliss-app .ca-emergency-back {
    appearance: none;
    background: transparent;
    border: 1px solid #d0d4d8;
    border-radius: 999px;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    padding: 6px 14px;
    margin-top: 4px;
    transition: border-color 0.15s, background 0.15s;
}
.chatbot-aliss-app .ca-emergency-back:hover,
.chatbot-aliss-app .ca-emergency-back:focus-visible {
    border-color: #1D9E75;
    background: #E1F5EE;
    outline: none;
}

/* ============================================================
   v6.4.4.14: Per-service feedback at top-right of service cards
   ============================================================ */
.chatbot-aliss-app .ca-service-card {
    position: relative;
    padding-right: 240px;
}
.chatbot-aliss-app .ca-feedback-card-top {
    position: absolute;
    top: 14px;
    right: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    justify-content: flex-end;
    gap: 6px;
    max-width: 210px;
    z-index: 2;
}
.chatbot-aliss-app .ca-feedback-card-top .ca-feedback-prompt {
    flex: 0 0 100%;
    text-align: right;
    font-size: 11px;
    color: #68758a;
}
.chatbot-aliss-app .ca-feedback-card-top .ca-feedback-buttons {
    margin-left: auto;
}
.chatbot-aliss-app .ca-feedback-card-top .ca-fb-reasons {
    position: absolute;
    right: 0;
    top: 42px;
    width: min(320px, 70vw);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
}
@media (max-width: 760px) {
    .chatbot-aliss-app .ca-service-card {
        padding-right: 18px;
        padding-top: 54px;
    }
    .chatbot-aliss-app .ca-feedback-card-top {
        top: 12px;
        left: 18px;
        right: 18px;
        max-width: none;
        justify-content: space-between;
    }
    .chatbot-aliss-app .ca-feedback-card-top .ca-feedback-prompt {
        flex: 1 1 auto;
        text-align: left;
    }
    .chatbot-aliss-app .ca-feedback-card-top .ca-fb-reasons {
        left: 0;
        right: auto;
        width: min(330px, calc(100vw - 72px));
    }
}

/* ============================================================ */
/*   v6.5.5 — BOLDER ACCESSIBILITY PASS                         */
/*                                                              */
/*   Option C "tier separation": primary actions filled,        */
/*   secondary actions outlined, restart amber, clear grey.     */
/*   Listen buttons made unmistakable. Labels heavier. Borders  */
/*   2px on inputs. Targets larger. Designed for 16+ wide age,  */
/*   including users with reduced vision.                       */
/*                                                              */
/*   These rules SUPERSEDE the earlier definitions for the same */
/*   selectors. Kept as a separate block so the change is easy  */
/*   to find, audit, and roll back if needed.                   */
/* ============================================================ */

/* ----- Listen buttons (the headline complaint: too faint) ----- */

.chatbot-aliss-app .ca-message-listen,
.chatbot-aliss-app .ca-intake-listen {
    background: var(--ca-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 94, 184, 0.18);
}

.chatbot-aliss-app .ca-message-listen:hover,
.chatbot-aliss-app .ca-intake-listen:hover {
    background: var(--ca-primary-dark);
    color: #fff;
    border: 0;
}

.chatbot-aliss-app .ca-message-listen:focus-visible,
.chatbot-aliss-app .ca-intake-listen:focus-visible {
    outline: 3px solid var(--ca-primary-soft);
    outline-offset: 2px;
}

.chatbot-aliss-app .ca-message-listen.ca-listening,
.chatbot-aliss-app .ca-intake-listen.ca-listening {
    background: var(--ca-primary-dark);
    color: #fff;
}

/* Listen pill inside a service card (smaller — sits next to "More on ALISS") */
.chatbot-aliss-app .ca-card-listen {
    background: var(--ca-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 94, 184, 0.18);
}

.chatbot-aliss-app .ca-card-listen:hover {
    background: var(--ca-primary-dark);
    color: #fff;
}

.chatbot-aliss-app .ca-card-listen.ca-listening {
    background: var(--ca-primary-dark);
    color: #fff;
}

/* ----- Bottom toolbar: tier separation ----- */
/* Base spacing — slightly bigger touch targets, heavier text */

.chatbot-aliss-app .ca-tool {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    border: 1.5px solid var(--ca-primary);
    background: #fff;
    color: var(--ca-primary);
    transition: all 0.15s;
}

.chatbot-aliss-app .ca-tool:hover {
    background: var(--ca-primary-soft);
    border-color: var(--ca-primary);
    color: var(--ca-primary-dark);
    transform: translateY(-1px);
}

.chatbot-aliss-app .ca-tool:focus-visible {
    outline: 3px solid var(--ca-primary-soft);
    outline-offset: 2px;
}

.chatbot-aliss-app .ca-tool-icon { font-size: 15px; }

/* Tier 1: PRIMARY actions (mid-conversation) — solid blue */
/* Speak and Auto-Translate are what users DO while chatting */

.chatbot-aliss-app .ca-tool-speak,
.chatbot-aliss-app .ca-tool-translate {
    background: var(--ca-primary);
    color: #fff;
    border-color: var(--ca-primary);
}

.chatbot-aliss-app .ca-tool-speak:hover,
.chatbot-aliss-app .ca-tool-translate:hover {
    background: var(--ca-primary-dark);
    color: #fff;
    border-color: var(--ca-primary-dark);
}

/* Auto-Translate OFF state: outline blue (signals "off, click to turn on") */
.chatbot-aliss-app .ca-tool-translate[aria-pressed="false"] {
    background: #fff;
    color: var(--ca-primary);
    border-color: var(--ca-primary);
}

.chatbot-aliss-app .ca-tool-translate[aria-pressed="false"]:hover {
    background: var(--ca-primary-soft);
    color: var(--ca-primary-dark);
}

/* Auto-Translate ON state: solid blue (signals "active") */
.chatbot-aliss-app .ca-tool-translate[aria-pressed="true"] {
    background: var(--ca-primary);
    color: #fff;
    border-color: var(--ca-primary);
    font-weight: 500;
}

.chatbot-aliss-app .ca-tool-translate[aria-pressed="true"]:hover {
    background: var(--ca-primary-dark);
}

/* Speak recording state: solid red (was already there, just reaffirm with bolder spec) */
.chatbot-aliss-app .ca-tool-speak.ca-recording {
    background: var(--ca-danger);
    border-color: var(--ca-danger);
    color: #fff;
}

/* Tier 2: SECONDARY actions (post-conversation) — outline blue */
/* Print, Save, Share are things users do AFTER they've got results */

.chatbot-aliss-app .ca-tool-print,
.chatbot-aliss-app .ca-tool-save,
.chatbot-aliss-app .ca-tool-share {
    background: #fff;
    color: var(--ca-primary);
    border: 1.5px solid var(--ca-primary);
}

.chatbot-aliss-app .ca-tool-print:hover,
.chatbot-aliss-app .ca-tool-save:hover,
.chatbot-aliss-app .ca-tool-share:hover {
    background: var(--ca-primary-soft);
    color: var(--ca-primary-dark);
    border-color: var(--ca-primary);
}

/* Tier 3: RESTART (Try a Different Need) — amber tint, distinct from blue */
.chatbot-aliss-app .ca-tool-different-need {
    background: #FAEEDA;
    color: #633806;
    border: 1.5px solid #BA7517;
    font-weight: 500;
}

.chatbot-aliss-app .ca-tool-different-need:hover {
    background: #F4DEB5;
    color: #412402;
    border-color: #854F0B;
}

/* Tier 4: DESTRUCTIVE (Clear) — grey, low-emphasis to discourage accidental taps */
.chatbot-aliss-app .ca-tool-clear {
    background: #fff;
    color: #6B7A8F;
    border: 1.5px solid #B4B2A9;
    font-weight: 500;
    margin-left: auto;  /* push to far right to spatially separate from primary actions */
}

.chatbot-aliss-app .ca-tool-clear:hover {
    background: #F1EFE8;
    color: #444441;
    border-color: #888780;
}

/* ----- Chat input: heavier border so the input is clearly an input ----- */

.chatbot-aliss-app .ca-input {
    border-width: 2px;
    border-color: #CBD5E1;
    background: #fff;
}

.chatbot-aliss-app .ca-input:focus {
    border-color: var(--ca-primary);
    box-shadow: 0 0 0 3px var(--ca-primary-soft);
    background: #fff;
}

.chatbot-aliss-app .ca-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

/* Send button: keep solid blue, but heavier shadow + clearer focus ring */

.chatbot-aliss-app .ca-send-btn {
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 94, 184, 0.18);
}

.chatbot-aliss-app .ca-send-btn:focus-visible {
    outline: 3px solid var(--ca-primary-soft);
    outline-offset: 2px;
}

/* ----- Welcome chips ("I'm feeling lonely" etc): clearer button shape ----- */

.chatbot-aliss-app .ca-chip {
    background: #fff;
    color: var(--ca-primary);
    border: 2px solid var(--ca-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 18px;
    line-height: 1.4;
}

.chatbot-aliss-app .ca-chip:hover {
    background: var(--ca-primary);
    color: #fff;
    border-color: var(--ca-primary);
    box-shadow: 0 2px 6px rgba(0, 94, 184, 0.22);
}

.chatbot-aliss-app .ca-chip:focus-visible {
    outline: 3px solid var(--ca-primary-soft);
    outline-offset: 2px;
}

/* ----- Postcode + Org Search row: bolder labels, 2px borders ----- */

.chatbot-aliss-app .ca-postcode-label,
.chatbot-aliss-app .ca-orgsearch-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ca-navy);
}

.chatbot-aliss-app .ca-postcode-optional,
.chatbot-aliss-app .ca-orgsearch-optional {
    color: var(--ca-muted);
    font-weight: 400;
    font-size: 12px;
}

.chatbot-aliss-app .ca-postcode-input,
.chatbot-aliss-app .ca-orgsearch-input {
    border-width: 2px;
    font-size: 14px;
}

.chatbot-aliss-app .ca-postcode-input:focus,
.chatbot-aliss-app .ca-orgsearch-input:focus {
    box-shadow: 0 0 0 3px var(--ca-primary-soft);
}

.chatbot-aliss-app .ca-postcode-input.ca-postcode-valid {
    border-width: 2px;
    background: #E1F5EE;
    color: #04342C;
    font-weight: 500;
}

.chatbot-aliss-app .ca-postcode-status {
    font-size: 12px;
    font-weight: 500;
}

/* ----- Service card Listen button — see above (.ca-card-listen) ----- */

/* ----- Mobile: keep boldness but pack a bit tighter ----- */
@media (max-width: 520px) {
    .chatbot-aliss-app .ca-tool {
        padding: 9px 12px;
        font-size: 12px;
    }
    .chatbot-aliss-app .ca-tool-clear {
        margin-left: 0;  /* on mobile, let it flow with the others */
    }
    .chatbot-aliss-app .ca-chip {
        font-size: 13px;
        padding: 9px 14px;
    }
}

/* =========================================================
 * v6.6.1 — Language-switch toast (Style B: centred pill + dim)
 *
 * Appears over the widget for ~1-3 seconds while the new
 * language is being fetched and applied. The dimmer is the
 * full app area (header included). v6.13.55 keeps the emergency
 * quick-exit control clickable even while this notice is showing.
 * ========================================================= */

.chatbot-aliss-app .ca-lang-toast {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 30, 80, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.chatbot-aliss-app .ca-lang-toast.ca-lang-toast-visible {
    opacity: 1;
    pointer-events: none;
}

/* v7.1.0-rc88: the toast pill is centred in the widget with pointer events
   enabled. When the toast hid it only faded to opacity 0 but stayed in the DOM
   and stayed hit-testable, so an invisible pill sat over the middle chip row and
   ate every tap there (the "4th row dead in every language" bug). Only let the
   pill take pointer events while the toast is genuinely visible. */
.chatbot-aliss-app .ca-lang-toast-pill {
    pointer-events: none;
}
.chatbot-aliss-app .ca-lang-toast.ca-lang-toast-visible .ca-lang-toast-pill {
    pointer-events: auto;
}

.chatbot-aliss-app .ca-lang-toast-pill {
    background: #ffffff;
    border: 1.5px solid #005EB8;
    border-radius: 22px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #0C447C;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-width: calc(100% - 32px);
    line-height: 1.35;
}

.chatbot-aliss-app .ca-lang-toast-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chatbot-aliss-app .ca-lang-toast-line {
    display: block;
}

.chatbot-aliss-app .ca-lang-toast-line-en {
    font-size: 0.92em;
    font-weight: 600;
    opacity: 0.78;
}

.chatbot-aliss-app .ca-lang-toast-spinner {
    width: 16px;
    height: 16px;
    border: 2.5px solid #005EB8;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ca-lang-toast-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes ca-lang-toast-spin {
    to { transform: rotate(360deg); }
}

/* Honour reduced-motion preferences — show the toast but skip the spin. */
@media (prefers-reduced-motion: reduce) {
    .chatbot-aliss-app .ca-lang-toast-spinner {
        animation: none;
        border-right-color: #005EB8;
    }
    .chatbot-aliss-app .ca-lang-toast {
        transition: none;
    }
}

/* Mobile — keep the pill comfortably inside the viewport. */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-lang-toast-pill {
        font-size: 14px;
        padding: 11px 18px;
    }
}

/* =========================================================
 * v6.6.5 — Safeguarding bubble (crisis / abuse intercept)
 *
 * Visually distinct from regular bot bubbles. Warm cream
 * background, coral left stripe. Phone numbers rendered as
 * tappable tel: links sized for thumbs, not eyes.
 * ========================================================= */

.chatbot-aliss-app .ca-safeguard-block {
    background: #FFF6E5;
    border-left: 5px solid #C8421B;
    border-radius: 10px;
    padding: 16px 16px 14px 18px;
    margin: 4px 0;
    color: #2A2A2A;
    line-height: 1.5;
}

.chatbot-aliss-app .ca-safeguard-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.chatbot-aliss-app .ca-safeguard-icon {
    font-size: 22px;
    line-height: 1;
}

.chatbot-aliss-app .ca-safeguard-narrative {
    font-size: 15px;
    margin-bottom: 12px;
    color: #1F1F1F;
}

.chatbot-aliss-app .ca-safeguard-resources {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chatbot-aliss-app .ca-safeguard-resource {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 6px;
    border: 1px solid rgba(200, 66, 27, 0.15);
}

.chatbot-aliss-app .ca-safeguard-label {
    font-weight: 600;
    color: #1F1F1F;
}

.chatbot-aliss-app .ca-safeguard-tel {
    display: inline-block;
    background: #C8421B;
    color: #FFFFFF;
    padding: 3px 10px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    margin-left: 4px;
    white-space: nowrap;
}

.chatbot-aliss-app .ca-safeguard-tel:hover,
.chatbot-aliss-app .ca-safeguard-tel:focus {
    background: #A23414;
    color: #FFFFFF;
    text-decoration: none;
}

.chatbot-aliss-app .ca-safeguard-url {
    color: #C8421B;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
}

.chatbot-aliss-app .ca-safeguard-detail {
    font-size: 13.5px;
    color: #4A4A4A;
    margin-top: 4px;
}

.chatbot-aliss-app .ca-safeguard-footer {
    font-size: 13.5px;
    color: #4A4A4A;
    padding-top: 6px;
    border-top: 1px dashed rgba(200, 66, 27, 0.2);
    margin-top: 4px;
}

/* v6.10.13: contactSCOTLAND-BSL line on every safeguarding bubble.
 * Subtle but always visible. Contrast tuned for WCAG 2.2 AA (4.5:1). */
.chatbot-aliss-app .ca-safeguard-bsl {
    font-size: 13px;
    color: #3a3a3a;
    background: rgba(83, 74, 183, 0.06);
    border-left: 3px solid #534AB7;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 4px;
}
.chatbot-aliss-app .ca-safeguard-bsl a {
    color: #3a2faa;
    text-decoration: underline;
}
.chatbot-aliss-app .ca-safeguard-bsl a:focus-visible {
    outline: 2px solid #534AB7;
    outline-offset: 2px;
}

/* v6.10.13: Easy Read toggle button. Sits in the bubble header.
 * Min target size 44x44 per WCAG 2.5.5 (Target Size, enhanced is 44px). */
.chatbot-aliss-app .ca-safeguard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatbot-aliss-app .ca-safeguard-easyread-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    background: #FFFFFF;
    color: #534AB7;
    border: 2px solid #534AB7;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
}
.chatbot-aliss-app .ca-safeguard-easyread-toggle:hover {
    background: #534AB7;
    color: #FFFFFF;
}
.chatbot-aliss-app .ca-safeguard-easyread-toggle:focus-visible {
    outline: 3px solid #534AB7;
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-safeguard-easyread-toggle[aria-pressed="true"] {
    background: #534AB7;
    color: #FFFFFF;
}

/* v6.10.13: Easy Read variant - large clear text, one sentence per line,
 * generous spacing. Used by people with learning disabilities, low literacy,
 * EAL, autism, or anyone who prefers plain sentences. */
.chatbot-aliss-app .ca-safeguard-easyread {
    background: #FFFFFF;
    border: 2px solid #534AB7;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
}
.chatbot-aliss-app .ca-easyread-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.chatbot-aliss-app .ca-easyread-list li {
    font-size: 19px;
    line-height: 1.6;
    color: #1a1a1a;
    padding: 6px 0;
    font-weight: 500;
}
.chatbot-aliss-app .ca-easyread-list li.ca-easyread-blank {
    padding: 4px 0;
}

/* The safeguard block lives inside a bot message bubble — strip the
 * usual bubble background so the safeguard styling owns the visuals. */
.chatbot-aliss-app .ca-message.ca-bot .ca-bubble:has(.ca-safeguard-block) {
    background: transparent;
    padding: 0;
}

/* Mobile — phone-number buttons stay tappable. */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-safeguard-tel {
        font-size: 16px;
        padding: 5px 12px;
    }
    .chatbot-aliss-app .ca-safeguard-narrative {
        font-size: 14.5px;
    }
}

/* =========================================================
 * v6.7.0 — Email Assist Chip
 *
 * Per-card "Help me email" button (small, sits in the card footer
 * alongside Listen). Click expands the chip inline within the same
 * card. Coral-green accent — distinct from blue (chat primary) and
 * red (safeguarding) so the user can tell what they're looking at.
 * ========================================================= */

.chatbot-aliss-app .ca-card-email-btn {
    background: transparent;
    border: 1px solid #0F6E56;
    color: #0F6E56;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: background 120ms;
}

.chatbot-aliss-app .ca-card-email-btn:hover,
.chatbot-aliss-app .ca-card-email-btn:focus {
    background: rgba(15, 110, 86, 0.08);
}

.chatbot-aliss-app .ca-card-email-chip {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-left: 4px solid #0F6E56;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 4px;
    font-size: 13.5px;
    flex-basis: 100%;
    width: 100%;
}

.chatbot-aliss-app .ca-email-chip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.chatbot-aliss-app .ca-email-chip-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0F6E56;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    font-weight: 600;
}

.chatbot-aliss-app .ca-email-chip-title {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    flex: 1;
    color: #1F1F1F;
}

.chatbot-aliss-app .ca-email-chip-subtitle {
    font-size: 12.5px;
    color: #555;
    margin-bottom: 10px;
}

/* v6.7.1: replaces the v6.7.0 dot bar. "1 of 3" pill sits inline next to
 * the question text — clearer wayfinding and keeps the question higher
 * on the visible card. */
.chatbot-aliss-app .ca-email-chip-step-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.chatbot-aliss-app .ca-email-chip-step-pill {
    background: #EFEDE5;
    color: #555;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    line-height: 1.6;
    white-space: nowrap;
}

.chatbot-aliss-app .ca-email-chip-question {
    font-size: 14px;
    font-weight: 600;
    color: #0F6E56;
    line-height: 1.3;
}

.chatbot-aliss-app .ca-email-chip-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: #1F1F1F;
    box-sizing: border-box;
    background: #FFFFFF;
}

.chatbot-aliss-app .ca-email-chip-input:focus {
    outline: 2px solid #0F6E56;
    outline-offset: -1px;
    border-color: transparent;
}

.chatbot-aliss-app textarea.ca-email-chip-input {
    resize: vertical;
    min-height: 54px;
    line-height: 1.4;
}

.chatbot-aliss-app .ca-email-chip-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.chatbot-aliss-app .ca-email-chip-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}

.chatbot-aliss-app .ca-email-chip-btn-primary {
    background: #0F6E56;
    color: #FFFFFF;
}

.chatbot-aliss-app .ca-email-chip-btn-primary:hover,
.chatbot-aliss-app .ca-email-chip-btn-primary:focus {
    background: #0A5544;
    color: #FFFFFF;
}

.chatbot-aliss-app .ca-email-chip-btn-secondary {
    background: #FFFFFF;
    color: #0F6E56;
    border-color: #0F6E56;
}

.chatbot-aliss-app .ca-email-chip-btn-secondary:hover,
.chatbot-aliss-app .ca-email-chip-btn-secondary:focus {
    background: rgba(15, 110, 86, 0.06);
}

.chatbot-aliss-app .ca-email-chip-btn-ghost {
    background: transparent;
    color: #555;
}

.chatbot-aliss-app .ca-email-chip-btn-ghost:hover {
    color: #1F1F1F;
}

.chatbot-aliss-app .ca-email-chip-btn-coral {
    background: #E8755A;
    color: #FFFFFF;
}

.chatbot-aliss-app .ca-email-chip-btn-coral:hover,
.chatbot-aliss-app .ca-email-chip-btn-coral:focus {
    background: #D4663A;
    color: #FFFFFF;
    text-decoration: none;
}

.chatbot-aliss-app .ca-email-chip-preview {
    background: #F1EFE8;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.chatbot-aliss-app .ca-email-chip-preview-row {
    display: flex;
    gap: 6px;
    margin-bottom: 2px;
}

.chatbot-aliss-app .ca-email-chip-preview-label {
    color: #555;
    font-weight: 500;
    min-width: 56px;
    flex-shrink: 0;
}

.chatbot-aliss-app .ca-email-chip-preview-body {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    white-space: pre-wrap;
    color: #1F1F1F;
}

.chatbot-aliss-app .ca-email-chip-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #1F1F1F;
    color: #FFFFFF;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
    z-index: 2147483646;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    max-width: 280px;
    text-align: center;
}

.chatbot-aliss-app .ca-email-chip-toast.is-visible {
    opacity: 1;
}

/* Mobile — tighten padding and stack actions cleanly */
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-card-email-btn {
        font-size: 12px;
        padding: 4px 9px;
    }
    .chatbot-aliss-app .ca-email-chip-btn {
        font-size: 12.5px;
        padding: 8px 12px;
    }
    .chatbot-aliss-app .ca-email-chip-preview {
        font-size: 12px;
    }
}

/* v6.7.2: secondary action row in done state (Copy + Edit) sits closer
 * to the open-with picker so the visual grouping reads as one block.
 * Picker (Default mail / Gmail / Outlook) is the primary row above. */
.chatbot-aliss-app .ca-email-chip-actions-secondary {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

/* ====================================================================
   v6.8.0 — MOBILE LAYOUT CLEANUP
   ====================================================================
   1. Collapsible refine toggle (postcode + org search tucked behind it).
   2. Equal-width tool button grid (no more reflow when Auto-Translate
      toggles on/off; all rows line up).
   3. Active-state dot indicator on Auto-Translate (replaces "ON" word).
   4. Footer fixed on mobile so Contact Human, Powered by, and Exit Fast
      stay on one row in the order: action — attribution — action.
   ==================================================================== */

/* ----- 1. REFINE TOGGLE + COLLAPSIBLE PANEL -----
   Pure CSS animation: max-height + opacity + padding + margin all
   transition together so the row slides smoothly closed on collapse
   without leaving a visual gap. Works identically on iOS Safari and
   Android Chrome — no -webkit prefixes needed for these properties. */
.chatbot-aliss-app .ca-refine-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 40px);
    margin: 0 20px 8px 20px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--ca-border);
    border-radius: 10px;
    color: var(--ca-muted);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 94, 184, 0.1);
    transition: border-color 150ms, color 150ms, background-color 150ms;
}
.chatbot-aliss-app .ca-refine-toggle:hover {
    border-color: var(--ca-accent);
    color: var(--ca-accent);
}
.chatbot-aliss-app .ca-refine-toggle:focus-visible {
    outline: 2px solid var(--ca-accent);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-refine-toggle.ca-refine-toggle-open {
    border-style: solid;
    border-color: var(--ca-accent);
    color: var(--ca-accent);
    background: var(--ca-accent-soft);
}
.chatbot-aliss-app .ca-refine-toggle-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.chatbot-aliss-app .ca-refine-toggle-label {
    flex: 1;
}
.chatbot-aliss-app .ca-refine-toggle-chevron {
    font-size: 11px;
    color: inherit;
    transition: transform 220ms ease;
    transform: rotate(0deg);
    line-height: 1;
}
.chatbot-aliss-app .ca-refine-toggle.ca-refine-toggle-open .ca-refine-toggle-chevron {
    transform: rotate(180deg);
}

/* The refine panel itself. Uses overflow:hidden with max-height
   transition for the slide animation. When .ca-refine-collapsed is
   added, the panel goes to max-height 0 / opacity 0 — but it stays
   in the DOM so the inputs keep their values. */
.chatbot-aliss-app .ca-search-row {
    overflow: hidden;
    max-height: 400px;
    opacity: 1;
    transition:
        max-height 260ms ease,
        opacity 200ms ease,
        margin-top 200ms ease,
        margin-bottom 200ms ease,
        padding-top 200ms ease,
        padding-bottom 200ms ease;
}
.chatbot-aliss-app .ca-search-row.ca-refine-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}
/* When collapsed, prevent tab focus reaching hidden inputs.
   visibility: hidden mid-transition would block the animation, so
   we use pointer-events plus a delayed visibility swap via a class. */
.chatbot-aliss-app .ca-search-row.ca-refine-collapsed input {
    visibility: hidden;
    transition: visibility 0s linear 240ms;
}
.chatbot-aliss-app .ca-search-row input {
    visibility: visible;
    transition: visibility 0s linear 0s;
}

/* ----- 2. EQUAL-WIDTH TOOL BUTTON GRID -----
   Replaces the flex-wrap layout that gave each button its own natural
   width (causing "Auto-Translate ON" to stick out). Grid forces every
   button in a row to the same width regardless of label length, so
   the rows line up neatly under each other.
   We use auto-fit with minmax so the grid wraps gracefully on very
   narrow screens (< 320px) without needing a separate breakpoint. */
.chatbot-aliss-app .ca-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, max-content));
    justify-content: center;
    gap: 6px;
    padding: 0 20px 14px 20px;
    background: var(--ca-white);
    flex-shrink: 0;
}
.chatbot-aliss-app .ca-tools .ca-tool {
    /* Tighter padding so labels fit comfortably in the smaller cell. */
    padding: 8px 10px;
    font-size: 11.5px;
    justify-content: center;
    min-width: 0;
    position: relative; /* v7.1.0-rc53: anchor for the hover tooltip */
}
.chatbot-aliss-app .ca-tools .ca-tool .ca-tool-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ----- 3. ACTIVE-STATE DOT INDICATOR (Auto-Translate) -----
   Replaces the "ON" text suffix. When aria-pressed="true", the
   button gets the filled-accent background AND a small light dot
   in the top-right corner as redundant wayfinding. */
.chatbot-aliss-app .ca-tool-translate {
    position: relative;
}
.chatbot-aliss-app .ca-tool-translate[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 94, 184, 0.5);
    pointer-events: none;
}

/* ----- 4. FOOTER: Contact Human | Powered by | Exit Fast -----
   Override the v6.x mobile rule that put attribution on its own row.
   On mobile we now keep all three items in one row with the
   attribution centred. Powered-by text shrinks down to fit and may
   wrap to two centred lines on the narrowest screens — that's fine
   and looks intentional. */
@media (max-width: 600px) {
    .chatbot-aliss-app .ca-footer {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .chatbot-aliss-app .ca-footer-attribution {
        order: 0;
        width: auto;
        flex: 1 1 auto;
        margin-top: 0;
        text-align: center;
        font-size: 10px;
        line-height: 1.25;
        min-width: 0;
    }
    .chatbot-aliss-app .ca-footer-contact {
        padding: 8px 12px;
        font-size: 11.5px;
        flex-shrink: 0;
    }
    .chatbot-aliss-app .ca-exit-fast {
        padding: 8px 12px;
        font-size: 11.5px;
        flex-shrink: 0;
    }
    /* Refine toggle in mobile padding context to match input row */
    .chatbot-aliss-app .ca-refine-toggle {
        width: calc(100% - 28px);
        margin: 0 14px 8px 14px;
    }
}

/* iOS Safari is the platform most likely to be picky about
   transitions on hidden elements. These properties (max-height,
   opacity, padding, margin, transform) all behave identically to
   Android Chrome — verified pattern from FWA v1.29+ voice engine.
   No vendor prefixes needed. */



/* v6.13.28: directions and why-shown card helpers */
.ca-card-directions .ca-card-link,
.ca-card-directions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(0,94,184,.18);
    border-radius: 999px;
    padding: 4px 9px;
    text-decoration: none;
    font-weight: 700;
}
.ca-card-why {
    background: #f3fbf6;
    border-left: 3px solid #2e8540;
    padding: 7px 9px;
    border-radius: 8px;
    margin-top: 8px;
}

/* ============================================================
   v6.13.38: Persistent emergency action + emergency scroll UX
   Emergency numbers now live in the bottom toolbar as well as
   the first guided chip grid. The button is deliberately compact
   and small-caps so it is visible without overwhelming the main
   chat controls.
   ============================================================ */
.chatbot-aliss-app .ca-tools {
    grid-template-columns: repeat(auto-fit, minmax(76px, max-content));
}
.chatbot-aliss-app .ca-tools .ca-tool-clear {
    margin-left: 0;
}
.chatbot-aliss-app .ca-tool-emergency {
    background: #FFF1F2;
    color: #991B1B;
    border: 1.5px solid #FCA5A5;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}
.chatbot-aliss-app .ca-tool-emergency:hover,
.chatbot-aliss-app .ca-tool-emergency:focus-visible {
    background: #FEE2E2;
    color: #7F1D1D;
    border-color: #DC2626;
}
.chatbot-aliss-app .ca-tool-emergency .ca-tool-icon {
    font-size: 14px;
}
.chatbot-aliss-app .ca-emergency-row.is-primary {
    border-left: 5px solid #DC2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
}
@media (max-width: 520px) {
    .chatbot-aliss-app .ca-tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .chatbot-aliss-app .ca-tools .ca-tool {
        min-height: 44px;
        padding: 7px 5px;
        font-size: 10.5px;
        gap: 4px;
    }
    .chatbot-aliss-app .ca-tool-emergency {
        font-size: 9.5px;
        line-height: 1.1;
    }
}

/* ============================================================
   v6.13.40: Move Speak beside Send
   Speak is now an input action, not a toolbar action. It sits
   between the text box and Send, with the same height and width
   as Send. Mobile keeps it compact with a mic icon and small label.
   ============================================================ */
.chatbot-aliss-app .ca-input-row {
    align-items: stretch;
}
.chatbot-aliss-app .ca-input-row .ca-input {
    min-width: 0;
    min-height: 62px;
}
.chatbot-aliss-app .ca-input-row .ca-send-btn,
.chatbot-aliss-app .ca-input-row .ca-input-speak-btn {
    flex: 0 0 86px;
    width: 86px;
    min-width: 86px;
    min-height: 62px;
    padding: 0 8px;
    border-radius: 12px;
}
.chatbot-aliss-app .ca-input-speak-btn {
    border: none;
    background: linear-gradient(135deg, #0F766E, #115E59);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.26);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    transition: all 0.15s;
}
.chatbot-aliss-app .ca-input-speak-btn:hover {
    background: linear-gradient(135deg, #115E59, #0F4F4A);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.38);
}
.chatbot-aliss-app .ca-input-speak-btn:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.28);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-input-speak-btn .ca-tool-icon {
    font-size: 22px;
    line-height: 1;
}
.chatbot-aliss-app .ca-input-speak-btn .ca-tool-label {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.chatbot-aliss-app .ca-input-speak-btn.ca-recording {
    background: var(--ca-danger);
    color: #fff;
    border-color: var(--ca-danger);
}

@media (max-width: 520px) {
    .chatbot-aliss-app .ca-input-row {
        gap: 7px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .chatbot-aliss-app .ca-input-row .ca-send-btn,
    .chatbot-aliss-app .ca-input-row .ca-input-speak-btn {
        flex-basis: 68px;
        width: 68px;
        min-width: 68px;
        min-height: 58px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .chatbot-aliss-app .ca-input-row .ca-input {
        min-height: 58px;
        padding-left: 12px;
        padding-right: 12px;
        /* v7.1.0-rc94: one size larger on mobile (was 14px); 16px also stops
           iOS zooming the page when the field is focused. */
        font-size: 16px;
    }
    .chatbot-aliss-app .ca-input-speak-btn .ca-tool-icon {
        font-size: 20px;
    }
    .chatbot-aliss-app .ca-input-speak-btn .ca-tool-label {
        font-size: 10px;
    }
    .chatbot-aliss-app .ca-send-btn {
        font-size: 14px;
        font-weight: 800;
    }
}

@media (max-width: 360px) {
    .chatbot-aliss-app .ca-input-row .ca-send-btn,
    .chatbot-aliss-app .ca-input-row .ca-input-speak-btn {
        flex-basis: 60px;
        width: 60px;
        min-width: 60px;
    }
    .chatbot-aliss-app .ca-input-speak-btn .ca-tool-label {
        font-size: 9px;
    }
}


/* ============================================================
   v6.13.41: Combined Print / Save route picker
   Print and Save are now one compact toolbar action. Pressing it
   opens a small chooser so the user can pick the route they want.
   ============================================================ */
.chatbot-aliss-app .ca-tool-native-hidden[hidden] {
    display: none !important;
}
.chatbot-aliss-app .ca-tool-print-save {
    background: #fff;
    color: var(--ca-primary);
    border: 1.5px solid var(--ca-primary);
}
.chatbot-aliss-app .ca-tool-print-save:hover,
.chatbot-aliss-app .ca-tool-print-save:focus-visible {
    background: var(--ca-primary-soft);
    color: var(--ca-primary-dark);
    border-color: var(--ca-primary);
}
.chatbot-aliss-app .ca-tool-print-save .ca-tool-icon-small {
    font-size: 12px;
    line-height: 1;
    margin-right: 1px;
}
.chatbot-aliss-app .ca-print-save-modal[hidden] {
    display: none !important;
}
.chatbot-aliss-app .ca-print-save-modal {
    position: absolute;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.42);
}
.chatbot-aliss-app .ca-print-save-modal.is-open {
    display: flex;
}
.chatbot-aliss-app .ca-print-save-panel {
    width: min(100%, 520px);
    background: var(--ca-surface, #fff);
    color: var(--ca-text, #1f2937);
    border: 1px solid var(--ca-border, #d6dee8);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28);
    padding: 16px;
}
.chatbot-aliss-app .ca-print-save-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}
.chatbot-aliss-app .ca-print-save-head h2 {
    margin: 0 0 5px;
    font-size: 18px;
    line-height: 1.25;
}
.chatbot-aliss-app .ca-print-save-head p {
    margin: 0;
    color: var(--ca-muted, #64748b);
    font-size: 13px;
    line-height: 1.4;
}
.chatbot-aliss-app .ca-print-save-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--ca-primary-soft, #e6f0fb);
    color: var(--ca-primary-dark, #00488f);
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
}
.chatbot-aliss-app .ca-print-save-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.chatbot-aliss-app .ca-print-save-option {
    min-height: 84px;
    border-radius: 14px;
    border: 1.5px solid var(--ca-primary);
    background: #fff;
    color: var(--ca-text, #1f2937);
    text-align: left;
    padding: 13px 14px;
    cursor: pointer;
    font-family: inherit;
}
.chatbot-aliss-app .ca-print-save-option:hover,
.chatbot-aliss-app .ca-print-save-option:focus-visible {
    background: var(--ca-primary-soft);
    border-color: var(--ca-primary-dark);
    outline: 3px solid var(--ca-primary-soft);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-print-save-option strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}
.chatbot-aliss-app .ca-print-save-option-desc {
    display: block;
    color: var(--ca-muted, #64748b);
    font-size: 12.5px;
    line-height: 1.35;
}
@media (prefers-color-scheme: dark) {
    .chatbot-aliss-app.ca-dark .ca-print-save-panel,
    .chatbot-aliss-app[data-theme="dark"] .ca-print-save-panel {
        background: #111820;
        color: #f3f4f6;
        border-color: #2f3b47;
    }
    .chatbot-aliss-app.ca-dark .ca-print-save-head p,
    .chatbot-aliss-app[data-theme="dark"] .ca-print-save-head p,
    .chatbot-aliss-app.ca-dark .ca-print-save-option-desc,
    .chatbot-aliss-app[data-theme="dark"] .ca-print-save-option-desc {
        color: #b6c0cc;
    }
    .chatbot-aliss-app.ca-dark .ca-print-save-option,
    .chatbot-aliss-app[data-theme="dark"] .ca-print-save-option {
        background: #0f1720;
        color: #f3f4f6;
        border-color: var(--ca-primary);
    }
}
@media (max-width: 520px) {
    .chatbot-aliss-app .ca-print-save-modal {
        padding: 10px;
    }
    .chatbot-aliss-app .ca-print-save-panel {
        border-radius: 16px;
        padding: 14px;
    }
    .chatbot-aliss-app .ca-print-save-options {
        grid-template-columns: 1fr;
    }
    .chatbot-aliss-app .ca-print-save-option {
        min-height: 68px;
        padding: 12px;
    }
    .chatbot-aliss-app .ca-tool-print-save .ca-tool-icon-small {
        font-size: 11px;
    }
}


/* ============================================================
   v6.13.43: Mobile full-screen viewport stability
   ------------------------------------------------------------
   The assistant must fit the actual mobile viewport across Chrome,
   Samsung Internet and iOS-style dynamic browser chrome. This layer
   prevents horizontal clipping, removes inherited theme/container width
   limits, lets the message area shrink instead of pushing controls off
   screen, and keeps the input/actions visible at the bottom.
   ============================================================ */
html.ca-aliss-mobile-lock,
body.ca-aliss-mobile-lock {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation;
}

body.ca-aliss-mobile-lock #page,
body.ca-aliss-mobile-lock #content,
body.ca-aliss-mobile-lock #main,
body.ca-aliss-mobile-lock main,
body.ca-aliss-mobile-lock article,
body.ca-aliss-mobile-lock .entry-content,
body.ca-aliss-mobile-lock .page-content,
body.ca-aliss-mobile-lock .site-content,
body.ca-aliss-mobile-lock .container,
body.ca-aliss-mobile-lock .wrap,
body.ca-aliss-mobile-lock .elementor,
body.ca-aliss-mobile-lock .elementor-section,
body.ca-aliss-mobile-lock .elementor-container,
body.ca-aliss-mobile-lock .elementor-widget-container,
body.ca-aliss-mobile-lock .wp-site-blocks {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

.chatbot-aliss-app.ca-mobile-viewport,
.chatbot-aliss-app.ca-mobile-viewport.ca-mode-inline,
.chatbot-aliss-app.ca-mobile-viewport.ca-mode-fullscreen,
.chatbot-aliss-app.ca-mobile-viewport.ca-mode-bubble {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100svw !important;
    max-width: 100vw !important;
    max-width: 100svw !important;
    min-width: 0 !important;
    height: var(--ca-vvh, 100vh) !important;
    height: var(--ca-vvh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ca-vvh, 100dvh) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 2147483000 !important;
    overflow: hidden !important;
    transform: none !important;
    contain: layout paint;
}

.chatbot-aliss-app.ca-mobile-viewport,
.chatbot-aliss-app.ca-mobile-viewport * {
    max-width: 100%;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-header,
.chatbot-aliss-app.ca-mobile-viewport .ca-refine-toggle,
.chatbot-aliss-app.ca-mobile-viewport .ca-search-row,
.chatbot-aliss-app.ca-mobile-viewport .ca-input-row,
.chatbot-aliss-app.ca-mobile-viewport .ca-tools,
.chatbot-aliss-app.ca-mobile-viewport .ca-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-messages,
.chatbot-aliss-app.ca-mobile-viewport.ca-mode-inline .ca-messages,
.chatbot-aliss-app.ca-mobile-viewport.ca-mode-fullscreen .ca-messages,
.chatbot-aliss-app.ca-mobile-viewport.ca-mode-bubble .ca-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-left: clamp(12px, 4vw, 18px) !important;
    padding-right: clamp(12px, 4vw, 18px) !important;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-message,
.chatbot-aliss-app.ca-mobile-viewport .ca-message-content,
.chatbot-aliss-app.ca-mobile-viewport .ca-service-card,
.chatbot-aliss-app.ca-mobile-viewport .ca-card,
.chatbot-aliss-app.ca-mobile-viewport .ca-intake-card {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-header-main {
    padding: 10px 12px !important;
    gap: 8px !important;
    min-width: 0 !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-brand {
    min-width: 0 !important;
    gap: 8px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-brand-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-brand-title {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    min-width: 0 !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-header-actions {
    gap: 5px !important;
    min-width: 0 !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-lang-btn,
.chatbot-aliss-app.ca-mobile-viewport .ca-icon-btn {
    padding: 7px 8px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-font-btn {
    min-width: 40px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-header-subline,
.chatbot-aliss-app.ca-mobile-viewport .ca-gifted-line {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-refine-toggle {
    margin: 0 10px 8px 10px !important;
    width: calc(100% - 20px) !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-input-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(56px, 17vw, 68px) clamp(56px, 17vw, 68px) !important;
    gap: 7px !important;
    padding: 8px 10px 8px 10px !important;
    align-items: stretch !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-input {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 11px 10px !important;
    font-size: 13px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-send-btn,
.chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-input-speak-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
    min-height: 54px !important;
    padding: 0 4px !important;
    border-radius: 11px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-send-btn {
    font-size: 13.5px !important;
    font-weight: 800 !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-input-speak-btn .ca-tool-icon {
    font-size: 18px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-input-speak-btn .ca-tool-label {
    font-size: 9.5px !important;
    line-height: 1 !important;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-tools {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 10px 8px 10px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-tools .ca-tool {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 5px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border-radius: 8px !important;
    gap: 4px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-tools .ca-tool-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-tool-emergency {
    font-size: 8.8px !important;
    letter-spacing: 0.025em !important;
}

.chatbot-aliss-app.ca-mobile-viewport .ca-footer {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-footer-contact,
.chatbot-aliss-app.ca-mobile-viewport .ca-exit-fast {
    padding: 8px 10px !important;
    font-size: 10.5px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
}
.chatbot-aliss-app.ca-mobile-viewport .ca-footer-attribution {
    width: auto !important;
    order: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 380px) {
    .chatbot-aliss-app.ca-mobile-viewport .ca-header-main {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-brand-logo {
        width: 34px !important;
        height: 34px !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-gifted-line {
        display: none !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-tools .ca-tool {
        min-height: 34px !important;
        font-size: 9.5px !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-input-row {
        grid-template-columns: minmax(0, 1fr) 54px 54px !important;
        gap: 6px !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-send-btn,
    .chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-input-speak-btn,
    .chatbot-aliss-app.ca-mobile-viewport .ca-input-row .ca-input {
        min-height: 50px !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-footer-contact,
    .chatbot-aliss-app.ca-mobile-viewport .ca-exit-fast {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 10px !important;
    }
    .chatbot-aliss-app.ca-mobile-viewport .ca-footer-attribution {
        font-size: 8.8px !important;
    }
}

/* v6.13.55: language picker inside the pre-start disclaimer so users can
   understand the safety notice before they enter the chat. */
.chatbot-aliss-app .ca-disclaimer-language {
    text-align: left;
    margin: 0 0 14px;
    padding: 12px;
    background: #eef7ff;
    border: 1px solid rgba(0, 94, 184, 0.22);
    border-radius: 12px;
}
.chatbot-aliss-app .ca-disclaimer-language-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #003f7d;
    margin: 0 0 7px;
}
.chatbot-aliss-app .ca-disclaimer-language-select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #b8c7dc;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 15px;
    color: #0f172a;
    background: #fff;
}
.chatbot-aliss-app .ca-disclaimer-language-select:focus {
    outline: 3px solid rgba(0, 94, 184, 0.22);
    border-color: #005EB8;
}
.chatbot-aliss-app .ca-disclaimer-language-hint {
    margin: 7px 0 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.35;
}


/* v6.13.55: quick exit must remain available during language loading and before-start disclaimer. */
.chatbot-aliss-app .ca-exit-fast {
    position: relative;
    z-index: 1000002;
}

.chatbot-aliss-app .ca-disclaimer-exit-fast {
    position: sticky;
    top: 0;
    float: right;
    z-index: 1000004;
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.35);
    margin: 0 0 8px 10px;
}

.chatbot-aliss-app .ca-disclaimer-exit-fast:hover,
.chatbot-aliss-app .ca-disclaimer-exit-fast:focus-visible {
    transform: translateY(-1px);
    outline: 3px solid rgba(255,255,255,0.9);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .chatbot-aliss-app .ca-disclaimer-exit-fast {
        /* v7.1.0-rc146: pin to the TOP on mobile. Previously this was
           fixed to the bottom (bottom:14px), where it collided with the
           "Please tick each box to continue" bar and appeared doubled with
           the main chat exit button. Top-right keeps it clear of the
           continue bar and obvious for someone who needs to leave fast. */
        position: fixed;
        right: 14px;
        top: 14px;
        bottom: auto;
        float: none;
        padding: 11px 16px;
        z-index: 1000006;
    }
    /* While the disclaimer is open, hide the main chat exit button so the
       two do not stack/overlap on a small screen. The disclaimer has its
       own exit button (above). */
    .chatbot-aliss-app.ca-disclaimer-open .ca-exit-fast {
        display: none !important;
    }
}

/* ============================================================
   v6.13.67: Emergency Support Cards
   Makes pinned helplines feel consistent with service cards while
   keeping 999/112 first, simple and phone-focused.
   ============================================================ */
.chatbot-aliss-app .ca-emergency-picker-cards .ca-emergency-note {
    margin: 8px 0 10px;
    padding: 8px 10px;
    border-left: 4px solid #1D9E75;
    border-radius: 8px;
    background: #E1F5EE;
    color: #23443A;
    font-size: 12.5px;
    line-height: 1.4;
}
.chatbot-aliss-app .ca-emergency-card-list {
    gap: 8px;
}
.chatbot-aliss-app .ca-emergency-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d0d4d8;
    border-radius: 12px;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.04);
}
.chatbot-aliss-app .ca-emergency-card.is-danger {
    background: #FCEBEB;
    border-color: #F7C1C1;
    color: #501313;
}
.chatbot-aliss-app .ca-emergency-card.is-primary {
    border-left: 5px solid #DC2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
}
.chatbot-aliss-app .ca-emergency-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    line-height: 1.35;
}
.chatbot-aliss-app .ca-emergency-card-title span {
    font-size: 12.5px;
    color: #5f5e5a;
    font-weight: 700;
}
.chatbot-aliss-app .ca-emergency-card.is-danger .ca-emergency-card-title span {
    color: #791F1F;
}
.chatbot-aliss-app .ca-emergency-card-desc {
    margin: 4px 0 0;
    color: #5f5e5a;
    font-size: 12.5px;
    line-height: 1.45;
}
.chatbot-aliss-app .ca-emergency-card.is-danger .ca-emergency-card-desc {
    color: #791F1F;
}
.chatbot-aliss-app .ca-emergency-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chatbot-aliss-app .ca-emergency-action,
.chatbot-aliss-app .ca-emergency-listen {
    appearance: none;
    border: 1px solid #d0d4d8;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    padding: 8px 10px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.chatbot-aliss-app .ca-emergency-action:hover,
.chatbot-aliss-app .ca-emergency-action:focus-visible,
.chatbot-aliss-app .ca-emergency-listen:hover,
.chatbot-aliss-app .ca-emergency-listen:focus-visible {
    border-color: #1D9E75;
    background: #E1F5EE;
    outline: none;
}
.chatbot-aliss-app .ca-emergency-action:active,
.chatbot-aliss-app .ca-emergency-listen:active {
    transform: scale(0.98);
}
.chatbot-aliss-app .ca-emergency-action-call {
    background: #00539F;
    border-color: #00539F;
    color: #ffffff;
}
.chatbot-aliss-app .ca-emergency-action-call:hover,
.chatbot-aliss-app .ca-emergency-action-call:focus-visible {
    background: #003F7A;
    border-color: #003F7A;
    color: #ffffff;
}
.chatbot-aliss-app .ca-emergency-action-call.is-primary-call {
    background: #DC2626;
    border-color: #DC2626;
}
.chatbot-aliss-app .ca-emergency-action-call.is-primary-call:hover,
.chatbot-aliss-app .ca-emergency-action-call.is-primary-call:focus-visible {
    background: #991B1B;
    border-color: #991B1B;
}
.chatbot-aliss-app .ca-emergency-action-text {
    background: #1D9E75;
    border-color: #1D9E75;
    color: #ffffff;
}
.chatbot-aliss-app .ca-emergency-action-text:hover,
.chatbot-aliss-app .ca-emergency-action-text:focus-visible {
    background: #13785A;
    border-color: #13785A;
    color: #ffffff;
}
.chatbot-aliss-app .ca-emergency-action-web {
    background: #F8FAFC;
}
@media (max-width: 520px) {
    .chatbot-aliss-app .ca-emergency-card {
        padding: 11px;
    }
    .chatbot-aliss-app .ca-emergency-actions {
        gap: 5px;
    }
    .chatbot-aliss-app .ca-emergency-action,
    .chatbot-aliss-app .ca-emergency-listen {
        font-size: 12px;
        padding: 8px 9px;
    }
}


/* v6.13.68: Full audit polish */
.ca-emergency-action-email {
    background: #24303a;
    border-color: #465766;
}
.ca-emergency-action-webchat {
    background: #23362f;
    border-color: #47765f;
}
.ca-suggestions[hidden],
.ca-suggestions.ca-hidden {
    display: none !important;
}

/* ========== v6.13.79 RELATED CHARITY CARDS ==========
   Purple charity cards are deliberately separate from ALISS service cards.
   They are related organisations, not confirmed direct services unless manually reviewed. */
.chatbot-aliss-app .ca-charity-card {
    border-left-color: #6F42C1 !important;
    background: linear-gradient(90deg, #FBF8FF 0%, #FFFFFF 36%);
    border-color: #DED2F6;
}
.chatbot-aliss-app .ca-charity-card:hover {
    box-shadow: 0 6px 18px rgba(111, 66, 193, 0.16);
    border-color: #CDB8F3;
}
.chatbot-aliss-app .ca-charity-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.chatbot-aliss-app .ca-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.chatbot-aliss-app .ca-card-badge-charity {
    color: #5527A6;
    background: #F3EDFF;
}
.chatbot-aliss-app .ca-card-badge-caution {
    color: #7A4D00;
    background: #FFF3CD;
    text-transform: none;
    font-size: 11px;
    letter-spacing: 0;
}
.chatbot-aliss-app .ca-charity-card .ca-card-title strong {
    color: #3F236E;
}
.chatbot-aliss-app .ca-card-charity-number {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    background: #F3EDFF;
    color: #5527A6;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
}
.chatbot-aliss-app .ca-card-charity-why {
    border-left-color: #6F42C1 !important;
    background: #F3EDFF !important;
}
.chatbot-aliss-app .ca-charity-caution {
    background: #FFF9E8;
    border-color: #F0D98D;
    color: #6F4A00;
}
.chatbot-aliss-app .ca-card-listen-charity {
    background: #6F42C1 !important;
    border-color: #6F42C1 !important;
}
.chatbot-aliss-app .ca-charity-check-pill {
    border: 1px solid #E4C56D;
    background: #FFF9E8;
    color: #6F4A00;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
}
.chatbot-aliss-app .ca-message-text h2 {
    font-size: 17px;
    margin: 16px 0 6px;
    color: var(--ca-navy);
}
.chatbot-aliss-app .ca-message-text h2 + p {
    color: var(--ca-slate);
    font-size: 13px;
    line-height: 1.45;
}

/* v7.1.0-rc8: OSCR source badge for charity-register cards. */
.ca-card-badge-oscr {
  background: #6d28d9 !important;
  color: #fff !important;
  border: 1px solid rgba(109, 40, 217, 0.35) !important;
  letter-spacing: 0.02em;
}
.ca-charity-card .ca-charity-caution {
  background: #f9fafb;
  border-left: 4px solid #7c3aed;
}

/* v7.1.0-rc8: legally safer OSCR source attribution for charity-register cards. */
.chatbot-aliss-app .ca-card-oscr-attribution {
    margin-top: 8px;
    padding: 9px 10px;
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    background: #ffffff;
    color: #6b7280;
    font-size: 11px;
    line-height: 1.4;
}


/* v7.1.0-rc8: one OSCR/OGL attribution block after the final charity card. */
.chatbot-aliss-app .ca-oscr-section-attribution {
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.45;
}
.chatbot-aliss-app .ca-oscr-section-attribution .ca-oscr-section-title {
    margin: 0 0 6px;
    font-size: 13px;
    color: #111827;
    font-weight: 800;
}
.chatbot-aliss-app .ca-oscr-section-attribution p {
    margin: 6px 0 0;
}

/* v7.1.0-rc18: Answer Quality Gate UI */
.chatbot-aliss-app .ca-quality-gate-card{
  margin:12px 0 14px;
  border:1px solid #f4c36d;
  background:#fff7e8;
  border-radius:18px;
  padding:14px;
  color:#5f3308;
  box-shadow:0 10px 26px rgba(180,83,9,.08);
}
.chatbot-aliss-app .ca-quality-gate-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:9px}
.chatbot-aliss-app .ca-quality-gate-kicker{font-size:11px;font-weight:800;color:#a4510a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.chatbot-aliss-app .ca-quality-gate-card h3{margin:0;font-size:16px;line-height:1.2;color:#713f12;font-weight:800}
.chatbot-aliss-app .ca-quality-score{display:inline-flex;align-items:center;justify-content:center;min-width:46px;border-radius:999px;background:#fff;border:1px solid #f6c77f;color:#a4510a;font-weight:900;font-size:12px;padding:6px 9px;white-space:nowrap}
.chatbot-aliss-app .ca-quality-message{font-size:13px;line-height:1.45;color:#78350f;margin:0 0 10px!important}
.chatbot-aliss-app .ca-quality-badges{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 11px}
.chatbot-aliss-app .ca-quality-badges span{display:inline-flex;border-radius:999px;background:#fff;border:1px solid #f6c77f;color:#78350f;font-size:11px;font-weight:800;padding:5px 8px}
.chatbot-aliss-app .ca-quality-badges .ca-quality-status{background:#fff1f2;border-color:#fecaca;color:#b91c1c}
.chatbot-aliss-app .ca-quality-links{display:grid;gap:8px;margin-top:10px}
.chatbot-aliss-app .ca-quality-link{display:flex;align-items:center;gap:9px;text-decoration:none;background:#eef6ff;border:1px solid #bfdbfe;border-radius:14px;padding:10px;color:#174078!important}
.chatbot-aliss-app .ca-quality-link:hover{background:#e0efff;transform:translateY(-1px)}
.chatbot-aliss-app .ca-quality-link-icon{flex:0 0 auto;font-size:16px}
.chatbot-aliss-app .ca-quality-link-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.chatbot-aliss-app .ca-quality-link-text strong{font-size:13px;color:#123b73}
.chatbot-aliss-app .ca-quality-link-text small{font-size:12px;color:#315b99;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.chatbot-aliss-app .ca-quality-link-arrow{flex:0 0 auto;font-weight:900;color:#1d4ed8}

/* === v7.1.0-rc49: full-width "Find an organisation by name" chip ===
   Surfaced under the need chips, replacing the old Search options panel.
   Styled as a clear, calm secondary action so it reads as "or, find a
   named organisation" rather than competing with the topic chips. */
.chatbot-aliss-app .ca-find-org-row {
    margin: 4px 4px 2px;
}
.chatbot-aliss-app .ca-find-org-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #eef5fc;
    border: 2px solid var(--ca-primary, #005EB8);
    color: #003e7e;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease;
}
.chatbot-aliss-app .ca-find-org-chip:hover,
.chatbot-aliss-app .ca-find-org-chip:focus-visible {
    background: #e2eefb;
    outline: 2px solid var(--ca-primary, #005EB8);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-find-org-icon {
    font-size: 19px;
    line-height: 1;
}

/* === v7.1.0-rc49: highlight the block currently being read aloud ===
   Makes it obvious which text the Listen audio belongs to. */
.chatbot-aliss-app .ca-speaking-highlight {
    outline: 3px solid #ffd54f;
    outline-offset: 3px;
    border-radius: 8px;
    background: #fffbe6;
    transition: background 150ms ease;
}

/* === v7.1.0-rc50: emphasise the area/postcode helper line ===
   Makes the "Type a Scottish postcode, town or city..." guidance bold so it
   reads clearly for users with low digital confidence. */
.chatbot-aliss-app .ca-intake-sub.ca-intake-sub-strong {
    font-weight: 700;
    color: #1a2733;
}

/* === v7.1.0-rc53: hover/focus tooltips ("wee bubbles") for tool buttons ===
   Shows a short plain-English description on hover and on keyboard focus, so
   users know what each button does before pressing it. The button's label
   keeps its own ellipsis; the bubble escapes the button box. */
.chatbot-aliss-app .ca-tool[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a2733;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 190px;
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 30;
}
.chatbot-aliss-app .ca-tool[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a2733;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    z-index: 30;
}
.chatbot-aliss-app .ca-tool[data-tooltip]:hover::after,
.chatbot-aliss-app .ca-tool[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.chatbot-aliss-app .ca-tool[data-tooltip]:hover::before,
.chatbot-aliss-app .ca-tool[data-tooltip]:focus-visible::before {
    opacity: 1;
}

/* === v7.1.0-rc54: keep edge tooltips inside the widget ===
   The centred bubble spills past the container edge on the first and last
   tool buttons (which sit at the left/right of the row) and gets clipped.
   Anchor those two inward so the whole bubble stays visible. */
.chatbot-aliss-app .ca-tool-translate[data-tooltip]::after {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.chatbot-aliss-app .ca-tool-translate[data-tooltip]:hover::after,
.chatbot-aliss-app .ca-tool-translate[data-tooltip]:focus-visible::after {
    transform: translateX(0) translateY(0);
}
.chatbot-aliss-app .ca-tool-translate[data-tooltip]::before {
    left: 22px;
}
.chatbot-aliss-app .ca-tool-clear[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.chatbot-aliss-app .ca-tool-clear[data-tooltip]:hover::after,
.chatbot-aliss-app .ca-tool-clear[data-tooltip]:focus-visible::after {
    transform: translateX(0) translateY(0);
}
.chatbot-aliss-app .ca-tool-clear[data-tooltip]::before {
    left: auto;
    right: 22px;
}

/* === v7.1.0-rc56: tooltip reliability + closable org search ===
   The Auto-Translate bubble was sitting behind the input row and blending into
   dark host pages. Lift it above everything and give it a subtle light edge so
   it reads on any background. */
.chatbot-aliss-app .ca-tool[data-tooltip]::after {
    z-index: 60;
    max-width: 210px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
}
.chatbot-aliss-app .ca-tool[data-tooltip]::before {
    z-index: 60;
}

/* Find-an-organisation chip: chevron + open state so it reads as a toggle. */
.chatbot-aliss-app .ca-find-org-chip {
    gap: 8px;
}
.chatbot-aliss-app .ca-find-org-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}
.chatbot-aliss-app .ca-find-org-chip.ca-find-org-open .ca-find-org-chevron {
    transform: rotate(180deg);
}
.chatbot-aliss-app .ca-find-org-chip.ca-find-org-open {
    background: #e2eefb;
}

/* === v7.1.0-rc57: retire the clipped CSS bubble, use a body-level tooltip ===
   The widget has overflow:hidden for its rounded corners, which clipped the
   left-edge Auto-Translate bubble. The pseudo-element bubbles are switched off
   and replaced by .ca-js-tooltip, rendered to <body> so nothing can clip it. */
.chatbot-aliss-app .ca-tool[data-tooltip]::after,
.chatbot-aliss-app .ca-tool[data-tooltip]::before {
    content: none !important;
}
.ca-js-tooltip {
    position: fixed;
    z-index: 2147483000;
    display: none;
    opacity: 0;
    max-width: 240px;
    background: #1a2733;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transition: opacity 120ms ease;
}

/* ============================================================
   v7.1.0-rc249 — TILES, EMOJI WAYFINDING AND THE LISTEN BAR
   ------------------------------------------------------------
   Every choice in the app is now a tile: a picture above the
   words, in a grid, with a generous tap target. The picture is
   supplied by JavaScript on a data-emoji attribute and painted
   here with ::before, never as a child element — several
   routines re-translate these buttons by assigning textContent,
   which would wipe out any inner markup but leaves an attribute
   alone.

   The icons are decoration. Every tile carries an explicit
   aria-label, so a screen reader reads the words and skips the
   generated content entirely.
   ============================================================ */

/* ---------- the tile itself ---------- */

.chatbot-aliss-app .ca-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 14px 10px;
    min-height: 92px;
    line-height: 1.3;
}
.chatbot-aliss-app .ca-tile[data-emoji]::before {
    content: attr(data-emoji);
    display: block;
    font-size: 26px;
    line-height: 1;
    /* Keep the glyph upright and identical in RTL languages. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* Full-width tiles ("I'm not sure", "Something else") read better as a
   wide row than a tall box, so they lay their icon out beside the words. */
.chatbot-aliss-app .ca-intake-chip.ca-tile.is-full {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-height: 52px;
    gap: 10px;
    padding: 12px 14px;
}
.chatbot-aliss-app .ca-intake-chip.ca-tile.is-full[data-emoji]::before {
    font-size: 20px;
}

/* The intake grids get a little more air now the tiles are taller. */
.chatbot-aliss-app .ca-intake-chips {
    gap: 10px;
}
.chatbot-aliss-app .ca-intake-chips.ca-intake-detail-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.chatbot-aliss-app .ca-intake-chip.ca-tile {
    /* Overrides the old left-aligned pill layout. */
    align-items: center;
    text-align: center;
    border-radius: 14px;
    background: var(--ca-white);
    box-shadow: var(--ca-shadow-sm);
    transition: border-color 0.15s, background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.chatbot-aliss-app .ca-intake-chip.ca-tile:hover,
.chatbot-aliss-app .ca-intake-chip.ca-tile:focus-visible {
    box-shadow: 0 4px 14px rgba(30, 45, 68, 0.10);
    transform: translateY(-1px);
}
.chatbot-aliss-app .ca-intake-chip.ca-tile:active {
    transform: translateY(0) scale(0.98);
}
/* The emergency tile keeps its red tint and gets a slightly larger icon,
   because it is the one tile nobody should have to hunt for. */
.chatbot-aliss-app .ca-intake-chip.ca-tile.is-emergency[data-emoji]::before {
    font-size: 30px;
}

/* Choice tiles rendered inside an answer (clarification and need pickers). */
.chatbot-aliss-app .ca-inline-chips.ca-clarify-chips,
.chatbot-aliss-app .ca-inline-chips.ca-need-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.chatbot-aliss-app .ca-inline-chip.ca-tile {
    border-radius: 14px;
    white-space: normal;
    width: auto;
    box-shadow: var(--ca-shadow-sm);
}
.chatbot-aliss-app .ca-need-skip {
    grid-column: 1 / -1;
}

/* Refinement options are actions on the list you are already reading, not
   fresh choices, so they stay as compact pills with a small leading icon. */
.chatbot-aliss-app .ca-inline-chip.ca-has-emoji:not(.ca-tile)::before,
.chatbot-aliss-app .ca-need-skip.ca-has-emoji::before {
    content: attr(data-emoji);
    margin-inline-end: 6px;
    font-size: 15px;
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- service card tag pills ---------- */

.chatbot-aliss-app .ca-card-tags {
    gap: 6px;
}
.chatbot-aliss-app .ca-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chatbot-aliss-app .ca-tag.ca-has-emoji::before {
    content: attr(data-emoji);
    font-size: 13px;
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
}
/* Category pills are buttons: tapping one runs that category as a fresh
   search. They are styled to look pressable so nobody has to guess. */
.chatbot-aliss-app button.ca-tag-search {
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
    min-height: 28px;
    transition: background 0.15s, transform 0.06s, box-shadow 0.15s;
}
.chatbot-aliss-app button.ca-tag-search:hover,
.chatbot-aliss-app button.ca-tag-search:focus-visible {
    background: var(--ca-primary-dark);
    box-shadow: 0 2px 8px rgba(0, 94, 184, 0.28);
    outline: none;
}
.chatbot-aliss-app button.ca-tag-search:focus-visible {
    border-color: #fff;
    outline: 2px solid var(--ca-primary-dark);
    outline-offset: 1px;
}
.chatbot-aliss-app button.ca-tag-search:active {
    transform: scale(0.97);
}
.chatbot-aliss-app .ca-tag-who {
    background: var(--ca-accent-soft);
    color: var(--ca-accent);
}

/* ---------- the Listen transport bar ---------- */

.chatbot-aliss-app .ca-listen-bar {
    display: none;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 40;
    background: var(--ca-navy);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(30, 45, 68, 0.28);
    overflow: hidden;
    font-size: 13px;
}
.chatbot-aliss-app .ca-listen-bar.is-active {
    display: block;
}
.chatbot-aliss-app .ca-listen-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
}
.chatbot-aliss-app .ca-listen-progress-fill {
    height: 100%;
    width: 0;
    background: var(--ca-mint);
    transition: width 0.25s linear;
}
.chatbot-aliss-app .ca-listen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 14px;
}
.chatbot-aliss-app .ca-listen-status {
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chatbot-aliss-app .ca-listen-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.chatbot-aliss-app .ca-listen-ctl {
    min-width: 40px;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.06s;
}
.chatbot-aliss-app .ca-listen-ctl:hover,
.chatbot-aliss-app .ca-listen-ctl:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    outline: none;
}
.chatbot-aliss-app .ca-listen-ctl:focus-visible {
    outline: 2px solid var(--ca-mint);
    outline-offset: 2px;
}
.chatbot-aliss-app .ca-listen-ctl:active {
    transform: scale(0.94);
}
.chatbot-aliss-app .ca-listen-ctl-main {
    background: var(--ca-mint);
    color: #06281F;
    min-width: 48px;
    font-size: 17px;
}
.chatbot-aliss-app .ca-listen-ctl-main:hover,
.chatbot-aliss-app .ca-listen-ctl-main:focus-visible {
    background: #35D9B6;
}
.chatbot-aliss-app .ca-listen-speed {
    font-size: 13px;
    font-weight: 700;
}
.chatbot-aliss-app .ca-listen-stop {
    background: rgba(220, 38, 38, 0.35);
}
.chatbot-aliss-app .ca-listen-stop:hover,
.chatbot-aliss-app .ca-listen-stop:focus-visible {
    background: rgba(220, 38, 38, 0.65);
}
/* The single-file OpenAI voice has no sentence boundaries to step through,
   so the skip controls are hidden rather than left there doing nothing. */
.chatbot-aliss-app .ca-listen-bar.is-audio [data-listen-ctl="back"],
.chatbot-aliss-app .ca-listen-bar.is-audio [data-listen-ctl="forward"] {
    display: none;
}

/* ---------- smaller screens ---------- */

@media (max-width: 700px) {
    .chatbot-aliss-app .ca-intake-chips.ca-intake-detail-chips,
    .chatbot-aliss-app .ca-inline-chips.ca-clarify-chips,
    .chatbot-aliss-app .ca-inline-chips.ca-need-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-tile {
        min-height: 84px;
        padding: 12px 8px;
        font-size: 12.5px;
    }
    .chatbot-aliss-app .ca-tile[data-emoji]::before {
        font-size: 23px;
    }
    .chatbot-aliss-app .ca-listen-row {
        padding: 8px;
        gap: 6px;
    }
    .chatbot-aliss-app .ca-listen-status {
        font-size: 12px;
    }
    .chatbot-aliss-app .ca-listen-ctl {
        min-width: 38px;
        padding: 0 6px;
    }
}

/* Larger text settings keep the icon in proportion with the words. */
.chatbot-aliss-app.ca-font-large  .ca-tile[data-emoji]::before { font-size: 29px; }
.chatbot-aliss-app.ca-font-xlarge .ca-tile[data-emoji]::before { font-size: 32px; }

/* Respect a stated preference for less movement. */
@media (prefers-reduced-motion: reduce) {
    .chatbot-aliss-app .ca-intake-chip.ca-tile,
    .chatbot-aliss-app .ca-listen-ctl,
    .chatbot-aliss-app button.ca-tag-search,
    .chatbot-aliss-app .ca-listen-progress-fill {
        transition: none;
    }
    .chatbot-aliss-app .ca-intake-chip.ca-tile:hover {
        transform: none;
    }
}

/* Dark theme. */
@media (prefers-color-scheme: dark) {
    .chatbot-aliss-app.ca-dark .ca-intake-chip.ca-tile,
    .chatbot-aliss-app[data-theme="dark"] .ca-intake-chip.ca-tile,
    .chatbot-aliss-app.ca-dark .ca-inline-chip.ca-tile,
    .chatbot-aliss-app[data-theme="dark"] .ca-inline-chip.ca-tile {
        background: #0f1720;
        border-color: #2f3b47;
        color: #f3f4f6;
    }
    .chatbot-aliss-app.ca-dark .ca-listen-bar,
    .chatbot-aliss-app[data-theme="dark"] .ca-listen-bar {
        background: #0b1119;
        border: 1px solid #2f3b47;
    }
}

/* ============================================================
   v7.1.0-rc250 — THE SUPPORTING LINE, AND THE LAST THREE
   CHIP SURFACES
   ------------------------------------------------------------
   Every chip in the app is now a tile, with no exceptions: the
   NHS health picker, the audience clarifier and the refinement
   actions were the three still rendering as pills.

   Each tile also carries a short line under the label saying
   what pressing it gets you. Like the emoji, it is painted from
   a data attribute rather than a child element, because the
   answer translator and the language switcher both rewrite
   these buttons with textContent and would erase any markup
   inside them. data-desc-en holds the English so a language
   change can re-resolve it; data-desc holds what is painted.
   ============================================================ */

.chatbot-aliss-app .ca-tile[data-desc]::after {
    content: attr(data-desc);
    display: block;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 400;
    opacity: 0.72;
    margin-top: 1px;
    /* The supporting line must never crowd out the label it supports. */
    max-width: 22ch;
}
.chatbot-aliss-app .ca-tile.ca-has-desc {
    min-height: 116px;
    padding: 14px 10px;
    gap: 4px;
}
/* The label itself carries the weight; the line below is quieter. */
.chatbot-aliss-app .ca-tile.ca-has-desc {
    font-weight: 500;
}

/* Wide tiles put the icon beside the words, so the supporting line sits
   under the label rather than under the icon. */
.chatbot-aliss-app .ca-intake-chip.ca-tile.is-full.ca-has-desc {
    min-height: 60px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.chatbot-aliss-app .ca-intake-chip.ca-tile.is-full[data-desc]::after {
    flex-basis: 100%;
    max-width: none;
    margin-inline-start: 30px;
    margin-top: 0;
}

/* ---------- the NHS health picker ---------- */

.chatbot-aliss-app .ca-intake-chips.ca-health-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
/* Tiles that open guidance rather than running a location search get a
   quieter face, so the difference is visible before you press as well as
   readable in the supporting line. */
.chatbot-aliss-app .ca-health-chip.is-info {
    background: var(--ca-bg);
}
.chatbot-aliss-app .ca-health-chip.is-info[data-desc]::after {
    opacity: 0.62;
}

/* ---------- refinement actions, now tiles ---------- */

.chatbot-aliss-app .ca-inline-chips.ca-refine-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.chatbot-aliss-app .ca-inline-chips.ca-audience-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* ---------- smaller screens ---------- */

@media (max-width: 700px) {
    .chatbot-aliss-app .ca-intake-chips.ca-health-chips,
    .chatbot-aliss-app .ca-inline-chips.ca-refine-chips,
    .chatbot-aliss-app .ca-inline-chips.ca-audience-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .chatbot-aliss-app .ca-tile.ca-has-desc {
        min-height: 106px;
    }
    .chatbot-aliss-app .ca-tile[data-desc]::after {
        font-size: 11px;
    }
}

/* Larger text settings scale the supporting line with the label. */
.chatbot-aliss-app.ca-font-large  .ca-tile[data-desc]::after { font-size: 12.5px; }
.chatbot-aliss-app.ca-font-xlarge .ca-tile[data-desc]::after { font-size: 13.5px; }
.chatbot-aliss-app.ca-font-large  .ca-tile.ca-has-desc { min-height: 126px; }
.chatbot-aliss-app.ca-font-xlarge .ca-tile.ca-has-desc { min-height: 136px; }

@media (prefers-color-scheme: dark) {
    .chatbot-aliss-app.ca-dark .ca-health-chip.is-info,
    .chatbot-aliss-app[data-theme="dark"] .ca-health-chip.is-info {
        background: #131c26;
    }
}