#gco-ai-root {
    --gco-accent: #18abb1;
    --gco-accent-dark: #087d91;
    --gco-header: #112f37;
    position: fixed;
    inset: 0;
    z-index: 2147483640;
    pointer-events: none;
    font-family: Arial, Helvetica, sans-serif;
}

#gco-ai-launcher {
    position: fixed;
    width: 76px;
    height: 76px;
    left: calc(100vw - 105px);
    top: calc(100vh - 110px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
    background: linear-gradient(145deg, var(--gco-accent), var(--gco-accent-dark));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .30), 0 0 0 4px rgba(255, 255, 255, .92);
    animation: gco-ai-float 3s ease-in-out infinite;
}

#gco-ai-launcher:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .38), 0 0 0 5px #fff; }
#gco-ai-launcher:active { cursor: grabbing; }
#gco-ai-launcher svg { pointer-events: none; }

@keyframes gco-ai-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }

#gco-ai-chat {
    position: fixed;
    width: min(410px, calc(100vw - 24px));
    height: min(620px, calc(100vh - 30px));
    display: none;
    flex-direction: column;
    pointer-events: auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

#gco-ai-chat.gco-open { display: flex; animation: gco-ai-chat-open .18s ease-out; }
@keyframes gco-ai-chat-open { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

.gco-ai-header {
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, #10282f, var(--gco-header));
}
.gco-ai-header-left { display: flex; align-items: center; gap: 11px; }
.gco-ai-header-avatar {
    width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--gco-accent); font-size: 11px; font-weight: 800; letter-spacing: .2px;
}
.gco-ai-title { font-size: 15px; font-weight: 700; }
.gco-ai-subtitle { margin-top: 3px; font-size: 11px; opacity: .74; }
#gco-ai-close { border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; }

