/*
 * topbar.css - Top Bar Component
 * ================================
 * PORQUÊ: Barra superior com seletor de modelo, botões de ação e
 * componentes de controle. Escopo isolado.
 */

/* ── Main area ── */
.main {
 flex: 1;
 display: flex;
 flex-direction: column;
 min-width: 0;
 background: var(--bg-deep);
 transition: background 0.3s ease;
}

/* ── Top bar ── */
.topbar {
 padding: 0 24px;
 height: 56px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 1px solid var(--border);
 flex-shrink: 0;
 background: var(--bg-deep);
 transition: background 0.3s ease, border-color 0.3s ease;
}

/* ── Model selector pill ── */
.topbar-model {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 12px;
 border: 1px solid var(--border);
 border-radius: 20px;
 cursor: pointer;
 font-size: 13px;
 color: var(--muted-light);
 transition: all 0.2s;
}

.topbar-model:hover {
 border-color: var(--red-dim);
 color: var(--white);
}

.model-dot {
 width: 7px;
 height: 7px;
 background: var(--red);
 border-radius: 50%;
 box-shadow: 0 0 8px var(--red);
}

/* ── Action buttons ── */
.topbar-actions {
 display: flex;
 gap: 8px;
}

.icon-btn {
 width: 34px;
 height: 34px;
 background: transparent;
 border: 1px solid var(--border);
 border-radius: 7px;
 color: var(--muted);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.15s;
}

.icon-btn:hover {
 border-color: var(--border-glow);
 color: var(--white);
 background: var(--red-glow);
}