/* ── SVG helpers ── */
.svg-theme-color    { fill: var(--current-text-color); }
.svg-theme-blue     { fill: var(--current-blue-color); }
.svg-theme-red      { fill: var(--current-red-color); }
.svg-theme-green    { fill: var(--current-green-color); }
.svg-theme-purple   { fill: var(--current-purple-color); }
.svg-theme-yellow   { fill: var(--current-yellow-color); }

.bg-primary   { background-color: var(--current-background); }
.bg-secondary { background-color: var(--current-secondary-background); }
.bg-tertiary  { background-color: var(--current-tertiary-background); }
.bg-quaternary { background-color: var(--current-quaternary-background); }
.bg-quinary   { background-color: var(--current-quinary-background); }
.bg-senary    { background-color: var(--current-senary-background); }

.bg-blue { background-color: var(--current-blue-color); }
.bg-blue-inverse { background-color: var(--current-blue-color-inverse); }

.bg-red { background-color: var(--current-red-color); }
.bg-red-inverse { background-color: var(--current-red-color-inverse); }

.bg-fade-purple { background-color: var(--current-fade-purple-color); }

button, [role="button"] {
    cursor: pointer;
}

.border-subtle {
    border: 1px solid #7272722b;
}

.app-border {
    border: 1px solid #7272722b;
}

.app-border-top {
    border-top: 1px solid #7272722b;
}

.glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-input {
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--current-secondary-background);
    border: 1px solid #7272722b;
    color: var(--current-text-color);
    font-size: 0.875rem;
    transition: border-color 0.15s;
    outline: none;
}

.app-input:focus {
    border-color: var(--current-purple-color);
}

.app-btn-primary {
    border: 1px solid #7272722b;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 0.15s;
}

.app-btn-primary:hover {
    opacity: 0.85;
}

#bot-canvas {
    --dot-color: var(--current-text-color);
}

/* ── Canvas (dot grid) sits behind content ── */
#bot-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}