/* st-drawer.css — Drawer views, history cards, STT active */
/* ===== WU-2: Drawer View Switching & History ===== */

.st-drawer-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* History list */
.st-history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.st-history-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color var(--transition), background var(--transition);
}

.st-history-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}

.st-history-arrow {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1;
}

.st-history-source,
.st-history-target {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-history-source {
  color: var(--color-text-secondary);
}

.st-history-target {
  color: var(--color-text-primary);
  font-weight: 500;
}

.st-history-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.st-history-tone {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-primary);
  font-size: 10px;
  font-weight: 600;
}

.st-history-time {
  margin-left: auto;
}

/* History empty state */
.st-history-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  padding: var(--space-6);
}

.st-history-empty p {
  font-size: var(--font-size-sm);
}

/* History footer */
.st-history-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.st-history-clear-btn {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}

.st-history-clear-btn:hover {
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.08);
}

/* Dark mode — history cards */
[data-theme="dark"] .st-history-card,
.dark .st-history-card {
  background: var(--st-hover-dark);
  border-color: var(--color-border);
}

/* prefers-color-scheme .st-history-card removed — [data-theme="dark"] rule above is the single source of truth */

/* ===== WU-3: STT active — soft purple tint ===== */
.st-toolbar-btn.active.st-stt-active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text-primary);
}

/* ===== WU-6: Tooltips — native title only, no custom ::after ===== */