/* ==========================================================================
   MxChat Admin Sidebar Navigation - v2.0
   Clean, modern CSS for the redesigned settings page
   ========================================================================== */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    /* Brand Colors */
    --mxch-primary: #7873f5;
    --mxch-primary-hover: #6863e5;
    --mxch-primary-light: rgba(120, 115, 245, 0.1);
    --mxch-primary-lighter: rgba(120, 115, 245, 0.05);

    /* Sidebar */
    --mxch-sidebar-width: 260px;
    --mxch-sidebar-bg: #212121;
    --mxch-sidebar-text: #a0a0b0;
    --mxch-sidebar-text-hover: #ffffff;
    --mxch-sidebar-active-bg: rgba(120, 115, 245, 0.15);
    --mxch-sidebar-border: rgba(255, 255, 255, 0.08);

    /* Content Area */
    --mxch-content-bg: #f0f2f5;
    --mxch-card-bg: #ffffff;
    --mxch-card-border: #e2e4e9;
    --mxch-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --mxch-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Text */
    --mxch-text-primary: #1a1a2e;
    --mxch-text-secondary: #64748b;
    --mxch-text-muted: #94a3b8;

    /* Form Elements */
    --mxch-input-border: #d1d5db;
    --mxch-input-focus: #7873f5;
    --mxch-input-bg: #ffffff;

    /* Status Colors */
    --mxch-success: #10b981;
    --mxch-warning: #f59e0b;
    --mxch-warning-light: rgba(245, 158, 11, 0.12);
    --mxch-warning-text: #92400e;
    --mxch-error: #ef4444;
    --mxch-info: #3b82f6;

    /* Spacing */
    --mxch-spacing-xs: 4px;
    --mxch-spacing-sm: 8px;
    --mxch-spacing-md: 16px;
    --mxch-spacing-lg: 24px;
    --mxch-spacing-xl: 32px;

    /* Border Radius */
    --mxch-radius-sm: 4px;
    --mxch-radius-md: 8px;
    --mxch-radius-lg: 12px;

    /* Transitions */
    --mxch-transition-fast: 0.15s ease;
    --mxch-transition: 0.25s ease;
}

/* ==========================================================================
   Main Layout Container
   ========================================================================== */
.mxch-admin-wrapper {
    display: flex;
    height: calc(100vh - 32px);
    /* No negative margin: the shell is fixed, so #wpcontent's 20px padding
       never applies to it, and -20px slid it under the admin menu (plan 70d9ad). */
    margin-left: 0;
    background: var(--mxch-content-bg);
    overflow: hidden;
    position: fixed;
    top: 32px;
    left: 160px; /* WordPress admin menu width */
    right: 0;
    bottom: 0;
}

/* Account for collapsed admin menu */
.folded .mxch-admin-wrapper {
    left: 36px;
}

/* The shell is a fixed panel filling the screen, so WordPress's footer line
   ("Thank you for creating with WordPress", the version) would paint over its
   bottom wherever the admin menu is short enough to leave it on screen (the
   folded menu, 783-960px). It has nothing to show on these pages (plan 70d9ad). */
body:has(.mxch-admin-wrapper) #wpfooter {
    display: none;
}

/* Account for admin bar on mobile */
@media screen and (max-width: 782px) {
    .mxch-admin-wrapper {
        top: 46px;
        height: calc(100vh - 46px);
        left: 0;
        margin-left: 0;
    }
}

/* ==========================================================================
   RTL locales (Arabic, Hebrew, Persian, Urdu, …)
   On an RTL locale WordPress moves its admin menu to the RIGHT and sets the
   `rtl` class + `direction: rtl` on <body>. The base wrapper is pinned
   `left: 160px; right: 0` for a LEFT-side admin menu, so under RTL its right
   edge slides under the (now right-side) WP menu and a dead 160px gap opens on
   the left — the nav ends up hidden/overlapped. Mirror the fixed offsets and
   the negative content margin. The internal sidebar/content flex row reverses
   automatically under the inherited `direction: rtl`, so the sidebar lands on
   the wrapper's right edge (just inside the WP menu) as expected for RTL — no
   per-child repositioning needed.
   ========================================================================== */
body.rtl .mxch-admin-wrapper {
    left: 0;
    right: 160px; /* WordPress admin menu width (now on the right) */
    margin-left: 0;
    margin-right: 0;
}

/* Collapsed/folded admin menu (narrower) on RTL */
body.rtl.folded .mxch-admin-wrapper {
    left: 0;
    right: 36px;
}

/* On mobile the WP admin menu collapses to the top bar, so the wrapper is
   full-width in both directions — clear the RTL right offset too. */
@media screen and (max-width: 782px) {
    body.rtl .mxch-admin-wrapper {
        left: 0;
        right: 0;
        margin-right: 0;
    }
}

/* Active nav-item accent sits on the sidebar's inner edge; flip it for RTL. */
body.rtl .mxch-nav-link.active {
    border-right: none;
    border-left: 3px solid var(--mxch-primary);
}

/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */
.mxch-sidebar {
    width: var(--mxch-sidebar-width);
    min-width: var(--mxch-sidebar-width);
    background: var(--mxch-sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    flex-shrink: 0;
    position: relative;
}

/* Custom Scrollbar for Sidebar */
.mxch-sidebar::-webkit-scrollbar {
    width: 6px;
}

.mxch-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.mxch-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.mxch-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Firefox scrollbar */
.mxch-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.mxch-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(250, 115, 230, 0.08) 0%, rgba(120, 115, 245, 0.08) 50%, rgba(58, 201, 209, 0.08) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Sidebar Header / Logo */
.mxch-sidebar-header {
    padding: var(--mxch-spacing-lg);
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
    border-image-slice: 1;
    position: relative;
    z-index: 1;
}

.mxch-sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    text-decoration: none;
}

.mxch-sidebar-logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.mxch-sidebar-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mxch-sidebar-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.mxch-sidebar-version {
    font-size: 11px;
    color: var(--mxch-sidebar-text);
    margin-left: auto;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* Sidebar Navigation */
.mxch-sidebar-nav {
    flex: 1;
    padding: var(--mxch-spacing-md) 0;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.mxch-nav-section {
    margin-bottom: var(--mxch-spacing-xs);
}

.mxch-nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mxch-sidebar-text);
    padding: var(--mxch-spacing-md) var(--mxch-spacing-lg) var(--mxch-spacing-sm);
    opacity: 0.7;
}

/* Nav Items */
.mxch-nav-item {
    position: relative;
}

