/**
 * Platform Preview Mockups CSS
 * Realistic social platform mockups for content preview
 *
 * Supports: LinkedIn, Twitter/X, Instagram, Facebook
 * Adapted for MarketingAI Platform
 */

/* =========================================
   SHARED MOCKUP STYLES
   ========================================= */

/* Mockup Container Base */
.linkedin-mockup,
.twitter-mockup,
.instagram-mockup,
.facebook-mockup {
    border-radius: 0.75rem;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7e5e4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 500px;
    margin: 0 auto;
}

/* Platform Header Bars */
.linkedin-mockup-header,
.twitter-mockup-header,
.instagram-mockup-header,
.facebook-mockup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Character Counter Base */
.platform-char-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    border-top: 1px solid #e7e5e4;
    background: #fafaf9;
}

.platform-char-counter.char-ok {
    color: #6b6661;
}

.platform-char-counter.char-warning {
    color: #ca8a04;
    background: rgba(202, 138, 4, 0.05);
}

.platform-char-counter.char-over {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

.char-count-text {
    font-weight: 500;
}

.char-warning-badge,
.char-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
}

.char-warning-badge {
    color: #dc2626;
}

.char-info-badge {
    color: #6b6661;
}

/* Avatar with custom image */
.mockup-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* =========================================
   LINKEDIN MOCKUP STYLES
   ========================================= */

.linkedin-mockup-header {
    background: #0A66C2;
    color: white;
}

.linkedin-logo {
    flex-shrink: 0;
}

.linkedin-brand-text {
    letter-spacing: -0.3px;
}

.linkedin-post-card {
    background: white;
}

.linkedin-post-header {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 8px;
}

.linkedin-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.linkedin-avatar-placeholder {
    color: white;
}

.linkedin-author-info {
    flex: 1;
    min-width: 0;
}

.linkedin-author-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 1.33;
}

.linkedin-author-headline {
    display: block;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.linkedin-post-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.linkedin-post-time {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.linkedin-meta-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
}

.linkedin-globe-icon {
    color: rgba(0, 0, 0, 0.6);
}

.linkedin-more-btn {
    background: none;
    border: none;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: background 0.2s;
}

.linkedin-more-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.linkedin-post-content {
    padding: 0 16px 12px;
}

.linkedin-post-text {
    font-size: 14px;
    line-height: 1.43;
    color: rgba(0, 0, 0, 0.9);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.linkedin-see-more {
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.linkedin-see-more:hover {
    color: #0A66C2;
    text-decoration: underline;
}

.linkedin-engagement-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.linkedin-reactions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.linkedin-reaction-icons {
    display: flex;
}

.linkedin-reaction {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: -2px;
}

.linkedin-reaction:first-child {
    margin-left: 0;
}

.linkedin-like-icon {
    background: linear-gradient(180deg, #378FE9 0%, #0A66C2 100%);
}

.linkedin-celebrate-icon {
    background: linear-gradient(180deg, #56B478 0%, #1D8342 100%);
}

.linkedin-support-icon {
    background: linear-gradient(180deg, #C077B2 0%, #8C3F7A 100%);
}

.linkedin-actions {
    display: flex;
    padding: 4px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.linkedin-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: background 0.2s;
}

.linkedin-action-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
}

/* =========================================
   TWITTER/X MOCKUP STYLES
   ========================================= */

.twitter-mockup-header {
    background: #000000;
    color: white;
}

.twitter-logo {
    flex-shrink: 0;
}

.twitter-brand-text {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.twitter-tweet-card {
    background: white;
    padding: 12px 16px;
}

.twitter-tweet-header {
    display: flex;
    gap: 12px;
}

.twitter-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1DA1F2 0%, #0D8ECF 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.twitter-avatar-placeholder {
    color: white;
}

.twitter-tweet-body {
    flex: 1;
    min-width: 0;
}

.twitter-author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

.twitter-author-name {
    font-size: 15px;
    font-weight: 700;
    color: #0F1419;
}

.twitter-verified-badge {
    flex-shrink: 0;
}

.twitter-author-handle,
.twitter-time {
    font-size: 15px;
    color: #536471;
}

.twitter-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #536471;
}

.twitter-tweet-content {
    margin-bottom: 12px;
}

.twitter-tweet-text {
    font-size: 15px;
    line-height: 1.35;
    color: #0F1419;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.twitter-hashtag {
    color: #1D9BF0;
}

.twitter-tweet-actions {
    display: flex;
    justify-content: space-between;
    max-width: 425px;
    margin-top: 4px;
}

.twitter-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 8px;
    margin: -8px;
    border-radius: 50%;
    color: #536471;
    cursor: pointer;
    transition: all 0.2s;
}

.twitter-action-btn svg {
    transition: color 0.2s;
}

.twitter-action-count {
    font-size: 13px;
    min-width: 12px;
}

.twitter-reply:hover {
    color: #1D9BF0;
    background: rgba(29, 155, 240, 0.1);
}

.twitter-retweet:hover {
    color: #00BA7C;
    background: rgba(0, 186, 124, 0.1);
}

.twitter-like:hover {
    color: #F91880;
    background: rgba(249, 24, 128, 0.1);
}

.twitter-views:hover {
    color: #1D9BF0;
    background: rgba(29, 155, 240, 0.1);
}

.twitter-action-btn-group {
    display: flex;
    gap: 0;
}

.twitter-bookmark:hover,
.twitter-share:hover {
    color: #1D9BF0;
    background: rgba(29, 155, 240, 0.1);
}

/* Twitter Character Ring */
.twitter-char-ring {
    position: relative;
    width: 20px;
    height: 20px;
}

.twitter-char-circle {
    transform: rotate(-90deg);
}

.twitter-char-bg {
    fill: none;
    stroke: #EFF3F4;
    stroke-width: 2;
}

.twitter-char-progress {
    fill: none;
    stroke: #1D9BF0;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dasharray 0.2s;
}

.twitter-char-progress.warning {
    stroke: #FFD400;
}

.twitter-char-progress.over {
    stroke: #F4212E;
}

.twitter-char-remaining {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 500;
}

.twitter-char-remaining.warning {
    color: #FFD400;
}

.twitter-char-remaining.over {
    color: #F4212E;
}

/* =========================================
   INSTAGRAM MOCKUP STYLES
   ========================================= */

.instagram-mockup-header {
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
    color: white;
}

.instagram-logo {
    flex-shrink: 0;
}

.instagram-brand-text {
    font-weight: 500;
    letter-spacing: 0.5px;
}

.instagram-post-card {
    background: white;
}

.instagram-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
}

.instagram-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.instagram-avatar {
    width: 32px;
    height: 32px;
}

.instagram-avatar-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instagram-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.instagram-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8134AF;
}

.instagram-user-info {
    display: flex;
    flex-direction: column;
}

.instagram-username {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    line-height: 1.2;
}

.instagram-location {
    font-size: 12px;
    color: #262626;
}

.instagram-more-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #262626;
}

