/* The user's AI connecting through MCP (ai-connect.js) and its replies in the chat. Loaded before overlay.css. */
/* Fixed-height pop-up: the steps never change its height; the body scrolls */
.modal.cx-m { width: min(560px, calc(100vw - 24px)); height: min(560px, calc(100vh - 24px)); display: flex; flex-direction: column; overflow: hidden; }
.modal.cx-m .modal-b { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cx-b { flex: 1; min-height: 0; overflow: auto; }
.cx-n { text-align: center; margin-bottom: 8px; }
.cx-f { padding-top: 16px; gap: 8px; }
.cx-small { font-size: 12px; line-height: 16px; margin: 8px 0 0; }
.cx-where { font-size: 13px; line-height: 20px; margin: 4px 0 8px; }
.cx-code { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.cx-code pre { margin: 0; padding: 12px 88px 12px 12px; font: 400 12px/18px var(--mono); white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; color: var(--ink); }
.cx-code .btn { position: absolute; top: 8px; right: 8px; }
.cx-wait, .ai-wait { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.ai-wait { margin: 4px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.ai-wait > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-wait b { color: var(--ink); font-weight: 500; }
.ai-wait small { color: var(--ink-3); font-size: 12px; }
.ai-notes { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; line-height: 20px; }
.ai-app { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ai-app .grow { display: flex; flex-direction: column; min-width: 0; }
.ai-app small { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.tm-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 500; color: #9a4a1c; background: #fbe9dd; white-space: nowrap; }
:root[data-theme="dark"] .tm-badge { color: #f6a46c; background: rgba(224,104,47,.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tm-badge { color: #f6a46c; background: rgba(224,104,47,.16); } }
.page-h .tm-badge { align-self: center; }
.pw-h .tm-badge { margin-top: 8px; }
/* Height follows the step (no empty space under a short step); long setups scroll inside */
.modal.cx-m { height: auto; max-height: calc(100vh - 24px); }
.cx-f { border-top: 1px solid var(--line); margin-top: 20px; }
.cx-back { gap: 6px; padding-left: 10px; }
/* Connect step v4 (owner 2026-11-11: a direct Authorize; one "Claude", no Claude Code / Claude app switch): header, three numbered steps */
.cx-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.cx-face { position: relative; flex: none; }
.cx-face .tile { width: 48px; height: 48px; border-radius: 14px; }
.cx-ok { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 99px; background: #1f8a55; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--panel); }
.cx-ht { flex: 1; min-width: 0; } .cx-ht h3 { margin: 2px 0 4px; } .cx-ht .sub { margin: 0; }
.cx-count { flex: none; font-size: 12px; color: var(--ink-3); padding: 4px 10px; border-radius: 99px; background: var(--hover); margin-top: 4px; }
.cx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cx-steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.cx-steps li + li { border-top: 1px solid var(--line); }
.cx-steps li > i { flex: none; width: 24px; height: 24px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); margin-top: 1px; }
.cx-steps li.on > i { color: #fff; background: var(--ink); box-shadow: none; }
.cx-steps li.done > i { color: #fff; background: #e0682f; box-shadow: none; } .cx-steps li > i svg { width: 12px; height: 12px; }
.cx-steps li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-steps b { font-weight: 500; font-size: 14px; color: var(--ink); } .cx-steps small { font-size: 12.5px; color: var(--ink-3); line-height: 18px; }
.cx-steps li:not(.on):not(.done) b { color: var(--ink-2); }
.cx-steps .cx-code { margin-top: 8px; }
.cx-steps .cx-make { flex: none; align-self: center; gap: 6px; }
.modal.cx-m .cx-wait { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.cx-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: #c4541f; } .cx-live .spinner { width: 14px; height: 14px; }
.cx-steps .cx-make .spinner { width: 14px; height: 14px; }
.cx-steps li > div > small + small { margin-top: 6px; }
.cx-alt { margin-top: 12px; gap: 6px; color: var(--ink-3); padding-left: 8px; }
.cx-alt:hover { color: var(--ink); }
/* Desktop + Claude: Microooo's consent card inside the connect step (same words and look as the /oauth/authorize page) */
.cx-consent .cx-pair { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cx-consent .cx-pair svg { border-radius: 14px; flex: none; }
.cx-consent .cx-pair .tile { width: 48px; height: 48px; border-radius: 14px; }
.cx-dots { flex: none; width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 8px); opacity: .6; }
.cx-consent h3 { margin: 0 0 6px; }
.cx-consent .sub { margin: 0; }
.cx-chip { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0; padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--hover); font-size: 13px; color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; }
.cx-chip i { width: 24px; height: 24px; border-radius: 99px; background: var(--ink); color: var(--panel); display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--sans, Inter), sans-serif; font-style: normal; flex: none; }
.cx-can { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cx-can li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.cx-can li svg { flex: none; margin-top: 2px; color: #e0682f; }
.cx-allow { gap: 8px; }
.cx-allow .btn-primary .spinner { width: 14px; height: 14px; }
.cx-miss { color: #b4471b !important; } .cx-miss a { color: inherit; text-decoration: underline; }
.cx-chip-l { color: var(--ink-3); margin-right: 6px; } .cx-chip-l::after { content: " ·"; }