:root {
    --pemm-assist-bg: #101923;
    --pemm-assist-fg: #f7fbff;
    --pemm-assist-muted: #aebdca;
    --pemm-assist-border: rgba(91, 213, 188, 0.42);
    --pemm-assist-accent: var(--brand-teal, var(--teal, #2dd4bf));
    --pemm-assist-shadow: 0 16px 44px rgba(0, 0, 0, 0.34), 0 4px 14px rgba(0, 0, 0, 0.2);
}

html[data-theme='light'] {
    --pemm-assist-bg: #ffffff;
    --pemm-assist-fg: #172230;
    --pemm-assist-muted: #5d6a78;
    --pemm-assist-border: rgba(13, 148, 136, 0.35);
    --pemm-assist-shadow: 0 16px 42px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.1);
}

.pemm-assist {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    width: 0;
    height: 0;
    pointer-events: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    text-align: start;
}

.pemm-assist[hidden] {
    display: none !important;
}

.pemm-assist__surface {
    position: fixed;
    left: 0;
    top: 0;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 8px 10px;
    color: var(--pemm-assist-fg);
    background: var(--pemm-assist-bg);
    border: 1px solid var(--pemm-assist-border);
    border-radius: 8px;
    box-shadow: var(--pemm-assist-shadow);
    white-space: normal;
    overflow-wrap: anywhere;
    opacity: 0;
    transform: translateY(3px) scale(0.985);
    transform-origin: center;
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
}

.pemm-assist.is-visible .pemm-assist__surface {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pemm-assist__surface::after {
    content: '';
    position: absolute;
    left: var(--pemm-assist-arrow-x, 18px);
    width: 8px;
    height: 8px;
    background: var(--pemm-assist-bg);
    border: solid var(--pemm-assist-border);
    transform: translateX(-50%) rotate(45deg);
}

.pemm-assist[data-placement='top'] .pemm-assist__surface::after {
    bottom: -5px;
    border-width: 0 1px 1px 0;
}

.pemm-assist[data-placement='bottom'] .pemm-assist__surface::after {
    top: -5px;
    border-width: 1px 0 0 1px;
}

.pemm-assist[data-placement='right'] .pemm-assist__surface::after,
.pemm-assist[data-placement='left'] .pemm-assist__surface::after {
    top: var(--pemm-assist-arrow-y, 18px);
    left: auto;
    transform: translateY(-50%) rotate(45deg);
}

.pemm-assist[data-placement='right'] .pemm-assist__surface::after {
    left: -5px;
    border-width: 0 0 1px 1px;
}

.pemm-assist[data-placement='left'] .pemm-assist__surface::after {
    right: -5px;
    border-width: 1px 1px 0 0;
}

.pemm-assist[data-kind='popover'] .pemm-assist__surface {
    width: min(360px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 24px));
    padding: 0;
    overflow: auto;
    border-top: 2px solid var(--pemm-assist-accent);
    border-radius: 10px;
    pointer-events: auto;
}

.pemm-assist__title {
    display: block;
    padding: 11px 13px 8px;
    color: var(--pemm-assist-fg);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.pemm-assist__title:empty {
    display: none;
}

.pemm-assist__content {
    color: inherit;
}

.pemm-assist[data-kind='popover'] .pemm-assist__content {
    padding: 0 13px 12px;
    color: var(--pemm-assist-muted);
}

.pemm-assist[data-kind='popover'] .pemm-assist__title:empty + .pemm-assist__content {
    padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .pemm-assist__surface {
        transition: none;
    }
}

@media (forced-colors: active) {
    .pemm-assist__surface {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    .pemm-assist__surface::after {
        display: none;
    }
}