.instagram-post-image {
    width: 100%;
    aspect-ratio: 1;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instagram-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #8E8E8E;
    font-size: 14px;
}

.instagram-post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 0;
}

.instagram-actions-left {
    display: flex;
    gap: 16px;
}

.instagram-action-btn {
    background: none;
    border: none;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    color: #262626;
    transition: opacity 0.2s;
}

.instagram-action-btn:hover {
    opacity: 0.6;
}

.instagram-likes {
    padding: 0 12px 8px;
}

.instagram-likes-count {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
}

.instagram-caption {
    padding: 0 12px 8px;
    font-size: 14px;
    line-height: 1.35;
    color: #262626;
}

.instagram-caption-username {
    font-weight: 600;
    margin-right: 4px;
}

.instagram-caption-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.instagram-hashtag {
    color: #00376B;
}

.instagram-more-text {
    background: none;
    border: none;
    padding: 0;
    color: #8E8E8E;
    cursor: pointer;
    font-size: 14px;
}

.instagram-timestamp {
    padding: 0 12px 12px;
    font-size: 10px;
    color: #8E8E8E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.instagram-add-comment {
    display: flex;
    align-items: center;
    padding: 12px;
    border-top: 1px solid #EFEFEF;
    gap: 12px;
}

.instagram-emoji-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #262626;
}

.instagram-comment-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #262626;
    background: transparent;
}

.instagram-comment-input::placeholder {
    color: #8E8E8E;
}

.instagram-post-comment-btn {
    background: none;
    border: none;
    color: #0095F6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.3;
}

.instagram-post-comment-btn:not(:disabled) {
    opacity: 1;
}

/* =========================================
   FACEBOOK MOCKUP STYLES
   ========================================= */

.facebook-mockup-header {
    background: #1877F2;
    color: white;
}

.facebook-logo {
    flex-shrink: 0;
}

.facebook-brand-text {
    font-weight: 700;
    letter-spacing: -0.3px;
}

.facebook-post-card {
    background: white;
}

.facebook-post-header {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 8px;
}

.facebook-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1877F2 0%, #0D65D9 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.facebook-avatar-placeholder {
    color: white;
}

.facebook-post-info {
    flex: 1;
    min-width: 0;
}

