/* ===========================================
   AI apps (MCP): a project's AI apps page, the Account page's AI apps card,
   the edit panel both open inline, and the consent page's choice blocks.
   Theme v6: neutral app monograms and level tags; color only for state.
   Reuses primitives.css (.page-head, .table, .cell-user, .avatar, .state,
   .micro, .link, .card-name/.card-desc) and the global buttons/toggles.
   =========================================== */

/* App monogram (no brand logos, no per-app tint) */
.ai-app-tile {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--label-1);
    font: 600 13px var(--font-mono);
}
.ai-app-tile.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
.ai-app-tile.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 9.5px; }

/* Access level on the consent page's level cards: one colour per level */
.ai-level { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.ai-level-read { color: var(--c-info-bold); }
.ai-level-moderate { color: var(--c-warning-bold); }
.ai-level-settings { color: var(--c-success-bold); }
.ai-level-moderate_settings { color: var(--c-secondary-bold); }
/* …and everywhere else a neutral tag (level() in _ai_apps.html) */
.ai-level-tag { text-transform: none; }
.ai-note-hit { color: var(--red); font-weight: 500; }
.ai-note-warn { color: var(--amber); font-weight: 500; }
.ai-sub-never { color: var(--label-3); }
.ai-empty { margin: 0; padding: 16px; border: 1px dashed var(--hairline); border-radius: var(--r-md); color: var(--label-3); font-size: 13px; text-align: center; }

/* ---------- AI apps page ---------- */
.ai-apps-page { display: flex; flex-direction: column; gap: var(--gap); }
.ai-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--surface-1);
    color: var(--label-2); font-size: 13.5px;
}
.ai-alert b { color: var(--label-1); font-weight: 500; }
.ai-alert.is-bad { background: var(--red-tint); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.ai-alert.is-warn { background: var(--amber-tint); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.ai-alert form { margin: 0; flex-shrink: 0; }
.ai-alert > .btn { flex-shrink: 0; }

/* Connected to this project */
.ai-conn-card, .ai-apps-grid > .overview-card { display: flex; flex-direction: column; gap: 10px; }
.ai-connections td:nth-child(2), .ai-connections td:nth-child(4), .ai-connections td:last-child { white-space: nowrap; }
.ai-connections .cell-user b { font-weight: 500; }
.ai-connections .ai-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--label-3); }
.ai-row-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.ai-row-actions form { margin: 0; }
.ai-row-actions [aria-expanded="true"] { background: var(--fill-2); }
.ai-conn-row:has(+ .ai-edit-row .ai-edit:not([hidden])) td { background: var(--fill-1); }
.table tbody tr.ai-edit-row:hover td,
.ai-edit-row td { padding: 0 0 12px; border-top: 0; background: var(--fill-1); }
.ai-edit-row:has(.ai-edit[hidden]) { display: none; }

/* Connect | Recent calls */
.ai-apps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--gap); align-items: start; }
.ai-apps-grid > * { min-width: 0; }
.ai-url { display: flex; gap: 8px; }
.ai-url code.input { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-1); font: 400 13px var(--font-mono); line-height: 30px; }
.ai-url .btn { flex-shrink: 0; margin: 0; }
.ai-setup { padding-top: 10px; border-top: 1px solid var(--hairline); }
.ai-setup summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; color: var(--label-1); font-size: 13.5px; font-weight: 500; }
.ai-setup summary::-webkit-details-marker { display: none; }
.ai-setup summary .btn-chev { transform: rotate(-90deg); transition: transform var(--dur-fast); }
.ai-setup[open] summary .btn-chev { transform: none; }
.ai-steps { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding-left: 18px; color: var(--label-2); font-size: 13px; line-height: 1.5; }
.ai-steps b { color: var(--label-1); font-weight: 500; }
.ai-snippet {
    margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--bg);
    color: var(--label-2); font: 400 12px/1.55 var(--font-mono);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.ai-apps-grid > .ai-calls-card { gap: 6px; }
.ai-calls { display: flex; flex-direction: column; margin-top: 6px; }
.ai-call {
    display: grid;
    grid-template-columns: 96px 24px minmax(0, 1fr) auto 64px;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--hairline);
    font-size: 13.5px;
}
.ai-call-time { color: var(--label-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-call-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-body); }
.ai-call-what b { color: var(--label-1); font-weight: 500; }
.ai-call-what code { padding: 0; background: none; color: var(--label-3); font: 400 12px var(--font-mono); }
.ai-call.undone .ai-call-what { color: var(--label-3); text-decoration: line-through; }
.ai-call.undone .ai-call-what b { color: var(--label-3); }
.ai-call-status { text-align: right; font-size: 12.5px; white-space: nowrap; }
.ai-call-undo { text-align: right; }
.ai-call-undo form { margin: 0; }
.ai-card-foot { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--hairline); }

