/* ==================== KO2 PREMIUM UI ROLLOUT ==================== */
:root {
    --workstation-bg: #0b0911;
    --workstation-canvas: #100d18;
    --workstation-panel: #181324;
    --workstation-panel-raised: #211a2f;
    --workstation-rail: #120f1b;
    --workstation-rail-active: #eee9ff;
    --workstation-platinum: #f0eaff;
    --workstation-text: #f5f1fb;
    --workstation-text-muted: #c8bdd9;
    --workstation-text-soft: #82768f;
    --workstation-border: #342946;
    --workstation-border-strong: #50406b;
    --workstation-hairline: rgba(240, 234, 255, 0.14);
    --workstation-stage: #0d0a14;
    --workstation-purple: #9b6dff;
    --workstation-cyan: #4ab3ff;
    --workstation-accent: #9b6dff;
    --workstation-accent-strong: #cab8ff;
    --workstation-focus: #4ab3ff;
    --workstation-success: #10b981;
    --workstation-warning: #d8ad5f;
    --workstation-danger: #e36b7a;
    --workstation-shadow: 0 28px 80px rgba(3, 2, 7, 0.44);
    --workstation-shadow-soft: 0 14px 42px rgba(3, 2, 7, 0.3);
    --workstation-radius: 6px;
    --workstation-radius-sm: 4px;
    --premium-focus-ring: 0 0 0 2px rgba(74, 179, 255, 0.42);
}

.ko2-premium {
    --bg-void: var(--workstation-bg);
    --bg-primary: var(--workstation-canvas);
    --bg-secondary: var(--workstation-panel);
    --bg-tertiary: var(--workstation-panel-raised);
    --bg-elevated: var(--workstation-panel-raised);
    --bg-glass: var(--workstation-panel);
    --glass-bg: var(--workstation-panel);
    --card-bg: var(--workstation-panel);
    --card-border: var(--workstation-hairline);
    --border-subtle: var(--workstation-border);
    --border-default: var(--workstation-border);
    --border-strong: var(--workstation-border-strong);
    --accent-primary: var(--workstation-purple);
    --accent-hover: var(--workstation-accent-strong);
    --accent-cyan: var(--workstation-cyan);
    --accent-green: var(--workstation-success);
    --neon-purple: var(--workstation-purple);
    --electric-blue: var(--workstation-cyan);
    --text-primary: var(--workstation-text);
    --text-heading: var(--workstation-platinum);
    --text-secondary: var(--workstation-text-muted);
    --text-body: var(--workstation-text-muted);
    --text-muted: var(--workstation-text-soft);
    min-height: 100vh;
    min-height: 100dvh;
    background:
        linear-gradient(180deg, #0f0b18 0%, var(--workstation-bg) 42%, #07060b 100%);
    color: var(--workstation-text);
    letter-spacing: 0;
}

.ko2-premium,
.ko2-premium button,
.ko2-premium input,
.ko2-premium textarea,
.ko2-premium select {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ko2-premium * {
    box-sizing: border-box;
}

.ko2-premium .scroll-reveal,
.ko2-premium .scroll-reveal-stagger,
.ko2-premium .reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.ko2-premium h1,
.ko2-premium h2,
.ko2-premium h3 {
    color: var(--workstation-platinum);
    letter-spacing: 0;
}

.ko2-premium a {
    color: inherit;
}

.ko2-premium .premium-panel,
.ko2-premium .auth-card,
.ko2-premium .auth-panel,
.ko2-premium .balance-card,
.ko2-premium .subscription-section,
.ko2-premium .comparison-section,
.ko2-premium .unified-packages-section,
.ko2-premium .crypto-payment-result,
.ko2-premium .info-card,
.ko2-premium .history-toolbar,
.ko2-premium .history-card,
.ko2-premium .sidebar,
.ko2-premium .header,
.ko2-premium .welcome-state,
.ko2-premium .input-area,
.ko2-premium .modal-content,
.ko2-premium .share-modal-content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(33, 26, 47, 0.82), rgba(24, 19, 36, 0.98)) !important;
    border: 1px solid var(--workstation-hairline) !important;
    border-radius: var(--workstation-radius) !important;
    box-shadow: var(--workstation-shadow-soft) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ko2-premium .premium-panel::before,
.ko2-premium .auth-card::before,
.ko2-premium .auth-panel::before,
.ko2-premium .balance-card::before,
.ko2-premium .subscription-section::before,
.ko2-premium .comparison-section::before,
.ko2-premium .unified-packages-section::before,
.ko2-premium .crypto-payment-result::before,
.ko2-premium .history-toolbar::before,
.ko2-premium .history-card::before,
.ko2-premium .sidebar::before,
.ko2-premium .header::before,
.ko2-premium .welcome-state::before,
.ko2-premium .input-area::before,
.ko2-premium .modal-content::before,
.ko2-premium .share-modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 234, 255, 0.26),
        rgba(74, 179, 255, 0.18),
        transparent
    );
    pointer-events: none;
    z-index: 1;
}

