/* ============================================================================
   OneCanvas · in-canvas AI panel redesign (ADDITIVE)
   ----------------------------------------------------------------------------
   Loads AFTER /prototype/onecanvas-ai-connect.css and after
   onecanvas-shell-redesign.css. Same selectors, later position → wins.
   Every id (#aiConnectPanel, #aiConnectSetup, #aiWorkbenchRun, #aiWorkbenchApprove …)
   and every data-state / data-step-state hook the runtime toggles is kept.
   Goal: readable sizes (13–16px), one clear sequence
   connect → choose material → ask → preview proposal → approve.
   ============================================================================ */

/* Triggers (dock + topbar) */
.ai-connect-trigger, #quickDock .ai-connect-trigger { color: var(--accent); border: 1px solid var(--oc-accent-line); background: var(--oc-accent-soft); font-weight: 650; }
#quickDock .ai-connect-trigger { min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; }
.ai-connect-trigger:hover, .ai-connect-trigger[aria-expanded="true"], #quickDock .ai-connect-trigger:hover, #quickDock .ai-connect-trigger[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--oc-accent-soft); }
.ai-connect-signal, #quickDock .ai-connect-trigger .ai-connect-signal { width: 8px; height: 8px; background: var(--text-2); opacity: .55; box-shadow: none; }
.ai-connect-trigger[data-state="loading"] .ai-connect-signal { background: var(--oc-warn); opacity: 1; }
.ai-connect-trigger[data-state="connected"] .ai-connect-signal { background: var(--oc-ok); opacity: 1; box-shadow: 0 0 0 3px var(--oc-ok-soft); }
.ai-connect-trigger[data-state="pending"] .ai-connect-signal { background: var(--accent); opacity: 1; }
.ai-connect-trigger[data-state="error"] .ai-connect-signal { background: var(--oc-danger); opacity: 1; }