#gco-ai-messages { flex: 1; overflow-y: auto; padding: 16px; background: #f4f7f8; }
.gco-ai-message {
    max-width: 86%; margin-bottom: 12px; padding: 11px 14px; border-radius: 15px; line-height: 1.42;
    font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap;
}
.gco-ai-message-assistant { background: #fff; color: #172126; border-bottom-left-radius: 5px; box-shadow: 0 3px 12px rgba(0,0,0,.06); }
.gco-ai-message-user { margin-left: auto; color: #fff; background: var(--gco-accent); border-bottom-right-radius: 5px; }

.gco-ai-quick-actions, .gco-ai-context-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.gco-ai-quick-action, .gco-ai-context-action {
    padding: 8px 11px; border: 1px solid var(--gco-accent); border-radius: 20px; background: #fff;
    color: var(--gco-accent-dark); cursor: pointer; font-size: 12px; line-height: 1.2;
}
.gco-ai-context-actions { padding-left: 2px; }
.gco-ai-context-action { background: #effbfb; }
.gco-ai-quick-action:hover, .gco-ai-context-action:hover { background: #dff7f7; }

.gco-ai-input-area { display: flex; align-items: center; gap: 8px; padding: 11px; border-top: 1px solid #e3e8ea; background: #fff; }
#gco-ai-input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #d4dcdf; border-radius: 23px; outline: none; font-size: 14px; }
#gco-ai-input:focus { border-color: var(--gco-accent); }
.gco-ai-circle-button { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; font-size: 17px; }
#gco-ai-mic { background: #edf2f3; }
#gco-ai-send { background: var(--gco-accent); color: #fff; }
#gco-ai-send:disabled, #gco-ai-input:disabled { opacity: .55; }
.gco-ai-listening { animation: gco-ai-pulse 1s infinite; background: #ffdede !important; }
@keyframes gco-ai-pulse { 50% { transform: scale(1.12); } }

.gco-ai-guided-highlight {
    position: relative;
    outline: 4px solid var(--gco-accent) !important;
    outline-offset: 7px !important;
    border-radius: 6px;
    animation: gco-guide-pulse .9s ease-in-out 3;
}
@keyframes gco-guide-pulse { 50% { box-shadow: 0 0 0 12px rgba(24,171,177,.18); } }

/* Insight / diagnostic / SEO cards */
.gco-insight-card, .gco-growth-card {
    margin: 12px 0 16px; padding: 16px; background: #fff; border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08); box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
.gco-card-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--gco-accent-dark); margin-bottom: 6px; }
.gco-card-domain { color: #667378; font-size: 12px; overflow-wrap: anywhere; margin-bottom: 13px; }
.gco-score-hero { padding: 12px; border-radius: 12px; background: #effbfb; text-align: center; margin-bottom: 12px; }
.gco-score-hero strong { font-size: 30px; color: var(--gco-accent-dark); }
.gco-score-hero span { color: #607076; font-size: 12px; margin-left: 4px; }
.gco-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.gco-health-grid > div { padding: 9px 10px; border-radius: 10px; background: #f6f8f9; }
.gco-health-grid span { display: block; color: #718087; font-size: 10px; margin-bottom: 3px; }
.gco-health-grid strong { color: #172126; font-size: 12px; }
.gco-card-section-title { margin: 12px 0 8px; color: #172126; font-size: 12px; font-weight: 800; }
.gco-opportunity-list { display: grid; gap: 7px; }
.gco-opportunity-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border-radius: 10px; background: #f7f9fa; font-size: 12px; line-height: 1.35; }
.gco-opportunity-number { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gco-accent); color: #fff; font-size: 10px; font-weight: 800; }
.gco-card-muted { color: #718087; font-size: 12px; }
.gco-card-actions { display: grid; gap: 8px; margin-top: 14px; }
.gco-card-actions button { width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; border: 1px solid var(--gco-accent); background: #fff; color: var(--gco-accent-dark); }
.gco-card-actions button:first-child { background: var(--gco-accent); color: #fff; border-color: var(--gco-accent); }

/* Growth plan */
.gco-growth-business { font-size: 18px; font-weight: 800; color: #172126; margin-bottom: 10px; }
.gco-growth-goal { padding: 10px 12px; background: #effbfb; border-radius: 10px; margin-bottom: 10px; }
.gco-growth-goal span, .gco-next-step span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #718087; margin-bottom: 3px; }
.gco-growth-goal strong, .gco-next-step strong { font-size: 12px; color: #172126; }
.gco-growth-summary { color: #56656b; font-size: 12px; line-height: 1.45; }
.gco-plan-list { display: grid; gap: 9px; margin: 12px 0; }
.gco-plan-item { display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 10px; border: 1px solid #e7ecee; border-radius: 11px; }
.gco-plan-number { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: #102f37; color: #fff; font-size: 11px; font-weight: 800; }
.gco-plan-item strong { display: block; font-size: 12px; color: #172126; }
.gco-plan-item span { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--gco-accent-dark); }
.gco-plan-item p { margin: 5px 0 0; font-size: 11px; line-height: 1.4; color: #607076; }
.gco-next-step { padding: 11px 12px; background: #fff7e9; border-radius: 10px; border-left: 3px solid #ffb437; }

@media (max-width: 600px) {
    .gco-ai-resize-handle { display: none !important; }
    #gco-ai-launcher { width: 66px; height: 66px; }
    #gco-ai-chat { height: min(600px, calc(100vh - 20px)); }
}

/* =========================================================
   GCO AI Growth Concierge V3
   Responsive window, chat history, attachments, fullscreen
   ========================================================= */

#gco-ai-root [hidden] { display: none !important; }

#gco-ai-chat {
    width: min(430px, calc(100vw - 24px));
    height: min(660px, calc(100vh - 30px));
    height: min(660px, calc(100dvh - 30px));
    min-height: 420px;
}

.gco-ai-header {
    min-height: 68px;
    padding: 12px 12px;
    gap: 8px;
    flex: 0 0 auto;
}

.gco-ai-header-left {
    min-width: 0;
    flex: 1;
}

.gco-ai-header-copy { min-width: 0; }
.gco-ai-title,
.gco-ai-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gco-ai-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.gco-ai-header-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    touch-action: manipulation;
}

.gco-ai-header-icon:hover,
.gco-ai-header-icon:focus-visible {
    background: rgba(255,255,255,.12);
    outline: none;
}

.gco-ai-back {
    flex: 0 0 42px;
    font-size: 27px;
}

#gco-ai-new-chat { font-size: 27px; }
#gco-ai-fullscreen { font-size: 21px; }
#gco-ai-close { font-size: 29px; }

#gco-ai-messages {
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/* Fullscreen on desktop/tablet */
#gco-ai-chat.gco-ai-fullscreen {
    left: 16px !important;
    top: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    border-radius: 20px;
}

#gco-ai-chat.gco-ai-fullscreen #gco-ai-messages,
#gco-ai-chat.gco-ai-fullscreen .gco-ai-chat-list {
    padding-left: clamp(16px, 4vw, 56px);
    padding-right: clamp(16px, 4vw, 56px);
}

/* Chat history/list screen */
.gco-ai-chat-list {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.gco-ai-new-chat-card,
.gco-ai-chat-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    background: #fff;
    color: #24373d;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.gco-ai-new-chat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e6ecee;
}

.gco-ai-new-chat-card:hover,
.gco-ai-chat-row:hover { background: #f6fbfb; }

.gco-ai-new-chat-plus {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gco-accent);
    color: #fff;
    font-size: 25px;
}

.gco-ai-new-chat-card strong,
.gco-ai-new-chat-card small { display: block; }
.gco-ai-new-chat-card strong { font-size: 14px; }
.gco-ai-new-chat-card small { margin-top: 3px; color: #738086; font-size: 11px; }

.gco-ai-chat-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f2;
}

.gco-ai-chat-row-active { background: #f3fbfb; }

.gco-ai-chat-row-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5f9fa;
    color: var(--gco-accent-dark);
    font-size: 10px;
    font-weight: 800;
}

.gco-ai-chat-row-copy {
    min-width: 0;
    display: block;
}

.gco-ai-chat-row-title,
.gco-ai-chat-row-preview {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gco-ai-chat-row-title {
    color: #263c43;
    font-size: 13px;
    font-weight: 700;
}

.gco-ai-chat-row-preview {
    margin-top: 4px;
    color: #63747a;
    font-size: 11px;
}

.gco-ai-chat-row-time {
    align-self: start;
    padding-top: 2px;
    color: #7f8b90;
    font-size: 10px;
    white-space: nowrap;
}

.gco-ai-chat-delete {
    width: 34px;
    height: 34px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    opacity: 1;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.gco-ai-chat-delete:hover,
.gco-ai-chat-delete:focus-visible {
    background: #fff1f2;
    color: #e5484d;
    transform: scale(1.06);
    outline: none;
}

.gco-ai-chat-delete:active {
    transform: scale(0.94);
}

.gco-ai-chat-delete svg {
    display: block;
    pointer-events: none;
}

/* Attachment composer */
.gco-ai-attachment-tray {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 8px 10px 0;
    background: #fff;
    border-top: 1px solid #edf1f2;
    -webkit-overflow-scrolling: touch;
}

.gco-ai-attachment-chip {
    min-width: 0;
    max-width: 235px;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid #d9e5e7;
    border-radius: 11px;
    background: #f7fbfb;
}

.gco-ai-attachment-name { min-width: 0; }
.gco-ai-attachment-name strong,
.gco-ai-attachment-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gco-ai-attachment-name strong { color: #263c43; font-size: 10px; max-width: 160px; }
.gco-ai-attachment-name small { margin-top: 2px; color: #77878c; font-size: 9px; }
.gco-ai-attachment-chip button {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #65777c;
    cursor: pointer;
    font-size: 18px;
}
.gco-ai-attachment-chip button:hover { background: #e7eff0; }

.gco-ai-input-area {
    flex: 0 0 auto;
    min-height: 66px;
    gap: 6px;
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.gco-ai-circle-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}

.gco-ai-secondary-button { background: #edf2f3; color: #43565c; }
#gco-ai-attach { font-size: 18px; }
#gco-ai-mic { font-size: 17px; }
#gco-ai-input {
    min-height: 44px;
    padding: 10px 13px;
    font-size: 16px; /* avoids iOS auto-zoom */
}

/* Desktop resize handles. Invisible hit areas show resize cursors at every edge/corner. */
.gco-ai-resize-handle {
    position: absolute;
    z-index: 30;
    display: block;
    pointer-events: auto;
    touch-action: none;
}
.gco-ai-resize-n,
.gco-ai-resize-s { left: 12px; right: 12px; height: 8px; }
.gco-ai-resize-e,
.gco-ai-resize-w { top: 12px; bottom: 12px; width: 8px; }
.gco-ai-resize-n { top: 0; cursor: ns-resize; }
.gco-ai-resize-s { bottom: 0; cursor: ns-resize; }
.gco-ai-resize-e { right: 0; cursor: ew-resize; }
.gco-ai-resize-w { left: 0; cursor: ew-resize; }
.gco-ai-resize-ne,
.gco-ai-resize-nw,
.gco-ai-resize-se,
.gco-ai-resize-sw { width: 16px; height: 16px; }
.gco-ai-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.gco-ai-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.gco-ai-resize-se { right: 0; bottom: 0; cursor: nwse-resize; }
.gco-ai-resize-sw { left: 0; bottom: 0; cursor: nesw-resize; }

/* Small visible grip in the bottom-right corner. */
.gco-ai-resize-se::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(17,47,55,.45);
    border-bottom: 2px solid rgba(17,47,55,.45);
    border-radius: 1px;
    opacity: .55;
}
.gco-ai-resize-se:hover::after { opacity: 1; }
body.gco-ai-resizing {
    user-select: none !important;
    cursor: default;
}
#gco-ai-chat.gco-ai-is-resizing { transition: none !important; }
#gco-ai-chat.gco-ai-fullscreen .gco-ai-resize-handle { display: none !important; }

/* Tablet */
@media (max-width: 900px) and (min-width: 601px) {
    #gco-ai-chat:not(.gco-ai-fullscreen) {
        width: min(430px, calc(100vw - 24px));
        height: min(680px, calc(100dvh - 24px));
    }
}

/* Mobile: compact default panel with an optional true fullscreen mode. */
@media (max-width: 600px) {
    #gco-ai-launcher {
        width: 62px;
        height: 62px;
        left: auto !important;
        top: auto !important;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
    }

    #gco-ai-launcher svg { width: 50px; height: 50px; }

    /* Default mobile window: intentionally shorter than the viewport. */
    #gco-ai-chat:not(.gco-ai-fullscreen) {
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        height: min(520px, 68dvh) !important;
        max-height: calc(100dvh - 24px);
        min-height: min(390px, calc(100dvh - 24px));
        border-radius: 18px;
    }

    /* Fullscreen is only used after the visitor taps the fullscreen control. */
    #gco-ai-chat.gco-ai-fullscreen {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 0;
    }

    .gco-ai-header {
        min-height: 60px;
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: 8px;
        padding-left: 6px;
        padding-right: 6px;
        gap: 4px;
    }

    /* Keep room for Back + Fullscreen + Close on narrow screens. */
    .gco-ai-header-avatar { display: none; }
    .gco-ai-header-left { gap: 0; min-width: 0; }
    .gco-ai-header-copy { min-width: 0; }
    .gco-ai-title { font-size: 14px; }
    .gco-ai-subtitle { font-size: 9px; max-width: 132px; }
    .gco-ai-header-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
    }
    .gco-ai-back { flex-basis: 36px; font-size: 24px; }
    #gco-ai-fullscreen { font-size: 19px; }
    #gco-ai-close { font-size: 26px; }
    .gco-ai-header-actions { gap: 0; }

    /* Explicitly preserve the requested mobile controls. */
    #gco-ai-back:not([hidden]),
    #gco-ai-fullscreen,
    #gco-ai-close {
        display: inline-flex !important;
    }

    #gco-ai-messages { padding: 11px 12px; }
    .gco-ai-message { max-width: 94%; font-size: 13px; }
    .gco-ai-quick-action,
    .gco-ai-context-action { min-height: 36px; padding: 7px 10px; }

    .gco-ai-input-area {
        min-height: 60px;
        padding: 7px 8px;
        padding-bottom: max(7px, env(safe-area-inset-bottom));
        gap: 5px;
    }

    .gco-ai-circle-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex-basis: 40px;
    }

    /* Attachment + microphone + send remain visible on mobile. */
    #gco-ai-attach,
    #gco-ai-mic,
    #gco-ai-send {
        display: flex !important;
    }

    #gco-ai-input {
        min-width: 64px;
        min-height: 40px;
        padding: 8px 11px;
    }

    .gco-health-grid { grid-template-columns: 1fr 1fr; }
    .gco-ai-chat-row {
        grid-template-columns: 38px minmax(0, 1fr) 34px;
        padding: 12px 11px;
    }
    .gco-ai-chat-row-time { display: none; }
    .gco-ai-chat-delete { width: 30px; height: 30px; }
}

@media (max-width: 390px) {
    .gco-ai-subtitle { max-width: 104px; }
    .gco-ai-title { font-size: 13px; }
    .gco-ai-header-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }
    .gco-ai-back { flex-basis: 34px; }
    #gco-ai-attach,
    #gco-ai-mic,
    #gco-ai-send {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        flex-basis: 38px;
    }
}

/* Keep the launcher visually alive without moving its hit target. */
#gco-ai-launcher { animation: gco-ai-launcher-glow 2.8s ease-in-out infinite; }
@keyframes gco-ai-launcher-glow {
    0%, 100% { box-shadow: 0 12px 34px rgba(0,0,0,.30), 0 0 0 4px rgba(255,255,255,.92); }
    50% { box-shadow: 0 14px 38px rgba(0,0,0,.34), 0 0 0 6px rgba(24,171,177,.18); }
}
@media (prefers-reduced-motion: reduce) {
    #gco-ai-launcher,
    #gco-ai-chat.gco-open,
    .gco-ai-listening,
    .gco-ai-guided-highlight { animation: none !important; }
}
#gco-ai-launcher.gco-ai-launcher-hidden { display: none !important; }
#gco-ai-launcher.gco-ai-launcher-hidden {
    display: flex !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ==================================================
   GCO MASCOT LAUNCHER — STAGE 1 + STAGE 2
   Stage 1: approved mascot artwork
   Stage 2: true GLB/Three.js model when present
================================================== */

#gco-ai-launcher {
    width: 158px;
    height: 205px;
    left: calc(100vw - 178px);
    top: calc(100vh - 225px);
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    animation: none;
    cursor: grab;
}

#gco-ai-launcher:hover {
    box-shadow: none;
}

#gco-ai-launcher:active {
    cursor: grabbing;
}

#gco-ai-mascot-shell {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 146px;
    height: 177px;
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
    transform-origin: 50% 100%;
    animation: gco-mascot-idle 3.4s ease-in-out infinite;
}

#gco-ai-mascot-image,
#gco-ai-mascot-3d-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#gco-ai-mascot-image {
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity .25s ease;
}

#gco-ai-mascot-3d-stage {
    opacity: 0;
    transition: opacity .4s ease;
    overflow: visible;
}

#gco-ai-mascot-3d-stage canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* While a cached 3D model starts (max 1.2 s) the picture stays hidden; once 3D is ready the
   picture fades out as the 3D model fades in (same character, so it reads as one figure). */
#gco-ai-launcher.gco-ai-3d-pending #gco-ai-mascot-image {
    opacity: 0;
    transition: none;
}
#gco-ai-launcher.gco-ai-using-3d #gco-ai-mascot-image {
    opacity: 0;
    transition: opacity .4s ease;
}

#gco-ai-launcher.gco-ai-using-3d #gco-ai-mascot-3d-stage {
    opacity: 1;
}

/* The 3D model animates itself: drop the 2D bob/wiggle and the costly drop-shadow filter
   (the 3D scene draws its own contact shadow). The stage is taller than the shell so a
   raised waving arm is never clipped. */
#gco-ai-launcher.gco-ai-using-3d #gco-ai-mascot-shell,
#gco-ai-launcher.gco-ai-using-3d #gco-ai-mascot-shell[class*="gco-mascot-"] {
    animation: none;
    filter: none;
}

#gco-ai-launcher.gco-ai-using-3d #gco-ai-mascot-3d-stage {
    inset: -14px -10px 0 -10px;
    width: auto;
    height: auto;
}

/* When 3D will be used, the picture is a snapshot of the 3D stage: it sits in exactly the
   stage's box, without the 2D bob or shadow, so the 3D model fades in over the same figure. */
#gco-ai-launcher.gco-ai-3d-planned #gco-ai-mascot-shell,
#gco-ai-launcher.gco-ai-3d-planned #gco-ai-mascot-shell[class*="gco-mascot-"] {
    animation: none;
    filter: none;
}

