/*
  Minimal UI override layer
  - Keeps existing functionality and DOM IDs untouched.
  - Overrides legacy visual layers with a coherent design system.
*/

:root {
  color-scheme: light;

  --ui-bg: #edf2f8;
  --ui-bg-soft: #f7f9fc;
  --ui-surface: #ffffff;
  --ui-surface-alt: #f8fbff;
  --ui-border: #d9e2ec;
  --ui-border-strong: #c9d5e2;
  --ui-text: #0f172a;
  --ui-muted: #5f6f82;
  --ui-accent: #e24a3a;
  --ui-accent-hover: #c93f31;
  --ui-info: #0284c7;
  --ui-success: #16a34a;
  --ui-warning: #ca8a04;
  --ui-danger: #dc2626;

  --ui-radius-xl: 24px;
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
  --ui-radius-sm: 10px;

  --ui-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
  --ui-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.12);

  /* Bridge old variables to new system */
  --bg-color: var(--ui-bg);
  --card-bg: var(--ui-surface);
  --card-border: var(--ui-border);
  --border-color: var(--ui-border);
  --text-main: var(--ui-text);
  --text-muted: var(--ui-muted);
  --primary-red: var(--ui-accent);
  --primary-red-hover: var(--ui-accent-hover);
  --primary: var(--ui-accent);
  --primary-hover: var(--ui-accent-hover);
  --secondary: #1f2937;
  --secondary-hover: #111827;
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --danger: var(--ui-danger);
  --danger-hover: #b91c1c;
  --success: var(--ui-success);
  --success-hover: #15803d;
  --rec-bg: var(--ui-bg);
  --rec-surface: var(--ui-surface);
  --rec-text-muted: var(--ui-muted);
  --text-color: var(--ui-text);
}

html,
body {
  background: var(--ui-bg-soft);
  color: var(--ui-text);
}

body.rec-theme {
  font-family: 'Manrope', 'Segoe UI', sans-serif !important;
  color: var(--ui-text) !important;
  min-height: 100vh;
  background: linear-gradient(180deg, #f7faff 0%, #edf2f8 100%);
}

h1,
h2,
h3,
.rec-logo-title,
.rec-main-tab,
.tab-btn,
.rec-action-pill {
  font-family: 'Space Grotesk', 'Manrope', sans-serif !important;
  letter-spacing: 0.01em;
}

.timer-display,
.rec-big-timer,
.rec-time-row,
#waveTimeDisplay,
.modal-audio-time,
.timestamp-badge,
.timestamp-btn,
.timestamp-btn-small,
.minute-jump-btn,
.rec-nav-mini-time,
#miniPlayerTime,
#recDigitalTimer {
  font-family: 'IBM Plex Mono', monospace !important;
}

.card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  color: var(--ui-text) !important;
}

.rec-app-container {
  max-width: 1240px;
  padding: 0 0.9rem;
  margin: 1.1rem auto;
}

.rec-main-grid {
  max-width: 1160px;
  gap: 1rem;
}

.rec-navbar {
  background: rgba(255, 255, 255, 0.84) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem !important;
}

.rec-logo-title {
  color: var(--ui-text) !important;
}

.rec-subtitle-count,
.rec-active-meta,
.history-list-hint,
.empty-state,
.settings-hint,
.rec-card-sub,
.topic-description,
.participant-summary,
.action-assignee,
#settingsDriveStatus,
#settingsDriveHint {
  color: var(--ui-muted) !important;
}

.rec-top-actions {
  gap: 0.55rem;
}

.rec-search-box {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.rec-search-input {
  color: var(--ui-text) !important;
}

.rec-search-input::placeholder {
  color: #8090a3;
}

.rec-icon-btn,
.rec-back-btn,
.rec-circle-btn,
.rec-play-btn {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.rec-icon-btn:hover,
.rec-back-btn:hover,
.rec-circle-btn:hover,
.rec-play-btn:hover {
  transform: translateY(-1px);
  border-color: var(--ui-border-strong) !important;
  background: #f8fbff !important;
}

.settings-panel {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--ui-shadow-md) !important;
}

.settings-panel-header {
  color: var(--ui-muted) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

.settings-select,
.settings-action-btn,
.model-select,
.custom-model-input,
.gdoc-input,
.mic-device-select,
#modalSummaryCustomPrompt,
#webUrlInput,
#modalTtsUrlInput {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
}

.settings-action-btn {
  text-align: left;
}

.settings-action-btn:hover,
.settings-select:hover,
.model-select:hover,
.gdoc-input:hover,
.mic-device-select:hover,
#modalSummaryCustomPrompt:hover,
#webUrlInput:hover,
#modalTtsUrlInput:hover {
  border-color: var(--ui-border-strong) !important;
  background: #f9fbff !important;
}

