/* Main Container & Toggle Button */
#scp-chat-container {
    /* Themeable brand color. Per-location webchat_config can override --scp-primary at runtime
       (the widget JS sets it on this element); --scp-primary-dark is the auto-derived hover shade.
       Blank config ⇒ these defaults, i.e. the original look is unchanged. */
    --scp-primary: #0073aa;
    --scp-primary-dark: #005a87;
    /* Placement, set per site in Settings → Mission Lens (the shortcode writes the three inputs
       inline). Offsets shift from the default 20px spot: x positive = right, negative = left;
       y positive = up. Another widget (a second chat, a back-to-top button) often owns the same
       corner. The edge distances are plain here and computed in the @supports block below: a
       browser without clamp() ignores the offsets and keeps 20px in the chosen corner, because a
       var() that resolves to something invalid does NOT fall back to an earlier declaration — it
       blanks the property. */
    --scp-offset-x: 0px;
    --scp-offset-y: 0px;
    --scp-z: 9999;
    --scp-edge-x: 20px;
    --scp-edge-y: 20px;
    position: fixed;
    bottom: var(--scp-edge-y);
    right: var(--scp-edge-x);
    z-index: var(--scp-z);
}

/* Bottom-left corner: the same distance, measured from the left edge. */
#scp-chat-container.scp-pos-left {
    right: auto;
    left: var(--scp-edge-x);
}

@supports (bottom: clamp(0px, 1px, 2px)) {
    /* Each edge distance is clamped so no offset can push the 60px bubble off screen. The caps keep
       20px spare beyond the bubble: 100vw/100vh count a desktop scrollbar, fixed positioning does
       not, so a cap flush with the far edge would let an extreme offset tuck 17px under it. */
    #scp-chat-container {
        --scp-edge-x: clamp(0px, calc(20px - var(--scp-offset-x)), calc(100vw - 80px));
        --scp-edge-y: clamp(0px, calc(20px + var(--scp-offset-y)), calc(100vh - 80px));
    }
    /* x keeps its meaning on the left (positive still moves right), so the sign flips. */
    #scp-chat-container.scp-pos-left {
        --scp-edge-x: clamp(0px, calc(20px + var(--scp-offset-x)), calc(100vw - 80px));
    }
    /* The open window keeps its full size and slides back toward the screen edge just enough to fit:
       its own edge distance is the bubble's, capped at the room its normal size leaves (same 20px
       spare, plus the floor of 20px so a phone, where the window already fills the width, stays put
       at the default settings). Shrinking it to the room instead clipped the input and Close on a
       phone. A relative shift (not position: fixed) keeps it anchoring the AI-notice overlay and
       keeps the Web Chat Tester's in-flow embed. */
    #scp-chat-container {
        --scp-win-x: clamp(0px, var(--scp-edge-x), max(20px, 100vw - min(437.5px, 90vw) - 30px));
        --scp-win-y: clamp(0px, var(--scp-edge-y), max(20px, 100vh - min(625px, 70vh) - 30px));
    }
    #scp-chat-container #scp-chat-window {
        right: calc(var(--scp-win-x) - var(--scp-edge-x));
        bottom: calc(var(--scp-win-y) - var(--scp-edge-y));
    }
    #scp-chat-container.scp-pos-left #scp-chat-window {
        right: auto;
        left: calc(var(--scp-win-x) - var(--scp-edge-x));
    }
}

#scp-chat-toggle {
    background-color: var(--scp-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

/* Show toggle button when it has the visible class */
#scp-chat-toggle.scp-toggle-visible {
    display: flex !important;
}

/* Fallback: Show toggle button only when chat window is hidden (for browsers that support :has) */
#scp-chat-container:has(#scp-chat-window.scp-is-hidden) #scp-chat-toggle {
    display: flex;
}

#scp-chat-toggle:hover {
    transform: scale(1.1);
}

