.bs-ai-panel { --ai-line:var(--color-hairline,#dce3e3); --ai-ink:var(--color-text,#17252a); --ai-muted:var(--color-text-muted,#59676c); --ai-surface:var(--color-surface,#fff); --ai-accent:var(--color-accent,#136f63); color:var(--ai-ink); max-width:960px; min-width:0; }
.bs-ai-panel * { box-sizing:border-box; }
.bs-ai-panel fieldset { margin:0; padding:0; border:0; min-width:0; }
.bs-ai-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.bs-ai-panel p { font-size:14px; line-height:1.7; color:var(--ai-muted); margin:8px 0 16px; }
.bs-ai-panel [data-error=true] { color:#a52c20; }
.bs-ai-toolbar p { margin:0; }
.bs-ai-card { background:var(--ai-surface); border:1px solid var(--ai-line); border-radius:12px; padding:24px; margin:0 0 20px; min-width:0; }
.bs-ai-card h2 { margin:0 0 12px; font-size:18px; }
.bs-ai-providers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.bs-ai-provider { min-width:0; padding:16px; border:1px solid var(--ai-line); border-radius:8px; }
.bs-ai-field { display:flex; flex-direction:column; gap:8px; margin-top:16px; font-size:13px; font-weight:600; }
.bs-ai-field input,.bs-ai-field textarea { display:block; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--ai-line); border-radius:6px; font:14px ui-monospace,monospace; color:var(--ai-ink); background:var(--ai-surface); }
.bs-ai-toggle { display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; font-weight:600; cursor:pointer; }
.bs-ai-toggle input { width:20px; height:20px; flex:none; margin:0; accent-color:var(--ai-accent); }
.bs-ai-panel button { min-height:44px; padding:10px 20px; border:1px solid var(--ai-line); border-radius:6px; background:var(--ai-surface); color:var(--ai-ink); font:inherit; font-size:14px; cursor:pointer; }
.bs-ai-panel button:disabled { opacity:.5; cursor:default; }
.bs-ai-panel .bs-ai-share { margin:20px 0 8px; color:var(--ai-ink); font-weight:600; }
.bs-ai-actions { display:flex; justify-content:flex-end; padding-bottom:16px; }
.bs-ai-actions button { background:var(--ai-accent); color:#fff; border-color:var(--ai-accent); }
.bs-ai-panel :focus-visible { outline:2px solid var(--ai-accent); outline-offset:3px; }
@media(max-width:767px) { .bs-ai-card { padding:20px 16px; } .bs-ai-providers { grid-template-columns:1fr; gap:12px; } }