/**
 * Documentation Actions Styles
 * Inspired by Kapso documentation design - https://docs.kapso.ai
 */

/* Main actions container - hidden by default, use floating version */
.docs-actions-container {
  display: none;
}

/* Floating actions dropdown - positioned next to H1 title (Kapso style) */
.docs-actions-floating {
  position: relative;
  flex-shrink: 0;
  z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dropdown container */
.docs-actions-dropdown {
  position: relative;
  display: inline-block;
}

/* Main trigger button - Kapso style */
.docs-actions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: #a1a1aa;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.docs-actions-trigger:hover {
  background: #1f1f23;
  border-color: #3f3f46;
  color: #e4e4e7;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.docs-actions-trigger:active {
  background: #18181b;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

/* Icon in trigger button */
.docs-actions-trigger::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.15s ease;
}

.docs-actions-trigger:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e4e4e7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'/%3E%3C/svg%3E");
}

/* Dropdown arrow */
.docs-actions-trigger::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease;
}

.docs-actions-trigger:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e4e4e7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

.docs-actions-trigger.active::after {
  transform: rotate(180deg);
}

/* Dropdown menu */
.docs-actions-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 14rem;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem) scale(0.98);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.docs-actions-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Menu items */
.docs-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  color: #a1a1aa;
  background: transparent;
  border: none;
  border-bottom: 1px solid #1f1f23;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.5;
}

.docs-menu-item:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.docs-menu-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.docs-menu-item:hover {
  background: #1f1f23;
  color: #e4e4e7;
}

.docs-menu-item:active {
  background: #18181b;
}

/* Menu item icon */
.docs-menu-item-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  opacity: 0.7;
  transition: opacity 0.1s ease;
}

.docs-menu-item:hover .docs-menu-item-icon {
  opacity: 1;
}

/* Menu item content */
.docs-menu-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.docs-menu-item-title {
  font-weight: 500;
  font-size: 0.75rem;
  color: #e4e4e7;
  transition: color 0.1s ease;
}

.docs-menu-item:hover .docs-menu-item-title {
  color: #fafafa;
}

.docs-menu-item-description {
  font-size: 0.625rem;
  color: #71717a;
  line-height: 1.4;
  transition: color 0.1s ease;
}

.docs-menu-item:hover .docs-menu-item-description {
  color: #a1a1aa;
}

/* SVG Icons for menu items */
.icon-copy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fafafa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fafafa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-chatgpt {
  background-image: url("data:image/svg+xml,%3Csvg fill='%2310a37f' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-claude {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23cc9b7a' fill-rule='evenodd' viewBox='0 0 256 257' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Notifications - Kapso style */
.docs-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.875rem 1.25rem;
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #e4e4e7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.docs-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.docs-notification-success {
  border-left: 3px solid #10b981;
}

.docs-notification-error {
  border-left: 3px solid #ef4444;
}

.docs-notification-info {
  border-left: 3px solid #3b82f6;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .docs-actions-floating {
    position: static;
    margin-top: 0.5rem;
  }

  .docs-actions-menu {
    min-width: 14rem;
  }

  .docs-notification {
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}

/* Mobile adjustments */
@media screen and (max-width: 480px) {
  .docs-actions-trigger {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  .docs-actions-menu {
    min-width: 12rem;
    right: auto;
    left: 0;
  }

  .docs-menu-item {
    padding: 0.625rem 0.875rem;
  }

  .docs-menu-item-title {
    font-size: 0.8125rem;
  }

  .docs-menu-item-description {
    font-size: 0.6875rem;
  }

  .docs-notification {
    bottom: 1rem;
    right: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
  }
}

/* Light mode support (if needed) */
@media (prefers-color-scheme: light) {
  [data-md-color-scheme="default"] .docs-actions-trigger {
    background: #ffffff;
    color: #18181b;
    border-color: #e5e7eb;
  }

  [data-md-color-scheme="default"] .docs-actions-trigger:hover {
    background: #f9fafb;
    border-color: #d1d5db;
  }

  [data-md-color-scheme="default"] .docs-actions-menu {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  [data-md-color-scheme="default"] .docs-menu-item {
    color: #374151;
    border-bottom-color: #f3f4f6;
  }

  [data-md-color-scheme="default"] .docs-menu-item:hover {
    background: #f9fafb;
  }

  [data-md-color-scheme="default"] .docs-menu-item-title {
    color: #111827;
  }

  [data-md-color-scheme="default"] .docs-menu-item-description {
    color: #6b7280;
  }

  [data-md-color-scheme="default"] .docs-notification {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #374151;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}

/* Accessibility improvements */
.docs-actions-trigger:focus,
.docs-menu-item:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles - hide action buttons when printing */
@media print {
  .docs-actions-floating,
  .docs-notification {
    display: none !important;
  }
}