/* ---------- The edit panel (inline, Account + AI apps page) ---------- */
.ai-edit form { display: flex; flex-direction: column; gap: 16px; margin: 0 0 4px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg); }
.ai-edit-head { display: flex; align-items: center; gap: 10px; }
.ai-edit-head b { display: block; color: var(--label-1); font-size: 14px; font-weight: 600; }
.ai-edit-head .when { display: block; }
.ai-edit-sec { display: flex; flex-direction: column; gap: 8px; }
.ai-edit .ai-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; border: 0; border-radius: 0; overflow: visible; }
.ai-edit .ai-project { gap: 8px; min-width: 0; height: 28px; padding: 0; border: 0; color: var(--label-2); font-size: 13px; }
.ai-edit .ai-project:has(input:checked) { color: var(--label-1); }
.ai-edit .ai-project > span:not(.ai-project-role) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-edit .ai-project .platform-icon { width: 13px; height: 13px; }
.ai-edit .ai-project-role {
    flex-shrink: 0; margin-left: 0; height: 17px; padding: 0 6px;
    display: inline-flex; align-items: center;
    border-radius: var(--r-xs); background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--label-2); font-size: 11.5px;
}
/* Level cards: one choice outlined and checked, the radio itself hidden */
.ai-edit .ai-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ai-edit .ai-level-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: transparent; }
.ai-edit .ai-level-card:hover { border-color: var(--line-strong); }
.ai-edit .ai-level-card input { position: absolute; opacity: 0; pointer-events: none; }
.ai-edit .ai-level-card .ai-level { color: var(--label-2); font-size: 13px; font-weight: 500; white-space: normal; }
.ai-edit .ai-level-card small { min-width: 0; color: var(--label-3); font-size: 12px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.ai-edit .ai-level-card:has(input:checked) { padding-right: 36px; border-color: var(--sel-line); background: var(--sel-bg); }
.ai-edit .ai-level-card:has(input:checked) .ai-level { color: var(--label-1); font-weight: 600; }
.ai-edit .ai-level-card:has(input:checked) small { color: var(--label-2); }
.ai-edit .ai-level-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-edit .ai-level-card:has(input:checked)::after {
    content: '✓';
    position: absolute; top: 10px; right: 10px;
    display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
    background: var(--label-1); color: var(--bg); font-size: 11px; font-weight: 700;
}

/* Settings rows: text left, control right */
.ai-setting { display: flex; align-items: center; gap: 24px; padding: 13px 0; border-top: 1px solid var(--hairline); }
.ai-setting-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-setting-text b { color: var(--label-1); font-weight: 500; }
.ai-setting-text > span { max-width: 70ch; color: var(--label-2); font-size: 13px; }
.ai-setting-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ai-range { display: flex; align-items: center; gap: 10px; }
.ai-range input[type="range"] { width: 160px; margin: 0; }
.ai-range output { min-width: 6.5rem; text-align: right; color: var(--label-1); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ai-limit:has(.toggle-switch input:not(:checked)) .ai-range { opacity: 0.4; pointer-events: none; }
/* A native select drawn as a value button: "Unchanged (Jan 26) ▾" */
.ai-value { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: 0; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--fill-1); cursor: pointer; }
.ai-value:hover { background: var(--fill-2); }
.ai-value:focus-within { border-color: var(--accent); }
.ai-value select { all: unset; color: var(--label-1); font: 500 13px var(--font); cursor: pointer; }
.ai-value select option { background: var(--surface-2); color: var(--label-1); }
.ai-edit-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); }

/* Choice blocks (choose_projects / choose_level): the consent page's look; the edit
   panel restyles them under .ai-edit below. */

.ai-choices h4 {
    margin: 1rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.ai-choices h4:first-child { margin-top: 0; }
.ai-projects { display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; }
.ai-project {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.86rem;
    color: var(--text-primary);
    cursor: pointer;
}
.ai-project:first-child { border-top: none; }
.ai-project input { margin: 0; flex-shrink: 0; }
.ai-project .platform-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ai-project-role { margin-left: auto; font-size: 0.74rem; color: var(--text-muted); text-transform: capitalize; }
.ai-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.ai-level-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.65rem;
    align-items: start;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    cursor: pointer;
}
.ai-level-card input { grid-row: span 2; margin: 0.2rem 0 0; }
.ai-level-card .ai-level { font-size: 0.88rem; }
.ai-level-card small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.ai-level-card:has(input:checked) { border-color: var(--c-primary-dim); background: var(--c-primary-ghost); }
.ai-superadmin {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.65rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--c-special-dim);
    border-radius: var(--r-md);
    cursor: pointer;
}
.ai-superadmin input { grid-row: span 2; margin: 0.2rem 0 0; }
.ai-superadmin b { font-size: 0.88rem; color: var(--text-primary); font-weight: 600; }
.ai-superadmin small { color: var(--text-muted); font-size: 0.78rem; }
.ai-expiry { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.ai-expiry select { width: auto; min-width: 13rem; margin: 0; }

/* Consent page */
.ai-consent { width: min(560px, 100%); margin: 2rem auto; padding: 1.6rem 1.7rem; box-sizing: border-box; }
.ai-consent-pair { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 1rem; }
.ai-consent-pair img { width: 40px; height: 40px; }
.ai-consent-pair .dots { color: var(--text-faint); letter-spacing: 0.25em; }
.ai-consent h1 { margin: 0; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--text-primary); }
.ai-consent .ai-consent-as { margin: 0.3rem 0 1.2rem; text-align: center; font-size: 0.82rem; color: var(--text-muted); }
.ai-consent-note { margin: 1rem 0 0; padding: 0.6rem 0.75rem; border-radius: var(--r-md); background: var(--surface-alt); color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; }
.ai-consent-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.2rem; }
.ai-consent-actions .btn { flex-shrink: 0; margin: 0; }

@media (max-width: 1000px) {
    .ai-apps-grid { grid-template-columns: 1fr; }
    .ai-edit .ai-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .ai-levels, .ai-edit .ai-levels { grid-template-columns: 1fr; }
    .ai-alert { flex-wrap: wrap; }
    .ai-connections-scroll { overflow-x: auto; }
    .ai-call { grid-template-columns: 2.9rem 24px minmax(0, 1fr) auto auto; gap: 8px; }
    .ai-call-what code, .ai-call-date { display: none; }
    .ai-setting { flex-direction: column; align-items: stretch; gap: 10px; }
    .ai-setting-control { justify-content: space-between; }
    .ai-range input[type="range"] { width: auto; flex: 1; }
    .ai-consent { margin: 0.8rem auto; padding: 1.1rem 1rem; }
    .ai-consent-actions .btn { flex: 1; }
}