/* Chat Window */
#scp-chat-window {
    position: relative; /* anchors the AI-notice overlay */
    width: 437.5px; /* 25% wider than 350px */
    max-width: 90vw;
    height: 625px; /* 25% taller than 500px */
    max-height: 70vh;
    background: #fff;
    /* The widget sits INSIDE someone else's page, and `color` inherits. A dark WordPress theme sets
       white body text, which any element of ours that doesn't name its own colour then picks up —
       white on our white/near-white panels, i.e. invisible. (Real report: the header title vanished on
       a dark theme while the icons beside it, which do set a colour, stayed visible.) This base makes
       the widget's text OURS by default, so a rule that forgets a colour degrades to readable rather
       than to nothing. Elements that want another colour still set it and win on specificity. */
    color: #1c1c1e;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: bottom right;
}
#scp-chat-container.scp-pos-left #scp-chat-window {
    transform-origin: bottom left;
}

#scp-chat-window.scp-is-hidden {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    display: none !important; /* Completely remove from layout when hidden */
}

/* Header — the customer's brand colour, like the launcher bubble, the send button and the visitor's
   own messages. The title and both icons are white on it, all named explicitly rather than inherited
   (see #scp-chat-window). No bottom border: the colour change is already the divider. */
.scp-chat-header {
    background: var(--scp-primary);
    color: #fff;
    padding: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The header is avatar | title | actions. Without this the title is a third `space-between` item and
   floats to the middle of the bar, nowhere near the avatar; taking the slack keeps it at the left. */
#scp-chat-title {
    flex: 1 1 auto;
    min-width: 0;
}

#scp-chat-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    /* Slightly held back so the title reads first; full white on hover. */
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
}
#scp-chat-close:hover {
    color: #fff;
}

.scp-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

#scp-chat-restart {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
/* Full white, NOT --scp-primary: that is the header's own background now, so the old hover colour
   would make the icon vanish under the cursor. */
#scp-chat-restart:hover {
    color: #fff;
}

/* Messages Area */
#scp-chat-messages {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding: 15px;
    overflow-y: auto !important;
    /* A conversation never scrolls sideways. Without this, any child that overruns the content box —
       a long unbreakable URL in an answer, a width cap plus a margin — hands the visitor a horizontal
       scrollbar under the messages instead of just wrapping. */
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    height: 0 !important;
}

/* Needs the id in the selector: the bare .scp-is-hidden is `!important` too, but loses to the ID
   above on specificity, so the conversation would stay on screen under the picker. Same reason
   #scp-chat-form has its own rule. */
#scp-chat-messages.scp-is-hidden {
    display: none !important;
}

.scp-message {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 80%;
    line-height: 1.4;
    word-wrap: break-word;
}

/* --- Bot avatar ------------------------------------------------------------------------------ */

/* A bot reply is a ROW: avatar, then bubble. User messages stay bare bubbles (right-aligned), so the
   messages container holds a mix of rows and bubbles — both are flex children and align themselves.
   The greeting uses its OWN class deliberately: clearing the conversation removes every
   `.scp-message-row`, and the greeting must survive that (it is config, not conversation). */
.scp-message-row,
.scp-welcome-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: flex-start;
    /* Leaves a clear right margin. It has to cover the avatar AND the gap as well as the bubble, so a
       figure near 100% pushed bot replies right up against the panel edge. */
    max-width: 85%;
}

/* Vertical only: the messages container already pads 15px on each side, and the extra horizontal
   margin on top of the width cap pushed the row past the content box — which is what produced the
   horizontal scrollbar under the conversation. */
.scp-welcome-row {
    margin: 10px 0 4px 0;
}

/* The greeting's "Not sure what to ask?" line, inside the bubble rather than in a second one. */
.scp-welcome-lead {
    display: block;
    margin-top: 8px;
    font-weight: 600;
}
.scp-welcome-row.scp-is-hidden {
    display: none !important;
}

/* A run of bot replies shows ONE avatar: the follower keeps the space (so bubbles stay in line) and
   hides the circle. visibility, not display — display:none would collapse the gap and shift the row. */
.scp-message-row.assistant + .scp-message-row.assistant .scp-avatar {
    visibility: hidden;
}

.scp-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--scp-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;         /* clips a non-square image to the circle */
    user-select: none;
}

/* An image fills the circle; the brand background only shows for the monogram. */
.scp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scp-avatar.scp-avatar-image {
    background: transparent;
}

/* Header copy: smaller, and it must not squeeze the title on a narrow widget. INVERTED — a brand-on-
   brand circle is invisible against the brand-coloured header, leaving a bare letter floating in it,
   so the disc goes white and the letter takes the brand colour. A photo needs neither: it fills the
   circle and `.scp-avatar-image` clears the background. */
