/* ======================================================================
   HairColorGPT – chat front-end UNIFIED   v1.4.0 (19 June 2025)
   CSS Completo e Aggiornato con Nuovo Stile per Chat Salvate
   ==================================================================== */

/* ---------- 1. BASICS ------------------------------------------------ */
/* Reset specifico per contenitori HairColorGPT per evitare conflitti con temi */
.hcgpt-chat-container,
.hcgpt-chat-container * {
    box-sizing: border-box !important;
}

.hcgpt-chat-container {
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
}


/* ========================================
   Shell + Feedback bar stacking fix (iOS Safari)
   ======================================== */
/* Wrapper: garantisce un unico stacking context */
.hcgpt-shell {
    position: relative;
    isolation: isolate;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- App shell (v2) layout ---- */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
    color: var(--hcgpt-color-text);
    box-sizing: border-box;
}

/* Unified /app shell: use app-bg for consistent grey background */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] {
    background: var(--hcgpt-app-bg);
    --hcgpt-sidebar-mini-width: 52px;
    --hcgpt-sidebar-full-width: 260px;
    --hcgpt-topbar-pad-y: var(--hcgpt-space-3, 12px);
    --hcgpt-topbar-pad-x: var(--hcgpt-space-4, 16px);
    --hcgpt-topbar-row-min-h: 56px;
    --hcgpt-topbar-control-h: 44px;
    --hcgpt-topbar-control-radius: 12px;
    --hcgpt-topbar-desktop-title-offset: 96px;
    --hcgpt-topbar-mobile-title-offset: 84px;
    --hcgpt-topbar-mobile-toggle-size: 44px;
    --hcgpt-shell-vh: calc(100vh - var(--hcgpt-admin-offset, 0px));
    min-height: var(--hcgpt-shell-vh);
    height: var(--hcgpt-shell-vh);
    overflow: hidden;
}