#gco-ai-launcher.gco-ai-3d-planned #gco-ai-mascot-3d-stage {
    inset: -14px -10px 0 -10px;
    width: auto;
    height: auto;
}

/* An <img> keeps its natural size with width/height auto, so it gets the same box explicitly. */
#gco-ai-launcher.gco-ai-3d-planned #gco-ai-mascot-image {
    inset: auto;
    top: -14px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 14px);
}

.gco-ai-mascot-label {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    min-width: 118px;
    padding: 8px 14px;
    border: 1px solid rgba(17, 47, 55, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #123d46;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .13);
    pointer-events: none;
    backdrop-filter: blur(6px);
}

@keyframes gco-mascot-idle {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    50% { transform: translateX(-50%) translateY(-5px) rotate(-.6deg); }
}

#gco-ai-mascot-shell.gco-mascot-wave {
    animation: gco-mascot-wave 1.15s ease-in-out 1;
}

#gco-ai-mascot-shell.gco-mascot-think {
    animation: gco-mascot-think 1.2s ease-in-out 1;
}

#gco-ai-mascot-shell.gco-mascot-point {
    animation: gco-mascot-point 1.05s ease-in-out 1;
}

#gco-ai-mascot-shell.gco-mascot-celebrate {
    animation: gco-mascot-celebrate 1.15s ease-in-out 1;
}

@keyframes gco-mascot-wave {
    0%, 100% { transform: translateX(-50%) rotate(0) scale(1); }
    35% { transform: translateX(-50%) rotate(-2deg) scale(1.04); }
    70% { transform: translateX(-50%) rotate(1.5deg) scale(1.02); }
}

@keyframes gco-mascot-think {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-4px) rotate(-2deg); }
    70% { transform: translateX(-50%) translateY(-2px) rotate(1deg); }
}

@keyframes gco-mascot-point {
    0%, 100% { transform: translateX(-50%) translateX(0); }
    45% { transform: translateX(-50%) translateX(-8px) scale(1.03); }
}

@keyframes gco-mascot-celebrate {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    35% { transform: translateX(-50%) translateY(-14px) scale(1.06) rotate(-1deg); }
    70% { transform: translateX(-50%) translateY(-5px) scale(1.03) rotate(1deg); }
}

@media (max-width: 600px) {
    #gco-ai-launcher {
        width: 112px;
        height: 152px;
        left: calc(100vw - 126px);
        top: calc(100vh - 170px);
    }

    #gco-ai-mascot-shell {
        width: 104px;
        height: 127px;
        bottom: 25px;
    }

    .gco-ai-mascot-label {
        min-width: 94px;
        padding: 7px 10px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gco-ai-mascot-shell,
    #gco-ai-mascot-shell[class*="gco-mascot-"] {
        animation: none !important;
    }
}


/* =========================================================
   CLICK0 UI REFRESH 0.5.0 — approved 2026-10-09
   Pure frontend redesign. Existing assistant/SEO/CRM logic is preserved.
   ========================================================= */

#gco-ai-root {
    --gco-navy: #07333d;
    --gco-navy-2: #0b4650;
    --gco-teal: #16aeb4;
    --gco-teal-dark: #07919a;
    --gco-surface: #f6f9fb;
    --gco-text: #122239;
    --gco-muted: #718096;
    --gco-line: #e7edf1;
    --gco-shadow: 0 28px 80px rgba(6, 38, 47, .23);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

#gco-ai-chat {
    width: min(520px, calc(100vw - 28px));
    height: min(720px, calc(100dvh - 32px));
    min-height: 470px;
    border: 1px solid rgba(5, 48, 58, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--gco-shadow);
}

.gco-ai-header {
    position: relative;
    min-height: 104px;
    padding: 18px 18px 17px;
    gap: 12px;
    background:
        radial-gradient(circle at 85% -25%, rgba(20, 178, 186, .38), transparent 42%),
        linear-gradient(135deg, #062f39 0%, #063d47 58%, #07535c 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.gco-ai-header::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -86px;
    width: 250px;
    height: 170px;
    border-radius: 50%;
    border: 1px solid rgba(63, 224, 229, .12);
    box-shadow: 0 0 0 28px rgba(24,171,177,.05), 0 0 0 62px rgba(24,171,177,.035);
    pointer-events: none;
}

.gco-ai-header-left,
.gco-ai-header-actions,
.gco-ai-back { position: relative; z-index: 1; }

.gco-ai-header-left { gap: 12px; }

.gco-ai-header-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #30c9ce, #07929b);
    border: 2px solid rgba(255,255,255,.72);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
}

.gco-ai-header-avatar img {
    width: 100%;
    height: 118%;
    object-fit: cover;
    object-position: center 8%;
    transform: scale(1.38);
    transform-origin: center top;
}

.gco-ai-online-dot {
    position: absolute;
    right: 1px;
    bottom: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #27df91;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(39,223,145,.18);
}

.gco-ai-title {
    color: #fff;
    font-size: 21px;
    font-weight: 780;
    letter-spacing: -.25px;
}

