| @@ -5,16 +5,14 @@ | ||
| 5 | 5 | |
| 6 | 6 | /* ========================================================================== |
| 7 | 7 | Override parent content padding for split panel view |
| 8 | 8 | ========================================================================== */ |
| 9 | -.mxch-content:has(#all-actions.mxch-section.active), | |
| 10 | -.mxch-content:has(#ai-tools.mxch-section.active) { | |
| 9 | +.mxch-content:has(#all-actions.mxch-section.active) { | |
| 11 | 10 | padding: 0 !important; |
| 12 | 11 | overflow: hidden; |
| 13 | 12 | } |
| 14 | 13 | |
| 15 | -#all-actions.mxch-section, | |
| 16 | -#ai-tools.mxch-section { | |
| 14 | +#all-actions.mxch-section { | |
| 17 | 15 | padding: 0; |
| 18 | 16 | margin: 0; |
| 19 | 17 | height: calc(100vh - 32px); /* Account for WP admin bar */ |
| 20 | 18 | overflow: hidden; |
| @@ -19,38 +17,10 @@ | ||
| 19 | 17 | height: calc(100vh - 32px); /* Account for WP admin bar */ |
| 20 | 18 | overflow: hidden; |
| 21 | 19 | } |
| 22 | 20 | |
| 23 | -/* AI Tools keeps an extra #mxch-fc-settings wrapper (autosave nonce + JS target), | |
| 24 | - so unlike #all-actions its split panel is NOT a direct child of the section. | |
| 25 | - Make the wrapper a layout-neutral full-height flex column so the split panel sits | |
| 26 | - edge-to-edge identical to Trigger Phrases (plan 183856). A model-not-capable or | |
| 27 | - Brave-key notice, when present, stacks above (with a small inset so it isn't flush | |
| 28 | - to the viewport edge) and the split panel flexes to fill the remaining height. */ | |
| 29 | -#mxch-fc-settings { | |
| 30 | - display: flex; | |
| 31 | - flex-direction: column; | |
| 32 | - height: 100%; | |
| 33 | - overflow: hidden; | |
| 34 | -} | |
| 35 | -#mxch-fc-settings > .mxch-split-panel { | |
| 36 | - flex: 1 1 auto; | |
| 37 | - min-height: 0; | |
| 38 | -} | |
| 39 | -#mxch-fc-settings > .mxch-notice { | |
| 40 | - margin-top: 16px; | |
| 41 | - margin-left: 16px; | |
| 42 | - margin-right: 16px; | |
| 43 | -} | |
| 44 | - | |
| 45 | -/* Fixed-viewport content for the split-panel tabs (All Actions + AI Tools — their | |
| 46 | - inner list + detail panels scroll independently). The Dashboard tab keeps the | |
| 47 | - shared scrollable .mxch-content from admin-sidebar.css (flex:1 + overflow-y:auto) | |
| 48 | - so it scrolls normally on desktop AND mobile — previously this rule was unscoped | |
| 49 | - and forced overflow:hidden on every tab, clipping tall content with no scroll | |
| 50 | - (worst on mobile). plan a41dee fix; AI Tools added for full-bleed parity (plan 183856). */ | |
| 51 | -.mxch-actions-wrapper .mxch-content:has(#all-actions.mxch-section.active), | |
| 52 | -.mxch-actions-wrapper .mxch-content:has(#ai-tools.mxch-section.active) { | |
| 21 | +/* Ensure the admin wrapper fills the viewport */ | |
| 22 | +.mxch-actions-wrapper .mxch-content { | |
| 53 | 23 | height: calc(100vh - 32px); |
| 54 | 24 | overflow: hidden; |
| 55 | 25 | } |
| 56 | 26 | |
| @@ -260,118 +230,8 @@ | ||
| 260 | 230 | line-height: 1.5; |
| 261 | 231 | } |
| 262 | 232 | |
| 263 | 233 | /* ========================================================================== |
| 264 | - Actions landing — "two ways to set up" explainer (plan 8bbf98) | |
| 265 | - AI Tools (recommended) vs Trigger Phrases, side by side. | |
| 266 | - ========================================================================== */ | |
| 267 | -.mxch-approach-grid { | |
| 268 | - display: grid; | |
| 269 | - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| 270 | - gap: var(--mxch-spacing-md); | |
| 271 | - margin-bottom: var(--mxch-spacing-md); | |
| 272 | -} | |
| 273 | - | |
| 274 | -.mxch-approach-card { | |
| 275 | - display: flex; | |
| 276 | - flex-direction: column; | |
| 277 | - background: #f9fafb; | |
| 278 | - border: 1px solid var(--mxch-card-border); | |
| 279 | - border-radius: var(--mxch-radius-md); | |
| 280 | - padding: var(--mxch-spacing-lg); | |
| 281 | -} | |
| 282 | - | |
| 283 | -.mxch-approach-card-primary { | |
| 284 | - background: var(--mxch-primary-light); | |
| 285 | - border-color: var(--mxch-primary); | |
| 286 | -} | |
| 287 | - | |
| 288 | -.mxch-approach-card-head { | |
| 289 | - display: flex; | |
| 290 | - align-items: center; | |
| 291 | - gap: var(--mxch-spacing-sm); | |
| 292 | - margin-bottom: var(--mxch-spacing-md); | |
| 293 | -} | |
| 294 | - | |
| 295 | -.mxch-approach-icon { | |
| 296 | - display: flex; | |
| 297 | - align-items: center; | |
| 298 | - justify-content: center; | |
| 299 | - width: 40px; | |
| 300 | - height: 40px; | |
| 301 | - background: var(--mxch-primary); | |
| 302 | - border-radius: 10px; | |
| 303 | - color: #fff; | |
| 304 | - flex-shrink: 0; | |
| 305 | -} | |
| 306 | - | |
| 307 | -.mxch-approach-icon-muted { | |
| 308 | - background: var(--mxch-text-secondary); | |
| 309 | -} | |
| 310 | - | |
| 311 | -.mxch-approach-titles { | |
| 312 | - display: flex; | |
| 313 | - align-items: center; | |
| 314 | - gap: var(--mxch-spacing-sm); | |
| 315 | - flex-wrap: wrap; | |
| 316 | -} | |
| 317 | - | |
| 318 | -.mxch-approach-title { | |
| 319 | - font-size: 16px; | |
| 320 | - font-weight: 600; | |
| 321 | - color: var(--mxch-text-primary); | |
| 322 | - margin: 0; | |
| 323 | -} | |
| 324 | - | |
| 325 | -.mxch-approach-pill { | |
| 326 | - display: inline-flex; | |
| 327 | - align-items: center; | |
| 328 | - font-size: 11px; | |
| 329 | - font-weight: 600; | |
| 330 | - text-transform: uppercase; | |
| 331 | - letter-spacing: 0.4px; | |
| 332 | - padding: 2px 8px; | |
| 333 | - border-radius: 999px; | |
| 334 | - background: var(--mxch-primary); | |
| 335 | - color: #fff; | |
| 336 | -} | |
| 337 | - | |
| 338 | -.mxch-approach-desc { | |
| 339 | - font-size: 13px; | |
| 340 | - line-height: 1.6; | |
| 341 | - color: var(--mxch-text-secondary); | |
| 342 | - margin: 0 0 var(--mxch-spacing-md) 0; | |
| 343 | - flex: 1 1 auto; | |
| 344 | -} | |
| 345 | - | |
| 346 | -.mxch-approach-btn { | |
| 347 | - align-self: flex-start; | |
| 348 | -} | |
| 349 | - | |
| 350 | -.mxch-approach-note { | |
| 351 | - display: flex; | |
| 352 | - align-items: flex-start; | |
| 353 | - gap: var(--mxch-spacing-sm); | |
| 354 | - padding: var(--mxch-spacing-md); | |
| 355 | - background: #f9fafb; | |
| 356 | - border: 1px dashed var(--mxch-card-border); | |
| 357 | - border-radius: var(--mxch-radius-md); | |
| 358 | - font-size: 13px; | |
| 359 | - line-height: 1.6; | |
| 360 | - color: var(--mxch-text-secondary); | |
| 361 | -} | |
| 362 | - | |
| 363 | -.mxch-approach-note svg { | |
| 364 | - flex-shrink: 0; | |
| 365 | - color: var(--mxch-primary); | |
| 366 | - margin-top: 1px; | |
| 367 | -} | |
| 368 | - | |
| 369 | -.mxch-approach-note strong { | |
| 370 | - color: var(--mxch-text-primary); | |
| 371 | -} | |
| 372 | - | |
| 373 | -/* ========================================================================== | |
| 374 | 234 | Empty Text |
| 375 | 235 | ========================================================================== */ |
| 376 | 236 | .mxch-empty-text { |
| 377 | 237 | font-size: 13px; |
| @@ -1627,37 +1487,17 @@ | ||
| 1627 | 1487 | ========================================================================== */ |
| 1628 | 1488 | |
| 1629 | 1489 | /* Mobile-first: Show list by default, hide detail panel until action selected */ |
| 1630 | 1490 | @media screen and (max-width: 782px) { |
| 1631 | - /* The wrapper is position:fixed (admin-sidebar.css), so the PAGE body can't | |
| 1632 | - scroll it — scrolling has to happen INSIDE .mxch-content (same as desktop | |
| 1633 | - and every other MxChat admin page). The previous rules set the wrapper + | |
| 1634 | - content to height:auto + overflow:visible, which on a FIXED wrapper just | |
| 1635 | - pushed the overflow below the viewport with no way to reach it (the page | |
| 1636 | - "didn't move"). Fix: make .mxch-content the bounded internal scroll | |
| 1637 | - container on mobile, for every tab. plan a41dee follow-up. */ | |
| 1638 | - .mxch-actions-wrapper { | |
| 1639 | - height: calc(100vh - 46px); /* WP admin bar is 46px on mobile */ | |
| 1640 | - overflow: hidden; | |
| 1641 | - } | |
| 1642 | - .mxch-actions-wrapper .mxch-content, | |
| 1643 | - .mxch-actions-wrapper .mxch-content:has(#all-actions.mxch-section.active) { | |
| 1644 | - height: 100%; | |
| 1645 | - overflow-y: auto; | |
| 1646 | - overflow-x: hidden; | |
| 1647 | - -webkit-overflow-scrolling: touch; | |
| 1648 | - } | |
| 1649 | - /* The split-panel tabs flow + scroll inside the scrollable content on mobile. */ | |
| 1650 | - #all-actions.mxch-section, | |
| 1651 | - #ai-tools.mxch-section { | |
| 1491 | + /* Remove viewport height constraints on mobile */ | |
| 1492 | + #all-actions.mxch-section { | |
| 1652 | 1493 | height: auto; |
| 1653 | - min-height: 0; | |
| 1494 | + min-height: calc(100vh - 46px); /* WP admin bar is 46px on mobile */ | |
| 1654 | 1495 | overflow: visible; |
| 1655 | 1496 | } |
| 1656 | - /* AI Tools wrapper flows naturally on mobile (no fixed height / flex column) so | |
| 1657 | - its split panel stacks + scrolls in the bounded .mxch-content (plan 183856). */ | |
| 1658 | - #mxch-fc-settings { | |
| 1659 | - display: block; | |
| 1497 | + | |
| 1498 | + .mxch-actions-wrapper .mxch-content, | |
| 1499 | + .mxch-actions-wrapper { | |
| 1660 | 1500 | height: auto; |
| 1661 | 1501 | overflow: visible; |
| 1662 | 1502 | } |
| 1663 | 1503 | |
| @@ -1663,9 +1503,9 @@ | ||
| 1663 | 1503 | |
| 1664 | 1504 | .mxch-split-panel { |
| 1665 | 1505 | flex-direction: column; |
| 1666 | 1506 | height: auto; |
| 1667 | - min-height: 0; | |
| 1507 | + min-height: calc(100vh - 46px); | |
| 1668 | 1508 | overflow: visible; |
| 1669 | 1509 | } |
| 1670 | 1510 | |
| 1671 | 1511 | /* List panel takes full width and reasonable height */ |
| @@ -1789,10 +1629,9 @@ | ||
| 1789 | 1629 | min-width: 120px; |
| 1790 | 1630 | } |
| 1791 | 1631 | |
| 1792 | 1632 | /* Action items tighter on mobile */ |
| 1793 | - .mxch-action-item, | |
| 1794 | - .mxch-fc-list-item { | |
| 1633 | + .mxch-action-item { | |
| 1795 | 1634 | padding: 10px; |
| 1796 | 1635 | } |
| 1797 | 1636 | |
| 1798 | 1637 | .mxch-action-icon { |
| @@ -1886,423 +1725,5 @@ | ||
| 1886 | 1725 | |
| 1887 | 1726 | .mxch-types-grid { |
| 1888 | 1727 | grid-template-columns: repeat(2, 1fr); |
| 1889 | 1728 | } |
| 1890 | -} | |
| 1891 | - | |
| 1892 | -/* ========================================================================== | |
| 1893 | - Phrase Tag Input | |
| 1894 | - ========================================================================== */ | |
| 1895 | - | |
| 1896 | -.mxch-phrase-input-wrapper { | |
| 1897 | - border: 1px solid var(--mxch-card-border, #e5e7eb); | |
| 1898 | - border-radius: 8px; | |
| 1899 | - padding: 10px; | |
| 1900 | - background: var(--mxch-card-bg, #fff); | |
| 1901 | -} | |
| 1902 | - | |
| 1903 | -.mxch-phrase-tags { | |
| 1904 | - display: flex; | |
| 1905 | - flex-wrap: wrap; | |
| 1906 | - gap: 6px; | |
| 1907 | - margin-bottom: 8px; | |
| 1908 | - min-height: 28px; | |
| 1909 | -} | |
| 1910 | - | |
| 1911 | -.mxch-phrase-tags:empty { | |
| 1912 | - margin-bottom: 0; | |
| 1913 | -} | |
| 1914 | - | |
| 1915 | -.mxch-phrase-pill { | |
| 1916 | - display: inline-flex; | |
| 1917 | - align-items: center; | |
| 1918 | - gap: 6px; | |
| 1919 | - padding: 5px 10px; | |
| 1920 | - background: #f3f4f6; | |
| 1921 | - border-radius: 16px; | |
| 1922 | - font-size: 13px; | |
| 1923 | - color: #374151; | |
| 1924 | - border: 1px solid #e5e7eb; | |
| 1925 | - line-height: 1.4; | |
| 1926 | - max-width: 100%; | |
| 1927 | - word-break: break-word; | |
| 1928 | -} | |
| 1929 | - | |
| 1930 | -.mxch-phrase-pill .mxch-phrase-remove { | |
| 1931 | - background: none; | |
| 1932 | - border: none; | |
| 1933 | - cursor: pointer; | |
| 1934 | - color: #9ca3af; | |
| 1935 | - font-size: 16px; | |
| 1936 | - line-height: 1; | |
| 1937 | - padding: 0 2px; | |
| 1938 | - flex-shrink: 0; | |
| 1939 | -} | |
| 1940 | - | |
| 1941 | -.mxch-phrase-pill .mxch-phrase-remove:hover { | |
| 1942 | - color: #ef4444; | |
| 1943 | -} | |
| 1944 | - | |
| 1945 | -/* Legacy phrase pill */ | |
| 1946 | -.mxch-phrase-pill.mxch-phrase-legacy { | |
| 1947 | - background: #fef3c7; | |
| 1948 | - border-color: #fcd34d; | |
| 1949 | - color: #92400e; | |
| 1950 | -} | |
| 1951 | - | |
| 1952 | -.mxch-legacy-badge { | |
| 1953 | - font-size: 10px; | |
| 1954 | - text-transform: uppercase; | |
| 1955 | - background: #f59e0b; | |
| 1956 | - color: #fff; | |
| 1957 | - padding: 1px 5px; | |
| 1958 | - border-radius: 4px; | |
| 1959 | - font-weight: 600; | |
| 1960 | - flex-shrink: 0; | |
| 1961 | -} | |
| 1962 | - | |
| 1963 | -/* Legacy tag in view mode */ | |
| 1964 | -.mxch-phrase-tag.mxch-phrase-legacy { | |
| 1965 | - background: #fef3c7; | |
| 1966 | - border: 1px solid #fcd34d; | |
| 1967 | - color: #92400e; | |
| 1968 | -} | |
| 1969 | - | |
| 1970 | -.mxch-phrase-add-row { | |
| 1971 | - display: flex; | |
| 1972 | - gap: 8px; | |
| 1973 | -} | |
| 1974 | - | |
| 1975 | -.mxch-phrase-add-row input { | |
| 1976 | - flex: 1; | |
| 1977 | - padding: 6px 10px; | |
| 1978 | - border: 1px solid #d1d5db; | |
| 1979 | - border-radius: 6px; | |
| 1980 | - font-size: 13px; | |
| 1981 | -} | |
| 1982 | - | |
| 1983 | -.mxch-phrase-add-row input:focus { | |
| 1984 | - outline: none; | |
| 1985 | - border-color: #6366f1; | |
| 1986 | - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15); | |
| 1987 | -} | |
| 1988 | - | |
| 1989 | -.mxch-phrase-add-row .mxch-btn-sm { | |
| 1990 | - padding: 6px 14px; | |
| 1991 | - font-size: 13px; | |
| 1992 | - white-space: nowrap; | |
| 1993 | -} | |
| 1994 | - | |
| 1995 | -.mxch-no-phrases { | |
| 1996 | - font-size: 13px; | |
| 1997 | - color: #9ca3af; | |
| 1998 | - font-style: italic; | |
| 1999 | -} | |
| 2000 | - | |
| 2001 | -/* ============================================================ | |
| 2002 | - * AI Tools section (native function calling) — plan a41dee | |
| 2003 | - * ============================================================ */ | |
| 2004 | -.mxch-fc-intro { | |
| 2005 | - font-size: 14px; | |
| 2006 | - color: var(--mxch-text-secondary, #64748b); | |
| 2007 | - margin: 0 0 var(--mxch-spacing-md, 16px); | |
| 2008 | - line-height: 1.5; | |
| 2009 | -} | |
| 2010 | -.mxch-fc-toggle-row { | |
| 2011 | - display: flex; | |
| 2012 | - align-items: center; | |
| 2013 | - gap: var(--mxch-spacing-md, 16px); | |
| 2014 | -} | |
| 2015 | -.mxch-fc-toggle-row .mxch-fc-toggle-text { | |
| 2016 | - font-size: 14px; | |
| 2017 | - font-weight: 600; | |
| 2018 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2019 | -} | |
| 2020 | -.mxch-fc-note { | |
| 2021 | - display: flex; | |
| 2022 | - gap: 8px; | |
| 2023 | - align-items: flex-start; | |
| 2024 | - margin: var(--mxch-spacing-md, 16px) 0 0; | |
| 2025 | - padding: 10px 12px; | |
| 2026 | - border-radius: var(--mxch-radius-md, 8px); | |
| 2027 | - background: #fff7ed; | |
| 2028 | - border: 1px solid #fed7aa; | |
| 2029 | - color: #9a3412; | |
| 2030 | - font-size: 13px; | |
| 2031 | - line-height: 1.45; | |
| 2032 | -} | |
| 2033 | -.mxch-fc-note svg { flex: 0 0 auto; margin-top: 1px; } | |
| 2034 | -.mxch-fc-saved-notice { | |
| 2035 | - display: flex; | |
| 2036 | - gap: 8px; | |
| 2037 | - align-items: center; | |
| 2038 | - margin: 0 0 var(--mxch-spacing-md, 16px); | |
| 2039 | - padding: 10px 12px; | |
| 2040 | - border-radius: var(--mxch-radius-md, 8px); | |
| 2041 | - background: #ecfdf5; | |
| 2042 | - border: 1px solid #a7f3d0; | |
| 2043 | - color: #065f46; | |
| 2044 | - font-size: 13px; | |
| 2045 | - font-weight: 600; | |
| 2046 | -} | |
| 2047 | -.mxch-fc-tool-list { | |
| 2048 | - display: flex; | |
| 2049 | - flex-direction: column; | |
| 2050 | - gap: 2px; | |
| 2051 | -} | |
| 2052 | -.mxch-fc-tool-row { | |
| 2053 | - display: flex; | |
| 2054 | - align-items: flex-start; | |
| 2055 | - gap: 12px; | |
| 2056 | - padding: 12px 8px; | |
| 2057 | - border-radius: var(--mxch-radius-md, 8px); | |
| 2058 | - cursor: pointer; | |
| 2059 | - transition: background 0.15s ease; | |
| 2060 | -} | |
| 2061 | -.mxch-fc-tool + .mxch-fc-tool { border-top: 1px solid var(--mxch-card-border, #e5e7eb); } | |
| 2062 | -.mxch-fc-tool-row:hover { background: var(--mxch-content-bg, #f0f2f5); } | |
| 2063 | -.mxch-fc-tool-row input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; } | |
| 2064 | -.mxch-fc-tool-meta { display: flex; flex-direction: column; gap: 3px; } | |
| 2065 | -.mxch-fc-tool-label { | |
| 2066 | - font-size: 14px; | |
| 2067 | - font-weight: 600; | |
| 2068 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2069 | - display: flex; | |
| 2070 | - align-items: center; | |
| 2071 | - gap: 8px; | |
| 2072 | - flex-wrap: wrap; | |
| 2073 | -} | |
| 2074 | -.mxch-fc-tool-desc { | |
| 2075 | - font-size: 13px; | |
| 2076 | - color: var(--mxch-text-secondary, #64748b); | |
| 2077 | - line-height: 1.45; | |
| 2078 | -} | |
| 2079 | -.mxch-fc-badge { | |
| 2080 | - font-size: 10px; | |
| 2081 | - font-weight: 700; | |
| 2082 | - text-transform: uppercase; | |
| 2083 | - letter-spacing: 0.04em; | |
| 2084 | - padding: 2px 7px; | |
| 2085 | - border-radius: 999px; | |
| 2086 | - line-height: 1.4; | |
| 2087 | -} | |
| 2088 | -.mxch-fc-badge-addon { background: #ede9fe; color: #5b21b6; } | |
| 2089 | -.mxch-fc-badge-sensitive { background: #fef3c7; color: #92400e; } | |
| 2090 | -/* Per-tool "when to use" hint (plan 27d3e6) — indented under each tool row, | |
| 2091 | - shown only while the tool is enabled. */ | |
| 2092 | -.mxch-fc-tool-hint { | |
| 2093 | - display: flex; | |
| 2094 | - flex-direction: column; | |
| 2095 | - gap: 4px; | |
| 2096 | - padding: 0 8px 12px 40px; | |
| 2097 | -} | |
| 2098 | -.mxch-fc-tool-hint.is-hidden { display: none; } | |
| 2099 | -.mxch-fc-hint-label { | |
| 2100 | - font-size: 12px; | |
| 2101 | - font-weight: 600; | |
| 2102 | - color: var(--mxch-text-secondary, #64748b); | |
| 2103 | -} | |
| 2104 | -.mxch-fc-hint-input { | |
| 2105 | - width: 100%; | |
| 2106 | - box-sizing: border-box; | |
| 2107 | - min-height: 44px; | |
| 2108 | - resize: vertical; | |
| 2109 | - padding: 8px 10px; | |
| 2110 | - font-size: 13px; | |
| 2111 | - line-height: 1.45; | |
| 2112 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2113 | - background: var(--mxch-card-bg, #fff); | |
| 2114 | - border: 1px solid var(--mxch-card-border, #e5e7eb); | |
| 2115 | - border-radius: var(--mxch-radius-md, 8px); | |
| 2116 | - font-family: inherit; | |
| 2117 | - transition: border-color 0.15s ease, box-shadow 0.15s ease; | |
| 2118 | -} | |
| 2119 | -.mxch-fc-hint-input:focus { | |
| 2120 | - outline: none; | |
| 2121 | - border-color: var(--mxch-primary, #7873f5); | |
| 2122 | - box-shadow: 0 0 0 3px var(--mxch-primary-light, rgba(120, 115, 245, 0.15)); | |
| 2123 | -} | |
| 2124 | -.mxch-fc-hint-input::placeholder { color: var(--mxch-text-muted, #94a3b8); } | |
| 2125 | -@media (max-width: 782px) { | |
| 2126 | - .mxch-fc-tool-hint { padding-left: 8px; } | |
| 2127 | -} | |
| 2128 | -.mxch-fc-actions { | |
| 2129 | - display: flex; | |
| 2130 | - align-items: center; | |
| 2131 | - gap: 10px; | |
| 2132 | - margin-top: var(--mxch-spacing-lg, 24px); | |
| 2133 | -} | |
| 2134 | -.mxch-fc-autosave-hint { | |
| 2135 | - font-size: 13px; | |
| 2136 | - color: var(--mxch-text-muted, #94a3b8); | |
| 2137 | -} | |
| 2138 | -.mxch-fc-save-status { | |
| 2139 | - font-size: 13px; | |
| 2140 | - font-weight: 600; | |
| 2141 | - color: var(--mxch-text-secondary, #64748b); | |
| 2142 | - min-height: 18px; | |
| 2143 | -} | |
| 2144 | -.mxch-fc-save-status.is-saved { color: #059669; } | |
| 2145 | -.mxch-fc-save-status.is-error { color: #dc2626; } | |
| 2146 | - | |
| 2147 | -/* ========================================================================== | |
| 2148 | - AI Tools — master-detail list + detail view (plan d450a7) | |
| 2149 | - The left list reuses the Trigger Phrases inner classes (.mxch-action-icon, | |
| 2150 | - .mxch-action-info, .mxch-action-name, .mxch-action-type-label, | |
| 2151 | - .mxch-action-meta, .mxch-action-status) directly. Only the OUTER row needs a | |
| 2152 | - dedicated class — a clone of .mxch-action-item's look — so the Trigger Phrases | |
| 2153 | - JS (which binds clicks to .mxch-action-item) never touches these rows. | |
| 2154 | - ========================================================================== */ | |
| 2155 | -.mxch-fc-list-item { | |
| 2156 | - display: flex; | |
| 2157 | - align-items: center; | |
| 2158 | - gap: 10px; | |
| 2159 | - padding: 12px; | |
| 2160 | - cursor: pointer; | |
| 2161 | - border-bottom: 1px solid #f3f4f6; | |
| 2162 | - transition: background 0.15s; | |
| 2163 | - position: relative; | |
| 2164 | -} | |
| 2165 | -.mxch-fc-list-item:hover { | |
| 2166 | - background: #f9fafb; | |
| 2167 | -} | |
| 2168 | -.mxch-fc-list-item.active { | |
| 2169 | - background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); | |
| 2170 | - border-left: 3px solid var(--mxch-primary); | |
| 2171 | - padding-left: 9px; | |
| 2172 | -} | |
| 2173 | -.mxch-fc-list-item.selected { | |
| 2174 | - background: #f5f3ff; | |
| 2175 | -} | |
| 2176 | - | |
| 2177 | -/* Bulk-select checkbox on AI Tools rows — mirrors .mxch-action-checkbox so the | |
| 2178 | - two list panes behave identically: hidden until hover / selection (plan 5f7409). */ | |
| 2179 | -.mxch-fc-checkbox { | |
| 2180 | - width: 16px; | |
| 2181 | - height: 16px; | |
| 2182 | - flex-shrink: 0; | |
| 2183 | - cursor: pointer; | |
| 2184 | - accent-color: var(--mxch-primary); | |
| 2185 | - opacity: 0; | |
| 2186 | - transition: opacity 0.15s; | |
| 2187 | -} | |
| 2188 | -.mxch-fc-list-item:hover .mxch-fc-checkbox, | |
| 2189 | -.mxch-fc-list-item.selected .mxch-fc-checkbox, | |
| 2190 | -.mxch-action-list.selection-mode .mxch-fc-checkbox { | |
| 2191 | - opacity: 1; | |
| 2192 | -} | |
| 2193 | - | |
| 2194 | -/* Detail-view body text (description + the "when to use" note). */ | |
| 2195 | -.mxch-fc-view-desc, | |
| 2196 | -.mxch-fc-view-hint { | |
| 2197 | - margin: 0; | |
| 2198 | - font-size: 14px; | |
| 2199 | - line-height: 1.6; | |
| 2200 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2201 | - white-space: pre-wrap; | |
| 2202 | -} | |
| 2203 | -.mxch-fc-view-hint.is-muted { | |
| 2204 | - color: var(--mxch-text-muted, #94a3b8); | |
| 2205 | - font-style: italic; | |
| 2206 | -} | |
| 2207 | - | |
| 2208 | -/* ========================================================================== | |
| 2209 | - AI Tools — add/remove card flow (plan 8bbf98 part 4) | |
| 2210 | - A view layer over the hidden #mxch-fc-tool-store inputs. | |
| 2211 | - ========================================================================== */ | |
| 2212 | -.mxch-fc-tool-store { display: none; } | |
| 2213 | - | |
| 2214 | -.mxch-fc-card-list { | |
| 2215 | - display: flex; | |
| 2216 | - flex-direction: column; | |
| 2217 | - gap: 10px; | |
| 2218 | - margin-top: var(--mxch-spacing-md, 16px); | |
| 2219 | -} | |
| 2220 | -.mxch-fc-card { | |
| 2221 | - display: flex; | |
| 2222 | - align-items: flex-start; | |
| 2223 | - gap: 14px; | |
| 2224 | - padding: 14px; | |
| 2225 | - background: var(--mxch-card-bg, #fff); | |
| 2226 | - border: 1px solid var(--mxch-card-border, #e5e7eb); | |
| 2227 | - border-radius: var(--mxch-radius-lg, 12px); | |
| 2228 | - transition: border-color 0.15s ease, box-shadow 0.15s ease; | |
| 2229 | -} | |
| 2230 | -.mxch-fc-card:hover { | |
| 2231 | - border-color: var(--mxch-primary, #7873f5); | |
| 2232 | - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.08); | |
| 2233 | -} | |
| 2234 | -.mxch-fc-card-icon { | |
| 2235 | - width: 40px; | |
| 2236 | - height: 40px; | |
| 2237 | - border-radius: 10px; | |
| 2238 | - background: rgba(120, 115, 245, 0.1); | |
| 2239 | - display: flex; | |
| 2240 | - align-items: center; | |
| 2241 | - justify-content: center; | |
| 2242 | - flex-shrink: 0; | |
| 2243 | -} | |
| 2244 | -.mxch-fc-card-icon .dashicons { color: var(--mxch-primary, #7873f5); font-size: 20px; width: 20px; height: 20px; } | |
| 2245 | -.mxch-fc-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } | |
| 2246 | -.mxch-fc-card-label { | |
| 2247 | - font-size: 14px; | |
| 2248 | - font-weight: 600; | |
| 2249 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 2250 | - display: flex; | |
| 2251 | - align-items: center; | |
| 2252 | - gap: 8px; | |
| 2253 | - flex-wrap: wrap; | |
| 2254 | -} | |
| 2255 | -.mxch-fc-card-hint { font-size: 13px; color: var(--mxch-text-secondary, #64748b); line-height: 1.45; } | |
| 2256 | -.mxch-fc-card-hint.is-muted { color: var(--mxch-text-muted, #94a3b8); font-style: italic; } | |
| 2257 | -.mxch-fc-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } | |
| 2258 | - | |
| 2259 | -/* Empty state */ | |
| 2260 | -.mxch-fc-empty { text-align: center; padding: 32px 20px; } | |
| 2261 | -.mxch-fc-empty-icon { | |
| 2262 | - width: 56px; | |
| 2263 | - height: 56px; | |
| 2264 | - margin: 0 auto 14px; | |
| 2265 | - border-radius: 14px; | |
| 2266 | - background: rgba(120, 115, 245, 0.1); | |
| 2267 | - color: var(--mxch-primary, #7873f5); | |
| 2268 | - display: flex; | |
| 2269 | - align-items: center; | |
| 2270 | - justify-content: center; | |
| 2271 | -} | |
| 2272 | -.mxch-fc-empty h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--mxch-text-primary, #1a1a2e); } | |
| 2273 | -.mxch-fc-empty p { margin: 0 auto 16px; max-width: 420px; font-size: 13px; color: var(--mxch-text-secondary, #64748b); line-height: 1.5; } | |
| 2274 | - | |
| 2275 | -/* Add-Tool modal */ | |
| 2276 | -.mxch-modal-lg { max-width: 640px; } | |
| 2277 | -.mxch-fc-modal-step .mxch-modal-body { max-height: 70vh; overflow-y: auto; } | |
| 2278 | -.mxch-fc-modal-grid { | |
| 2279 | - grid-template-columns: 1fr; | |
| 2280 | - padding: 0; | |
| 2281 | - gap: 10px; | |
| 2282 | - flex: none; | |
| 2283 | - overflow: visible; | |
| 2284 | -} | |
| 2285 | -.mxch-fc-modal-allset { | |
| 2286 | - margin: 8px 0 0; | |
| 2287 | - font-size: 13px; | |
| 2288 | - color: var(--mxch-text-secondary, #64748b); | |
| 2289 | -} | |
| 2290 | -.mxch-fc-modal-sensitive-note { | |
| 2291 | - display: flex; | |
| 2292 | - gap: 8px; | |
| 2293 | - align-items: flex-start; | |
| 2294 | - margin-top: 12px; | |
| 2295 | - padding: 10px 12px; | |
| 2296 | - background: #fef3c7; | |
| 2297 | - color: #92400e; | |
| 2298 | - border-radius: var(--mxch-radius-md, 8px); | |
| 2299 | - font-size: 12.5px; | |
| 2300 | - line-height: 1.45; | |
| 2301 | -} | |
| 2302 | -.mxch-fc-modal-sensitive-note svg { flex-shrink: 0; margin-top: 1px; } | |
| 2303 | - | |
| 2304 | -@media screen and (max-width: 782px) { | |
| 2305 | - .mxch-fc-card { padding: 12px; } | |
| 2306 | - .mxch-fc-card-actions { gap: 2px; } | |
| 2307 | - .mxch-modal-lg { width: 94%; } | |
| 2308 | 1729 | } |