.ko2-premium .premium-button-primary,
.ko2-premium .btn-primary,
.ko2-premium .btn--primary,
.ko2-premium .buy-btn,
.ko2-premium .stars-package-btn,
.ko2-premium .memory-save-btn,
.ko2-premium #send-button,
.ko2-premium .google-signin-btn,
.ko2-premium .new-chat-btn {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #b89cff 0%, var(--workstation-accent) 48%, #7ecbff 100%) !important;
    border: 1px solid var(--workstation-accent) !important;
    border-radius: var(--workstation-radius) !important;
    color: #0b0911 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 12px 28px rgba(155, 109, 255, 0.24) !important;
}

.ko2-premium .premium-button-primary::after,
.ko2-premium .btn-primary::after,
.ko2-premium .btn--primary::after,
.ko2-premium .buy-btn::after,
.ko2-premium .stars-package-btn::after,
.ko2-premium .memory-save-btn::after,
.ko2-premium #send-button::after,
.ko2-premium .google-signin-btn::after,
.ko2-premium .new-chat-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
    pointer-events: none;
}

.ko2-premium .btn,
.ko2-premium .btn--ghost,
.ko2-premium .btn--glass,
.ko2-premium .help-btn,
.ko2-premium .back-link,
.ko2-premium .more-menu-btn,
.ko2-premium .sidebar-tab,
.ko2-premium .mode-tab,
.ko2-premium .model-selector-btn,
.ko2-premium .filter-btn,
.ko2-premium .refresh-btn,
.ko2-premium .manage-sub-btn,
.ko2-premium .copy-btn,
.ko2-premium .message-action-btn,
.ko2-premium .share-action-btn,
.ko2-premium .memory-cancel-btn,
.ko2-premium .add-memory-btn {
    border-radius: var(--workstation-radius) !important;
    border: 1px solid var(--workstation-border) !important;
    background: var(--workstation-panel-raised) !important;
    color: var(--workstation-text) !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}

.ko2-premium .btn:hover,
.ko2-premium .btn--ghost:hover,
.ko2-premium .btn--glass:hover,
.ko2-premium .help-btn:hover,
.ko2-premium .back-link:hover,
.ko2-premium .more-menu-btn:hover,
.ko2-premium .sidebar-tab:hover,
.ko2-premium .mode-tab:hover,
.ko2-premium .model-selector-btn:hover,
.ko2-premium .filter-btn:hover,
.ko2-premium .refresh-btn:hover,
.ko2-premium .manage-sub-btn:hover,
.ko2-premium .copy-btn:hover,
.ko2-premium .message-action-btn:hover,
.ko2-premium .share-action-btn:hover,
.ko2-premium .memory-cancel-btn:hover,
.ko2-premium .add-memory-btn:hover {
    transform: none !important;
    border-color: var(--workstation-border-strong) !important;
    background: #2a213c !important;
    color: var(--workstation-platinum) !important;
}

