/**
 * TGM ChatBot — ClickChat front-end styles (Phase 8)
 *
 * Floating panels that appear on double-right-click / long-press. Each
 * panel is positioned absolutely relative to the document (not the
 * viewport) so scrolling doesn't move it out from under the click point.
 * Colors and dimensions inherit from the plugin's CSS custom properties
 * (Phase 1.6) with ClickChat-specific overrides injected by the enqueue
 * layer when the admin configures them.
 */

.tgm-clickchat-box,
.clickchat-box {
    position: absolute;
    z-index: 999999;
    max-height: 420px;
    min-width: 280px;
    background: var( --chatbox-bg, #ffffff );
    color: var( --chatbox-text, #1d2327 );
    border: 2px solid var( --chatbox-border, var( --colour-accent, #3498db ) );
    border-radius: var( --radius, 10px );
    box-shadow: var( --chatbox-shadow, 0 10px 32px rgba( 0, 0, 0, 0.22 ) );
    font-family: var( --tgm-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );
    font-size: 14px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale( 0.95 );
    transition: opacity 150ms ease, transform 150ms ease;
    overflow: hidden;
    /* Critical: while opacity is 0 the element is invisible but still
     * capturing clicks. pointer-events:none until explicitly made visible
     * prevents invisible boxes from silently eating clicks on the page. */
    pointer-events: none;
}

.tgm-clickchat-box.is-visible,
.clickchat-box.is-visible {
    opacity: 1;
    transform: scale( 1 );
    pointer-events: auto;
}

.tgm-clickchat-box.is-closing,
.clickchat-box.is-closing {
    opacity: 0;
    transform: scale( 0.96 );
    pointer-events: none;
}

.tgm-clickchat-box.is-minimized {
    max-height: 38px;
    min-width: 240px;
    width: 280px !important;
}
.tgm-clickchat-box.is-minimized .tgm-cc-messages,
.tgm-clickchat-box.is-minimized .tgm-cc-input-row {
    display: none;
}

/* ── Header ── */
.tgm-cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var( --chatbox-header-bg, var( --colour-accent, #3498db ) );
    color: var( --chatbox-header-text, #ffffff );
    padding: 8px 10px;
    cursor: grab;
    user-select: none;
    /* Required for pointer events to work cleanly during a drag —
     * otherwise the browser may start a native scroll/selection gesture
     * instead of firing pointermove to our handler. */
    touch-action: none;
}
.tgm-cc-header:active { cursor: grabbing; }

.tgm-cc-brand {
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tgm-cc-target {
    flex: 1 1 auto;
    font-size: 12px;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgm-cc-controls {
    display: flex;
    gap: 4px;
}
.tgm-cc-controls button {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}
.tgm-cc-controls button:hover { background: rgba( 255, 255, 255, 0.18 ); }

/* ── Messages ── */
.tgm-cc-messages {
    flex: 1 1 auto;
    padding: 12px;
    overflow-y: auto;
    background: var( --chatbox-bg, #ffffff );
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
}

.tgm-cc-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    max-width: 92%;
}
.tgm-cc-bubble-assistant {
    background: var( --bot-bubble-bg, #ecf0f1 );
    color: var( --bot-bubble-text, #2c3e50 );
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.tgm-cc-bubble-user {
    background: var( --user-bubble-bg, #d5f5e3 );
    color: var( --user-bubble-text, #2c3e50 );
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.tgm-cc-bubble a { color: var( --bot-bubble-link, #3498db ); }
.tgm-cc-bubble p:first-child { margin-top: 0; }
.tgm-cc-bubble p:last-child  { margin-bottom: 0; }

/* ── Typing indicator ── */
.tgm-cc-typing {
    display: inline-flex;
    gap: 4px;
    padding: 10px 14px;
}
.tgm-cc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var( --ai-typing-dots, #3498db );
    animation: tgm-cc-dot-pulse 1.2s infinite ease-in-out both;
}
.tgm-cc-dot:nth-child( 1 ) { animation-delay: -0.32s; }
.tgm-cc-dot:nth-child( 2 ) { animation-delay: -0.16s; }
@keyframes tgm-cc-dot-pulse {
    0%, 80%, 100% { transform: scale( 0.6 ); opacity: 0.4; }
    40%           { transform: scale( 1 );   opacity: 1;   }
}

/* ── Input row ── */
.tgm-cc-input-row {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var( --window-border, #e0e0e0 );
    background: var( --chatbox-bg, #ffffff );
}
.tgm-cc-input {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid var( --input-border, #e0e0e0 );
    border-radius: var( --radius, 8px );
    font: inherit;
    color: var( --input-text, #1d2327 );
    background: var( --input-bg, #ffffff );
    outline: none;
}
.tgm-cc-input:focus {
    border-color: var( --chatbox-border, var( --colour-accent, #3498db ) );
}
.tgm-cc-send {
    appearance: none;
    padding: 0 12px;
    font-size: 18px;
    line-height: 1;
    /* Send button tracks the ClickChat accent (which falls back to the
     * main widget's header). This keeps the arrow and header the same
     * color across all presets. */
    background: var( --chatbox-border, var( --colour-accent, #3498db ) );
    color: #fff;
    border: 0;
    border-radius: var( --radius, 8px );
    cursor: pointer;
}
.tgm-cc-send:hover { filter: brightness( 1.08 ); }

/* ── Onboarding tooltip ──
 * NOTE: because .tgm-clickchat-onboard also carries the .clickchat-box
 * class, it inherits opacity:0 + pointer-events:none from the base rule
 * above. The .is-visible rule on .clickchat-box then lights it up. The
 * transform override below just re-centers it (fixed-position centering
 * differs from the scale-only transform used for floating boxes). */
.tgm-clickchat-onboard {
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate( -50%, 0 ) scale( 0.96 );
    width: 360px;
    max-width: 90vw;
    z-index: 1000000;
}
.tgm-clickchat-onboard.is-visible {
    transform: translate( -50%, 0 ) scale( 1 );
    /* opacity + pointer-events come from the shared .clickchat-box.is-visible rule. */
}
.tgm-clickchat-onboard.is-closing {
    opacity: 0;
    pointer-events: none;
}

.tgm-cc-onboard-body {
    padding: 18px 20px 20px;
    text-align: center;
}
.tgm-cc-onboard-emoji {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 8px;
}
.tgm-cc-onboard-body h3 {
    margin: 0 0 8px;
    font-size: 17px;
}
.tgm-cc-onboard-body p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var( --chatbox-text, #4a4a4a );
}
.tgm-cc-onboard-dismiss {
    margin-top: 10px;
    padding: 8px 16px;
    background: var( --cta-btn-bg, var( --colour-accent, #3498db ) );
    color: var( --cta-btn-text, #ffffff );
    border: 0;
    border-radius: var( --radius, 8px );
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   ACCENT STYLE PRESETS
   ══════════════════════════════════════════════════════════════ */

/* classic — match the main chatbot widget look exactly. Reads from
   the main widget's CSS variables (set by TGM_Widget via <style id
   ="tgm-chatbot-vars">), so whatever the admin picked for the main
   chat header also shows up here. */
.tgm-clickchat-box.tgm-clickchat-style-classic {
    background: var( --tgm-window-bg,  #f9f9f9 );
    border: 1px solid var( --tgm-window-border, #e0e0e0 );
    border-radius: var( --radius, 16px );
    color:  var( --tgm-bot-text, #2c3e50 );
    font-family: var( --tgm-font-body, inherit );
}
.tgm-clickchat-box.tgm-clickchat-style-classic .tgm-cc-header {
    /* Prefer the ClickChat-specific accent (set via --chatbox-border on the
     * box itself), falling back to the main widget's header color. This is
     * what makes the "explicit ClickChat accent" the admin picked on the
     * Appearance tab actually show up in Classic. */
    background: var( --chatbox-border, var( --tgm-header-bg, #2c3e50 ) );
    color:      var( --tgm-header-title, #ffffff );
    font-family: var( --tgm-font-header, inherit );
    font-weight: var( --tgm-font-header-weight, 700 );
    border-bottom: 0;
}
.tgm-clickchat-box.tgm-clickchat-style-classic .tgm-cc-brand,
.tgm-clickchat-box.tgm-clickchat-style-classic .tgm-cc-target,
.tgm-clickchat-box.tgm-clickchat-style-classic .tgm-cc-controls button {
    color: var( --tgm-header-title, #ffffff );
}
.tgm-clickchat-box.tgm-clickchat-style-classic .tgm-cc-bubble-assistant {
    background: var( --tgm-bot-bg, #ecf0f1 );
    color:      var( --tgm-bot-text, #2c3e50 );
}
.tgm-clickchat-box.tgm-clickchat-style-classic .tgm-cc-bubble-user {
    background: var( --tgm-user-bg, #d5f5e3 );
    color:      var( --tgm-user-text, #2c3e50 );
}
/* Send button intentionally uses the base rule (--chatbox-border) so its
 * color matches the header across every preset. */

/* accent_bar — thick colored left edge + clean light header */
.tgm-clickchat-box.tgm-clickchat-style-accent_bar {
    border-left-width: 6px;
}
.tgm-clickchat-box.tgm-clickchat-style-accent_bar .tgm-cc-header {
    background: transparent;
    color: var( --chatbox-text, #1d2327 );
    border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
    /* Keep space for the absolutely-positioned avatar — previous rule
     * overrode the base header padding and let the avatar overlap the
     * brand text. */
    padding-left: calc( var( --tgm-cc-avatar-size, 32px ) + 14px );
}
.tgm-clickchat-box.tgm-clickchat-style-accent_bar .tgm-cc-brand {
    color: var( --chatbox-border, var( --colour-accent, #3498db ) );
}
.tgm-clickchat-box.tgm-clickchat-style-accent_bar .tgm-cc-controls button {
    color: var( --chatbox-text, #1d2327 );
}

/* ── stickynote ──
 * Entire note is one warm yellow sheet — no border, no inner background
 * tinting, no rounded corners. One corner is "folded up" via a CSS
 * clip-path on the box, with a ::before pseudo-element drawing the
 * turned-up paper itself (two-tone diagonal gradient for the fold shading).
 * All four corners are sharp; only the top-right is cut.
 */

.tgm-clickchat-box.tgm-clickchat-style-stickynote {
    --tgm-sticky-bg: #fff3a8;
    --tgm-sticky-shade: #e8d272;
    --tgm-sticky-fold: 26px;

    background: var( --tgm-sticky-bg ) !important;
    color: #3b2e14;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none; /* clip-path swallows box-shadow; we use filter instead */

    /* Lifted-note shadow via drop-shadow filter — this is the only way to
     * cast a shadow that hugs the CLIPPED silhouette (including the cut
     * corner), because `box-shadow` is drawn before clip-path is applied
     * and gets clipped away. Chaining two drop-shadows gives depth: a
     * close crisp contact shadow, plus a softer offset shadow that pools
     * below-right, suggesting the note is tilted and floating. */
    filter:
        drop-shadow( 1px 2px 1px rgba( 0, 0, 0, 0.18 ) )
        drop-shadow( 4px 10px 10px rgba( 0, 0, 0, 0.28 ) );

    /* Cut the top-right corner off the paper. The ::before below fills
     * that cut with the turned-up fold. */
    clip-path: polygon(
        0 0,
        calc( 100% - var( --tgm-sticky-fold ) ) 0,
        100% var( --tgm-sticky-fold ),
        100% 100%,
        0 100%
    );
}

.tgm-clickchat-box.tgm-clickchat-style-stickynote.is-visible {
    transform: scale( 1 ) rotate( -1.25deg );
}

/* The turned-up fold itself — a small square at the top-right with a
 * diagonal gradient so the "under side of the paper" reads as a shadow
 * wedge next to a lighter highlight wedge. Positioned INSIDE the box's
 * clip-path so it becomes visible only in the cut area — we deliberately
 * don't clip the pseudo-element so it pokes out and draws the fold. */
.tgm-clickchat-box.tgm-clickchat-style-stickynote::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: var( --tgm-sticky-fold );
    height: var( --tgm-sticky-fold );
    background: linear-gradient(
        225deg,
        var( --tgm-sticky-bg ) 0%,
        var( --tgm-sticky-bg ) 49%,
        var( --tgm-sticky-shade ) 50%,
        rgba( 0, 0, 0, 0.08 ) 100%
    );
    z-index: 1;
    pointer-events: none;
    /* Soft drop shadow so the fold looks raised off the paper below. */
    filter: drop-shadow( -1px 2px 1px rgba( 0, 0, 0, 0.18 ) );
}

/* Everything inside stays transparent so the whole box reads as one
 * continuous sheet of paper. Bubble differentiation comes from a faint
 * shadow, not a different bg. */
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-header {
    background: transparent;
    color: #6b5016;
    border-bottom: 1px dashed rgba( 0, 0, 0, 0.18 );
    padding-right: calc( var( --tgm-sticky-fold ) + 6px );
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-messages {
    background: transparent;
    /* Firefox scrollbar — the two colors are thumb + track. */
    scrollbar-width: thin;
    scrollbar-color: var( --tgm-sticky-shade ) transparent;
}
/* WebKit (Chrome, Safari, Edge) scrollbar — can't use custom properties
 * reliably inside ::-webkit- pseudo-elements across all WebKit versions,
 * so we hard-code colors that match the paper palette. */
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-messages::-webkit-scrollbar {
    width: 8px;
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-messages::-webkit-scrollbar-track {
    background: transparent;
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-messages::-webkit-scrollbar-thumb {
    background: #e8d272;   /* paper shade */
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-messages::-webkit-scrollbar-thumb:hover {
    background: #d0b73b;   /* a step darker on hover */
    background-clip: padding-box;
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-bubble-assistant {
    background: transparent;
    color: #3b2e14;
    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.10 );
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-bubble-user {
    background: rgba( 224, 178, 70, 0.28 );
    color: #3b2e14;
    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.10 );
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-input-row {
    background: transparent;
    border-top: 1px dashed rgba( 0, 0, 0, 0.18 );
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-input {
    background: rgba( 255, 255, 255, 0.3 );
    border: 1px solid rgba( 0, 0, 0, 0.12 );
    color: #3b2e14;
}
.tgm-clickchat-box.tgm-clickchat-style-stickynote .tgm-cc-cta-footer {
    background: transparent;
    border-top: 1px dashed rgba( 0, 0, 0, 0.18 );
}

/* minimal — no header bar, controls float in the top-right */
.tgm-clickchat-box.tgm-clickchat-style-minimal {
    border-width: 1px;
    box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
}
.tgm-clickchat-box.tgm-clickchat-style-minimal .tgm-cc-header {
    background: transparent;
    border-bottom: 0;
    padding: 6px 10px 0;
    min-height: 0;
}
.tgm-clickchat-box.tgm-clickchat-style-minimal .tgm-cc-brand,
.tgm-clickchat-box.tgm-clickchat-style-minimal .tgm-cc-target,
.tgm-clickchat-box.tgm-clickchat-style-minimal .tgm-cc-header-avatar {
    display: none;
}
.tgm-clickchat-box.tgm-clickchat-style-minimal .tgm-cc-controls {
    margin-left: auto;
}
.tgm-clickchat-box.tgm-clickchat-style-minimal .tgm-cc-controls button {
    color: rgba( 0, 0, 0, 0.5 );
}

/* ══════════════════════════════════════════════════════════════
   ORIGIN MARKER + CONNECTING LINE
   Small pulsing dot at the click coordinates, plus an SVG line
   connecting the dot to the ClickChat box. Both follow the box
   on drag + on scroll.
   ══════════════════════════════════════════════════════════════ */

.tgm-cc-origin {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    background: var( --chatbox-border, var( --colour-accent, #3498db ) );
    box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.85 ), 0 2px 6px rgba( 0, 0, 0, 0.25 );
    z-index: 999998;
    pointer-events: none;
    opacity: 0;
    transform: scale( 0 );
    transition: opacity 180ms ease, transform 180ms cubic-bezier( 0.34, 1.56, 0.64, 1 );
}
.tgm-cc-origin.is-visible {
    opacity: 1;
    transform: scale( 1 );
}
.tgm-cc-origin::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid var( --chatbox-border, var( --colour-accent, #3498db ) );
    opacity: 0.6;
    animation: tgm-cc-origin-pulse 1.6s ease-out infinite;
}
@keyframes tgm-cc-origin-pulse {
    0%   { transform: scale( 0.6 ); opacity: 0.7; }
    100% { transform: scale( 2.1 ); opacity: 0;   }
}

/* Connecting line is a plain rotated div. Two pseudo-elements aren't
 * needed — one dashed background line is enough, and this path survives
 * rapid transform updates across every browser we care about. */
.tgm-cc-line {
    position: absolute;
    height: 2px;
    width: 0;
    pointer-events: none;
    z-index: 999997;
    transform-origin: 0 50%;
    opacity: 0;
    transition: opacity 180ms ease;
    background-image: repeating-linear-gradient(
        to right,
        var( --chatbox-border, var( --colour-accent, #3498db ) ) 0 6px,
        transparent 6px 11px
    );
    animation: tgm-cc-line-flow 1.2s linear infinite;
}
.tgm-cc-line.is-visible { opacity: 0.75; }
@keyframes tgm-cc-line-flow {
    from { background-position: 0 0;    }
    to   { background-position: 11px 0; }
}

/* Header + persona avatar — the avatar is absolutely positioned so it can
 * be arbitrarily large without growing the header. Header keeps a fixed
 * visual height (content-driven with min-height); the avatar pops above
 * and below via its own layer.
 *
 * The box itself keeps overflow: hidden so huge avatars still clip at the
 * rounded top corner — accepting that trade-off prevents the box's
 * rounded corners from breaking. */
.tgm-cc-header {
    position: relative;
    overflow: visible;
    min-height: 40px;
    /* Leave room on the left equal to the avatar size so the brand text
     * doesn't collide with the avatar. */
    padding-left: calc( var( --tgm-cc-avatar-size, 32px ) + 14px );
}
.tgm-cc-header-avatar {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY( -50% );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  var( --tgm-cc-avatar-size, 32px );
    height: var( --tgm-cc-avatar-size, 32px );
    font-size: calc( var( --tgm-cc-avatar-size, 32px ) * 0.78 );
    line-height: 1;
    z-index: 2;
    /* No padding, no tinted backdrop — SVG avatars supply their own silhouette. */
    padding: 0;
    background: transparent;
}
.tgm-cc-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    padding: 0;
    display: block;
}
/* When the avatar is bigger than the header, let it spill out below the
 * header and over the messages area, same pop-out trick used on the
 * launcher button. Box stays overflow:hidden to protect rounded corners. */
.tgm-clickchat-box { overflow: hidden; }
.tgm-clickchat-box.tgm-clickchat-style-stickynote { overflow: visible; }

/* AI reply tools — thumbs up/down + copy + follow-up pills */
.tgm-cc-bubble-tools {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    align-self: flex-start;
    opacity: 0.55;
    transition: opacity 120ms ease;
}
.tgm-cc-bubble-tools:hover { opacity: 1; }
.tgm-cc-tool-btn {
    appearance: none;
    background: transparent;
    border: 1px solid rgba( 0, 0, 0, 0.08 );
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    color: inherit;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tgm-cc-tool-btn:hover {
    background: rgba( 0, 0, 0, 0.05 );
    border-color: rgba( 0, 0, 0, 0.18 );
}
.tgm-cc-tool-btn.is-active {
    background: var( --chatbox-border, var( --colour-accent, #3498db ) );
    color: #fff;
    border-color: transparent;
}
.tgm-cc-tool-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

.tgm-cc-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    align-self: flex-start;
}
.tgm-cc-followup {
    appearance: none;
    background: transparent;
    border: 1px dashed var( --chatbox-border, var( --colour-accent, #3498db ) );
    color: var( --chatbox-border, var( --colour-accent, #3498db ) );
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    max-width: 100%;
    text-align: left;
}
.tgm-cc-followup:hover {
    background: var( --chatbox-border, var( --colour-accent, #3498db ) );
    color: #fff;
}

/* CTA footer — pill-shaped buttons. Explicit hover colors below so host
 * theme styles for <button>:hover don't leak green / blue / anything
 * unexpected into our accent-colored pills. */
.tgm-cc-cta-footer {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 10px 10px;
    border-top: 1px solid rgba( 0, 0, 0, 0.06 );
    background: transparent;
}
.tgm-cc-cta-footer button {
    appearance: none;
    background: var( --chatbox-border, var( --colour-accent, #3498db ) ) !important;
    color: #fff !important;
    border: 0 !important;
    cursor: pointer;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 );
    transition: filter 120ms ease, transform 120ms ease;
}
.tgm-cc-cta-footer .tgm-cc-cta-contact:hover,
.tgm-cc-cta-footer .tgm-cc-cta-contact:focus {
    /* Solid pill: keep the accent color, just darken a touch + lift. */
    background: var( --chatbox-border, var( --colour-accent, #3498db ) ) !important;
    color: #fff !important;
    filter: brightness( 0.92 );
    transform: translateY( -1px );
}
/* Ghost variant — transparent with accent outline + accent text. */
.tgm-cc-cta-footer .tgm-cc-cta-updates {
    background: transparent !important;
    color: var( --chatbox-border, var( --colour-accent, #3498db ) ) !important;
    border: 1px solid var( --chatbox-border, var( --colour-accent, #3498db ) ) !important;
    box-shadow: none;
}
.tgm-cc-cta-footer .tgm-cc-cta-updates:hover,
.tgm-cc-cta-footer .tgm-cc-cta-updates:focus {
    /* Invert: fill the accent on hover so it echoes the contact button
     * briefly, then releases. */
    background: var( --chatbox-border, var( --colour-accent, #3498db ) ) !important;
    color: #fff !important;
    transform: translateY( -1px );
}

/* ── Inline CTA panel (appears inside the messages area when the
 *     visitor clicks Contact Us or Get Updates) ─────────────────── */
.tgm-cc-cta-panel {
    max-width: 100% !important;
}
.tgm-cc-cta-intro {
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.45;
}
.tgm-cc-cta-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tgm-cc-cta-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var( --chatbox-border, var( --colour-accent, #3498db ) );
    color: #fff !important;
    text-decoration: none !important;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 );
    transition: filter 120ms ease, transform 120ms ease;
}
.tgm-cc-cta-option:hover,
.tgm-cc-cta-option:focus {
    filter: brightness( 0.92 );
    transform: translateY( -1px );
    color: #fff !important;
}
.tgm-cc-cta-option-icon {
    font-size: 14px;
    line-height: 1;
}

/* Kit email capture form (inline) */
.tgm-cc-kit-form {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}
.tgm-cc-kit-email {
    flex: 1 1 auto;
    padding: 7px 10px;
    border: 1px solid var( --input-border, #cbd5e1 );
    border-radius: 8px;
    font: inherit;
    color: var( --input-text, #1d2327 );
    background: var( --input-bg, #ffffff );
    outline: none;
}
.tgm-cc-kit-email:focus {
    border-color: var( --chatbox-border, var( --colour-accent, #3498db ) );
}
.tgm-cc-kit-submit {
    appearance: none;
    background: var( --chatbox-border, var( --colour-accent, #3498db ) );
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.tgm-cc-kit-submit:hover:not([disabled]) { filter: brightness( 0.92 ); }
.tgm-cc-kit-submit[disabled] { opacity: 0.6; cursor: default; }
.tgm-cc-kit-msg {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    min-height: 1em;
}
.tgm-cc-kit-msg-ok  { color: #0f7e3b; }
.tgm-cc-kit-msg-err { color: #b32d2e; }