/* "Ask AI about EDII" footer block.
   Markup is generated by tools/build-ask-ai.js — edit the config there, not the pages.
   Colours come from the existing footer tokens (index/edii-shell) and from the footer's
   own text colour via `inherit`; no new colours are introduced. All footers are dark. */

.askai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 0 0 22px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--edii-line-d, var(--line-d, rgba(234, 240, 249, .10)));
    font-family: var(--edii-body, var(--body, "Figtree", system-ui, -apple-system, sans-serif));
    color: inherit;
    text-align: left;
}

.askai .askai-label {
    margin: 0;
    font-family: var(--edii-mono, var(--mono, "Spline Sans Mono", ui-monospace, Menlo, monospace));
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: inherit;
    opacity: .85;
}

.askai .askai-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.askai .askai-row li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.askai .askai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 100px;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.askai .askai-btn img {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    opacity: .8;
    transition: opacity .15s ease;
}

.askai .askai-btn:hover,
.askai .askai-btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: inherit;
    transform: translateY(-1px);
}

.askai .askai-btn:hover img,
.askai .askai-btn:focus-visible img { opacity: 1; }

.askai :focus-visible {
    outline: 2px solid var(--edii-leaf, var(--leaf, #7FB1FF));
    outline-offset: 3px;
}

/* Wraps to 2-3 buttons per row on phones. */
@media (max-width: 640px) {
    .askai { display: block; }
    .askai .askai-label { margin-bottom: 10px; }
    .askai .askai-btn { padding: 8px 12px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .askai .askai-btn,
    .askai .askai-btn img { transition: none; }
    .askai .askai-btn:hover,
    .askai .askai-btn:focus-visible { transform: none; }
}

@media print { .askai { display: none; } }