/* ─── AI access tab (/account/ai-access/) ────────────────────────────────────
   Loaded by the shell after app.css. Only theme variables: both themes work
   without overrides. Prefix: .ai-  (form pieces reuse .acc-* of account.css) */

/* ── New token (shown once) ──────────────────────────────── */
.ai-new { border-color: var(--color-primary-light); }
.ai-new__icon { color: var(--color-primary); }
.ai-warn {
    display:          flex;
    gap:              var(--space-2);
    align-items:      flex-start;
    margin:           0 0 var(--space-4);
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-warning-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-warning-bg);
    color:            var(--color-warning-text);
    font-size:        var(--font-size-sm);
}
.ai-warn .icon { flex: none; font-size: 18px; }
.ai-secret {
    display:          flex;
    flex-wrap:        wrap;
    align-items:      center;
    gap:              var(--space-3);
    padding:          var(--space-3);
    border:           1px dashed var(--color-border-strong);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
}
.ai-secret__value {
    flex:            1;
    min-width:       0;
    font-family:     var(--font-family-mono);
    font-size:       var(--font-size-sm);
    overflow-wrap:   anywhere;
    user-select:     all;
}
.ai-steps { margin: 0 0 var(--space-4); padding-left: var(--space-5); font-size: var(--font-size-sm); }
.ai-steps li { margin-bottom: var(--space-2); }
.ai-url { overflow-wrap: anywhere; }
.ai-code {
    margin:           0;
    padding:          var(--space-3) var(--space-4);
    overflow-x:       auto;
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
    border:           1px solid var(--color-border);
    font-family:      var(--font-family-mono);
    font-size:        var(--font-size-xs);
    white-space:      pre;
}

/* ── Create form: scopes only for "limited" (no JS) ──────── */
.ai-scopes { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.ai-form:has(input[name="mode"][value="full"]:checked) .ai-scopes { display: none; }
.ai-scopes__list {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   var(--space-2);
    margin:                0;
    padding:               0;
    list-style:            none;
}
.ai-scope {
    display:          flex;
    gap:              var(--space-3);
    align-items:      flex-start;
    height:           100%;
    padding:          var(--space-3);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-input-bg);
    cursor:           pointer;
}
.ai-scope:has(input:checked) { border-color: var(--color-primary-light); background-color: var(--color-primary-lighter); }
.ai-scope:has(input:disabled) { cursor: default; }
.ai-scope input { margin-top: 3px; flex: none; }
.ai-scope__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ai-scope__code { align-self: flex-start; font-size: var(--font-size-xs); }
.ai-scope__hint { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ── Token list ──────────────────────────────────────────── */
.ai-tablewrap { overflow-x: auto; }
.ai-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.ai-table th,
.ai-table td {
    padding:        var(--space-3) var(--space-4);
    border-bottom:  1px solid var(--color-border);
    text-align:     left;
    vertical-align: top;
}
.ai-table th {
    background-color: var(--color-table-header-bg);
    color:            var(--color-table-header-text);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-semibold);
}
.ai-table tr:last-child td { border-bottom: none; }
.ai-table tr.is-expired td { color: var(--color-text-light); }
.ai-table__name { display: block; overflow-wrap: anywhere; }
.ai-mode-badge { margin-top: var(--space-1); }
.ai-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ai-chip {
    padding:          1px var(--space-2);
    border-radius:    var(--radius);
    background-color: var(--color-badge-default-bg);
    color:            var(--color-badge-default-text);
    font-size:        var(--font-size-xs);
    white-space:      nowrap;
}
.ai-nowrap { white-space: nowrap; }
.ai-expired { color: var(--color-error-text); font-weight: var(--font-weight-medium); }
.ai-actions form { margin: 0; }
.ai-danger { color: var(--color-error); }

/* ── Preview of the entry page ───────────────────────────── */
.ai-preview { overflow-x: auto; }

@media (max-width: 640px) {
    .ai-table th:nth-child(3),
    .ai-table td:nth-child(3) { display: none; }
}