.settings-select:focus,
.model-select:focus,
.custom-model-input:focus,
.gdoc-input:focus,
.mic-device-select:focus,
#modalSummaryCustomPrompt:focus,
#webUrlInput:focus,
#modalTtsUrlInput:focus {
  outline: 2px solid rgba(2, 132, 199, 0.2) !important;
  border-color: var(--ui-info) !important;
}

.btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.btn-primary {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: #ffffff !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--ui-accent-hover) !important;
}

.btn-secondary {
  background: #f2f6fb !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.btn-secondary:hover:not(:disabled) {
  background: #e8eef7 !important;
}

.btn-outline {
  background: #ffffff !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.btn-outline:hover:not(:disabled) {
  background: #f7fbff !important;
  border-color: var(--ui-border-strong) !important;
}

.btn-accent {
  background: var(--ui-info) !important;
  border-color: var(--ui-info) !important;
  color: #ffffff !important;
}

.btn-accent:hover:not(:disabled) {
  background: #0369a1 !important;
}

.btn-danger {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  color: #ffffff !important;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c !important;
}

.btn:disabled,
.rec-action-pill:disabled {
  opacity: 0.56 !important;
}

.rec-capture-section,
.rec-player-card,
.rec-content-card,
.history-card,
.logs-card {
  border-radius: var(--ui-radius-xl) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

.rec-capture-header {
  border-bottom: 1px solid #e8edf3 !important;
  margin-bottom: 1rem !important;
}

.rec-capture-header-title h2,
.rec-sidebar-header h2,
.rec-modal-header h2,
.logs-header h2,
#ytAudioTitle {
  color: var(--ui-text) !important;
}

.mode-tabs,
.view-tabs {
  background: #f3f7fb !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  padding: 0.25rem !important;
  gap: 0.35rem !important;
}

.mode-tabs .tab-btn,
.view-tab {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ui-muted) !important;
  border-radius: 10px !important;
}

.mode-tabs .tab-btn.active,
.view-tab.active {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.mode-tabs .tab-btn:hover,
.view-tab:hover {
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.dropzone,
.doc-upload-box,
.file-info-box,
.visualizer-container,
.progress-bar-box,
.audio-filters-panel,
.summary-section,
.speaker-filter-panel,
.full-text-container,
.speaker-section,
.summary-topic-card,
.summary-action-item,
.participant-card,
.transcript-meta,
.modal-preview-player-bar,
.player-loading-bar-box,
#audioMixerControls,
#systemAudioHelpBanner {
  background: var(--ui-surface-alt) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
}

.dropzone {
  border-style: dashed !important;
}

.dropzone:hover,
.dropzone.dragover,
.doc-dropzone:hover {
  border-color: var(--ui-info) !important;
  background: #f1f7ff !important;
}

.audio-source-selector,
.mic-profile-selector {
  background: #f8fbff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
}

.audio-source-card,
.mic-profile-card {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  color: var(--ui-text) !important;
}

.audio-source-card .prof-text strong,
.mic-profile-card .prof-text strong,
.file-details strong,
.topic-header strong,
.participant-header strong,
.share-text strong,
.ready-info h3 {
  color: var(--ui-text) !important;
}

.audio-source-card .prof-text small,
.mic-profile-card .prof-text small,
.file-details small,
.share-text small,
.ready-info p,
.doc-upload-desc,
#micDeviceHint,
#urlTargetLangLabel {
  color: var(--ui-muted) !important;
}

.audio-source-card:hover,
.mic-profile-card:hover,
.summary-topic-card:hover,
.rec-item-card:hover,
.share-option-item:hover {
  transform: translateY(-1px);
  border-color: var(--ui-border-strong) !important;
  background: #ffffff !important;
}

.audio-source-card.active,
.mic-profile-card.active {
  border-color: var(--ui-accent) !important;
  background: #fff3f1 !important;
  box-shadow: 0 0 0 2px rgba(226, 74, 58, 0.14);
}

.audio-source-card.active .prof-text strong,
.mic-profile-card.active .prof-text strong {
  color: #b93429 !important;
}

.recording-status-bar {
  background: #f8fbff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
}

