/* ---- V1.44 OneStop's AI help for clients (the AI study's first wave, items 4 to 7): "Ask about this page" (ask-page-*,
   Client\Shared\AskAboutPage.razor: its button in the app bar, its drawer, a full-screen sheet on a phone), Monitoring's
   "Explain this incident" (ai-explain, Client\Apps\InfrastructureV2\ClientIncidentExplainPanel.razor), Training's answer from the
   AVEVA documentation (tr-docs, Client\Apps\Training\TrainingPlayerPage.razor), AVEVA CONNECT's "Why did my Test fail?"
   (ai-explain, Client\Apps\AvevaConnect\AvevaConnectPage.razor). The theme's tokens only, so light and dark both work. ---- */

/* The button, on the right of the app bar */
.ask-page-button { display: inline-flex; align-items: center; align-self: center; gap: 6px; margin-left: auto; padding: 4px 12px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ask-page-button .mud-icon-root { color: var(--accent); }
.ask-page-button:hover, .ask-page-button:focus-visible, .ask-page-button.on { border-color: var(--accent); background: var(--accent-soft); }

/* The drawer (the Guide's look: monitoring2.css .m2-guide) */
.ask-page-back { position: fixed; z-index: 1300; inset: 0; background: rgba(17, 24, 39, 0.25); }
.ask-page { position: fixed; z-index: 1301; top: 0; right: 0; bottom: 0; display: flex; width: min(460px, 100vw); flex-direction: column; background: var(--panel);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); color: var(--text); }
.ask-page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ask-page-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.05rem; font-weight: 900; }
.ask-page-head h2 .mud-icon-root { color: var(--accent); }
.ask-page-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none;
    color: var(--muted); cursor: pointer; }
.ask-page-close:hover, .ask-page-close:focus-visible { background: var(--accent-soft); color: var(--text); }
.ask-page-body { overflow: auto; flex: 1; padding: 10px 16px 18px; }
.ask-page-body > .hint:first-child { margin-top: 0; }
.ask-page-field { display: block; margin: 8px 0 6px; }
.ask-page-input { width: 100%; box-sizing: border-box; min-height: 74px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field);
    color: var(--text); font: inherit; font-size: 0.9rem; resize: vertical; }
.ask-page-input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.ask-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ask-page-actions .spacer { flex: 1; }
.ask-page-note { margin: 6px 0 0; }
.ask-not-ready { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--note-soft, var(--panel-2));
    color: var(--text); font-size: 0.88rem; line-height: 1.4; }
.ask-not-ready .mud-icon-root { flex: none; color: var(--warn); }
.ask-page-turns { margin: 14px 0 0; padding: 0; list-style: none; }
.ask-page-turns li { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.ask-page-q { color: var(--muted); font-size: 0.84rem; font-weight: 700; overflow-wrap: anywhere; }
.ask-page-a { margin-top: 6px; font-size: 0.9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ask-page-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ask-ai-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong, var(--accent));
    font-size: 0.68rem; font-weight: 900; letter-spacing: 0.4px; }
.ask-source { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text);
    font-size: 0.76rem; font-weight: 700; overflow-wrap: anywhere; }
.ask-source .mud-icon-root { font-size: 0.95rem; }
a.ask-source-link { color: var(--chip-text); text-decoration: none; }
a.ask-source-link:hover, a.ask-source-link:focus-visible { background: var(--chip-hover); text-decoration: underline; }

/* A phone: the drawer is a full-screen sheet, the button only its icon */
@media (max-width: 600px) {
    .ask-page { width: 100vw; left: 0; }
    .ask-page-label { display: none; }
    .ask-page-button { padding: 5px 8px; }
}

/* An explanation by the AI (Monitoring's incident, AVEVA CONNECT's Test) */
.ai-explain { border-left: 3px solid var(--accent); }
.ai-explain .panel-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-explain-body { font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.ai-explain-body h2 { margin: 12px 0 4px; color: var(--accent); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.ai-explain-body h2:first-child { margin-top: 2px; }
.ai-explain-body p { margin: 0 0 6px; }
.ai-explain-body ol, .ai-explain-body ul { margin: 0 0 6px; padding-left: 20px; }
.ai-explain-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ai-explain-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* AVEVA CONNECT: the explanation under a connection's facts, before its buttons */
.ac-explain { margin: 10px 0 4px; box-shadow: none; }
.ai-explain-actions + .error, .ac-explain + .error { margin-top: 6px; }

/* Training: the answer of the AVEVA documentation, apart from the course's */
.tr-docs { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--info, var(--accent)); border-radius: 6px; background: var(--panel-2); }
.tr-docs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--info, var(--accent)); font-size: 0.78rem; font-weight: 900; }
.tr-docs-text { margin-top: 4px; font-size: 0.88rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.tr-docs-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }