/*
 * Karma / Dialogs audio-card refinement v10.8
 * Scope: ONLY selectable dialog/audio cards in the left pane of "Все диалоги"
 * and their metric chips.
 */

/* Normalize the list rhythm without reserving any extra horizontal space. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]),
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > *,
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Base card surface. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"],
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"] {
  background: #14243a !important;
  background-color: #14243a !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 28px !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 20px 24px !important;
  transition:
    background-color 180ms cubic-bezier(.2, 0, 0, 1),
    transform 180ms cubic-bezier(.2, 0, 0, 1) !important;
}

/* Hover: a slightly lighter tonal surface, with restrained motion. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:hover,
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:hover {
  background: #182b45 !important;
  background-color: #182b45 !important;
  transform: translateY(-1px);
}

/* Selected/current dialog: persistent tonal emphasis, still borderless. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:is([class*="border-indigo"], [class*="bg-primary"]),
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:is([class*="border-indigo"], [class*="bg-primary"]) {
  background: #1b3150 !important;
  background-color: #1b3150 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Selected + hover. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:is([class*="border-indigo"], [class*="bg-primary"]):hover,
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:is([class*="border-indigo"], [class*="bg-primary"]):hover {
  background: #20395a !important;
  background-color: #20395a !important;
}

/* Pressed state. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:active,
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"]:active {
  background: #20395a !important;
  background-color: #20395a !important;
  transform: translateY(0) scale(.995);
}

/* Metric/filter chips inside a card: quieter than the card itself. */
body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"] :is([class~="bg-gray-100"], [class~="dark:bg-gray-700"]),
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"] :is([class~="bg-gray-100"], [class~="dark:bg-gray-700"]) {
  background: #1a2c46 !important;
  background-color: #1a2c46 !important;
  color: #c5d1df !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-karma-view="dialogs"] #root [data-karma-dialog-pane="list"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"],
  body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] :is([class~="space-y-1"], [class~="space-y-2"]) > [class~="cursor-pointer"] {
    transition-duration: .01ms !important;
    transform: none !important;
  }
}


/* Filter header alignment only: equal optical padding, no layout changes elsewhere. */
body[data-karma-view="dialogs"] #root [data-karma-expressive-filters] > :first-child,
body[data-karma-view="dialogs"] #root [data-karma-mobile-filters] > :first-child {
  display: flex !important;
  min-height: 52px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

body[data-karma-view="dialogs"] #root [data-karma-expressive-filters] > :first-child > :first-child,
body[data-karma-view="dialogs"] #root [data-karma-mobile-filters] > :first-child > :first-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body[data-karma-view="dialogs"] #root [data-karma-expressive-filters] > :first-child h3,
body[data-karma-view="dialogs"] #root [data-karma-mobile-filters] > :first-child h3 {
  margin: 0 !important;
  line-height: 1.2 !important;
}

body[data-karma-view="dialogs"] #root [data-karma-expressive-filters] > :first-child [data-karma-mobile-filter-toggle],
body[data-karma-view="dialogs"] #root [data-karma-mobile-filters] > :first-child [data-karma-mobile-filter-toggle] {
  margin: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}