File: /home/d5123/myboofola_com/wp-content/plugins/mxchat-basic/css/admin-sidebar.css
/* ==========================================================================
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-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);
margin-left: -20px;
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;
}
/* 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: -20px;
}
/* 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%;
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;
}
/* 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;
}
/* ==========================================================================
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 */
.mxch-card-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
/* Content header adjustments */
.mxch-content-header {
margin-bottom: var(--mxch-spacing-md);
}
.mxch-content-title {
font-size: 20px;
}
}
@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;
}
/* Feedback inside slider container */
.mxch-admin-wrapper .slider-container + .feedback-container {
margin-left: 15px;
}
/* ==========================================================================
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);
}