.trio-media.ai-connections-preview { max-width: 440px; border-color: #2c2c30; background: #101012; box-shadow: 0 20px 45px #0004; }
.ai-connections-header { display: flex; align-items: center; justify-content: space-between; min-height: 49px; padding: 14px 18px; border-bottom: 1px solid #232327; color: #e4e4e7; font-size: 13px; font-weight: 500; }
.ai-connections-header-icon { display: flex; color: #00dd61; }
.ai-connections-body { padding: 20px; }
.ai-connection-title { display: flex; align-items: center; gap: 9px; color: #d1d1d6; font-size: 12px; }
.ai-connection-title > svg { flex-shrink: 0; color: #92929b; }
.ai-connection-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.ai-connection-providers > span { padding: 8px 5px; border: 1px solid #29292d; border-radius: 5px; background: #151517; color: #c7c7cd; font-size: 11px; text-align: center; }
.ai-connection-key { display: flex; align-items: center; gap: 13px; margin-top: 13px; }
.ai-connection-label { flex-shrink: 0; color: #777780; font-family: var(--font-mono); font-size: 9px; }
.ai-connection-key-value { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid #29292d; border-radius: 5px; color: #777780; font-size: 10px; letter-spacing: 2px; }
.ai-connection-check { color: #00dd61; font-size: 12px; letter-spacing: 0; }
.ai-connection-local { margin-top: 20px; padding-top: 20px; border-top: 1px solid #29292d; }
.ai-connection-status { display: flex; align-items: center; gap: 5px; margin-left: auto; color: #00dd61; font-family: var(--font-mono); font-size: 9px; }
.ai-connection-status > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ai-connection-device { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; color: #b6b6bd; font-size: 11px; }
.ai-connection-device > :last-child { color: #777780; font-family: var(--font-mono); font-size: 9px; }
.ai-connection-models { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid #29292d; border-radius: 5px; background: #151517; color: #c7c7cd; font-size: 11px; }
.ai-connections-copy .ai-connection-path { margin-top: 23px; }
.ai-connections-copy h4 { margin: 0 0 7px; color: var(--carbon-50); font-size: 16px; font-weight: 500; }
@media (max-width: 540px) {
  .ai-connections-body { padding: 16px; }
  .ai-connections-header { padding-inline: 16px; }
  .ai-connection-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}