/* Tweet Embedding Styles */

details.tweet-details {
  margin: 1.5em 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--accent-bg);
  overflow: hidden;
  transition: all 0.3s ease;
}

details.tweet-details summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-color);
  background: var(--details-bg);
  display: flex;
  align-items: center;
  transition: background 0.2s ease, color 0.2s ease;
  list-style: none;
}

details.tweet-details summary:hover {
  background: var(--accent-bg-hover);
  color: var(--primary-color);
}

details.tweet-details summary::-webkit-details-marker {
  display: none;
}

/* Twitter Icon */
details.tweet-details summary::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 12px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

details.tweet-details summary:hover::before {
  opacity: 1;
}

/* Chevron indicator on the right */
details.tweet-details summary::after {
  content: '\203A';
  margin-left: auto;
  font-size: 1.2em;
  color: var(--lighter-gray);
  transition: transform 0.3s ease;
  line-height: 1;
}

details.tweet-details[open] summary::after {
  transform: rotate(90deg);
}

details.tweet-details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

.tweet-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  background: var(--details-bg);
  min-height: 100px;
  align-items: center;
}

.tweet-loading {
  color: var(--lighter-gray);
  font-style: italic;
  font-size: 0.9em;
}