.mxch-nav-link {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    padding: 10px var(--mxch-spacing-lg);
    color: var(--mxch-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--mxch-transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.mxch-nav-link:hover {
    color: var(--mxch-sidebar-text-hover);
    background: rgba(255, 255, 255, 0.05);
}

.mxch-nav-link.active {
    color: var(--mxch-sidebar-text-hover);
    background: var(--mxch-sidebar-active-bg);
    border-right: 3px solid var(--mxch-primary);
}

.mxch-nav-link-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.mxch-nav-link-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

.mxch-nav-link.active .mxch-nav-link-icon {
    opacity: 1;
    color: var(--mxch-primary);
}

.mxch-nav-link-text {
    flex: 1;
}

.mxch-nav-link-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--mxch-primary);
    color: white;
    font-weight: 600;
}

.mxch-nav-link-badge.mxch-active-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--mxch-success, #10b981);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mxch-nav-link-arrow {
    width: 16px;
    height: 16px;
    transition: transform var(--mxch-transition-fast);
    opacity: 0.5;
}

.mxch-nav-item.expanded .mxch-nav-link-arrow {
    transform: rotate(90deg);
}

/* Sub Navigation */
.mxch-nav-sub {
    display: none;
    background: rgba(0, 0, 0, 0.15);
}

.mxch-nav-item.expanded .mxch-nav-sub {
    display: block;
}

.mxch-nav-sub-link {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    padding: 8px var(--mxch-spacing-lg) 8px 52px;
    color: var(--mxch-sidebar-text);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--mxch-transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.mxch-nav-sub-link:hover {
    color: var(--mxch-sidebar-text-hover);
    background: rgba(255, 255, 255, 0.03);
}

.mxch-nav-sub-link.active {
    color: var(--mxch-primary);
    background: rgba(120, 115, 245, 0.1);
}

.mxch-nav-sub-link::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}

.mxch-nav-sub-link.active::before {
    opacity: 1;
    background: var(--mxch-primary);
}

/* Sidebar Footer - Pro Upgrade CTA */
.mxch-sidebar-footer {
    padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
    position: relative;
    z-index: 1;
}

.mxch-sidebar-upgrade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid rgba(120, 115, 245, 0.4);
    border-radius: var(--mxch-radius-md);
    color: var(--mxch-sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mxch-sidebar-upgrade::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #7873f5 0%, #a78bfa 50%, #f472b6 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mxch-sidebar-upgrade:hover::before {
    opacity: 1;
}

.mxch-sidebar-upgrade:hover {
    color: white;
    background: linear-gradient(135deg, rgba(120, 115, 245, 0.15) 0%, rgba(167, 139, 250, 0.15) 50%, rgba(244, 114, 182, 0.1) 100%);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(120, 115, 245, 0.3), 0 0 40px rgba(167, 139, 250, 0.15);
}

.mxch-sidebar-upgrade svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.mxch-sidebar-upgrade:hover svg {
    opacity: 1;
}

.mxch-sidebar-upgrade-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.mxch-sidebar-upgrade-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

.mxch-sidebar-upgrade-title {
    font-weight: 600;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.mxch-content {
    flex: 1;
    padding: var(--mxch-spacing-xl);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Important for flex child scrolling */
}

.mxch-content::after {
    content: '';
    display: block;
    height: 120px; /* Extra space at bottom for scrolling */
}

/* Content Header */
.mxch-content-header {
    margin-bottom: var(--mxch-spacing-xl);
}

.mxch-content-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mxch-text-primary);
    margin: 0 0 var(--mxch-spacing-xs) 0;
}

.mxch-content-subtitle {
    font-size: 14px;
    color: var(--mxch-text-secondary);
    margin: 0;
}

/* Pro Banner - Clean, Professional Design */
.mxch-pro-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mxch-spacing-lg);
    padding: 16px 24px;
    background: var(--mxch-card-bg);
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-lg);
    margin-bottom: var(--mxch-spacing-xl);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient accent on left edge */
.mxch-pro-banner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #7873f5 0%, #a78bfa 50%, #f472b6 100%);
}

.mxch-pro-banner-content {
    flex: 1;
    min-width: 0;
}

.mxch-pro-banner-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mxch-text-primary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mxch-pro-banner-title::before {
    content: '✨';
    font-size: 12px;
}

.mxch-pro-banner-text {
    font-size: 13px;
    color: var(--mxch-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.mxch-pro-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    color: var(--mxch-primary);
    border: 1px solid var(--mxch-primary);
    border-radius: var(--mxch-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.25s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.mxch-pro-banner-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #7873f5 0%, #a78bfa 50%, #f472b6 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mxch-pro-banner-btn span {
    position: relative;
    z-index: 1;
}

.mxch-pro-banner-btn:hover {
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(120, 115, 245, 0.35);
    transform: translateY(-1px);
}

.mxch-pro-banner-btn:hover::before {
    opacity: 1;
}

/* Dismissible banner close button */
.mxch-pro-banner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--mxch-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0;
}

.mxch-pro-banner:hover .mxch-pro-banner-close {
    opacity: 1;
}

.mxch-pro-banner-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--mxch-text-primary);
}

/* ==========================================================================
   Settings Cards
   ========================================================================== */
.mxch-card {
    background: var(--mxch-card-bg);
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-lg);
    box-shadow: var(--mxch-card-shadow);
    margin-bottom: var(--mxch-spacing-lg);
    overflow: hidden;
}

.mxch-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
    border-bottom: 1px solid var(--mxch-card-border);
    background: var(--mxch-primary-lighter);
}

.mxch-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mxch-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
}

.mxch-card-title-icon {
    width: 20px;
    height: 20px;
    color: var(--mxch-primary);
}

.mxch-card-body {
    padding: var(--mxch-spacing-lg);
}

.mxch-card-footer {
    padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
    border-top: 1px solid var(--mxch-card-border);
    background: #fafbfc;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */
.mxch-field {
    margin-bottom: var(--mxch-spacing-lg);
}

.mxch-field:last-child {
    margin-bottom: 0;
}

.mxch-field-row {
    display: flex;
    align-items: flex-start;
    gap: var(--mxch-spacing-lg);
}

.mxch-field-label {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--mxch-text-primary);
    margin-bottom: var(--mxch-spacing-sm);
}

.mxch-field-label-required {
    color: var(--mxch-error);
}

.mxch-field-description {
    font-size: 13px;
    color: var(--mxch-text-secondary);
    margin-top: var(--mxch-spacing-xs);
    line-height: 1.5;
}

.mxch-field-hint {
    font-size: 12px;
    color: var(--mxch-text-muted);
    margin-top: var(--mxch-spacing-xs);
}

/* Input Fields */
.mxch-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    background: var(--mxch-input-bg);
    color: var(--mxch-text-primary);
    transition: all var(--mxch-transition-fast);
}

