| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /* ========================================================================== |
| 2 | 2 | MxChat Transcripts Page Styles - v2.0 |
| 3 | 3 | Uses admin-sidebar.css for core layout/navigation styles |
| 4 | 4 | ========================================================================== */ |
| @@ -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; |
| @@ -2600,4 +2672,98 @@ | ||
| 2600 | 2672 | @media (max-width: 480px) { |
| 2601 | 2673 | .mxch-leads-col-count { display: none; } |
| 2602 | 2674 | .mxch-leads-toppages-list { grid-template-columns: 1fr; } |
| 2603 | 2675 | } |
| 2676 | + | |
| 2677 | +/* Satisfaction card on Transcripts dashboard (plan-a5b006). */ | |
| 2678 | +.mxch-satisfaction-card .mxch-card-body { | |
| 2679 | + padding: var(--mxch-spacing-md); | |
| 2680 | +} | |
| 2681 | +.mxch-satisfaction-empty { | |
| 2682 | + margin: 0; | |
| 2683 | + padding: var(--mxch-spacing-sm) 0; | |
| 2684 | + color: #6b7280; | |
| 2685 | + font-size: 13px; | |
| 2686 | + line-height: 1.5; | |
| 2687 | +} | |
| 2688 | +.mxch-satisfaction-list { | |
| 2689 | + list-style: none; | |
| 2690 | + margin: 0; | |
| 2691 | + padding: 0; | |
| 2692 | + display: flex; | |
| 2693 | + flex-direction: column; | |
| 2694 | + gap: 8px; | |
| 2695 | +} | |
| 2696 | +.mxch-satisfaction-row { | |
| 2697 | + display: flex; | |
| 2698 | + align-items: center; | |
| 2699 | + gap: var(--mxch-spacing-md); | |
| 2700 | + padding: 10px 12px; | |
| 2701 | + background: #f9fafb; | |
| 2702 | + border: 1px solid #f3f4f6; | |
| 2703 | + border-radius: var(--mxch-radius-md, 8px); | |
| 2704 | +} | |
| 2705 | +.mxch-satisfaction-bot { | |
| 2706 | + flex: 0 0 28%; | |
| 2707 | + min-width: 0; | |
| 2708 | + font-weight: 600; | |
| 2709 | + font-size: 13px; | |
| 2710 | + color: #1a1a2e; | |
| 2711 | + overflow: hidden; | |
| 2712 | + text-overflow: ellipsis; | |
| 2713 | + white-space: nowrap; | |
| 2714 | +} | |
| 2715 | +.mxch-satisfaction-meta { | |
| 2716 | + flex: 1; | |
| 2717 | + display: flex; | |
| 2718 | + align-items: center; | |
| 2719 | + gap: 10px; | |
| 2720 | + font-size: 12px; | |
| 2721 | + color: #4b5563; | |
| 2722 | + flex-wrap: wrap; | |
| 2723 | +} | |
| 2724 | +.mxch-satisfaction-total { | |
| 2725 | + color: #6b7280; | |
| 2726 | + white-space: nowrap; | |
| 2727 | +} | |
| 2728 | +.mxch-satisfaction-bar { | |
| 2729 | + flex: 1; | |
| 2730 | + min-width: 80px; | |
| 2731 | + height: 6px; | |
| 2732 | + background: #e5e7eb; | |
| 2733 | + border-radius: 999px; | |
| 2734 | + overflow: hidden; | |
| 2735 | + display: flex; | |
| 2736 | +} | |
| 2737 | +.mxch-satisfaction-bar-up { | |
| 2738 | + background: #10b981; | |
| 2739 | + height: 100%; | |
| 2740 | +} | |
| 2741 | +.mxch-satisfaction-bar-down { | |
| 2742 | + background: #ef4444; | |
| 2743 | + height: 100%; | |
| 2744 | +} | |
| 2745 | +.mxch-satisfaction-pct { | |
| 2746 | + display: inline-flex; | |
| 2747 | + align-items: center; | |
| 2748 | + gap: 4px; | |
| 2749 | + font-weight: 600; | |
| 2750 | + white-space: nowrap; | |
| 2751 | +} | |
| 2752 | +.mxch-satisfaction-pct-up { color: #047857; } | |
| 2753 | +.mxch-satisfaction-pct-down { color: #b91c1c; } | |
| 2754 | +@media (max-width: 600px) { | |
| 2755 | + .mxch-satisfaction-row { flex-direction: column; align-items: flex-start; gap: 8px; } | |
| 2756 | + .mxch-satisfaction-bot { flex: 1 1 100%; } | |
| 2757 | + .mxch-satisfaction-meta { width: 100%; } | |
| 2758 | +} | |
| 2759 | + | |
| 2760 | +/* Details drawer — Feedback row value (user-submitted rating feedback). */ | |
| 2761 | +.mxch-detail-feedback-value { | |
| 2762 | + white-space: pre-wrap; | |
| 2763 | + word-break: break-word; | |
| 2764 | + max-width: 100%; | |
| 2765 | + display: block; | |
| 2766 | + margin-top: 4px; | |
| 2767 | + opacity: 0.9; | |
| 2768 | + font-style: italic; | |
| 2769 | +} | |