.status-badge,
#statusText,
.rec-time-text {
  color: var(--ui-muted) !important;
}

.status-recording,
.status-recording #statusText {
  color: #b93429 !important;
}

.timer-display {
  color: var(--ui-text) !important;
  letter-spacing: 0.02em;
}

.controls-group {
  align-items: center;
}

#btnRecord {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: #ffffff !important;
}

#btnPause,
#btnStop {
  background: #f2f6fb !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.rec-category-pills {
  padding-bottom: 0.1rem;
}

.rec-pill {
  background: #f2f6fb !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-muted) !important;
}

.rec-pill:hover {
  color: var(--ui-text) !important;
  border-color: var(--ui-border-strong) !important;
  background: #ffffff !important;
}

.rec-pill.active {
  background: var(--ui-text) !important;
  border-color: var(--ui-text) !important;
  color: #ffffff !important;
}

.history-table-container {
  border-color: var(--ui-border) !important;
}

.rec-item-card {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  min-height: 76px;
}

.rec-item-card.active-rec-card {
  background: #fff4f2 !important;
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 2px rgba(226, 74, 58, 0.12);
}

.rec-card-title,
.rec-active-title,
.segment-text,
.full-text-segment,
.full-text-plain,
.summary-key-points li,
.action-desc,
.speaker-segment-item p {
  color: var(--ui-text) !important;
}

.rec-play-btn {
  color: var(--ui-accent) !important;
}

.rec-play-btn:hover {
  background: #fff4f2 !important;
  border-color: rgba(226, 74, 58, 0.45) !important;
}

.rec-delete-btn:hover {
  background: #fff5f5 !important;
}

.rec-player-header {
  align-items: flex-start;
}

.rec-big-timer {
  color: #182033 !important;
  text-shadow: none !important;
}

.rec-waveform-wrapper,
#waveform-timeline,
.rec-playback-bar {
  background: #f8fbff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
}

.waveform-container {
  background: transparent !important;
}

.rec-action-pills-bar {
  gap: 0.5rem !important;
}

.rec-action-pill {
  border: 1px solid var(--ui-border) !important;
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border-radius: 999px !important;
}

.primary-pill {
  border-color: rgba(2, 132, 199, 0.35) !important;
  color: #0b5f87 !important;
  background: #f0f9ff !important;
}

.accent-pill {
  border-color: rgba(226, 74, 58, 0.38) !important;
  color: #b93429 !important;
  background: #fff3f1 !important;
}

.secondary-pill {
  color: var(--ui-muted) !important;
  background: #f8fafc !important;
}

.rec-action-pill:hover:not(:disabled) {
  transform: translateY(-1px);
}

.player-options-toggle,
.record-options-toggle {
  border: 1px solid var(--ui-border) !important;
  background: #ffffff !important;
  color: var(--ui-muted) !important;
}

.player-options-toggle[aria-expanded='true'],
.record-options-toggle[aria-expanded='true'] {
  border-color: var(--ui-accent) !important;
  color: #b93429 !important;
  background: #fff4f2 !important;
}

.rec-model-inline {
  margin-left: auto;
  color: var(--ui-muted) !important;
}

.model-label {
  color: var(--ui-muted) !important;
}

.rec-playback-bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.rec-circle-btn {
  background: #ffffff !important;
}

.rec-big-red-play {
  background: var(--ui-accent) !important;
  box-shadow: 0 10px 24px rgba(226, 74, 58, 0.28) !important;
}

.rec-big-red-play:hover {
  background: var(--ui-accent-hover) !important;
}

.rec-speed-select,
#ytPlaybackRate {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
}

.rec-view-tabs {
  border-bottom: 1px solid #e6edf5 !important;
  gap: 1rem !important;
}

.rec-main-tab {
  color: var(--ui-muted) !important;
}

.rec-main-tab.active,
.rec-main-tab:hover {
  color: var(--ui-text) !important;
}

.rec-main-tab.active::after {
  background: var(--ui-accent) !important;
  height: 2px !important;
}

.rec-chat-container,
.transcript-results,
#offlineRecordingsList,
.logs-pre,
.history-table-container {
  scrollbar-width: thin;
  scrollbar-color: #b8c7d8 transparent;
}

.rec-chat-container::-webkit-scrollbar,
.transcript-results::-webkit-scrollbar,
#offlineRecordingsList::-webkit-scrollbar,
.logs-pre::-webkit-scrollbar,
.history-table-container::-webkit-scrollbar {
  width: 8px;
}

