.toolbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 56px; align-items: center; gap: 0; padding: 4px 0; background: var(--background); }
.toolbar-btn { position: relative; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 1px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.toolbar-btn.active { color: var(--accent); }
.toolbar-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.toolbar-icon { position: relative; display: grid; place-items: center; width: 56px; height: 36px; border-radius: 18px; flex-shrink: 0; transition: background-color var(--duration-fast) ease; }
.toolbar-icon--mandala { height: 44px; }
.toolbar-btn.active .toolbar-icon { background: var(--surface-selected); }
.toolbar-btn:active .toolbar-icon { background: var(--surface-selected); }

.toolbar-svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: filter var(--duration-fast) ease; }
.toolbar-svg .toolbar-svg-dot { fill: currentColor; stroke: none; }
.toolbar-btn.active .toolbar-svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); }
.toolbar-mandala { display: block; width: 38px; height: 38px; object-fit: contain; transition: transform var(--duration-fast) ease; }
.toolbar-btn.active .toolbar-mandala { transform: scale(1.06); }

.toolbar-icon .toolbar-connection-indicator { position: absolute; right: 8px; bottom: 0; display: block; }
.toolbar-connection-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-secondary); box-shadow: 0 0 0 2px var(--background); }
.toolbar-connection-indicator.is-connected .toolbar-connection-dot { background: var(--success); }
.toolbar-connection-indicator.is-disconnected .toolbar-connection-dot { background: var(--danger); }

.toolbar-unread-badge { position: absolute; top: -5px; right: 2px; min-width: 18px; padding: 0 5px; border-radius: 12px; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 2px var(--background); font-size: .6875rem; font-weight: 600; line-height: 18px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .toolbar-icon, .toolbar-svg, .toolbar-mandala { transition: none; }
  .toolbar-btn.active .toolbar-mandala { transform: none; }
}
.toolbar-svg * { vector-effect: non-scaling-stroke; }

:root[data-theme='light'] .toolbar-mandala { filter: saturate(1.4) brightness(0.8); }