| @@ -134,66 +134,12 @@ | ||
| 134 | 134 | .os-ai.is-open .os-ai__panel { |
| 135 | 135 | transform: scale( 1 ) translateY( 0 ); |
| 136 | 136 | } |
| 137 | 137 | |
| 138 | -/* --------------------------------------------------------------------------- | |
| 139 | - * Header — accent-tinted identity strip | |
| 140 | - * ------------------------------------------------------------------------- */ | |
| 141 | - | |
| 142 | -.os-ai__header { | |
| 143 | - display: flex; | |
| 144 | - align-items: center; | |
| 145 | - gap: 8px; | |
| 146 | - padding: 10px 14px; | |
| 147 | - /* A faint accent tint fading to the surface, at --os-ai-accent's | |
| 148 | - strength: flat when that is 0. */ | |
| 149 | - background: linear-gradient( | |
| 150 | - to bottom, | |
| 151 | - color-mix( | |
| 152 | - in srgb, | |
| 153 | - var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.08 ), | |
| 154 | - var( --os-ui-surface, #fff ) | |
| 155 | - ), | |
| 156 | - var( --os-ui-surface, #fff ) | |
| 157 | - ); | |
| 158 | - border-bottom: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.06 ) ); | |
| 159 | -} | |
| 160 | - | |
| 161 | -.os-ai__header-icon { | |
| 162 | - display: flex; | |
| 163 | - align-items: center; | |
| 164 | - color: color-mix( | |
| 165 | - in srgb, | |
| 166 | - var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ), | |
| 167 | - var( --os-ui-fg, #1d2327 ) | |
| 168 | - ); | |
| 169 | - /* The glow fades out with the accent, so a neutral mark has none. */ | |
| 170 | - filter: drop-shadow( | |
| 171 | - 0 0 5px | |
| 172 | - color-mix( | |
| 173 | - in srgb, | |
| 174 | - var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.55 ), | |
| 175 | - transparent | |
| 176 | - ) | |
| 177 | - ); | |
| 178 | -} | |
| 179 | - | |
| 180 | -/* Sentence case at body size, like a window title, rather than a | |
| 181 | - tracked uppercase eyebrow. */ | |
| 182 | -.os-ai__header-label { | |
| 183 | - flex: 1; | |
| 184 | - font-size: 13px; | |
| 185 | - font-weight: 500; | |
| 186 | - color: color-mix( | |
| 187 | - in srgb, | |
| 188 | - var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ), | |
| 189 | - var( --os-ui-fg, #1d2327 ) | |
| 190 | - ); | |
| 191 | -} | |
| 192 | - | |
| 193 | -/* Mode switch (Commands ↔ AI) — a small segmented pill in the header. | |
| 194 | - Shown only when AI is available; replaces the `/` shortcut. */ | |
| 138 | +/* Mode switch (Commands ↔ AI) — a small segmented pill at the end of | |
| 139 | + the input row. Always shown; replaces the `/` shortcut. */ | |
| 195 | 140 | .os-ai__modes { |
| 141 | + flex-shrink: 0; | |
| 196 | 142 | display: inline-flex; |
| 197 | 143 | gap: 2px; |
| 198 | 144 | padding: 2px; |
| 199 | 145 | border-radius: 999px; |
| @@ -199,12 +145,8 @@ | ||
| 199 | 145 | border-radius: 999px; |
| 200 | 146 | background: var( --os-ui-hover, rgba( 0, 0, 0, 0.05 ) ); |
| 201 | 147 | } |
| 202 | 148 | |
| 203 | -.os-ai__modes[hidden] { | |
| 204 | - display: none; | |
| 205 | -} | |
| 206 | - | |
| 207 | 149 | .os-ai__mode { |
| 208 | 150 | appearance: none; |
| 209 | 151 | border: 0; |
| 210 | 152 | cursor: pointer; |
| @@ -221,9 +163,9 @@ | ||
| 221 | 163 | color: var( --os-ui-fg, #1d2327 ); |
| 222 | 164 | } |
| 223 | 165 | |
| 224 | 166 | .os-ai__mode.is-active { |
| 225 | - /* Elevated first: the pill sits ON the header, which is already | |
| 167 | + /* Elevated first: the pill sits ON the panel, which is already | |
| 226 | 168 | `--os-ui-surface`, so a theme that distinguishes the two keeps the |
| 227 | 169 | active segment readable. Falls through to plain surface, which is |
| 228 | 170 | the default look. */ |
| 229 | 171 | background: var( --os-ui-surface-elevated, var( --os-ui-surface, #fff ) ); |
| @@ -235,10 +177,8 @@ | ||
| 235 | 177 | outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); |
| 236 | 178 | outline-offset: 1px; |
| 237 | 179 | } |
| 238 | 180 | |
| 239 | -/* .os-ai__close styles moved to the bottom results section */ | |
| 240 | - | |
| 241 | 181 | /* --------------------------------------------------------------------------- |
| 242 | 182 | * Input row — the main interaction surface |
| 243 | 183 | * ------------------------------------------------------------------------- */ |
| 244 | 184 | |
| @@ -419,40 +359,8 @@ | ||
| 419 | 359 | /* (The admin-bar button styles are added inline in PHP to keep them |
| 420 | 360 | on the admin-bar handle so they load even before os.js.) */ |
| 421 | 361 | |
| 422 | 362 | /* --------------------------------------------------------------------------- |
| 423 | - * Close button — × icon, top-right of header | |
| 424 | - * ------------------------------------------------------------------------- */ | |
| 425 | - | |
| 426 | -.os-ai__close { | |
| 427 | - display: inline-flex; | |
| 428 | - align-items: center; | |
| 429 | - justify-content: center; | |
| 430 | - width: 28px; | |
| 431 | - height: 28px; | |
| 432 | - appearance: none; | |
| 433 | - background: var( --os-ui-hover, rgba( 0, 0, 0, 0.05 ) ); | |
| 434 | - border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.1 ) ); | |
| 435 | - border-radius: 6px; | |
| 436 | - cursor: pointer; | |
| 437 | - color: var( --os-ui-fg-muted, #646970 ); | |
| 438 | - padding: 0; | |
| 439 | - flex-shrink: 0; | |
| 440 | - transition: background 0.1s, color 0.1s, border-color 0.1s; | |
| 441 | -} | |
| 442 | - | |
| 443 | -.os-ai__close:hover { | |
| 444 | - background: var( --os-ui-hover, rgba( 0, 0, 0, 0.09 ) ); | |
| 445 | - border-color: var( --os-ui-border-strong, rgba( 0, 0, 0, 0.2 ) ); | |
| 446 | - color: var( --os-ui-fg, #1d2327 ); | |
| 447 | -} | |
| 448 | - | |
| 449 | -.os-ai__close:focus-visible { | |
| 450 | - outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); | |
| 451 | - outline-offset: 2px; | |
| 452 | -} | |
| 453 | - | |
| 454 | -/* --------------------------------------------------------------------------- | |
| 455 | 363 | * Results / conversation area — three render modes: |
| 456 | 364 | * • Suggestions (empty state, example prompts) |
| 457 | 365 | * • Thinking (spinner + "Thinking…") |
| 458 | 366 | * • Response (assistant bubble + entity card | admin links | nothing) |
| @@ -540,10 +448,12 @@ | ||
| 540 | 448 | text-decoration: underline; |
| 541 | 449 | text-underline-offset: 2px; |
| 542 | 450 | } |
| 543 | 451 | |
| 452 | +/* Keeps the underline and nudges the colour toward the foreground, so | |
| 453 | + hovering reads as a response rather than the link going away. */ | |
| 544 | 454 | .os-ai__settings-link:hover { |
| 545 | - text-decoration: none; | |
| 455 | + color: color-mix( in srgb, currentColor 65%, var( --os-ui-fg, #1d2327 ) ); | |
| 546 | 456 | } |
| 547 | 457 | |
| 548 | 458 | /* The shell forces `cursor: default !important` on every clickable |
| 549 | 459 | * surface (see the cursor policy at the top of desktop.css). This |