.rec-chat-container::-webkit-scrollbar-thumb,
.transcript-results::-webkit-scrollbar-thumb,
#offlineRecordingsList::-webkit-scrollbar-thumb,
.logs-pre::-webkit-scrollbar-thumb,
.history-table-container::-webkit-scrollbar-thumb {
  background: #c6d3e1;
  border-radius: 20px;
}

.chat-bubble-card,
.segment-card,
.speaker-segment-item,
.minute-group,
.speaker-section,
.offline-recording-card {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
}

.chat-bubble-card.active-segment,
.segment-card.active-segment {
  background: #fff5f2 !important;
  border-color: rgba(226, 74, 58, 0.42) !important;
  box-shadow: 0 0 0 2px rgba(226, 74, 58, 0.12) !important;
}

.speaker-pill,
.speaker-badge,
.speaker-badge-inline,
.topic-minute-badge,
.timestamp-btn,
.timestamp-btn-small,
.minute-jump-btn,
.rec-status-badge,
.badge,
.rec-token-badge {
  border-radius: 999px !important;
}

.timestamp-badge,
.speaker-description,
.minute-segment-count,
.speaker-stats,
.speaker-filter-label small,
.progress-step-text,
.progress-percent-text,
.player-loading-text,
.player-loading-percent,
.visualizer-title,
.db-value-badge,
.model-label,
.rec-status-badge,
.topic-minute-badge {
  color: var(--ui-muted) !important;
}

.transcript-meta {
  color: #0b5f87 !important;
  background: #eff8ff !important;
  border-color: #cfe8fb !important;
}

.realtime-logs-container,
#realtimeLogsOutput {
  background: #0f172a !important;
  color: #d6ffec !important;
  border-color: #1e293b !important;
}

.summary-listen-panel {
  background: #f2f8ff !important;
  border-color: #c8e3f7 !important;
}

.summary-voice-select,
.summary-audio-player {
  border-color: var(--ui-border) !important;
}

.summary-section h3,
#summaryResults h3 {
  color: #0b5f87 !important;
}

.rec-modal-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px) !important;
}

.rec-modal-content,
.rec-share-modal,
.export-menu-options,
#summaryTypeModal .rec-modal-content,
#ttsOptionsModal .rec-modal-content,
#offlineModal .rec-modal-content {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow-md) !important;
}

.rec-modal-close {
  background: #f2f6fb !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.rec-modal-close:hover {
  background: #e9f0f8 !important;
}

.share-option-item,
.export-item {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.export-item:hover,
.share-option-item:hover {
  background: #f8fbff !important;
}

.logs-pre {
  background: #0f172a !important;
  color: #cffafe !important;
  border: 1px solid #1e293b !important;
}

.offline-badge {
  border-color: #ffffff !important;
}

.login-screen {
  background:
    radial-gradient(circle at 20% 20%, rgba(226, 74, 58, 0.12), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.15), transparent 38%),
    linear-gradient(180deg, #f8fbff, #ecf2f9) !important;
}

.login-box {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-md) !important;
  border-radius: var(--ui-radius-xl) !important;
}

.rec-navbar-mini-player,
.rec-mini-player {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

.rec-nav-mini-title,
.mini-player-text strong {
  color: var(--ui-text) !important;
}

.rec-nav-mini-btn,
.rec-mini-expand-btn {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-muted) !important;
}

.rec-nav-mini-btn:hover,
.rec-mini-expand-btn:hover {
  color: var(--ui-text) !important;
  border-color: var(--ui-border-strong) !important;
}

.rec-nav-mini-play,
.rec-mini-play-btn {
  background: var(--ui-accent) !important;
}

