/* =====================================================================
   "Use with AI" — the page-level AI actions menu.
   ---------------------------------------------------------------------
   Built on <details>/<summary>, so it opens and closes with zero JS;
   use-with-ai.js only adds clipboard copy and outside-click closing.
   Floating at the inline end so it never fights a hero or a wizard.
   ===================================================================== */
.uwa {
    position: fixed;
    inset-inline-end: 18px;
    inset-block-end: 18px;
    z-index: 60;
    font-family: var(--font-body, system-ui), sans-serif;
}
.uwa[open] { z-index: 70; }

/* ---- the trigger ---------------------------------------------------- */
.uwa-btn {
    display: inline-flex; align-items: center; gap: 8px;
    list-style: none; cursor: pointer; user-select: none;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #3d18bf, #2f6bff);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 10px 28px rgba(31, 10, 82, .34);
    transition: transform .16s var(--ease-standard, ease), box-shadow .16s ease;
}
.uwa-btn::-webkit-details-marker { display: none; }   /* Safari's arrow */
.uwa-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(31, 10, 82, .42); }
.uwa-btn:active { transform: scale(.98); }
.uwa-btn:focus-visible { outline: 2px solid #7fecf0; outline-offset: 2px; }
.uwa-caret { transition: transform .18s ease; opacity: .85; }
.uwa[open] .uwa-caret { transform: rotate(180deg); }

/* ---- the panel ------------------------------------------------------ */
.uwa-menu {
    position: absolute;
    inset-block-end: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(330px, calc(100vw - 36px));
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e6e3d9);
    border-radius: 16px;
    padding: 7px;
    box-shadow: 0 24px 60px rgba(16, 12, 44, .26);
    animation: uwa-in .16s var(--ease-entrance, ease-out);
}
@keyframes uwa-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.uwa-item {
    display: flex; align-items: flex-start; gap: 11px;
    width: 100%; text-align: start;
    padding: 9px 10px; border: 0; border-radius: 11px;
    background: transparent; cursor: pointer;
    text-decoration: none; color: inherit;
    font: inherit;
}
.uwa-item:hover { background: var(--bg-subtle, #f3f1ea); }
.uwa-item:focus-visible { outline: 2px solid #3d18bf; outline-offset: -2px; }

.uwa-ic {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--bg-subtle, #f3f1ea);
    color: var(--fg, #100c2c);
    font-size: 13px; font-weight: 800; direction: ltr;
}
.uwa-ic-chatgpt    { background: #10a37f; color: #fff; }
.uwa-ic-claude     { background: #d97757; color: #fff; }
.uwa-ic-perplexity { background: #20808d; color: #fff; }
.uwa-ic-google     { background: #4285f4; color: #fff; }
/* Brand logos from SVGL on a white tile (replaced the coloured initials, 2026-10-05). */
.uwa-ic.uwa-ic-logo { background: #fff; border: 1px solid rgba(20,8,50,.1); box-shadow: 0 1px 2px rgba(20,8,50,.06); }

.uwa-txt { min-width: 0; }
.uwa-txt b {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--fg, #100c2c); line-height: 1.4;
}
.uwa-txt i {
    display: block; font-style: normal; font-size: 11.5px;
    color: var(--fg-tertiary, #7c7868); line-height: 1.5; margin-top: 1px;
}
.uwa-ext { font-size: 10px; opacity: .55; }
.uwa-sep { height: 1px; background: var(--line, #e6e3d9); margin: 6px 8px; }

/* copy feedback */
.uwa-item.is-done .uwa-txt b { color: #0a6e4d; }
.uwa-item.is-fail .uwa-txt b { color: #d83a52; }



@media (max-width: 560px) {
    .uwa { inset-inline-end: 12px; inset-block-end: 12px; }
    .uwa-btn { padding: 8px 13px; font-size: 12px; }
    .uwa-btn span { display: none; }        /* icon-only pill on phones */
    .uwa-btn .uwa-caret { display: none; }
    .uwa-menu { width: min(320px, calc(100vw - 24px)); }
}

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

/* ---- "Ask AI about me": people first, agents second --------------- */
.uwa-group {
    padding: 6px 10px 4px; font-size: 11px; font-weight: 700;
    letter-spacing: .02em; color: var(--fg-tertiary, #7c7868);
}
.uwa-group--quiet { padding-top: 2px; }
.uwa-item--quiet { padding-block: 6px; opacity: .78; }
.uwa-item--quiet .uwa-ic { width: 24px; height: 24px; border-radius: 7px; }
.uwa-item--quiet .uwa-txt b { font-size: 12px; font-weight: 600; }
.uwa-item--quiet:hover { opacity: 1; }