.portal > .comp.as {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;

    & .as-head {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 6px 14px;
        border-bottom: 1px solid var(--p-edge-soft);

        & b {
            font-size: 13px;
            font-weight: 600;
        }

        & .grow {
            flex: 1;
        }
    }

    & .as-close {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: calc(6px * var(--p-round));
        background: transparent;
        color: var(--p-ink-3);
        cursor: pointer;

        &:hover {
            background: color-mix(in srgb, var(--p-tint) 10%, transparent);
            color: var(--p-ink);
        }
    }

    & .as-stage {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    & .as-body {
        position: relative;
        z-index: 1;
        display: grid;
        flex: 1;
        align-content: start;
        gap: 14px;
        min-height: 0;
        padding: 14px;
        overflow-y: auto;
    }

    & .as-face {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        opacity: 0.35;
        pointer-events: none;
        transition: opacity 0.6s ease;

        &.gone {
            opacity: 0;
        }
        font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    }

    & .as-start {
        display: grid;
        gap: 12px;
    }

    & .as-intro {
        margin: 0;
        color: var(--p-ink-3);
        line-height: 1.55;
    }

    & .as-sugg {
        display: grid;
        gap: 6px;
    }

    & .as-chip {
        padding: 8px 12px;
        border: 1px solid var(--p-edge);
        border-radius: calc(8px * var(--p-round));
        background: var(--p-panel);
        color: var(--p-ink);
        font: inherit;
        text-align: left;
        cursor: pointer;

        &:hover:not(:disabled) {
            border-color: var(--p-tint);
            background: color-mix(in srgb, var(--p-tint) 6%, transparent);
        }

        &:disabled {
            color: var(--p-ink-5);
            cursor: default;
        }
    }

    & .as-log {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;

        &:empty {
            display: none;
        }

        & li {
            display: grid;
            gap: 6px;
        }

        & .who {
            color: var(--p-ink-5);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        & .say {
            margin: 0;
            line-height: 1.55;
            white-space: pre-line;
            overflow-wrap: anywhere;
        }

        & .me .say {
            padding: 8px 12px;
            border-radius: calc(8px * var(--p-round));
            background: color-mix(in srgb, var(--p-tint) 10%, transparent);
        }

        & .busy .say {
            color: var(--p-ink-5);
        }

        & .bad .say {
            color: color-mix(in srgb, var(--p-amber) 80%, var(--p-ink));
        }

        & .src {
            display: grid;
            gap: 2px;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px;

            & a {
                overflow-wrap: anywhere;
            }
        }
    }

    & .as-notice {
        margin: 0;
        padding: 8px 14px;
        border-top: 1px solid var(--p-edge-soft);
        background: color-mix(in srgb, var(--p-amber) 10%, transparent);
        color: color-mix(in srgb, var(--p-amber) 80%, var(--p-ink));
        font-size: 12px;
        line-height: 1.5;
    }

    & .as-beta {
        margin: 0;
        padding: 8px 14px 0;
        border-top: 1px solid var(--p-edge-soft);
        color: var(--p-ink-5);
        font-size: 11px;
        line-height: 1.5;
    }

    & .as-compose {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        margin: 0;
        padding: 10px 14px 14px;

        & textarea {
            flex: 1;
            min-width: 0;
            resize: vertical;
        }
    }

    @media (max-width: 760px) {
        &.open:not([hidden]) {
            position: fixed;
            z-index: 30;
            inset: 0;
            display: flex;
            border-left: 0;
        }
    }
}