/* Local overrides for the embedded OvoneAI 1.0.7 frontend. */
#app-sidebar .sidebar-nav a[href="/playground"] {
  display: none !important;
}

/* Keep input text clear of leading icons and trailing controls. */
#app .input.pl-6 { padding-left: 24px; }
#app .input.pl-7 { padding-left: 28px; }
#app .input.pl-8 { padding-left: 32px; }
#app .input.pl-9 { padding-left: 36px; }
#app .input.pl-10 { padding-left: 40px; }
#app .input.pl-11 { padding-left: 44px; }
#app .input.pl-12 { padding-left: 48px; }

#app .input.pr-4 { padding-right: 16px; }
#app .input.pr-8 { padding-right: 32px; }
#app .input.pr-10 { padding-right: 40px; }
#app .input.pr-11 { padding-right: 44px; }
#app .input.pr-12 { padding-right: 48px; }
#app .input.pr-16 { padding-right: 64px; }

html.dark {
  --ovo-background: #111214;
  --ovo-sidebar: #16171a;
  --ovo-surface: #1b1c20;
  --ovo-surface-muted: #27292e;
  --ovo-glass: rgba(27, 28, 32, 0.96);
  --ovo-border: #34363d;
  --ovo-input-border: #454850;
  --ovo-text: #f4f4f5;
  --ovo-muted: #b6b8bf;
  --ovo-accent: #e4e5e9;
  --ovo-on-accent: #17181c;
  --ovo-accent-hover: #ffffff;
  --ovo-accent-soft: #30323a;
  --ovo-focus: #c1d4fd;
  --ovo-ring: rgba(193, 212, 253, 0.35);
  --ovo-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ovone-code-background: #121317;
  --ovone-radius-surface: 8px;
  color-scheme: dark;
  background: var(--ovo-background);
}

html.dark body,
html.dark .ovo-app-main {
  background: var(--ovo-background);
  color: var(--ovo-text);
}

html.dark #app-sidebar {
  background: var(--ovo-sidebar);
  border-color: var(--ovo-border);
}

html.dark #app-sidebar .sidebar-link {
  color: var(--ovo-muted);
  transition: none;
}

html.dark #app-sidebar .sidebar-link-active,
html.dark #app-sidebar .sidebar-link-active:hover {
  background: var(--ovo-surface-muted);
  color: var(--ovo-text);
  box-shadow: inset 0 0 0 1px var(--ovo-input-border);
}

html.dark #app-sidebar .sidebar-link:not(.sidebar-link-active):hover {
  background: #23252a;
  color: var(--ovo-text);
}

html.dark #app-sidebar .ovone-sidebar-cta {
  background: var(--ovo-accent);
  color: var(--ovo-on-accent);
}

html.dark #app-sidebar .ovone-sidebar-cta:hover {
  background: var(--ovo-accent-hover);
}

html.dark :is(.ovo-header, .card, .stat-card, .glass-card, .card-glass,
  .table-container, .modal-content, .dialog-container, .dropdown,
  .select-dropdown-portal, .date-picker-dropdown, .date-picker-popup,
  .ovone-locale-panel, .toast, .driver-popover) {
  background: var(--ovo-surface);
  border-color: var(--ovo-border);
  color: var(--ovo-text);
}

html.dark #app :is(.input, .select-trigger, .date-picker-trigger) {
  background: var(--ovo-surface-muted);
  color: var(--ovo-text);
  border-color: var(--ovo-input-border);
}

html.dark #app .input:disabled,
html.dark #app .select-trigger-disabled {
  background: var(--ovo-surface);
  color: var(--ovo-muted);
}

html.dark :is(.input, textarea, .select-search-input)::placeholder {
  color: var(--ovo-muted);
  opacity: 1;
}

html.dark #app .input-error,
html.dark #app .select-trigger-error {
  border-color: #f87171;
}

