/* Connect inside the chat (public/connect-in-chat.js, plan 13 G9): the
   agent's connect card with the provider's steps, a masked field and Save
   securely. Grayscale only; red is for a refused token. Rule zero: nothing
   small, few words; the steps read at the chat's own size. */
.cic-card { max-width:560px; margin-top:var(--space-3); padding:var(--card-pad); border:1px solid var(--line-2); border-radius:16px; background:var(--panel); display:flex; flex-direction:column; gap:var(--space-3); box-sizing:border-box; }
.cic-head { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.cic-logo { flex:none; display:grid; place-items:center; width:32px; height:32px; }
.cic-logo > * { max-width:32px; max-height:32px; }
.cic-title { min-width:0; font-size:var(--text-xl); font-weight:600; color:var(--ink); line-height:var(--leading-tight); }
.cic-steps { margin:0; padding:0; list-style:none; counter-reset:cic; display:flex; flex-direction:column; gap:var(--space-2); }
.cic-steps li { counter-increment:cic; position:relative; padding-left:26px; font-size:var(--chat-text-size); line-height:var(--leading); color:var(--ink-2); overflow-wrap:anywhere; }
.cic-steps li::before { content:counter(cic); position:absolute; left:0; top:0; width:16px; text-align:right; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.cic-steps strong { font-weight:600; color:var(--ink); }
.cic-steps a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-3); text-underline-offset:3px; }
.cic-steps a:hover { text-decoration-color:currentColor; }
.cic-steps code { font-size:0.88em; }
.cic-fields { display:flex; flex-direction:column; gap:var(--space-2); }
.cic-id { display:flex; flex-direction:column; gap:6px; font-size:var(--text-md); color:var(--ink-2); }
.cic-row { display:flex; gap:var(--space-2); align-items:stretch; }
.cic-card input { width:100%; min-width:0; height:var(--control-h-lg); padding:0 12px; box-sizing:border-box; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-input); color:var(--ink); font-size:var(--text-lg); outline:none; }
.cic-card input::placeholder { color:var(--ink-3); }
.cic-card input:focus { border-color:var(--line-3); box-shadow:0 0 0 3px var(--hover-2); }
.cic-card input[readonly] { color:var(--ink-3); }
.cic-row .cic-secret { flex:1; }
.cic-row .cic-save { flex:none; height:var(--control-h-lg); padding:0 var(--space-4); font-size:var(--text-md); white-space:nowrap; }
.cic-save:disabled { opacity:.45; cursor:default; }
.cic-error { margin:0; font-size:var(--text-md); line-height:var(--leading); color:var(--red); }
.cic-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-4); flex-wrap:wrap; }
.cic-note { margin:0; display:flex; align-items:center; gap:6px; font-size:var(--text-md); color:var(--ink-3); line-height:var(--leading); }
.cic-note svg { flex:none; width:15px; height:15px; }
.cic-links { display:flex; align-items:center; gap:var(--space-4); font-size:var(--text-md); }
.cic-links a { color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-3); text-underline-offset:3px; }
.cic-later { padding:0; border:0; background:none; color:var(--ink-2); font:inherit; cursor:pointer; }
.cic-later:hover, .cic-links a:hover { color:var(--ink); }
.cic-later[hidden] { display:none; }
@media (max-width:600px) {
  .cic-card { max-width:none; padding:var(--space-4); border-radius:16px; gap:var(--space-4); }
  .cic-title { font-size:19px; }
  .cic-steps li, .cic-id, .cic-error, .cic-note, .cic-links { font-size:17px; }
  .cic-row { flex-direction:column; }
  .cic-row .cic-secret { flex:none; }
  .cic-row .cic-save { width:100%; justify-content:center; height:var(--tap-min); font-size:17px; }
  .cic-card input { height:var(--tap-min); font-size:17px; } /* 16px+: iOS doesn't zoom the page */
  .cic-links a, .cic-later { min-height:var(--tap-min); display:inline-flex; align-items:center; }
}