/* Provider orbs (dots) – replace tab icons; standalone and nav-tab variants */

.provider-orb {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Standalone (e.g. executed_queries table): colored by provider */
.provider-orb.gemini-orb {
    background: linear-gradient(135deg, #4facfe 0%, #a18cd1 100%);
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
}

.provider-orb.gpt-orb {
    background-color: #10a37f;
    box-shadow: 0 0 12px rgba(16, 163, 127, 0.6);
}

/* Nav tabs: center orb + text in each tab */
#provider-tabs .nav-link,
#provider-tabs span.nav-link.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nav tabs: orbs are offline (gray) unless link is active */
.nav-tabs .provider-orb {
    background-color: #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-tabs .provider-orb.gemini-orb,
.nav-tabs .provider-orb.gpt-orb {
    background-color: #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-tabs .nav-link.active .provider-orb.gemini-orb {
    background: linear-gradient(135deg, #4facfe 0%, #a18cd1 100%);
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    animation: fanout-breathe 3s infinite ease-in-out;
}

.nav-tabs .nav-link.active .provider-orb.gpt-orb {
    background-color: #10a37f;
    box-shadow: 0 0 12px rgba(16, 163, 127, 0.6);
    animation: fanout-breathe 3s infinite ease-in-out;
}

/* Disabled nav link: orb stays gray (no .active) */
.nav-tabs .nav-link.disabled .provider-orb {
    background-color: #d1d5db;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Query textarea: subtle glow when idle, clear focus ring */
.query-input.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box;
}

.query-input::placeholder {
    color: #cccfd3;
    opacity: 1;
}

.query-input.form-control:not(:focus) {
    animation: fanout-border-pulse 4s infinite;
}

.query-input.form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

@keyframes fanout-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

@keyframes fanout-border-pulse {
    0% { border-color: #e5e7eb; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    50% { border-color: #bfdbfe; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); }
    100% { border-color: #e5e7eb; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Select dropdowns: visible arrow so users see it's a selection */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}
select.form-control:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
}