.gco-ai-subtitle {
    margin-top: 2px;
    color: rgba(255,255,255,.86);
    font-size: 12.5px;
    font-weight: 520;
}

.gco-ai-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    color: rgba(255,255,255,.91);
    background: rgba(12, 108, 116, .56);
    font-size: 10.5px;
    line-height: 1;
}

.gco-ai-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22dc8c;
    box-shadow: 0 0 0 3px rgba(34,220,140,.12);
}

.gco-ai-header-actions { gap: 7px; }

.gco-ai-header-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.075);
    color: #fff;
    transition: transform .18s ease, background .18s ease;
}

.gco-ai-header-icon:hover,
.gco-ai-header-icon:focus-visible {
    background: rgba(255,255,255,.15);
    transform: translateY(-1px);
}

.gco-ai-header-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gco-ai-back {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: transparent;
}

.gco-ai-back svg { width: 22px; height: 22px; }

#gco-ai-messages {
    padding: 22px 20px 18px;
    background:
        radial-gradient(circle at 92% 12%, rgba(37, 191, 198, .045), transparent 27%),
        #f7fafb;
    scrollbar-color: rgba(7, 83, 92, .18) transparent;
}

.gco-ai-message-row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    width: 100%;
    margin-bottom: 15px;
}

.gco-ai-message-row-user { justify-content: flex-end; }
.gco-ai-message-row-assistant { justify-content: flex-start; }

.gco-ai-message-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-self: flex-start;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #dffafa, #b7eef0);
    border: 1px solid rgba(24,171,177,.18);
    box-shadow: 0 4px 12px rgba(9,79,86,.10);
}

.gco-ai-message-avatar img {
    width: 100%;
    height: 118%;
    object-fit: cover;
    object-position: center 8%;
    transform: scale(1.42);
    transform-origin: center top;
}

.gco-ai-message-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(84%, 390px);
}

.gco-ai-message-row-user .gco-ai-message-stack { align-items: flex-end; }

.gco-ai-message {
    max-width: 100%;
    margin: 0;
    padding: 13px 15px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -.04px;
}

.gco-ai-message-assistant {
    color: #15263a;
    background: #fff;
    border: 1px solid rgba(14, 55, 65, .055);
    border-bottom-left-radius: 6px;
    box-shadow: 0 8px 22px rgba(24, 47, 61, .065);
}

.gco-ai-message-user {
    color: #fff;
    background: linear-gradient(135deg, #1bb4ba 0%, #119da6 100%);
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 158, 167, .20);
}

.gco-ai-message-meta {
    margin-top: 5px;
    padding: 0 4px;
    color: #8a98a8;
    font-size: 9.5px;
    line-height: 1;
}