.ko2-premium input,
.ko2-premium textarea,
.ko2-premium select,
.ko2-premium .auth-input,
.ko2-premium .memory-input {
    background:
        linear-gradient(180deg, rgba(16, 13, 24, 0.95), rgba(11, 9, 17, 0.98)) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
    color: var(--workstation-text) !important;
    box-shadow: none !important;
}

.ko2-premium input:focus,
.ko2-premium textarea:focus,
.ko2-premium select:focus,
.ko2-premium .auth-input:focus,
.ko2-premium .memory-input:focus {
    outline: none !important;
    border-color: var(--workstation-focus) !important;
    box-shadow: var(--premium-focus-ring) !important;
}

.ko2-premium .cost-badge,
.ko2-premium .credits-badge,
.ko2-premium .credit-badge,
.ko2-premium .card-badge,
.ko2-premium .model-badge,
.ko2-premium .active-sub-badge,
.ko2-premium .discount-badge,
.ko2-premium .history-count {
    border-radius: var(--workstation-radius-sm) !important;
    border: 1px solid rgba(155, 109, 255, 0.34) !important;
    background: rgba(155, 109, 255, 0.14) !important;
    color: #d9ccff !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}

.ko2-premium .spinner {
    border-color: var(--workstation-border) !important;
    border-top-color: var(--workstation-accent) !important;
    border-right-color: var(--workstation-focus) !important;
    box-shadow: none !important;
}

/* Login */
.premium-login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.premium-login-shell .bg-animation {
    background:
        linear-gradient(120deg, rgba(74, 179, 255, 0.05), transparent 35%),
        linear-gradient(240deg, rgba(155, 109, 255, 0.08), transparent 42%) !important;
}

.premium-login-shell .container {
    max-width: 440px !important;
    padding: 28px 18px !important;
}

.premium-login-shell .auth-card {
    padding: 30px !important;
    text-align: left !important;
}

.premium-login-shell .header {
    margin-bottom: 24px !important;
    text-align: left !important;
}

.premium-login-shell .logo-container {
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 18px !important;
    border-radius: var(--workstation-radius) !important;
    background:
        linear-gradient(135deg, var(--workstation-platinum), #d8cbff 52%, #aee0ff) !important;
    box-shadow: var(--workstation-shadow-soft) !important;
}

.premium-login-shell h1 {
    color: var(--workstation-platinum) !important;
    font-size: clamp(1.55rem, 4vw, 2rem) !important;
    font-weight: 760 !important;
}

.premium-login-shell .subtitle,
.premium-login-shell .telegram-info,
.premium-login-shell .back-link a {
    color: var(--workstation-text-muted) !important;
}

.premium-login-shell .credits-badge {
    margin-top: 12px !important;
    padding: 7px 10px !important;
}

.premium-login-shell #google-signin-btn > div,
.premium-login-shell .telegram-info {
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
}

.premium-login-shell .divider {
    color: var(--workstation-text-soft) !important;
}

.premium-login-shell .divider::before,
.premium-login-shell .divider::after {
    background: var(--workstation-border) !important;
}

/* History */
.premium-history-shell .page-container {
    max-width: 1440px !important;
    padding: 18px clamp(14px, 2.2vw, 32px) 60px !important;
}

.premium-history-shell .page-header {
    text-align: left !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--workstation-border) !important;
}

.premium-history-shell .page-header h1 {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--workstation-platinum) !important;
    font-size: clamp(1.5rem, 2.2vw, 2.05rem) !important;
    font-weight: 760 !important;
}

.premium-history-shell .auth-section {
    max-width: none !important;
    margin: 0 0 18px !important;
}

.premium-history-shell .auth-panel.logged-in {
    justify-content: space-between !important;
    padding: 12px !important;
}