/* Mobile first refinements */
@media (max-width: 767px) {
  body.rec-theme {
    padding-bottom: calc(var(--mobile-bottomnav-height, 60px) + 0.95rem + env(safe-area-inset-bottom));
    background: #edf2f8;
  }

  .rec-navbar,
  .rec-mobile-bottomnav,
  .rec-modal-overlay,
  .rec-drawer-backdrop {
    backdrop-filter: none !important;
  }

  .rec-navbar {
    padding: max(0.5rem, env(safe-area-inset-top)) 0.7rem 0.65rem !important;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .rec-brand {
    width: 100%;
    justify-content: center;
  }

  .rec-top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.35rem;
    align-items: center;
  }

  .rec-search-box {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  #userDisplayName {
    display: none;
  }

  .card {
    border-radius: 16px !important;
    padding: 0.85rem !important;
  }

  .rec-app-container {
    padding: 0 0.45rem;
  }

  .rec-capture-header,
  .rec-player-header {
    gap: 0.55rem;
  }

  .rec-capture-header-title h2,
  .rec-sidebar-header h2,
  #ytAudioTitle {
    font-size: 1rem !important;
  }

  .mode-tabs {
    flex-direction: column;
    padding: 0.3rem !important;
  }

  .audio-source-options,
  .mic-profile-options,
  .summary-topics,
  .participants-grid,
  .filters-grid,
  .ready-action-buttons,
  .tts-url-actions-grid,
  .url-actions-grid,
  .doc-upload-grid,
  .mixer-volume-grid {
    grid-template-columns: 1fr !important;
  }

  .recording-status-bar {
    border: none !important;
    background: transparent !important;
    padding: 0.35rem 0.2rem !important;
    margin-bottom: 0.35rem !important;
    flex-direction: column;
    gap: 0.28rem;
  }

  .timer-display {
    font-size: 2.65rem !important;
  }

  .controls-group {
    gap: 1rem !important;
    justify-content: center;
  }

  #btnRecord,
  #btnPause,
  #btnStop {
    font-size: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #btnRecord {
    width: 84px;
    height: 84px;
  }

  #btnPause,
  #btnStop {
    width: 56px;
    height: 56px;
  }

  #btnRecord .btn-icon {
    font-size: 1.9rem;
  }

  #btnPause .btn-icon,
  #btnStop .btn-icon {
    font-size: 1.25rem;
  }

  .record-options-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-bottom: 0.75rem;
    border-radius: 12px !important;
    padding: 0.6rem 0.9rem !important;
  }

  .record-advanced-options {
    display: none;
  }

  .record-advanced-options.options-expanded {
    display: block;
  }

  .rec-action-pills-bar {
    gap: 0.4rem !important;
  }

  .rec-action-pill {
    min-height: 42px;
    font-size: 0.8rem !important;
    padding: 0.45rem 0.75rem !important;
  }

  .player-options-toggle {
    display: flex !important;
    width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    font-size: 1rem;
  }

  .player-advanced-options {
    display: none;
  }

  .player-advanced-options.options-expanded {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.25rem;
  }

  .rec-model-inline {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .rec-model-inline .model-select,
  .rec-model-inline .custom-model-input {
    flex: 1;
  }

  .rec-controls-main {
    gap: 0.75rem !important;
  }

  .rec-circle-btn {
    width: 48px !important;
    height: 48px !important;
  }

  .rec-big-red-play {
    width: 68px !important;
    height: 68px !important;
  }

  .rec-time-row {
    font-size: 0.78rem;
  }

  .rec-sidebar {
    background: #ffffff !important;
    width: min(88vw, 360px) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 16px 0 36px rgba(15, 23, 42, 0.18) !important;
  }

  .rec-drawer-backdrop {
    background: rgba(15, 23, 42, 0.32) !important;
  }

  .rec-mobile-bottomnav {
    display: flex !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-top: 1px solid var(--ui-border) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
  }

  .rec-bottomnav-btn {
    color: #79889b !important;
  }

  .rec-bottomnav-btn.active {
    color: var(--ui-accent) !important;
  }

  .rec-mini-player {
    bottom: calc(var(--mobile-bottomnav-height, 60px) + 12px + env(safe-area-inset-bottom));
    width: 95%;
  }

  .rec-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .rec-modal-content,
  .rec-share-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92dvh !important;
    padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  }
}

@media (min-width: 768px) {
  .record-options-toggle,
  .player-options-toggle {
    display: none !important;
  }

  .record-advanced-options,
  .player-advanced-options {
    display: contents !important;
  }
}

/* Motion: meaningful but calm */
@keyframes ui-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rec-main-grid > section,
.rec-main-grid > aside,
.rec-main-grid > .card {
  animation: ui-fade-up 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.rec-main-grid > :nth-child(1) {
  animation-delay: 0.02s;
}

.rec-main-grid > :nth-child(2) {
  animation-delay: 0.08s;
}

.rec-main-grid > :nth-child(3) {
  animation-delay: 0.14s;
}

.rec-modal-content,
.rec-share-modal {
  animation: ui-fade-up 0.24s ease both;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  .rec-main-grid > section,
  .rec-main-grid > aside,
  .rec-main-grid > .card,
  .rec-modal-content,
  .rec-share-modal {
    animation: none !important;
  }
}