@adatechnology/conversations-ui 0.1.0-rc.8 → 0.1.0

package/dist/styles.css

@@ -10,6 +10,9 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2319232a' stroke-width='1.2' opacity='0.9'%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/%3E%3Ccircle cx='70' cy='28' r='2'/%3E%3Cpath d='M18 55 l6 6 m-6 0 l6 -6'/%3E%3Ccircle cx='55' cy='68' r='2.5'/%3E%3Cpath d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/%3E%3Ccircle cx='8' cy='85' r='2'/%3E%3Cpath d='M65 90 l5 5 m-5 0 l5 -5'/%3E%3C/g%3E%3C/svg%3E");
 }
 .cv-header-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.375rem;
   padding: 0.375rem 0.75rem;
@@ -26,6 +29,9 @@
   color: rgb(226 232 240);
 }
 .cv-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.5rem;
   padding: 0.375rem 0.5rem;
@@ -128,6 +134,9 @@
   background: rgb(30 41 59);
 }
 .cv-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.5rem;
   padding: 0.25rem 0.5rem;
@@ -144,6 +153,11 @@
   border-color: rgb(71 85 105);
   color: rgb(226 232 240);
 }
+.cv-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 .cv-only-wide {
   display: none;
 }
@@ -207,3 +221,882 @@
     max-width: calc(100vw - 1.5rem);
   }
 }
