| @@ -1818,24 +1818,8 @@ | ||
| 1818 | 1818 | |
| 1819 | 1819 | .mxch-rate-limit-controls { |
| 1820 | 1820 | flex-direction: column; |
| 1821 | 1821 | } |
| 1822 | - | |
| 1823 | - /* Card headers stack on mobile */ | |
| 1824 | - .mxch-card-header { | |
| 1825 | - flex-direction: column; | |
| 1826 | - align-items: stretch; | |
| 1827 | - gap: 12px; | |
| 1828 | - } | |
| 1829 | - | |
| 1830 | - /* Content header adjustments */ | |
| 1831 | - .mxch-content-header { | |
| 1832 | - margin-bottom: var(--mxch-spacing-md); | |
| 1833 | - } | |
| 1834 | - | |
| 1835 | - .mxch-content-title { | |
| 1836 | - font-size: 20px; | |
| 1837 | - } | |
| 1838 | 1822 | } |
| 1839 | 1823 | |
| 1840 | 1824 | @media screen and (max-width: 600px) { |
| 1841 | 1825 | .mxch-content { |
| @@ -1964,25 +1948,12 @@ | ||
| 1964 | 1948 | display: inline-flex; |
| 1965 | 1949 | vertical-align: middle; |
| 1966 | 1950 | } |
| 1967 | 1951 | |
| 1968 | -/* Position feedback near inputs - use inline for form-table context */ | |
| 1969 | -.mxch-admin-wrapper .form-table input + .feedback-container, | |
| 1970 | -.mxch-admin-wrapper .form-table select + .feedback-container, | |
| 1971 | -.mxch-admin-wrapper .form-table textarea + .feedback-container { | |
| 1972 | - position: relative; | |
| 1973 | - display: inline-flex; | |
| 1974 | - vertical-align: middle; | |
| 1975 | - margin-left: 10px; | |
| 1976 | - right: auto; | |
| 1977 | - top: auto; | |
| 1978 | - transform: none; | |
| 1979 | -} | |
| 1980 | - | |
| 1981 | -/* Position feedback near inputs - absolute for card layouts with field-control */ | |
| 1982 | -.mxch-admin-wrapper .mxch-field-control input + .feedback-container, | |
| 1983 | -.mxch-admin-wrapper .mxch-field-control select + .feedback-container, | |
| 1984 | -.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 { | |
| 1985 | 1956 | position: absolute; |
| 1986 | 1957 | right: -30px; |
| 1987 | 1958 | top: 50%; |
| 1988 | 1959 | transform: translateY(-50%); |
| @@ -2201,357 +2172,6 @@ | ||
| 2201 | 2172 | |
| 2202 | 2173 | .mxch-pro-banner-v2-btn { |
| 2203 | 2174 | width: 100%; |
| 2204 | 2175 | justify-content: center; |
| 2205 | - } | |
| 2206 | -} | |
| 2207 | - | |
| 2208 | -/* ========================================================================== | |
| 2209 | - API Key Fields - Prevent Browser Autofill | |
| 2210 | - ========================================================================== */ | |
| 2211 | - | |
| 2212 | -/* Mask API key fields like password fields but avoid browser password autofill */ | |
| 2213 | -.mxchat-api-key-field { | |
| 2214 | - -webkit-text-security: disc; | |
| 2215 | - text-security: disc; | |
| 2216 | - font-family: monospace; | |
| 2217 | -} | |
| 2218 | - | |
| 2219 | -/* Show actual text when focused or when show button toggled */ | |
| 2220 | -.mxchat-api-key-field.mxchat-show-key { | |
| 2221 | - -webkit-text-security: none; | |
| 2222 | - text-security: none; | |
| 2223 | -} | |
| 2224 | - | |
| 2225 | -/* ========================================================================== | |
| 2226 | - Debug & Optimization Tools | |
| 2227 | - ========================================================================== */ | |
| 2228 | - | |
| 2229 | -/* Debug Log Viewer */ | |
| 2230 | -.mxchat-debug-log-viewer { | |
| 2231 | - max-height: 400px; | |
| 2232 | - overflow-y: auto; | |
| 2233 | - background: #f8fafc; | |
| 2234 | - border: 1px solid var(--mxch-card-border, #e2e4e9); | |
| 2235 | - border-radius: 8px; | |
| 2236 | - padding: 0; | |
| 2237 | -} | |
| 2238 | - | |
| 2239 | -.mxchat-debug-log-empty { | |
| 2240 | - display: flex; | |
| 2241 | - flex-direction: column; | |
| 2242 | - align-items: center; | |
| 2243 | - justify-content: center; | |
| 2244 | - padding: 48px 24px; | |
| 2245 | - text-align: center; | |
| 2246 | - color: #64748b; | |
| 2247 | -} | |
| 2248 | - | |
| 2249 | -.mxchat-debug-log-empty p { | |
| 2250 | - margin: 16px 0 0; | |
| 2251 | - font-size: 14px; | |
| 2252 | -} | |
| 2253 | - | |
| 2254 | -.mxchat-debug-log-entries { | |
| 2255 | - padding: 12px; | |
| 2256 | -} | |
| 2257 | - | |
| 2258 | -.mxchat-debug-log-entry { | |
| 2259 | - background: #ffffff; | |
| 2260 | - border: 1px solid #e2e8f0; | |
| 2261 | - border-radius: 8px; | |
| 2262 | - padding: 12px; | |
| 2263 | - margin-bottom: 8px; | |
| 2264 | - font-size: 13px; | |
| 2265 | -} | |
| 2266 | - | |
| 2267 | -.mxchat-debug-log-entry:last-child { | |
| 2268 | - margin-bottom: 0; | |
| 2269 | -} | |
| 2270 | - | |
| 2271 | -.mxchat-log-header { | |
| 2272 | - display: flex; | |
| 2273 | - justify-content: space-between; | |
| 2274 | - align-items: center; | |
| 2275 | - margin-bottom: 8px; | |
| 2276 | -} | |
| 2277 | - | |
| 2278 | -.mxchat-log-type { | |
| 2279 | - display: inline-block; | |
| 2280 | - padding: 2px 8px; | |
| 2281 | - border-radius: 4px; | |
| 2282 | - font-size: 10px; | |
| 2283 | - font-weight: 600; | |
| 2284 | - text-transform: uppercase; | |
| 2285 | - letter-spacing: 0.5px; | |
| 2286 | - background: #e2e8f0; | |
| 2287 | - color: #475569; | |
| 2288 | -} | |
| 2289 | - | |
| 2290 | -.mxchat-log-type-settings_save .mxchat-log-type { | |
| 2291 | - background: #dbeafe; | |
| 2292 | - color: #1e40af; | |
| 2293 | -} | |
| 2294 | - | |
| 2295 | -.mxchat-log-type-debug_mode .mxchat-log-type { | |
| 2296 | - background: #fef3c7; | |
| 2297 | - color: #92400e; | |
| 2298 | -} | |
| 2299 | - | |
| 2300 | -.mxchat-log-type-api_error .mxchat-log-type { | |
| 2301 | - background: #fee2e2; | |
| 2302 | - color: #991b1b; | |
| 2303 | -} | |
| 2304 | - | |
| 2305 | -.mxchat-log-type-reset .mxchat-log-type { | |
| 2306 | - background: #fce7f3; | |
| 2307 | - color: #9d174d; | |
| 2308 | -} | |
| 2309 | - | |
| 2310 | -.mxchat-log-type-settings_export .mxchat-log-type { | |
| 2311 | - background: #d1fae5; | |
| 2312 | - color: #065f46; | |
| 2313 | -} | |
| 2314 | - | |
| 2315 | -.mxchat-log-time { | |
| 2316 | - font-size: 11px; | |
| 2317 | - color: #94a3b8; | |
| 2318 | -} | |
| 2319 | - | |
| 2320 | -.mxchat-log-message { | |
| 2321 | - color: #334155; | |
| 2322 | - line-height: 1.5; | |
| 2323 | -} | |
| 2324 | - | |
| 2325 | -.mxchat-log-data { | |
| 2326 | - margin-top: 8px; | |
| 2327 | - padding: 8px; | |
| 2328 | - background: #f1f5f9; | |
| 2329 | - border-radius: 4px; | |
| 2330 | - font-family: monospace; | |
| 2331 | - font-size: 11px; | |
| 2332 | - color: #64748b; | |
| 2333 | - white-space: pre-wrap; | |
| 2334 | - word-break: break-all; | |
| 2335 | -} | |
| 2336 | - | |
| 2337 | -/* Settings Tools Grid */ | |
| 2338 | -.mxch-tools-grid { | |
| 2339 | - display: grid; | |
| 2340 | - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| 2341 | - gap: 24px; | |
| 2342 | -} | |
| 2343 | - | |
| 2344 | -.mxch-tool-item { | |
| 2345 | - display: flex; | |
| 2346 | - gap: 16px; | |
| 2347 | - padding: 20px; | |
| 2348 | - background: #f8fafc; | |
| 2349 | - border: 1px solid #e2e8f0; | |
| 2350 | - border-radius: 12px; | |
| 2351 | - transition: all 0.2s ease; | |
| 2352 | -} | |
| 2353 | - | |
| 2354 | -.mxch-tool-item:hover { | |
| 2355 | - border-color: var(--mxch-primary, #7873f5); | |
| 2356 | - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); | |
| 2357 | -} | |
| 2358 | - | |
| 2359 | -.mxch-tool-item-danger { | |
| 2360 | - border-color: #fecaca; | |
| 2361 | - background: #fef2f2; | |
| 2362 | -} | |
| 2363 | - | |
| 2364 | -.mxch-tool-item-danger:hover { | |
| 2365 | - border-color: #ef4444; | |
| 2366 | -} | |
| 2367 | - | |
| 2368 | -.mxch-tool-icon { | |
| 2369 | - flex-shrink: 0; | |
| 2370 | - width: 48px; | |
| 2371 | - height: 48px; | |
| 2372 | - display: flex; | |
| 2373 | - align-items: center; | |
| 2374 | - justify-content: center; | |
| 2375 | - background: #ffffff; | |
| 2376 | - border-radius: 10px; | |
| 2377 | - color: var(--mxch-primary, #7873f5); | |
| 2378 | - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| 2379 | -} | |
| 2380 | - | |
| 2381 | -.mxch-tool-item-danger .mxch-tool-icon { | |
| 2382 | - color: #ef4444; | |
| 2383 | -} | |
| 2384 | - | |
| 2385 | -.mxch-tool-content h4 { | |
| 2386 | - margin: 0 0 6px; | |
| 2387 | - font-size: 15px; | |
| 2388 | - font-weight: 600; | |
| 2389 | - color: #1e293b; | |
| 2390 | -} | |
| 2391 | - | |
| 2392 | -.mxch-tool-content p { | |
| 2393 | - margin: 0 0 12px; | |
| 2394 | - font-size: 13px; | |
| 2395 | - color: #64748b; | |
| 2396 | - line-height: 1.5; | |
| 2397 | -} | |
| 2398 | - | |
| 2399 | -/* Danger Button */ | |
| 2400 | -.mxch-btn-danger { | |
| 2401 | - background: #ef4444 !important; | |
| 2402 | - color: #ffffff !important; | |
| 2403 | - border-color: #ef4444 !important; | |
| 2404 | -} | |
| 2405 | - | |
| 2406 | -.mxch-btn-danger:hover { | |
| 2407 | - background: #dc2626 !important; | |
| 2408 | - border-color: #dc2626 !important; | |
| 2409 | -} | |
| 2410 | - | |
| 2411 | -/* Badge Styles */ | |
| 2412 | -.mxch-badge { | |
| 2413 | - display: inline-flex; | |
| 2414 | - align-items: center; | |
| 2415 | - padding: 4px 10px; | |
| 2416 | - font-size: 12px; | |
| 2417 | - font-weight: 500; | |
| 2418 | - border-radius: 20px; | |
| 2419 | - background: #e2e8f0; | |
| 2420 | - color: #475569; | |
| 2421 | -} | |
| 2422 | - | |
| 2423 | -.mxch-badge-warning { | |
| 2424 | - background: #fef3c7; | |
| 2425 | - color: #92400e; | |
| 2426 | -} | |
| 2427 | - | |
| 2428 | -.mxch-badge-success { | |
| 2429 | - background: #d1fae5; | |
| 2430 | - color: #065f46; | |
| 2431 | -} | |
| 2432 | - | |
| 2433 | -.mxch-badge-error { | |
| 2434 | - background: #fee2e2; | |
| 2435 | - color: #991b1b; | |
| 2436 | -} | |
| 2437 | - | |
| 2438 | -/* Modal Styles */ | |
| 2439 | -.mxch-modal { | |
| 2440 | - position: fixed; | |
| 2441 | - top: 0; | |
| 2442 | - left: 0; | |
| 2443 | - right: 0; | |
| 2444 | - bottom: 0; | |
| 2445 | - z-index: 100000; | |
| 2446 | - display: flex; | |
| 2447 | - align-items: center; | |
| 2448 | - justify-content: center; | |
| 2449 | -} | |
| 2450 | - | |
| 2451 | -.mxch-modal-backdrop { | |
| 2452 | - position: absolute; | |
| 2453 | - top: 0; | |
| 2454 | - left: 0; | |
| 2455 | - right: 0; | |
| 2456 | - bottom: 0; | |
| 2457 | - background: rgba(0, 0, 0, 0.5); | |
| 2458 | -} | |
| 2459 | - | |
| 2460 | -.mxch-modal-content { | |
| 2461 | - position: relative; | |
| 2462 | - width: 100%; | |
| 2463 | - max-width: 480px; | |
| 2464 | - background: #ffffff; | |
| 2465 | - border-radius: 16px; | |
| 2466 | - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| 2467 | - margin: 20px; | |
| 2468 | -} | |
| 2469 | - | |
| 2470 | -.mxch-modal-header { | |
| 2471 | - display: flex; | |
| 2472 | - justify-content: space-between; | |
| 2473 | - align-items: center; | |
| 2474 | - padding: 20px 24px; | |
| 2475 | - border-bottom: 1px solid #e2e8f0; | |
| 2476 | -} | |
| 2477 | - | |
| 2478 | -.mxch-modal-header h3 { | |
| 2479 | - margin: 0; | |
| 2480 | - font-size: 18px; | |
| 2481 | - font-weight: 600; | |
| 2482 | - color: #1e293b; | |
| 2483 | -} | |
| 2484 | - | |
| 2485 | -.mxch-modal-close { | |
| 2486 | - width: 32px; | |
| 2487 | - height: 32px; | |
| 2488 | - display: flex; | |
| 2489 | - align-items: center; | |
| 2490 | - justify-content: center; | |
| 2491 | - background: none; | |
| 2492 | - border: none; | |
| 2493 | - font-size: 24px; | |
| 2494 | - color: #64748b; | |
| 2495 | - cursor: pointer; | |
| 2496 | - border-radius: 8px; | |
| 2497 | - transition: all 0.2s ease; | |
| 2498 | -} | |
| 2499 | - | |
| 2500 | -.mxch-modal-close:hover { | |
| 2501 | - background: #f1f5f9; | |
| 2502 | - color: #1e293b; | |
| 2503 | -} | |
| 2504 | - | |
| 2505 | -.mxch-modal-body { | |
| 2506 | - padding: 24px; | |
| 2507 | -} | |
| 2508 | - | |
| 2509 | -.mxch-modal-footer { | |
| 2510 | - display: flex; | |
| 2511 | - justify-content: flex-end; | |
| 2512 | - gap: 12px; | |
| 2513 | - padding: 16px 24px; | |
| 2514 | - border-top: 1px solid #e2e8f0; | |
| 2515 | - background: #f8fafc; | |
| 2516 | - border-radius: 0 0 16px 16px; | |
| 2517 | -} | |
| 2518 | - | |
| 2519 | -/* Input in modal */ | |
| 2520 | -.mxch-input { | |
| 2521 | - width: 100%; | |
| 2522 | - padding: 10px 14px; | |
| 2523 | - font-size: 14px; | |
| 2524 | - border: 1px solid #d1d5db; | |
| 2525 | - border-radius: 8px; | |
| 2526 | - transition: all 0.2s ease; | |
| 2527 | -} | |
| 2528 | - | |
| 2529 | -.mxch-input:focus { | |
| 2530 | - outline: none; | |
| 2531 | - border-color: var(--mxch-primary, #7873f5); | |
| 2532 | - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1); | |
| 2533 | -} | |
| 2534 | - | |
| 2535 | -/* Responsive adjustments for tools */ | |
| 2536 | -@media screen and (max-width: 768px) { | |
| 2537 | - .mxch-tools-grid { | |
| 2538 | - grid-template-columns: 1fr; | |
| 2539 | - } | |
| 2540 | - | |
| 2541 | - .mxch-tool-item { | |
| 2542 | - flex-direction: column; | |
| 2543 | - text-align: center; | |
| 2544 | - } | |
| 2545 | - | |
| 2546 | - .mxch-tool-icon { | |
| 2547 | - margin: 0 auto; | |
| 2548 | - } | |
| 2549 | - | |
| 2550 | - .mxchat-debug-log-viewer { | |
| 2551 | - max-height: 300px; | |
| 2552 | - } | |
| 2553 | - | |
| 2554 | - .mxch-modal-content { | |
| 2555 | - margin: 10px; | |
| 2556 | 2176 | } |
| 2557 | 2177 | } |