.facebook-author-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #050505;
    line-height: 1.33;
}

.facebook-author-name:hover {
    text-decoration: underline;
    cursor: pointer;
}

.facebook-post-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.facebook-post-time {
    font-size: 13px;
    color: #65676B;
}

.facebook-meta-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #65676B;
}

.facebook-globe-icon {
    color: #65676B;
}

.facebook-more-btn {
    background: none;
    border: none;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    color: #65676B;
    border-radius: 50%;
    transition: background 0.2s;
}

.facebook-more-btn:hover {
    background: #F0F2F5;
}

.facebook-post-content {
    padding: 4px 16px 12px;
}

.facebook-post-text {
    font-size: 15px;
    line-height: 1.33;
    color: #050505;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.facebook-see-more {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    color: #65676B;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.facebook-see-more:hover {
    text-decoration: underline;
}

.facebook-post-image {
    width: 100%;
}

.facebook-image {
    width: 100%;
    display: block;
}

.facebook-engagement-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 15px;
    color: #65676B;
}

.facebook-reactions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.facebook-reaction-icons {
    display: flex;
}

.facebook-reaction {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -4px;
}

.facebook-reaction:first-child {
    margin-left: 0;
}

.facebook-like-reaction {
    background: linear-gradient(180deg, #18AFFF 0%, #0062DF 100%);
}

.facebook-love-reaction {
    background: linear-gradient(180deg, #FF6680 0%, #ED1C24 100%);
}

.facebook-comment-share-count {
    display: flex;
    gap: 16px;
}

.facebook-comment-share-count span {
    cursor: pointer;
}

.facebook-comment-share-count span:hover {
    text-decoration: underline;
}

.facebook-actions {
    display: flex;
    padding: 4px 16px;
    border-top: 1px solid #CED0D4;
    border-bottom: 1px solid #CED0D4;
}

.facebook-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 4px;
    background: none;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #65676B;
    cursor: pointer;
    transition: background 0.2s;
}

.facebook-action-btn:hover {
    background: #F0F2F5;
}

.facebook-comment-box {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
}

.facebook-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E4E6EB;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facebook-comment-avatar-placeholder {
    color: #65676B;
}

.facebook-comment-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #F0F2F5;
    border-radius: 20px;
    padding: 8px 12px;
    gap: 8px;
}

.facebook-comment-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #050505;
}

.facebook-comment-input::placeholder {
    color: #65676B;
}

.facebook-comment-actions {
    display: flex;
    gap: 4px;
}

.facebook-comment-action {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #65676B;
    border-radius: 50%;
    transition: background 0.2s;
}

.facebook-comment-action:hover {
    background: #E4E6EB;
}

/* =========================================
   TAB NAVIGATION STYLES
   ========================================= */

.platform-tabs {
    display: flex;
    border-bottom: 1px solid #e7e5e4;
    background: #fafaf9;
    border-radius: 0.75rem 0.75rem 0 0;
    overflow: hidden;
}

.platform-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b6661;
    cursor: pointer;
    transition: all 0.2s;
}

.platform-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #2d2926;
}

.platform-tab.active {
    color: #2d2926;
    border-bottom-color: currentColor;
}

.platform-tab.active.twitter {
    color: #000000;
}

.platform-tab.active.linkedin {
    color: #0A66C2;
}

.platform-tab.active.instagram {
    color: #E1306C;
}

.platform-tab.active.facebook {
    color: #1877F2;
}

.platform-tab-icon {
    width: 18px;
    height: 18px;
}

.platform-tab-label {
    display: none;
}

@media (min-width: 480px) {
    .platform-tab-label {
        display: inline;
    }
}

/* Tab Content */
.platform-tab-content {
    display: none;
}

.platform-tab-content.active {
    display: block;
}

/* Copy Button */
.platform-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 12px 16px;
    background: #f4f3f0;
    border: 1px solid #e7e5e4;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #2d2926;
    cursor: pointer;
    transition: all 0.2s;
}

.platform-copy-btn:hover {
    background: #e7e5e4;
}