.mxch-input:focus {
    outline: none;
    border-color: var(--mxch-input-focus);
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

.mxch-input::placeholder {
    color: var(--mxch-text-muted);
}

.mxch-input-sm {
    padding: 6px 10px;
    font-size: 13px;
}

.mxch-input-lg {
    padding: 12px 16px;
    font-size: 15px;
}

/* Textarea */
.mxch-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    background: var(--mxch-input-bg);
    color: var(--mxch-text-primary);
    transition: all var(--mxch-transition-fast);
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.mxch-textarea:focus {
    outline: none;
    border-color: var(--mxch-input-focus);
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

/* Select */
.mxch-select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    background: var(--mxch-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--mxch-text-primary);
    cursor: pointer;
    appearance: none;
    transition: all var(--mxch-transition-fast);
}

.mxch-select:focus {
    outline: none;
    border-color: var(--mxch-input-focus);
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

/* Toggle Switch */
.mxch-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    cursor: pointer;
}

.mxch-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mxch-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    transition: all var(--mxch-transition-fast);
}

.mxch-toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all var(--mxch-transition-fast);
}

.mxch-toggle-input:checked + .mxch-toggle-switch {
    background: var(--mxch-primary);
}

.mxch-toggle-input:checked + .mxch-toggle-switch::before {
    transform: translateX(20px);
}

.mxch-toggle-input:focus + .mxch-toggle-switch {
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

.mxch-toggle-label {
    font-size: 14px;
    color: var(--mxch-text-primary);
}

/* API Key Input */
.mxch-api-key-wrapper {
    display: flex;
    gap: var(--mxch-spacing-sm);
}

.mxch-api-key-wrapper .mxch-input {
    flex: 1;
    font-family: monospace;
}

.mxch-api-key-toggle {
    padding: 10px 14px;
    background: #f1f5f9;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    color: var(--mxch-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--mxch-transition-fast);
}

.mxch-api-key-toggle:hover {
    background: #e2e8f0;
    color: var(--mxch-text-primary);
}

.mxch-api-key-status {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-xs);
    font-size: 12px;
    margin-top: var(--mxch-spacing-xs);
}

.mxch-api-key-status.detected {
    color: var(--mxch-success);
}

.mxch-api-key-status.missing {
    color: var(--mxch-text-muted);
}

/* ==========================================================================
   WordPress Form Table Styling (for do_settings_fields output)
   ========================================================================== */
.mxch-card-body .form-table {
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}

.mxch-card-body .form-table th,
.mxch-card-body .form-table td {
    padding: 0;
    vertical-align: top;
    border: none;
}

.mxch-card-body .form-table tr {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--mxch-spacing-lg);
}

.mxch-card-body .form-table tr:last-child {
    margin-bottom: 0;
}

.mxch-card-body .form-table th {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--mxch-text-primary);
    padding-bottom: var(--mxch-spacing-sm);
    text-align: left;
}

.mxch-card-body .form-table th label {
    font-weight: 600;
}

.mxch-card-body .form-table td {
    display: block;
    width: 100%;
}

/* Style WordPress default inputs inside form-table */
.mxch-card-body .form-table input[type="text"],
.mxch-card-body .form-table input[type="password"],
.mxch-card-body .form-table input[type="email"],
.mxch-card-body .form-table input[type="url"],
.mxch-card-body .form-table input[type="number"] {
    width: 100%;
    max-width: 100%;
    /* WordPress gives inputs a small side margin (3px on phones); at full width
       that pushed the field past its cell (plan 70d9ad). */
    margin-left: 0;
    margin-right: 0;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    background: var(--mxch-input-bg);
    color: var(--mxch-text-primary);
    transition: all var(--mxch-transition-fast);
    box-sizing: border-box;
}

.mxch-card-body .form-table input[type="text"]:focus,
.mxch-card-body .form-table input[type="password"]:focus,
.mxch-card-body .form-table input[type="email"]:focus,
.mxch-card-body .form-table input[type="url"]:focus,
.mxch-card-body .form-table input[type="number"]:focus {
    outline: none;
    border-color: var(--mxch-input-focus);
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

.mxch-card-body .form-table .regular-text {
    width: 100%;
    max-width: 100%;
}

.mxch-card-body .form-table select {
    width: 100%;
    max-width: 100%;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    background: var(--mxch-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--mxch-text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--mxch-transition-fast);
}

.mxch-card-body .form-table select:focus {
    outline: none;
    border-color: var(--mxch-input-focus);
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

.mxch-card-body .form-table textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    background: var(--mxch-input-bg);
    color: var(--mxch-text-primary);
    transition: all var(--mxch-transition-fast);
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    box-sizing: border-box;
}

.mxch-card-body .form-table textarea:focus {
    outline: none;
    border-color: var(--mxch-input-focus);
    box-shadow: 0 0 0 3px var(--mxch-primary-light);
}

/* Style descriptions in form-table */
.mxch-card-body .form-table p.description,
.mxch-card-body .form-table .description {
    font-size: 13px;
    color: var(--mxch-text-secondary);
    margin-top: var(--mxch-spacing-xs);
    line-height: 1.5;
}

/* API Key wrappers inside form-table */
.mxch-card-body .form-table .api-key-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--mxch-spacing-sm);
    align-items: center;
}

.mxch-card-body .form-table .api-key-wrapper input {
    grid-column: 1;
    grid-row: 1;
    font-family: monospace;
    width: 100%;
}

.mxch-admin-wrapper .mxch-card-body .form-table .api-key-wrapper button,
.mxch-admin-wrapper .mxch-card-body .api-key-wrapper button,
.mxch-admin-wrapper .mxch-section .api-key-wrapper button {
    grid-column: 2;
    grid-row: 1;
    padding: 10px 16px;
    background: #f1f5f9;
    border: 1px solid var(--mxch-input-border);
    border-radius: var(--mxch-radius-md);
    color: var(--mxch-text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--mxch-transition-fast);
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
    height: auto;
    line-height: 1.4;
}

.mxch-admin-wrapper .mxch-card-body .form-table .api-key-wrapper button:hover,
.mxch-admin-wrapper .mxch-card-body .api-key-wrapper button:hover,
.mxch-admin-wrapper .mxch-section .api-key-wrapper button:hover {
    background: var(--mxch-primary);
    border-color: var(--mxch-primary);
    color: white;
}

/* Description inside api-key-wrapper needs to be on its own line */
.mxch-card-body .form-table .api-key-wrapper p.description,
.mxch-card-body .form-table .api-key-wrapper .description {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

/* The Custom Provider (OpenAI-compatible) block shares the api-key-wrapper
   class but is a stack of labelled rows, not one key + button: keep it a block
   (the two-column grid pushed its Azure quick start and half its fields past
   the card), and let long URLs and example addresses wrap (plan 70d9ad). */
.mxch-card-body .form-table .api-key-wrapper.mxchat-cp {
    display: block;
}

.mxch-card-body .form-table .api-key-wrapper.mxchat-cp .mxchat-cp-row > .description {
    margin: 6px 0 0;
}

.mxch-admin-wrapper .mxchat-cp .mxchat-cp-azure code,
.mxch-admin-wrapper .mxchat-cp .description,
.mxch-admin-wrapper .mxchat-cp .mxchat-cp-intro {
    overflow-wrap: anywhere;
}

/* Checkbox styling */
.mxch-card-body .form-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--mxch-primary);
}

