.vx-ai { --ai-border: #dce1e5; --ai-text: #172126; --ai-muted: #56656e; --ai-surface: #fff; color: var(--ai-text); letter-spacing: 0; }
.dark .vx-ai { --ai-border: #333a3d; --ai-text: #edf2f2; --ai-muted: #a0acb1; --ai-surface: #111516; }
.vx-ai [hidden] { display: none !important; }
.vx-ai-heading, .vx-ai-heading-actions, .vx-ai-submit-row, .vx-ai-result > header { display: flex; align-items: center; gap: 12px; }
.vx-ai-heading { justify-content: space-between; padding-bottom: 20px; flex-wrap: wrap; }
.vx-ai-heading h1 { font-size: 24px; line-height: 1.3; font-weight: 650; margin: 0 0 6px; }
.vx-ai-heading p { font-size: 14px; color: var(--ai-muted); margin: 0; overflow-wrap: anywhere; }
.vx-ai-context { display: flex; gap: 40px; flex-wrap: wrap; padding: 16px 0; border-block: 1px solid var(--ai-border); }
.vx-ai-context dt { color: var(--ai-muted); font-size: 12px; margin-bottom: 5px; }
.vx-ai-context dd { font-size: 14px; font-weight: 600; margin: 0; }
.vx-ai-notice { padding: 14px 0; font-size: 14px; line-height: 1.6; color: var(--ai-muted); overflow-wrap: anywhere; }
.vx-ai-notice[data-tone="error"] { color: #b42336; }
.dark .vx-ai-notice[data-tone="error"] { color: #f7a0ad; }
.vx-ai-notice[data-tone="success"] { color: #176956; }
.dark .vx-ai-notice[data-tone="success"] { color: #7edac0; }
.vx-ai-workspace { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr); gap: 32px; padding-top: 10px; }
.vx-ai-composer, .vx-ai-result { min-width: 0; }
.vx-ai-composer label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.vx-ai textarea { display: block; width: 100%; min-height: 200px; max-height: 440px; resize: vertical; background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); border-radius: 6px; padding: 14px; font: inherit; font-size: 15px; line-height: 1.65; }
.vx-ai textarea::placeholder { color: var(--ai-muted); }
.vx-ai textarea:focus-visible, .vx-ai button:focus-visible { outline: 2px solid #168472; outline-offset: 3px; }
.vx-ai textarea:disabled { opacity: .7; }
.vx-ai-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.vx-ai-button, .vx-ai-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ai-border); border-radius: 6px; color: var(--ai-text); background: var(--ai-surface); font-size: 13px; font-weight: 550; min-height: 38px; padding: 8px 12px; line-height: 1.4; cursor: pointer; }
.vx-ai-icon { flex: 0 0 38px; width: 38px; padding: 0; }
.vx-ai-button:hover:not(:disabled), .vx-ai-icon:hover:not(:disabled) { border-color: #168472; }
.vx-ai-primary { background: #176956; color: #fff; border-color: #176956; }
.dark .vx-ai-primary { background: #88dbc3; border-color: #88dbc3; color: #102822; }
.vx-ai button:disabled { opacity: .45; cursor: not-allowed; }
.vx-ai-submit-row { flex-wrap: wrap; justify-content: flex-end; }
.vx-ai-submit-row > span { font-size: 12px; color: var(--ai-muted); margin-right: auto; font-variant-numeric: tabular-nums; }
.vx-ai-result { border-left: 1px solid var(--ai-border); padding-left: 32px; }
.vx-ai-result > header { justify-content: space-between; margin-bottom: 14px; }
.vx-ai-result h2 { font-size: 16px; line-height: 1.4; font-weight: 650; margin: 0; }
.vx-ai-question { font-size: 13px; color: var(--ai-muted); border-bottom: 1px solid var(--ai-border); padding-bottom: 14px; margin-bottom: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vx-ai-answer { font-size: 15px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 150px; }
.vx-ai-reference { font-size: 11px; color: var(--ai-muted); padding-top: 20px; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .vx-ai-workspace { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vx-ai-result { border-left: 0; padding-left: 0; border-top: 1px solid var(--ai-border); padding-top: 20px; }
}
@media (max-width: 480px) {
  .vx-ai-heading h1 { font-size: 21px; }
  .vx-ai-heading-actions { width: 100%; justify-content: flex-end; }
  .vx-ai-context { column-gap: 24px; row-gap: 16px; }
  .vx-ai-presets { align-items: stretch; }
  .vx-ai-submit-row { gap: 8px; }
}
@media (max-width: 760px) {
  body.vx-ai-active #sidebar { flex-shrink: 0; }
  body.vx-ai-active #sidebar:not(.collapsed) { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60; box-shadow: 8px 0 24px #0003; }
  body.vx-ai-active #sidebar:not(.collapsed) + div { margin-left: 72px; }
  body.vx-ai-active #sidebar + div > header > div:first-child,
  body.vx-ai-active #sidebar + div > header > div:first-child > div { min-width: 0; }
  body.vx-ai-active #notif-dropdown { max-width: calc(100vw - 90px); }
}