.gco-ai-message-row-user .gco-ai-message-meta { color: #7a8b99; }
.gco-ai-thinking-row .gco-ai-message { color: #6b7c89; font-style: italic; }

.gco-ai-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 18px 43px;
}

.gco-ai-action-card {
    position: relative;
    width: 100%;
    min-height: 88px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 18px;
    text-align: left;
    color: #15263a;
    box-shadow: 0 8px 22px rgba(21, 57, 69, .06), inset 0 0 0 1px rgba(9,67,78,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gco-ai-action-card:hover,
.gco-ai-action-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(24,171,177,.25);
    box-shadow: 0 12px 28px rgba(21, 57, 69, .10), inset 0 0 0 1px rgba(9,67,78,.04);
    outline: none;
}

.gco-ai-action-search { background: linear-gradient(135deg, #effdfc, #e6fafa); }
.gco-ai-action-chart { background: linear-gradient(135deg, #f0f7ff, #e8f2ff); }
.gco-ai-action-services { background: linear-gradient(135deg, #fbf5ff, #f4edff); }
.gco-ai-action-chat { background: linear-gradient(135deg, #fff9ed, #fff4e2); }

.gco-ai-action-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}

.gco-ai-action-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gco-ai-action-search .gco-ai-action-icon { color: #0799a2; background: #c9f4f2; }
.gco-ai-action-chart .gco-ai-action-icon { color: #2878e6; background: #dcecff; }
.gco-ai-action-services .gco-ai-action-icon { color: #8644df; background: #eadbff; }
.gco-ai-action-chat .gco-ai-action-icon { color: #ee9417; background: #ffe8bd; }

.gco-ai-action-copy { min-width: 0; display: block; }
.gco-ai-action-copy strong { display: block; color: #122239; font-size: 12.5px; font-weight: 760; }
.gco-ai-action-copy small { display: block; margin-top: 4px; color: #7d8b9c; font-size: 10.5px; line-height: 1.25; }
.gco-ai-action-arrow { color: #20344c; font-size: 26px; line-height: 1; font-weight: 300; }

.gco-ai-context-actions {
    gap: 7px;
    margin: 0 0 15px 43px;
}

.gco-ai-context-action {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #c7e8e9;
    border-radius: 999px;
    background: #f0fbfb;
    color: #087f88;
    font-size: 11px;
    font-weight: 650;
}

.gco-ai-input-area {
    min-height: auto;
    padding: 12px 14px 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid #edf1f3;
    background: rgba(255,255,255,.98);
}

.gco-ai-composer-shell {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gco-ai-circle-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.gco-ai-circle-button:hover:not(:disabled) { transform: translateY(-1px); }
.gco-ai-circle-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.gco-ai-secondary-button {
    background: #eef3f5;
    color: #5f7082;
}

.gco-ai-secondary-button:hover:not(:disabled) { background: #e3edef; color: #24545d; }

#gco-ai-input {
    min-height: 46px;
    padding: 10px 15px;
    border: 1.5px solid #d5e0e5;
    border-radius: 999px;
    background: #fff;
    color: #183047;
    font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(15,58,68,.025);
    transition: border-color .16s ease, box-shadow .16s ease;
}

#gco-ai-input::placeholder { color: #7b8797; }
#gco-ai-input:focus {
    border-color: #21aeb5;
    box-shadow: 0 0 0 3px rgba(24,171,177,.10);
}

#gco-ai-send {
    background: linear-gradient(145deg, #17b4ba, #0799a2);
    color: #fff;
    box-shadow: 0 8px 16px rgba(6, 153, 162, .22);
}

#gco-ai-send:hover:not(:disabled) { box-shadow: 0 10px 21px rgba(6,153,162,.29); }

.gco-ai-attachment-tray {
    padding: 8px 14px 0;
    border-top: 1px solid #edf1f3;
    background: #fff;
}

.gco-ai-attachment-chip {
    border-color: #dce8eb;
    background: #f5fafb;
    border-radius: 13px;
}

/* Modernise existing audit / growth cards without changing their data logic. */
.gco-insight-card,
.gco-growth-card {
    margin-left: 43px;
    border-color: #e6edf0;
    border-radius: 19px;
    box-shadow: 0 10px 28px rgba(20,51,64,.08);
}
.gco-score-hero { border-radius: 14px; background: linear-gradient(135deg, #eafafa, #f4fdfd); }
.gco-card-actions button { border-radius: 12px; }

/* Chat list follows the same new visual language. */
.gco-ai-chat-list { background: #f8fafb; padding: 12px; }
.gco-ai-new-chat-card,
.gco-ai-chat-row {
    border: 1px solid #e8eef1;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 8px;
    box-shadow: 0 5px 15px rgba(20,52,63,.035);
}
.gco-ai-new-chat-card { border-bottom: 1px solid #e8eef1; }
.gco-ai-chat-row { border-bottom: 1px solid #e8eef1; }
.gco-ai-new-chat-card:hover,
.gco-ai-chat-row:hover { background: #f3fbfb; border-color: #cfeaec; }
.gco-ai-chat-row-active { background: #ecfbfb; border-color: #bfe6e8; }
.gco-ai-chat-row-avatar,
.gco-ai-new-chat-plus {
    background: linear-gradient(145deg, #d9f8f9, #c5eff1);
    color: #087e87;
}

/* Desktop fullscreen keeps a premium inset instead of touching browser edges. */
#gco-ai-chat.gco-ai-fullscreen {
    border-radius: 28px;
    box-shadow: 0 32px 100px rgba(6, 38, 47, .28);
}

@media (max-width: 600px) {
    #gco-ai-chat:not(.gco-ai-fullscreen) {
        height: min(650px, 82dvh) !important;
        min-height: min(470px, calc(100dvh - 24px));
        border-radius: 24px;
    }

    .gco-ai-header {
        min-height: 86px;
        padding: max(12px, env(safe-area-inset-top)) 10px 12px;
        gap: 6px;
    }

    .gco-ai-header-avatar {
        display: block;
        width: 46px;
        height: 46px;
        min-width: 46px;
        flex-basis: 46px;
    }

    .gco-ai-title { font-size: 17px; }
    .gco-ai-subtitle { max-width: 130px; font-size: 10.5px; }
    .gco-ai-status { margin-top: 5px; padding: 4px 7px; font-size: 8.5px; }

    .gco-ai-header-actions { gap: 3px; }
    .gco-ai-header-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }
    .gco-ai-back { flex-basis: 34px; }
    .gco-ai-header-icon svg { width: 17px; height: 17px; }

    #gco-ai-messages { padding: 16px 12px 13px; }
    .gco-ai-message-row { gap: 7px; margin-bottom: 13px; }
    .gco-ai-message-avatar { width: 28px; height: 28px; flex-basis: 28px; }
    .gco-ai-message-stack { max-width: 88%; }
    .gco-ai-message { padding: 11px 13px; font-size: 12.5px; }

    .gco-ai-action-grid {
        margin-left: 35px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .gco-ai-action-card {
        min-height: 74px;
        grid-template-columns: 36px minmax(0, 1fr) 14px;
        gap: 7px;
        padding: 9px;
        border-radius: 15px;
    }
    .gco-ai-action-icon { width: 36px; height: 36px; border-radius: 12px; }
    .gco-ai-action-icon svg { width: 20px; height: 20px; }
    .gco-ai-action-copy strong { font-size: 11px; }
    .gco-ai-action-copy small { font-size: 9px; }
    .gco-ai-action-arrow { font-size: 21px; }

    .gco-ai-context-actions { margin-left: 35px; }

    .gco-ai-input-area { padding: 9px 9px max(9px, env(safe-area-inset-bottom)); }
    .gco-ai-composer-shell { gap: 5px; }
    .gco-ai-circle-button {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        flex-basis: 38px;
    }
    .gco-ai-circle-button svg { width: 17px; height: 17px; }
    #gco-ai-input { min-height: 40px; padding: 8px 11px; font-size: 16px; }

    .gco-insight-card,
    .gco-growth-card { margin-left: 35px; }
}

@media (max-width: 390px) {
    .gco-ai-header-avatar { width: 40px; height: 40px; min-width: 40px; flex-basis: 40px; }
    .gco-ai-title { font-size: 15px; }
    .gco-ai-subtitle { max-width: 100px; font-size: 9px; }
    .gco-ai-status { display: none; }
    .gco-ai-action-grid { grid-template-columns: 1fr; margin-left: 35px; }
    .gco-ai-action-card { min-height: 66px; }
}


/* =========================================================
   Clicky UI 0.6.0 — Go Click On website-native refresh
   Keeps existing behaviour; refines visual language only.
   ========================================================= */

#gco-ai-root {
    --gco-brand-blue: #174e9f;
    --gco-brand-blue-dark: #103968;
    --gco-brand-teal: #18abb1;
    --gco-brand-ink: #18304a;
    --gco-brand-muted: #68798a;
    --gco-surface: #ffffff;
    --gco-surface-soft: #f6f9fb;
    --gco-line: #e2e8ee;
}

#gco-ai-chat {
    border: 1px solid rgba(20, 63, 106, .12);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(14, 47, 81, .22);
}

.gco-ai-header {
    min-height: 78px;
    padding: 12px 13px;
    background:
        linear-gradient(120deg, rgba(24,171,177,.11), transparent 40%),
        linear-gradient(135deg, #103968 0%, #174e9f 72%, #147f99 125%);
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.gco-ai-header-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-basis: 42px;
    border: 2px solid rgba(255,255,255,.72);
    background: #fff;
    box-shadow: 0 5px 14px rgba(0,0,0,.15);
}

.gco-ai-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.gco-ai-title {
    font-size: 16px;
    font-weight: 760;
    letter-spacing: -.15px;
}

.gco-ai-subtitle {
    margin-top: 1px;
    font-size: 10.5px;
    color: rgba(255,255,255,.88);
    opacity: 1;
}

.gco-ai-brandline {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .2px;
    color: rgba(255,255,255,.68);
}

.gco-ai-status {
    margin-top: 4px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.90);
    font-size: 8.5px;
}

.gco-ai-status span {
    background: #34df9c;
    box-shadow: 0 0 0 3px rgba(52,223,156,.14);
}

.gco-ai-header-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
}

.gco-ai-header-icon:hover,
.gco-ai-header-icon:focus-visible {
    background: rgba(255,255,255,.14);
}

#gco-ai-messages {
    padding: 17px 15px 14px;
    background:
        linear-gradient(180deg, #fbfcfd 0%, #f7fafc 100%);
}

.gco-ai-message-row {
    margin-bottom: 12px;
}

.gco-ai-message-avatar {
    box-shadow: 0 4px 12px rgba(21, 75, 119, .10);
}

.gco-ai-message-assistant {
    color: #1b2f45;
    border: 1px solid #e5ebf0;
    border-bottom-left-radius: 7px;
    box-shadow: 0 5px 16px rgba(30, 67, 98, .055);
}

.gco-ai-message-user {
    background: linear-gradient(135deg, #174e9f 0%, #1679a3 65%, #18abb1 115%);
    box-shadow: 0 7px 18px rgba(23, 78, 159, .18);
}

.gco-ai-message-meta {
    color: #8a98a6;
}

/* Site-aligned primary actions: restrained white cards rather than rainbow tiles. */
.gco-ai-action-grid {
    gap: 8px;
    margin: 6px 0 17px 43px;
}

.gco-ai-action-card {
    min-height: 78px;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 9px;
    padding: 11px;
    border: 1px solid #e1e8ee;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 4px 13px rgba(22, 63, 99, .045);
}

.gco-ai-action-card:hover,
.gco-ai-action-card:focus-visible {
    transform: translateY(-1px);
    border-color: #b9d8e8;
    box-shadow: 0 8px 20px rgba(22, 63, 99, .085);
}

.gco-ai-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--gco-brand-blue) !important;
    background: linear-gradient(145deg, #edf5fb, #e8f8f8) !important;
}

.gco-ai-action-icon svg {
    width: 22px;
    height: 22px;
}

.gco-ai-action-copy strong {
    color: #17324f;
    font-size: 11.8px;
    font-weight: 760;
}

.gco-ai-action-copy small {
    margin-top: 3px;
    color: #728293;
    font-size: 9.8px;
}

.gco-ai-action-arrow {
    color: #174e9f;
    font-size: 22px;
}

/* Expandable service chooser mirrors the live website's service categories. */
.gco-ai-service-menu {
    margin: 0 0 16px 43px;
    padding: 12px;
    border: 1px solid #dfe8ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(19, 59, 91, .07);
}

.gco-ai-service-menu-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.gco-ai-service-menu-head strong {
    display: block;
    color: #17324f;
    font-size: 12px;
    font-weight: 760;
}

.gco-ai-service-menu-head small {
    display: block;
    margin-top: 2px;
    color: #7a8997;
    font-size: 9.5px;
}

.gco-ai-service-menu-close {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f7;
    color: #607284;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.gco-ai-service-menu-close:hover { background: #e8eff3; color: #17324f; }

.gco-ai-service-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.gco-ai-service-menu-item {
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid #edf1f4;
    border-radius: 11px;
    background: #fbfcfd;
    color: #243b52;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.gco-ai-service-menu-item:hover,
.gco-ai-service-menu-item:focus-visible {
    border-color: #c9e0ea;
    background: #f3f9fb;
    transform: translateX(1px);
    outline: none;
}

.gco-ai-service-menu-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #174e9f;
    background: #eaf4f8;
}

.gco-ai-service-menu-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gco-ai-service-menu-item > span:nth-child(2) {
    font-size: 10.5px;
    font-weight: 680;
}

.gco-ai-service-menu-arrow { color: #174e9f; font-size: 18px; }

.gco-ai-context-action {
    border-color: #d0e1ea;
    background: #f5f9fb;
    color: #174e9f;
}

.gco-ai-context-action:hover { background: #edf6f9; }

/* Composer: quieter, closer to the website's white/blue visual system. */
.gco-ai-input-area {
    padding: 10px 12px 12px;
    border-top: 1px solid #e5ebef;
    background: #fff;
}

.gco-ai-circle-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-basis: 40px;
}

.gco-ai-secondary-button {
    color: #607487;
    background: #f1f5f7;
}

.gco-ai-secondary-button:hover:not(:disabled) {
    color: #174e9f;
    background: #e9f2f6;
}

#gco-ai-input {
    min-height: 44px;
    border-color: #d7e1e8;
    color: #20384f;
}

#gco-ai-input:focus {
    border-color: #4ba7c9;
    box-shadow: 0 0 0 3px rgba(23, 78, 159, .08);
}

#gco-ai-send {
    background: linear-gradient(145deg, #174e9f, #167ea3);
    box-shadow: 0 7px 15px rgba(23,78,159,.20);
}

#gco-ai-send:hover:not(:disabled) {
    box-shadow: 0 9px 19px rgba(23,78,159,.27);
}

/* Audit/growth cards use the same restrained Go Click On surfaces. */
.gco-insight-card,
.gco-growth-card {
    border-color: #dfe7ed;
    box-shadow: 0 8px 22px rgba(20, 62, 96, .07);
}

.gco-score-hero,
.gco-growth-goal {
    background: linear-gradient(135deg, #eef5fb, #edf9f9);
}

.gco-card-actions button {
    border-color: #174e9f;
    color: #174e9f;
}

.gco-card-actions button:first-child {
    background: #174e9f;
    border-color: #174e9f;
}

.gco-plan-number { background: #174e9f; }

/* Chat history styling also follows the site-native palette. */
.gco-ai-chat-list { background: #f7f9fb; }
.gco-ai-new-chat-card,
.gco-ai-chat-row { border-color: #e2e9ee; }
.gco-ai-new-chat-card:hover,
.gco-ai-chat-row:hover { background: #f4f8fb; border-color: #c8dce8; }
.gco-ai-chat-row-active { background: #eef6fa; border-color: #bcd7e6; }
.gco-ai-chat-row-avatar,
.gco-ai-new-chat-plus {
    background: linear-gradient(145deg, #edf5fb, #e4f4f4);
    color: #174e9f;
}

@media (max-width: 600px) {
    .gco-ai-header {
        min-height: 80px;
        padding: max(10px, env(safe-area-inset-top)) 9px 10px;
    }

    .gco-ai-brandline { font-size: 8px; }
    .gco-ai-status { display: none; }

    .gco-ai-action-grid,
    .gco-ai-service-menu,
    .gco-ai-context-actions,
    .gco-insight-card,
    .gco-growth-card {
        margin-left: 35px;
    }

    .gco-ai-action-card {
        min-height: 70px;
        grid-template-columns: 36px minmax(0, 1fr) 14px;
        padding: 9px;
    }

    .gco-ai-action-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .gco-ai-action-copy strong { font-size: 10.7px; }
    .gco-ai-action-copy small { font-size: 8.8px; }

    .gco-ai-service-menu { padding: 10px; }
    .gco-ai-service-menu-item { padding: 8px; }
}

@media (max-width: 390px) {
    .gco-ai-action-grid { grid-template-columns: 1fr; }
    .gco-ai-action-card { min-height: 60px; }
}



/* =========================================================
   Clicky UI 0.10.0 — "Bold gradient"
   A vibrant Go Click On blue to violet header, a welcome screen with a big headline and a floating
   call-to-action card, pill chips, white bubbles on a soft blue-grey canvas and a floating composer.
   The gradient runs horizontally so the header and the welcome hero join without a seam.
   Behaviour is unchanged; everything is scoped to #gco-ai-root.
   ========================================================= */

#gco-ai-root {
    --gco-ink: #0D0925;
    --gco-blue: #1E66AB;
    --gco-indigo: #3B4FD8;
    --gco-violet: #7A3FD1;
    --gco-gradient: linear-gradient(90deg, #1E66AB 0%, #3B4FD8 55%, #7A3FD1 100%);
    --gco-canvas: #F4F7FB;
    --gco-line: #DCE3EE;
    --gco-text: #1F1B2D;
    --gco-muted: #5E6475;
    --gco-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --gco-radius: 14px;
    --gco-pill: 999px;
    --gco-shadow-card: 0 10px 30px rgba(30, 102, 171, .16);
    --gco-shadow-soft: 0 2px 10px rgba(13, 9, 37, .06);
}

/* ---- Window ---- */
#gco-ai-root #gco-ai-chat {
    border: 0;
    border-radius: 20px;
    background: var(--gco-canvas);
    box-shadow: 0 24px 60px rgba(13, 9, 37, .22), 0 0 0 1px rgba(13, 9, 37, .04);
    font-family: var(--gco-font);
    color: var(--gco-text);
}

/* ---- Header ---- */
#gco-ai-root .gco-ai-header {
    position: relative;
    min-height: 72px;
    padding: 14px 12px 14px 16px;
    background: var(--gco-gradient);
    border-bottom: 0;
    box-shadow: 0 6px 18px rgba(59, 79, 216, .18);
    z-index: 2;
}
#gco-ai-root #gco-ai-chat.gco-ai-welcome-mode .gco-ai-header { box-shadow: none; }
#gco-ai-root .gco-ai-header::before,
#gco-ai-root .gco-ai-header::after { display: none; }

#gco-ai-root .gco-ai-header-left { gap: 11px; flex: 1 1 auto; min-width: 0; }
#gco-ai-root .gco-ai-header-copy { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; }
#gco-ai-root .gco-ai-header-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-basis: 42px;
    border: 2px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    overflow: visible;
}
#gco-ai-root .gco-ai-header-avatar img { border-radius: 50%; object-fit: cover; }
#gco-ai-root .gco-ai-online-dot {
    width: 11px;
    height: 11px;
    right: -2px;
    bottom: -1px;
    background: #3FD47C;
    border: 2px solid var(--gco-indigo);
    box-shadow: none;
}
#gco-ai-root .gco-ai-title {
    font-family: var(--gco-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: #fff;
}
#gco-ai-root .gco-ai-subtitle {
    margin-top: 2px;
    font-family: var(--gco-font);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(255, 255, 255, .85);
    opacity: 1;
    max-width: none; /* older layers capped this at 100px on phones, cutting it off */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#gco-ai-root .gco-ai-brandline,
#gco-ai-root .gco-ai-status { display: none; }

#gco-ai-root .gco-ai-header-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    box-shadow: none;
}
#gco-ai-root .gco-ai-header-icon:hover { background: rgba(255, 255, 255, .16); color: #fff; }
#gco-ai-root .gco-ai-header-icon:focus-visible { outline: 2px solid #fff; outline-offset: 1px; background: rgba(255, 255, 255, .16); }
#gco-ai-root .gco-ai-header-icon svg { width: 19px; height: 19px; }

/* ---- Conversation canvas ---- */
#gco-ai-root #gco-ai-messages {
    padding: 18px 16px 12px;
    background: var(--gco-canvas);
}
#gco-ai-root #gco-ai-chat.gco-ai-welcome-mode #gco-ai-messages { padding: 0 0 12px; }

#gco-ai-root .gco-ai-message-row { margin-bottom: 14px; gap: 9px; }
#gco-ai-root .gco-ai-message-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--gco-shadow-soft);
}
#gco-ai-root .gco-ai-message-avatar img { border-radius: 50%; object-fit: cover; }
#gco-ai-root .gco-ai-message {
    padding: 11px 14px;
    font-family: var(--gco-font);
    font-size: 14.5px;
    line-height: 1.5;
    border-radius: 18px;
}
#gco-ai-root .gco-ai-message-assistant {
    background: #fff;
    border: 0;
    border-bottom-left-radius: 6px;
    color: var(--gco-text);
    box-shadow: var(--gco-shadow-soft);
}
#gco-ai-root .gco-ai-message-user {
    background: linear-gradient(135deg, var(--gco-blue), var(--gco-indigo));
    border: 0;
    border-bottom-right-radius: 6px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 79, 216, .22);
}
#gco-ai-root .gco-ai-message-meta { margin-top: 4px; font-size: 11px; color: #5F6677; }
#gco-ai-root .gco-ai-thinking-row .gco-ai-message { color: var(--gco-muted); font-style: italic; }

/* ---- Welcome screen ---- */
#gco-ai-root .gco-ai-welcome { display: flex; flex-direction: column; }
#gco-ai-root .gco-ai-welcome-hero {
    padding: 8px 22px 62px;
    background: var(--gco-gradient);
    color: #fff;
}
#gco-ai-root .gco-ai-welcome-kicker {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}
#gco-ai-root .gco-ai-welcome-title {
    margin: 0;
    font-family: var(--gco-font);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: #fff;
}
#gco-ai-root .gco-ai-welcome-card {
    position: relative;
    margin: -42px 16px 0;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--gco-shadow-card);
}
#gco-ai-root .gco-ai-welcome-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gco-text);
}
#gco-ai-root .gco-ai-welcome-cta {
    width: 100%;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--gco-ink);
    color: #fff;
    font-family: var(--gco-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
#gco-ai-root .gco-ai-welcome-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
#gco-ai-root .gco-ai-welcome-cta:hover { background: #221C45; }
#gco-ai-root .gco-ai-welcome-cta:hover svg { transform: translateX(3px); }
#gco-ai-root .gco-ai-welcome-cta:focus-visible { outline: 3px solid rgba(59, 79, 216, .45); outline-offset: 2px; }

#gco-ai-root .gco-ai-welcome-label {
    margin: 18px 18px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gco-muted);
}
#gco-ai-root .gco-ai-welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
#gco-ai-root .gco-ai-welcome-chip,
#gco-ai-root .gco-ai-context-action {
    padding: 9px 14px;
    border: 1px solid var(--gco-line);
    border-radius: var(--gco-pill);
    background: #fff;
    color: var(--gco-blue);
    font-family: var(--gco-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
#gco-ai-root .gco-ai-welcome-chip:hover,
#gco-ai-root .gco-ai-context-action:hover { border-color: var(--gco-indigo); background: #EEF1FD; color: var(--gco-indigo); }
#gco-ai-root .gco-ai-welcome-chip:focus-visible,
#gco-ai-root .gco-ai-context-action:focus-visible { outline: 2px solid var(--gco-indigo); outline-offset: 2px; }
#gco-ai-root #gco-ai-chat.gco-ai-welcome-mode .gco-ai-service-menu { margin: 16px 16px 0; }

/* Suggested replies after a Clicky answer */
#gco-ai-root .gco-ai-context-actions { margin: 0 0 14px 39px; gap: 8px; }

/* Older start-option grid (kept for any cached markup) */
#gco-ai-root .gco-ai-action-grid { margin: 2px 0 16px 39px; }

/* ---- Service chooser ---- */
#gco-ai-root .gco-ai-service-menu {
    margin: 0 0 16px 39px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--gco-shadow-card);
    overflow: hidden;
}
#gco-ai-root .gco-ai-service-menu-head {
    margin: 0;
    padding: 13px 14px;
    border-bottom: 1px solid #EDF1F6;
    align-items: center;
}
#gco-ai-root .gco-ai-service-menu-head strong { font-family: var(--gco-font); font-size: 15px; font-weight: 700; color: var(--gco-ink); }
#gco-ai-root .gco-ai-service-menu-head small { font-size: 12.5px; color: var(--gco-muted); }
#gco-ai-root .gco-ai-service-menu-close {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
    background: transparent;
    color: var(--gco-muted);
    font-size: 20px;
}
#gco-ai-root .gco-ai-service-menu-close:hover { background: var(--gco-canvas); color: var(--gco-ink); }
#gco-ai-root .gco-ai-service-menu-grid { gap: 0; }
#gco-ai-root .gco-ai-service-menu-item {
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 11px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #EDF1F6;
    border-radius: 0;
    background: #fff;
    color: var(--gco-ink);
    font-family: var(--gco-font);
    font-size: 14px;
    font-weight: 600;
    transform: none;
}
#gco-ai-root .gco-ai-service-menu-item:last-child { border-bottom: 0; }
#gco-ai-root .gco-ai-service-menu-item:hover { background: #F6F8FE; transform: none; }
#gco-ai-root .gco-ai-service-menu-item:focus-visible { outline: 2px solid var(--gco-indigo); outline-offset: -2px; }
#gco-ai-root .gco-ai-service-menu-icon { width: 32px; height: 32px; border-radius: 10px; background: #EEF1FD; color: var(--gco-indigo); }
#gco-ai-root .gco-ai-service-menu-arrow { color: #A5ABBA; font-size: 18px; }
#gco-ai-root .gco-ai-service-menu-item:hover .gco-ai-service-menu-arrow { color: var(--gco-indigo); }

/* ---- Result cards (quick check, growth plan, full audit) ---- */
#gco-ai-root .gco-insight-card,
#gco-ai-root .gco-growth-card {
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--gco-shadow-card);
    font-family: var(--gco-font);
}
#gco-ai-root .gco-card-eyebrow {
    font-family: var(--gco-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gco-indigo);
}
#gco-ai-root .gco-card-domain,
#gco-ai-root .gco-growth-card h3,
#gco-ai-root .gco-card-section-title {
    font-family: var(--gco-font);
    font-weight: 700;
    color: var(--gco-ink);
    letter-spacing: 0;
}
#gco-ai-root .gco-card-domain { font-size: 17px; }
#gco-ai-root .gco-card-section-title { font-size: 14px; text-transform: none; }
#gco-ai-root .gco-health-grid > div,
#gco-ai-root .gco-score-hero,
#gco-ai-root .gco-growth-goal,
#gco-ai-root .gco-next-step {
    border: 0;
    border-radius: 12px;
    background: var(--gco-canvas);
    box-shadow: none;
}
#gco-ai-root .gco-health-grid span,
#gco-ai-root .gco-growth-goal span,
#gco-ai-root .gco-next-step span {
    font-family: var(--gco-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gco-muted);
}
#gco-ai-root .gco-health-grid strong,
#gco-ai-root .gco-growth-goal strong,
#gco-ai-root .gco-next-step strong { font-family: var(--gco-font); font-size: 15px; font-weight: 700; color: var(--gco-ink); }
#gco-ai-root .gco-next-step { border-left: 3px solid var(--gco-indigo); }
#gco-ai-root .gco-opportunity-row { border-radius: 12px; background: var(--gco-canvas); font-size: 13.5px; }
#gco-ai-root .gco-opportunity-number,
#gco-ai-root .gco-plan-number { background: var(--gco-gradient); }
#gco-ai-root .gco-plan-item { gap: 11px; padding: 11px 12px; border: 1px solid #EDF1F6; border-radius: 12px; background: #fff; }
#gco-ai-root .gco-plan-number { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; font-weight: 700; }
#gco-ai-root .gco-plan-item strong { font-family: var(--gco-font); font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--gco-ink); }
#gco-ai-root .gco-plan-item span { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--gco-indigo); }
#gco-ai-root .gco-plan-item p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--gco-muted); }

#gco-ai-root .gco-card-actions button {
    min-height: 42px;
    border: 1px solid var(--gco-line);
    border-radius: 12px;
    background: #fff;
    color: var(--gco-blue);
    font-family: var(--gco-font);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}
#gco-ai-root .gco-card-actions button:first-child { border-color: transparent; background: var(--gco-ink); color: #fff; }
#gco-ai-root .gco-card-actions button:hover { border-color: var(--gco-indigo); background: #EEF1FD; color: var(--gco-indigo); }
#gco-ai-root .gco-card-actions button:first-child:hover { border-color: transparent; background: #221C45; color: #fff; }
#gco-ai-root .gco-card-actions button:focus-visible { outline: 2px solid var(--gco-indigo); outline-offset: 2px; }

/* ---- Composer: a floating white bar on the canvas ---- */
#gco-ai-root .gco-ai-input-area {
    padding: 8px 14px 14px;
    border-top: 0;
    background: var(--gco-canvas);
}
#gco-ai-root .gco-ai-composer-shell {
    box-sizing: border-box;
    min-width: 0;
    gap: 4px;
    padding: 5px 5px 5px 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--gco-shadow-soft), 0 0 0 1px rgba(13, 9, 37, .05);
}
#gco-ai-root .gco-ai-composer-shell:focus-within { box-shadow: 0 0 0 1.5px rgba(59, 79, 216, .28), var(--gco-shadow-soft); }
#gco-ai-root .gco-ai-circle-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
    box-shadow: none;
}
#gco-ai-root .gco-ai-secondary-button { background: transparent; color: #8A90A0; }
#gco-ai-root .gco-ai-secondary-button:hover:not(:disabled) { background: var(--gco-canvas); color: var(--gco-indigo); transform: none; }
#gco-ai-root #gco-ai-input {
    min-height: 38px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gco-text);
    font-family: var(--gco-font);
    font-size: 14.5px;
    box-shadow: none;
}
#gco-ai-root #gco-ai-input::placeholder { color: #9AA0AE; }
#gco-ai-root #gco-ai-input:focus { border: 0; box-shadow: none; outline: none; }
#gco-ai-root #gco-ai-send { background: var(--gco-gradient); color: #fff; }
#gco-ai-root #gco-ai-send:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(59, 79, 216, .3); transform: none; }
#gco-ai-root .gco-ai-circle-button:focus-visible { outline: 2px solid var(--gco-indigo); outline-offset: 2px; }
#gco-ai-root .gco-ai-attachment-chip { border-radius: var(--gco-pill); border-color: var(--gco-line); background: #fff; }

