PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.24
MxChat – AI Chatbot & Content Generation for WordPress v3.2.24
3.2.25 3.2.24 3.2.23 3.2.22 3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 All 156 releases
← All changes | css/chat-transcripts.css +718 -0 3.2.1 → 3.2.24 View file →
@@ -686,8 +686,80 @@
686 686 padding: 2px 8px;
687 687 border-radius: 10px;
688 688 }
689 689
690 +/* Satisfaction rating badge on chat-list rows (plan-a5b006). */
691 +.mxch-chat-rating {
692 + display: inline-flex;
693 + align-items: center;
694 + justify-content: center;
695 + font-size: 11px;
696 + line-height: 1;
697 + min-width: 18px;
698 + height: 18px;
699 + border-radius: 999px;
700 + padding: 0 4px;
701 + cursor: default;
702 +}
703 +.mxch-chat-rating-up {
704 + background: #ecfdf5;
705 + color: #047857;
706 +}
707 +.mxch-chat-rating-down {
708 + background: #fef2f2;
709 + color: #b91c1c;
710 +}
711 +.mxch-chat-rating-empty {
712 + color: #cbd5e1;
713 + background: transparent;
714 +}
715 +.mxch-chat-rating svg {
716 + display: block;
717 +}
718 +
719 +/* Sort dropdown menu — appended to <body> from JS. */
720 +.mxch-sort-menu {
721 + display: none;
722 + background: #ffffff;
723 + border: 1px solid #e5e7eb;
724 + border-radius: 8px;
725 + box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
726 + padding: 4px;
727 + min-width: 200px;
728 + z-index: 9999;
729 +}
730 +.mxch-sort-option {
731 + display: flex;
732 + align-items: center;
733 + gap: 8px;
734 + width: 100%;
735 + padding: 8px 10px;
736 + background: transparent;
737 + border: none;
738 + border-radius: 6px;
739 + text-align: left;
740 + font-size: 13px;
741 + color: #1a1a2e;
742 + cursor: pointer;
743 +}
744 +.mxch-sort-option:hover {
745 + background: #f3f4f6;
746 +}
747 +.mxch-sort-option.active {
748 + background: #eff6ff;
749 + color: #1d4ed8;
750 + font-weight: 600;
751 +}
752 +.mxch-sort-option-icon {
753 + display: inline-flex;
754 + align-items: center;
755 + justify-content: center;
756 + width: 16px;
757 + height: 16px;
758 +}
759 +.mxch-sort-option-icon.mxch-rating-thumb-up { color: #047857; }
760 +.mxch-sort-option-icon.mxch-rating-thumb-down { color: #b91c1c; }
761 +
690 762 .mxch-list-loading,
691 763 .mxch-list-empty {
692 764 display: flex;
693 765 align-items: center;
@@ -1118,8 +1190,20 @@
1118 1190 text-transform: uppercase;
1119 1191 letter-spacing: 0.5px;
1120 1192 }
1121 1193
1194 +.mxch-agent-label {
1195 + font-size: 11px;
1196 + font-weight: 600;
1197 + color: #7c3aed;
1198 + text-transform: uppercase;
1199 + letter-spacing: 0.5px;
1200 +}
1201 +
1202 +.mxch-message-agent .mxch-message-bubble {
1203 + border-color: #ddd6fe;
1204 +}
1205 +
1122 1206 .mxch-rag-link {
1123 1207 font-size: 11px;
1124 1208 color: #3b82f6;
1125 1209 text-decoration: none;
@@ -1656,8 +1740,32 @@
1656 1740 color: var(--mxch-primary);
1657 1741 border-radius: 10px;
1658 1742 }
1659 1743
1744 +/* Hybrid retrieval matched-via chips (38ffa1): Vector / Keyword / Both */
1745 +.mxch-rag-via-chip {
1746 + font-size: 11px;
1747 + font-weight: 500;
1748 + padding: 2px 8px;
1749 + border-radius: 10px;
1750 + white-space: nowrap;
1751 +}
1752 +
1753 +.mxch-rag-via-vector {
1754 + background: rgba(120, 115, 245, 0.1);
1755 + color: var(--mxch-primary);
1756 +}
1757 +
1758 +.mxch-rag-via-keyword {
1759 + background: rgba(16, 185, 129, 0.12);
1760 + color: #059669;
1761 +}
1762 +
1763 +.mxch-rag-via-both {
1764 + background: rgba(245, 158, 11, 0.12);
1765 + color: #b45309;
1766 +}
1767 +
1660 1768 .mxch-rag-match-status {
1661 1769 margin-left: auto;
1662 1770 font-size: 12px;
1663 1771 font-weight: 500;
@@ -1840,8 +1948,69 @@
1840 1948 border-right: 4px solid transparent;
1841 1949 border-top: 4px solid #ef4444;
1842 1950 }
1843 1951
1952 +/* AI Tools trace (plan-mxchat-20260813-470f68)
1953 + One card per tool EXECUTION, rendered above the trigger-phrase scores. The box
1954 + itself reuses .mxch-rag-match-card / .mxch-rag-match-used; the rules below are
1955 + only the states the trigger-phrase cards have no equivalent of — a failed run,
1956 + a duration chip, and the argument excerpt. */
1957 +.mxch-tool-failed {
1958 + border-color: rgba(239, 68, 68, 0.35);
1959 + background: rgba(239, 68, 68, 0.05);
1960 +}
1961 +
1962 +.mxch-rag-match-status.status-failed {
1963 + color: var(--mxch-error);
1964 + font-weight: 600;
1965 +}
1966 +
1967 +.mxch-tool-duration {
1968 + font-size: 11px;
1969 + padding: 2px 8px;
1970 + background: rgba(100, 116, 139, 0.1);
1971 + color: var(--mxch-text-secondary);
1972 + border-radius: 10px;
1973 +}
1974 +
1975 +.mxch-tool-error {
1976 + margin-top: var(--mxch-spacing-sm);
1977 + font-size: 12px;
1978 + color: var(--mxch-error);
1979 + word-break: break-word;
1980 +}
1981 +
1982 +.mxch-tool-args {
1983 + margin-top: var(--mxch-spacing-sm);
1984 +}
1985 +
1986 +.mxch-tool-args > summary {
1987 + font-size: 12px;
1988 + color: var(--mxch-text-secondary);
1989 + cursor: pointer;
1990 + list-style: revert;
1991 +}
1992 +
1993 +.mxch-tool-args-body {
1994 + margin-top: 6px;
1995 + padding: var(--mxch-spacing-sm);
1996 + background: #f8fafc;
1997 + border: 1px solid var(--mxch-card-border);
1998 + border-radius: var(--mxch-radius-sm);
1999 + font-size: 12px;
2000 + font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
2001 + color: var(--mxch-text-secondary);
2002 + white-space: pre-wrap;
2003 + word-break: break-word;
2004 +}
2005 +
2006 +.mxch-tool-redacted {
2007 + margin-top: var(--mxch-spacing-sm);
2008 + font-size: 12px;
2009 + color: var(--mxch-text-muted);
2010 + font-style: italic;
2011 +}
2012 +
1844 2013 /* No Results State */
1845 2014 .mxch-no-results {
1846 2015 text-align: center;
1847 2016 padding: var(--mxch-spacing-xl);
@@ -2156,5 +2325,554 @@
2156 2325 color: #fff;
2157 2326 cursor: default;
2158 2327 opacity: 0.6;
2159 2328 line-height: 1.2;
2329 +}
2330 +
2331 +/* ==========================================================================
2332 + Leads Tab
2333 + ========================================================================== */
2334 +
2335 +.mxch-leads-stats {
2336 + display: grid;
2337 + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
2338 + gap: var(--mxch-spacing-lg);
2339 + margin-bottom: var(--mxch-spacing-xl);
2340 +}
2341 +
2342 +.mxch-leads-toppages {
2343 + margin-bottom: var(--mxch-spacing-xl);
2344 +}
2345 +
2346 +.mxch-leads-toppages-hint {
2347 + margin-left: auto;
2348 + font-size: 12px;
2349 + color: var(--mxch-text-muted);
2350 + font-weight: 400;
2351 +}
2352 +
2353 +.mxch-leads-toppages-list {
2354 + display: grid;
2355 + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
2356 + gap: var(--mxch-spacing-sm);
2357 +}
2358 +
2359 +.mxch-leads-toppage-row {
2360 + display: flex;
2361 + align-items: center;
2362 + justify-content: space-between;
2363 + gap: var(--mxch-spacing-sm);
2364 + padding: 10px 14px;
2365 + background: var(--mxch-card-bg);
2366 + border: 1px solid var(--mxch-card-border);
2367 + border-radius: var(--mxch-radius-md);
2368 + text-align: left;
2369 + cursor: pointer;
2370 + transition: all var(--mxch-transition);
2371 + color: var(--mxch-text-primary);
2372 + font-size: 13px;
2373 +}
2374 +
2375 +.mxch-leads-toppage-row:hover {
2376 + border-color: var(--mxch-primary);
2377 + box-shadow: var(--mxch-card-shadow-hover);
2378 +}
2379 +
2380 +.mxch-leads-toppage-row.is-active {
2381 + border-color: var(--mxch-primary);
2382 + background: rgba(99, 102, 241, 0.06);
2383 +}
2384 +
2385 +.mxch-leads-toppage-title {
2386 + flex: 1 1 auto;
2387 + min-width: 0;
2388 + overflow: hidden;
2389 + text-overflow: ellipsis;
2390 + white-space: nowrap;
2391 +}
2392 +
2393 +.mxch-leads-toppage-count {
2394 + flex: 0 0 auto;
2395 + display: inline-flex;
2396 + align-items: center;
2397 + justify-content: center;
2398 + min-width: 28px;
2399 + height: 22px;
2400 + padding: 0 8px;
2401 + border-radius: 999px;
2402 + background: var(--mxch-primary);
2403 + color: #fff;
2404 + font-size: 11px;
2405 + font-weight: 600;
2406 +}
2407 +
2408 +.mxch-leads-empty-mini {
2409 + padding: 12px;
2410 + text-align: center;
2411 + color: var(--mxch-text-muted);
2412 + font-size: 13px;
2413 +}
2414 +
2415 +/* Toolbar + card */
2416 +.mxch-leads-card {
2417 + padding: 0;
2418 + overflow: hidden;
2419 +}
2420 +
2421 +.mxch-leads-toolbar {
2422 + display: flex;
2423 + align-items: center;
2424 + justify-content: space-between;
2425 + gap: var(--mxch-spacing-md);
2426 + padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
2427 + border-bottom: 1px solid var(--mxch-card-border);
2428 + flex-wrap: wrap;
2429 +}
2430 +
2431 +.mxch-leads-toolbar-left,
2432 +.mxch-leads-toolbar-right {
2433 + display: flex;
2434 + align-items: center;
2435 + gap: var(--mxch-spacing-sm);
2436 +}
2437 +
2438 +.mxch-leads-export {
2439 + position: relative;
2440 +}
2441 +
2442 +.mxch-leads-export-menu {
2443 + position: absolute;
2444 + right: 0;
2445 + top: calc(100% + 6px);
2446 + min-width: 240px;
2447 + background: var(--mxch-card-bg);
2448 + border: 1px solid var(--mxch-card-border);
2449 + border-radius: var(--mxch-radius-md);
2450 + box-shadow: var(--mxch-card-shadow-hover);
2451 + padding: 4px;
2452 + z-index: 20;
2453 + display: none;
2454 +}
2455 +
2456 +.mxch-leads-export-menu.is-open { display: block; }
2457 +
2458 +.mxch-leads-export-menu button {
2459 + display: block;
2460 + width: 100%;
2461 + padding: 8px 12px;
2462 + background: transparent;
2463 + border: none;
2464 + border-radius: 6px;
2465 + text-align: left;
2466 + color: var(--mxch-text-primary);
2467 + font-size: 13px;
2468 + cursor: pointer;
2469 +}
2470 +
2471 +.mxch-leads-export-menu button:hover:not(:disabled) {
2472 + background: rgba(99, 102, 241, 0.08);
2473 +}
2474 +
2475 +.mxch-leads-export-menu button:disabled {
2476 + color: var(--mxch-text-muted);
2477 + cursor: not-allowed;
2478 +}
2479 +
2480 +/* Filters row */
2481 +.mxch-leads-filters {
2482 + display: flex;
2483 + align-items: center;
2484 + gap: var(--mxch-spacing-sm);
2485 + padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
2486 + border-bottom: 1px solid var(--mxch-card-border);
2487 + flex-wrap: wrap;
2488 +}
2489 +
2490 +.mxch-leads-filters .mxch-search-wrapper {
2491 + flex: 1 1 260px;
2492 + min-width: 180px;
2493 +}
2494 +
2495 +.mxch-leads-filters .mxch-select {
2496 + height: 36px;
2497 + min-width: 160px;
2498 +}
2499 +
2500 +.mxch-leads-active-page-filter {
2501 + display: inline-flex;
2502 + align-items: center;
2503 + gap: 6px;
2504 + padding: 4px 6px 4px 10px;
2505 + background: rgba(99, 102, 241, 0.08);
2506 + border: 1px solid rgba(99, 102, 241, 0.28);
2507 + border-radius: 999px;
2508 + font-size: 12px;
2509 + color: var(--mxch-text-primary);
2510 + max-width: 280px;
2511 +}
2512 +
2513 +.mxch-leads-page-chip-label {
2514 + overflow: hidden;
2515 + text-overflow: ellipsis;
2516 + white-space: nowrap;
2517 +}
2518 +
2519 +.mxch-leads-page-chip-remove {
2520 + border: none;
2521 + background: transparent;
2522 + font-size: 16px;
2523 + line-height: 1;
2524 + cursor: pointer;
2525 + padding: 0 4px;
2526 + color: var(--mxch-text-muted);
2527 +}
2528 +
2529 +.mxch-leads-page-chip-remove:hover {
2530 + color: var(--mxch-text-primary);
2531 +}
2532 +
2533 +/* Table */
2534 +.mxch-leads-table-wrap {
2535 + overflow-x: auto;
2536 +}
2537 +
2538 +.mxch-leads-table {
2539 + width: 100%;
2540 + border-collapse: separate;
2541 + border-spacing: 0;
2542 + font-size: 13px;
2543 +}
2544 +
2545 +.mxch-leads-table thead th {
2546 + padding: 10px 14px;
2547 + text-align: left;
2548 + background: var(--mxch-card-bg);
2549 + border-bottom: 1px solid var(--mxch-card-border);
2550 + color: var(--mxch-text-secondary);
2551 + font-weight: 600;
2552 + font-size: 11px;
2553 + text-transform: uppercase;
2554 + letter-spacing: 0.04em;
2555 + position: sticky;
2556 + top: 0;
2557 +}
2558 +
2559 +.mxch-leads-table tbody td {
2560 + padding: 12px 14px;
2561 + border-bottom: 1px solid var(--mxch-card-border);
2562 + vertical-align: middle;
2563 + color: var(--mxch-text-primary);
2564 +}
2565 +
2566 +.mxch-leads-table tbody tr:last-child td {
2567 + border-bottom: none;
2568 +}
2569 +
2570 +.mxch-leads-table tbody tr:hover {
2571 + background: rgba(99, 102, 241, 0.04);
2572 +}
2573 +
2574 +.mxch-leads-row.is-orphan .mxch-leads-lead-email {
2575 + font-style: italic;
2576 + color: var(--mxch-text-secondary);
2577 +}
2578 +
2579 +.mxch-leads-table { table-layout: fixed; }
2580 +
2581 +.mxch-leads-col-check { width: 40px; }
2582 +.mxch-leads-col-lead { width: auto; min-width: 280px; }
2583 +.mxch-leads-col-count { width: 130px; text-align: left; }
2584 +.mxch-leads-col-last { width: 110px; white-space: nowrap; }
2585 +.mxch-leads-col-page { width: 180px; max-width: 180px; }
2586 +.mxch-leads-col-actions { width: 170px; white-space: nowrap; text-align: right; }
2587 +
2588 +.mxch-leads-lead-cell {
2589 + display: flex;
2590 + flex-direction: column;
2591 + min-width: 0;
2592 + gap: 2px;
2593 +}
2594 +
2595 +.mxch-leads-lead-email {
2596 + font-weight: 500;
2597 + color: var(--mxch-text-primary);
2598 + overflow: hidden;
2599 + text-overflow: ellipsis;
2600 + white-space: nowrap;
2601 +}
2602 +
2603 +.mxch-leads-lead-name {
2604 + font-size: 11px;
2605 + color: var(--mxch-text-muted);
2606 + overflow: hidden;
2607 + text-overflow: ellipsis;
2608 + white-space: nowrap;
2609 +}
2610 +
2611 +.mxch-leads-muted { color: var(--mxch-text-muted); }
2612 +
2613 +.mxch-leads-pill {
2614 + display: inline-flex;
2615 + align-items: center;
2616 + justify-content: center;
2617 + min-width: 28px;
2618 + height: 22px;
2619 + padding: 0 8px;
2620 + border-radius: 999px;
2621 + background: rgba(99, 102, 241, 0.12);
2622 + color: var(--mxch-primary);
2623 + font-weight: 600;
2624 + font-size: 11px;
2625 +}
2626 +
2627 +.mxch-leads-pill-orphan {
2628 + background: rgba(245, 158, 11, 0.14);
2629 + color: var(--mxch-warning);
2630 +}
2631 +
2632 +.mxch-leads-pill-deleted {
2633 + background: rgba(100, 116, 139, 0.12);
2634 + color: var(--mxch-text-secondary);
2635 + border: 1px solid rgba(100, 116, 139, 0.22);
2636 + padding: 0 10px;
2637 +}
2638 +
2639 +/* Consent column (b062c4). Yes/No are recorded decisions; "not recorded"
2640 + renders via .mxch-leads-muted (different fact, different look). */
2641 +.mxch-leads-pill-consent-yes {
2642 + background: rgba(16, 185, 129, 0.14);
2643 + color: var(--mxch-success, #059669);
2644 +}
2645 +
2646 +.mxch-leads-pill-consent-no {
2647 + background: rgba(239, 68, 68, 0.12);
2648 + color: var(--mxch-danger, #dc2626);
2649 +}
2650 +
2651 +.mxch-leads-row.is-chat-deleted .mxch-leads-lead-email {
2652 + color: var(--mxch-text-secondary);
2653 +}
2654 +
2655 +.mxch-transcript-confirm-check {
2656 + display: flex;
2657 + gap: 10px;
2658 + align-items: flex-start;
2659 + padding: 10px 12px;
2660 + margin: 12px 0 4px;
2661 + background: rgba(99, 102, 241, 0.04);
2662 + border: 1px solid var(--mxch-card-border);
2663 + border-radius: var(--mxch-radius-md);
2664 + cursor: pointer;
2665 +}
2666 +
2667 +.mxch-transcript-confirm-check input[type="checkbox"] {
2668 + margin-top: 3px;
2669 + flex: 0 0 auto;
2670 +}
2671 +
2672 +.mxch-transcript-confirm-check strong {
2673 + display: block;
2674 + color: var(--mxch-text-primary);
2675 + font-weight: 600;
2676 + font-size: 13px;
2677 +}
2678 +
2679 +.mxch-transcript-confirm-sublabel {
2680 + display: block;
2681 + margin-top: 2px;
2682 + font-size: 12px;
2683 + color: var(--mxch-text-muted);
2684 + font-style: normal;
2685 +}
2686 +
2687 +.mxch-leads-page-link {
2688 + display: inline-block;
2689 + max-width: 100%;
2690 + overflow: hidden;
2691 + text-overflow: ellipsis;
2692 + white-space: nowrap;
2693 + vertical-align: middle;
2694 + color: var(--mxch-primary);
2695 + text-decoration: none;
2696 +}
2697 +
2698 +.mxch-leads-page-link:hover { text-decoration: underline; }
2699 +
2700 +.mxch-leads-col-actions .mxch-btn {
2701 + margin-left: 6px;
2702 +}
2703 +
2704 +.mxch-btn-danger-ghost {
2705 + color: #b91c1c;
2706 +}
2707 +
2708 +.mxch-btn-danger-ghost:hover {
2709 + background: rgba(185, 28, 28, 0.08);
2710 + color: #991b1b;
2711 +}
2712 +
2713 +.mxch-leads-empty,
2714 +.mxch-leads-loading {
2715 + padding: 40px 16px;
2716 + text-align: center;
2717 + color: var(--mxch-text-muted);
2718 +}
2719 +
2720 +.mxch-leads-empty-wrap {
2721 + display: flex;
2722 + flex-direction: column;
2723 + align-items: center;
2724 + gap: var(--mxch-spacing-sm);
2725 + color: var(--mxch-text-muted);
2726 +}
2727 +
2728 +.mxch-leads-empty-wrap svg { opacity: 0.6; }
2729 +
2730 +.mxch-leads-count {
2731 + font-size: 12px;
2732 + color: var(--mxch-text-muted);
2733 +}
2734 +
2735 +/* Confirm modal */
2736 +.mxch-leads-confirm-box {
2737 + max-width: 440px;
2738 +}
2739 +
2740 +.mxch-leads-confirm-warning {
2741 + color: var(--mxch-text-muted);
2742 + font-size: 12px;
2743 + margin-top: 8px;
2744 +}
2745 +
2746 +.mxch-leads-confirm-actions {
2747 + display: flex;
2748 + justify-content: flex-end;
2749 + gap: 8px;
2750 + padding: var(--mxch-spacing-md) var(--mxch-spacing-lg);
2751 + border-top: 1px solid var(--mxch-card-border);
2752 +}
2753 +
2754 +/* Responsive: tablet */
2755 +@media (max-width: 1024px) {
2756 + .mxch-leads-col-page { width: 140px; max-width: 140px; }
2757 + .mxch-leads-col-actions { width: 140px; }
2758 + .mxch-leads-col-actions .mxch-leads-view span { display: none; }
2759 +}
2760 +
2761 +/* Responsive: phone */
2762 +@media (max-width: 768px) {
2763 + .mxch-leads-col-page,
2764 + .mxch-leads-col-last {
2765 + display: none;
2766 + }
2767 + .mxch-leads-filters {
2768 + padding: var(--mxch-spacing-sm);
2769 + }
2770 + .mxch-leads-filters .mxch-select {
2771 + flex: 1 1 48%;
2772 + min-width: 0;
2773 + }
2774 + .mxch-leads-toolbar {
2775 + padding: var(--mxch-spacing-sm);
2776 + }
2777 + .mxch-leads-table thead th { padding: 8px 10px; font-size: 10px; }
2778 + .mxch-leads-table tbody td { padding: 10px; font-size: 12px; }
2779 +}
2780 +
2781 +@media (max-width: 480px) {
2782 + .mxch-leads-col-count { display: none; }
2783 + .mxch-leads-toppages-list { grid-template-columns: 1fr; }
2784 +}
2785 +
2786 +/* Satisfaction card on Transcripts dashboard (plan-a5b006). */
2787 +.mxch-satisfaction-card .mxch-card-body {
2788 + padding: var(--mxch-spacing-md);
2789 +}
2790 +.mxch-satisfaction-empty {
2791 + margin: 0;
2792 + padding: var(--mxch-spacing-sm) 0;
2793 + color: #6b7280;
2794 + font-size: 13px;
2795 + line-height: 1.5;
2796 +}
2797 +.mxch-satisfaction-list {
2798 + list-style: none;
2799 + margin: 0;
2800 + padding: 0;
2801 + display: flex;
2802 + flex-direction: column;
2803 + gap: 8px;
2804 +}
2805 +.mxch-satisfaction-row {
2806 + display: flex;
2807 + align-items: center;
2808 + gap: var(--mxch-spacing-md);
2809 + padding: 10px 12px;
2810 + background: #f9fafb;
2811 + border: 1px solid #f3f4f6;
2812 + border-radius: var(--mxch-radius-md, 8px);
2813 +}
2814 +.mxch-satisfaction-bot {
2815 + flex: 0 0 28%;
2816 + min-width: 0;
2817 + font-weight: 600;
2818 + font-size: 13px;
2819 + color: #1a1a2e;
2820 + overflow: hidden;
2821 + text-overflow: ellipsis;
2822 + white-space: nowrap;
2823 +}
2824 +.mxch-satisfaction-meta {
2825 + flex: 1;
2826 + display: flex;
2827 + align-items: center;
2828 + gap: 10px;
2829 + font-size: 12px;
2830 + color: #4b5563;
2831 + flex-wrap: wrap;
2832 +}
2833 +.mxch-satisfaction-total {
2834 + color: #6b7280;
2835 + white-space: nowrap;
2836 +}
2837 +.mxch-satisfaction-bar {
2838 + flex: 1;
2839 + min-width: 80px;
2840 + height: 6px;
2841 + background: #e5e7eb;
2842 + border-radius: 999px;
2843 + overflow: hidden;
2844 + display: flex;
2845 +}
2846 +.mxch-satisfaction-bar-up {
2847 + background: #10b981;
2848 + height: 100%;
2849 +}
2850 +.mxch-satisfaction-bar-down {
2851 + background: #ef4444;
2852 + height: 100%;
2853 +}
2854 +.mxch-satisfaction-pct {
2855 + display: inline-flex;
2856 + align-items: center;
2857 + gap: 4px;
2858 + font-weight: 600;
2859 + white-space: nowrap;
2860 +}
2861 +.mxch-satisfaction-pct-up { color: #047857; }
2862 +.mxch-satisfaction-pct-down { color: #b91c1c; }
2863 +@media (max-width: 600px) {
2864 + .mxch-satisfaction-row { flex-direction: column; align-items: flex-start; gap: 8px; }
2865 + .mxch-satisfaction-bot { flex: 1 1 100%; }
2866 + .mxch-satisfaction-meta { width: 100%; }
2867 +}
2868 +
2869 +/* Details drawer — Feedback row value (user-submitted rating feedback). */
2870 +.mxch-detail-feedback-value {
2871 + white-space: pre-wrap;
2872 + word-break: break-word;
2873 + max-width: 100%;
2874 + display: block;
2875 + margin-top: 4px;
2876 + opacity: 0.9;
2877 + font-style: italic;
2160 2878 }