/* Toggle switches (if using class-based toggles) */
.mxch-card-body .form-table .mxchat-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
}

/* Button styling inside form-table */
.mxch-card-body .form-table .button {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: var(--mxch-radius-md);
    transition: all var(--mxch-transition-fast);
}

.mxch-card-body .form-table .button-primary {
    background: var(--mxch-primary);
    border-color: var(--mxch-primary);
    color: white;
}

.mxch-card-body .form-table .button-primary:hover {
    background: var(--mxch-primary-hover);
    border-color: var(--mxch-primary-hover);
}

/* ==========================================================================
   Rate Limits - Collapsible Accordion
   ========================================================================== */
.mxch-rate-limits {
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-lg);
    overflow: hidden;
}

.mxch-rate-limit-item {
    border-bottom: 1px solid var(--mxch-card-border);
}

.mxch-rate-limit-item:last-child {
    border-bottom: none;
}

.mxch-rate-limit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
    background: #fafbfc;
    cursor: pointer;
    transition: all var(--mxch-transition-fast);
}

.mxch-rate-limit-header:hover {
    background: #f1f5f9;
}

.mxch-rate-limit-role {
    font-weight: 600;
    color: var(--mxch-text-primary);
    font-size: 14px;
}

.mxch-rate-limit-summary {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-md);
}

.mxch-rate-limit-badge {
    padding: 4px 10px;
    background: var(--mxch-primary-light);
    color: var(--mxch-primary);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.mxch-rate-limit-arrow {
    width: 20px;
    height: 20px;
    color: var(--mxch-text-muted);
    transition: transform var(--mxch-transition-fast);
}

.mxch-rate-limit-item.expanded .mxch-rate-limit-arrow {
    transform: rotate(180deg);
}

.mxch-rate-limit-body {
    display: none;
    padding: var(--mxch-spacing-lg);
    background: white;
    border-top: 1px solid var(--mxch-card-border);
}

.mxch-rate-limit-item.expanded .mxch-rate-limit-body {
    display: block;
}

.mxch-rate-limit-controls {
    display: flex;
    gap: var(--mxch-spacing-lg);
    margin-bottom: var(--mxch-spacing-md);
}

.mxch-rate-limit-controls .mxch-field {
    flex: 1;
    margin-bottom: 0;
}

/* Global cap "Current usage" readout (plan-mxchat-20260603-e9b3f9) */
.mxch-rate-limit-usage {
    margin-top: var(--mxch-spacing-md);
    padding-top: var(--mxch-spacing-md);
    border-top: 1px solid var(--mxch-card-border);
}

.mxch-rate-limit-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mxch-spacing-md);
    margin-bottom: var(--mxch-spacing-xs);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.mxch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mxch-spacing-sm);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--mxch-radius-md);
    cursor: pointer;
    transition: all var(--mxch-transition-fast);
    text-decoration: none;
    border: none;
}

.mxch-btn-primary {
    background: var(--mxch-primary);
    color: white;
}

.mxch-btn-primary:hover {
    background: var(--mxch-primary-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(120, 115, 245, 0.3);
}

.mxch-btn-secondary {
    background: white;
    color: var(--mxch-text-primary);
    border: 1px solid var(--mxch-input-border);
}

.mxch-btn-secondary:hover {
    background: #f8fafc;
    border-color: #c7c7c7;
}

.mxch-btn-ghost {
    background: transparent;
    color: var(--mxch-text-secondary);
}

.mxch-btn-ghost:hover {
    background: #f1f5f9;
    color: var(--mxch-text-primary);
}

.mxch-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.mxch-btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

.mxch-btn-icon {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Content Sections (hidden by default, shown when active)
   ========================================================================== */
.mxch-section {
    display: none;
}

.mxch-section.active {
    display: block;
    animation: mxcFadeIn 0.2s ease;
}

@keyframes mxcFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Info Notices
   ========================================================================== */
.mxch-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--mxch-spacing-sm);
    padding: var(--mxch-spacing-md);
    border-radius: var(--mxch-radius-md);
    font-size: 13px;
    line-height: 1.5;
}

.mxch-notice-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.mxch-notice-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.mxch-notice-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.mxch-notice-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.mxch-notice-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Standalone notice sitting between a content header and the first card.
   Token-based replacement for the inline margin declarations this component
   has been carrying at its call sites (b65e8d). */
.mxch-notice-block {
    margin-bottom: var(--mxch-spacing-lg);
}

/* Multi-line notice body: a title line, one sentence per item, then an
   actions row (direct task M4 — the "discontinued models replaced" notice). */
.mxch-notice-body {
    flex: 1;
    min-width: 0;
}

.mxch-notice-body p {
    margin: var(--mxch-spacing-xs) 0 0;
}

.mxch-notice-body .mxch-notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mxch-spacing-sm);
    margin-top: var(--mxch-spacing-sm);
}

/* Settings > Optimization: one row per page-cache plugin (name + status pill,
   then the exclusion string and its Copy button). The column is
   minmax(0, 1fr) so a long exclusion scrolls inside its code box instead of
   widening the card (plan 70d9ad). */
.mxch-cache-compat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: var(--mxch-spacing-md);
}

.mxch-cache-compat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-md);
}

.mxch-cache-compat-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}

.mxch-cache-compat-label {
    font-weight: 500;
}

.mxch-cache-compat-exclusion {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.mxch-cache-compat-exclusion code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-sm);
    font-size: 12px;
    color: var(--mxch-text-secondary);
}

.mxch-cache-compat-exclusion .mxch-btn {
    flex: 0 0 auto;
}

/* On a phone the exclusion string gets its own line under the name. */
@media screen and (max-width: 600px) {
    .mxch-cache-compat-row {
        flex-wrap: wrap;
    }

    .mxch-cache-compat-exclusion {
        flex-basis: 100%;
    }
}

/* WordPress admin notices moved into the content column by admin-sidebar.js
   (plan bf8e9e): full column width, spaced like a card above the page
   header instead of WordPress's 15px side margins. */
.mxch-content > div.notice,
.mxch-content > div.updated,
.mxch-content > div.error,
.mxch-content > div.update-nag {
    margin: 0 0 var(--mxch-spacing-lg);
    box-sizing: border-box;
    max-width: 100%;
}

.mxch-content > div.update-nag {
    display: block;
}

/* ==========================================================================
   Disclosure (collapsible <details>)
   Generic Advanced/opt-in surface — used for static-bearer fallback on
   mxchat-mcp's Connected Apps tab, and any add-on that needs the same
   "advanced/show more" pattern. Originally lived in plugins/mxchat-mcp/css/
   admin-mcp.css; elevated here so every add-on inherits via the standard
   admin-sidebar.css enqueue.
   ========================================================================== */