/* ---- Chat history ---- */
#gco-ai-root .gco-ai-chat-list { padding: 14px 16px; background: var(--gco-canvas); }
#gco-ai-root .gco-ai-new-chat-card {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--gco-shadow-card);
}
#gco-ai-root .gco-ai-new-chat-card:hover { background: #F6F8FE; }
#gco-ai-root .gco-ai-new-chat-card strong,
#gco-ai-root .gco-ai-chat-row-title { font-family: var(--gco-font); font-size: 14.5px; font-weight: 700; color: var(--gco-ink); }
#gco-ai-root .gco-ai-new-chat-card small,
#gco-ai-root .gco-ai-chat-row-preview { font-family: var(--gco-font); font-size: 12.5px; color: var(--gco-muted); }
#gco-ai-root .gco-ai-new-chat-plus { border-radius: 12px; background: var(--gco-gradient); color: #fff; font-weight: 700; }
#gco-ai-root .gco-ai-chat-row-avatar { border-radius: 12px; background: #EEF1FD; color: var(--gco-indigo); font-weight: 700; }
#gco-ai-root .gco-ai-chat-row {
    margin-bottom: 8px;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--gco-shadow-soft);
}
#gco-ai-root .gco-ai-chat-row:hover { background: #F6F8FE; }
#gco-ai-root .gco-ai-chat-row-active { box-shadow: inset 3px 0 0 var(--gco-indigo), var(--gco-shadow-soft); }
#gco-ai-root .gco-ai-chat-row:focus-visible { outline: 2px solid var(--gco-indigo); outline-offset: 2px; }
#gco-ai-root .gco-ai-chat-row-time { font-size: 11.5px; color: #8A90A0; }
#gco-ai-root .gco-ai-chat-delete { border-radius: 10px; color: #8A90A0; }
#gco-ai-root .gco-ai-chat-delete:hover { background: #FDECEC; color: #D1212B; }

