| @@ -830,10 +830,8 @@ | ||
| 830 | 830 | } |
| 831 | 831 | |
| 832 | 832 | .mxch-user-info { |
| 833 | 833 | flex: 1; |
| 834 | - min-width: 0; /* Allow flex item to shrink below content size */ | |
| 835 | - overflow: hidden; | |
| 836 | 834 | } |
| 837 | 835 | |
| 838 | 836 | .mxch-user-name { |
| 839 | 837 | font-size: 15px; |
| @@ -838,11 +836,8 @@ | ||
| 838 | 836 | .mxch-user-name { |
| 839 | 837 | font-size: 15px; |
| 840 | 838 | font-weight: 600; |
| 841 | 839 | color: #111827; |
| 842 | - overflow: hidden; | |
| 843 | - text-overflow: ellipsis; | |
| 844 | - white-space: nowrap; | |
| 845 | 840 | } |
| 846 | 841 | |
| 847 | 842 | .mxch-user-meta { |
| 848 | 843 | font-size: 12px; |
| @@ -847,11 +842,8 @@ | ||
| 847 | 842 | .mxch-user-meta { |
| 848 | 843 | font-size: 12px; |
| 849 | 844 | color: #6b7280; |
| 850 | 845 | margin-top: 2px; |
| 851 | - overflow: hidden; | |
| 852 | - text-overflow: ellipsis; | |
| 853 | - white-space: nowrap; | |
| 854 | 846 | } |
| 855 | 847 | |
| 856 | 848 | .mxch-details-toggle { |
| 857 | 849 | width: 36px; |
| @@ -957,83 +949,8 @@ | ||
| 957 | 949 | padding: 8px 12px; |
| 958 | 950 | font-size: 12px; |
| 959 | 951 | } |
| 960 | 952 | |
| 961 | -/* Translate Controls */ | |
| 962 | -.mxch-translate-section { | |
| 963 | - margin-top: 12px; | |
| 964 | - padding-top: 12px; | |
| 965 | - border-top: 1px solid #f3f4f6; | |
| 966 | -} | |
| 967 | - | |
| 968 | -.mxch-translate-controls { | |
| 969 | - display: flex; | |
| 970 | - align-items: center; | |
| 971 | - gap: 8px; | |
| 972 | -} | |
| 973 | - | |
| 974 | -.mxch-translate-select { | |
| 975 | - padding: 6px 10px; | |
| 976 | - font-size: 12px; | |
| 977 | - border: 1px solid #e5e7eb; | |
| 978 | - border-radius: 6px; | |
| 979 | - background: #fff; | |
| 980 | - color: #374151; | |
| 981 | - cursor: pointer; | |
| 982 | - min-width: 100px; | |
| 983 | -} | |
| 984 | - | |
| 985 | -.mxch-translate-select:focus { | |
| 986 | - outline: none; | |
| 987 | - border-color: #3b82f6; | |
| 988 | - box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); | |
| 989 | -} | |
| 990 | - | |
| 991 | -#mxch-translate-btn, | |
| 992 | -#mxch-show-original-btn { | |
| 993 | - display: inline-flex; | |
| 994 | - align-items: center; | |
| 995 | - gap: 6px; | |
| 996 | -} | |
| 997 | - | |
| 998 | -#mxch-translate-btn svg, | |
| 999 | -#mxch-show-original-btn svg { | |
| 1000 | - width: 14px; | |
| 1001 | - height: 14px; | |
| 1002 | - flex-shrink: 0; | |
| 1003 | -} | |
| 1004 | - | |
| 1005 | -#mxch-translate-btn:disabled { | |
| 1006 | - opacity: 0.6; | |
| 1007 | - cursor: not-allowed; | |
| 1008 | -} | |
| 1009 | - | |
| 1010 | -.mxch-translate-spinner { | |
| 1011 | - animation: spin 1s linear infinite; | |
| 1012 | -} | |
| 1013 | - | |
| 1014 | -@keyframes mxch-translate-spin { | |
| 1015 | - from { transform: rotate(0deg); } | |
| 1016 | - to { transform: rotate(360deg); } | |
| 1017 | -} | |
| 1018 | - | |
| 1019 | -/* Translated message indicator */ | |
| 1020 | -.mxch-message-bubble.translated { | |
| 1021 | - position: relative; | |
| 1022 | -} | |
| 1023 | - | |
| 1024 | -.mxch-message-bubble.translated::after { | |
| 1025 | - content: ''; | |
| 1026 | - position: absolute; | |
| 1027 | - top: 6px; | |
| 1028 | - right: 6px; | |
| 1029 | - width: 6px; | |
| 1030 | - height: 6px; | |
| 1031 | - background: #3b82f6; | |
| 1032 | - border-radius: 50%; | |
| 1033 | - opacity: 0.6; | |
| 1034 | -} | |
| 1035 | - | |
| 1036 | 953 | /* Messages Area */ |
| 1037 | 954 | .mxch-messages-area { |
| 1038 | 955 | flex: 1; |
| 1039 | 956 | overflow-y: auto; |
| @@ -1685,174 +1602,8 @@ | ||
| 1685 | 1602 | .mxch-rag-match-source a:hover { |
| 1686 | 1603 | text-decoration: underline; |
| 1687 | 1604 | } |
| 1688 | 1605 | |
| 1689 | -/* Context Modal Tabs */ | |
| 1690 | -.mxch-context-tabs { | |
| 1691 | - display: flex; | |
| 1692 | - gap: 4px; | |
| 1693 | - padding: 4px; | |
| 1694 | - background: #f1f5f9; | |
| 1695 | - border-radius: var(--mxch-radius-md); | |
| 1696 | - margin-bottom: var(--mxch-spacing-md); | |
| 1697 | -} | |
| 1698 | - | |
| 1699 | -.mxch-context-tab { | |
| 1700 | - flex: 1; | |
| 1701 | - display: flex; | |
| 1702 | - align-items: center; | |
| 1703 | - justify-content: center; | |
| 1704 | - gap: 8px; | |
| 1705 | - padding: 10px 16px; | |
| 1706 | - border: none; | |
| 1707 | - background: transparent; | |
| 1708 | - border-radius: var(--mxch-radius-sm); | |
| 1709 | - font-size: 13px; | |
| 1710 | - font-weight: 500; | |
| 1711 | - color: var(--mxch-text-secondary); | |
| 1712 | - cursor: pointer; | |
| 1713 | - transition: all var(--mxch-transition-fast); | |
| 1714 | -} | |
| 1715 | - | |
| 1716 | -.mxch-context-tab:hover { | |
| 1717 | - color: var(--mxch-text-primary); | |
| 1718 | - background: rgba(255, 255, 255, 0.5); | |
| 1719 | -} | |
| 1720 | - | |
| 1721 | -.mxch-context-tab.active { | |
| 1722 | - background: white; | |
| 1723 | - color: var(--mxch-primary); | |
| 1724 | - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| 1725 | -} | |
| 1726 | - | |
| 1727 | -.mxch-context-tab svg { | |
| 1728 | - width: 16px; | |
| 1729 | - height: 16px; | |
| 1730 | - flex-shrink: 0; | |
| 1731 | -} | |
| 1732 | - | |
| 1733 | -.mxch-tab-badge { | |
| 1734 | - display: inline-flex; | |
| 1735 | - align-items: center; | |
| 1736 | - justify-content: center; | |
| 1737 | - min-width: 20px; | |
| 1738 | - height: 20px; | |
| 1739 | - padding: 0 6px; | |
| 1740 | - background: rgba(120, 115, 245, 0.1); | |
| 1741 | - color: var(--mxch-primary); | |
| 1742 | - font-size: 11px; | |
| 1743 | - font-weight: 600; | |
| 1744 | - border-radius: 10px; | |
| 1745 | -} | |
| 1746 | - | |
| 1747 | -.mxch-context-tab.active .mxch-tab-badge { | |
| 1748 | - background: var(--mxch-primary); | |
| 1749 | - color: white; | |
| 1750 | -} | |
| 1751 | - | |
| 1752 | -.mxch-tab-content { | |
| 1753 | - min-height: 200px; | |
| 1754 | -} | |
| 1755 | - | |
| 1756 | -/* Action Specific Styles */ | |
| 1757 | -.mxch-action-triggered { | |
| 1758 | - border-color: rgba(245, 158, 11, 0.4); | |
| 1759 | - background: rgba(245, 158, 11, 0.08); | |
| 1760 | -} | |
| 1761 | - | |
| 1762 | -.mxch-action-threshold-badge { | |
| 1763 | - font-size: 11px; | |
| 1764 | - padding: 2px 8px; | |
| 1765 | - background: rgba(100, 116, 139, 0.1); | |
| 1766 | - color: var(--mxch-text-secondary); | |
| 1767 | - border-radius: 10px; | |
| 1768 | -} | |
| 1769 | - | |
| 1770 | -.mxch-rag-match-status.status-triggered { | |
| 1771 | - color: #f59e0b; | |
| 1772 | - font-weight: 600; | |
| 1773 | -} | |
| 1774 | - | |
| 1775 | -.mxch-action-details { | |
| 1776 | - margin-top: var(--mxch-spacing-sm); | |
| 1777 | -} | |
| 1778 | - | |
| 1779 | -.mxch-action-label { | |
| 1780 | - font-size: 14px; | |
| 1781 | - font-weight: 600; | |
| 1782 | - color: var(--mxch-text-primary); | |
| 1783 | - margin-bottom: 4px; | |
| 1784 | -} | |
| 1785 | - | |
| 1786 | -.mxch-action-callback { | |
| 1787 | - font-size: 12px; | |
| 1788 | - color: var(--mxch-text-muted); | |
| 1789 | - font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; | |
| 1790 | -} | |
| 1791 | - | |
| 1792 | -.mxch-action-callback-label { | |
| 1793 | - color: var(--mxch-text-secondary); | |
| 1794 | - font-family: inherit; | |
| 1795 | -} | |
| 1796 | - | |
| 1797 | -/* Action Score Bar Visualization */ | |
| 1798 | -.mxch-action-score-bar { | |
| 1799 | - position: relative; | |
| 1800 | - height: 6px; | |
| 1801 | - background: #e2e8f0; | |
| 1802 | - border-radius: 3px; | |
| 1803 | - margin-top: var(--mxch-spacing-sm); | |
| 1804 | - overflow: visible; | |
| 1805 | -} | |
| 1806 | - | |
| 1807 | -.mxch-action-score-fill { | |
| 1808 | - position: absolute; | |
| 1809 | - left: 0; | |
| 1810 | - top: 0; | |
| 1811 | - height: 100%; | |
| 1812 | - background: linear-gradient(90deg, #7873f5, #a5a1fa); | |
| 1813 | - border-radius: 3px; | |
| 1814 | - transition: width 0.3s ease; | |
| 1815 | -} | |
| 1816 | - | |
| 1817 | -.mxch-action-triggered .mxch-action-score-fill { | |
| 1818 | - background: linear-gradient(90deg, #f59e0b, #fbbf24); | |
| 1819 | -} | |
| 1820 | - | |
| 1821 | -.mxch-action-threshold-marker { | |
| 1822 | - position: absolute; | |
| 1823 | - top: -4px; | |
| 1824 | - width: 2px; | |
| 1825 | - height: 14px; | |
| 1826 | - background: #ef4444; | |
| 1827 | - border-radius: 1px; | |
| 1828 | - transform: translateX(-50%); | |
| 1829 | -} | |
| 1830 | - | |
| 1831 | -.mxch-action-threshold-marker::after { | |
| 1832 | - content: ''; | |
| 1833 | - position: absolute; | |
| 1834 | - top: -3px; | |
| 1835 | - left: 50%; | |
| 1836 | - transform: translateX(-50%); | |
| 1837 | - width: 0; | |
| 1838 | - height: 0; | |
| 1839 | - border-left: 4px solid transparent; | |
| 1840 | - border-right: 4px solid transparent; | |
| 1841 | - border-top: 4px solid #ef4444; | |
| 1842 | -} | |
| 1843 | - | |
| 1844 | -/* No Results State */ | |
| 1845 | -.mxch-no-results { | |
| 1846 | - text-align: center; | |
| 1847 | - padding: var(--mxch-spacing-xl); | |
| 1848 | - color: var(--mxch-text-secondary); | |
| 1849 | -} | |
| 1850 | - | |
| 1851 | -.mxch-no-results p { | |
| 1852 | - margin: 0; | |
| 1853 | -} | |
| 1854 | - | |
| 1855 | 1606 | /* ========================================================================== |
| 1856 | 1607 | Responsive Adjustments |
| 1857 | 1608 | ========================================================================== */ |
| 1858 | 1609 | @media screen and (max-width: 768px) { |
| @@ -1942,219 +1693,5 @@ | ||
| 1942 | 1693 | |
| 1943 | 1694 | .mxch-controls-actions form { |
| 1944 | 1695 | width: 100%; |
| 1945 | 1696 | } |
| 1946 | -} | |
| 1947 | - | |
| 1948 | -/* Product Card in Transcripts */ | |
| 1949 | -.mxch-message-bubble .mxchat-product-card { | |
| 1950 | - display: flex; | |
| 1951 | - flex-direction: column; | |
| 1952 | - align-items: center; | |
| 1953 | - margin: 8px 0; | |
| 1954 | - padding: 12px; | |
| 1955 | - border-radius: 8px; | |
| 1956 | - background: #f9f9f9; | |
| 1957 | - border: 1px solid #e5e5e5; | |
| 1958 | - max-width: 280px; | |
| 1959 | -} | |
| 1960 | - | |
| 1961 | -.mxch-message-bubble .mxchat-product-card a.mxchat-product-link { | |
| 1962 | - text-decoration: none; | |
| 1963 | - color: inherit; | |
| 1964 | - display: flex; | |
| 1965 | - flex-direction: column; | |
| 1966 | - align-items: center; | |
| 1967 | -} | |
| 1968 | - | |
| 1969 | -.mxch-message-bubble .mxchat-product-card img.mxchat-product-image { | |
| 1970 | - max-width: 100%; | |
| 1971 | - height: auto; | |
| 1972 | - max-height: 180px; | |
| 1973 | - object-fit: contain; | |
| 1974 | - margin-bottom: 8px; | |
| 1975 | - border-radius: 6px; | |
| 1976 | -} | |
| 1977 | - | |
| 1978 | -.mxch-message-bubble .mxchat-product-card h3.mxchat-product-name { | |
| 1979 | - font-size: 14px; | |
| 1980 | - font-weight: 600; | |
| 1981 | - margin: 4px 0; | |
| 1982 | - text-align: center; | |
| 1983 | - color: #1a1a1a; | |
| 1984 | -} | |
| 1985 | - | |
| 1986 | -.mxch-message-bubble .mxchat-product-card .mxchat-product-price { | |
| 1987 | - color: #2e7d32; | |
| 1988 | - font-weight: 600; | |
| 1989 | - font-size: 15px; | |
| 1990 | - margin: 4px 0 8px; | |
| 1991 | -} | |
| 1992 | - | |
| 1993 | -.mxch-message-bubble .mxchat-product-card .mxchat-add-to-cart-button { | |
| 1994 | - background-color: #212121; | |
| 1995 | - color: #fff; | |
| 1996 | - padding: 7px 16px; | |
| 1997 | - border: none; | |
| 1998 | - border-radius: 6px; | |
| 1999 | - font-size: 13px; | |
| 2000 | - cursor: default; | |
| 2001 | - opacity: 0.6; | |
| 2002 | -} | |
| 2003 | - | |
| 2004 | -.mxch-message-bubble .mxchat-product-card select { | |
| 2005 | - width: 100%; | |
| 2006 | - padding: 6px 8px; | |
| 2007 | - margin: 4px 0; | |
| 2008 | - border: 1px solid #ddd; | |
| 2009 | - border-radius: 4px; | |
| 2010 | - font-size: 13px; | |
| 2011 | -} | |
| 2012 | - | |
| 2013 | -/* Featured Products in Transcripts */ | |
| 2014 | -.mxch-message-bubble .mxchat-featured-products { | |
| 2015 | - margin: 8px 0; | |
| 2016 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| 2017 | - line-height: 1.4; | |
| 2018 | - display: flex; | |
| 2019 | - flex-direction: column; | |
| 2020 | - gap: 0; | |
| 2021 | - padding: 0; | |
| 2022 | -} | |
| 2023 | - | |
| 2024 | -.mxch-message-bubble .mxchat-featured-item { | |
| 2025 | - padding: 10px 0; | |
| 2026 | - border-bottom: 1px solid #e5e5e5; | |
| 2027 | - margin: 0; | |
| 2028 | -} | |
| 2029 | - | |
| 2030 | -.mxch-message-bubble .mxchat-featured-item:last-child { | |
| 2031 | - border-bottom: none; | |
| 2032 | - padding-bottom: 0; | |
| 2033 | -} | |
| 2034 | - | |
| 2035 | -.mxch-message-bubble .mxchat-featured-item:first-child { | |
| 2036 | - padding-top: 0; | |
| 2037 | -} | |
| 2038 | - | |
| 2039 | -.mxch-message-bubble .mxchat-featured-item-top { | |
| 2040 | - display: flex; | |
| 2041 | - flex-direction: row; | |
| 2042 | - align-items: center; | |
| 2043 | - gap: 12px; | |
| 2044 | - margin-bottom: 8px; | |
| 2045 | -} | |
| 2046 | - | |
| 2047 | -.mxch-message-bubble .mxchat-featured-item-image { | |
| 2048 | - flex-shrink: 0; | |
| 2049 | - width: 70px; | |
| 2050 | - height: 70px; | |
| 2051 | - overflow: hidden; | |
| 2052 | - border-radius: 8px; | |
| 2053 | - background: #f1f1f1; | |
| 2054 | -} | |
| 2055 | - | |
| 2056 | -.mxch-message-bubble .mxchat-featured-item-image a { | |
| 2057 | - display: block; | |
| 2058 | - width: 70px; | |
| 2059 | - height: 70px; | |
| 2060 | - text-decoration: none; | |
| 2061 | -} | |
| 2062 | - | |
| 2063 | -.mxch-message-bubble .mxchat-featured-item-image img { | |
| 2064 | - width: 70px; | |
| 2065 | - height: 70px; | |
| 2066 | - object-fit: cover; | |
| 2067 | - border-radius: 8px; | |
| 2068 | - display: block; | |
| 2069 | -} | |
| 2070 | - | |
| 2071 | -.mxch-message-bubble .mxchat-featured-item-info { | |
| 2072 | - flex: 1; | |
| 2073 | - min-width: 0; | |
| 2074 | - display: flex; | |
| 2075 | - flex-direction: column; | |
| 2076 | - gap: 2px; | |
| 2077 | - justify-content: center; | |
| 2078 | -} | |
| 2079 | - | |
| 2080 | -.mxch-message-bubble .mxchat-featured-item-title, | |
| 2081 | -.mxch-message-bubble a.mxchat-featured-item-title { | |
| 2082 | - font-size: 13px; | |
| 2083 | - font-weight: 600; | |
| 2084 | - color: #1a1a1a; | |
| 2085 | - text-decoration: none; | |
| 2086 | - line-height: 1.3; | |
| 2087 | - display: -webkit-box; | |
| 2088 | - -webkit-line-clamp: 2; | |
| 2089 | - -webkit-box-orient: vertical; | |
| 2090 | - overflow: hidden; | |
| 2091 | - margin: 0; | |
| 2092 | - padding: 0; | |
| 2093 | -} | |
| 2094 | - | |
| 2095 | -.mxch-message-bubble a.mxchat-featured-item-title:hover { | |
| 2096 | - opacity: 0.8; | |
| 2097 | -} | |
| 2098 | - | |
| 2099 | -.mxch-message-bubble .mxchat-featured-item-price { | |
| 2100 | - font-weight: 700; | |
| 2101 | - font-size: 13px; | |
| 2102 | - color: #2e7d32; | |
| 2103 | - margin: 0; | |
| 2104 | -} | |
| 2105 | - | |
| 2106 | -.mxch-message-bubble .mxchat-featured-item-price del { | |
| 2107 | - opacity: 0.6; | |
| 2108 | - font-weight: 400; | |
| 2109 | - font-size: 0.85em; | |
| 2110 | - margin-right: 4px; | |
| 2111 | -} | |
| 2112 | - | |
| 2113 | -.mxch-message-bubble .mxchat-featured-item-price ins { | |
| 2114 | - text-decoration: none; | |
| 2115 | - background: none; | |
| 2116 | -} | |
| 2117 | - | |
| 2118 | -.mxch-message-bubble .mxchat-featured-item-actions { | |
| 2119 | - display: flex; | |
| 2120 | - flex-direction: row; | |
| 2121 | - gap: 8px; | |
| 2122 | - margin: 0; | |
| 2123 | - padding: 0; | |
| 2124 | -} | |
| 2125 | - | |
| 2126 | -.mxch-message-bubble .mxchat-featured-btn-details, | |
| 2127 | -.mxch-message-bubble a.mxchat-featured-btn-details { | |
| 2128 | - display: flex; | |
| 2129 | - align-items: center; | |
| 2130 | - justify-content: center; | |
| 2131 | - flex: 1; | |
| 2132 | - padding: 7px 10px; | |
| 2133 | - font-size: 12px; | |
| 2134 | - font-weight: 500; | |
| 2135 | - border-radius: 6px; | |
| 2136 | - text-decoration: none; | |
| 2137 | - border: 1px solid #ddd; | |
| 2138 | - background: transparent; | |
| 2139 | - color: #1a1a1a; | |
| 2140 | - text-align: center; | |
| 2141 | - line-height: 1.2; | |
| 2142 | -} | |
| 2143 | - | |
| 2144 | -.mxch-message-bubble .mxchat-featured-btn-cart, | |
| 2145 | -.mxch-message-bubble button.mxchat-featured-btn-cart { | |
| 2146 | - display: flex; | |
| 2147 | - align-items: center; | |
| 2148 | - justify-content: center; | |
| 2149 | - flex: 1; | |
| 2150 | - padding: 7px 10px; | |
| 2151 | - font-size: 12px; | |
| 2152 | - font-weight: 500; | |
| 2153 | - border-radius: 6px; | |
| 2154 | - border: none; | |
| 2155 | - background: #212121; | |
| 2156 | - color: #fff; | |
| 2157 | - cursor: default; | |
| 2158 | - opacity: 0.6; | |
| 2159 | - line-height: 1.2; | |
| 2160 | 1697 | } |