.scp-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 11px;
    margin-right: 8px;
    background: #fff;
    color: var(--scp-primary);
}
.scp-avatar.scp-is-hidden {
    display: none !important;
}

/* The bubble inside a row must not also try to align itself — the ROW does that now, and the row
   already supplies the outer inset the greeting used to set for itself. */
.scp-message-row .scp-message,
.scp-welcome-row .scp-welcome-message {
    max-width: 100%;
}
.scp-welcome-row .scp-welcome-message {
    margin: 0;
}

.scp-message.user {
    background-color: var(--scp-primary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.scp-message.assistant {
    background-color: #e5e5ea;
    color: #000;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

/* Form Input Area */
#scp-chat-form {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    flex-shrink: 0 !important;
}

#scp-chat-input {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 14px;
    /* An input does NOT inherit the page colour on its own, but a theme styling `input { color: … }`
       reaches it, and on a dark theme that is white text in our white box — the visitor cannot see
       what they are typing. Our id beats a bare element selector, so declaring it settles the matter.
       Background too: the same themes set one. */
    color: #1c1c1e;
    background-color: #fff;
}

#scp-chat-input:focus {
    outline: none;
    border-color: var(--scp-primary);
}

#scp-chat-form button {
    background: var(--scp-primary) !important;
    background-color: var(--scp-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* Footer: Powered-by and AI Notice centered on one row, separator in between */
.scp-chat-footer {
    flex-shrink: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 10px;
    font-size: 13px;
    color: #888;
    background: transparent;
}

.scp-chat-footer-brand {
    font-weight: 600;
    /* Fixed MissionLens brand blue — not themed by the customer's --scp-primary. */
    /* Every link colour in this file is !important. A theme that colours links by region id outranks
       any class selector of ours, and the widget is placed inside such a region: Drupal 7's Bartik
       colours `#footer-wrapper a` white, so this link vanished on our white panel (still clickable),
       and links in answers and the notice's Privacy Policy link go the same way. */
    color: #0073aa !important;
    text-decoration: none;
}

.scp-chat-footer-brand:hover {
    text-decoration: underline;
}

/* AI notice: footer trigger + in-window popup */
.scp-ai-notice-trigger {
    background: none;
    border: none;
    border-left: 1px solid #ccc; /* separator between the two footer items */
    padding: 0 0 0 10px;
    font-size: 13px;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
}

.scp-ai-notice-trigger:hover {
    color: #555;
}

#scp-ai-notice-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scp-ai-notice-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.scp-ai-notice-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.scp-ai-notice-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    font-size: 14px;
    /* Same hole as the chat header: a white panel with no colour of its own. */
    color: #1c1c1e;
}

#scp-ai-notice-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.scp-ai-notice-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}

.scp-ai-notice-body p {
    margin: 0 0 10px;
}

.scp-ai-notice-body p:last-child {
    margin-bottom: 0;
}

.scp-ai-notice-privacy a {
    color: var(--scp-primary) !important; /* !important: see .scp-chat-footer-brand */
}

/* Typing Indicator */
#scp-typing-indicator {
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 15px 5px 15px;
    flex-shrink: 0;
}
#scp-typing-indicator.scp-is-hidden {
    display: none !important;
}

.scp-thinking-label {
    color: #666;
    font-size: 14px;
    font-style: italic;
    margin-left: 8px;
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Loader Animation — spinning wheel (rotating label text set by JS) */
#scp-typing-indicator .scp-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 115, 170, 0.25);
    border-top-color: var(--scp-primary);
    border-radius: 50%;
    animation: scp-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes scp-spin {
    to { transform: rotate(360deg); }
}

/* Starter / suggested questions — full-width outlined cards, stacked */
.scp-suggestions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 4px 15px 12px 15px;
    flex-shrink: 0 !important;
}
.scp-suggestions.scp-is-hidden {
    display: none !important;
}

/* Branch chips (multi-location). Deliberately the same shape as the starter questions — it is the
   same gesture, so it should not look like a different kind of control. */
