/* AI accounts reuse the Connect Wallet dialog (wallets.css) and add what accounts need:
   taglines, the TrustedRouter badge, the connect button and the key form. */
.ai-dialog { --ai-yellow: #ffd400; }
.ai-dialog.wallet-picker { width: min(520px, calc(100vw - 32px)); }
.ai-dialog:not(.wallet-picker) { width: min(560px, calc(100vw - 32px)); }
.ai-dialog .ai-provider { min-width: 0; gap: 16px; }
.ai-provider-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.ai-provider-text .wallet-provider-name { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ai-provider-tagline { overflow: hidden; color: #8f9398; font-size: 13px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.ai-badge { flex: none; padding: 3px 8px; border: 1px solid #5c4e1a; border-radius: 999px; background: #2b2610; color: var(--ai-yellow); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.ai-provider-arrow { display: grid; flex: none; place-items: center; color: #6e7378; }
.ai-dialog .wallet-provider:hover .ai-provider-arrow { color: #e8e8ea; }

/* A provider's own page */
.ai-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ai-hero .wallet-provider-icon { width: 56px; height: 56px; border-radius: 15px; }
.ai-hero > div { min-width: 0; }
.ai-dialog .ai-hero h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 650 20px/1.25 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.3px; }
.ai-hero p { margin: 3px 0 0; overflow-wrap: anywhere; color: #9a9ea3; font-size: 13px; }
.ai-intro { margin: 0 0 18px; color: #e3ded6; font-size: 15px; line-height: 1.55; }
.ai-status { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #49392d; border-radius: 12px; background: #29231f; color: #f5bd94; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-status[data-connected="true"] { border-color: #2f5541; background: #1b2921; color: #a7dfb9; }
.ai-steps { margin: 18px 0 0; padding: 15px 17px; border: 1px solid #36312d; border-radius: 14px; background: #221f1c; color: #b4ada5; font-size: 13px; line-height: 1.55; }
.ai-steps strong { display: block; margin-bottom: 6px; color: #f5ede4; font-size: 14px; font-weight: 650; }
.ai-steps ol { margin: 0; padding-left: 20px; }
.ai-steps li + li { margin-top: 4px; }
.ai-steps a, .ai-links a { color: #f5bd94; text-underline-offset: 3px; }
.ai-help { margin: 14px 0 0; color: #9a9ea3; font-size: 12px; line-height: 1.6; }
.ai-spent { margin: 10px 0 0; color: #b9bdc2; font-size: 12px; line-height: 1.5; }
.ai-spent:empty { display: none; }
.ai-usage-log { margin-top: 18px; padding: 14px; border: 1px solid #303030; border-radius: 12px; background: #202020; }
.ai-usage-log h4 { margin: 0 0 9px; color: #f5f2ec; font-size: 13px; }
.ai-usage-log p { margin: 0; color: #9a9ea3; font-size: 12px; }
.ai-usage-log ol { max-height: 250px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.ai-usage-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid #303030; font-size: 12px; }
.ai-usage-name { min-width: 0; overflow-wrap: anywhere; color: #dedad3; }
.ai-usage-date { color: #8f9398; white-space: nowrap; }
.ai-usage-cost { color: #f5f2ec; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; }

/* The main action: yellow, like the composer's Connect AI. */
.ai-dialog .ai-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; min-height: 56px; padding: 8px 18px 8px 9px;
  border: 1px solid #e5b800; border-radius: 12px; background: var(--ai-yellow); color: #1c1c1f; font: 700 16px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left; cursor: pointer; box-shadow: 0 3px 0 #a58300, 0 8px 20px #0005; transition: background .15s, transform .15s, box-shadow .15s;
}
.ai-dialog .ai-primary:hover:not(:disabled) { background: #ffe34d; transform: translateY(-1px); box-shadow: 0 4px 0 #a58300, 0 11px 22px #0006; }
.ai-dialog .ai-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #a58300, 0 3px 10px #0005; }
.ai-dialog .ai-primary:disabled { opacity: .6; cursor: wait; }
.ai-primary-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 8px; background: #1c1c1f; }
.ai-primary-icon img { display: block; width: 33px; height: 22px; object-fit: contain; }
.ai-primary-arrow { flex: none; margin-left: 3px; font: 700 22px/1 sans-serif; }
.ai-dialog .ai-primary-compact { min-height: 44px; padding: 10px 18px; font-size: 15px; box-shadow: 0 2px 0 #a58300; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ai-dialog .ai-secondary, .ai-dialog .ai-danger { min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 650; }
.ai-dialog .ai-secondary { border: 1px solid #3a3a3a; background: #262626; color: #e8e8ea; }
.ai-dialog .ai-secondary:hover:not(:disabled) { background: #303030; }
.ai-dialog .ai-danger { border: 1px solid #5b3a30; background: #2a201d; color: #ffb49d; }
.ai-dialog .ai-danger:hover:not(:disabled) { background: #3a2a25; }
.ai-dialog .ai-text-button { display: inline-block; margin-top: 12px; padding: 0; border: 0; background: none; color: #f5bd94; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Pasting a key */
.ai-key-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; margin-top: 20px; }
.ai-key-form label { grid-column: 1 / -1; color: #d9d4cc; font-size: 13px; font-weight: 650; }
.ai-key-form input {
  min-width: 0; height: 44px; box-sizing: border-box; padding: 0 13px; border: 1px solid #3a3a3a; border-radius: 11px; background: #111;
  color: #f5f2ec; font: 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ai-key-form input:focus { outline: none; border-color: var(--ai-yellow); box-shadow: 0 0 0 3px #ffd40033; }
.ai-error { margin: 10px 0 0; color: #ff9c89; font-size: 13px; line-height: 1.5; }
.ai-key-status { display: flex; align-items: center; gap: 10px; color: #b9bdc2; font-size: 13px; }

/* Connected accounts */
.ai-dialog .ai-section-title { margin: 0 0 10px; color: #8f9398; font: 700 11px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ai-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-metric { min-width: 0; padding: 14px 15px; border: 1px solid #2b2b2b; border-radius: 14px; background: #202020; }
.ai-metric > span:first-child { display: block; color: #9a9ea3; font-size: 12px; line-height: 1.3; }
.ai-metric strong { display: block; margin-top: 6px; color: #f5f2ec; font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ai-metric small { display: block; margin-top: 6px; color: #7c8085; font-size: 11px; line-height: 1.4; }
.ai-accounts { display: grid; gap: 8px; }
.ai-dialog .ai-accounts .ai-section-title { margin-bottom: 2px; }
.ai-dialog .ai-account { padding: 12px 12px 12px 14px; }
.ai-dialog .ai-account-open { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; }
.ai-dialog .ai-account-open:hover h3 { color: var(--ai-yellow); }
.ai-account-details { padding-left: 38px; color: #92969a; font-size: 12px; line-height: 1.5; }
.ai-account-details p { margin: 3px 0 0; overflow-wrap: anywhere; }
.ai-account-details .ai-spent { margin-top: 3px; }
.ai-state { flex: none; padding: 3px 9px; border-radius: 999px; background: #262626; color: #b9bdc2; font-size: 11px; font-weight: 650; white-space: nowrap; }
.ai-state.is-working { background: #16301f; color: #7fd79a; }
.ai-state.is-rejected { background: #3a1f1a; color: #ff9c89; }
.ai-state.is-limited, .ai-state.is-unreachable { background: #34290f; color: #f7c95c; }
.ai-state.is-checking { color: #e8e8ea; }
.ai-dialog .ai-manage { display: block; margin: 4px auto -8px; padding: 6px 12px; }
@media (max-width: 440px) {
  .ai-metrics { grid-template-columns: minmax(0, 1fr); }
  .ai-key-form { grid-template-columns: minmax(0, 1fr); }
  .ai-provider-tagline { white-space: normal; }
  .ai-usage-log li { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-usage-cost { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ai-dialog .ai-primary { transition: none; } }