.platform-copy-btn.copied {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* =========================================
   RESPONSIVE STYLES
   ========================================= */

@media (max-width: 480px) {
    /* Reduce padding on mobile */
    .linkedin-post-header,
    .linkedin-post-content,
    .linkedin-engagement-stats,
    .linkedin-actions {
        padding-left: 12px;
        padding-right: 12px;
    }

    .twitter-tweet-card {
        padding: 12px;
    }

    .instagram-post-header,
    .instagram-likes,
    .instagram-caption,
    .instagram-timestamp,
    .instagram-add-comment {
        padding-left: 10px;
        padding-right: 10px;
    }

    .facebook-post-header,
    .facebook-post-content,
    .facebook-engagement-stats,
    .facebook-actions,
    .facebook-comment-box {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Smaller avatars on mobile */
    .linkedin-avatar {
        width: 40px;
        height: 40px;
    }

    .twitter-avatar {
        width: 36px;
        height: 36px;
    }

    .facebook-avatar {
        width: 36px;
        height: 36px;
    }

    /* Smaller fonts on mobile */
    .linkedin-post-text,
    .twitter-tweet-text,
    .facebook-post-text {
        font-size: 14px;
    }

    /* Adjust action buttons */
    .linkedin-action-btn span,
    .facebook-action-btn span {
        display: none;
    }

    .linkedin-action-btn,
    .facebook-action-btn {
        padding: 10px;
    }
}

/* =========================================
   DARK MODE SUPPORT
   ========================================= */

.dark .linkedin-mockup,
.dark .twitter-mockup,
.dark .instagram-mockup,
.dark .facebook-mockup {
    background: #262626;
    border-color: #404040;
}

.dark .platform-char-counter {
    border-color: #404040;
    background: #1a1918;
}

.dark .platform-char-counter.char-ok {
    color: #a8a29e;
}

.dark .platform-tabs {
    background: #1a1918;
    border-color: #404040;
}

.dark .platform-tab {
    color: #a8a29e;
}

.dark .platform-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e7e5e4;
}

.dark .platform-tab.active {
    color: #e7e5e4;
}

.dark .platform-copy-btn {
    background: #1a1918;
    border-color: #404040;
    color: #e7e5e4;
}

.dark .platform-copy-btn:hover {
    background: #2d2926;
}

/* LinkedIn Dark Mode */
.dark .linkedin-post-card {
    background: #1D2226;
}

.dark .linkedin-author-name,
.dark .linkedin-post-text {
    color: rgba(255, 255, 255, 0.9);
}

.dark .linkedin-author-headline,
.dark .linkedin-post-time,
.dark .linkedin-action-btn,
.dark .linkedin-see-more {
    color: rgba(255, 255, 255, 0.6);
}

.dark .linkedin-more-btn:hover,
.dark .linkedin-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.dark .linkedin-engagement-stats {
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.dark .linkedin-actions {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Twitter Dark Mode */
.dark .twitter-tweet-card {
    background: #000000;
}

.dark .twitter-author-name,
.dark .twitter-tweet-text {
    color: #E7E9EA;
}

.dark .twitter-author-handle,
.dark .twitter-time,
.dark .twitter-action-btn {
    color: #71767B;
}

.dark .twitter-char-bg {
    stroke: #2F3336;
}

/* Instagram Dark Mode */
.dark .instagram-post-card {
    background: #000000;
}

.dark .instagram-username,
.dark .instagram-location,
.dark .instagram-likes-count,
.dark .instagram-caption,
.dark .instagram-action-btn {
    color: #F5F5F5;
}

.dark .instagram-timestamp,
.dark .instagram-more-text,
.dark .instagram-image-placeholder {
    color: #A8A8A8;
}

.dark .instagram-post-image {
    background: #121212;
}

.dark .instagram-add-comment {
    border-color: #262626;
}

.dark .instagram-comment-input {
    color: #F5F5F5;
}

.dark .instagram-comment-input::placeholder {
    color: #A8A8A8;
}

/* Facebook Dark Mode */
.dark .facebook-post-card {
    background: #242526;
}

.dark .facebook-author-name,
.dark .facebook-post-text {
    color: #E4E6EB;
}

.dark .facebook-post-time,
.dark .facebook-action-btn,
.dark .facebook-see-more,
.dark .facebook-engagement-stats {
    color: #B0B3B8;
}

.dark .facebook-more-btn:hover,
.dark .facebook-action-btn:hover {
    background: #3A3B3C;
}

.dark .facebook-actions {
    border-color: #3E4042;
}

.dark .facebook-comment-input-wrapper {
    background: #3A3B3C;
}

.dark .facebook-comment-input {
    color: #E4E6EB;
}

.dark .facebook-comment-input::placeholder {
    color: #B0B3B8;
}

.dark .facebook-comment-avatar {
    background: #3A3B3C;
}

.dark .facebook-comment-action:hover {
    background: #4E4F50;
}

/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .linkedin-action-btn,
    .twitter-action-btn,
    .instagram-action-btn,
    .facebook-action-btn,
    .linkedin-more-btn,
    .facebook-more-btn,
    .twitter-char-progress,
    .platform-tab,
    .platform-copy-btn {
        transition: none;
    }
}