.mxch-disclosure {
    margin-top: 16px;
    border: 1px solid var(--mxch-card-border, #e2e4e9);
    border-radius: var(--mxch-radius-md, 6px);
    background: #fbfcfd;
}
.mxch-disclosure[open] {
    background: #fff;
}
.mxch-disclosure-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--mxch-text-secondary, #57606a);
    font-size: 13px;
    font-weight: 600;
}
.mxch-disclosure-summary::-webkit-details-marker { display: none; }
.mxch-disclosure-summary::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    margin-right: 2px;
}
.mxch-disclosure[open] > .mxch-disclosure-summary::before {
    transform: rotate(45deg);
}
.mxch-disclosure-summary svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.mxch-disclosure-summary-text {
    color: var(--mxch-text-primary, #1d2327);
    font-weight: 600;
}
.mxch-disclosure-summary-hint {
    color: var(--mxch-text-secondary, #57606a);
    font-weight: 400;
    font-size: 12px;
}
.mxch-disclosure-summary:hover .mxch-disclosure-summary-text {
    color: var(--mxch-primary, #7873f5);
}
.mxch-disclosure-summary:focus-visible {
    outline: 2px solid var(--mxch-primary, #7873f5);
    outline-offset: 2px;
    border-radius: var(--mxch-radius-md, 6px);
}
.mxch-disclosure-body {
    padding: 8px 14px 14px 14px;
    border-top: 1px solid var(--mxch-card-border, #e2e4e9);
}
@media (max-width: 600px) {
    .mxch-disclosure-summary {
        flex-wrap: wrap;
    }
    .mxch-disclosure-summary-hint {
        flex-basis: 100%;
        margin-left: 18px;
    }
}

/* ==========================================================================
   Quick Questions List
   ========================================================================== */
.mxch-quick-questions {
    display: flex;
    flex-direction: column;
    gap: var(--mxch-spacing-sm);
}

.mxch-quick-question-item {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-sm);
    padding: var(--mxch-spacing-sm);
    background: #f8fafc;
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-md);
}

.mxch-quick-question-item .mxch-input {
    flex: 1;
    background: white;
}

.mxch-quick-question-remove {
    padding: 6px;
    background: none;
    border: none;
    color: var(--mxch-text-muted);
    cursor: pointer;
    border-radius: var(--mxch-radius-sm);
    transition: all var(--mxch-transition-fast);
}

.mxch-quick-question-remove:hover {
    background: #fee2e2;
    color: var(--mxch-error);
}

.mxch-quick-question-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mxch-spacing-xs);
    padding: var(--mxch-spacing-sm);
    border: 2px dashed var(--mxch-card-border);
    border-radius: var(--mxch-radius-md);
    color: var(--mxch-text-muted);
    background: none;
    cursor: pointer;
    font-size: 13px;
    transition: all var(--mxch-transition-fast);
}

.mxch-quick-question-add:hover {
    border-color: var(--mxch-primary);
    color: var(--mxch-primary);
    background: var(--mxch-primary-lighter);
}

/* ==========================================================================
   Tutorials Grid (for YouTube Tutorials section)
   ========================================================================== */
.mxch-tutorials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mxch-spacing-lg);
}

.mxch-tutorial-card {
    background: white;
    border: 1px solid var(--mxch-card-border);
    border-radius: var(--mxch-radius-lg);
    overflow: hidden;
    transition: all var(--mxch-transition);
}

.mxch-tutorial-card:hover {
    box-shadow: var(--mxch-card-shadow-hover);
    transform: translateY(-2px);
}

.mxch-tutorial-content {
    padding: var(--mxch-spacing-md);
}

.mxch-tutorial-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mxch-text-primary);
    margin: 0 0 var(--mxch-spacing-sm) 0;
}

.mxch-tutorial-description {
    font-size: 13px;
    color: var(--mxch-text-secondary);
    margin: 0 0 var(--mxch-spacing-md) 0;
    line-height: 1.5;
}

