/* Shared floating "← Tutor AI" button for every project page: fixed to the
   right side of the screen, above page content. Variants: --dark for dark
   pages, --below-nav for pages that show the site navbar (so it doesn't sit
   on the navbar's links). Hidden in ?embed=1 mode (Exploratorium iframes). */
.tai-fab {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9050; /* above page content and the share FAB (9000), below flash messages (9999) and modals */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: #FFFFFF;
    color: #7A2650;
    border: 1px solid #E3DFD9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    font: 600 14px/1 'IBM Plex Sans', -apple-system, sans-serif;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.tai-fab:hover,
.tai-fab:focus-visible {
    background: #7A2650;
    color: #FFFFFF;
}
.tai-fab--dark {
    background: #14101A;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.28);
}
.tai-fab--dark:hover,
.tai-fab--dark:focus-visible {
    background: #96305F;
}
.tai-fab--below-nav { top: 92px; }

/* Phones: arrow only, so it covers as little of the page as possible. */
@media (max-width: 600px) {
    .tai-fab { width: 44px; padding: 0; justify-content: center; }
    .tai-fab .tai-fab__label {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .tai-fab--below-nav { top: 84px; }
    /* Keep long page titles from running underneath the button. */
    body:not(.embedded) h1 { padding-left: 56px; padding-right: 56px; box-sizing: border-box; }
}

.embedded .tai-fab,
.embedded .share-fab,
.embedded .share-fab__toast { display: none; }