/* Panel frame — anchored under the topbar, above the bottom bar */
.ai-connect-backdrop { top: calc(var(--oc-topbar-h, 48px) + 8px); right: 12px; bottom: calc(var(--oc-bottombar-h, 36px) + 12px); width: min(440px, calc(100vw - 24px)); }
.ai-connect-panel { border: 1px solid var(--line); border-radius: var(--oc-r-panel); background: var(--surface-1); box-shadow: var(--oc-shadow-3); font-size: var(--oc-fs-ui); }
.ai-connect-head { gap: 12px; padding: 16px 16px 14px; }
.ai-connect-head > div > span { color: var(--accent); font-size: var(--oc-fs-micro); font-weight: 700; letter-spacing: .06em; }
.ai-connect-head h2 { margin: 4px 0 4px; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.ai-connect-head p { color: var(--text-2); font-size: var(--oc-fs-ui); line-height: 1.5; }
.ai-connect-head > button { min-width: 0; width: 32px; height: 32px; padding: 0; border-radius: var(--oc-r-control); background: var(--surface-2); font-size: 0; }
.ai-connect-head > button::before { content: "×"; font-size: 20px; line-height: 1; }
.ai-connect-head > button:hover { color: var(--text-1); border-color: var(--oc-line-strong); background: var(--surface-3); }
.ai-connect-body { gap: 12px; padding: 14px 16px 18px; }
.ai-connect-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cards */
.ai-workbench-status, .ai-quickstart-banner, .ai-settings-entry, .ai-connection-journey, .ai-workbench-selection, .ai-workbench-compose, .ai-workbench-proposal, .ai-connect-boundary { border-radius: var(--oc-r-card); background: var(--surface-2); }

.ai-quickstart-banner { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-color: var(--oc-accent-line); background: var(--oc-accent-soft); }
.ai-quickstart-banner > span { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.ai-quickstart-banner strong { font-size: var(--oc-fs-ui); }
.ai-quickstart-banner p { margin-top: 3px; font-size: var(--oc-fs-meta); line-height: 1.45; }
.ai-quickstart-banner em { padding: 4px 8px; font-size: var(--oc-fs-micro); font-weight: 700; }

.ai-settings-entry { gap: 12px; padding: 14px; border-color: var(--line); background: var(--surface-2); }
.ai-settings-entry > div:first-child > span { font-size: var(--oc-fs-micro); font-weight: 700; letter-spacing: .04em; }
.ai-settings-entry h3 { margin: 4px 0 4px; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.ai-settings-entry > div:first-child > p { font-size: var(--oc-fs-ui); line-height: 1.5; }
.ai-settings-entry-actions { gap: 8px; }
.ai-settings-entry-actions > a, .ai-settings-entry-actions > button { min-height: 52px; gap: 2px; padding: 10px 12px; border-radius: var(--oc-r-control); border-color: var(--line); transition: background var(--oc-motion-fast) var(--oc-ease), border-color var(--oc-motion-fast) var(--oc-ease); }
.ai-settings-entry-actions > a { color: var(--oc-accent-ink); border-color: var(--accent); background: var(--accent); }
.ai-settings-entry-actions > a:hover { background: var(--oc-accent-strong); transform: none; box-shadow: none; }
.ai-settings-entry-actions > button:hover { border-color: var(--oc-line-strong); background: var(--surface-3); transform: none; box-shadow: none; }
.ai-settings-entry-actions strong { font-size: var(--oc-fs-ui); }
.ai-settings-entry-actions small { font-size: var(--oc-fs-micro); white-space: normal; overflow: visible; text-overflow: clip; }
.ai-settings-entry-actions > a small { color: color-mix(in srgb, var(--oc-accent-ink) 82%, transparent); }
.ai-settings-entry > p { gap: 8px; font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-settings-entry > p > span { width: 18px; height: 18px; font-size: 11px; }

/* Connection journey — status is the loudest element; steps are a quiet checklist */
.ai-connection-journey { gap: 12px; padding: 14px; border-color: var(--line); background: var(--surface-2); }
.ai-connection-journey[data-state="connected"] { border-color: color-mix(in srgb, var(--oc-ok) 45%, var(--line)); }
.ai-connection-journey[data-state="error"] { border-color: color-mix(in srgb, var(--oc-danger) 45%, var(--line)); }
.ai-connection-heading > div > span { font-size: var(--oc-fs-micro); font-weight: 700; letter-spacing: .04em; }
.ai-connection-heading h3 { margin-top: 4px; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.ai-provider-state { height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-color: var(--line); color: var(--text-2); background: var(--surface-1); font-size: var(--oc-fs-micro); font-weight: 700; }
.ai-provider-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }
.ai-connection-journey[data-state="loading"] .ai-provider-state { color: var(--oc-warn-text); border-color: transparent; background: var(--oc-warn-soft); }
.ai-connection-journey[data-state="loading"] .ai-provider-state::before { background: var(--oc-warn); }
.ai-connection-journey[data-state="pending"] .ai-provider-state { color: var(--accent); border-color: transparent; background: var(--oc-accent-soft); }
.ai-connection-journey[data-state="pending"] .ai-provider-state::before { background: var(--accent); }
.ai-connection-journey[data-state="connected"] .ai-provider-state { color: var(--oc-ok-text); border-color: transparent; background: var(--oc-ok-soft); }
.ai-connection-journey[data-state="connected"] .ai-provider-state::before { background: var(--oc-ok); }
.ai-connection-journey[data-state="error"] .ai-provider-state { color: var(--oc-danger-text); border-color: transparent; background: var(--oc-danger-soft); }
.ai-connection-journey[data-state="error"] .ai-provider-state::before { background: var(--oc-danger); }
.ai-provider-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; border-radius: var(--oc-r-control); }
.ai-provider-mark { width: 40px; height: 40px; border-radius: 10px; font-size: var(--oc-fs-micro); }
.ai-provider-card strong { font-size: var(--oc-fs-ui); }
.ai-provider-card > div > span { font-size: var(--oc-fs-meta); }
.ai-provider-support { padding: 4px 8px; color: var(--oc-ok-text); background: var(--oc-ok-soft); font-size: var(--oc-fs-micro); }
.ai-connect-steps { gap: 6px; }
.ai-connect-steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: var(--oc-r-control); background: var(--surface-1); }
.ai-connect-steps li > span { width: 24px; height: 24px; font-size: var(--oc-fs-micro); }
.ai-connect-steps strong { font-size: var(--oc-fs-meta); }
.ai-connect-steps small { font-size: var(--oc-fs-micro); }
.ai-connect-steps li[data-step-state="active"] { border-color: var(--oc-accent-line); background: var(--oc-accent-soft); }
.ai-connect-steps li[data-step-state="done"] { color: var(--oc-ok-text); border-color: transparent; background: var(--oc-ok-soft); }
.ai-connect-steps li[data-step-state="done"] > span { background: var(--oc-ok); }
.ai-connection-journey .ai-workbench-status { gap: 6px; padding: 12px; border-color: var(--line); background: var(--surface-1); }
.ai-connection-journey .ai-workbench-status span { font-size: var(--oc-fs-meta); }
.ai-connection-journey .ai-workbench-status strong { font-size: var(--oc-fs-ui); }
.ai-connection-journey[data-state="error"] .ai-workbench-status strong { color: var(--oc-danger-text); }
.ai-connection-journey .ai-workbench-status > p { font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-connection-journey .ai-workbench-status > a { font-size: var(--oc-fs-meta); text-decoration: underline; text-underline-offset: 3px; }
.ai-connect-setup { min-height: 48px; gap: 2px 12px; padding: 8px 14px; border-radius: var(--oc-r-control); box-shadow: none; }
.ai-connect-setup span { font-size: var(--oc-fs-ui); font-weight: 700; }
.ai-connect-setup small { font-size: var(--oc-fs-micro); }
.ai-connect-setup:hover { filter: none; background: var(--oc-accent-strong); }
.ai-connect-setup:disabled { opacity: .6; }
.ai-connection-journey[data-state="connected"] .ai-connect-setup { color: var(--oc-ok-text); border-color: transparent; background: var(--oc-ok-soft); }
.ai-connect-recovery summary, .ai-provider-alternatives summary { font-size: var(--oc-fs-meta); }
.ai-connect-recovery ol { gap: 6px; margin-top: 8px; font-size: var(--oc-fs-meta); line-height: 1.55; }
.ai-provider-alternatives > div { grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: var(--oc-r-control); }
.ai-provider-alternatives strong, .ai-provider-alternatives span { font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-connection-privacy { gap: 8px; font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-connection-privacy > span { color: var(--oc-ok); }

/* Selection */
.ai-workbench-selection, .ai-workbench-compose, .ai-workbench-proposal { padding: 14px; }
.ai-connect-section-head h3 { font-size: 16px; letter-spacing: -.01em; }
.ai-connect-section-head span { font-size: var(--oc-fs-meta); }
.ai-workbench-selection-head > button { min-height: 32px; padding: 0 10px; border-radius: var(--oc-r-control); font-size: var(--oc-fs-meta); }
.ai-workbench-selection-list { gap: 6px; max-height: 148px; }
.ai-workbench-selection-empty { min-height: 76px; gap: 4px; border-radius: var(--oc-r-control); }
.ai-workbench-selection-empty b { font-size: var(--oc-fs-ui); }
.ai-workbench-selection-empty span { font-size: var(--oc-fs-meta); }
.ai-workbench-selection-chip { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: var(--oc-r-control); }
.ai-workbench-selection-chip span { font-size: var(--oc-fs-micro); }
.ai-workbench-selection-chip strong { font-size: var(--oc-fs-ui); }
.ai-connect-context { margin-top: 10px; font-size: var(--oc-fs-meta); line-height: 1.5; }

/* Compose */
.ai-workbench-output-route { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px; border-radius: var(--oc-r-control); }
.ai-workbench-output-route label { font-size: var(--oc-fs-meta); font-weight: 600; }
.ai-workbench-output-route select { height: 32px; font-size: var(--oc-fs-ui); font-weight: 600; }
.ai-workbench-output-route p { font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-workbench-presets button { min-height: 30px; padding: 0 10px; font-size: var(--oc-fs-meta); }
.ai-workbench-arrange { min-height: 44px; padding: 8px 12px; border-radius: var(--oc-r-control); }
.ai-workbench-arrange span { font-size: var(--oc-fs-ui); font-weight: 650; }
.ai-workbench-arrange small { font-size: var(--oc-fs-micro); }
.ai-workbench-compose label { font-size: var(--oc-fs-meta); font-weight: 600; }
.ai-workbench-compose textarea { min-height: 104px; padding: 10px 12px; border-radius: var(--oc-r-control); font-size: 15px; line-height: 1.55; }
.ai-workbench-compose textarea:focus { border-color: var(--accent); outline: 0; box-shadow: var(--oc-focus-ring); }
.ai-workbench-model-controls { gap: 8px; }
.ai-workbench-model-controls label { gap: 6px; padding: 6px 8px; border-radius: var(--oc-r-control); }
.ai-workbench-model-controls label > span { font-size: var(--oc-fs-micro); }
.ai-workbench-model-controls select { height: 30px; font-size: var(--oc-fs-meta); }
.ai-workbench-model-hint { font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-workbench-run { min-height: 48px; padding: 8px 14px; border-radius: var(--oc-r-control); box-shadow: none; }
.ai-workbench-run:hover { filter: none; background: var(--oc-accent-strong); }
.ai-workbench-run:disabled { opacity: .55; cursor: not-allowed; }
.ai-workbench-run span { font-size: 15px; font-weight: 700; }
.ai-workbench-run small { font-size: var(--oc-fs-micro); }
#aiWorkbenchRunStatus { min-height: 18px; font-size: var(--oc-fs-meta); }
#aiWorkbenchRunStatus[data-tone="warn"] { color: var(--oc-warn-text); }
#aiWorkbenchRunStatus[data-tone="error"] { color: var(--oc-danger-text); }
#aiWorkbenchRunStatus[data-tone="success"] { color: var(--oc-ok-text); }

/* Proposal — approval before apply */
.ai-workbench-proposal { border-color: var(--oc-accent-line); background: var(--oc-accent-soft); }
.ai-workbench-proposal .ai-connect-section-head span { color: var(--accent); font-weight: 600; }
.ai-workbench-proposal-list { gap: 6px; }
.ai-workbench-proposal-card { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: var(--oc-r-control); }
.ai-workbench-proposal-card > span { padding: 4px 8px; font-size: var(--oc-fs-micro); }
.ai-workbench-proposal-card strong { font-size: var(--oc-fs-ui); }
.ai-workbench-proposal-card p { margin-top: 4px; font-size: var(--oc-fs-meta); line-height: 1.5; }
.ai-workbench-proposal-actions { grid-template-columns: .8fr 1.2fr; gap: 8px; }
.ai-workbench-proposal-actions button { min-height: 40px; border-radius: var(--oc-r-control); color: var(--text-1); font-size: var(--oc-fs-ui); font-weight: 650; }
.ai-workbench-proposal-actions button:hover { background: var(--surface-2); }
.ai-workbench-proposal-actions button:last-child { color: var(--oc-accent-ink); }
.ai-workbench-proposal-actions button:last-child:hover { background: var(--oc-accent-strong); }

.ai-connect-boundary { padding: 12px 14px; border-color: var(--line); background: var(--surface-2); }
.ai-connect-boundary strong { font-size: var(--oc-fs-ui); }
.ai-connect-boundary p { margin-top: 4px; font-size: var(--oc-fs-meta); line-height: 1.5; }

.ai-connect-foot { min-height: 56px; gap: 8px; padding: 10px 16px; }
.ai-connect-foot a, .ai-connect-foot button { min-height: 36px; padding: 0 12px; border-radius: var(--oc-r-control); font-size: var(--oc-fs-meta); font-weight: 600; }
.ai-connect-foot > span { font-size: var(--oc-fs-meta); }

/* Region picking guide */
.ai-region-guide { padding: 12px 16px; border-radius: var(--oc-r-card); box-shadow: var(--oc-shadow-3); }
.ai-region-guide strong { font-size: var(--oc-fs-ui); }
.ai-region-guide span { font-size: var(--oc-fs-meta); }

@media (max-width: 720px) {
  .ai-connect-backdrop { top: var(--oc-topbar-h, 48px); bottom: 0; padding: 8px; background: var(--oc-overlay); }
  .ai-connect-panel { border-radius: var(--oc-r-panel); }
  .ai-connect-head { padding: 14px 14px 12px; }
  .ai-connect-head h2 { font-size: 17px; }
  .ai-connect-body { padding: 12px 14px 16px; }
  .ai-connect-steps { grid-template-columns: 1fr; }
  .ai-provider-alternatives > div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-settings-entry-actions > a, .ai-settings-entry-actions > button, .ai-connect-setup, .ai-workbench-run { transition: none; }
}