| @@ -5,14 +5,16 @@ | ||
| 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) { | |
| 9 | +.mxch-content:has(#all-actions.mxch-section.active), | |
| 10 | +.mxch-content:has(#ai-tools.mxch-section.active) { | |
| 10 | 11 | padding: 0 !important; |
| 11 | 12 | overflow: hidden; |
| 12 | 13 | } |
| 13 | 14 | |
| 14 | -#all-actions.mxch-section { | |
| 15 | +#all-actions.mxch-section, | |
| 16 | +#ai-tools.mxch-section { | |
| 15 | 17 | padding: 0; |
| 16 | 18 | margin: 0; |
| 17 | 19 | height: calc(100vh - 32px); /* Account for WP admin bar */ |
| 18 | 20 | overflow: hidden; |
| @@ -17,10 +19,38 @@ | ||
| 17 | 19 | height: calc(100vh - 32px); /* Account for WP admin bar */ |
| 18 | 20 | overflow: hidden; |
| 19 | 21 | } |
| 20 | 22 | |
| 21 | -/* Ensure the admin wrapper fills the viewport */ | |
| 22 | -.mxch-actions-wrapper .mxch-content { | |
| 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) { | |
| 23 | 53 | height: calc(100vh - 32px); |
| 24 | 54 | overflow: hidden; |
| 25 | 55 | } |
| 26 | 56 | |
| @@ -230,8 +260,118 @@ | ||
| 230 | 260 | line-height: 1.5; |
| 231 | 261 | } |
| 232 | 262 | |
| 233 | 263 | /* ========================================================================== |
| 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 | +/* ========================================================================== | |
| 234 | 374 | Empty Text |
| 235 | 375 | ========================================================================== */ |
| 236 | 376 | .mxch-empty-text { |
| 237 | 377 | font-size: 13px; |
| @@ -1487,17 +1627,37 @@ | ||
| 1487 | 1627 | ========================================================================== */ |
| 1488 | 1628 | |
| 1489 | 1629 | /* Mobile-first: Show list by default, hide detail panel until action selected */ |
| 1490 | 1630 | @media screen and (max-width: 782px) { |
| 1491 | - /* Remove viewport height constraints on mobile */ | |
| 1492 | - #all-actions.mxch-section { | |
| 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 { | |
| 1493 | 1652 | height: auto; |
| 1494 | - min-height: calc(100vh - 46px); /* WP admin bar is 46px on mobile */ | |
| 1653 | + min-height: 0; | |
| 1495 | 1654 | overflow: visible; |
| 1496 | 1655 | } |
| 1497 | - | |
| 1498 | - .mxch-actions-wrapper .mxch-content, | |
| 1499 | - .mxch-actions-wrapper { | |
| 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; | |
| 1500 | 1660 | height: auto; |
| 1501 | 1661 | overflow: visible; |
| 1502 | 1662 | } |
| 1503 | 1663 | |
| @@ -1503,9 +1663,9 @@ | ||
| 1503 | 1663 | |
| 1504 | 1664 | .mxch-split-panel { |
| 1505 | 1665 | flex-direction: column; |
| 1506 | 1666 | height: auto; |
| 1507 | - min-height: calc(100vh - 46px); | |
| 1667 | + min-height: 0; | |
| 1508 | 1668 | overflow: visible; |
| 1509 | 1669 | } |
| 1510 | 1670 | |
| 1511 | 1671 | /* List panel takes full width and reasonable height */ |
| @@ -1629,9 +1789,10 @@ | ||
| 1629 | 1789 | min-width: 120px; |
| 1630 | 1790 | } |
| 1631 | 1791 | |
| 1632 | 1792 | /* Action items tighter on mobile */ |
| 1633 | - .mxch-action-item { | |
| 1793 | + .mxch-action-item, | |
| 1794 | + .mxch-fc-list-item { | |
| 1634 | 1795 | padding: 10px; |
| 1635 | 1796 | } |
| 1636 | 1797 | |
| 1637 | 1798 | .mxch-action-icon { |
| @@ -1834,5 +1995,314 @@ | ||
| 1834 | 1995 | .mxch-no-phrases { |
| 1835 | 1996 | font-size: 13px; |
| 1836 | 1997 | color: #9ca3af; |
| 1837 | 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%; } | |
| 1838 | 2308 | } |
