/* ==========================================================
   Fake Telegram Chat Generator v2 – Pixel-Perfect
   ========================================================== */

/* ---------- RESET ---------- */
.ftcg-app *,
.ftcg-app *::before,
.ftcg-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- LAYOUT ---------- */
.ftcg-app {
    display: flex;
    gap: 36px;
    max-width: 1040px;
    margin: 32px auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #222;
    line-height: 1.45;
}

/* ===========================
   CONTROLS PANEL
   =========================== */
.ftcg-panel {
    flex: 0 0 370px;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 28px 24px;
    height: fit-content;
    position: sticky;
    top: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.ftcg-panel-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
}
.ftcg-panel-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}
.ftcg-section { margin-bottom: 18px; }
.ftcg-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #999;
    margin-bottom: 8px;
}
.ftcg-sublabel {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
    display: block;
}
.ftcg-row { display: flex; gap: 10px; align-items: flex-start; }
.ftcg-col { display: flex; flex-direction: column; }

/* Inputs */
.ftcg-panel input[type="text"],
.ftcg-panel input[type="number"],
.ftcg-panel select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    color: #222;
    outline: none;
    transition: border .2s;
}
.ftcg-panel input:focus, .ftcg-panel select:focus { border-color: #2AABEE; }
.ftcg-panel select { cursor: pointer; }

/* Segment toggle */
.ftcg-seg { display: flex; background: #f0f0f0; border-radius: 8px; overflow: hidden; }
.ftcg-seg-btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: .2s;
}
.ftcg-seg-btn.active {
    background: #fff;
    color: #222;
    border-radius: 7px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Avatar upload */
.ftcg-avatar-upload {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #e8e8e8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px dashed #ccc;
    transition: border-color .2s;
}
.ftcg-avatar-upload:hover { border-color: #2AABEE; }
.ftcg-avatar-upload input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.ftcg-avatar-upload img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
#ftcg-avatar-placeholder {
    font-size: 22px; color: #bbb; font-weight: 300;
}

/* Messages list */
.ftcg-msg-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 4px;
}
.ftcg-msg-item {
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    position: relative;
}
.ftcg-msg-item-head {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
.ftcg-msg-item-head select,
.ftcg-msg-item-head input {
    padding: 5px 7px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
}
.ftcg-msg-item-head input { flex: 1; }
.ftcg-msg-item textarea {
    width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    border: 1px solid #eee;
    border-radius: 8px;
    resize: vertical;
    min-height: 34px;
    background: #fff;
    outline: none;
    font-family: inherit;
}
.ftcg-msg-item textarea:focus { border-color: #2AABEE; }
.ftcg-msg-del {
    position: absolute; top: 6px; right: 6px;
    width: 20px; height: 20px; border: none;
    background: #E53935; color: #fff;
    font-size: 15px; line-height: 20px;
    text-align: center; border-radius: 50%;
    cursor: pointer; padding: 0;
    opacity: 0; transition: opacity .15s;
}
.ftcg-msg-item:hover .ftcg-msg-del { opacity: 1; }

/* Date separator item */
.ftcg-date-item {
    background: #f0f7ff;
    border: 1px solid #d0e3f5;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    display: flex; align-items: center; gap: 8px;
}
.ftcg-date-item input {
    flex: 1;
    padding: 6px 9px;
    font-size: 13px;
    border: 1px solid #d0e3f5;
    border-radius: 6px;
    background: #fff;
    outline: none;
}
.ftcg-date-item .ftcg-date-tag {
    font-size: 10px; font-weight: 700;
    color: #2AABEE; text-transform: uppercase;
    white-space: nowrap;
}
.ftcg-date-item .ftcg-msg-del { background: #d32f2f; }
.ftcg-date-item:hover .ftcg-msg-del { opacity: 1; }

/* Buttons */
.ftcg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 16px;
    border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: .2s;
    width: 100%;
}
.ftcg-btn-outline {
    background: #f0f0f0; color: #333;
}
.ftcg-btn-outline:hover { background: #e4e4e4; }
.ftcg-btn-outline-alt {
    background: #e8f4fd; color: #2AABEE;
}
.ftcg-btn-outline-alt:hover { background: #d4ecf9; }
.ftcg-btn-primary {
    background: #2AABEE; color: #fff;
    padding: 14px 16px; font-size: 15px;
    border-radius: 12px; margin-top: 6px;
}
.ftcg-btn-primary:hover { background: #1e9ad8; }

/* ===========================
   PREVIEW AREA
   =========================== */
.ftcg-preview-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ftcg-preview-badge {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: #bbb; margin-bottom: 10px;
}
.ftcg-phone {
    width: 390px;
    border-radius: 44px;
    background: #000;
    padding: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
    position: sticky;
    top: 24px;
}

/* ===========================
   TELEGRAM SCREEN
   =========================== */
.ftcg-screen {
    width: 366px;
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Light Theme --- */
.ftcg-light {
    --tg-bg: #DFDAC4;
    --tg-header: #527DA3;
    --tg-header-text: #fff;
    --tg-bubble-out-start: #AEDE85;
    --tg-bubble-out-end: #C8EE9E;
    --tg-bubble-in: #FFFFFF;
    --tg-text: #000;
    --tg-time-out: #45A33D;
    --tg-time-in: #A0A0A0;
    --tg-tick: #4FAE40;
    --tg-date-bg: rgba(106,135,90,0.42);
    --tg-date-text: #fff;
    --tg-statusbar: #3D6D8E;
    --tg-sb-text: #fff;
    --tg-input-bg: #fff;
    --tg-input-icon: #8E8E93;
    --tg-wallpaper: #DFDAC4;
}

/* --- Dark Theme --- */
.ftcg-dark {
    --tg-bg: #0E1621;
    --tg-header: #17212B;
    --tg-header-text: #fff;
    --tg-bubble-out-start: #2B5278;
    --tg-bubble-out-end: #2B5278;
    --tg-bubble-in: #182533;
    --tg-text: #F5F5F5;
    --tg-time-out: #6DB0DA;
    --tg-time-in: #6D7F8E;
    --tg-tick: #69B4DF;
    --tg-date-bg: rgba(0,0,0,0.35);
    --tg-date-text: #fff;
    --tg-statusbar: #0E1621;
    --tg-sb-text: #fff;
    --tg-input-bg: #17212B;
    --tg-input-icon: #6D7F8E;
    --tg-wallpaper: #0E1621;
}

/* --- iOS Status Bar --- */
.tg-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px 8px;
    background: var(--tg-statusbar);
    color: var(--tg-sb-text);
}
.tg-sb-time {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}
.tg-sb-right {
    display: flex; align-items: center; gap: 5px;
}
.tg-sb-icon { color: var(--tg-sb-text); }
.tg-sb-batt {
    display: flex; align-items: center; gap: 3px;
}
.tg-sb-batt-outline {
    width: 24px; height: 11px;
    border: 1.5px solid var(--tg-sb-text);
    border-radius: 3px;
    padding: 1px;
    position: relative;
}
.tg-sb-batt-outline::after {
    content: '';
    position: absolute;
    right: -4px; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 5px;
    background: var(--tg-sb-text);
    border-radius: 0 1px 1px 0;
}
.tg-sb-batt-fill {
    height: 100%;
    background: var(--tg-sb-text);
    border-radius: 1px;
    transition: width .3s;
}
.tg-sb-batt-pct {
    font-size: 12px; font-weight: 600;
}

/* --- Telegram Header (matches screenshot exactly) --- */
.tg-header {
    display: flex;
    align-items: center;
    padding: 6px 10px 10px;
    background: var(--tg-header);
    color: var(--tg-header-text);
}
.tg-header-left {
    display: flex; align-items: center; gap: 2px;
}
.tg-back-arrow { opacity: .95; }
.tg-unread-badge {
    background: var(--tg-header-text);
    color: var(--tg-header);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 22px;
    text-align: center;
}
.tg-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.tg-header-name {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tg-header-status {
    font-size: 13px;
    opacity: .75;
}
.tg-header-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #7EB8DC;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
}
.tg-header-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --- Chat Body with Telegram wallpaper --- */
.tg-body {
    flex: 1;
    padding: 6px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 420px;
    overflow-y: auto;
    position: relative;
}
.ftcg-light .tg-body {
    background-color: #DFDAC4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23c7c2a8' fill-opacity='0.35'%3E%3Cpath d='M30 20l4-3 3 4-4 3zM70 45l-2 5h-5l4-4zM120 15l3 3-3 3-3-3zM160 55l-4 2-2-4 4-2zM25 80l5 1-1 5-5-1zM90 75l2-4 4 2-2 4zM145 90l-3-4 4-3 3 4zM50 120l-4 3-3-4 4-3zM105 110l4-2 2 4-4 2zM170 120l-2 5h-5l4-4zM35 155l3 3-3 3-3-3zM80 145l5 1-1 5-5-1zM130 160l-4 2-2-4 4-2zM175 165l-3-4 4-3 3 4zM60 185l-2 5h-5l4-4zM155 185l3 3-3 3-3-3z'/%3E%3Ccircle cx='15' cy='45' r='2'/%3E%3Ccircle cx='95' cy='40' r='1.5'/%3E%3Ccircle cx='180' cy='30' r='2'/%3E%3Ccircle cx='55' cy='95' r='1.5'/%3E%3Ccircle cx='140' cy='55' r='1.5'/%3E%3Ccircle cx='10' cy='130' r='2'/%3E%3Ccircle cx='115' cy='145' r='1.5'/%3E%3Ccircle cx='185' cy='95' r='2'/%3E%3Ccircle cx='45' cy='170' r='1.5'/%3E%3Ccircle cx='165' cy='145' r='2'/%3E%3Cpath d='M20 60c3-1 5 1 4 4s-4 3-4 0zM75 15c2 2 0 5-3 4s-1-5 3-4zM140 30c3-1 5 1 4 4s-4 3-4 0zM100 55c2 2 0 5-3 4s-1-5 3-4zM45 40c2-2 5 0 4 3s-5 1-4-3zM165 80c3-1 5 1 4 4s-4 3-4 0zM65 70c2 2 0 5-3 4s-1-5 3-4zM190 50c2-2 5 0 4 3s-5 1-4-3z'/%3E%3Cpath d='M10 100l6 2-2 6-6-2zM80 110l6 2-2 6-6-2zM150 105l6 2-2 6-6-2zM40 140l6 2-2 6-6-2zM110 130l6 2-2 6-6-2zM180 140l6 2-2 6-6-2zM25 175l6 2-2 6-6-2zM95 170l6 2-2 6-6-2zM165 175l6 2-2 6-6-2z'/%3E%3C/g%3E%3C/svg%3E");
}
.ftcg-dark .tg-body {
    background: var(--tg-wallpaper);
}

/* --- Date Separator Pill --- */
.tg-date-pill {
    align-self: center;
    background: var(--tg-date-bg);
    color: var(--tg-date-text);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    margin: 6px 0 4px;
    text-align: center;
}

/* --- Message Bubbles --- */
.tg-row {
    display: flex;
    margin-bottom: 1px;
}
.tg-row-out { justify-content: flex-end; padding-right: 4px; }
.tg-row-in  { justify-content: flex-start; padding-left: 4px; }

.tg-bubble {
    max-width: 78%;
    padding: 6px 10px 4px;
    font-size: 16px;
    line-height: 1.35;
    color: var(--tg-text);
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Outgoing bubble */
.tg-row-out .tg-bubble {
    background: linear-gradient(135deg, var(--tg-bubble-out-start), var(--tg-bubble-out-end));
    border-radius: 12px 12px 4px 12px;
}
/* Tail for outgoing */
.tg-row-out .tg-bubble.tg-tail::after {
    content: '';
    position: absolute;
    bottom: 0; right: -8px;
    width: 12px; height: 12px;
    background: radial-gradient(ellipse at top left, var(--tg-bubble-out-end) 50%, transparent 50%);
}

/* Incoming bubble */
.tg-row-in .tg-bubble {
    background: var(--tg-bubble-in);
    border-radius: 12px 12px 12px 4px;
}
.tg-row-in .tg-bubble.tg-tail::after {
    content: '';
    position: absolute;
    bottom: 0; left: -8px;
    width: 12px; height: 12px;
    background: radial-gradient(ellipse at top right, var(--tg-bubble-in) 50%, transparent 50%);
}

/* Meta (time + ticks) */
.tg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 1px;
    float: right;
    margin-left: 12px;
    padding-top: 2px;
}
.tg-time {
    font-size: 11px;
    font-weight: 400;
}
.tg-row-out .tg-time { color: var(--tg-time-out); }
.tg-row-in .tg-time { color: var(--tg-time-in); }

/* Double tick (✓✓) */
.tg-ticks {
    display: inline-flex;
    color: var(--tg-tick);
}
.tg-ticks svg { width: 18px; height: 18px; }

/* --- Input Bar --- */
.tg-inputbar {
    display: flex;
    align-items: center;
    padding: 6px 6px 20px;
    gap: 6px;
    background: var(--tg-input-bg);
    border-top: .5px solid rgba(0,0,0,.06);
}
.tg-input-icon {
    flex-shrink: 0;
    color: var(--tg-input-icon);
    opacity: .6;
}
.tg-input-field {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--tg-input-bg);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    padding: 7px 10px;
    position: relative;
}
.tg-input-placeholder {
    flex: 1;
    font-size: 15px;
    color: var(--tg-input-icon);
    opacity: .5;
}
.tg-input-emoji {
    color: var(--tg-input-icon);
    opacity: .5;
}
.tg-mic {
    color: var(--tg-input-icon);
    opacity: .6;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 820px) {
    .ftcg-app {
        flex-direction: column;
        align-items: center;
    }
    .ftcg-panel {
        flex: none;
        width: 100%;
        max-width: 420px;
        position: static;
    }
    .ftcg-phone {
        position: static;
    }
}
@media (max-width: 420px) {
    .ftcg-phone {
        width: 100%;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    .ftcg-screen {
        width: 100%;
        border-radius: 0;
    }
}