html.dark :is(.input-error-text, .playground-error, .playground-message-failure) {
  color: #fca5a5;
}

html.dark .btn-primary {
  background: var(--ovo-accent);
  color: var(--ovo-on-accent);
}

html.dark .btn-primary:hover:not(:disabled) {
  background: var(--ovo-accent-hover);
}

html.dark .btn-secondary {
  background: var(--ovo-surface-muted);
  border-color: var(--ovo-input-border);
  color: var(--ovo-text);
}

html.dark .btn-secondary:hover:not(:disabled) {
  background: #32343b;
}

html.dark :is(.table th, .select-option-group) {
  background: var(--ovo-surface-muted);
  color: var(--ovo-muted);
}

html.dark .table td {
  border-color: var(--ovo-border);
  color: var(--ovo-text);
}

html.dark :is(.table tbody tr:hover, .select-option:hover,
  .select-option-selected, .select-option-focused) {
  background: var(--ovo-surface-muted);
  color: var(--ovo-text);
}

html.dark .empty-state-icon {
  color: #9da0a9;
}

html.dark .driver-popover :is(.driver-popover-title, .driver-popover-description) {
  color: var(--ovo-text);
  text-shadow: none;
}

html.dark .driver-popover :is(.driver-popover-progress-text, .driver-popover-close-btn) {
  color: var(--ovo-muted);
}

html.dark .driver-popover :is(.driver-popover-next-btn, .driver-popover-prev-btn) {
  background: var(--ovo-surface-muted);
  border-color: var(--ovo-input-border);
  color: var(--ovo-text);
  text-shadow: none;
}

html.dark .playground-composer {
  background: var(--ovo-surface-muted);
  border-color: var(--ovo-input-border);
}

html.dark .playground-history {
  background: var(--ovo-sidebar);
}

html.dark .playground-composer:focus-within {
  border-color: var(--ovo-focus);
  box-shadow: 0 0 0 2px var(--ovo-ring);
}

html.dark #app :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ovo-focus);
  outline-offset: 3px;
}

#app-sidebar .ovone-sidebar-cta:focus-visible {
  outline: 2px solid var(--ovo-focus) !important;
  outline-offset: 3px !important;
}

#app .ovo-redeem-purchase {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

#app .ovo-redeem-purchase-link {
  color: var(--ovo-text, #27272a);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#app .ovo-redeem-purchase-link:hover {
  text-decoration-thickness: 2px;
}

#app .ovo-online-recharge-layout {
  height: var(--ovo-recharge-height, calc(100dvh - 160px));
  min-height: 320px;
}

#app .ovo-online-recharge-layout > .card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app .ovo-online-recharge-layout :is(.toc-sidebar, .toc-toggle-btn) {
  display: none !important;
}

#app .ovo-online-recharge-layout .markdown-page-content {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

#app .ovo-recharge-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#app .ovo-recharge-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 40px;
  gap: 12px;
  min-width: 0;
  padding: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
}

#app .ovo-recharge-status {
  margin-right: auto;
  color: var(--ovo-muted, #52525b);
}

#app .ovo-recharge-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px;
  color: var(--ovo-text, #27272a);
  text-decoration: none;
}

#app .ovo-recharge-open:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

#app .ovo-recharge-open svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

#app .ovo-recharge-viewport {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ovo-border, #e4e4e7);
  border-radius: 8px;
  background: #ffffff;
}

#app .ovo-recharge-frame {
  position: absolute;
  display: block;
  top: var(--ovo-shop-top, 0);
  left: 0;
  width: var(--ovo-shop-width, 100%);
  height: var(--ovo-shop-height, 100%);
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: scale(var(--ovo-shop-scale, 1));
  transform-origin: top left;
  background: #ffffff;
}

#app :is(.ovo-recharge-open, .ovo-redeem-purchase-link):focus-visible {
  outline: 2px solid var(--ovo-focus, #2563eb);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within,
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}