.mxch-tutorial-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mxch-spacing-xs);
    color: var(--mxch-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.mxch-tutorial-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Autosave Indicator
   ========================================================================== */
.mxch-autosave-indicator {
    display: flex;
    align-items: center;
    gap: var(--mxch-spacing-xs);
    font-size: 12px;
    color: var(--mxch-text-muted);
    padding: var(--mxch-spacing-xs) var(--mxch-spacing-sm);
    background: #f1f5f9;
    border-radius: 20px;
}

.mxch-autosave-indicator.saving {
    color: var(--mxch-warning);
}

.mxch-autosave-indicator.saved {
    color: var(--mxch-success);
}

.mxch-autosave-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ==========================================================================
   Mobile Header (Hidden on Desktop)
   ========================================================================== */
.mxch-mobile-header {
    display: none;
}

/* ==========================================================================
   Mobile Menu Overlay
   ========================================================================== */
.mxch-mobile-overlay {
    display: none;
}

/* ==========================================================================
   Mobile Menu Modal
   ========================================================================== */
.mxch-mobile-menu {
    display: none;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media screen and (max-width: 1200px) {
    .mxch-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .mxch-content {
        padding: var(--mxch-spacing-lg);
    }
}

@media screen and (max-width: 960px) {
    /* Hide desktop sidebar on mobile */
    .mxch-sidebar {
        display: none;
    }

    /* Show mobile header */
    .mxch-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--mxch-sidebar-bg);
        position: sticky;
        top: 0;
        z-index: 100;
        flex-shrink: 0;
        border-bottom: 4px solid transparent;
        border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
        border-image-slice: 1;
    }

    .mxch-mobile-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(250, 115, 230, 0.08) 0%, rgba(120, 115, 245, 0.08) 50%, rgba(58, 201, 209, 0.08) 100%);
        z-index: -1;
    }

    .mxch-mobile-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .mxch-mobile-logo-icon {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .mxch-mobile-logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mxch-mobile-logo-text {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.5px;
    }

    .mxch-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 8px;
        color: #ffffff;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mxch-mobile-menu-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Mobile Overlay */
    .mxch-mobile-overlay {
        display: block;
        position: fixed;
        top: 46px; /* Account for WordPress admin bar on mobile (46px on smaller screens) */
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mxch-mobile-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Menu Modal */
    .mxch-mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 46px; /* Account for WordPress admin bar on mobile (46px on smaller screens) */
        right: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        background: var(--mxch-sidebar-bg);
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow: hidden;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .mxch-mobile-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(250, 115, 230, 0.08) 0%, rgba(120, 115, 245, 0.08) 50%, rgba(58, 201, 209, 0.08) 100%);
        z-index: 0;
        pointer-events: none;
    }

    .mxch-mobile-menu.open {
        transform: translateX(0);
    }

    .mxch-mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 4px solid transparent;
        border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
        border-image-slice: 1;
        position: relative;
        z-index: 1;
    }

    .mxch-mobile-menu-title {
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
    }

    .mxch-mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 8px;
        color: #ffffff;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .mxch-mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .mxch-mobile-menu-nav {
        flex: 1;
        overflow-y: auto;
        padding: 16px 0;
        position: relative;
        z-index: 1;
    }

    .mxch-mobile-nav-section {
        margin-bottom: 8px;
    }

    .mxch-mobile-nav-section-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--mxch-sidebar-text);
        padding: 12px 20px 8px;
        opacity: 0.7;
    }

    .mxch-mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 20px;
        background: none;
        border: none;
        color: var(--mxch-sidebar-text);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mxch-mobile-nav-link:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .mxch-mobile-nav-link.active {
        background: var(--mxch-sidebar-active-bg);
        color: #ffffff;
    }

    .mxch-mobile-nav-link.expanded {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .mxch-mobile-nav-link span {
        flex: 1;
    }

    /* Prevent addon status dot from expanding - override flex: 1 from above */
    .mxch-mobile-nav-link .mxch-addon-status-dot {
        flex: 0 0 8px;
        width: 8px;
        height: 8px;
    }

    .mxch-mobile-nav-arrow {
        opacity: 0.5;
        transition: transform 0.2s ease;
    }

    .mxch-mobile-nav-link.expanded .mxch-mobile-nav-arrow {
        transform: rotate(90deg);
        opacity: 1;
    }

    /* Mobile Sub Navigation */
    .mxch-mobile-nav-sub {
        display: none;
        background: rgba(0, 0, 0, 0.2);
    }

    .mxch-mobile-nav-sub.expanded {
        display: block;
    }

    .mxch-mobile-nav-sub-link {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 20px 10px 52px;
        background: none;
        border: none;
        color: var(--mxch-sidebar-text);
        font-size: 13px;
        text-align: left;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mxch-mobile-nav-sub-link::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.4;
    }

    .mxch-mobile-nav-sub-link:hover {
        background: rgba(255, 255, 255, 0.03);
        color: #ffffff;
    }

    .mxch-mobile-nav-sub-link.active {
        color: var(--mxch-primary);
        background: rgba(120, 115, 245, 0.1);
    }

    .mxch-mobile-nav-sub-link.active::before {
        opacity: 1;
        background: var(--mxch-primary);
    }

    /* Mobile Menu Footer */
    .mxch-mobile-menu-footer {
        padding: 16px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }

    .mxch-mobile-upgrade-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background: linear-gradient(135deg, var(--mxch-primary), #a78bfa);
        border-radius: 8px;
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.15s ease;
        box-sizing: border-box;
        max-width: 100%;
    }

    .mxch-mobile-upgrade-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(120, 115, 245, 0.4);
        color: white;
    }

    /* Adjust main layout for mobile */
    .mxch-admin-wrapper {
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        overflow: auto;
    }

    .mxch-content {
        height: auto;
        overflow: visible;
        padding: var(--mxch-spacing-lg);
        width: 100%;
        box-sizing: border-box;
    }

    /* Center content sections on mobile */
    .mxch-content-section {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .mxch-rate-limit-controls {
        flex-direction: column;
    }

    /* Card headers stack on mobile. Each item keeps its own width (a status
       pill or a button stays its natural size, the title still wraps) instead of
       stretching to the card's width (plan 70d9ad). */
    .mxch-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mxch-card-header > * {
        max-width: 100%;
    }

    /* Content header adjustments */
    .mxch-content-header {
        margin-bottom: var(--mxch-spacing-md);
    }

    .mxch-content-title {
        font-size: 20px;
    }
}

/* 783-960px: WordPress keeps its admin menu on screen, folded to 36px, so the
   shell starts right of it instead of under it (plan 70d9ad). */
@media screen and (min-width: 783px) and (max-width: 960px) {
    .mxch-admin-wrapper {
        left: 36px;
        margin-left: 0;
    }

    body.rtl .mxch-admin-wrapper {
        left: 0;
        right: 36px;
        margin-right: 0;
    }

    /* The admin bar is still 32px tall here (46px only at 782px and below):
       the slide-in menu and its overlay open flush under it. */
    .mxch-mobile-overlay,
    .mxch-mobile-menu {
        top: 32px;
    }
}

@media screen and (max-width: 600px) {
    .mxch-content {
        padding: var(--mxch-spacing-md);
    }

    .mxch-card-body {
        padding: var(--mxch-spacing-md);
    }

    .mxch-card {
        margin-left: 0;
        margin-right: 0;
    }

    .mxch-pro-banner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mxch-pro-banner-content {
        max-width: 100%;
    }

    .mxch-pro-banner-title {
        justify-content: center;
        font-size: 13px;
    }

    .mxch-pro-banner-text {
        font-size: 12px;
    }

    .mxch-pro-banner-btn {
        width: auto;
        max-width: 100%;
        padding: 10px 16px;
        font-size: 12px;
        justify-content: center;
        box-sizing: border-box;
    }

    .mxch-field-row {
        flex-direction: column;
    }

    .mxch-api-key-wrapper {
        flex-direction: column;
    }

    .mxch-mobile-menu {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   WordPress Admin Overrides
   ========================================================================== */
.mxch-admin-wrapper .form-table {
    margin: 0;
}

.mxch-admin-wrapper .form-table th {
    padding: 0;
    width: auto;
}

.mxch-admin-wrapper .form-table td {
    padding: 0;
}

.mxch-admin-wrapper .form-table tr {
    display: block;
    margin-bottom: var(--mxch-spacing-lg);
}

.mxch-admin-wrapper .form-table tr:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Autosave Feedback Indicators
   ========================================================================== */
.mxch-admin-wrapper .feedback-container {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    position: relative;
    z-index: 10;
    vertical-align: middle;
}

.mxch-admin-wrapper .saving-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--mxch-primary);
    border-radius: 50%;
    animation: mxcSpin 0.6s linear infinite;
}

.mxch-admin-wrapper .success-icon {
    display: none;
    color: var(--mxch-success);
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
}

@keyframes mxcSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Ensure feedback container appears inline with toggles */
.mxch-admin-wrapper .toggle-switch + .feedback-container,
.mxch-admin-wrapper .mxchat-toggle-switch + .feedback-container,
.mxch-admin-wrapper label.toggle-switch ~ .feedback-container {
    display: inline-flex;
    vertical-align: middle;
}

/* Position feedback near inputs - use inline for form-table context */
.mxch-admin-wrapper .form-table input + .feedback-container,
.mxch-admin-wrapper .form-table select + .feedback-container,
.mxch-admin-wrapper .form-table textarea + .feedback-container {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 10px;
    right: auto;
    top: auto;
    transform: none;
}

/* Position feedback near inputs - absolute for card layouts with field-control */
.mxch-admin-wrapper .mxch-field-control input + .feedback-container,
.mxch-admin-wrapper .mxch-field-control select + .feedback-container,
.mxch-admin-wrapper .mxch-field-control textarea + .feedback-container {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}

