/* Social Media Generator Tools */
.sg-wrap { display: flex; gap: 0; min-height: 500px; }
.sg-form-col { width: 320px; flex-shrink: 0; padding: 20px; border-right: 1.5px solid var(--color-border); overflow-y: auto; }
.sg-preview-col { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px; background: #F1F5F9; position: relative; overflow: auto; }
#sg-preview { width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }

/* Download bar */
.sg-action-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--color-bg); border-top: 1.5px solid var(--color-border); }

/* Tweet mockup */
.sg-tweet { background: #fff; border: 1px solid #E7E7E7; border-radius: 16px; padding: 16px; width: 100%; max-width: 520px; box-sizing: border-box; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sg-tweet-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sg-tweet-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #1DA1F2; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.25rem; flex-shrink: 0; }
.sg-tweet-name { font-weight: 700; font-size: .9375rem; color: #0F1419; line-height: 1.2; }
.sg-tweet-handle { font-size: .875rem; color: #536471; }
.sg-tweet-body { font-size: 1.0625rem; color: #0F1419; line-height: 1.5; margin-bottom: 12px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.sg-tweet-meta { font-size: .875rem; color: #536471; border-top: 1px solid #EFF3F4; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.sg-tweet-stat { display: flex; align-items: center; gap: 4px; }
.sg-tweet-time { font-size: .8125rem; }
.sg-tweet-x-icon { margin-left: auto; color: #000; font-size: 1.25rem; flex-shrink: 0; }

/* Instagram post mockup */
.sg-ig-post { background: #fff; border: 1px solid #DBDBDB; border-radius: 4px; width: 100%; max-width: 400px; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.sg-ig-post-header { display: flex; align-items: center; gap: 10px; padding: 12px; }
.sg-ig-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .875rem; flex-shrink: 0; }
.sg-ig-username { font-weight: 600; font-size: .875rem; color: #262626; }
.sg-ig-image { width: 100%; background: #FAFAFA; min-height: 200px; display: flex; align-items: center; justify-content: center; color: #8E8E8E; font-size: .875rem; overflow: hidden; }
.sg-ig-image img { width: 100%; height: auto; display: block; max-height: 400px; object-fit: cover; }
.sg-ig-no-image { width: 100%; height: 300px; background: linear-gradient(135deg,#667eea,#764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .875rem; }
.sg-ig-actions { padding: 10px 12px; display: flex; gap: 14px; }
.sg-ig-action-icon { font-size: 1.375rem; color: #262626; cursor: default; }
.sg-ig-action-icon.is-end { margin-left: auto; }
.sg-ig-more { margin-left: auto; font-size: 1.5rem; color: #262626; line-height: 1; }
.sg-ig-likes { padding: 0 12px 4px; font-size: .875rem; font-weight: 700; color: #262626; }
.sg-ig-caption { padding: 2px 12px 10px; font-size: .875rem; color: #262626; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
.sg-ig-caption strong { font-weight: 600; margin-right: 4px; }

/* Instagram story mockup */
.sg-ig-story { width: 300px; max-width: 100%; height: 540px; border-radius: 16px; position: relative; overflow: hidden; background: #1A1A2E; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.sg-story-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.sg-story-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 14px; }
.sg-story-progress-bar { height: 2px; background: rgba(255,255,255,.9); border-radius: 1px; margin-bottom: 10px; }
.sg-story-header { display: flex; align-items: center; gap: 8px; }
.sg-story-progress { height: 2px; flex: 1; background: rgba(255,255,255,.3); border-radius: 1px; }
.sg-story-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .875rem; }
.sg-story-username { color: #fff; font-size: .8125rem; font-weight: 600; }
.sg-story-time { color: rgba(255,255,255,.7); font-size: .75rem; }
.sg-story-text { margin-top: auto; padding: 20px 0; color: #fff; font-size: 1.125rem; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.5); white-space: pre-wrap; overflow-wrap: anywhere; }

/* WhatsApp chat */
.sg-wa { width: 100%; max-width: 380px; border-radius: 12px; overflow: hidden; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.sg-wa-header { background: #075E54; color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.sg-wa-avatar { width: 38px; height: 38px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.sg-wa-name { font-weight: 600; font-size: .9375rem; }
.sg-wa-status { font-size: .75rem; opacity: .85; }
.sg-wa-body { background: #ECE5DD; padding: 12px; min-height: 200px; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYBgFgx8AAQAAAf//AwAI+AL1rwnOJwAAAABJRU5ErkJggg=="); }
.sg-wa-msg { max-width: 80%; padding: 7px 10px; border-radius: 8px; font-size: .875rem; line-height: 1.45; position: relative; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.sg-wa-msg.sent { background: #DCF8C6; align-self: flex-end; border-radius: 8px 8px 0 8px; }
.sg-wa-msg.recv { background: #fff; align-self: flex-start; border-radius: 8px 8px 8px 0; }
.sg-wa-time { font-size: .6875rem; color: #8696A0; text-align: right; margin-top: 2px; }

/* iMessage chat */
.sg-imsg { width: 100%; max-width: 360px; border-radius: 38px; overflow: hidden; font-family: -apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.2); background: #fff; }
.sg-imsg-header { background: #F2F2F7; border-bottom: 1px solid #E5E5EA; padding: 16px; text-align: center; }
.sg-imsg-today { font-size: .6875rem; color: #8E8E93; margin-bottom: 2px; }
.sg-imsg-contact { font-weight: 600; font-size: .9375rem; color: #000; }
.sg-imsg-body { background: #fff; padding: 12px; min-height: 200px; max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sg-imsg-msg { max-width: 75%; padding: 9px 14px; border-radius: 18px; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.sg-imsg-msg.sent { background: #007AFF; color: #fff; align-self: flex-end; border-radius: 18px 18px 4px 18px; }
.sg-imsg-msg.recv { background: #E5E5EA; color: #000; align-self: flex-start; border-radius: 18px 18px 18px 4px; }

/* Instagram DM */
.sg-ig-dm { width: 100%; max-width: 380px; border-radius: 12px; overflow: hidden; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: #fff; border: 1px solid #DBDBDB; }
.sg-ig-dm-header { padding: 12px 16px; border-bottom: 1px solid #DBDBDB; display: flex; align-items: center; gap: 10px; }
.sg-ig-dm-name { font-weight: 600; font-size: .875rem; color: #262626; }
.sg-empty-state { text-align: center; color: #8E8E8E; font-size: .875rem; margin: auto; padding: 20px; }
.sg-empty-state.is-wa { color: #8696A0; font-size: .8125rem; }
.sg-empty-state.is-imsg { color: #8E8E93; }
.sg-ig-dm-body { padding: 12px; min-height: 180px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: #FAFAFA; }
.sg-ig-dm-msg { max-width: 75%; padding: 8px 14px; border-radius: 20px; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.sg-ig-dm-msg.sent { background: linear-gradient(135deg,#405DE6,#833AB4,#C13584,#E1306C); color: #fff; align-self: flex-end; }
.sg-ig-dm-msg.recv { background: #EFEFEF; color: #262626; align-self: flex-start; }

/* Download button */
.sg-download-btn { background: var(--color-primary); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: .875rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s; }
.sg-download-btn:hover { background: var(--color-primary-dark); }

@media (max-width: 767.98px) {
    .sg-wrap { flex-direction: column; }
    .sg-form-col { width: 100%; border-right: none; border-bottom: 1.5px solid var(--color-border); }
    .sg-preview-col { padding: 20px; }
}
.sg-hint { font-size: .8125rem; }