| @@ -1154,23 +1154,8 @@ | ||
| 1154 | 1154 | flex: 1; |
| 1155 | 1155 | margin-bottom: 0; |
| 1156 | 1156 | } |
| 1157 | 1157 | |
| 1158 | -/* Global cap "Current usage" readout (plan-mxchat-20260603-e9b3f9) */ | |
| 1159 | -.mxch-rate-limit-usage { | |
| 1160 | - margin-top: var(--mxch-spacing-md); | |
| 1161 | - padding-top: var(--mxch-spacing-md); | |
| 1162 | - border-top: 1px solid var(--mxch-card-border); | |
| 1163 | -} | |
| 1164 | - | |
| 1165 | -.mxch-rate-limit-usage-head { | |
| 1166 | - display: flex; | |
| 1167 | - align-items: center; | |
| 1168 | - justify-content: space-between; | |
| 1169 | - gap: var(--mxch-spacing-md); | |
| 1170 | - margin-bottom: var(--mxch-spacing-xs); | |
| 1171 | -} | |
| 1172 | - | |
| 1173 | 1158 | /* ========================================================================== |
| 1174 | 1159 | Buttons |
| 1175 | 1160 | ========================================================================== */ |
| 1176 | 1161 | .mxch-btn { |
| @@ -1303,87 +1288,8 @@ | ||
| 1303 | 1288 | border: 1px solid #fecaca; |
| 1304 | 1289 | } |
| 1305 | 1290 | |
| 1306 | 1291 | /* ========================================================================== |
| 1307 | - Disclosure (collapsible <details>) | |
| 1308 | - Generic Advanced/opt-in surface — used for static-bearer fallback on | |
| 1309 | - mxchat-mcp's Connected Apps tab, and any add-on that needs the same | |
| 1310 | - "advanced/show more" pattern. Originally lived in plugins/mxchat-mcp/css/ | |
| 1311 | - admin-mcp.css; elevated here so every add-on inherits via the standard | |
| 1312 | - admin-sidebar.css enqueue. | |
| 1313 | - ========================================================================== */ | |
| 1314 | -.mxch-disclosure { | |
| 1315 | - margin-top: 16px; | |
| 1316 | - border: 1px solid var(--mxch-card-border, #e2e4e9); | |
| 1317 | - border-radius: var(--mxch-radius-md, 6px); | |
| 1318 | - background: #fbfcfd; | |
| 1319 | -} | |
| 1320 | -.mxch-disclosure[open] { | |
| 1321 | - background: #fff; | |
| 1322 | -} | |
| 1323 | -.mxch-disclosure-summary { | |
| 1324 | - display: flex; | |
| 1325 | - align-items: center; | |
| 1326 | - gap: 10px; | |
| 1327 | - padding: 10px 14px; | |
| 1328 | - cursor: pointer; | |
| 1329 | - list-style: none; | |
| 1330 | - user-select: none; | |
| 1331 | - color: var(--mxch-text-secondary, #57606a); | |
| 1332 | - font-size: 13px; | |
| 1333 | - font-weight: 600; | |
| 1334 | -} | |
| 1335 | -.mxch-disclosure-summary::-webkit-details-marker { display: none; } | |
| 1336 | -.mxch-disclosure-summary::before { | |
| 1337 | - content: ""; | |
| 1338 | - display: inline-block; | |
| 1339 | - width: 8px; | |
| 1340 | - height: 8px; | |
| 1341 | - border-right: 2px solid currentColor; | |
| 1342 | - border-bottom: 2px solid currentColor; | |
| 1343 | - transform: rotate(-45deg); | |
| 1344 | - transition: transform 0.18s ease; | |
| 1345 | - margin-right: 2px; | |
| 1346 | -} | |
| 1347 | -.mxch-disclosure[open] > .mxch-disclosure-summary::before { | |
| 1348 | - transform: rotate(45deg); | |
| 1349 | -} | |
| 1350 | -.mxch-disclosure-summary svg { | |
| 1351 | - flex-shrink: 0; | |
| 1352 | - opacity: 0.7; | |
| 1353 | -} | |
| 1354 | -.mxch-disclosure-summary-text { | |
| 1355 | - color: var(--mxch-text-primary, #1d2327); | |
| 1356 | - font-weight: 600; | |
| 1357 | -} | |
| 1358 | -.mxch-disclosure-summary-hint { | |
| 1359 | - color: var(--mxch-text-secondary, #57606a); | |
| 1360 | - font-weight: 400; | |
| 1361 | - font-size: 12px; | |
| 1362 | -} | |
| 1363 | -.mxch-disclosure-summary:hover .mxch-disclosure-summary-text { | |
| 1364 | - color: var(--mxch-primary, #7873f5); | |
| 1365 | -} | |
| 1366 | -.mxch-disclosure-summary:focus-visible { | |
| 1367 | - outline: 2px solid var(--mxch-primary, #7873f5); | |
| 1368 | - outline-offset: 2px; | |
| 1369 | - border-radius: var(--mxch-radius-md, 6px); | |
| 1370 | -} | |
| 1371 | -.mxch-disclosure-body { | |
| 1372 | - padding: 8px 14px 14px 14px; | |
| 1373 | - border-top: 1px solid var(--mxch-card-border, #e2e4e9); | |
| 1374 | -} | |
| 1375 | -@media (max-width: 600px) { | |
| 1376 | - .mxch-disclosure-summary { | |
| 1377 | - flex-wrap: wrap; | |
| 1378 | - } | |
| 1379 | - .mxch-disclosure-summary-hint { | |
| 1380 | - flex-basis: 100%; | |
| 1381 | - margin-left: 18px; | |
| 1382 | - } | |
| 1383 | -} | |
| 1384 | - | |
| 1385 | -/* ========================================================================== | |
| 1386 | 1292 | Quick Questions List |
| 1387 | 1293 | ========================================================================== */ |
| 1388 | 1294 | .mxch-quick-questions { |
| 1389 | 1295 | display: flex; |
| @@ -1912,24 +1818,8 @@ | ||
| 1912 | 1818 | |
| 1913 | 1819 | .mxch-rate-limit-controls { |
| 1914 | 1820 | flex-direction: column; |
| 1915 | 1821 | } |
| 1916 | - | |
| 1917 | - /* Card headers stack on mobile */ | |
| 1918 | - .mxch-card-header { | |
| 1919 | - flex-direction: column; | |
| 1920 | - align-items: stretch; | |
| 1921 | - gap: 12px; | |
| 1922 | - } | |
| 1923 | - | |
| 1924 | - /* Content header adjustments */ | |
| 1925 | - .mxch-content-header { | |
| 1926 | - margin-bottom: var(--mxch-spacing-md); | |
| 1927 | - } | |
| 1928 | - | |
| 1929 | - .mxch-content-title { | |
| 1930 | - font-size: 20px; | |
| 1931 | - } | |
| 1932 | 1822 | } |
| 1933 | 1823 | |
| 1934 | 1824 | @media screen and (max-width: 600px) { |
| 1935 | 1825 | .mxch-content { |
| @@ -2058,25 +1948,12 @@ | ||
| 2058 | 1948 | display: inline-flex; |
| 2059 | 1949 | vertical-align: middle; |
| 2060 | 1950 | } |
| 2061 | 1951 | |
| 2062 | -/* Position feedback near inputs - use inline for form-table context */ | |
| 2063 | -.mxch-admin-wrapper .form-table input + .feedback-container, | |
| 2064 | -.mxch-admin-wrapper .form-table select + .feedback-container, | |
| 2065 | -.mxch-admin-wrapper .form-table textarea + .feedback-container { | |
| 2066 | - position: relative; | |
| 2067 | - display: inline-flex; | |
| 2068 | - vertical-align: middle; | |
| 2069 | - margin-left: 10px; | |
| 2070 | - right: auto; | |
| 2071 | - top: auto; | |
| 2072 | - transform: none; | |
| 2073 | -} | |
| 2074 | - | |
| 2075 | -/* Position feedback near inputs - absolute for card layouts with field-control */ | |
| 2076 | -.mxch-admin-wrapper .mxch-field-control input + .feedback-container, | |
| 2077 | -.mxch-admin-wrapper .mxch-field-control select + .feedback-container, | |
| 2078 | -.mxch-admin-wrapper .mxch-field-control textarea + .feedback-container { | |
| 1952 | +/* Position feedback near inputs */ | |
| 1953 | +.mxch-admin-wrapper input + .feedback-container, | |
| 1954 | +.mxch-admin-wrapper select + .feedback-container, | |
| 1955 | +.mxch-admin-wrapper textarea + .feedback-container { | |
| 2079 | 1956 | position: absolute; |
| 2080 | 1957 | right: -30px; |
| 2081 | 1958 | top: 50%; |
| 2082 | 1959 | transform: translateY(-50%); |
| @@ -2296,569 +2173,5 @@ | ||
| 2296 | 2173 | .mxch-pro-banner-v2-btn { |
| 2297 | 2174 | width: 100%; |
| 2298 | 2175 | justify-content: center; |
| 2299 | 2176 | } |
| 2300 | -} | |
| 2301 | - | |
| 2302 | -/* ========================================================================== | |
| 2303 | - API Key Fields - Prevent Browser Autofill | |
| 2304 | - ========================================================================== */ | |
| 2305 | - | |
| 2306 | -/* Mask API key fields like password fields but avoid browser password autofill */ | |
| 2307 | -.mxchat-api-key-field { | |
| 2308 | - -webkit-text-security: disc; | |
| 2309 | - text-security: disc; | |
| 2310 | - font-family: monospace; | |
| 2311 | -} | |
| 2312 | - | |
| 2313 | -/* Show actual text when focused or when show button toggled */ | |
| 2314 | -.mxchat-api-key-field.mxchat-show-key { | |
| 2315 | - -webkit-text-security: none; | |
| 2316 | - text-security: none; | |
| 2317 | -} | |
| 2318 | - | |
| 2319 | -/* ========================================================================== | |
| 2320 | - Debug & Optimization Tools | |
| 2321 | - ========================================================================== */ | |
| 2322 | - | |
| 2323 | -/* Debug Log Viewer */ | |
| 2324 | -.mxchat-debug-log-viewer { | |
| 2325 | - max-height: 400px; | |
| 2326 | - overflow-y: auto; | |
| 2327 | - background: #f8fafc; | |
| 2328 | - border: 1px solid var(--mxch-card-border, #e2e4e9); | |
| 2329 | - border-radius: 8px; | |
| 2330 | - padding: 0; | |
| 2331 | -} | |
| 2332 | - | |
| 2333 | -.mxchat-debug-log-empty { | |
| 2334 | - display: flex; | |
| 2335 | - flex-direction: column; | |
| 2336 | - align-items: center; | |
| 2337 | - justify-content: center; | |
| 2338 | - padding: 48px 24px; | |
| 2339 | - text-align: center; | |
| 2340 | - color: #64748b; | |
| 2341 | -} | |
| 2342 | - | |
| 2343 | -.mxchat-debug-log-empty p { | |
| 2344 | - margin: 16px 0 0; | |
| 2345 | - font-size: 14px; | |
| 2346 | -} | |
| 2347 | - | |
| 2348 | -.mxchat-debug-log-entries { | |
| 2349 | - padding: 12px; | |
| 2350 | -} | |
| 2351 | - | |
| 2352 | -.mxchat-debug-log-entry { | |
| 2353 | - background: #ffffff; | |
| 2354 | - border: 1px solid #e2e8f0; | |
| 2355 | - border-radius: 8px; | |
| 2356 | - padding: 12px; | |
| 2357 | - margin-bottom: 8px; | |
| 2358 | - font-size: 13px; | |
| 2359 | -} | |
| 2360 | - | |
| 2361 | -.mxchat-debug-log-entry:last-child { | |
| 2362 | - margin-bottom: 0; | |
| 2363 | -} | |
| 2364 | - | |
| 2365 | -.mxchat-log-header { | |
| 2366 | - display: flex; | |
| 2367 | - justify-content: space-between; | |
| 2368 | - align-items: center; | |
| 2369 | - margin-bottom: 8px; | |
| 2370 | -} | |
| 2371 | - | |
| 2372 | -.mxchat-log-type { | |
| 2373 | - display: inline-block; | |
| 2374 | - padding: 2px 8px; | |
| 2375 | - border-radius: 4px; | |
| 2376 | - font-size: 10px; | |
| 2377 | - font-weight: 600; | |
| 2378 | - text-transform: uppercase; | |
| 2379 | - letter-spacing: 0.5px; | |
| 2380 | - background: #e2e8f0; | |
| 2381 | - color: #475569; | |
| 2382 | -} | |
| 2383 | - | |
| 2384 | -.mxchat-log-type-settings_save .mxchat-log-type { | |
| 2385 | - background: #dbeafe; | |
| 2386 | - color: #1e40af; | |
| 2387 | -} | |
| 2388 | - | |
| 2389 | -.mxchat-log-type-debug_mode .mxchat-log-type { | |
| 2390 | - background: #fef3c7; | |
| 2391 | - color: #92400e; | |
| 2392 | -} | |
| 2393 | - | |
| 2394 | -.mxchat-log-type-api_error .mxchat-log-type { | |
| 2395 | - background: #fee2e2; | |
| 2396 | - color: #991b1b; | |
| 2397 | -} | |
| 2398 | - | |
| 2399 | -.mxchat-log-type-reset .mxchat-log-type { | |
| 2400 | - background: #fce7f3; | |
| 2401 | - color: #9d174d; | |
| 2402 | -} | |
| 2403 | - | |
| 2404 | -.mxchat-log-type-settings_export .mxchat-log-type { | |
| 2405 | - background: #d1fae5; | |
| 2406 | - color: #065f46; | |
| 2407 | -} | |
| 2408 | - | |
| 2409 | -.mxchat-log-time { | |
| 2410 | - font-size: 11px; | |
| 2411 | - color: #94a3b8; | |
| 2412 | -} | |
| 2413 | - | |
| 2414 | -.mxchat-log-message { | |
| 2415 | - color: #334155; | |
| 2416 | - line-height: 1.5; | |
| 2417 | -} | |
| 2418 | - | |
| 2419 | -.mxchat-log-data { | |
| 2420 | - margin-top: 8px; | |
| 2421 | - padding: 8px; | |
| 2422 | - background: #f1f5f9; | |
| 2423 | - border-radius: 4px; | |
| 2424 | - font-family: monospace; | |
| 2425 | - font-size: 11px; | |
| 2426 | - color: #64748b; | |
| 2427 | - white-space: pre-wrap; | |
| 2428 | - word-break: break-all; | |
| 2429 | -} | |
| 2430 | - | |
| 2431 | -/* Settings Tools Grid */ | |
| 2432 | -.mxch-tools-grid { | |
| 2433 | - display: grid; | |
| 2434 | - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| 2435 | - gap: 24px; | |
| 2436 | -} | |
| 2437 | - | |
| 2438 | -.mxch-tool-item { | |
| 2439 | - display: flex; | |
| 2440 | - gap: 16px; | |
| 2441 | - padding: 20px; | |
| 2442 | - background: #f8fafc; | |
| 2443 | - border: 1px solid #e2e8f0; | |
| 2444 | - border-radius: 12px; | |
| 2445 | - transition: all 0.2s ease; | |
| 2446 | -} | |
| 2447 | - | |
| 2448 | -.mxch-tool-item:hover { | |
| 2449 | - border-color: var(--mxch-primary, #7873f5); | |
| 2450 | - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); | |
| 2451 | -} | |
| 2452 | - | |
| 2453 | -.mxch-tool-item-danger { | |
| 2454 | - border-color: #fecaca; | |
| 2455 | - background: #fef2f2; | |
| 2456 | -} | |
| 2457 | - | |
| 2458 | -.mxch-tool-item-danger:hover { | |
| 2459 | - border-color: #ef4444; | |
| 2460 | -} | |
| 2461 | - | |
| 2462 | -.mxch-tool-icon { | |
| 2463 | - flex-shrink: 0; | |
| 2464 | - width: 48px; | |
| 2465 | - height: 48px; | |
| 2466 | - display: flex; | |
| 2467 | - align-items: center; | |
| 2468 | - justify-content: center; | |
| 2469 | - background: #ffffff; | |
| 2470 | - border-radius: 10px; | |
| 2471 | - color: var(--mxch-primary, #7873f5); | |
| 2472 | - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| 2473 | -} | |
| 2474 | - | |
| 2475 | -.mxch-tool-item-danger .mxch-tool-icon { | |
| 2476 | - color: #ef4444; | |
| 2477 | -} | |
| 2478 | - | |
| 2479 | -.mxch-tool-content h4 { | |
| 2480 | - margin: 0 0 6px; | |
| 2481 | - font-size: 15px; | |
| 2482 | - font-weight: 600; | |
| 2483 | - color: #1e293b; | |
| 2484 | -} | |
| 2485 | - | |
| 2486 | -.mxch-tool-content p { | |
| 2487 | - margin: 0 0 12px; | |
| 2488 | - font-size: 13px; | |
| 2489 | - color: #64748b; | |
| 2490 | - line-height: 1.5; | |
| 2491 | -} | |
| 2492 | - | |
| 2493 | -/* Danger Button */ | |
| 2494 | -.mxch-btn-danger { | |
| 2495 | - background: #ef4444 !important; | |
| 2496 | - color: #ffffff !important; | |
| 2497 | - border-color: #ef4444 !important; | |
| 2498 | -} | |
| 2499 | - | |
| 2500 | -.mxch-btn-danger:hover { | |
| 2501 | - background: #dc2626 !important; | |
| 2502 | - border-color: #dc2626 !important; | |
| 2503 | -} | |
| 2504 | - | |
| 2505 | -/* Badge Styles */ | |
| 2506 | -.mxch-badge { | |
| 2507 | - display: inline-flex; | |
| 2508 | - align-items: center; | |
| 2509 | - padding: 4px 10px; | |
| 2510 | - font-size: 12px; | |
| 2511 | - font-weight: 500; | |
| 2512 | - border-radius: 20px; | |
| 2513 | - background: #e2e8f0; | |
| 2514 | - color: #475569; | |
| 2515 | -} | |
| 2516 | - | |
| 2517 | -.mxch-badge-warning { | |
| 2518 | - background: #fef3c7; | |
| 2519 | - color: #92400e; | |
| 2520 | -} | |
| 2521 | - | |
| 2522 | -.mxch-badge-success { | |
| 2523 | - background: #d1fae5; | |
| 2524 | - color: #065f46; | |
| 2525 | -} | |
| 2526 | - | |
| 2527 | -.mxch-badge-error { | |
| 2528 | - background: #fee2e2; | |
| 2529 | - color: #991b1b; | |
| 2530 | -} | |
| 2531 | - | |
| 2532 | -/* Modal Styles */ | |
| 2533 | -.mxch-modal { | |
| 2534 | - position: fixed; | |
| 2535 | - top: 0; | |
| 2536 | - left: 0; | |
| 2537 | - right: 0; | |
| 2538 | - bottom: 0; | |
| 2539 | - z-index: 100000; | |
| 2540 | - display: flex; | |
| 2541 | - align-items: center; | |
| 2542 | - justify-content: center; | |
| 2543 | -} | |
| 2544 | - | |
| 2545 | -.mxch-modal-backdrop { | |
| 2546 | - position: absolute; | |
| 2547 | - top: 0; | |
| 2548 | - left: 0; | |
| 2549 | - right: 0; | |
| 2550 | - bottom: 0; | |
| 2551 | - background: rgba(0, 0, 0, 0.5); | |
| 2552 | -} | |
| 2553 | - | |
| 2554 | -.mxch-modal-content { | |
| 2555 | - position: relative; | |
| 2556 | - width: 100%; | |
| 2557 | - max-width: 480px; | |
| 2558 | - background: #ffffff; | |
| 2559 | - border-radius: 16px; | |
| 2560 | - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| 2561 | - margin: 20px; | |
| 2562 | -} | |
| 2563 | - | |
| 2564 | -.mxch-modal-header { | |
| 2565 | - display: flex; | |
| 2566 | - justify-content: space-between; | |
| 2567 | - align-items: center; | |
| 2568 | - padding: 20px 24px; | |
| 2569 | - border-bottom: 1px solid #e2e8f0; | |
| 2570 | -} | |
| 2571 | - | |
| 2572 | -.mxch-modal-header h3 { | |
| 2573 | - margin: 0; | |
| 2574 | - font-size: 18px; | |
| 2575 | - font-weight: 600; | |
| 2576 | - color: #1e293b; | |
| 2577 | -} | |
| 2578 | - | |
| 2579 | -.mxch-modal-close { | |
| 2580 | - width: 32px; | |
| 2581 | - height: 32px; | |
| 2582 | - display: flex; | |
| 2583 | - align-items: center; | |
| 2584 | - justify-content: center; | |
| 2585 | - background: none; | |
| 2586 | - border: none; | |
| 2587 | - font-size: 24px; | |
| 2588 | - color: #64748b; | |
| 2589 | - cursor: pointer; | |
| 2590 | - border-radius: 8px; | |
| 2591 | - transition: all 0.2s ease; | |
| 2592 | -} | |
| 2593 | - | |
| 2594 | -.mxch-modal-close:hover { | |
| 2595 | - background: #f1f5f9; | |
| 2596 | - color: #1e293b; | |
| 2597 | -} | |
| 2598 | - | |
| 2599 | -.mxch-modal-body { | |
| 2600 | - padding: 24px; | |
| 2601 | -} | |
| 2602 | - | |
| 2603 | -.mxch-modal-footer { | |
| 2604 | - display: flex; | |
| 2605 | - justify-content: flex-end; | |
| 2606 | - gap: 12px; | |
| 2607 | - padding: 16px 24px; | |
| 2608 | - border-top: 1px solid #e2e8f0; | |
| 2609 | - background: #f8fafc; | |
| 2610 | - border-radius: 0 0 16px 16px; | |
| 2611 | -} | |
| 2612 | - | |
| 2613 | -/* Input in modal */ | |
| 2614 | -.mxch-input { | |
| 2615 | - width: 100%; | |
| 2616 | - padding: 10px 14px; | |
| 2617 | - font-size: 14px; | |
| 2618 | - border: 1px solid #d1d5db; | |
| 2619 | - border-radius: 8px; | |
| 2620 | - transition: all 0.2s ease; | |
| 2621 | -} | |
| 2622 | - | |
| 2623 | -.mxch-input:focus { | |
| 2624 | - outline: none; | |
| 2625 | - border-color: var(--mxch-primary, #7873f5); | |
| 2626 | - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1); | |
| 2627 | -} | |
| 2628 | - | |
| 2629 | -/* Responsive adjustments for tools */ | |
| 2630 | -@media screen and (max-width: 768px) { | |
| 2631 | - .mxch-tools-grid { | |
| 2632 | - grid-template-columns: 1fr; | |
| 2633 | - } | |
| 2634 | - | |
| 2635 | - .mxch-tool-item { | |
| 2636 | - flex-direction: column; | |
| 2637 | - text-align: center; | |
| 2638 | - } | |
| 2639 | - | |
| 2640 | - .mxch-tool-icon { | |
| 2641 | - margin: 0 auto; | |
| 2642 | - } | |
| 2643 | - | |
| 2644 | - .mxchat-debug-log-viewer { | |
| 2645 | - max-height: 300px; | |
| 2646 | - } | |
| 2647 | - | |
| 2648 | - .mxch-modal-content { | |
| 2649 | - margin: 10px; | |
| 2650 | - } | |
| 2651 | -} | |
| 2652 | - | |
| 2653 | -/* ============================================================ | |
| 2654 | - Dashboard page (Setup Assistant + dashboard cards) | |
| 2655 | - Added with plan-mxchat-20260526-704e25. | |
| 2656 | - ============================================================ */ | |
| 2657 | - | |
| 2658 | -.mxch-setup-card .mxch-card-body { | |
| 2659 | - padding-top: var(--mxch-spacing-md); | |
| 2660 | -} | |
| 2661 | - | |
| 2662 | -.mxch-progress-bar { | |
| 2663 | - height: 6px; | |
| 2664 | - background: var(--mxch-card-border, #e5e7eb); | |
| 2665 | - border-radius: 999px; | |
| 2666 | - overflow: hidden; | |
| 2667 | - margin: var(--mxch-spacing-sm) 0 var(--mxch-spacing-xs); | |
| 2668 | -} | |
| 2669 | - | |
| 2670 | -.mxch-progress-bar-fill { | |
| 2671 | - height: 100%; | |
| 2672 | - background: linear-gradient(90deg, var(--mxch-primary) 0%, #9b96ff 100%); | |
| 2673 | - border-radius: 999px; | |
| 2674 | - transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1); | |
| 2675 | -} | |
| 2676 | - | |
| 2677 | -.mxch-progress-label { | |
| 2678 | - font-size: 12px; | |
| 2679 | - color: var(--mxch-text-secondary); | |
| 2680 | - margin: 0 0 var(--mxch-spacing-md); | |
| 2681 | - font-weight: 500; | |
| 2682 | -} | |
| 2683 | - | |
| 2684 | -.mxch-step-list { | |
| 2685 | - list-style: none; | |
| 2686 | - margin: 0; | |
| 2687 | - padding: 0; | |
| 2688 | - display: flex; | |
| 2689 | - flex-direction: column; | |
| 2690 | - gap: var(--mxch-spacing-sm); | |
| 2691 | -} | |
| 2692 | - | |
| 2693 | -.mxch-step { | |
| 2694 | - display: grid; | |
| 2695 | - grid-template-columns: 32px 1fr auto; | |
| 2696 | - align-items: center; | |
| 2697 | - gap: var(--mxch-spacing-md); | |
| 2698 | - padding: var(--mxch-spacing-md); | |
| 2699 | - background: var(--mxch-content-bg, #f7f8fa); | |
| 2700 | - border: 1px solid transparent; | |
| 2701 | - border-radius: var(--mxch-radius-md); | |
| 2702 | - transition: background 160ms ease, border-color 160ms ease; | |
| 2703 | -} | |
| 2704 | - | |
| 2705 | -.mxch-step.mxch-step-in-progress { | |
| 2706 | - background: var(--mxch-primary-lighter, rgba(120, 115, 245, 0.05)); | |
| 2707 | - border-color: var(--mxch-primary-light, rgba(120, 115, 245, 0.1)); | |
| 2708 | -} | |
| 2709 | - | |
| 2710 | -.mxch-step.mxch-step-done { | |
| 2711 | - background: rgba(16, 185, 129, 0.06); | |
| 2712 | -} | |
| 2713 | - | |
| 2714 | -.mxch-step-indicator { | |
| 2715 | - width: 28px; | |
| 2716 | - height: 28px; | |
| 2717 | - border-radius: 50%; | |
| 2718 | - display: flex; | |
| 2719 | - align-items: center; | |
| 2720 | - justify-content: center; | |
| 2721 | - font-size: 13px; | |
| 2722 | - font-weight: 600; | |
| 2723 | - background: #fff; | |
| 2724 | - color: var(--mxch-text-secondary, #64748b); | |
| 2725 | - border: 1.5px solid var(--mxch-card-border, #e5e7eb); | |
| 2726 | - flex-shrink: 0; | |
| 2727 | -} | |
| 2728 | - | |
| 2729 | -.mxch-step-in-progress .mxch-step-indicator { | |
| 2730 | - color: var(--mxch-primary); | |
| 2731 | - border-color: var(--mxch-primary); | |
| 2732 | - background: #fff; | |
| 2733 | - box-shadow: 0 0 0 4px var(--mxch-primary-lighter, rgba(120, 115, 245, 0.06)); | |
| 2734 | -} | |
| 2735 | - | |
| 2736 | -.mxch-step-done .mxch-step-indicator { | |
| 2737 | - background: var(--mxch-success, #10b981); | |
| 2738 | - border-color: var(--mxch-success, #10b981); | |
| 2739 | - color: #fff; | |
| 2740 | -} | |
| 2741 | - | |
| 2742 | -.mxch-step-number { | |
| 2743 | - line-height: 1; | |
| 2744 | -} | |
| 2745 | - | |
| 2746 | -.mxch-step-body { | |
| 2747 | - min-width: 0; | |
| 2748 | -} | |
| 2749 | - | |
| 2750 | -.mxch-step-title { | |
| 2751 | - font-size: 14px; | |
| 2752 | - font-weight: 600; | |
| 2753 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2754 | - margin-bottom: 2px; | |
| 2755 | -} | |
| 2756 | - | |
| 2757 | -.mxch-step-done .mxch-step-title { | |
| 2758 | - color: var(--mxch-text-secondary, #64748b); | |
| 2759 | -} | |
| 2760 | - | |
| 2761 | -.mxch-step-description { | |
| 2762 | - font-size: 12.5px; | |
| 2763 | - color: var(--mxch-text-secondary, #64748b); | |
| 2764 | - line-height: 1.45; | |
| 2765 | -} | |
| 2766 | - | |
| 2767 | -.mxch-step-action { | |
| 2768 | - align-self: center; | |
| 2769 | -} | |
| 2770 | - | |
| 2771 | -.mxch-setup-dismiss-row { | |
| 2772 | - margin-top: var(--mxch-spacing-md); | |
| 2773 | - text-align: right; | |
| 2774 | -} | |
| 2775 | - | |
| 2776 | -.mxch-setup-dismiss, | |
| 2777 | -.mxch-setup-resume { | |
| 2778 | - font-size: 12.5px; | |
| 2779 | - color: var(--mxch-text-secondary, #64748b); | |
| 2780 | - text-decoration: none; | |
| 2781 | - border-bottom: 1px dotted currentColor; | |
| 2782 | -} | |
| 2783 | - | |
| 2784 | -.mxch-setup-dismiss:hover, | |
| 2785 | -.mxch-setup-resume:hover { | |
| 2786 | - color: var(--mxch-primary); | |
| 2787 | -} | |
| 2788 | - | |
| 2789 | -.mxch-resume-setup-row { | |
| 2790 | - margin: 0 0 var(--mxch-spacing-md); | |
| 2791 | - text-align: right; | |
| 2792 | -} | |
| 2793 | - | |
| 2794 | -.mxch-dashboard-grid { | |
| 2795 | - display: grid; | |
| 2796 | - grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 2797 | - gap: var(--mxch-spacing-md); | |
| 2798 | - margin-top: var(--mxch-spacing-lg); | |
| 2799 | -} | |
| 2800 | - | |
| 2801 | -.mxch-dashboard-card .mxch-card-body { | |
| 2802 | - display: flex; | |
| 2803 | - flex-direction: column; | |
| 2804 | - gap: var(--mxch-spacing-sm); | |
| 2805 | -} | |
| 2806 | - | |
| 2807 | -.mxch-dashboard-big-number { | |
| 2808 | - font-size: 36px; | |
| 2809 | - font-weight: 700; | |
| 2810 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2811 | - line-height: 1.1; | |
| 2812 | - letter-spacing: -0.02em; | |
| 2813 | -} | |
| 2814 | - | |
| 2815 | -.mxch-dashboard-provider-name { | |
| 2816 | - font-size: 16px; | |
| 2817 | - font-weight: 600; | |
| 2818 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2819 | - word-break: break-word; | |
| 2820 | -} | |
| 2821 | - | |
| 2822 | -.mxch-dashboard-card-meta { | |
| 2823 | - font-size: 13px; | |
| 2824 | - color: var(--mxch-text-secondary, #64748b); | |
| 2825 | - margin: 0; | |
| 2826 | -} | |
| 2827 | - | |
| 2828 | -@media (max-width: 1024px) { | |
| 2829 | - .mxch-dashboard-grid { | |
| 2830 | - grid-template-columns: 1fr 1fr; | |
| 2831 | - } | |
| 2832 | -} | |
| 2833 | - | |
| 2834 | -@media (max-width: 782px) { | |
| 2835 | - .mxch-step { | |
| 2836 | - grid-template-columns: 32px 1fr; | |
| 2837 | - grid-template-rows: auto auto; | |
| 2838 | - gap: var(--mxch-spacing-sm) var(--mxch-spacing-md); | |
| 2839 | - } | |
| 2840 | - .mxch-step-action { | |
| 2841 | - grid-column: 1 / -1; | |
| 2842 | - text-align: right; | |
| 2843 | - } | |
| 2844 | - .mxch-dashboard-grid { | |
| 2845 | - grid-template-columns: 1fr; | |
| 2846 | - } | |
| 2847 | -} | |
| 2848 | - | |
| 2849 | -/* ------------------------------------------------------------------ | |
| 2850 | - * Test Streaming Compatibility button (AI Models page) | |
| 2851 | - * Branded .mxch-btn replacing the legacy WP button + dashicon wrench. | |
| 2852 | - * ------------------------------------------------------------------ */ | |
| 2853 | -.mxch-streaming-test-row { | |
| 2854 | - margin-top: var(--mxch-spacing-md, 16px); | |
| 2855 | -} | |
| 2856 | -.mxch-streaming-test-row .mxch-streaming-test-icon { | |
| 2857 | - vertical-align: middle; | |
| 2858 | - margin-right: 8px; | |
| 2859 | -} | |
| 2860 | -.mxch-streaming-test-result { | |
| 2861 | - margin-top: var(--mxch-spacing-sm, 12px); | |
| 2862 | - font-weight: 600; | |
| 2863 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2864 | 2177 | } |