/* Make input containers relative for absolute positioning */
.mxch-admin-wrapper .mxch-field-control {
    position: relative;
}

/* A textarea printed with cols="50" is 398px wide; on a phone that runs past
   the card. Never wider than its field (plan 70d9ad). */
.mxch-admin-wrapper .mxch-field-control textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Feedback inside slider container */
.mxch-admin-wrapper .slider-container + .feedback-container {
    margin-left: 15px;
}

/* Persistent unsaved-state badge (plan 7787f8). Quiet warning, not an error:
   a field whose value differs from its last-saved state carries this on its
   label until the autosave round-trip confirms. */
.mxch-admin-wrapper .mxchat-unsaved-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 1px 8px 1px 6px;
    border-radius: 10px;
    background: var(--mxch-warning-light);
    color: var(--mxch-warning-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.2px;
    vertical-align: middle;
    white-space: nowrap;
    animation: mxchUnsavedIn 0.15s ease-out;
}

.mxch-admin-wrapper .mxchat-unsaved-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mxch-warning);
    flex: none;
}

@keyframes mxchUnsavedIn {
    from { opacity: 0; transform: translateY(1px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Real-time Entry Updates
   ========================================================================== */

/* New entry highlight animation */
.mxchat-new-entry {
    background-color: rgba(120, 115, 245, 0.15);
    animation: mxchatNewEntryFade 2s ease-out forwards;
}

@keyframes mxchatNewEntryFade {
    0% {
        background-color: rgba(120, 115, 245, 0.25);
    }
    100% {
        background-color: transparent;
    }
}

/* Count update flash */
#mxchat-entry-count.mxchat-count-updated,
#mxchat-sidebar-count.mxchat-count-updated {
    animation: mxchatCountPulse 0.5s ease-out;
}

@keyframes mxchatCountPulse {
    0% {
        color: var(--mxch-primary);
        transform: scale(1.2);
    }
    100% {
        color: var(--mxch-text-secondary);
        transform: scale(1);
    }
}

/* Sidebar badge specific pulse - keep white text on purple background */
#mxchat-sidebar-count.mxchat-count-updated {
    animation: mxchatSidebarCountPulse 0.5s ease-out;
}

@keyframes mxchatSidebarCountPulse {
    0% {
        transform: scale(1.3);
        background: var(--mxch-success);
    }
    100% {
        transform: scale(1);
        background: var(--mxch-primary);
    }
}

/* ==========================================================================
   Pro Upgrade v2 - Cleaner, More Professional Design
   ========================================================================== */

/* Sidebar Upgrade Button - v2 (Concise) */
.mxch-sidebar-upgrade-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(120, 115, 245, 0.1);
    border: 1px solid rgba(120, 115, 245, 0.25);
    border-radius: var(--mxch-radius-md);
    color: #c4c1ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.mxch-sidebar-upgrade-v2:hover {
    background: rgba(120, 115, 245, 0.2);
    border-color: rgba(120, 115, 245, 0.5);
    color: #ffffff;
    text-decoration: none;
}

.mxch-sidebar-upgrade-v2:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.4);
}

.mxch-sidebar-upgrade-v2 svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
    flex-shrink: 0;
}

.mxch-sidebar-upgrade-v2:hover svg {
    opacity: 1;
}

/* Pro Banner - v2 (Clean & Minimal) */
.mxch-pro-banner-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(120, 115, 245, 0.08) 0%, rgba(167, 139, 250, 0.06) 100%);
    border: 1px solid rgba(120, 115, 245, 0.15);
    border-radius: var(--mxch-radius-md);
    margin-bottom: var(--mxch-spacing-lg);
}

.mxch-pro-banner-v2-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mxch-pro-banner-v2-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mxch-primary) 0%, #a78bfa 100%);
    border-radius: 8px;
    flex-shrink: 0;
}

.mxch-pro-banner-v2-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.mxch-pro-banner-v2-text {
    flex: 1;
    min-width: 0;
}

.mxch-pro-banner-v2-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mxch-text-primary);
    margin: 0 0 2px 0;
}

.mxch-pro-banner-v2-desc {
    font-size: 12px;
    color: var(--mxch-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.mxch-pro-banner-v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--mxch-primary);
    color: white;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.mxch-pro-banner-v2-btn:hover {
    background: var(--mxch-primary-hover);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(120, 115, 245, 0.3);
}

.mxch-pro-banner-v2-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.3);
}

.mxch-pro-banner-v2-btn svg {
    width: 14px;
    height: 14px;
}

