/* AI native page: selected and active states, hover, motion and responsive rules for the inline-styled markup
   in templates/pages/ai-native.php. Overrides of inline styles need !important. */

/* Hero: each sentence of the two-tone title starts its own line. */
#roles h1 .mrm-tone { display: block; }

/* Hero roles: ruled cells; the picked role gets the orange bar and a filled initials box. */
.ai-persona:hover, .ai-persona[aria-pressed="true"] { background: var(--night-900); }
.ai-persona[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange-500); }
.ai-av { border-color: var(--night-700); color: var(--text-on-dark-muted); }
.ai-persona[aria-pressed="true"] .ai-av { background: var(--orange-700); border-color: var(--orange-700); color: var(--white); }

/* Role tabs above the chat: square toggles, ink when selected. */
.ai-ptab { background: transparent; color: var(--ink-600); }
.ai-ptab[aria-pressed="false"]:hover { color: var(--ink-900); }
.ai-ptab[aria-pressed="true"] { background: var(--ink-900); color: var(--paper); }

/* Assistant list: ruled rows, the selected one white with an orange edge. */
.ai-client:hover, .ai-client[aria-pressed="true"] { background: var(--white); }
.ai-client[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--orange-500); }

/* Pressed feedback on every control of the page. */
#roles button:active, #conversation button:active, #integrations button:active { opacity: .8; }
.ai-send[aria-disabled="true"] { cursor: not-allowed !important; }
.ai-send[aria-disabled="true"]:active { opacity: 1; }

/* MCP traffic on the boundary diagram (the design moved it 9 % every 240 ms). */
.ai-flow { animation: ai-flow 3.84s steps(16) infinite; }
@keyframes ai-flow { from { transform: translateX(-100%); } to { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) { .ai-flow { animation: none; } }

/* How it works: the cycling step lights its number box orange and its word white (as the homepage story). */
.ai-hn { border-color: var(--night-700); color: var(--text-on-dark-muted); }
.ai-hk { color: var(--text-tone-on-dark); }
.ai-step.is-on { background: var(--night-900); }
.ai-step.is-on .ai-hn { background: var(--orange-700); border-color: var(--orange-700); color: var(--white); }
.ai-step.is-on .ai-hk { color: var(--white); }

/* Chat window and "behind the scenes" share an auto-fit grid. Below three tracks, both take the full row:
   span 2 would add an implicit column with one track, and the panel would sit beside an empty track with two. */
@media (max-width: 1111.98px) {
  .ai-span2, .ai-span2 + aside { grid-column: 1 / -1 !important; }
}
/* Ruled grids step down by explicit columns (auto-fit would leave empty tracks filled with the rule colour). */
@media (max-width: 1000px) {
  .ai-personas, .ai-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 800px) {
  .ai-how-in { padding: 96px 20px 32px !important; gap: 32px !important; }
  .ai-how { padding-bottom: 72px !important; }
  .ai-step { padding: 24px !important; }
  .ai-hk { font-size: 36px !important; margin-top: 12px !important; }
}
/* The five-part boundary diagram does not fit a phone side by side: stack it. */
@media (max-width: 640px) {
  .ai-flowgrid { grid-template-columns: 1fr !important; }
  .ai-zone { padding-top: 14px !important; }
  .ai-zone > span:first-child { position: static !important; display: block; margin-bottom: 12px; }
}
@media (max-width: 560px) {
  .ai-personas, .ai-rail { grid-template-columns: 1fr !important; }
}
/* Phones: the role tabs fit one row; client rows put their tag under the name. */
@media (max-width: 479.98px) {
  .ai-ptab { padding: 9px 10px !important; }
  .ai-client { grid-template-columns: minmax(0, 1fr) !important; padding: 20px !important; }
  .ai-tag { justify-self: start; margin-left: 30px; }
}
@media (max-width: 374.98px) {
  .ai-ptabs { gap: 2px !important; }
  .ai-ptab { padding: 9px 8px !important; }
}