/* --- Main Layout & Controls --- */
.ftcgd-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    font-family: 'Inter', 'Roboto', sans-serif;
    max-width: 1280px;
    margin: auto;
}
@media (min-width: 1024px) {
    .ftcgd-container { grid-template-columns: 400px 1fr; }
}
.ftcgd-controls {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    height: fit-content;
}
.ftcgd-title { font-size: 1.5rem; font-weight: 700; color: #1f2937; border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin: 0; }
.ftcgd-space-y-6 { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.ftcgd-space-y-4 { display: flex; flex-direction: column; gap: 1rem; }
.ftcgd-subtitle { font-size: 1.125rem; font-weight: 600; color: #374151; }
.ftcgd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ftcgd-controls label { display: block; font-size: 0.875rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem; }
.ftcgd-input, .ftcgd-select, .ftcgd-textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; transition: all 0.2s; box-sizing: border-box; }
.ftcgd-input:focus, .ftcgd-select:focus, .ftcgd-textarea:focus { box-shadow: 0 0 0 2px #6366f1; border-color: #6366f1; outline: none; }
.ftcgd-file-input { font-size: 0.875rem; width: 100%; }
.ftcgd-separator { padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.ftcgd-box { background-color: #f9fafb; padding: 1rem; border-radius: 0.75rem; display: flex; flex-direction: column; gap: 1rem; }
.ftcgd-box-title { font-weight: 600; color: #374151; margin: 0; }
.ftcgd-checkbox-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.ftcgd-checkbox { height: 1rem; width: 1rem; border-radius: 0.25rem; }
.ftcgd-checkbox-wrapper label { margin: 0; }
.ftcgd-sender-toggle { display: flex; gap: 0.25rem; background-color: #e5e7eb; padding: 0.25rem; border-radius: 0.5rem; }
.ftcgd-sender-toggle button { width: 100%; border: none; background-color: transparent; border-radius: 0.375rem; padding: 0.25rem 0; font-size: 0.875rem; font-weight: 500; color: #4b5563; cursor: pointer; transition: all 0.2s; }
.ftcgd-sender-toggle button.active { background-color: #ffffff; color: #1f2937; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.ftcgd-btn-add { background-color: #10b981; color: #ffffff; width: 100%; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.ftcgd-btn-add:hover { background-color: #059669; }
.ftcgd-btn-download { background-color: #3b82f6; color: #ffffff; width: 100%; padding: 0.75rem 1rem; border: none; border-radius: 0.75rem; font-weight: 700; font-size: 1.125rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.ftcgd-btn-download:hover { background-color: #2563eb; }
.ftcgd-icon { height: 1.5rem; width: 1.5rem; }

/* --- Preview Area --- */
.ftcgd-preview-wrapper { display: flex; align-items: flex-start; justify-content: center; }
.ftcgd-phone-frame { background-color: #1f2937; border-radius: 2.5rem; padding: 0.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.ftcgd-phone-inner { background-color: #000000; border-radius: 2rem; overflow: hidden; }
#ftcgd-preview-area { width: 375px; }
.ftcgd-header { display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid; }
.ftcgd-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 0.75rem; object-fit: cover; background-color: #ccc; }
.ftcgd-name-wrapper { display: flex; align-items: center; gap: 0.25rem; }
.ftcgd-name { font-weight: 600; }
.ftcgd-verified-icon { width: 16px; height: 16px; }
.ftcgd-status { font-size: 0.875rem; }
.ftcgd-chat-bg { height: 500px; padding: 0.75rem; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; }
.ftcgd-chat-messages { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.ftcgd-message { display: flex; max-width: 80%; }
.ftcgd-message.me { align-self: flex-end; }
.ftcgd-message.them { align-self: flex-start; }
.ftcgd-bubble { padding: 0.5rem 0.75rem; word-wrap: break-word; }
.ftcgd-bubble p { margin: 0 0 0.25rem 0; font-size: 0.9rem; line-height: 1.4; }
.ftcgd-time { font-size: 0.75rem; text-align: right; }

/* --- Day Mode --- */
#ftcgd-preview-area.theme-day .ftcgd-header { background-color: #f7f7f7; border-color: #e5e5e5; }
#ftcgd-preview-area.theme-day .ftcgd-chat-bg { background-image: url('https://i.pinimg.com/736x/8c/98/99/8c98994518b575bfd8c949e91d20548b.jpg'); }
#ftcgd-preview-area.theme-day .ftcgd-name { color: #000000; }
#ftcgd-preview-area.theme-day .ftcgd-status { color: #007aff; }
#ftcgd-preview-area.theme-day .ftcgd-bubble.me { background-color: #e1ffc7; }
#ftcgd-preview-area.theme-day .ftcgd-bubble.them { background-color: #ffffff; box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
#ftcgd-preview-area.theme-day .ftcgd-bubble p { color: #000000; }
#ftcgd-preview-area.theme-day .ftcgd-time { color: rgba(0,0,0,0.45); }
#ftcgd-preview-area.theme-day .ftcgd-verified-icon { color: #007aff; }
#ftcgd-preview-area.platform-android.theme-day .ftcgd-status, #ftcgd-preview-area.platform-android.theme-day .ftcgd-verified-icon { color: #0088cc; }

/* --- Night Mode --- */
#ftcgd-preview-area.theme-night .ftcgd-header { background-color: #212d3b; border-color: #2a3948; }
#ftcgd-preview-area.theme-night .ftcgd-chat-bg { background-color: #0e1621; }
#ftcgd-preview-area.theme-night .ftcgd-name { color: #ffffff; }
#ftcgd-preview-area.theme-night .ftcgd-status { color: #4fa9e9; }
#ftcgd-preview-area.theme-night .ftcgd-bubble.me { background-color: #2b5278; }
#ftcgd-preview-area.theme-night .ftcgd-bubble.them { background-color: #2a3948; }
#ftcgd-preview-area.theme-night .ftcgd-bubble p { color: #ffffff; }
#ftcgd-preview-area.theme-night .ftcgd-time { color: rgba(255,255,255,0.5); }
#ftcgd-preview-area.theme-night .ftcgd-verified-icon { color: #4fa9e9; }

/* --- Platform Specific Styles --- */
#ftcgd-preview-area.platform-ios { font-family: 'Inter', sans-serif; }
#ftcgd-preview-area.platform-ios .ftcgd-bubble { border-radius: 18px; }
#ftcgd-preview-area.platform-ios .ftcgd-bubble.me { border-bottom-right-radius: 4px; }
#ftcgd-preview-area.platform-ios .ftcgd-bubble.them { border-bottom-left-radius: 4px; }
#ftcgd-preview-area.platform-android { font-family: 'Roboto', sans-serif; }
#ftcgd-preview-area.platform-android .ftcgd-bubble { border-radius: 12px; }
#ftcgd-preview-area.platform-android .ftcgd-bubble.me { border-bottom-right-radius: 4px; }
#ftcgd-preview-area.platform-android .ftcgd-bubble.them { border-bottom-left-radius: 4px; }