.premium-history-shell .history-section {
    display: block;
}

.premium-history-shell .history-toolbar {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto !important;
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}

.premium-history-shell .history-search {
    min-width: 0 !important;
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
}

.premium-history-shell .history-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
}

.premium-history-shell .filter-btn.active {
    background:
        linear-gradient(135deg, var(--workstation-platinum), #d8cbff 52%, #aee0ff) !important;
    color: #120f1b !important;
    border-color: var(--workstation-rail-active) !important;
}

.premium-history-shell .history-grid {
    gap: 14px !important;
}

.premium-history-shell .history-card {
    border-radius: var(--workstation-radius) !important;
    transform: none !important;
}

.premium-history-shell .history-card:hover {
    transform: none !important;
    border-color: var(--workstation-border-strong) !important;
}

.premium-history-shell .card-media {
    background:
        linear-gradient(180deg, rgba(15, 11, 24, 0.97), rgba(8, 7, 13, 0.98)) !important;
    border-bottom: 1px solid var(--workstation-border) !important;
}

/* Chat */
.premium-chat-shell {
    overflow: hidden;
    max-width: 100vw;
}

.premium-chat-shell .bg-animation,
.premium-chat-shell .particles {
    display: none !important;
}

.premium-chat-shell .main-wrapper {
    background:
        linear-gradient(180deg, #0f0b18 0%, var(--workstation-bg) 42%, #07060b 100%) !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.premium-chat-shell .sidebar {
    width: 280px !important;
    padding: 10px !important;
    background:
        linear-gradient(180deg, rgba(33, 26, 47, 0.88), rgba(18, 15, 27, 0.96)) !important;
}

.premium-chat-shell .sidebar-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}

.premium-chat-shell .sidebar-tab {
    min-height: 38px !important;
    font-size: 0.86rem !important;
}

.premium-chat-shell .sidebar-tab.active,
.premium-chat-shell .mode-tab.active {
    background:
        linear-gradient(135deg, var(--workstation-platinum), #d8cbff 52%, #aee0ff) !important;
    color: #120f1b !important;
    border-color: var(--workstation-rail-active) !important;
}

.premium-chat-shell .discord-btn,
.premium-chat-shell .sidebar-referral-widget,
.premium-chat-shell .conversation-item,
.premium-chat-shell .memory-item,
.premium-chat-shell .model-dropdown,
.premium-chat-shell .more-menu-dropdown,
.premium-chat-shell .model-option {
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
    box-shadow: none !important;
}

.premium-chat-shell .conversation-item.active,
.premium-chat-shell .model-option.active,
.premium-chat-shell .model-option:hover {
    background: rgba(240, 234, 255, 0.055) !important;
    border-color: var(--workstation-border-strong) !important;
}

.premium-chat-shell .container {
    background: transparent !important;
    border: 0 !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.premium-chat-shell .header {
    min-height: 70px !important;
    margin: 10px 10px 0 !important;
    padding: 10px 12px !important;
}

.premium-chat-shell .logo {
    border-radius: var(--workstation-radius) !important;
    background:
        linear-gradient(135deg, var(--workstation-platinum), #d8cbff 52%, #aee0ff) !important;
    box-shadow: none !important;
}

.premium-chat-shell .header-title h1,
.premium-chat-shell .header-conv-title {
    color: var(--workstation-platinum) !important;
}

.premium-chat-shell .header-controls {
    gap: 8px !important;
}

.premium-chat-shell .mode-tabs {
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
}

.premium-chat-shell .model-selector-btn,
.premium-chat-shell .credit-badge {
    min-height: 38px !important;
}

.premium-chat-shell .chat-area {
    margin: 10px !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
    background:
        linear-gradient(180deg, rgba(13, 10, 20, 0.96), rgba(7, 6, 11, 0.98)),
        linear-gradient(90deg, rgba(240, 234, 255, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(240, 234, 255, 0.035) 1px, transparent 1px) !important;
    background-size: auto, 42px 42px, 42px 42px !important;
}

.premium-chat-shell .welcome-state {
    width: min(720px, calc(100% - 28px)) !important;
    margin: 48px auto !important;
    padding: clamp(20px, 3vw, 34px) !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.premium-chat-shell .welcome-state-logo {
    width: 54px !important;
    height: 54px !important;
    margin: 0 0 18px !important;
    border-radius: var(--workstation-radius) !important;
    background:
        linear-gradient(135deg, var(--workstation-platinum), #d8cbff 52%, #aee0ff) !important;
    box-shadow: none !important;
}

.premium-chat-shell .welcome-state h2 {
    font-size: clamp(1.4rem, 2.8vw, 2.15rem) !important;
    color: var(--workstation-platinum) !important;
}

.premium-chat-shell .suggestion-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.premium-chat-shell .suggestion-chip {
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
    box-shadow: none !important;
}

.premium-chat-shell .suggestion-chip:hover {
    transform: none !important;
    border-color: var(--workstation-border-strong) !important;
}

.premium-chat-shell .message {
    border-radius: var(--workstation-radius) !important;
    border: 1px solid var(--workstation-border) !important;
    background: rgba(24, 19, 36, 0.92) !important;
    color: var(--workstation-text) !important;
    box-shadow: none !important;
}

.premium-chat-shell .message.user {
    background: rgba(155, 109, 255, 0.16) !important;
    border-color: rgba(155, 109, 255, 0.35) !important;
}

.premium-chat-shell .message.assistant {
    background: rgba(16, 13, 24, 0.96) !important;
    border-color: var(--workstation-hairline) !important;
}

.premium-chat-shell .input-area {
    margin: 0 10px 10px !important;
    padding: 10px !important;
}

.premium-chat-shell .input-container {
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
}

.premium-chat-shell #message-input {
    min-height: 44px !important;
    background: transparent !important;
    border: 0 !important;
}

.premium-chat-shell .api-key-modal {
    background: rgba(7, 6, 11, 0.72) !important;
}

/* Buy credits */
.premium-credits-shell .bg-gradient {
    background:
        linear-gradient(120deg, rgba(74, 179, 255, 0.05), transparent 35%),
        linear-gradient(240deg, rgba(155, 109, 255, 0.08), transparent 42%) !important;
}

.premium-credits-shell .container {
    max-width: 1220px !important;
    padding: 24px clamp(14px, 2.2vw, 32px) 70px !important;
}

.premium-credits-shell .header {
    margin-bottom: 18px !important;
    padding: 18px !important;
    text-align: left !important;
}

.premium-credits-shell .header-icon {
    display: none !important;
}

.premium-credits-shell .header h1 {
    color: var(--workstation-platinum) !important;
    font-size: clamp(1.5rem, 2.2vw, 2.05rem) !important;
}

.premium-credits-shell .subtitle {
    color: var(--workstation-text-muted) !important;
}

.premium-credits-shell .referral-promo-banner,
.premium-credits-shell .first-purchase-banner,
.premium-credits-shell .info-banner,
.premium-credits-shell .stars-tip-banner,
.premium-credits-shell .discount-badge,
.premium-credits-shell .secure-badge {
    background: var(--workstation-panel) !important;
    border: 1px solid var(--workstation-hairline) !important;
    border-radius: var(--workstation-radius) !important;
    box-shadow: none !important;
}

.premium-credits-shell .balance-card {
    margin: 12px 0 18px !important;
    padding: 18px !important;
}

.premium-credits-shell .balance-card .amount,
.premium-credits-shell .package-credits,
.premium-credits-shell .sub-plan-credits {
    color: var(--workstation-platinum) !important;
}

.premium-credits-shell .subscription-section,
.premium-credits-shell .comparison-section,
.premium-credits-shell .unified-packages-section {
    padding: clamp(16px, 2vw, 24px) !important;
    margin-bottom: 18px !important;
}

.premium-credits-shell .payment-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
}

.premium-credits-shell .payment-tab,
.premium-credits-shell .package-card,
.premium-credits-shell .sub-plan-card {
    position: relative;
    overflow: hidden;
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Package / sub cards carry an absolutely-positioned "Most Popular" badge at
   top:-12px; the shared overflow:hidden above clips it on the revenue surface.
   .payment-tab keeps overflow:hidden (no outside-positioned children). */
.premium-credits-shell .package-card,
.premium-credits-shell .sub-plan-card {
    overflow: visible;
}

.premium-credits-shell .payment-tab.active,
.premium-credits-shell .package-card.selected,
.premium-credits-shell .sub-plan-card.selected,
.premium-credits-shell .package-card.popular,
.premium-credits-shell .sub-plan-card.popular {
    border-color: var(--workstation-accent) !important;
    background: rgba(155, 109, 255, 0.13) !important;
}

.premium-credits-shell .payment-tab:hover,
.premium-credits-shell .package-card:hover,
.premium-credits-shell .sub-plan-card:hover {
    transform: none !important;
    border-color: var(--workstation-border-strong) !important;
}

.premium-credits-shell .packages-grid,
.premium-credits-shell .subscription-plans {
    gap: 12px !important;
}

.premium-credits-shell .comparison-scroll {
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
    overflow: auto !important;
}

.premium-credits-shell .comparison-table {
    background: var(--workstation-canvas) !important;
}

.premium-credits-shell .comparison-table th,
.premium-credits-shell .comparison-table td {
    border-color: var(--workstation-border) !important;
}

.premium-credits-shell .crypto-controls,
.premium-credits-shell .crypto-currency-select,
.premium-credits-shell .crypto-detail,
.premium-credits-shell .status-progress {
    background: var(--workstation-canvas) !important;
    border: 1px solid var(--workstation-border) !important;
    border-radius: var(--workstation-radius) !important;
}

@media (max-width: 1024px) {
    .premium-chat-shell .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: min(86vw, 320px) !important;
        max-width: 86vw !important;
        transform: translateX(-100%) !important;
    }

    .premium-chat-shell .sidebar.active {
        transform: translateX(0) !important;
    }

    .premium-chat-shell .main-wrapper,
    .premium-chat-shell .container,
    .premium-chat-shell .chat-area,
    .premium-chat-shell .input-area,
    .premium-chat-shell .header {
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    .premium-chat-shell .container {
        height: 100vh !important;
        height: 100dvh !important;
    }

    .premium-chat-shell .header {
        margin: 8px !important;
    }

    .premium-credits-shell .payment-tabs {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .premium-login-shell {
        align-items: stretch;
        padding: 12px;
    }

    .premium-login-shell .auth-card {
        padding: 22px !important;
    }

    .premium-history-shell .history-toolbar {
        grid-template-columns: 1fr !important;
    }

    .premium-history-shell .history-actions {
        justify-content: stretch !important;
    }

    .premium-chat-shell .header {
        min-height: auto !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    .premium-chat-shell .header-left {
        flex: 0 0 auto !important;
    }

    .premium-chat-shell .header-controls {
        flex: 1 1 100% !important;
        width: 100% !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .premium-chat-shell .header-controls::-webkit-scrollbar {
        display: none !important;
    }

    .premium-chat-shell .model-selector {
        flex: 0 0 auto !important;
        max-width: 150px !important;
    }

    .premium-chat-shell .credit-badge {
        display: none !important;
    }

    .premium-chat-shell .suggestion-chips {
        grid-template-columns: 1fr !important;
    }

    .premium-chat-shell .welcome-state {
        margin: 20px auto !important;
    }

    .premium-chat-shell .input-area {
        border-radius: var(--workstation-radius) var(--workstation-radius) 0 0 !important;
    }
}