/* AI connections share AgentHub's theme, Outline icons and container breakpoints. */
.connections-page { display:flex; flex-direction:column; gap:22px; }
.connections-page .page-heading { margin:0; }
.connections-page .page-heading h1 { font-size:26px; letter-spacing:-.7px; }
.connections-page .page-heading p { font-size:13px; }
.connections-page .heading-actions { gap:8px; }
.connection-overview { border:1px solid var(--accent-line); border-radius:18px; background:linear-gradient(115deg,var(--surface) 55%,var(--hero-bg)); overflow:hidden; }
.connection-overview-main { display:flex; align-items:center; gap:22px; padding:32px; }
.connection-provider-icon { display:grid; place-items:center; flex:none; width:66px; height:66px; border:1px solid var(--accent-line); border-radius:19px; background:var(--accent-soft); color:var(--accent); box-shadow:0 5px 16px #7160ce09; }
.connection-overview-copy { flex:1; min-width:0; }
.connection-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:9px; font-size:10px; font-weight:650; letter-spacing:1.4px; color:var(--muted); }
.connection-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; letter-spacing:0; color:var(--muted); white-space:nowrap; }
.connection-status>i,.connection-current>i { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.connection-status.is-online { color:var(--positive); }
.connection-eyebrow .connection-status { padding:4px 9px; border-radius:20px; background:var(--surface-alt); border:1px solid var(--border); }
.connection-eyebrow .connection-status.is-online { background:var(--positive-soft); border-color:transparent; }
.connection-overview-copy h2 { font-size:25px; font-weight:650; line-height:1.3; letter-spacing:-.7px; margin:0 0 9px; color:var(--ink); }
.connection-overview-copy>p { font-size:13px; line-height:1.7; color:var(--muted); margin:0; }
.connection-session { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:15px; color:var(--muted); font-size:12px; }
.connection-session>span { overflow-wrap:anywhere; }
.connection-plan { border:1px solid var(--accent-line); background:var(--surface); border-radius:5px; padding:2px 6px; color:var(--accent); font-size:10px; font-weight:600; }
.connection-open-btn { flex:none; background:var(--surface); }
.connection-overview-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:20px 32px; gap:20px; background:var(--surface); border-top:1px solid var(--border); }
.connection-overview-stats>div { min-width:0; border-right:1px solid var(--border); padding-right:16px; }
.connection-overview-stats>div:last-child { border:0; }
.connection-overview-stats>div>span { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.connection-overview-stats strong { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:25px; line-height:1.3; font-weight:650; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.connection-overview-stats strong small { font-size:11px; font-weight:400; letter-spacing:0; color:var(--muted); }
.connection-content-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); align-items:start; gap:22px; }
.connection-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 24px; }
.connection-section-head h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:650; letter-spacing:-.2px; }
.connection-section-head p { margin:6px 0 0; font-size:12px; line-height:1.7; color:var(--muted); }
.connection-count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:var(--surface-hover); color:var(--muted); font-size:10px; font-weight:500; }
.connection-section-icon { color:var(--muted); flex:none; }
.connection-accounts-panel { overflow:hidden; }
.connection-accounts { padding:0 14px 14px; }
.connection-account { display:flex; align-items:center; gap:12px; padding:16px 12px; border:1px solid transparent; border-bottom-color:var(--border); border-radius:0; }
.connection-account:last-child { border-bottom-color:transparent; }
.connection-account.is-current { border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:11px; margin-bottom:4px; }
.connection-account-avatar { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-hover); color:var(--muted); font-size:14px; font-weight:600; border:1px solid var(--border); }
.is-current>.connection-account-avatar { color:var(--accent); background:var(--surface); border-color:var(--accent-line); }
.connection-account-info { min-width:0; flex:1; }
.connection-account-name { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.connection-account-name strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.connection-current { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--positive); white-space:nowrap; }
.connection-account-email { display:block; overflow-wrap:anywhere; font-size:11px; color:var(--muted); margin-top:4px; }
.connection-account-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
.connection-account-tags:empty { display:none; }
.connection-account-tags>span { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--muted); }
.connection-account-actions { flex:none; display:flex; align-items:center; gap:7px; }
.connection-account-actions .btn { font-size:11px; min-height:30px; padding:5px 9px; }
.connection-account-actions .icon-btn { color:var(--subtle); width:30px; height:30px; }
.connection-account-actions .icon-btn:hover { color:var(--rose); background:var(--rose-soft); }
.connection-account-check { display:flex; color:var(--positive); padding:5px; }
.connection-section-foot { display:flex; gap:7px; align-items:flex-start; padding:15px 24px; background:var(--surface-alt); color:var(--muted); font-size:11px; line-height:1.6; border-top:1px solid var(--border); overflow-wrap:anywhere; }
.connection-section-foot svg { flex:none; margin-top:2px; }
.connection-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:32px 24px 42px; }
.connection-empty-icon { display:grid; place-items:center; width:58px; height:58px; border:1px solid var(--border); background:var(--surface-alt); color:var(--subtle); border-radius:16px; margin-bottom:18px; }
.connection-empty h3 { font-size:14px; font-weight:600; margin:0 0 8px; }
.connection-empty p { font-size:12px; max-width:290px; line-height:1.8; color:var(--muted); margin:0 0 20px; }
.connection-side-stack { display:flex; flex-direction:column; gap:16px; min-width:0; }
.connection-mode-list { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 22px; }
.connection-mode-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; font-size:11px; color:var(--ink); }
.connection-mode-chip svg { color:var(--subtle); }
.connection-feature-list { padding:4px 24px 12px; border-top:1px solid var(--border); }
.connection-feature-list>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.connection-feature-list>div>span:first-child { display:flex; align-items:center; gap:8px; font-size:12px; }
.connection-feature-list svg { color:var(--muted); }
.connection-demo { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:20px; border:1px dashed var(--border); border-radius:14px; background:var(--surface-alt); }
.connection-demo-icon { color:var(--muted); display:flex; }
.connection-demo>div { flex:1; min-width:130px; }
.connection-demo h3 { font-size:12px; font-weight:600; margin:0 0 5px; }
.connection-demo p { font-size:11px; color:var(--muted); line-height:1.7; margin:0; }
.connection-infrastructure { overflow:hidden; }
.connection-infrastructure summary { display:flex; align-items:center; gap:14px; padding:20px 24px; cursor:pointer; list-style:none; }
.connection-infrastructure summary::-webkit-details-marker { display:none; }
.connection-infrastructure summary>span:nth-child(2) { flex:1; min-width:0; }
.connection-infrastructure summary strong { display:block; font-size:13px; font-weight:600; }
.connection-infrastructure summary small { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.6; }
.connection-infrastructure summary>svg { color:var(--muted); transition:transform .15s; }
.connection-infrastructure details[open] summary>svg { transform:rotate(180deg); }
.connection-bridge-total { color:var(--muted); font-size:11px; }
.connection-bridge-list { padding:0 24px; border-top:1px solid var(--border); }
.connection-bridge-row { display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
.connection-bridge-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--surface-alt); color:var(--muted); flex:none; }
.connection-bridge-row>div { flex:1; min-width:0; }
.connection-bridge-row strong { display:block; font-size:12px; font-weight:600; }
.connection-bridge-row code { display:block; font-size:10px; line-height:1.7; margin-top:4px; overflow-wrap:anywhere; color:var(--muted); }
.connection-bridge-load { min-width:85px; font-size:11px; color:var(--muted); text-align:right; }
.connection-bridge-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; }
.connection-bridge-footer p { margin:0; font-size:11px; color:var(--muted); line-height:1.7; }
.connection-bridge-footer .btn { flex:none; }
.modal[data-kind="chatgpt-account"] { max-width:780px; }
.modal[data-kind="chatgpt-account"] .modal-head h2 { font-size:17px; }
.account-manager-section { padding:22px; border:1px solid var(--border); border-radius:12px; background:var(--surface); margin-bottom:16px; }
.account-manager-title { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-bottom:18px; }
.account-manager-title strong { display:flex; align-items:center; gap:8px; font-size:14px; }
.account-manager-title svg { color:var(--accent); }
.account-login-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.account-login-grid .field { margin:0; }
.account-login-grid .hint { font-size:11px; line-height:1.6; }
.account-login-actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid var(--border); margin-top:20px; padding-top:18px; }
.account-login-actions>label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); cursor:pointer; }
.account-login-actions>div { display:flex; gap:8px; flex-wrap:wrap; }
.account-manager-advanced>summary { cursor:pointer; font-size:12px; font-weight:600; padding:8px 0 14px; color:var(--muted); }
.account-manager-section:last-child { margin-bottom:0; }
.account-manager-session { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.account-manager-session>div { flex:1; min-width:150px; }
.account-manager-session strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.account-manager-session small { display:block; font-size:11px; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.account-login-details>summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; font-size:14px; font-weight:600; }
.account-login-details>summary::-webkit-details-marker { display:none; }
.account-login-details>summary>svg { color:var(--accent); }
.account-login-details>summary>span { display:flex; margin-left:auto; color:var(--muted); }
.account-login-details[open]>summary { margin-bottom:22px; }
.account-login-details[open]>summary>span { transform:rotate(180deg); }
.account-auth-preview { margin-top:16px; font-size:11px; color:var(--muted); }
.account-auth-preview summary { cursor:pointer; padding:6px 0; }
.account-auth-preview img { width:100%; max-height:260px; object-fit:contain; background:var(--surface-alt); border:1px solid var(--border); border-radius:9px; margin-top:10px; }
.account-otp { background:var(--accent-soft); border-color:var(--accent-line); }
.account-otp p { margin:0 0 16px; font-size:12px; line-height:1.7; color:var(--muted); }
.account-otp .input { font-size:22px; letter-spacing:6px; font-variant-numeric:tabular-nums; max-width:240px; }
.account-advanced-description { font-size:12px; line-height:1.7; color:var(--muted); margin:0 0 12px; }
.account-bridge-rows { margin-bottom:18px; }
.account-bridge-row { display:flex; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--border); }
.account-bridge-row>div { flex:1; min-width:0; }
.account-bridge-row strong { display:block; font-size:12px; }
.account-bridge-row code { display:block; font-size:10px; color:var(--muted); overflow-wrap:anywhere; margin-top:4px; }
@container page (max-width:1000px) {
  .connection-content-grid { grid-template-columns:minmax(0,1fr); }
  .connection-side-stack { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
  .connection-overview-main { padding:26px; gap:16px; flex-wrap:wrap; }
  .connection-overview-copy { min-width:220px; }
}
@container page (max-width:650px) {
  .connection-overview-main { padding:22px; align-items:flex-start; }
  .connection-provider-icon { width:46px; height:46px; border-radius:14px; }
  .connection-provider-icon svg { width:25px; }
  .connection-overview-copy { min-width:0; flex-basis:calc(100% - 70px); }
  .connection-overview-copy h2 { font-size:21px; }
  .connection-open-btn { margin-left:62px; }
  .connection-overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); padding:22px; gap:22px; }
  .connection-overview-stats>div:nth-child(2) { border:0; }
  .connection-side-stack { display:flex; align-items:stretch; }
  .connection-section-head { padding:20px; }
  .connection-account { flex-wrap:wrap; gap:10px; }
  .connection-account-info { min-width:calc(100% - 60px); }
  .connection-account-actions { margin-left:auto; }
  .connection-bridge-total { display:none; }
  .connection-bridge-row { flex-wrap:wrap; }
  .connection-bridge-row>div { min-width:calc(100% - 50px); }
  .connection-bridge-row>.connection-status { margin-left:48px; }
  .connection-bridge-load { margin-left:auto; }
  .connection-bridge-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:600px) {
  .account-login-grid { grid-template-columns:minmax(0,1fr); }
  .account-manager-section { padding:16px; }
  .account-login-actions>div { width:100%; }
  .account-login-actions .btn { flex:1; }
}
@media (prefers-reduced-motion:reduce) { .connection-infrastructure summary>svg { transition:none; } }