/* Tweet Embedding Styles */

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

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

details.tweet-details summary:hover {
    background: rgba(255, 255, 255, 0.05);
    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='%23aaaaaa' 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.8;
    transition: opacity 0.2s ease;
}

details.tweet-details summary:hover::before {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' 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");
}

/* Chevron indicator on the right */
details.tweet-details summary::after {
    content: '›';
    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: rgba(0, 0, 0, 0.2);
    min-height: 100px;
    /* Prevent collapse before load */
    align-items: center;
}

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