.trailtrack-ai {
    --ai-orange: #ff641f;
    --ai-ink: #111827;
    position: fixed;
    z-index: 170;
    right: 24px;
    bottom: 92px;
    width: auto;
    max-width: none;
    overflow: visible;
    color: var(--ai-ink);
    font-family: inherit;
}

.trailtrack-ai [hidden] {
    display: none !important;
}

.trailtrack-ai__toggle {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 64px);
    padding: 0 15px;
    border: 1px solid rgba(255, 100, 31, .28);
    border-radius: 8px;
    background: #fff;
    color: var(--ai-ink);
    box-shadow: 0 9px 30px rgba(17, 24, 39, .16);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.trailtrack-ai__toggle:hover,
.trailtrack-ai__toggle[aria-expanded="true"] {
    border-color: var(--ai-orange);
    background: var(--ai-orange);
    color: #fff;
}

.trailtrack-ai__toggle[aria-busy="true"] {
    cursor: wait;
    opacity: .72;
}

.trailtrack-ai__glyph {
    --trailtrack-ai-glyph: none;
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--trailtrack-ai-glyph) center / contain no-repeat;
    mask: var(--trailtrack-ai-glyph) center / contain no-repeat;
}

.trailtrack-ai__glyph--brand {
    --trailtrack-ai-glyph: url('/static/img/logoicon.svg');
}

.trailtrack-ai__toggle > .trailtrack-ai__glyph--brand {
    width: 20px;
    height: 20px;
}

@media (max-width: 767px) {
    .trailtrack-ai {
        right: var(--map-edge, 10px);
        bottom: calc(var(--map-bottom-safe, 86px) + 8px);
    }

    .trailtrack-ai__toggle {
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .trailtrack-ai__toggle span:not(.trailtrack-ai__glyph) {
        display: none;
    }
}