+.cv-scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.cv-scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.cv-scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cv-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+}
+.cv-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+.dark .cv-scrollbar-thin {
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+.dark .cv-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+}
+.dark .cv-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+:where(button:not(:disabled), [role=button]:not(:disabled), summary) {
+  cursor: pointer;
+}
+.cv-simulator-panel {
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  flex-shrink: 0;
+  border-left: 1px solid rgb(229 231 235);
+  background: #fff;
+}
+.cv-simulator-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.cv-simulator-panel__heading {
+  min-width: 0;
+}
+.cv-simulator-panel__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(17 24 39);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-simulator-panel__subtitle {
+  font-size: 0.75rem;
+  color: rgb(156 163 175);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-simulator-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cv-simulator-panel__close {
+  display: inline-flex;
+  padding: 0.375rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: rgb(156 163 175);
+  transition: color 150ms, background-color 150ms;
+}
+.cv-simulator-panel__close:hover {
+  color: rgb(55 65 81);
+  background: rgb(243 244 246);
+}
+.cv-simulator-panel__body {
+  flex: 1;
+  min-height: 0;
+}
+.dark .cv-simulator-panel {
+  border-left-color: rgb(31 41 55);
+  background: rgb(17 24 39);
+}
+.dark .cv-simulator-panel__header {
+  border-bottom-color: rgb(31 41 55);
+}
+.dark .cv-simulator-panel__title {
+  color: rgb(243 244 246);
+}
+.dark .cv-simulator-panel__subtitle {
+  color: rgb(107 114 128);
+}
+.dark .cv-simulator-panel__close:hover {
+  color: rgb(229 231 235);
+  background: rgb(31 41 55);
+}
+@media (max-width: 1023px) {
+  .cv-simulator-panel {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    z-index: 40;
+    border-left: 0;
+  }
+}
+.cv-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.cv-workspace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-header {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-header__titles {
+  min-width: 0;
+}
+.cv-workspace-header__titles h1 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-header__titles p {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-header__waiting {
+  color: rgb(217 119 6);
+}
+.dark .cv-workspace-header__waiting {
+  color: rgb(251 191 36);
+}
+.cv-workspace-header__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+.cv-workspace-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  min-height: 2.75rem;
+}
+.cv-workspace-toggle:disabled {
+  opacity: 0.5;
+}
+.cv-workspace-toggle--on {
+  background: rgb(37 99 235);
+  color: #fff;
+  border-color: rgb(37 99 235);
+}
+.dark .cv-workspace-toggle {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-workspace-failure {
+  border-bottom: 1px solid rgb(253 230 138);
+  background: rgb(255 251 235);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(146 64 14);
+}
+.dark .cv-workspace-failure {
+  background: rgb(69 26 3);
+  color: rgb(253 230 138);
+  border-color: rgb(120 53 15);
+}
+.cv-workspace-grid {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgb(243 244 246);
+}
+.dark .cv-workspace-grid {
+  background: rgb(17 24 39);
+}
+.cv-workspace-list,
+.cv-workspace-detail,
+.cv-workspace-simulator {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-workspace-list,
+.dark .cv-workspace-detail,
+.dark .cv-workspace-simulator {
+  background: rgb(31 41 55);
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-simulator {
+  flex-direction: row;
+}
+@media (max-width: 1023px) {
+  .cv-workspace-grid[data-detail=open] .cv-workspace-list {
+    display: none;
+  }
+  .cv-workspace-grid[data-detail=closed] .cv-workspace-detail {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  .cv-workspace-grid {
+    grid-template-columns: 360px minmax(0, 1fr);
+  }
+  .cv-workspace-grid--with-simulator {
+    grid-template-columns: minmax(0, 1fr) 24rem;
+  }
+  .cv-workspace-grid--with-simulator .cv-workspace-list {
+    display: none;
+  }
+}
+@media (min-width: 1280px) {
+  .cv-workspace-grid--with-simulator {
+    grid-template-columns: 320px minmax(0, 1fr) 24rem;
+  }
+  .cv-workspace-grid--with-simulator .cv-workspace-list {
+    display: flex;
+  }
+}
+.cv-workspace-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.cv-workspace-transcript {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-failure__link {
+  text-decoration: underline;
+}
+.cv-workspace-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid #bfdbfe;
+  background: #eff6ff;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: #1d4ed8;
+}
+.cv-workspace-selection__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.cv-workspace-selection__actions button {
+  min-height: 2.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid #bfdbfe;
+  padding: 0 0.625rem;
+}
+.dark .cv-workspace-selection {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+.dark .cv-workspace-selection__actions button {
+  border-color: #1e40af;
+}
+.cv-workspace-notice {
+  border-top: 1px solid var(--cv-border, #e5e7eb);
+  background: #f3f4f6;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.dark .cv-workspace-notice {
+  border-top-color: #374151;
+  background: #1f2937;
+  color: #9ca3af;
+}
+.cv-workspace-alert {
+  border-top: 1px solid rgb(254 202 202);
+  background: rgb(254 242 242);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(185 28 28);
+}
+.dark .cv-workspace-alert {
+  background: rgb(69 10 10);
+  color: rgb(252 165 165);
+  border-color: rgb(127 29 29);
+}
+.cv-workspace-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-filters {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-search {
+  width: 100%;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: transparent;
+}
+.dark .cv-workspace-search {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-workspace-chips {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.cv-workspace-chips::-webkit-scrollbar {
+  display: none;
+}
+.cv-workspace-chips__legend {
+  color: rgb(107 114 128);
+  flex-shrink: 0;
+}
+.cv-workspace-chip {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-chip--on {
+  background: rgb(229 231 235);
+}
+.dark .cv-workspace-chip--on {
+  background: rgb(51 65 85);
+}
+.cv-workspace-chip--fresh {
+  color: rgb(22 163 74);
+}
+.cv-workspace-chip--warning {
+  color: rgb(202 138 4);
+}
+.cv-workspace-chip--critical {
+  color: rgb(220 38 38);
+}
+.cv-workspace-chip--expired {
+  color: rgb(107 114 128);
+}
+.cv-workspace-chip--fresh.cv-workspace-chip--on {
+  background: rgb(220 252 231);
+}
+.cv-workspace-chip--warning.cv-workspace-chip--on {
+  background: rgb(254 249 195);
+}
+.cv-workspace-chip--critical.cv-workspace-chip--on {
+  background: rgb(254 226 226);
+}
+.cv-workspace-chip--expired.cv-workspace-chip--on {
+  background: rgb(229 231 235);
+}
+.dark .cv-workspace-chip--fresh {
+  color: rgb(74 222 128);
+}
+.dark .cv-workspace-chip--warning {
+  color: rgb(250 204 21);
+}
+.dark .cv-workspace-chip--critical {
+  color: rgb(248 113 113);
+}
+.dark .cv-workspace-chip--expired {
+  color: rgb(148 163 184);
+}
+.dark .cv-workspace-chip--fresh.cv-workspace-chip--on {
+  background: rgb(20 83 45);
+}
+.dark .cv-workspace-chip--warning.cv-workspace-chip--on {
+  background: rgb(113 63 18);
+}
+.dark .cv-workspace-chip--critical.cv-workspace-chip--on {
+  background: rgb(127 29 29);
+}
+.dark .cv-workspace-chip--expired.cv-workspace-chip--on {
+  background: rgb(51 65 85);
+}
+.cv-workspace-selectall {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-rows {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.cv-workspace-empty {
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-bulk {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgb(191 219 254);
+  background: rgb(239 246 255);
+  font-size: 0.75rem;
+}
+.dark .cv-workspace-bulk {
+  background: rgb(23 37 84);
+  border-color: rgb(30 58 138);
+}
+.cv-workspace-bulk__count {
+  font-weight: 500;
+  color: rgb(29 78 216);
+}
+.dark .cv-workspace-bulk__count {
+  color: rgb(147 197 253);
+}
+.cv-workspace-bulk__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.cv-workspace-bulk__actions button {
+  border: 1px solid rgb(191 219 254);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-bulk__actions button:disabled {
+  opacity: 0.5;
+}
+.cv-workspace-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid rgb(229 231 235);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: rgb(107 114 128);
+}
+.dark .cv-workspace-pager {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-pager__buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cv-workspace-pager__buttons button {
+  padding: 0 0.5rem;
+}
+.cv-workspace-pager__buttons button:disabled {
+  opacity: 0.4;
+}
+.cv-workspace-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 50%);
+}
+.cv-workspace-modal__box {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 80vh;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 25%);
+}
+.cv-workspace-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 1.25rem;
+}
+.cv-workspace-modal__header h3 {
+  font-weight: 600;
+}
+.cv-workspace-modal__header p {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+.cv-workspace-modal__search {
+  border-bottom: 1px solid #f3f4f6;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-modal__search input {
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+.cv-workspace-modal__item {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.125rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__item:hover {
+  background: #f9fafb;
+}
+.cv-workspace-modal__item--on {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+.cv-workspace-modal__item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.cv-workspace-modal__item-meta {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+.cv-workspace-modal__warning {
+  border-top: 1px solid #fde68a;
+  background: #fffbeb;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  color: #b45309;
+}
+.cv-workspace-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-modal__footer button {
+  min-height: 2.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0 0.875rem;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__footer button:last-child {
+  border-color: transparent;
+  background: #2563eb;
+  color: #fff;
+}
+.cv-workspace-modal__footer button:disabled {
+  opacity: 0.5;
+}
+.dark .cv-workspace-modal__box {
+  border-color: #374151;
+  background: #1f2937;
+}
+.dark .cv-workspace-modal__header,
+.dark .cv-workspace-modal__footer {
+  border-color: #374151;
+}
+.dark .cv-workspace-modal__search {
+  border-color: #374151;
+}
+.dark .cv-workspace-modal__search input {
+  border-color: #4b5563;
+  background: #374151;
+  color: #f3f4f6;
+}
+.dark .cv-workspace-modal__item:hover {
+  background: rgb(55 65 81 / 50%);
+}
+.dark .cv-workspace-modal__item--on {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+.dark .cv-workspace-modal__warning {
+  border-color: #92400e;
+  background: rgb(69 26 3 / 40%);
+  color: #fbbf24;
+}
+.dark .cv-workspace-modal__footer button {
+  border-color: #4b5563;
+  color: #f3f4f6;
+}
+.cv-workspace-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem;
+  padding: 0;
+  list-style: none;
+}
+.cv-workspace-attachments li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-attachments li span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-attachments li button {
+  flex: none;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  color: inherit;
+}
+.dark .cv-workspace-attachments li {
+  border-color: rgb(51 65 85);
+}
+.cv-filter-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  background: rgb(37 99 235);
+  color: white;
+  font-size: 0.625rem;
+  font-weight: 600;
+}
+.cv-filter-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  margin-top: 0.25rem;
+  min-width: 12rem;
+  padding: 0.5rem;
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.5rem;
+  background: white;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+.dark .cv-filter-menu {
+  background: rgb(30 41 59);
+  border-color: rgb(71 85 105);
+}
+.cv-filter-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.cv-filter-option:hover {
+  background: rgb(241 245 249);
+}
+.dark .cv-filter-option:hover {
+  background: rgb(51 65 85);
+}
+.cv-bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid rgb(191 219 254);
+  border-radius: 0.5rem;
+  background: rgb(239 246 255);
+}
+.dark .cv-bulk-bar {
+  background: rgb(30 58 138 / 0.25);
+  border-color: rgb(30 64 175);
+}
+.cv-listing-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgb(241 245 249);
+}
+.dark .cv-listing-pagination {
+  border-color: rgb(30 41 59);
+}
+.cv-listing-perpage {
+  height: 2rem;
+  padding: 0 0.5rem;
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.375rem;
+  background: transparent;
+  font-size: 0.75rem;
+}
+.dark .cv-listing-perpage {
+  border-color: rgb(71 85 105);
+}
+:root {
+  --cv-border-color: rgb(229 231 235);
+}
+.dark {
+  --cv-border-color: rgb(51 65 85);
+}
+:where(*, ::before, ::after, ::backdrop, ::file-selector-button) {
+  border-color: var(--cv-border-color);
+}
+.cv-table-card {
+  overflow-x: auto;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-table-card {
+  border-color: rgb(51 65 85);
+  background: rgb(17 24 39);
+}
+.cv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.cv-table thead {
+  background: rgb(248 250 252);
+  color: rgb(100 116 139);
+}
+.dark .cv-table thead {
+  background: rgb(30 41 59 / 60%);
+  color: rgb(148 163 184);
+}
+.cv-table thead th {
+  border-bottom: 1px solid rgb(226 232 240);
+  white-space: nowrap;
+}
+.dark .cv-table thead th {
+  border-bottom-color: rgb(51 65 85);
+}
+.cv-table tbody tr {
+  border-bottom: 1px solid rgb(241 245 249);
+}
+.dark .cv-table tbody tr {
+  border-bottom-color: rgb(30 41 59);
+}
+.cv-table tbody tr:last-child {
+  border-bottom: 0;
+}
+.cv-table tbody tr:nth-child(even) {
+  background: rgb(248 250 252 / 70%);
+}
+.dark .cv-table tbody tr:nth-child(even) {
+  background: rgb(30 41 59 / 35%);
+}
+.cv-table tbody tr:hover {
+  background: rgb(239 246 255);
+}
+.dark .cv-table tbody tr:hover {
+  background: rgb(30 58 138 / 25%);
+}
+.cv-type-tag {
+  display: inline-block;
+  border-radius: 0.25rem;
+  background: rgb(241 245 249);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(71 85 105);
+}
+.dark .cv-type-tag {
+  background: rgb(51 65 85);
+  color: rgb(203 213 225);
+}
+.cv-tooltip {
+  position: fixed;
+  z-index: 9999;
+  max-width: min(16rem, 90vw);
+  transform: translate(-50%, -100%);
+  border-radius: 0.375rem;
+  background: rgb(17 24 39 / 95%);
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.2;
+  color: #fff;
+  text-align: center;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+  pointer-events: none;
+  animation: cv-tooltip-in 90ms ease-out;
+}
+.cv-tooltip--bottom {
+  transform: translate(-50%, 0);
+}
+.dark .cv-tooltip {
+  background: rgb(243 244 246 / 96%);
+  color: rgb(17 24 39);
+}
+@keyframes cv-tooltip-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-tooltip {
+    animation: none;
+  }
+}
+.cv-composer-bar {
+  border-top: 1px solid rgb(229 231 235);
+  background: rgb(240 242 245);
+  padding: 0.625rem 0.75rem;
+}
+.dark .cv-composer-bar {
+  border-top-color: rgb(51 65 85);
+  background: rgb(17 24 39);
+}