/* Mobile responsive for v2 banner */
@media screen and (max-width: 600px) {
    .mxch-pro-banner-v2 {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .mxch-pro-banner-v2-content {
        flex-direction: column;
    }

    .mxch-pro-banner-v2-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   API Key Fields - Prevent Browser Autofill
   ========================================================================== */

/* Mask API key fields like password fields but avoid browser password autofill */
.mxchat-api-key-field {
    -webkit-text-security: disc;
    text-security: disc;
    font-family: monospace;
}

/* Show actual text when focused or when show button toggled */
.mxchat-api-key-field.mxchat-show-key {
    -webkit-text-security: none;
    text-security: none;
}

/* ==========================================================================
   Debug & Optimization Tools
   ========================================================================== */

/* Debug Log Viewer */
.mxchat-debug-log-viewer {
    max-height: 400px;
    overflow-y: auto;
    background: #f8fafc;
    border: 1px solid var(--mxch-card-border, #e2e4e9);
    border-radius: 8px;
    padding: 0;
}

.mxchat-debug-log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #64748b;
}

.mxchat-debug-log-empty p {
    margin: 16px 0 0;
    font-size: 14px;
}

.mxchat-debug-log-entries {
    padding: 12px;
}

.mxchat-debug-log-entry {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.mxchat-debug-log-entry:last-child {
    margin-bottom: 0;
}

.mxchat-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mxchat-log-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e2e8f0;
    color: #475569;
}

.mxchat-log-type-settings_save .mxchat-log-type {
    background: #dbeafe;
    color: #1e40af;
}

.mxchat-log-type-debug_mode .mxchat-log-type {
    background: #fef3c7;
    color: #92400e;
}

.mxchat-log-type-api_error .mxchat-log-type {
    background: #fee2e2;
    color: #991b1b;
}

.mxchat-log-type-reset .mxchat-log-type {
    background: #fce7f3;
    color: #9d174d;
}

.mxchat-log-type-settings_export .mxchat-log-type {
    background: #d1fae5;
    color: #065f46;
}

.mxchat-log-time {
    font-size: 11px;
    color: #94a3b8;
}

.mxchat-log-message {
    color: #334155;
    line-height: 1.5;
}

.mxchat-log-data {
    margin-top: 8px;
    padding: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    color: #64748b;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Settings Tools Grid */
.mxch-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.mxch-tool-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.mxch-tool-item:hover {
    border-color: var(--mxch-primary, #7873f5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mxch-tool-item-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.mxch-tool-item-danger:hover {
    border-color: #ef4444;
}

.mxch-tool-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
    color: var(--mxch-primary, #7873f5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mxch-tool-item-danger .mxch-tool-icon {
    color: #ef4444;
}

.mxch-tool-content h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.mxch-tool-content p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/* Danger Button */
.mxch-btn-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

.mxch-btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Badge Styles */
.mxch-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    background: #e2e8f0;
    color: #475569;
}

.mxch-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.mxch-badge-success {
    background: #d1fae5;
    color: #065f46;
}

.mxch-badge-error {
    background: #fee2e2;
    color: #991b1b;
}

/* Modal Styles */
.mxch-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mxch-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mxch-modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin: 20px;
}

.mxch-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.mxch-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.mxch-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mxch-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.mxch-modal-body {
    padding: 24px;
}

.mxch-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

/* Input in modal */
.mxch-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mxch-input:focus {
    outline: none;
    border-color: var(--mxch-primary, #7873f5);
    box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
}

/* Responsive adjustments for tools */
@media screen and (max-width: 768px) {
    .mxch-tools-grid {
        grid-template-columns: 1fr;
    }

    .mxch-tool-item {
        flex-direction: column;
        text-align: center;
    }

    .mxch-tool-icon {
        margin: 0 auto;
    }

    .mxchat-debug-log-viewer {
        max-height: 300px;
    }

    .mxch-modal-content {
        margin: 10px;
    }
}

/* ============================================================
   Dashboard page (Setup Assistant + dashboard cards)
   Added with plan-mxchat-20260526-704e25.
   ============================================================ */

.mxch-setup-card .mxch-card-body {
    padding-top: var(--mxch-spacing-md);
}

.mxch-progress-bar {
    height: 6px;
    background: var(--mxch-card-border, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
    margin: var(--mxch-spacing-sm) 0 var(--mxch-spacing-xs);
}

.mxch-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mxch-primary) 0%, #9b96ff 100%);
    border-radius: 999px;
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mxch-progress-label {
    font-size: 12px;
    color: var(--mxch-text-secondary);
    margin: 0 0 var(--mxch-spacing-md);
    font-weight: 500;
}

.mxch-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mxch-spacing-sm);
}

.mxch-step {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: var(--mxch-spacing-md);
    padding: var(--mxch-spacing-md);
    background: var(--mxch-content-bg, #f7f8fa);
    border: 1px solid transparent;
    border-radius: var(--mxch-radius-md);
    transition: background 160ms ease, border-color 160ms ease;
}

.mxch-step.mxch-step-in-progress {
    background: var(--mxch-primary-lighter, rgba(120, 115, 245, 0.05));
    border-color: var(--mxch-primary-light, rgba(120, 115, 245, 0.1));
}

.mxch-step.mxch-step-done {
    background: rgba(16, 185, 129, 0.06);
}

.mxch-step-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: var(--mxch-text-secondary, #64748b);
    border: 1.5px solid var(--mxch-card-border, #e5e7eb);
    flex-shrink: 0;
}

.mxch-step-in-progress .mxch-step-indicator {
    color: var(--mxch-primary);
    border-color: var(--mxch-primary);
    background: #fff;
    box-shadow: 0 0 0 4px var(--mxch-primary-lighter, rgba(120, 115, 245, 0.06));
}

.mxch-step-done .mxch-step-indicator {
    background: var(--mxch-success, #10b981);
    border-color: var(--mxch-success, #10b981);
    color: #fff;
}

.mxch-step-number {
    line-height: 1;
}

.mxch-step-body {
    min-width: 0;
}

.mxch-step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mxch-text-primary, #1a1a2e);
    margin-bottom: 2px;
}

.mxch-step-done .mxch-step-title {
    color: var(--mxch-text-secondary, #64748b);
}

.mxch-step-description {
    font-size: 12.5px;
    color: var(--mxch-text-secondary, #64748b);
    line-height: 1.45;
}

.mxch-step-action {
    align-self: center;
}

.mxch-setup-dismiss-row {
    margin-top: var(--mxch-spacing-md);
    text-align: right;
}

.mxch-setup-dismiss,
.mxch-setup-resume {
    font-size: 12.5px;
    color: var(--mxch-text-secondary, #64748b);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.mxch-setup-dismiss:hover,
.mxch-setup-resume:hover {
    color: var(--mxch-primary);
}

.mxch-resume-setup-row {
    margin: 0 0 var(--mxch-spacing-md);
    text-align: right;
}

.mxch-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mxch-spacing-md);
    margin-top: var(--mxch-spacing-lg);
}

.mxch-dashboard-card .mxch-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--mxch-spacing-sm);
}

.mxch-dashboard-big-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--mxch-text-primary, #1a1a2e);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.mxch-dashboard-provider-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--mxch-text-primary, #1a1a2e);
    word-break: break-word;
}

.mxch-dashboard-card-meta {
    font-size: 13px;
    color: var(--mxch-text-secondary, #64748b);
    margin: 0;
}

@media (max-width: 1024px) {
    .mxch-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 782px) {
    .mxch-step {
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
        gap: var(--mxch-spacing-sm) var(--mxch-spacing-md);
    }
    .mxch-step-action {
        grid-column: 1 / -1;
        text-align: right;
    }
    .mxch-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
 * Test Streaming Compatibility button (AI Models page)
 * Branded .mxch-btn replacing the legacy WP button + dashicon wrench.
 * ------------------------------------------------------------------ */
.mxch-streaming-test-row {
    margin-top: var(--mxch-spacing-md, 16px);
}
.mxch-streaming-test-row .mxch-streaming-test-icon {
    vertical-align: middle;
    margin-right: 8px;
}
.mxch-streaming-test-result {
    margin-top: var(--mxch-spacing-sm, 12px);
    font-weight: 600;
    color: var(--mxch-text-primary, #1a1a2e);
}

/* ------------------------------------------------------------------
 * Status pill — documented shell component (CLAUDE.md design table).
 * Moved here from admin-api-page.php's inline <style> (plan b6e4d4) so
 * every admin page renders it, not just the API page. Rules are
 * byte-identical to the inline originals.
 * ------------------------------------------------------------------ */
.mxch-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.mxch-status-pill .mxch-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.mxch-status-pill-active { background: #e6f4ea; color: #1d7a3a; }
.mxch-status-pill-active .mxch-status-dot { background: #1d7a3a; }
.mxch-status-pill-disabled { background: #fef3e2; color: #a04a00; }
.mxch-status-pill-disabled .mxch-status-dot { background: #a04a00; }
/* Warning: something the owner still has to do by hand (plan 47c61f). */
.mxch-status-pill-warning { background: var(--mxch-warning-light); color: var(--mxch-warning-text); }
.mxch-status-pill-warning .mxch-status-dot { background: var(--mxch-warning); }