/* ---- Launcher label ---- */
#gco-ai-root .gco-ai-mascot-label {
    min-width: 0;
    padding: 7px 14px;
    border: 0;
    border-radius: var(--gco-pill);
    background: var(--gco-gradient);
    color: #fff;
    font-family: var(--gco-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(59, 79, 216, .32);
    backdrop-filter: none;
}

/* ---- Phones ---- */
@media (max-width: 600px) {
    #gco-ai-root .gco-ai-header { min-height: 64px; padding: max(12px, env(safe-area-inset-top)) 10px 12px 14px; }
    #gco-ai-root .gco-ai-welcome-hero { padding: 6px 18px 58px; }
    #gco-ai-root .gco-ai-welcome-title { font-size: 25px; }
    #gco-ai-root .gco-ai-action-grid,
    #gco-ai-root .gco-ai-service-menu,
    #gco-ai-root .gco-ai-context-actions,
    #gco-ai-root .gco-insight-card,
    #gco-ai-root .gco-growth-card { margin-left: 0; }
    #gco-ai-root .gco-ai-input-area { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
    #gco-ai-root .gco-ai-mascot-label { padding: 6px 11px; font-size: 12px; }
}

@media (max-width: 390px) {
    #gco-ai-root .gco-ai-welcome-title { font-size: 23px; }
    #gco-ai-root .gco-ai-welcome-chip { padding: 8px 12px; font-size: 13px; }
    /* Small phones: wrap the subtitle to a second line rather than cutting it off. */
    #gco-ai-root .gco-ai-subtitle {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gco-ai-root .gco-ai-welcome-cta,
    #gco-ai-root .gco-ai-welcome-cta svg,
    #gco-ai-root .gco-ai-welcome-chip,
    #gco-ai-root .gco-ai-context-action { transition: none; }
}

/* Scrollbar: no reserved gutter (it left a strip beside the welcome hero); thin when shown. */
#gco-ai-root #gco-ai-messages,
#gco-ai-root .gco-ai-chat-list { scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: rgba(13, 9, 37, .18) transparent; }
#gco-ai-root #gco-ai-chat.gco-ai-welcome-mode #gco-ai-messages { scrollbar-width: none; }
#gco-ai-root #gco-ai-chat.gco-ai-welcome-mode #gco-ai-messages::-webkit-scrollbar { display: none; }

/* Message badge (Go Click On logo mark in a gradient ring): shown whole, no extra frame. */
#gco-ai-root .gco-ai-message-avatar { background: transparent; box-shadow: none; overflow: visible; }
#gco-ai-root .gco-ai-message-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* Docked: while the chat is open Clicky waits in his corner beside the window instead of vanishing.
   The "Chat with Clicky" label is hidden; clicking him closes the chat. */
#gco-ai-root #gco-ai-launcher.gco-ai-launcher-docked .gco-ai-mascot-label { opacity: 0; visibility: hidden; pointer-events: none; }
#gco-ai-root #gco-ai-launcher.gco-ai-launcher-docked { animation: none; }

/* Clicky 0.12.0: mascot about 12% shorter on screen (3D model and 2D image both fit this box). */
#gco-ai-launcher {
    width: 146px;
    height: 184px;
    left: calc(100vw - 166px);
    top: calc(100vh - 204px);
}
#gco-ai-mascot-shell {
    width: 128px;
    height: 156px;
}
@media (max-width: 600px) {
    #gco-ai-launcher {
        width: 104px;
        height: 137px;
        left: calc(100vw - 118px);
        top: calc(100vh - 155px);
    }
    #gco-ai-mascot-shell {
        width: 92px;
        height: 112px;
    }
}



/* Accessibility: a clear focus ring for keyboard users on every control, the launcher and the
   message box (mouse clicks don't show it thanks to :focus-visible). */
#gco-ai-root #gco-ai-launcher:focus-visible,
#gco-ai-root button:focus-visible,
#gco-ai-root [role="button"]:focus-visible,
#gco-ai-root a:focus-visible {
    outline: 3px solid #3a5be0;
    outline-offset: 2px;
}
/* The message box shows focus through its rounded composer border instead of a square box. */
#gco-ai-root #gco-ai-input:focus,
#gco-ai-root #gco-ai-input:focus-visible { outline: none; }
#gco-ai-root #gco-ai-launcher:focus-visible { border-radius: 16px; }
#gco-ai-root .gco-ai-message-row-user .gco-ai-message-meta { color: #5F6677; }

/* Multi-line message box: grows with the text up to five lines, then scrolls. */
#gco-ai-root .gco-ai-composer-shell { align-items: flex-end; }
#gco-ai-root #gco-ai-input {
    display: block;
    box-sizing: border-box;
    height: 44px;
    max-height: 132px;
    resize: none;
    overflow-y: hidden;
    font-family: inherit;
    line-height: 20px;
    border-radius: 22px;
    /* An older layer sets "padding: 0 8px" (fine for a one-line input); a textarea needs the
       vertical padding so one line of text sits in the middle of the 44 px box. */
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
}
/* Buttons sit at the bottom as the text grows; 3 px lifts them to the middle of a one-line box. */
#gco-ai-root .gco-ai-composer-shell > .gco-ai-circle-button { margin-bottom: 3px; }
@media (max-width: 600px) {
    #gco-ai-root #gco-ai-input { height: 40px; max-height: 124px; padding-top: 10px; padding-bottom: 10px; }
    #gco-ai-root .gco-ai-composer-shell > .gco-ai-circle-button { margin-bottom: 1px; }
}

/* Website themes style every <textarea> (height, padding, line height, margins, borders, shadows,
   sometimes with !important). Clicky's message box keeps its own size and alignment whatever the
   theme says. "height" stays without !important so the box can still grow as the visitor types. */
#gco-ai-root #gco-ai-input {
    box-sizing: border-box !important;
    min-height: 44px !important;
    max-height: 132px !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    line-height: 20px !important;
    letter-spacing: normal !important;
    text-align: left !important;
    vertical-align: bottom !important;
    resize: none !important;
    align-self: flex-end !important;
    flex: 1 1 auto !important;
    width: auto !important;
}
#gco-ai-root .gco-ai-composer-shell { align-items: flex-end !important; }
#gco-ai-root .gco-ai-composer-shell > .gco-ai-circle-button {
    margin: 0 0 3px !important;
    padding: 0 !important;
    align-self: flex-end !important;
}
@media (max-width: 600px) {
    #gco-ai-root #gco-ai-input { min-height: 40px !important; max-height: 124px !important; padding: 10px 8px !important; font-size: 16px !important; }
    #gco-ai-root .gco-ai-composer-shell > .gco-ai-circle-button { margin: 0 0 1px !important; }
}

/* Shown once these styles have loaded; an inline rule in <head> hides the chat until then. */
html body #gco-ai-root { visibility: visible; }