/* Fake Tweet Generator Specific UI */

.hidden { display: none !important; }

/* Layout Grid */
.tg-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.tg-controls-panel {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.tg-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.tg-section-title i { color: var(--primary); margin-right: 8px; }

.tg-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tg-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tg-textarea { height: 100px; resize: none; }

/* Checkboxes */
.tg-toggle-grid {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    padding: 10px 0;
}

.tg-toggle-label {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
}

.tg-toggle-label input { margin-right: 8px; width: 18px; height: 18px; accent-color: var(--primary); }

/* Preview Panel */
.tg-preview-panel {
    position: sticky;
    top: 100px;
}

.tg-preview-wrapper {
    background: #e2e8f0; /* Neutral background to make the tweet pop */
    padding: 30px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* --- THE TWEET ITSELF (Mimicking X/Twitter) --- */
.tg-tweet-box {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    padding: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    transition: background 0.3s, color 0.3s;
}

/* Theme Variables inside Tweet */
.tg-tweet-box.light-mode {
    background: #ffffff;
    color: #0f1419;
    border: 1px solid #eff3f4;
    --tw-muted: #536471;
    --tw-border: #eff3f4;
    --tw-icon: #536471;
    --tw-verified: #1d9bf0;
}

.tg-tweet-box.dark-mode {
    background: #000000;
    color: #e7e9ea;
    border: 1px solid #2f3336;
    --tw-muted: #71767b;
    --tw-border: #2f3336;
    --tw-icon: #71767b;
    --tw-verified: #1d9bf0;
}

/* Header */
.tg-tw-header { display: flex; align-items: center; margin-bottom: 12px; }
.tg-tw-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 12px; object-fit: cover; }
.tg-tw-user-info { flex-grow: 1; display: flex; flex-direction: column; }
.tg-tw-name-row { display: flex; align-items: center; }
.tg-tw-name { font-weight: 700; font-size: 15px; line-height: 20px; word-break: break-word; }
.tg-tw-verified { width: 1.25em; height: 1.25em; fill: var(--tw-verified); margin-left: 4px; }
.tg-tw-handle { color: var(--tw-muted); font-size: 15px; line-height: 20px; }
.tg-tw-options { color: var(--tw-icon); font-size: 18px; }

/* Body */
.tg-tw-body { font-size: 17px; line-height: 24px; word-wrap: break-word; white-space: pre-wrap; margin-bottom: 15px; }

/* Date Row */
.tg-tw-date-row { color: var(--tw-muted); font-size: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--tw-border); }
.tg-tw-views strong { color: inherit; font-weight: 700; }
.tg-tw-views { color: inherit; }

/* Metrics Row */
.tg-tw-metrics-row { display: flex; justify-content: space-between; color: var(--tw-icon); padding: 5px 0; border-bottom: 1px solid var(--tw-border); }
.tg-tw-metric { display: flex; align-items: center; font-size: 14px; }
.tg-tw-metric i { font-size: 18px; margin-right: 8px; }
.tg-tw-metric span { font-weight: 400; }

@media (max-width: 992px) {
    .tg-split-layout { grid-template-columns: 1fr; }
    .tg-preview-panel { position: static; margin-top: 20px; }
}