@supports (height: 100dvh) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] {
        --hcgpt-shell-vh: calc(100dvh - var(--hcgpt-admin-offset, 0px));
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hcgpt-space-4, 16px);
    padding: 0 var(--hcgpt-space-6, 24px) var(--hcgpt-space-8, 32px);
    padding-left: calc(var(--hcgpt-col-gutter-x, 12px));
    --hcgpt-app-main-left: calc(var(--hcgpt-col-gutter-x, 12px));
    --hcgpt-app-main-right: var(--hcgpt-space-6, 24px);
    box-sizing: border-box;
    transition: padding-left 0.25s ease;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-app-topbar {
    display: none !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-app-viewhost {
    display: none !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-app-main {
    gap: 0;
    padding: 0;
    min-height: calc(100vh - var(--hcgpt-admin-offset, 0px));
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-app-auth-gate {
    width: 100%;
    max-width: min(640px, 100%);
    margin: 0 auto;
    padding: 0 var(--hcgpt-space-4, 16px);
    box-sizing: border-box;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-auth-gate.hcgpt-auth-gate--centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--hcgpt-auth-gate-min-height, 280px);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-auth-gate .hcgpt-auth-gate__card.hcgpt-auth-gate__card--narrow {
    width: 100%;
    max-width: 400px;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-status-message.hcgpt-status-message--hidden {
    display: none;
}

/* Unified guest login gate (custom, no external shortcode UI) */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    max-width: min(440px, 100%);
    padding: clamp(16px, 3.5vw, 28px) var(--hcgpt-space-4, 16px) !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate::before {
    content: none !important;
    display: none !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 18px;
    text-align: center;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__logo {
    display: block;
    width: clamp(72px, 10vw, 92px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__eyebrow {
    margin: 0;
    color: var(--hcgpt-color-text-muted) !important;
    font-family: var(--hcgpt-font-body);
    font-size: var(--hcgpt-font-size-12);
    font-style: normal;
    font-weight: var(--hcgpt-font-weight-semibold);
    letter-spacing: var(--hcgpt-letter-spacing-005em);
    line-height: var(--hcgpt-line-height-120);
    text-transform: var(--hcgpt-text-transform-uppercase);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__wordmark {
    margin: 0;
    color: var(--hcgpt-color-text) !important;
    font-family: var(--hcgpt-font-heading);
    font-style: normal;
    font-weight: 800;
    font-size: clamp(38px, 8vw, 54px);
    line-height: 0.86;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 767.98px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__logo {
        width: clamp(66px, 18vw, 84px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__wordmark {
        font-size: clamp(34px, 11vw, 46px);
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__line {
    width: 56px;
    height: 1px;
    background: color-mix(in srgb, var(--hcgpt-color-text) 16%, transparent);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__dot {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card {
    background: var(--hcgpt-color-surface) !important;
    border: 1px solid var(--hcgpt-color-border) !important;
    border-radius: 24px;
    box-shadow: none;
    padding: 18px 18px 14px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card form {
    margin: 0;
    text-align: left;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card :is(.login-username, .login-password) {
    margin: 0 0 12px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card :is(.login-username label, .login-password label, .login-remember label) {
    color: var(--hcgpt-color-text-muted);
    display: block;
    font-size: var(--hcgpt-font-size-12);
    font-weight: var(--hcgpt-font-weight-semibold);
    letter-spacing: var(--hcgpt-letter-spacing-005em);
    margin-bottom: 6px;
    text-transform: var(--hcgpt-text-transform-uppercase);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card :is(input[type="text"], input[type="password"], input[type="email"]) {
    width: 100%;
    min-height: 44px;
    background: var(--hcgpt-color-surface-2);
    color: var(--hcgpt-color-text);
    border: 1px solid var(--hcgpt-color-border-strong);
    border-radius: 14px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card .login-remember {
    margin: 8px 0 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card .login-remember input {
    margin-right: 8px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card .login-submit {
    margin: 10px 0 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card .login-submit .button {
    background: var(--hcgpt-accent);
    border: 1px solid var(--hcgpt-accent);
    border-radius: 999px;
    color: var(--hcgpt-color-on-primary);
    cursor: pointer;
    font-size: var(--hcgpt-font-size-12);
    font-weight: var(--hcgpt-font-weight-bold);
    letter-spacing: var(--hcgpt-letter-spacing-005em);
    min-height: 36px;
    padding: 8px 18px;
    text-transform: var(--hcgpt-text-transform-uppercase);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__card .login-submit .button:hover {
    background: var(--hcgpt-info-hover);
    border-color: var(--hcgpt-info-hover);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__link {
    color: var(--hcgpt-color-text-muted);
    font-size: var(--hcgpt-font-size-12);
    text-decoration: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-auth="guest"] .hcgpt-auth-gate .hcgpt-auth-gate__link:hover {
    color: var(--hcgpt-accent);
}

/* Topbar: fixed to viewport top so it never scrolls away on any view.
   left uses --hcgpt-app-main-left (set by sidebar state rules) to avoid
   overlapping the sidebar — falls back to 0px on mobile where sidebar is hidden. */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar {
    position: fixed;
    top: 0;
    left: var(--hcgpt-app-main-left, 0px);
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcgpt-space-4, 16px);
    padding: 0 var(--hcgpt-topbar-pad-x, var(--hcgpt-space-4, 16px));
    min-height: var(--hcgpt-topbar-row-min-h, 52px);
    background: var(--hcgpt-color-surface);
    color: var(--hcgpt-sidebar-item-text);
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
}
/* Fixed topbar must sit below the WP admin bar when present. */
body.admin-bar .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar {
    top: var(--hcgpt-admin-offset, 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar {
        top: var(--hcgpt-admin-offset, 46px);
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__formula {
    width: 100%;
    align-items: center;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__academy {
    width: 100%;
    display: none;
    align-items: center;
    min-width: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcgpt-space-3, 12px);
    width: 100%;
    min-width: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__left,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
}

/* Respect HTML hidden attribute on topbar actions (coming_soon users). */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__right[hidden] {
    display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__left {
    flex: 1 1 auto;
    gap: var(--hcgpt-space-2, 8px);
    padding-left: var(--hcgpt-topbar-desktop-title-offset, 96px);
    overflow: hidden;
}

.hcgpt-scope .academy-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--hcgpt-color-border) !important;
    border-radius: var(--hcgpt-radius-full, 9999px);
    background: var(--hcgpt-color-surface-2);
    color: var(--hcgpt-color-text, #f9fafb);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--hcgpt-transition-fast, 0.15s ease), border-color var(--hcgpt-transition-fast, 0.15s ease);
}

.hcgpt-scope .academy-back-btn:hover {
    background: var(--hcgpt-control-hover-bg, rgba(255,255,255,0.12));
}

.hcgpt-scope .academy-back-btn[hidden] {
    display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__right {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--hcgpt-space-3, 12px);
    justify-content: flex-end;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__academy .academy-header-title.hcgpt-app-topbar__title {
    flex: 0 0 auto;
    padding-left: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__academy .academy-breadcrumb-container--topbar {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-top: 7px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__chat {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hcgpt-space-4, 16px);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__title {
    font-size: var(--hcgpt-font-size-20);
    font-weight: var(--hcgpt-font-weight-thin);
    letter-spacing: var(--hcgpt-letter-spacing-010em);
    text-transform: var(--hcgpt-text-transform-uppercase);
    color: var(--hcgpt-type-structural-soft);
    padding-left: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    text-align: left;
    font-family: var(--hcgpt-font-sans);
    font-style: normal;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-header-title {
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__chat-style {
    margin-left: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-control {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    position: relative;
    flex: 0 0 auto;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hcgpt-topbar-control-h, 36px);
    height: var(--hcgpt-topbar-control-h, 36px);
    border-radius: var(--hcgpt-topbar-control-radius, 10px);
    border: 1px solid var(--hcgpt-color-border-strong, var(--hcgpt-color-border));
    background: var(--hcgpt-color-surface);
    color: var(--hcgpt-color-text);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--hcgpt-transition-fast), background-color var(--hcgpt-transition-fast), box-shadow var(--hcgpt-transition-fast);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-trigger svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-trigger:hover,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-control.is-open .hcgpt-chat-style-trigger {
    border-color: var(--hcgpt-color-border, rgba(255, 255, 255, 0.22));
    background: var(--hcgpt-color-surface-3, var(--hcgpt-color-surface));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-trigger:focus-visible {
    outline: 2px solid var(--hcgpt-color-border-focus, #2563eb);
    outline-offset: 1px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-control.is-saved .hcgpt-chat-style-trigger {
    border-color: var(--hcgpt-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hcgpt-success) 22%, transparent);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--hcgpt-menu-shell-padding, 8px);
    border-radius: var(--hcgpt-menu-shell-radius, var(--hcgpt-overlay-radius, 12px));
    background: var(--hcgpt-overlay-bg, var(--hcgpt-color-surface));
    border: 1px solid var(--hcgpt-overlay-border, var(--hcgpt-color-border));
    box-shadow: var(--hcgpt-overlay-shadow, 0 16px 36px rgba(0, 0, 0, 0.25));
    z-index: 35;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-menu[hidden] {
    display: none !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--hcgpt-menu-item-pad-y, 9px) var(--hcgpt-menu-item-pad-x, 12px);
    border: 0;
    background: transparent;
    color: var(--hcgpt-color-text);
    border-radius: var(--hcgpt-menu-item-radius, 8px);
    cursor: pointer;
    font-size: var(--hcgpt-menu-item-font-size, var(--hcgpt-font-size-13));
    font-weight: var(--hcgpt-menu-item-font-weight, var(--hcgpt-font-weight-medium));
    line-height: var(--hcgpt-menu-item-line-height, var(--hcgpt-line-height-120));
    text-align: left;
    transition: background var(--hcgpt-transition-fast), color var(--hcgpt-transition-fast);
    font-family: var(--hcgpt-font-sans);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none) !important;
    letter-spacing: normal;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option:hover {
    background: var(--hcgpt-menu-item-hover-bg, var(--hcgpt-overlay-item-hover-bg, var(--hcgpt-color-surface-3)));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option.is-selected {
    background: var(--hcgpt-menu-item-hover-bg, var(--hcgpt-overlay-item-hover-bg, var(--hcgpt-color-surface-3)));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option.is-disabled,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option-check {
    opacity: 0;
    transform: scale(0.84);
    color: var(--hcgpt-success);
    transition: opacity var(--hcgpt-transition-fast), transform var(--hcgpt-transition-fast);
    font-weight: var(--hcgpt-font-weight-semibold);
    margin-left: auto;
    padding-top: 2px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option.is-selected .hcgpt-chat-style-option-check {
    opacity: 1;
    transform: scale(1);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-option-label {
    display: block;
    line-height: 1.25;
    text-transform: var(--hcgpt-text-transform-none) !important;
    letter-spacing: normal;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-menu-footer {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--hcgpt-overlay-border, var(--hcgpt-color-border));
    text-align: center;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-menu-hint {
    display: block;
    font-size: var(--hcgpt-font-size-11);
    font-weight: var(--hcgpt-font-weight-regular);
    line-height: var(--hcgpt-line-height-140);
    color: var(--hcgpt-color-text-muted);
    text-transform: var(--hcgpt-text-transform-none);
    letter-spacing: normal;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-control-native {
    display: none !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-status {
    display: none !important;
}

@media (max-width: 767.98px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] {
        --hcgpt-topbar-pad-y: 10px;
        --hcgpt-topbar-pad-x: 12px;
        --hcgpt-topbar-row-min-h: 56px;
        --hcgpt-topbar-control-h: 40px;
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__chat {
        flex-wrap: nowrap;
        gap: var(--hcgpt-space-2, 8px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__title {
        padding-left: var(--hcgpt-topbar-mobile-title-offset, 84px);
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: var(--hcgpt-font-sans);
        font-weight: var(--hcgpt-font-weight-semibold);
        font-style: normal;
        text-transform: var(--hcgpt-text-transform-uppercase);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__chat-style {
        width: auto;
        margin-left: 0;
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-controls {
        width: auto;
        justify-content: flex-start;
        gap: 4px;
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-trigger {
        width: var(--hcgpt-topbar-control-h, 40px);
        height: var(--hcgpt-topbar-control-h, 40px);
        border-radius: var(--hcgpt-topbar-control-radius, 10px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-trigger svg {
        width: 22px;
        height: 22px;
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-chat-style-menu {
        min-width: 168px;
        top: calc(100% + 6px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-select {
        min-width: 150px;
        max-width: 190px;
        border-radius: 999px;
        height: var(--hcgpt-topbar-control-h, 40px);
        font-size: var(--hcgpt-font-size-12);
        padding: 0 34px 0 12px;
        font-family: var(--hcgpt-font-sans);
        font-weight: var(--hcgpt-font-weight-thin);
        font-style: normal;
        text-transform: var(--hcgpt-text-transform-none);
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__formula {
    width: 100%;
    display: block;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__settings {
    width: 100%;
    display: flex;
    align-items: center;
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-medium);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-uppercase);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar__settings-inner {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--hcgpt-space-4, 16px);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-nav {
    margin-left: var(--hcgpt-space-2, 8px);
    margin-right: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-nav::-webkit-scrollbar {
    display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--hcgpt-color-text-muted);
    cursor: pointer;
    font-size: var(--hcgpt-text-sm, 14px);
    line-height: var(--hcgpt-line-height-120);
    padding: 0;
    margin: 0;
    font-weight: var(--hcgpt-font-weight-thin);
    font-family: var(--hcgpt-font-sans);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-link:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 10px;
    color: var(--hcgpt-color-text-muted);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-link.is-active {
    color: var(--hcgpt-color-text);
    font-weight: var(--hcgpt-font-weight-thin);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: var(--hcgpt-font-sans);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-link:focus-visible {
    outline: 2px solid var(--hcgpt-color-border-focus, #2563eb);
    outline-offset: 2px;
    border-radius: 4px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-select {
    display: none;
    margin-left: auto;
    min-width: 160px;
    max-width: 240px;
    border: 1px solid var(--hcgpt-color-border);
    border-radius: var(--hcgpt-radius-md, 8px);
    background: var(--hcgpt-color-surface);
    color: var(--hcgpt-color-text);
    font-size: var(--hcgpt-text-sm, 14px);
    line-height: var(--hcgpt-line-height-120);
    height: var(--hcgpt-topbar-control-h, 36px);
    padding: 0 30px 0 10px;
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-settings-topbar-select:focus-visible {
    outline: 2px solid var(--hcgpt-color-border-focus, #2563eb);
    outline-offset: 2px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-topbar .hcgpt-fb-btn-icon-only {
    width: var(--hcgpt-topbar-control-h, 36px);
    height: var(--hcgpt-topbar-control-h, 36px);
}

@media (min-width: 768px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] aside.hcgpt-chat-sidebar[data-state="mini"]~.hcgpt-app-main {
        padding-left: var(--hcgpt-sidebar-mini-width, 52px);
        --hcgpt-app-main-left: var(--hcgpt-sidebar-mini-width, 52px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar__title,
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-header-title {
        padding-left: var(--hcgpt-topbar-desktop-title-offset, 96px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] aside.hcgpt-chat-sidebar[data-state="full"]~.hcgpt-app-main {
        padding-left: var(--hcgpt-sidebar-full-width, 260px);
        --hcgpt-app-main-left: var(--hcgpt-sidebar-full-width, 260px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] aside.hcgpt-chat-sidebar[data-state="mobile-open"]~.hcgpt-app-main {
        padding-left: 0;
        --hcgpt-app-main-left: 0px;
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-topbar__left,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--hcgpt-space-2, 8px);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-topbar__button {
    appearance: none;
    border: 1px solid var(--hcgpt-color-border);
    background: var(--hcgpt-color-surface-2);
    color: var(--hcgpt-color-text);
    border-radius: var(--hcgpt-radius-full);
    padding: var(--hcgpt-space-2, 8px) var(--hcgpt-space-4, 16px);
    font-size: var(--hcgpt-text-sm);
    line-height: var(--hcgpt-line-height-100);
    cursor: pointer;
    transition: background var(--hcgpt-transition-fast), border-color var(--hcgpt-transition-fast);
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-topbar__button:hover {
    background: var(--hcgpt-control-hover-bg);
}

/* Content host sits below the fixed topbar — padding-top pushes content
   below the topbar so nothing is hidden behind it. */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-viewhost {
    display: flex;
    flex-direction: column;
    gap: var(--hcgpt-space-4, 16px);
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--hcgpt-topbar-row-min-h, 56px);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-viewhost>section {
    width: 100%;
    min-height: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-main {
    background: var(--hcgpt-app-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-right: 0;
    overflow: hidden;
    --hcgpt-app-main-right: 0px;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-viewhost,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-viewhost>section,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar__chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar__settings,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar__formula,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar__academy {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-shell {
    background: var(--hcgpt-color-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-shell__inner {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-header {
    position: static;
    top: auto;
    z-index: auto;
    background: var(--hcgpt-color-surface);
    padding: 0;
    border: 0;
    box-shadow: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-header-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcgpt-space-3, 12px);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-toolbar-center {
    display: none !important;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-toolbar-left {
    flex: 1 1 auto;
    min-width: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-toolbar-right {
    flex: 0 0 auto;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-topbar .hcgpt-fb-header-title {
    margin: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__settings,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__academy,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] #hcgpt-app-view-formula,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] #hcgpt-app-view-settings,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] #hcgpt-app-view-academy {
    display: none;
}

/* Hide Academy from formula-book and settings views */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="formula-book"] #hcgpt-app-view-academy,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="formula-book"] .hcgpt-app-topbar__academy,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] #hcgpt-app-view-academy,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="settings"] .hcgpt-app-topbar__academy {
    display: none !important;
}

/* Defensive: Academy topbar must NEVER show on non-academy views.
   The default display:none may lose specificity to later rules, so enforce it. */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"]:not([data-view="academy"]) .hcgpt-app-topbar__academy {
    display: none !important;
}

/* Defensive: Academy section must NEVER show on non-academy views. */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"]:not([data-view="academy"]) #hcgpt-app-view-academy {
    display: none !important;
}

/* Academy view — hide all other sections and topbar panels */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] #hcgpt-app-view-chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] #hcgpt-app-view-formula,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] #hcgpt-app-view-settings,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-topbar__chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-topbar__settings,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-topbar__formula {
    display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] #hcgpt-app-view-academy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
    color: var(--hcgpt-color-text, inherit);
}

/* Academy view: main container must be flush (no gap, no padding) so the
   tutor panel and content fill edge-to-edge without visible margins. */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-main {
    gap: 0;
    padding: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-viewhost {
    overflow-y: hidden;
    gap: 0;
    padding: 0;
}

/* Academy topbar override removed — fixed positioning is now the base default
   for all views (see topbar base rule above). */

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-topbar__academy {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    justify-content: flex-start;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-topbar__academy .academy-header-title.hcgpt-app-topbar__title {
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 0;
    font-size: var(--hcgpt-font-size-18);
    letter-spacing: var(--hcgpt-letter-spacing-003em);
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__chat {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__chat .hcgpt-app-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--hcgpt-topbar-desktop-title-offset, 96px);
    font-size: var(--hcgpt-font-size-18);
    letter-spacing: var(--hcgpt-letter-spacing-003em);
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__formula {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hcgpt-space-3, 12px);
    margin-left: auto;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__formula .hcgpt-fb-shell {
    display: none;
}

/* Keep guest login canvas theme-aware across all app views (chat/formula/settings). */
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"] {
    --hcgpt-app-bg: var(--hcgpt-color-bg);
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"] .hcgpt-app-main,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"] .hcgpt-app-viewhost,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"] #hcgpt-app-view-chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"] #hcgpt-app-view-formula,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"] #hcgpt-app-view-settings {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"][data-hcgpt-theme="dark"] {
    --hcgpt-app-bg: #000;
}

@media (prefers-color-scheme: dark) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-auth="guest"][data-hcgpt-theme="system"] {
        --hcgpt-app-bg: #000;
    }
}

@media (max-width: 767.98px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-topbar__chat .hcgpt-app-topbar__title {
        padding-left: 60px;
        font-size: var(--hcgpt-font-size-16);
        letter-spacing: var(--hcgpt-letter-spacing-002em);
        text-transform: var(--hcgpt-text-transform-none);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="academy"] .hcgpt-app-topbar__academy .academy-header-title.hcgpt-app-topbar__title {
        padding-left: 0;
        font-size: var(--hcgpt-font-size-16);
        letter-spacing: var(--hcgpt-letter-spacing-002em);
        text-transform: var(--hcgpt-text-transform-none);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar {
        gap: var(--hcgpt-space-2, 8px);
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__left {
        padding-left: 60px;
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-academy-topbar__right {
        gap: var(--hcgpt-space-2, 8px);
    }
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] #hcgpt-app-view-chat {
    display: block;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] .hcgpt-app-viewhost {
    overflow-y: hidden;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] #hcgpt-app-view-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="chat"] #hcgpt-unified-chat-wrapper {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] .hcgpt-app-main {
        padding-left: calc(var(--hcgpt-col-gutter-x, 12px) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--hcgpt-col-gutter-x, 12px) + env(safe-area-inset-right, 0px));
    }

    .hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"] .hcgpt-app-main {
        padding-right: 0;
        padding-left: 0;
        --hcgpt-app-main-left: 0px;
        --hcgpt-app-main-right: 0px;
    }
}

.hcgpt-unified-shortcode {
    width: 100%;
    margin: 0 auto
}

.hcgpt-unified-section {
    margin-top: 24px
}

.hcgpt-unified-section:first-of-type {
    margin-top: 0
}

/* Feedback sopra i messaggi ma sotto l'input */
.hcgpt-feedback-bar {
    position: sticky;
    bottom: calc(var(--hcgpt-bottom-gap, calc(var(--hcgpt-inputbar-h, 72px) + var(--hcgpt-suggestions-h, 0px) + env(safe-area-inset-bottom, 0px))) + 12px);
    z-index: 10;
}

/* --- Safari iOS only: disabilita sticky e usa flow static --- */
@supports (-webkit-touch-callout: none) {
    .hcgpt-feedback-bar {
        position: static !important;
        margin-bottom: calc(var(--hcgpt-bottom-gap, calc(var(--hcgpt-inputbar-h, 72px) + var(--hcgpt-suggestions-h, 0px) + env(safe-area-inset-bottom, 0px))) + 12px);
    }
}

/* Mobile: MOLTA più aria per il pannello feedback */
@media (max-width: 767.98px) {
    .hcgpt-feedback-bar {
        bottom: calc(var(--hcgpt-bottom-gap, calc(var(--hcgpt-inputbar-h, 72px) + var(--hcgpt-suggestions-h, 0px) + env(safe-area-inset-bottom, 0px))) + 12px) !important;
    }

    @supports (-webkit-touch-callout: none) {
        .hcgpt-feedback-bar {
            margin-bottom: calc(var(--hcgpt-bottom-gap, calc(var(--hcgpt-inputbar-h, 72px) + var(--hcgpt-suggestions-h, 0px) + env(safe-area-inset-bottom, 0px))) + 12px) !important;
        }
    }

    #hcgpt-unified-chat-wrapper .hcgpt-feedback-bar {
        margin: 0 0 calc(var(--hcgpt-bottom-gap, calc(var(--hcgpt-inputbar-h, 72px) + var(--hcgpt-suggestions-h, 0px) + env(safe-area-inset-bottom, 0px))) + 12px) !important;
    }
}

.hcgpt-chat-container {
    display: flex !important;
    flex-direction: column !important;
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
}

/* === UI KIT: App Background (scoped) === */
#hcgpt-app {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg));
}

#hcgpt-app {
    min-height: 100vh;
}

/* Unified chat wrapper must stay transparent: canvas is painted by app-main/app-shell. */
#hcgpt-unified-chat-wrapper {
    background: transparent;
}

/* === UI KIT: Chat Page Background (body-scoped) === */
/* === UI KIT: Chat Page Background (body-scoped) === */
body.hcgpt-chat-page {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg)) !important;
    margin: 0;
}

body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg)) !important;
}

html:has(body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"])) {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg)) !important;
}

body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) #page,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) #content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) .site,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) .site-content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) .entry-content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) .themify_builder_content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) .elementor-section,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"]) .wp-site-blocks {
    background: var(--hcgpt-app-bg, var(--hcgpt-color-bg)) !important;
}

body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) {
    background: #000 !important;
}

html:has(body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"])) {
    background: #000 !important;
}

body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) #page,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) #content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) .site,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) .site-content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) .entry-content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) .themify_builder_content,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) .elementor-section,
body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="dark"]) .wp-site-blocks {
    background: #000 !important;
}

@media (prefers-color-scheme: dark) {
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) {
        background: #000 !important;
    }

    html:has(body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"])) {
        background: #000 !important;
    }

    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) #page,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) #content,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) .site,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) .site-content,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) .entry-content,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) .themify_builder_content,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) .elementor-section,
    body.hcgpt-chat-page:has(.hcgpt-app-shell[data-auth="guest"][data-hcgpt-theme="system"]) .wp-site-blocks {
        background: #000 !important;
    }
}

/* Neutralize common Theme Containers ONLY on Chat Page */
body.hcgpt-chat-page #page,
body.hcgpt-chat-page #content,
body.hcgpt-chat-page .site,
body.hcgpt-chat-page .site-content,
body.hcgpt-chat-page .entry-content,
body.hcgpt-chat-page .themify_builder_content,
body.hcgpt-chat-page .elementor-section,
body.hcgpt-chat-page .wp-site-blocks {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ---------- 2. WRAPPER & HISTORY ------------------------------------ */
#hcgpt-chat-history {
    position: relative;
    flex: 1;
    padding: 16px 16px 100px;
    overflow-y: auto;
    background: transparent;
    border-radius: 10px;
}

/* ---------- ANIMAZIONE PULSANTE REFRESH -------------------------------- */
.rotating {
    animation: spin 0.5s linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------- 3. MESSAGES --------------------------------------------- */
.message-user,
.message-bot {
    margin-bottom: 12px;
    max-width: 80%;
    word-wrap: break-word;
    line-height: var(--hcgpt-line-height-150);
}

.message-user {
    align-self: flex-end;
    background: #f5f5f5;
    color: #333;
    padding: 12px 16px;
    border-radius: 16px 16px 0 16px;
}

.message-bot {
    align-self: flex-start;
    background: transparent;
    color: #111;
    padding: 12px 16px;

    min-height: 28px;
}









.message-content h2 {
    font-size: var(--hcgpt-font-size-18);
    font-weight: 400;
    margin: .3em 0;
    font-family: var(--hcgpt-font-heading);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-uppercase);
}

.message-content p,
.message-content ul,
.message-content li {
    font-size: var(--hcgpt-font-size-16);
    margin: .45em 0;
}
.message-content li {
    font-family: var(--hcgpt-font-sans);
}

.message-content p {
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}


/* ---------- 12. IMAGES IN CHAT -------------------------------------- */
.chat-image-preview,
.message-user img,
.message-bot img {
    max-width: min(100%, 640px);
    max-height: 420px;
    height: auto;
    width: auto;
    border-radius: 8px;
    margin-top: 8px;
    object-fit: contain;
}

.message-user img[src^="data:image/svg+xml"],
.message-bot img[src^="data:image/svg+xml"] {
    max-width: 1.35em;
    max-height: 1.35em;
    width: 1.35em;
    height: 1.35em;
    margin-top: 0;
    vertical-align: -0.15em;
}

/* ---------- 13. RESPONSIVE STYLES OTTIMIZZATE ----------------------- */
/* DESKTOP e TABLET LANDSCAPE (769px e superiore) */

/* ===================================================================
   SEZIONE CHAT SALVATE (NUOVO DESIGN STILE GEMINI)
   Codice Corretto e Completo
   =================================================================== */

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container {
    padding: 0px !important;
    font-family: var(--hcgpt-font-sans);
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chats-header {
    font-size: var(--hcgpt-font-size-12);
    font-weight: var(--hcgpt-font-weight-medium);
    color: #4f5356;
    padding: 8px 0px 0px !important;
    margin: 0;
    border-bottom: none;
    text-transform: var(--hcgpt-text-transform-uppercase);
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chats-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px 10px 20px !important;
    border-radius: var(--hcgpt-sidebar-item-radius, 24px);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    border: none !important;
    margin: 0px !important;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item--current {
    background-color: #f4f1ff;
    box-shadow: 0 4px 14px rgba(60, 37, 165, 0.12);
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item--current .hcgpt-chat-actions {
    opacity: 1;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item--just-added {
    animation: hcgptChatSlideIn 0.35s ease-out;
}

@keyframes hcgptChatSlideIn {
    from {
        transform: translateX(-14px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-title-text {
    flex-grow: 1;
    font-size: var(--hcgpt-font-size-14);
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--hcgpt-line-height-150);
    padding-right: 0;
    transition: padding-right 0.3s ease;
    font-family: var(--hcgpt-font-sans);
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item:hover {
    background-color: var(--hcgpt-surface-hover);
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item:hover,
body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item.menu-open,
body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item--current:hover {
    border-radius: var(--hcgpt-menu-item-radius, 8px);
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item--current:hover {
    box-shadow: none;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item:hover .hcgpt-chat-actions {
    opacity: 1;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item:hover .hcgpt-chat-title-text {
    padding-right: 32px;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-item.menu-open .hcgpt-chat-title-text {
    padding-right: 32px;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-chat-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    flex-shrink: 0;
    margin-left: 8px;
}

body:not(.hcgpt-chat-page) .hcgpt-saved-chats-container .hcgpt-no-chats-found {
    color: #6c757d;
    font-style: italic;
    padding: 20px 12px;
    text-align: center;
}

/* ---------- 15. NEW CHAT BUTTON ------------------------------------- */
.hcgpt-new-chat-container {
    margin: 10px 0;
    text-align: left;
}

.hcgpt-new-chat-btn {
    cursor: pointer;
    border-radius: 4px;
    border: none;
    width: 100%;
}

.hcgpt-new-chat-btn.primary {
    background: #0073aa;
    color: black;
    padding: 10px 20px;
    font-size: var(--hcgpt-font-size-14);
    font-family: var(--hcgpt-font-sans);
}

.hcgpt-new-chat-btn.secondary {
    background: #f7f7f7;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 20px;
    font-size: var(--hcgpt-font-size-14);
    font-family: var(--hcgpt-font-sans);
}

.hcgpt-new-chat-btn.default {
    background: var(--hcgpt-surface);
    color: #515151;
    padding: 8px 16px;
    font-size: var(--hcgpt-font-size-13);
    margin: 0px 0;
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
}

.hcgpt-new-chat-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    transition: all 0.2s ease;
    background: #f0f0f0;
}

.hcgpt-new-chat-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.hcgpt-new-chat-btn .dashicons {
    margin-right: 5px;
    font-size: var(--hcgpt-font-size-16);
    vertical-align: middle;
    font-family: var(--hcgpt-font-sans);
}

/* === Emotion Analyzer UI === */
.hcgpt-emotion-wrap {
    margin-top: 6px;
}

.hcgpt-emotion-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: var(--hcgpt-font-size-12);
    line-height: var(--hcgpt-line-height-16px);
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
}

.hcgpt-emotion-panel {
    margin-top: 6px;
    padding: 10px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid #eee;
    font-size: var(--hcgpt-font-size-12);
    display: none;
}

.hcgpt-emotion-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--hcgpt-font-size-12);
    background: #e6fffb;
    border: 1px solid #99f6e4;
}


/* ---------- 19. INPUT CONTAINER COMPATIBILITY ----------------------- */
#hcgpt-input-container {
    position: relative;
    bottom: auto;
    background: transparent;
    background-image: none;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    z-index: 100;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ---------- 20. PREF INVITE CTA ------------------------------------ */
#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--hcgpt-space-4);
    margin: 0 auto;
    padding: clamp(96px, 18vh, 180px) var(--hcgpt-space-4) var(--hcgpt-space-6);
    text-align: center;
    width: 100%;
}

#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .hcgpt-pref-invite-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--hcgpt-space-2);
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
}

#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .hcgpt-pref-invite-greeting {
    color: var(--hcgpt-color-text);
    font-family: var(--hcgpt-font-sans);
    font-size: clamp(var(--hcgpt-font-size-28), 2.8vw, var(--hcgpt-font-size-35));
    font-style: normal;
    font-weight: var(--hcgpt-font-weight-regular);
    letter-spacing: var(--hcgpt-letter-spacing-0);
    line-height: var(--hcgpt-line-height-120);
    margin: 0;
    text-transform: var(--hcgpt-text-transform-none);
}

#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .hcgpt-pref-invite-title {
    color: var(--hcgpt-color-text-muted);
    font-family: var(--hcgpt-font-sans);
    font-size: clamp(var(--hcgpt-font-size-24), 2.4vw, var(--hcgpt-font-size-35));
    font-style: normal;
    font-weight: var(--hcgpt-font-weight-light);
    letter-spacing: var(--hcgpt-letter-spacing-0);
    line-height: var(--hcgpt-line-height-125);
    margin: 0;
    max-width: 32ch;
    text-transform: var(--hcgpt-text-transform-none);
}

#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .pref-invite {
    display: flex;
    justify-content: center;
    margin: 0;
    width: 100%;
}

#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .pref-invite .start-chatting-btn.hcgpt-btn {
    background: var(--hcgpt-primary) !important;
    background-image: none !important;
    border-color: var(--hcgpt-primary) !important;
    border-radius: var(--hcgpt-radius-full);
    box-shadow: var(--hcgpt-shadow-sm);
    color: var(--hcgpt-color-on-primary) !important;
    display: inline-flex;
    font-size: var(--hcgpt-text-base);
    font-weight: var(--hcgpt-font-weight-semibold);
    justify-content: center;
    margin: 0;
    min-width: 280px;
    padding: var(--hcgpt-space-3) var(--hcgpt-space-7);
    text-decoration: none;
    text-transform: var(--hcgpt-text-transform-none);
}

#hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .pref-invite .start-chatting-btn.hcgpt-btn:hover {
    background: var(--hcgpt-primary-hover) !important;
    background-image: none !important;
    border-color: var(--hcgpt-primary-hover) !important;
    color: var(--hcgpt-color-on-primary) !important;
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    #hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message {
        padding: clamp(72px, 12vh, 112px) var(--hcgpt-space-3) var(--hcgpt-space-5);
    }

    #hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .hcgpt-pref-invite-title {
        font-size: var(--hcgpt-font-size-22);
        max-width: 24ch;
    }

    #hcgpt-unified-chat-wrapper .hcgpt-preferences-invite-message .pref-invite .start-chatting-btn.hcgpt-btn {
        min-width: 0;
        width: min(320px, 100%);
    }
}

/* Regola rimossa - ora gestita nella sezione @media (max-width: 767.98px) sopra */

/* ---------- 24. MESSAGE STAR ICON & FEEDBACK BUTTONS STYLES -------- */
.hcgpt-message-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1px;
    min-height: 28px;
}

.hcgpt-message-star-icon {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    /* FIX MINIMO: Previene saltello durante caricamento */
    min-width: 24px !important;
    min-height: 24px !important;
    object-fit: cover !important;
}

.hcgpt-feedback-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    /* Spazio sopra la linea */
    margin-left: 24px;
    /* Aggiunge spazio a sinistra per allineare con il testo del bot */
    padding-top: 10px;
    /* Spazio tra linea e icone */
    border-top: 1px solid #e0e0e0;
    /* Linea grigia separatore */
    background: none;
    /* Rimuove qualsiasi sfondo */
    box-shadow: none;
    /* Rimuove qualsiasi ombra */
    margin-bottom: 8px;
}

/* Stili per i pulsanti di feedback sotto i messaggi del bot - Icone "nude" */
.hcgpt-feedback-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    /* Rimuove completamente il padding per eliminare il box */
    margin: 0 !important;
    cursor: pointer;
    transition: none;
    /* Rimuove tutte le transizioni dal pulsante */
    color: #888;
    /* Colore grigio di partenza per l'icona */
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 0 !important;
    /* Rimuove qualsiasi border-radius */
    box-shadow: none !important;
    /* Rimuove qualsiasi ombra */
    outline: none !important;
    /* Rimuove l'outline */
}

/* Hover effect - enhanced visibility for all feedback icons */
.hcgpt-feedback-btn:hover {
    background: none !important;
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Enhanced hover - darker stroke with subtle glow effect */
.hcgpt-feedback-btn:hover svg {
    stroke: #333 !important;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
}

/* Base SVG styles - smooth color transition */
.hcgpt-feedback-btn svg {
    stroke: #888;
    fill: none;
    transition: stroke 0.2s ease, fill 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Le regole CSS per il menu sono state completamente rimosse */

/* Responsive design per schermi piccoli */
@media (max-width: 767.98px) {
    /* Nessuno stile specifico richiesto */
}

@media (max-width: 480px) {
    /* Stili del menu rimossi */
}

/* Positioning owned by ui-components.css */


:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-tool-auto-message .hcgpt-message-content {
    position: relative;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-tool-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hcgpt-accent) 25%, var(--hcgpt-color-border));
    background: color-mix(in srgb, var(--hcgpt-accent) 10%, var(--hcgpt-surface));
    color: var(--hcgpt-color-text-muted);
    font-size: var(--hcgpt-font-size-11);
    font-weight: var(--hcgpt-font-weight-semibold);
    letter-spacing: var(--hcgpt-letter-spacing-001em);
    text-transform: var(--hcgpt-text-transform-uppercase);
}

.hcgpt-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 1px 1px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Il container tipico dell'input ha già una classe o ID. Non crearne di nuovi. */
#hcgpt-input-wrap,
.hcgpt-input-wrap,
.hcgpt-input-wrapper {
    position: relative;
}


/* Formula chips (chat + Formula Book) */
.hcgpt-formula-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #111827;
    font-size: var(--hcgpt-font-size-12);
    letter-spacing: var(--hcgpt-letter-spacing-002em);
    font-family: var(--hcgpt-font-mono);
}

.hcgpt-formula-label {
    opacity: .75;
    font-weight: var(--hcgpt-font-weight-medium);
}

.hcgpt-formula-value {
    font-weight: var(--hcgpt-font-weight-semibold);
}

/* Formula Save Button */
.hcgpt-formula-wrap {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.hcgpt-formula-wrap--block {
    display: block;
}

.hcgpt-save-formula {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--hcgpt-surface);
    border: 1px solid var(--hcgpt-color-border, #e5e7eb);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-14);
    font-weight: var(--hcgpt-font-weight-bold);
    line-height: 1;
    color: var(--hcgpt-color-text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    z-index: 3;
}

.hcgpt-formula-wrap--block .hcgpt-save-formula {
    top: 8px;
    right: 8px;
}

.hcgpt-save-formula:hover,
.hcgpt-save-formula:focus-visible {
    background: var(--hcgpt-surface-hover, #f3f4f6);
    border-color: var(--hcgpt-color-border-strong, var(--hcgpt-color-border, #e5e7eb));
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

/* Unified layout main column & sticky composer */
#hcgpt-unified-chat-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100% !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

body.admin-bar #hcgpt-unified-chat-wrapper {
    min-height: 0;
    height: 100%;
}

/* Fix admin-bar scroll issue on app shell */
body.admin-bar .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] {
    min-height: calc(100vh - var(--hcgpt-admin-offset, 32px));
}

html.hcgpt-app-shell-lock {
    overflow: hidden;
    height: 100%;
    overscroll-behavior-y: none;
}

body.hcgpt-app-shell-lock {
    overflow: hidden;
    height: 100vh;
    overscroll-behavior-y: none;
}

@supports (height: 100dvh) {
    body.hcgpt-app-shell-lock {
        height: 100dvh;
    }
}

body.hcgpt-app-shell-lock.admin-bar {
    height: calc(100vh - var(--hcgpt-admin-offset, 32px));
}

@supports (height: 100dvh) {
    body.hcgpt-app-shell-lock.admin-bar {
        height: calc(100dvh - var(--hcgpt-admin-offset, 32px));
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar .hcgpt-app-shell.hcgpt-scope[data-shell="v2"] {
        min-height: calc(100vh - var(--hcgpt-admin-offset, 46px));
    }
}

#hcgpt-unified-chat-wrapper .hcgpt-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    min-width: 0;
    align-self: stretch;
    max-width: 1120px;
    margin: 0 auto;
    --hcgpt-chat-shell-pad: 20px;
    padding: 0 var(--hcgpt-chat-shell-pad);
    min-height: 0 !important;
    height: 100%;
    max-height: 100%;
    position: relative;
    overflow: hidden;
}

/* Neutralizza lo stile "card" dell'account quando la chat personalizzata vive nel layout unificato */
#hcgpt-unified-chat-wrapper .hcgpt-shell .hcgpt-personalized-chat.hcgpt-scope {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

@media (max-width: 767.98px) {
    #hcgpt-unified-chat-wrapper .hcgpt-shell {
        --hcgpt-chat-shell-pad: 0px;
        padding: 0;
    }
}

/* --- User Dropdown Item with Toggle --- */
.hcgpt-suggestions-toggle-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 16px 8px 12px !important;
    cursor: default !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.hcgpt-suggestions-toggle-item:hover {
    background: transparent !important;
}

/* --- Theme select row --- */
.hcgpt-theme-select-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 16px 8px 12px !important;
    cursor: default !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.hcgpt-theme-select-item:hover {
    background: transparent !important;
}

.hcgpt-theme-select-item .hcgpt-user-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
}

.hcgpt-theme-select-item .hcgpt-theme-select {
    min-width: 120px;
    max-width: 160px;
    flex-shrink: 0;
    padding: 6px 10px !important;
    border: 1px solid var(--hcgpt-color-border) !important;
    background: var(--hcgpt-color-surface) !important;
    color: var(--hcgpt-color-text) !important;
    border-radius: 12px !important;
    font-size: var(--hcgpt-font-size-12) !important;
    min-height: 28px !important;
    width: auto !important;
}

@media (max-width: 480px) {
    .hcgpt-theme-select-item .hcgpt-theme-select {
        min-width: 96px;
        max-width: 120px;
    }
}

/* --- Toggle Switch Component --- */
.hcgpt-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
    margin-left: auto;
    flex-shrink: 0;
    max-width: fit-content;
    border-radius: 16px;
    transition: background 0.2s ease;
}

.hcgpt-toggle-switch:hover {
    background: transparent;
}

.hcgpt-toggle-switch:hover .hcgpt-toggle-track {
    border-color: #888;
}

.hcgpt-toggle-switch:hover .hcgpt-toggle-thumb {
    background: #777;
}

.hcgpt-toggle-switch[data-state="on"]:hover .hcgpt-toggle-track {
    border-color: #2d9249;
}

.hcgpt-toggle-switch[data-state="on"]:hover .hcgpt-toggle-thumb {
    background: #2d9249;
}

.hcgpt-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    background: transparent;
    border: 2px solid #aaa;
    border-radius: 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

.hcgpt-toggle-switch[data-state="on"] .hcgpt-toggle-track {
    background: transparent;
    border-color: #34a853;
}

.hcgpt-toggle-thumb {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #999;
    border-radius: 50%;
    box-shadow: none;
    transition: all 0.2s ease;
    transform: translateX(3px);
}

.hcgpt-toggle-switch[data-state="on"] .hcgpt-toggle-thumb {
    transform: translateX(21px);
    background: #34a853;
}

.hcgpt-toggle-status {
    font-size: var(--hcgpt-font-size-12);
    font-weight: var(--hcgpt-font-weight-medium);
    color: #666;
    min-width: 28px;
    text-align: left;
    font-family: var(--hcgpt-font-sans);
}

.hcgpt-toggle-switch[data-state="on"] .hcgpt-toggle-status {
    color: #34a853;
}

/* --- Toggle Switch Compact Variant --- */
.hcgpt-toggle-switch--compact .hcgpt-toggle-track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    border-width: 2px;
}

.hcgpt-toggle-switch--compact .hcgpt-toggle-thumb {
    width: 12px;
    height: 12px;
    transform: translateX(3px);
}

.hcgpt-toggle-switch--compact[data-state="on"] .hcgpt-toggle-thumb {
    transform: translateX(18px);
}

.hcgpt-toggle-switch--compact .hcgpt-toggle-status {
    font-size: var(--hcgpt-font-size-11);
    min-width: 0;
    white-space: nowrap;
    padding-right: 6px;
    font-family: var(--hcgpt-font-sans);
}

/* --- Suggestions Toggle Item Label --- */
.hcgpt-suggestions-toggle-item .hcgpt-user-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- User dropdown item icons (all items: Suggestions, Theme, Logout, etc.) --- */
.hcgpt-user-dropdown-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hcgpt-user-dropdown-icon svg {
    width: 18px;
    height: 18px;
}

/* === HCGPT CHAT LAYOUT FIX — PROMPT 3 === */

/* Wrapper messaggi autoregolato: niente pagina infinita */
#hcgpt-unified-chat-wrapper .hcgpt-chat-messages {
    height: calc(100vh - 140px);
    /* header + input */
    overflow-y: auto;
    padding-bottom: calc(var(--hcgpt-bottom-gap, calc(var(--hcgpt-inputbar-h, 72px) + var(--hcgpt-suggestions-h, 0px) + env(safe-area-inset-bottom, 0px))) + var(--hcgpt-feedback-h, 0px) + 12px) !important;
}

/* Suggerimenti sempre sopra sidebar ma sotto modali */
.hcgpt-suggestions-flyout {
    position: absolute;
    z-index: 999990;
}

/* Z-index dropdown utente ancora più sopra */
.hcgpt-user-dropdown {
    z-index: 999999;
}

/* Evitare che suggestions vadano sotto la sidebar */
.hcgpt-suggestions-container {
    position: relative;
    z-index: 999995;
}

/* === END PROMPT 3 === */

.haircolorgpt-footer-text {
    font-family: var(--hcgpt-font-sans);
    font-size: var(--hcgpt-font-size-12);
    line-height: var(--hcgpt-line-height-150);
    color: #444444;
    /* Keep transparent to avoid bottom banding in light/dark. Do not restore solid background here. */
    background: transparent;
    background-image: none;
    margin: 0;
    padding-top: 2px;
    padding-bottom: 0;
    bottom: 0;
    text-align: center;
}

.haircolorgpt-footer-text a {
    color: #212121;
    text-decoration: none;
}

@media (max-width: 680px) {
    .haircolorgpt-footer-text {
        font-size: var(--hcgpt-font-size-10);
        font-family: var(--hcgpt-font-sans);
    }
}

/* ==========================================================================
   CONSOLIDATED STYLES - Previously in separate fix files
   ========================================================================== */

.hcgpt-message-user-images {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 6px;
}

.hcgpt-message-user-images .hcgpt-user-images-inline {
    margin-top: 0;
    justify-content: flex-end;
}

/* ---------- USER IMAGES INLINE (from user-images-inline.css) ------------- */
.hcgpt-user-images-inline {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hcgpt-user-images-inline img.hcgpt-user-upload {
    width: 120px;
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    -webkit-transform: none !important;
    transform: none !important;
}

@media (max-width: 600px) {
    .hcgpt-user-images-inline img.hcgpt-user-upload {
        max-width: 96px;
    }
}

/* ---------- BOT ICON FIX (from bot-icon-fix.css) ------------------------- */
.hcgpt-message-star-icon,
.hcgpt-message .hcgpt-message-star-icon,
.hcgpt-message-wrapper .hcgpt-message-star-icon,
.post-type-haircolorgpt_chat .hcgpt-message-star-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin-top: 2px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.post-content .hcgpt-message-star-icon,
.entry-content .hcgpt-message-star-icon,
.single-haircolorgpt_chat .hcgpt-message-star-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;
    max-height: none !important;
    float: none !important;
    clear: none !important;
    position: static !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

@media (max-width: 767.98px) {
    .hcgpt-message-star-icon {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
}

@media (max-width: 480px) {
    .hcgpt-message-star-icon {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
}

img.hcgpt-message-star-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

/* ---------- INPUT FIX (from frontend-input-fix.css) ---------------------- */
:root {
    --hcgpt-tools-left-width: 0px;
    --hcgpt-tools-right-width: 0px;
}

/* #hcgpt-input-box position è canonical in ui-components.css */

/* ---------- NEW CHAT BUTTON (from new-chat-button-custom.css) ------------ */
.hcgpt-new-chat-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: var(--hcgpt-font-size-14) !important;
    font-weight: var(--hcgpt-font-weight-regular) !important;
    line-height: var(--hcgpt-line-height-140) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.hcgpt-new-chat-link:hover {
    color: #222 !important;
    text-decoration: none !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.hcgpt-new-chat-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
}

.hcgpt-new-chat-text {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.hcgpt-new-chat-link.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
    color: #999 !important;
    text-decoration: none !important;
}

@media (max-width: 767.98px) {
    .hcgpt-new-chat-link {
        font-size: var(--hcgpt-font-size-14) !important;
        gap: 5px !important;
    }

    .hcgpt-new-chat-link svg {
        width: 14px !important;
        height: 14px !important;
    }
}


/* ======================================================================
   STOP NOTIFICATION - Messaggio di interruzione utente (stile bot message)
   ====================================================================== */
:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-stop-message {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 80px;
    clear: both;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-stop-message .hcgpt-stop-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--hcgpt-color-surface) !important;
    border: 1px solid var(--hcgpt-color-border);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: var(--hcgpt-shadow-base);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-stop-message .hcgpt-stop-icon {
    font-size: var(--hcgpt-font-size-18);
    color: var(--hcgpt-color-text);
    flex-shrink: 0;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-stop-message .hcgpt-stop-text {
    font-size: var(--hcgpt-font-size-14);
    font-weight: var(--hcgpt-font-weight-medium);
    color: var(--hcgpt-color-text);
    line-height: var(--hcgpt-line-height-140);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-restart-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--hcgpt-font-size-13);
    font-weight: var(--hcgpt-font-weight-semibold);
    color: var(--hcgpt-color-text) !important;
    background: var(--hcgpt-color-surface-2);
    border: 1px solid var(--hcgpt-color-border);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: 8px;
    flex-shrink: 0;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-restart-chat-btn svg {
    stroke: currentColor;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-restart-chat-btn:hover {
    background: var(--hcgpt-gray-900);
    color: var(--hcgpt-color-on-primary) !important;
    border-color: var(--hcgpt-gray-900);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-restart-chat-btn:hover svg {
    stroke: currentColor;
}

/* Mobile responsive */
@media (max-width: 600px) {
    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-stop-message .hcgpt-stop-notification-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 16px;
    }

    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-restart-chat-btn {
        margin-left: 0;
        margin-top: 4px;
    }
}



/* === Hotfix: prevent giant emojis / huge headings in bot messages === */
.message-bot h1 {
    font-size: var(--hcgpt-font-size-28) !important;
    line-height: var(--hcgpt-line-height-120) !important;
    margin: 10px 0 !important;
    font-family: var(--hcgpt-font-heading);
    font-weight: var(--hcgpt-font-weight-extrabold);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
    color: var(--hcgpt-type-editorial-strong);
}

.message-bot h2 {
    font-size: var(--hcgpt-font-size-18) !important;
    line-height: var(--hcgpt-line-height-125) !important;
    margin: 10px 0 !important;
    font-family: var(--hcgpt-font-heading);
    font-weight: var(--hcgpt-font-weight-bold);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-uppercase);
    letter-spacing: var(--hcgpt-letter-spacing-004em);
    color: var(--hcgpt-type-structural-soft);
}

.message-bot h3 {
    font-size: var(--hcgpt-font-size-16) !important;
    line-height: var(--hcgpt-line-height-130) !important;
    margin: 8px 0 !important;
    font-family: var(--hcgpt-font-heading);
    font-weight: var(--hcgpt-font-weight-medium);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
    color: var(--hcgpt-type-editorial-mid);
}

.message-bot p,
.message-bot li {
    font-size: var(--hcgpt-font-size-14) !important;
    line-height: var(--hcgpt-line-height-155) !important;
}
.message-bot li {
    font-family: var(--hcgpt-font-sans);
}

.message-bot p {
    font-family: var(--hcgpt-font-sans);
    font-weight: var(--hcgpt-font-weight-thin);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}


/* If emojis are rendered as images (Twemoji or similar), keep them normal size */
.message-bot img.emoji,
.message-bot img[src*="twemoji"],
.message-bot img[src*="emoji"] {
    width: 1.1em !important;
    height: 1.1em !important;
    max-width: 1.1em !important;
    max-height: 1.1em !important;
    display: inline-block !important;
    vertical-align: -0.12em !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* ===== Phase 5 - Theme coverage (scoped) ===== */
.hcgpt-chat-container.hcgpt-scope,
.hcgpt-scope .hcgpt-chat-container,
.hcgpt-scope #hcgpt-chat-container {
    background: transparent !important;
    color: var(--hcgpt-color-text) !important;
}

.hcgpt-scope #hcgpt-chat-history {
    background: var(--hcgpt-color-bg) !important;
    color: var(--hcgpt-color-text) !important;
}

.hcgpt-scope .hcgpt-chat-input,
.hcgpt-scope #hcgpt-input-container {
    background: transparent !important;
    color: var(--hcgpt-color-text) !important;
    border-color: var(--hcgpt-color-border) !important;
}

/* ===== Dark theme overrides (Chat UI) ===== */
:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .haircolorgpt-footer-text {
    background: transparent !important;
    color: var(--hcgpt-color-text-muted);
    border-top: 0;
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .haircolorgpt-footer-text a {
    color: var(--hcgpt-accent);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-menu-separator {
    border-top-color: var(--hcgpt-color-border);
}

body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-saved-chats-container .hcgpt-chats-header {
    color: var(--hcgpt-color-text-muted);
}

body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-saved-chats-container .hcgpt-chat-title-text {
    color: var(--hcgpt-color-text-muted);
}

body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-saved-chats-container .hcgpt-chat-item:hover {
    background-color: var(--hcgpt-color-surface-2);
}

body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-saved-chats-container .hcgpt-chat-item--current {
    background-color: var(--hcgpt-color-surface-2);
}

body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-saved-chats-container .hcgpt-chat-item--current .hcgpt-chat-title-text,
body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-saved-chats-container .hcgpt-chat-item:hover .hcgpt-chat-title-text {
    color: var(--hcgpt-color-text);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-stop-message .hcgpt-stop-notification-content {
    background: var(--hcgpt-color-surface) !important;
    border-color: var(--hcgpt-color-border);
    box-shadow: none;
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-stop-message .hcgpt-stop-icon,
:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-stop-message .hcgpt-stop-text {
    color: var(--hcgpt-color-text);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-restart-chat-btn {
    background: var(--hcgpt-color-surface-2);
    border-color: var(--hcgpt-color-border);
    color: var(--hcgpt-color-text) !important;
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-restart-chat-btn svg {
    stroke: var(--hcgpt-color-text);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-restart-chat-btn:hover {
    background: var(--hcgpt-color-surface-3);
    color: var(--hcgpt-color-text) !important;
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-feedback-actions {
    border-top-color: var(--hcgpt-color-border);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-feedback-btn {
    color: var(--hcgpt-color-text-muted);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-feedback-btn:not(.active) svg {
    stroke: var(--hcgpt-color-text-muted) !important;
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-feedback-btn:hover svg {
    stroke: var(--hcgpt-color-text) !important;
}

@media (prefers-color-scheme: dark) {
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .haircolorgpt-footer-text {
        background: transparent;
        color: var(--hcgpt-color-text-muted);
        border-top: 0;
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .haircolorgpt-footer-text a {
        color: var(--hcgpt-accent);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-menu-separator {
        border-top-color: var(--hcgpt-color-border);
    }

    body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-saved-chats-container .hcgpt-chats-header {
        color: var(--hcgpt-color-text-muted);
    }

    body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-saved-chats-container .hcgpt-chat-title-text {
        color: var(--hcgpt-color-text-muted);
    }

    body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-saved-chats-container .hcgpt-chat-item:hover {
        background-color: var(--hcgpt-color-surface-2);
    }

    body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-saved-chats-container .hcgpt-chat-item--current {
        background-color: var(--hcgpt-color-surface-2);
    }

    body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-saved-chats-container .hcgpt-chat-item--current .hcgpt-chat-title-text,
    body:not(.hcgpt-chat-page) :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-saved-chats-container .hcgpt-chat-item:hover .hcgpt-chat-title-text {
        color: var(--hcgpt-color-text);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-stop-message .hcgpt-stop-notification-content {
        background: var(--hcgpt-color-surface) !important;
        border-color: var(--hcgpt-color-border);
        box-shadow: none;
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-stop-message .hcgpt-stop-icon,
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-stop-message .hcgpt-stop-text {
        color: var(--hcgpt-color-text);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-restart-chat-btn {
        background: var(--hcgpt-color-surface-2);
        border-color: var(--hcgpt-color-border);
        color: var(--hcgpt-color-text) !important;
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-restart-chat-btn svg {
        stroke: var(--hcgpt-color-text);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-restart-chat-btn:hover {
        background: var(--hcgpt-color-surface-3);
        color: var(--hcgpt-color-text) !important;
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-feedback-actions {
        border-top-color: var(--hcgpt-color-border);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-feedback-btn {
        color: var(--hcgpt-color-text-muted);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-feedback-btn:not(.active) svg {
        stroke: var(--hcgpt-color-text-muted) !important;
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-feedback-btn:hover svg {
        stroke: var(--hcgpt-color-text) !important;
    }

}