/* The branch picker's OWN screen: it takes the whole body of the widget while choosing, in place of
   the messages (which are hidden, not scrolled past). Picking is a mode — chips rendered inside the
   transcript landed mid-scroll and were clipped by whatever the conversation had already pushed up. */
.scp-locations {
    display: flex;
    flex-direction: column;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    background: #fff;
}
.scp-locations.scp-is-hidden {
    display: none !important;
}

/* Only this scrolls, so the back row stays put with a long branch list. */
.scp-locations-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 15px 16px;
}

.scp-locations-lead {
    font-size: 14px;
    line-height: 1.4;
    color: #1c1c1e;
    margin-bottom: 12px;
}

.scp-locations-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* The way back to the conversation, shown only when there IS one (a first pick has nothing to go back
   to). Mirrors the banner it replaces, so the branch name never leaves the screen. */
.scp-location-back {
    flex-shrink: 0;
    display: block;
    width: 100%;
    text-align: left;
    background: #f2f2f7;
    border: none;
    border-bottom: 1px solid #e0e0e5;
    padding: 8px 15px;
    font-size: 12.5px;
    color: var(--scp-primary);
    cursor: pointer;
}
.scp-location-back:hover {
    background: #e8e8ee;
}
.scp-location-back.scp-is-hidden {
    display: none !important;
}

/* The branch you are already on: ticked, so a change is a deliberate move to a different one. */
.scp-location-option-current::after {
    content: " ✓";
    font-weight: 600;
}

/* "You are talking to <branch>" strip, directly under the header so it is never scrolled away —
   after a switch-back an older transcript reappears and this is what re-orients the visitor. */
.scp-location-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 15px;
    background: #f2f2f7;
    border-bottom: 1px solid #e0e0e5;
    font-size: 12.5px;
    color: #3c3c43;
    flex-shrink: 0;
}
.scp-location-banner.scp-is-hidden {
    display: none !important;
}
.scp-location-banner-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scp-location-change {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 12.5px;
    color: var(--scp-primary);
    text-decoration: underline;
    cursor: pointer;
}
.scp-location-change:hover {
    color: var(--scp-primary-dark);
}

/* Disabled while this branch is waiting on a reply — you can't walk out mid-answer. */
.scp-location-change:disabled {
    color: #8e8e93;
    text-decoration: none;
    cursor: not-allowed;
}

/* Disabled until a branch is picked — a visible cue, not just an inert box. */
#scp-chat-input:disabled {
    background: #f2f2f7;
    color: #8e8e93;
    cursor: not-allowed;
}
#scp-chat-form button[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* The whole form goes away while the branch chips are up — there is nothing to type into yet. */
#scp-chat-form.scp-is-hidden {
    display: none !important;
}
.scp-suggestions-lead {
    align-self: flex-start;
    background-color: #e5e5ea;
    color: #000;
    padding: 8px 14px;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
}
.scp-suggestion-chip {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--scp-primary);
    color: var(--scp-primary);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.35;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.scp-suggestion-chip:hover {
    background: var(--scp-primary);
    color: #fff;
}

/* Welcome message — a persistent assistant-style greeting bubble at the top */
.scp-welcome-message {
    align-self: flex-start;
    background-color: #e5e5ea;
    color: #000;
    padding: 10px 15px;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    max-width: 80%;
    margin: 10px 15px 4px 15px;
    line-height: 1.4;
    font-size: 14px;
    flex-shrink: 0;
}
.scp-welcome-message.scp-is-hidden {
    display: none !important;
}

/* HTML/Markdown styling within messages */
.scp-message h1,
.scp-message h2,
.scp-message h3,
.scp-message h4,
.scp-message h5,
.scp-message h6 {
    margin: 0.5em 0;
    font-weight: bold;
    line-height: 1.2;
}

.scp-message h1 { font-size: 1.3em; }
.scp-message h2 { font-size: 1.2em; }
.scp-message h3 { font-size: 1.1em; }
.scp-message h4 { font-size: 1.05em; }
.scp-message h5 { font-size: 1em; }
.scp-message h6 { font-size: 0.95em; }

.scp-message p {
    margin: 0.5em 0;
}

.scp-message p:first-child {
    margin-top: 0;
}

.scp-message p:last-child {
    margin-bottom: 0;
}

