/* Embedded Snippet Card Styles */


.embedded-snippet-card {
  margin: 2rem 0;
  border-radius: 0.5rem;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
  background: #eff6ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.embedded-snippet-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  opacity: 0.6;
}

.embedded-snippet-card:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateX(4px);
}


    .embedded-snippet-header {

      padding: 1rem 1.25rem;

      background: #dbeafe;

      border-bottom: 1px solid #bfdbfe;

      display: flex;

      justify-content: space-between;

      align-items: center;

      flex-wrap: wrap;

      gap: 0.5rem;

    }

    

    .embedded-snippet-title {

      font-size: 1.125rem;

      font-weight: 600;

      color: #1e40af;

      margin: 0;

      flex: 1;

      min-width: 0;

    }

    

    .embedded-snippet-title a {

      color: inherit;

      text-decoration: none;

      display: block;

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;

    }

    

    .embedded-snippet-title a:hover {

      text-decoration: underline;

    }

    
.embedded-snippet-content {
  padding: 1.5rem;
  background: #ffffff;
}

.embedded-snippet-content h1 {
  color: #3b82f6;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.embedded-snippet-content h1:first-child {
  margin-top: 0;
}

.embedded-snippet-content h2 {
  color: #3b82f6;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.embedded-snippet-content h2:first-child {
  margin-top: 0;
}

.embedded-snippet-content h3 {
  color: #60a5fa;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.embedded-snippet-content h4 {
  color: #60a5fa;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.embedded-snippet-content h5 {
  color: #60a5fa;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.embedded-snippet-content h6 {
  color: #60a5fa;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.embedded-snippet-content p {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.embedded-snippet-content > *:first-child {
  margin-top: 0;
}

.embedded-snippet-content > *:last-child {
  margin-bottom: 0;
}

.embedded-snippet-footer {
  padding: 0.75rem 1.25rem;
  background: #dbeafe;
  border-top: 1px solid #bfdbfe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #1e40af;
}

.embedded-snippet-date {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.embedded-snippet-date::before {
  content: '📅';
}

.embedded-snippet-actions {
  display: flex;
  gap: 0.5rem;
}

.embedded-snippet-toggle {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.2s;
}

.embedded-snippet-toggle:hover {
  background: #2563eb;
}

.embedded-snippet-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.embedded-snippet-link:hover {
  text-decoration: underline;
}

.embedded-snippet-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.embedded-snippet-tag {
  background: #dbeafe;
  color: #3b82f6;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.embedded-snippet-tag:hover {
  background: #bfdbfe;
}

.embedded-snippet-card.error {
  background: #fef2f2;
  border-left-color: #ef4444;
}

.embedded-snippet-card.error::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.embedded-snippet-card.error .embedded-snippet-header {
  background: #fee2e2;
  border-bottom-color: #fecaca;
}

.embedded-snippet-card.error .embedded-snippet-title {
  color: #991b1b;
}

.embedded-snippet-card.error .embedded-snippet-title::before {
  content: '⚠️';
}

.embedded-snippet-card.error .embedded-snippet-footer {
  background: #fee2e2;
  border-top-color: #fecaca;
}

.embedded-snippet-card.error .embedded-snippet-link {
  color: #dc2626;
}

@media (max-width: 768px) {
  .embedded-snippet-card {
    margin: 1.5rem 0;
    border-radius: 0.5rem;
  }

  .embedded-snippet-header {
    padding: 0.75rem 1rem;
  }

  .embedded-snippet-title {
    font-size: 1rem;
  }

  .embedded-snippet-content {
    padding: 1rem;
  }

  .embedded-snippet-content h3 {
    font-size: 1.125rem;
  }

  .embedded-snippet-content h4 {
    font-size: 1rem;
  }

  .embedded-snippet-content h5 {
    font-size: 0.875rem;
  }

  .embedded-snippet-footer {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 480px) {
  .embedded-snippet-card {
    margin: 1rem 0;
    border-radius: 0.375rem;
  }

  .embedded-snippet-header {
    padding: 0.5rem 0.75rem;
  }

  .embedded-snippet-title {
    font-size: 0.875rem;
  }

  .embedded-snippet-content {
    padding: 0.75rem;
  }

  .embedded-snippet-footer {
    padding: 0.5rem 0.75rem;
  }
}