/**
 * OneTab Polish Layer — micro-animations, illustrations, elevation refinements
 */

/* Icon baseline */
.ot-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.ot-spin { animation: ot-spin 1s linear infinite; }
@keyframes ot-spin { to { transform: rotate(360deg); } }
.ot-empty-icon { display: block; margin: 0 auto 12px; color: var(--ot-text-tertiary, var(--text-3)); opacity: 0.55; }
.ot-empty-icon svg, .ot-empty-illus svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }

/* Staggered panel entrance */
.ot-panel.active > * { animation: ot-rise 0.35s ease backwards; }
.ot-panel.active > *:nth-child(1) { animation-delay: 0ms; }
.ot-panel.active > *:nth-child(2) { animation-delay: 40ms; }
.ot-panel.active > *:nth-child(3) { animation-delay: 80ms; }
.ot-panel.active > *:nth-child(4) { animation-delay: 120ms; }
@keyframes ot-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Card hover lift */
.ot-card, .ot-metric, .ot-agent-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ot-card:hover, .ot-metric:hover {
  box-shadow: var(--ot-shadow-2);
}
.ot-agent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ot-shadow-2);
}

/* Button press */
.ot-btn:active:not(:disabled) { transform: scale(0.98); }

/* Table row fade-in */
.ot-table tbody tr { animation: ot-fade 0.25s ease backwards; }
.ot-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.ot-table tbody tr:nth-child(2) { animation-delay: 20ms; }
.ot-table tbody tr:nth-child(3) { animation-delay: 40ms; }
@keyframes ot-fade { from { opacity: 0; } to { opacity: 1; } }

/* Premium empty-state illustrations */
.ot-illus {
  width: 120px; height: 120px; margin: 0 auto 20px;
  position: relative;
}
.ot-illus svg { width: 100%; height: 100%; }

/* Toggle switch (enterprise) */
.ot-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.ot-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ot-switch-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ot-bg-active); border: 1px solid var(--ot-border-strong);
  border-radius: 24px; transition: 0.2s;
}
.ot-switch-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px;
  background: var(--ot-text-secondary); border-radius: 50%; transition: 0.2s;
}
.ot-switch input:checked + .ot-switch-slider { background: var(--ot-green-soft); border-color: var(--ot-green); }
.ot-switch input:checked + .ot-switch-slider::before { transform: translateX(18px); background: var(--ot-green); }
.ot-switch input:focus-visible + .ot-switch-slider { outline: 2px solid var(--ot-accent); outline-offset: 2px; }

/* Channel flag row */
.ot-flag-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--ot-bg-subtle); border: 1px solid var(--ot-border);
  border-radius: var(--ot-radius-sm); margin-bottom: 8px;
  transition: border-color 0.15s;
}
.ot-flag-row:hover { border-color: var(--ot-border-strong); }
.ot-flag-row .ot-flag-name { flex: 1; font-weight: 600; font-size: 13px; }

/* Line chart container */
.ot-line-chart { width: 100%; height: 200px; }
.ot-line-chart svg { width: 100%; height: 100%; }

/* Scrollbar polish */
.ot-sb-nav::-webkit-scrollbar, .ot-drawer-body::-webkit-scrollbar, .ot-modal-body::-webkit-scrollbar { width: 6px; }
.ot-sb-nav::-webkit-scrollbar-thumb, .ot-drawer-body::-webkit-scrollbar-thumb { background: var(--ot-border-strong); border-radius: 3px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ot-panel.active > *, .ot-table tbody tr, .ot-toast { animation: none !important; }
  .ot-btn:active { transform: none; }
}