.scp-message code {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.scp-message.assistant code {
    background-color: rgba(0, 0, 0, 0.15);
}

.scp-message pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.4;
}

.scp-message.assistant pre {
    background-color: rgba(0, 0, 0, 0.08);
}

.scp-message pre code {
    background-color: transparent;
    padding: 0;
    display: block;
}

.scp-message a {
    color: var(--scp-primary) !important; /* !important: see .scp-chat-footer-brand */
    text-decoration: underline;
}

.scp-message.assistant a {
    color: var(--scp-primary-dark) !important;
}

.scp-message a:hover {
    opacity: 0.8;
}

.scp-message strong {
    font-weight: bold;
}

.scp-message em {
    font-style: italic;
}

.scp-message u {
    text-decoration: underline;
}

.scp-message ul,
.scp-message ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.scp-message li {
    margin: 0.25em 0;
    line-height: 1.4;
}

.scp-message blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1em;
    margin: 0.5em 0;
    font-style: italic;
    color: #666;
}

.scp-message hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 1em 0;
}

/* ===== Auth Screen ===== */

#scp-auth-screen {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

#scp-auth-screen.scp-is-hidden {
    display: none;
}

#scp-chat-screen {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#scp-chat-screen.scp-is-hidden {
    display: none;
}

.scp-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #e5e5e5;
}

.scp-auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.scp-auth-tab:hover,
.scp-auth-tab:focus,
.scp-auth-tab:active {
    color: #555;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.scp-auth-tab-active,
.scp-auth-tab-active:hover,
.scp-auth-tab-active:focus,
.scp-auth-tab-active:active {
    color: var(--scp-primary) !important;
    border-bottom-color: var(--scp-primary);
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.scp-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scp-auth-form.scp-is-hidden {
    display: none;
}

.scp-auth-form input {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.scp-auth-form input:focus {
    border-color: var(--scp-primary);
}

.scp-auth-form input:-webkit-autofill,
.scp-auth-form input:-webkit-autofill:hover,
.scp-auth-form input:-webkit-autofill:focus,
.scp-auth-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px #fff inset !important;
    -webkit-text-fill-color: #333 !important;
    box-shadow: 0 0 0 9999px #fff inset !important;
    background-color: #fff !important;
    background-clip: content-box !important;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: #333;
}

.scp-auth-submit {
    background: var(--scp-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.scp-auth-submit:hover {
    background: var(--scp-primary-dark);
}

.scp-auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.scp-auth-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}

.scp-auth-error.scp-is-hidden {
    display: none;
}

.scp-auth-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}

.scp-auth-success.scp-is-hidden {
    display: none;
}

.scp-membership-notice {
    background: #fffbeb;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.4;
    flex-shrink: 0;
}

.scp-membership-notice.scp-is-hidden {
    display: none;
}

.scp-guest-link {
    text-align: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.scp-guest-link a {
    color: var(--scp-primary) !important; /* !important: see .scp-chat-footer-brand */
    text-decoration: none;
    font-size: 13px;
}

.scp-guest-link a:hover {
    text-decoration: underline;
}

/* Agent Label (Daxko / GroupEx) */
.scp-agent-label {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 0.4rem;
    margin-top: 0.4rem;
}

.scp-icon-people::before {
    content: "\1F465";
    margin-right: 2px;
}

.scp-icon-calendar::before {
    content: "\1F4C5";
    margin-right: 2px;
}

.scp-icon-operations::before {
    content: "\1F3E2";
    margin-right: 2px;
}

/* Daxko & GroupEx table styling */
.scp-message.assistant table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.85em;
}

.scp-message.assistant th,
.scp-message.assistant td {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 6px 10px;
    text-align: left;
}

.scp-message.assistant th {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.scp-message.assistant tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.03);
}

.scp-is-hidden {
    display: none !important;
}

/* Password toggle */
.scp-password-wrapper {
    position: relative;
    display: flex;
}

.scp-password-wrapper input {
    flex: 1;
    padding-right: 40px;
}

#scp-chat-container .scp-password-toggle {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    color: #888;
    padding: 4px !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    line-height: 1;
}

#scp-chat-container .scp-password-toggle:hover,
#scp-chat-container .scp-password-toggle:focus,
#scp-chat-container .scp-password-toggle:active {
    color: #555;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}