/* ============================================================
   TypeDrama — Module CSS
   Dark theme: editor layout, messenger skins, timeline, scenes
   ============================================================ */

/* ---- Reset & base ----------------------------------------- */
.td-body {
	margin: 0;
	font-family: 'DM Sans', -apple-system, sans-serif;
	background: #0f0f11;
	color: #e8e8ef;
}

/* ---- Sidebar ---------------------------------------------- */
.td-sidebar {
	width: 180px;
	min-height: 100vh;
	background: #17171c;
	border-right: 1px solid #26262e;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 40;
}
.td-sidebar-logo {
	height: 52px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #26262e;
	flex-shrink: 0;
}
.td-logo {
	font-family: 'Syne', sans-serif;
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, #ff6b35, #ff9f1c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-decoration: none;
	display: block;
}
.td-sidebar-nav {
	flex: 1;
	padding: 8px;
	overflow-y: auto;
}
.td-nav-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 500;
	color: #6b6b7a;
	text-decoration: none;
	transition: all 0.15s;
	margin: 1px 0;
	position: relative;
	background: none;
	border: none;
	width: 100%;
	cursor: pointer;
}
.td-nav-item:hover { color: #e8e8ef; background: rgba(255,255,255,0.04); }
.td-nav-item.active { color: #e8e8ef; background: rgba(255,107,53,0.1); }
.td-nav-item.active::before {
	content: '';
	position: absolute;
	left: 0; top: 20%; bottom: 20%;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(to bottom, #ff6b35, #ff9f1c);
}
.td-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; }
.td-nav-item.active svg { opacity: 1; }
.td-sidebar-footer {
	padding: 8px;
	border-top: 1px solid #26262e;
}
.td-sidebar-user {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	margin-bottom: 4px;
}
.td-user-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff6b35, #ff9f1c);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}
.td-user-name {
	font-size: 12px;
	font-weight: 500;
	color: #e8e8ef;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Main layout ------------------------------------------ */
.td-main { margin-left: 180px; min-height: 100vh; display: flex; flex-direction: column; }
.td-overlay {
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 39;
	backdrop-filter: blur(2px);
}
.td-overlay.open { display: block; }

/* ---- Topbar ----------------------------------------------- */
.td-topbar {
	height: 52px;
	border-bottom: 1px solid #26262e;
	display: flex;
	align-items: center;
	padding: 0 20px;
	gap: 12px;
	background: #0f0f11;
	position: sticky;
	top: 0;
	z-index: 30;
	flex-shrink: 0;
}
.td-breadcrumb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	flex: 1;
}
.td-breadcrumb a { color: #6b6b7a; text-decoration: none; transition: color 0.15s; }
.td-breadcrumb a:hover { color: #e8e8ef; }
.td-bc-sep { color: #3a3a44; font-size: 12px; }
.td-bc-current { color: #e8e8ef; font-weight: 600; font-family: 'Syne', sans-serif; }
.td-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.td-topbar-actions-group { display: flex; align-items: center; gap: 8px; }

/* ---- Content ---------------------------------------------- */
.td-content { flex: 1; padding: 24px; }

/* ---- Mobile toggle ---------------------------------------- */
.td-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	border: 1px solid #26262e;
	background: transparent;
	color: #6b6b7a;
	cursor: pointer;
	flex-shrink: 0;
}
@media (max-width: 768px) {
	.td-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
	.td-sidebar.open { transform: translateX(0); }
	.td-main { margin-left: 0; }
	.td-mobile-toggle { display: flex; }
	.td-content { padding: 14px; }
}

:root {
	--td-bg:      #0f0f11;
	--td-surface: #17171c;
	--td-surface2:#1e1e25;
	--td-border:  #26262e;
	--td-muted:   #6b6b7a;
	--td-text:    #e8e8ef;
	--td-accent:  #ff6b35;
	--td-accent2: #ff9f1c;
}

/* ---- Editor page: no page scroll, no content padding ------ */
body.td-editor-page { overflow: hidden; user-select: none; }
body.td-editor-page input, body.td-editor-page textarea, body.td-editor-page [contenteditable] { user-select: text; }
body.td-editor-page .td-main { height: 100vh; overflow: hidden; min-height: unset; }
body.td-editor-page .td-content { padding: 0; overflow: hidden; flex: 1; display: flex; flex-direction: column; }

/* ---- Editor Root ------------------------------------------ */
.td-editor-root {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 52px);
	overflow: hidden;
	background: var(--td-bg);
}

/* ---- Editor Body ------------------------------------------ */
.td-editor-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}

/* ---- Left Panel ------------------------------------------- */
.td-panel-left {
	width: 272px;
	flex-shrink: 0;
	border-right: 1px solid var(--td-border);
	background: var(--td-surface);
	overflow-x: visible;
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
}
.td-panel-left::-webkit-scrollbar { display: none; }
.td-panel-left .td-panel-inner { overflow: visible; }
.td-panel-left .td-panel-section { overflow: visible; }

.td-panel-inner { flex: 1; }

.td-panel-section {
	padding: 10px 16px;
}
.td-panel-section + .td-panel-section {
	border-top: 1px solid var(--td-border);
}

.td-panel-section-title {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--td-muted);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.td-panel-back { padding: 10px 16px; border-bottom: 1px solid var(--td-border); }

.td-field-group { margin-bottom: 10px; }
/* Right panel form spacing — every block gets breathing room */
#td-msg-participant-wrap { margin-bottom: 12px; }
#td-msg-content-group   { margin-top: 0; margin-bottom: 0; }
#td-msg-image-panel     { margin-top: 10px; }
#td-msg-voice-panel     { margin-top: 10px; }
.td-video-flag-row      { margin-top: 10px; margin-bottom: 4px; }
.td-inline-fields       { margin-top: 12px; margin-bottom: 0; }
#td-msg-status-wrap     { margin-top: 12px; margin-bottom: 0; }

.td-label {
	display: block;
	font-size: 12px;
	color: var(--td-muted);
	margin-bottom: 4px;
}

.td-label-inline {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--td-muted);
	width: 100%;
}

.td-input,
.td-select,
.td-textarea {
	width: 100%;
	padding: 5px 8px;
	font-size: 13px;
	border: none;
	border-bottom: 1.5px solid var(--td-border);
	border-radius: 0;
	background: transparent;
	color: var(--td-text);
	transition: border-color 0.15s;
}
.td-input:focus,
.td-select:focus,
.td-textarea:focus {
	outline: none;
	border-bottom-color: var(--td-accent);
}
.td-textarea {
	border: 1px solid var(--td-border);
	border-radius: 6px;
	background: var(--td-surface2);
	resize: vertical;
}
.td-textarea:focus { border-color: var(--td-accent); }
.td-select option { background: var(--td-surface2); }

.td-toggle {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 28px;
	height: 16px;
	border-radius: 16px;
	background: var(--td-border);
	cursor: pointer;
	transition: background 0.2s;
	flex-shrink: 0;
}
.td-toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #888;
	transition: transform 0.2s, background 0.2s;
}
.td-toggle:checked {
	background: rgba(255,107,53,0.25);
}
.td-toggle:checked::after {
	transform: translateX(12px);
	background: var(--td-accent);
}

.td-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	border: none;
	background: linear-gradient(135deg, var(--td-accent), var(--td-accent2));
	color: #fff;
	cursor: pointer;
	transition: opacity 0.15s;
	white-space: nowrap;
}
.td-btn-primary svg { flex-shrink: 0; }
.td-btn-primary:hover { opacity: 0.85; }

.td-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid var(--td-border);
	background: var(--td-surface2);
	color: var(--td-text);
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
}
.td-btn-secondary svg { flex-shrink: 0; }
.td-btn-secondary:hover { background: rgba(255,255,255,0.07); }

.td-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 13px;
	border: none;
	background: transparent;
	color: var(--td-muted);
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s;
	white-space: nowrap;
}
.td-btn-ghost svg { flex-shrink: 0; }
.td-btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--td-text); }

.td-btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 5px;
	border: 1px solid rgba(239,68,68,0.4);
	background: rgba(239,68,68,0.08);
	color: #f87171;
	cursor: pointer;
	transition: background 0.15s;
}
.td-btn-danger:hover { background: rgba(239,68,68,0.15); }
.td-btn-delete-msg {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: rgba(239,68,68,0.5);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	transition: color 0.15s;
}
.td-btn-delete-msg:hover { color: #f87171; }

/* ---- Preview Area ----------------------------------------- */
.td-preview-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--td-bg);
	overflow: hidden;
}

.td-preview-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	position: relative;
	overflow: hidden;
}

.td-phone-frame {
	aspect-ratio: 9 / 16;
	height: calc(100vh - 52px - 40px - 28px - 32px); /* topbar 52 + timeline 40 + scenes 28 + padding 32 */
	max-height: 680px;
	width: auto;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
	background: #fff;
	position: relative;
	flex-shrink: 0;
}

.td-chat-preview {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Upgrade overlay -------------------------------------- */
.td-overlay-upgrade {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 28px;
	backdrop-filter: blur(6px);
}
.td-overlay-content { text-align: center; color: #fff; }

/* ---- Timeline --------------------------------------------- */
.td-timeline-bar {
	height: 52px;
	background: var(--td-surface);
	border-top: 1px solid var(--td-border);
	overflow-x: auto;
	overflow-y: hidden;
	flex-shrink: 0;
}

.td-timeline-inner {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 12px;
	gap: 4px;
	min-width: max-content;
}

.td-timeline-block {
	height: 30px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.15s;
}
.td-timeline-block:hover { opacity: 0.8; }
.td-timeline-block.type-message { background: rgba(59,130,246,0.18); color: #93c5fd; }
.td-timeline-block.type-typing  { background: rgba(251,191,36,0.15); color: #fbbf24; }
.td-timeline-block.type-pause   { background: rgba(107,107,122,0.15); color: var(--td-muted); }
.td-timeline-block.type-reaction{ background: rgba(248,113,113,0.15); color: #f87171; }
.td-timeline-block.type-effect  { background: rgba(167,139,250,0.15); color: #a78bfa; }
.td-timeline-block.td-selected  { outline: 2px solid var(--td-accent); }

/* Message block with typing badge */
.td-tl-msg-block { padding: 0 6px; position: relative; }
.td-tl-msg-inner { display: flex; align-items: center; gap: 4px; }
.td-tl-typing-badge {
	background: rgba(251,191,36,0.25);
	color: #fbbf24;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 4px;
	border-radius: 3px;
	flex-shrink: 0;
}
.td-tl-msg-time { color: #93c5fd; font-size: 10px; flex-shrink: 0; }
.td-tl-msg-label { opacity: 0.7; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Scenes Strip — legacy styles removed, see new block below -- */
.td-scene-add { min-width: 32px; min-height: 32px; flex-shrink: 0; }

/* ---- Chat Message Bubble (common) ------------------------- */
.td-chat-messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	scrollbar-width: none;
}
.td-chat-messages::-webkit-scrollbar { display: none; }

.td-msg-row {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	position: relative;
}
.td-msg-row.from-me { justify-content: flex-end; }
.td-msg-row.from-them { justify-content: flex-start; }

.td-msg-bubble {
	max-width: 68%;
	min-width: 0;
	word-break: break-word;
	padding: 6px 8px 4px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
	position: relative;
	cursor: pointer;
	transition: filter 0.1s;
}
.td-msg-bubble:hover { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.18), 0 0 0 3px rgba(255,255,255,0.35); }
.td-msg-bubble.td-selected { box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.7); }
.td-preview-playing .td-msg-bubble.td-selected { box-shadow: none; }

.td-msg-time {
	font-size: 10px;
	opacity: 0.65;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	line-height: 1;
}

.td-add-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px dashed var(--td-muted);
	background: transparent;
	color: var(--td-muted);
	font-size: 14px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
	align-self: center;
}
.td-msg-row:hover .td-add-action-btn { opacity: 1; }

/* ===============================================================
   MESSENGER SKINS — messages + avatar
   =============================================================== */
.td-chat-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.85);
	object-fit: cover;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}
.td-chat-name   { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.td-chat-status { font-size: 11px; opacity: 0.85; white-space: nowrap; }

/* WhatsApp */
/* WhatsApp light */
.td-skin-whatsapp .td-chat-messages {
	background:
		linear-gradient(rgba(229,221,213,0.72), rgba(229,221,213,0.72)),
		url('../images/chat-pattern-tr.png') #e5ddd5;
	background-size: auto, 400px auto;
}
.td-skin-whatsapp .td-chat-avatar   { background: #25D366; }
.td-skin-whatsapp .td-msg-bubble.from-me   { background: #DCF8C6; color: #111; border-radius: 12px 12px 3px 12px; }
.td-skin-whatsapp .td-msg-bubble.from-them { background: #fff; color: #111; border-radius: 12px 12px 12px 3px; }
.td-skin-whatsapp .td-typing-indicator     { background: #fff; }

/* WhatsApp dark */
.td-skin-whatsapp.theme-dark .td-chat-messages {
	background-color: #1a2a1a;
	background-image: url('../images/chat-pattern-tr.png');
	background-size: 400px auto;
	background-blend-mode: soft-light;
}
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-me   { background: #025c4c; color: #e9edef; border-radius: 12px 12px 3px 12px; }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-them { background: #202c33; color: #e9edef; border-radius: 12px 12px 12px 3px; }
.td-skin-whatsapp.theme-dark .td-typing-indicator     { background: #202c33; }

/* Telegram light */
.td-skin-telegram .td-chat-messages {
	background:
		linear-gradient(rgba(168,197,224,0.45), rgba(168,197,224,0.45)),
		url('../images/chat-pattern-tr.png') #a8c5e0;
	background-size: auto, 400px auto;
}
.td-skin-telegram .td-chat-avatar   { background: #2CA5E0; }
.td-skin-telegram .td-msg-bubble.from-me   { background: #effdde; color: #111; border-radius: 12px 12px 3px 12px; }
.td-skin-telegram .td-msg-bubble.from-them { background: #fff; color: #111; border-radius: 12px 12px 12px 3px; }

/* Telegram dark */
.td-skin-telegram.theme-dark .td-chat-messages {
	background-color: #1c2b3a;
	background-image: url('../images/chat-pattern-tr.png');
	background-size: 400px auto;
	background-blend-mode: soft-light;
}
.td-skin-telegram.theme-dark .td-msg-bubble.from-me   { background: #2b5278; color: #fff; border-radius: 12px 12px 3px 12px; }
.td-skin-telegram.theme-dark .td-msg-bubble.from-them { background: #182533; color: #fff; border-radius: 12px 12px 12px 3px; }

/* Instagram — белый + лёгкий градиент по краям */
.td-skin-instagram .td-chat-messages {
	background: #fafafa;
}
.td-skin-instagram .td-chat-avatar   { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.td-skin-instagram .td-chat-name     { color: #111; }
.td-skin-instagram .td-chat-status   { color: #8e8e8e; }
.td-skin-instagram .td-msg-bubble.from-me   { background: linear-gradient(135deg, #6a4ddb, #c13584); color: #fff; border-radius: 22px 22px 3px 22px; }
.td-skin-instagram .td-msg-bubble.from-them { background: #efefef; color: #111; border-radius: 22px 22px 22px 3px; }

/* Instagram dark */
.td-skin-instagram.theme-dark .td-chat-messages { background: #000; }
.td-skin-instagram.theme-dark .td-msg-bubble.from-them { background: #262626; color: #fff; border: 1px solid #363636; }

/* iMessage light — тонкая полосатая текстура */
.td-skin-imessage .td-chat-messages {
	background: #f5f5f7;
}
.td-skin-imessage .td-chat-avatar   { background: #c7c7cc; }
.td-skin-imessage .td-chat-name     { color: #111; }
.td-skin-imessage .td-chat-status   { color: #8e8e93; }
.td-skin-imessage .td-msg-bubble.from-me   { background: #007aff; color: #fff; border-radius: 18px 18px 4px 18px; }
.td-skin-imessage .td-msg-bubble.from-them { background: #e9e9eb; color: #111; border-radius: 18px 18px 18px 4px; }

/* iMessage dark */
.td-skin-imessage.theme-dark .td-chat-messages { background: #000; }
.td-skin-imessage.theme-dark .td-msg-bubble.from-them { background: #1c1c1e; color: #fff; }

/* Facebook Messenger — белый с градиентным заголовком */
.td-skin-facebook .td-chat-messages {
	background: #fff;
}
.td-skin-facebook .td-chat-avatar   { background: #1877f2; }
.td-skin-facebook .td-chat-name     { color: #111; }
.td-skin-facebook .td-chat-status   { color: #8e8e8e; }
.td-skin-facebook .td-msg-bubble.from-me   { background: linear-gradient(135deg, #0099ff, #0078ff); color: #fff; border-radius: 18px 18px 3px 18px; }
.td-skin-facebook .td-msg-bubble.from-them { background: #f0f0f0; color: #111; border-radius: 18px 18px 18px 3px; }

/* Facebook dark */
.td-skin-facebook.theme-dark .td-chat-messages { background: #1c1c1c; }
.td-skin-facebook.theme-dark .td-msg-bubble.from-them { background: #3a3b3c; color: #fff; }

/* ===============================================================
   TYPING INDICATOR
   =============================================================== */
.td-typing-indicator {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 8px 12px;
	border-radius: 18px;
	background: #e0e0e0;
}
.td-typing-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8e8e8e;
	animation: td-typing-bounce 1.2s infinite;
}
.td-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.td-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes td-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-6px); }
}

/* ---- Participant item in left panel ----------------------- */
.td-participant-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--td-border);
}
.td-me-radio-label {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--td-muted);
	transition: color 0.15s, background 0.15s;
	flex-shrink: 0;
}
.td-me-radio-label:hover { color: var(--td-accent); }
.td-me-radio-label.active { color: var(--td-accent); }
.td-participant-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255,107,53,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--td-accent);
	flex-shrink: 0;
	overflow: hidden;
}
.td-participant-avatar img { width: 100%; height: 100%; object-fit: cover; }
.td-participant-name { flex: 1; font-size: 13px; color: var(--td-text); }
.td-participants-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.td-btn-add-p-icon {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1px dashed var(--td-muted);
	background: transparent;
	color: var(--td-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.td-btn-add-p-icon:hover { border-color: var(--td-accent); color: var(--td-accent); }
.td-btn-add-p-icon[data-tooltip]::after { left: auto; right: 0; transform: none; }
.td-btn-remove-p {
	width: 24px;
	height: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: var(--td-text-muted);
	flex-shrink: 0;
}
.td-btn-remove-p:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* ---- Mobile responsive ------------------------------------ */
@media (max-width: 767px) {
	.td-editor-body { flex-direction: column; }

	.td-panel-left {
		width: 100%;
		height: auto;
		max-height: 45vh;
		border-right: none;
		border-bottom: 1px solid var(--td-border);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		transform: translateY(100%);
		transition: transform 0.3s;
	}
	.td-panel-left.td-open { transform: translateY(0); }

	.td-preview-area { height: calc(100vh - 52px - 52px - 44px - 52px); }

	.td-phone-frame { width: 240px; height: 426px; }
}

/* ---- Page header ------------------------------------------ */
.td-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 16px;
}
.td-page-title {
	font-family: 'Syne', sans-serif;
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--td-text);
	margin: 0 0 4px;
}
.td-page-subtitle {
	font-size: 13px;
	color: var(--td-muted);
	margin: 0;
}

/* ---- Cards grid ------------------------------------------- */
.td-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

/* ---- Card ------------------------------------------------- */
.td-card {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: 12px;
	padding: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.td-card:hover {
	border-color: rgba(255,107,53,0.25);
	box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.td-card-title {
	font-family: 'Syne', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--td-text);
	margin: 0 0 12px;
	line-height: 1.3;
}
.td-card-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

/* ---- Project card ----------------------------------------- */
.td-project-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.td-project-title {
	display: block;
	font-family: 'Syne', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--td-text);
	text-decoration: none;
	margin-bottom: 4px;
	line-height: 1.3;
	transition: color 0.15s;
}
.td-project-title:hover { color: var(--td-accent); }
.td-project-meta {
	font-size: 12px;
	color: var(--td-muted);
	margin: 0 0 14px;
}
.td-project-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* ---- Badges ----------------------------------------------- */
.td-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.td-badge-messenger   { background: rgba(255,255,255,0.06); color: var(--td-muted); }
.td-badge-purple      { background: rgba(167,139,250,0.12); color: #a78bfa; }
.td-badge-upgrade          { background: rgba(255,107,53,0.12); color: #ff6b35; border: 1px solid rgba(255,107,53,0.25); text-decoration: none; cursor: pointer; transition: background 0.15s; }
.td-badge-upgrade:hover    { background: rgba(255,107,53,0.2); }
.td-badge-status-done      { background: rgba(34,197,94,0.15);   color: #4ade80; }
.td-badge-status-rendering { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.td-badge-status-pending   { background: rgba(99,102,241,0.15);  color: #a5b4fc; }
.td-badge-status-error     { background: rgba(248,113,113,0.15); color: #f87171; }

/* ---- Buttons ---------------------------------------------- */
.td-btn-sm { padding: 5px 10px; font-size: 12px; gap: 5px; }

.td-btn-sm-accent {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 1;
	justify-content: center;
	padding: 7px 10px;
	border-radius: 6px;
	border: 1px solid rgba(255,107,53,0.3);
	background: rgba(255,107,53,0.08);
	color: var(--td-accent);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.td-btn-sm-accent:hover { background: rgba(255,107,53,0.16); }

.td-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid var(--td-border);
	background: var(--td-surface2);
	color: var(--td-muted);
	cursor: pointer;
	transition: all 0.15s;
	flex-shrink: 0;
}
.td-btn-icon:hover            { background: rgba(255,255,255,0.06); color: var(--td-text); }
.td-btn-icon.td-btn-danger:hover { background: rgba(248,113,113,0.1); color: #f87171; }
.td-btn-icon.td-btn-icon-success:hover { background: rgba(34,197,94,0.1); color: #4ade80; }

.td-btn-outline-accent {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: 8px;
	border: 1px solid rgba(255,107,53,0.4);
	background: rgba(255,107,53,0.1);
	color: var(--td-accent);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
}
.td-btn-outline-accent:hover { background: rgba(255,107,53,0.18); }

/* ---- Empty state ------------------------------------------ */
.td-empty-state {
	text-align: center;
	padding: 80px 20px;
}
.td-empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(255,107,53,0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	color: var(--td-accent);
}
.td-empty-icon.td-empty-icon-purple {
	background: rgba(167,139,250,0.1);
	color: #a78bfa;
}
.td-empty-title {
	font-family: 'Syne', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--td-text);
	margin: 0 0 8px;
}
.td-empty-text {
	font-size: 13px;
	color: var(--td-muted);
	margin: 0 0 24px;
}

/* ---- Dialog (modal) --------------------------------------- */
.td-dialog {
	border: none;
	border-radius: 16px;
	padding: 0;
	background: transparent;
	max-width: 400px;
	width: calc(100% - 32px);
	margin: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.td-dialog::backdrop { background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); }
.td-dialog-inner {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: 16px;
	padding: 28px;
}
.td-dialog-title {
	font-family: 'Syne', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--td-text);
	margin: 0 0 20px;
}
.td-dialog-footer {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 20px;
}
.td-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
}
.td-dialog-backdrop button {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	cursor: default;
}

.td-util-dialog-msg {
	color: var(--td-text-muted);
	font-size: 13px;
	margin: 0 0 16px;
	line-height: 1.5;
}
#td-util-dialog-input-wrap { margin-top: 12px; }

/* ---- Form fields ------------------------------------------ */
.td-form-field  { margin-bottom: 16px; }
.td-form-label  {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-muted);
	margin-bottom: 6px;
}
.td-form-input,
.td-form-select {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--td-border);
	background: var(--td-surface2);
	color: var(--td-text);
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s;
	box-sizing: border-box;
}
.td-form-input:focus,
.td-form-select:focus { border-color: var(--td-accent); }
.td-form-select option { background: var(--td-surface2); }

/* ---- Utility ---------------------------------------------- */
.td-hidden      { display: none !important; }
.td-full-width  { width: 100%; }
.td-mt-2        { margin-top: 8px; }
.td-mb-2        { margin-bottom: 8px; }
.td-btn-sm      { padding: 6px 12px !important; font-size: 12px !important; }
.td-btn-unsaved { background: linear-gradient(135deg, #d97706, #f59e0b) !important; }

@media (max-width: 640px) {
	.td-hide-mobile { display: none; }
	.td-card-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- CSS Tooltips ----------------------------------------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #0f0f11;
	color: #e8e8ef;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 5px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s 0.3s;
	border: 1px solid #26262e;
	z-index: 9999;
}
[data-tooltip]:hover::after { opacity: 1; }
@media (max-width: 400px) {
	.td-card-grid { grid-template-columns: 1fr; }
}

/* ---- Flash messages on dark bg --------------------------- */
.nk-alert { border-radius: 8px; }

/* ============================================================
   EDITOR 3-COLUMN COMPONENTS
   ============================================================ */

/* ---- Right Panel (message editor) ------------------------- */
.td-panel-right {
	width: 280px;
	flex-shrink: 0;
	border-left: 1px solid var(--td-border);
	background: var(--td-surface);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
}
.td-panel-right::-webkit-scrollbar { display: none; }

/* ---- Panel empty state (right panel default) -------------- */
.td-panel-empty-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--td-muted);
	padding: 24px;
	text-align: center;
}
.td-panel-empty-state svg { opacity: 0.3; }
.td-panel-empty-state p { font-size: 13px; margin: 0; }

/* ---- Section title with row layout (title + toggle) ------- */
.td-panel-section-title-row {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--td-muted);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.td-toggle-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--td-muted);
	cursor: pointer;
	white-space: nowrap;
}

/* ---- Messenger icon grid ---------------------------------- */
.td-messenger-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}
.td-messenger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 8px;
	border: 1px solid var(--td-border);
	background: var(--td-surface2);
	cursor: pointer;
	transition: all 0.15s;
	padding: 6px;
}
.td-messenger-btn:hover { border-color: var(--td-accent); background: rgba(255,107,53,0.08); }
.td-messenger-btn.active { border-color: var(--td-accent); background: rgba(255,107,53,0.15); }
/* Messenger tooltips go downward (panel top — no space above) */
.td-messenger-btn[data-tooltip]::after {
	bottom: auto;
	top: calc(100% + 6px);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	white-space: nowrap;
	max-width: none;
}

/* Messenger icon colors for SVG */
.td-messenger-btn[data-type="whatsapp"]  { color: #25D366; }
.td-messenger-btn[data-type="telegram"]  { color: #2CA5E0; }
.td-messenger-btn[data-type="instagram"] { color: #e1306c; }
.td-messenger-btn[data-type="imessage"]  { color: #007AFF; }
.td-messenger-btn[data-type="facebook"] { color: #0078FF; }

/* ---- Hide UI button --------------------------------------- */
.td-btn-hide-ui {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 5px;
	border: 1px solid var(--td-border);
	background: var(--td-surface2);
	color: var(--td-muted);
	cursor: pointer;
	transition: all 0.15s;
	flex-shrink: 0;
}
.td-btn-hide-ui:hover { color: var(--td-text); border-color: rgba(255,255,255,0.2); }

/* ---- Icon-only full-width toggle group -------------------- */
.td-btn-group-full { width: 100%; }
.td-btn-group-full .td-btn-toggle-icon {
	flex: 1;
	justify-content: center;
	padding: 7px 4px;
}

/* ---- Toggle button group (theme, overflow, type, status) -- */
.td-btn-group {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.td-btn-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 5px;
	border: 1px solid var(--td-border);
	background: var(--td-surface2);
	color: var(--td-muted);
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
}
.td-btn-toggle:hover { color: var(--td-text); border-color: rgba(255,255,255,0.15); }
.td-btn-toggle.active { background: rgba(255,107,53,0.15); border-color: rgba(255,107,53,0.4); color: var(--td-accent); }

/* ---- Field row (two inputs side by side) ------------------ */
.td-field-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}
.td-field-row .td-field-group { margin-bottom: 0; }
.td-field-grow { flex: 1; min-width: 0; }
.td-field-w80  { width: 80px; flex-shrink: 0; }

/* ---- Typing row (compact: Before / Duration / After) ------ */
.td-typing-row {
	display: flex;
	gap: 6px;
	align-items: flex-end;
}
.td-typing-field {
	flex: 1;
	min-width: 0;
}
.td-typing-field .td-label { font-size: 11px; }
.td-typing-field .td-input  { padding: 4px 6px; font-size: 12px; }

/* ---- Status check indicators in chat bubble --------------- */
.td-msg-status {
	display: inline-block;
	vertical-align: middle;
	margin-left: 3px;
	opacity: 0.75;
	flex-shrink: 0;
}

/* ---- Sidebar user row ------------------------------------- */
.td-sidebar-user-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-top: 1px solid var(--td-border);
	margin-top: 4px;
	gap: 8px;
}
.td-sidebar-user-row .td-user-name {
	font-size: 12px;
	font-weight: 500;
	color: var(--td-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}
.td-btn-logout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	color: var(--td-muted);
	text-decoration: none;
	transition: all 0.15s;
	flex-shrink: 0;
}
.td-btn-logout:hover { color: #f87171; }

/* ---- Phone status bar ------------------------------------- */
.td-phone-statusbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 12px 4px;
	background: inherit;
	flex-shrink: 0;
	height: 22px;
}
.td-phone-sb-time {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.td-phone-sb-icons {
	display: flex;
	align-items: center;
	gap: 5px;
}
/* Status bar inherits correct text color from skin */
.td-skin-whatsapp .td-phone-statusbar  { background: #075E54; color: #fff; }
.td-skin-telegram .td-phone-statusbar  { background: #527da3; color: #fff; }
.td-skin-instagram .td-phone-statusbar { background: #fff; color: #111; }
.td-skin-imessage .td-phone-statusbar  { background: rgba(255,255,255,0.92); color: #111; }
.td-skin-facebook .td-phone-statusbar { background: #fff; color: #111; }

.td-skin-whatsapp.theme-dark .td-phone-statusbar  { background: #1f2c33; color: #667d87; }
.td-skin-telegram.theme-dark .td-phone-statusbar  { background: #1c2733; color: #fff; }
.td-skin-instagram.theme-dark .td-phone-statusbar { background: #000; color: #fff; }
.td-skin-imessage.theme-dark .td-phone-statusbar  { background: rgba(28,28,30,0.92); color: #fff; }
.td-skin-facebook.theme-dark .td-phone-statusbar { background: #1c1e21; color: #fff; }

/* ---- Chat header with action icons ------------------------ */
.td-chat-header {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	flex-shrink: 0;
	gap: 10px;
}
.td-chat-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}
.td-chat-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.td-hdr-icon {
	width: 18px;
	height: 18px;
	opacity: 0.8;
}

/* Per-messenger header bg already defined in skins below */
.td-skin-whatsapp .td-chat-header  { background: #075E54; color: #fff; }
.td-skin-telegram .td-chat-header  { background: #527da3; color: #fff; }
.td-skin-instagram .td-chat-header { background: #fff; color: #111; border-bottom: 1px solid #efefef; }
.td-skin-imessage .td-chat-header  { background: rgba(255,255,255,0.92); color: #111; border-bottom: 1px solid #e0e0e0; backdrop-filter: blur(20px); }
.td-skin-facebook .td-chat-header { background: #fff; color: #111; border-bottom: 1px solid #ebebeb; }

/* ---- Message avatar (small, for from-them messages) ------- */
.td-msg-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255,107,53,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--td-accent);
	flex-shrink: 0;
	object-fit: cover;
	overflow: hidden;
}

/* ---- Bubble delete button (hover) ------------------------- */
.td-bubble-delete {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ef4444;
	border: 1.5px solid #fff;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10;
	padding: 0;
	line-height: 0;
}
.td-msg-bubble { position: relative; }
.td-msg-bubble:hover .td-bubble-delete { display: flex; }

/* ---- Add after button (shows on row hover) ---------------- */
.td-add-after-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px dashed var(--td-muted);
	background: transparent;
	color: var(--td-muted);
	font-size: 14px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
	align-self: flex-end;
	margin-bottom: 4px;
}
.td-msg-row:hover .td-add-after-btn { opacity: 1; }
.td-add-end-row {
	display: flex;
	justify-content: center;
	padding: 8px 0;
}
.td-add-at-end {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px dashed var(--td-muted);
	background: transparent;
	color: var(--td-muted);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.td-add-at-end:hover { border-color: var(--td-accent); color: var(--td-accent); }

/* ---- Chat input areas ------------------------------------- */
.td-chat-input {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	gap: 8px;
	flex-shrink: 0;
}
.td-inp-wa  { background: #f0f2f5; }
.td-inp-tg  { background: #fff; border-top: 1px solid #e0e0e0; }
.td-inp-ig  { background: #fff; border-top: 1px solid #efefef; }
.td-inp-im  { background: #fff; border-top: 1px solid #e0e0e0; padding: 6px 10px; }
.td-inp-ms  { background: #fff; border-top: 1px solid #ebebeb; }

.td-inp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #8e8e8e;
	cursor: default;
	flex-shrink: 0;
}
.td-inp-field {
	flex: 1;
	font-size: 13px;
	color: #bbb;
	background: #fff;
	border-radius: 20px;
	padding: 6px 12px;
	min-width: 0;
}
.td-inp-wa .td-inp-field { background: #fff; }
.td-inp-tg .td-inp-field { background: #fff; border: 1px solid #e8e8e8; }
.td-inp-ig .td-inp-field { background: #f0f0f0; }
.td-inp-im .td-inp-field { background: transparent; border: none; }
.td-inp-im-field          { border: 1.5px solid #c7c7cc; border-radius: 16px; }
.td-inp-ms .td-inp-field  { background: #f0f2f5; }
.td-inp-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: #007aff;
	color: #fff;
	cursor: default;
	flex-shrink: 0;
}
.td-inp-send-im { background: #007aff; }

/* Dark input areas */
.td-skin-whatsapp.theme-dark .td-inp-wa { background: #1f2c33; }
.td-skin-whatsapp.theme-dark .td-inp-wa .td-inp-field { background: #2a3942; color: #667d87; }
.td-skin-telegram.theme-dark .td-inp-tg { background: #0f1923; border-color: #1c2733; }
.td-skin-telegram.theme-dark .td-inp-tg .td-inp-field { background: #1e2936; color: #6b7f8e; }
.td-skin-instagram.theme-dark .td-inp-ig { background: #000; border-color: #262626; }
.td-skin-instagram.theme-dark .td-inp-ig .td-inp-field { background: #262626; color: #666; }
.td-skin-imessage.theme-dark .td-inp-im { background: #000; border-color: #38383a; }
.td-skin-imessage.theme-dark .td-inp-im .td-inp-field { color: #666; }
.td-skin-facebook.theme-dark .td-inp-ms { background: #18191a; border-color: #3a3b3c; }
.td-skin-facebook.theme-dark .td-inp-ms .td-inp-field { background: #3a3b3c; color: #666; }

/* ---- Dark themes for messenger skins ---------------------- */
.td-skin-whatsapp.theme-dark .td-chat-header { background: #1f2c33; }
.td-skin-whatsapp.theme-dark .td-chat-messages { background: #0b141a; }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-me  { background: #005c4b; color: #e9edef; }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-them { background: #202c33; color: #e9edef; }
.td-skin-whatsapp.theme-dark .td-typing-indicator { background: #202c33; }

.td-skin-telegram.theme-dark .td-chat-header { background: #1c2733; }
.td-skin-telegram.theme-dark .td-chat-messages { background: #0f1923; }
.td-skin-telegram.theme-dark .td-msg-bubble.from-me  { background: #2b5278; color: #fff; }
.td-skin-telegram.theme-dark .td-msg-bubble.from-them { background: #1e2936; color: #fff; }

.td-skin-instagram.theme-dark .td-chat-header { background: #000; color: #fff; border-color: #262626; }
.td-skin-instagram.theme-dark .td-chat-name { color: #fff; }
.td-skin-instagram.theme-dark .td-chat-status { color: #a8a8a8; }
.td-skin-instagram.theme-dark .td-chat-messages { background: #000; }
.td-skin-instagram.theme-dark .td-msg-bubble.from-them { background: #262626; color: #fff; }

.td-skin-imessage.theme-dark .td-chat-header { background: rgba(28,28,30,0.92); color: #fff; border-color: #38383a; }
.td-skin-imessage.theme-dark .td-chat-name { color: #fff; }
.td-skin-imessage.theme-dark .td-chat-status { color: #98989e; }
.td-skin-imessage.theme-dark .td-chat-messages { background: #000; }
.td-skin-imessage.theme-dark .td-msg-bubble.from-them { background: #2c2c2e; color: #fff; }

.td-skin-facebook.theme-dark .td-chat-header { background: #1c1e21; color: #fff; border-color: #3a3b3c; }
.td-skin-facebook.theme-dark .td-chat-name { color: #fff; }
.td-skin-facebook.theme-dark .td-chat-status { color: #b0b3b8; }
.td-skin-facebook.theme-dark .td-chat-messages { background: #18191a; }
.td-skin-facebook.theme-dark .td-msg-bubble.from-them { background: #3a3b3c; color: #fff; }

/* ---- Scene tab delete button ------------------------------ */
.td-scene-tab .td-scene-delete {
	display: none;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(248,113,113,0.2);
	color: #f87171;
	border: none;
	font-size: 10px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	flex-shrink: 0;
}
.td-scene-tab:hover .td-scene-delete { display: flex; }
.td-scene-tab .td-scene-delete:hover { background: rgba(248,113,113,0.4); }

/* ---- Add action buttons (left/right per side) ------------- */
.td-add-left  { align-self: flex-end; margin-right: 2px; }
.td-add-right { align-self: flex-end; margin-left: 2px; }

@media (max-width: 900px) {
	.td-panel-right { display: none; }
}
@media (max-width: 767px) {
	.td-panel-right { display: flex; position: fixed; bottom: 0; right: 0; left: 0; width: 100%; height: auto; max-height: 55vh; border-left: none; border-top: 1px solid var(--td-border); z-index: 101; transform: translateY(100%); transition: transform 0.3s; }
	.td-panel-right.td-open { transform: translateY(0); }
}

/* ================================================================
   MEDIA UPLOAD — Dropzone (image messages)
   ================================================================ */
.td-dropzone {
	border: 2px dashed var(--td-border);
	border-radius: 8px;
	height: 80px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .2s, background .2s;
	margin-bottom: 6px;
}
.td-dropzone:hover,
.td-dropzone.td-drag-over { border-color: var(--td-accent); background: rgba(var(--td-accent-rgb, 99,102,241), .06); }
.td-dropzone.td-uploading { opacity: .6; pointer-events: none; }
.td-dropzone-label { color: var(--td-muted); font-size: 12px; pointer-events: none; text-align: center; padding: 0 8px; }

#td-image-preview-wrap { position: relative; margin-bottom: 6px; }
#td-image-preview-img { width: 100%; border-radius: 6px; display: block; max-height: 160px; object-fit: cover; }
.td-image-remove-btn {
	position: absolute;
	top: 4px; right: 4px;
	background: rgba(0,0,0,.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 20px; height: 20px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.td-image-remove-btn:hover { background: rgba(0,0,0,.85); }

/* ================================================================
   MEDIA UPLOAD — Audio row
   ================================================================ */
.td-audio-upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-audio-filename { color: var(--td-muted); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================
   CHAT BUBBLE — Image type
   ================================================================ */
.td-msg-img-wrap { position: relative; display: block; border-radius: 8px; overflow: hidden; max-width: 200px; }
.td-msg-img { width: 100%; display: block; border-radius: 8px; }
.td-msg-img-placeholder {
	width: 160px; height: 110px;
	background: var(--td-border);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
}
.td-msg-caption { font-size: 13px; margin-top: 4px; word-break: break-word; }

/* Video overlay on image bubble */
.td-msg-video-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.28);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.td-msg-video-play {
	width: 36px; height: 36px;
	background: rgba(0,0,0,.55);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}

/* CHAT BUBBLE — Voice: see new block below */

/* ================================================================
   PARTICIPANT AVATARS — upload overlay
   ================================================================ */
.td-avatar-wrap { position: relative; cursor: pointer; flex-shrink: 0; }
.td-avatar-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	transition: opacity .15s;
}
.td-avatar-wrap:hover .td-avatar-overlay { opacity: 1; }
.td-avatar-del-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}

/* ================================================================
   SCENES BAR — two-row compact layout
   ================================================================ */
.td-scenes-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px;
	min-height: 30px;
}
.td-scenes-list {
	display: flex;
	gap: 3px;
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
}
.td-scenes-list::-webkit-scrollbar { display: none; }
.td-scene-tab {
	font-size: 11px !important;
	padding: 2px 8px !important;
	height: 22px !important;
	line-height: 1 !important;
}
.td-scenes-actions {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}
.td-btn-icon {
	width: 24px; height: 24px;
	padding: 0;
	font-size: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid var(--td-border);
	background: transparent;
	color: var(--td-text);
	transition: background .15s;
}
.td-btn-icon:hover { background: var(--td-surface-2, rgba(255,255,255,.08)); }
.td-btn-xs {
	width: 20px; height: 20px;
	font-size: 11px;
	padding: 0;
}

/* ================================================================
   SOUND ROW (second row in scenes bar)
   ================================================================ */
.td-sound-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-top: 1px solid var(--td-border);
	min-height: 26px;
	background: rgba(255,255,255,.02);
}
.td-sound-icon { color: var(--td-muted); font-size: 11px; flex-shrink: 0; }
.td-sound-loaded { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.td-sound-waveform { flex: 1; min-width: 0; height: 20px; display: flex; align-items: center; }
.td-sound-waveform canvas { width: 100%; height: 20px; display: block; }
.td-sound-duration { font-size: 10px; color: var(--td-muted); flex-shrink: 0; white-space: nowrap; }

/* ================================================================
   PREVIEW ANIMATION MODE
   ================================================================ */
.td-preview-playing .td-panel-left,
.td-preview-playing .td-panel-right {
	opacity: .2;
	pointer-events: none;
	transition: opacity .3s;
}
.td-preview-playing .td-add-after-btn,
.td-preview-playing .td-add-end-row,
.td-preview-playing .td-bubble-delete {
	display: none !important;
}
.td-preview-wrapper { position: relative; }
.td-preview-stop-btn {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: var(--td-accent);
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 5px 14px;
	cursor: pointer;
	font-size: 12px;
	display: flex; align-items: center; gap: 5px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.td-preview-stop-btn:hover { opacity: .9; }

/* ================================================================
   AUDIO EDITOR MODAL
   ================================================================ */
.td-audio-editor-dialog {
	width: 560px;
	max-width: 95vw;
	border: 1px solid var(--td-border);
	border-radius: 12px;
	background: var(--td-bg);
	color: var(--td-text);
	padding: 0;
}
.td-audio-editor-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}
.td-ae-waveform-wrap {
	position: relative;
	height: 80px;
	background: var(--td-surface);
	border-radius: 8px;
	overflow: hidden;
	cursor: col-resize;
	user-select: none;
}
.td-ae-canvas { width: 100%; height: 80px; display: block; }
.td-ae-selection {
	position: absolute;
	top: 0; bottom: 0;
	background: rgba(var(--td-accent-rgb, 99,102,241), .18);
	pointer-events: none;
	z-index: 1;
}
.td-ae-handle {
	position: absolute;
	top: 0; bottom: 0;
	width: 6px;
	background: var(--td-accent);
	border-radius: 3px;
	cursor: ew-resize;
	z-index: 3;
}
.td-ae-handle::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 2px; height: 18px;
	background: rgba(255,255,255,.7);
	border-radius: 1px;
}
.td-ae-handle-left  { left: 0; transform: translateX(-50%); }
.td-ae-handle-right { right: 0; transform: translateX(50%); }
/* cursor is drawn on canvas, DOM element hidden */
.td-ae-cursor { display: none; }
.td-ae-timecodes {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--td-muted);
	margin-top: -4px;
}
.td-ae-controls { display: flex; gap: 8px; }

/* ================================================================
   OVERFLOW SCROLL MODE
   ================================================================ */
.td-overflow-scroll .td-chat-messages { overflow-y: auto; }
.td-overflow-scroll .td-chat-messages::-webkit-scrollbar { width: 3px; }
.td-overflow-scroll .td-chat-messages::-webkit-scrollbar-thumb { background: var(--td-border); border-radius: 2px; }

/* ================================================================
   SCENES BAR — dash/bar indicators
   ================================================================ */
.td-scenes-bar {
	background: var(--td-surface);
	border-top: 1px solid var(--td-border);
	flex-shrink: 0;
}
.td-scenes-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	min-height: 28px;
}
.td-scenes-list {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-shrink: 0;
}
.td-scene-dash {
	width: 24px;
	height: 4px;
	border-radius: 2px;
	background: var(--td-border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .15s, width .15s;
	flex-shrink: 0;
}
.td-scene-dash:hover { background: var(--td-muted); }
.td-scene-dash.td-active { width: 32px; background: var(--td-accent); }
.td-scene-add-btn {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border: 1px solid var(--td-border);
	background: transparent;
	color: var(--td-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
	flex-shrink: 0;
}
.td-scene-add-btn:hover { color: var(--td-text); border-color: var(--td-muted); }

/* ================================================================
   SOUND ROW — inline in scenes bar
   ================================================================ */
.td-sound-inline {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-shrink: 0;
	overflow: hidden;
}
.td-sound-icon { color: var(--td-muted); flex-shrink: 0; }
.td-sound-add-btn {
	background: none;
	border: none;
	color: var(--td-muted);
	font-size: 11px;
	cursor: pointer;
	padding: 0;
	white-space: nowrap;
}
.td-sound-add-btn:hover { color: var(--td-text); }
#td-sound-loaded {
	display: flex;
	align-items: center;
	gap: 4px;
}
#td-sound-waveform { width: 60px; height: 16px; display: block; flex-shrink: 0; }
.td-sound-duration { font-size: 10px; color: var(--td-muted); white-space: nowrap; flex-shrink: 0; }
.td-sound-act-btn {
	width: 16px; height: 16px;
	padding: 0;
	display: flex; align-items: center; justify-content: center;
	border: none;
	background: transparent;
	color: var(--td-muted);
	cursor: pointer;
	border-radius: 2px;
}
.td-sound-act-btn:hover { color: var(--td-text); }

/* ================================================================
   TIMELINE — compact
   ================================================================ */
.td-timeline-bar { height: 40px; }
.td-timeline-block { height: 24px; padding: 0 6px; font-size: 10px; }

/* ================================================================
   TOPBAR — play/stop/screenshot buttons
   ================================================================ */
.td-topbar-actions-group .td-btn-icon {
	width: 28px; height: 28px;
	border-radius: 5px;
	border: 1px solid var(--td-border);
}

/* ================================================================
   VOICE BUBBLE — realistic messenger style
   ================================================================ */
.td-voice-player {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 140px;
	max-width: 200px;
	padding: 4px 2px;
}
.td-voice-play-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: opacity .15s;
}
.td-voice-play-btn:hover { opacity: .85; }
/* play button defaults */
.td-voice-me .td-voice-play-btn   { background: rgba(0,0,0,0.15); color: #333; }
.td-voice-them .td-voice-play-btn { background: rgba(0,0,0,0.10); color: #444; }

/* per-skin play button */
.td-skin-whatsapp .td-msg-bubble.from-me   .td-voice-play-btn { background: rgba(0,90,60,0.18); color: #075e54; }
.td-skin-whatsapp .td-msg-bubble.from-them .td-voice-play-btn { background: rgba(18,140,126,0.15); color: #128c7e; }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-me   .td-voice-play-btn { background: rgba(255,255,255,0.15); color: #fff; }
.td-skin-telegram .td-msg-bubble.from-me   .td-voice-play-btn { background: rgba(255,255,255,0.25); color: #fff; }
.td-skin-telegram .td-msg-bubble.from-them .td-voice-play-btn { background: rgba(34,158,217,0.15); color: #229ed9; }
.td-skin-imessage .td-msg-bubble.from-me   .td-voice-play-btn { background: rgba(255,255,255,0.25); color: #fff; }

.td-voice-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}
.td-voice-waveform {
	display: flex;
	align-items: center;
	gap: 1.5px;
	height: 22px;
	overflow: hidden;
}
.td-voice-waveform span {
	width: 2.5px;
	min-height: 20%;
	border-radius: 2px;
	flex-shrink: 0;
}

/* waveform bar colors per skin */
.td-voice-me .td-voice-waveform span   { background: rgba(0,0,0,0.3); }
.td-voice-them .td-voice-waveform span { background: rgba(0,0,0,0.3); }

.td-skin-whatsapp .td-msg-bubble.from-me   .td-voice-waveform span { background: rgba(0,90,60,0.5); }
.td-skin-whatsapp .td-msg-bubble.from-them .td-voice-waveform span { background: rgba(18,140,126,0.55); }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-me   .td-voice-waveform span { background: rgba(255,255,255,0.65); }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-them .td-voice-waveform span { background: rgba(255,255,255,0.5); }
.td-skin-telegram .td-msg-bubble.from-me   .td-voice-waveform span { background: rgba(255,255,255,0.75); }
.td-skin-telegram .td-msg-bubble.from-them .td-voice-waveform span { background: rgba(34,158,217,0.6); }
.td-skin-imessage .td-msg-bubble.from-me   .td-voice-waveform span { background: rgba(255,255,255,0.75); }
.td-skin-imessage .td-msg-bubble.from-them .td-voice-waveform span { background: rgba(0,0,0,0.3); }

.td-voice-timer {
	font-size: 11px;
	line-height: 1;
}
.td-voice-me .td-voice-timer   { color: rgba(0,0,0,0.45); }
.td-voice-them .td-voice-timer { color: rgba(0,0,0,0.45); }
.td-skin-whatsapp .td-msg-bubble.from-me   .td-voice-timer { color: rgba(0,60,40,0.55); }
.td-skin-whatsapp.theme-dark .td-msg-bubble.from-me   .td-voice-timer { color: rgba(255,255,255,0.6); }
.td-skin-telegram .td-msg-bubble.from-me   .td-voice-timer { color: rgba(255,255,255,0.7); }
.td-skin-imessage .td-msg-bubble.from-me   .td-voice-timer { color: rgba(255,255,255,0.7); }

/* ================================================================
   AUDIO VOICE PANEL — dropzone + loaded state
   ================================================================ */
.td-dropzone-sm {
	height: 52px;
}
.td-voice-dropzone { gap: 6px; }
.td-audio-info-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: var(--td-surface);
	border-radius: 6px;
	border: 1px solid var(--td-border);
}
.td-audio-fname {
	flex: 1;
	font-size: 11px;
	color: var(--td-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.td-audio-dur-badge {
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}
.td-audio-act {
	width: 20px; height: 20px;
	padding: 0;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	color: var(--td-muted);
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 3px;
}
.td-audio-act:hover { color: var(--td-text); }

/* ================================================================
   AUDIO EDITOR — compact, cursor-based
   ================================================================ */
.td-audio-editor-dialog { width: 480px; }
.td-ae-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}
.td-ae-title { font-size: 13px; font-weight: 600; }
.td-ae-result-dur {
	font-size: 12px;
	color: var(--td-accent);
	font-weight: 700;
}
.td-ae-waveform-wrap {
	position: relative;
	height: 64px;
	background: var(--td-surface);
	border-radius: 6px;
	overflow: visible;
	cursor: crosshair;
	user-select: none;
}
.td-ae-canvas { width: 100%; height: 64px; display: block; border-radius: 6px; }
.td-ae-selection {
	position: absolute;
	top: 0; bottom: 0;
	background: rgba(255,200,80,.2);
	pointer-events: none;
	z-index: 1;
}
.td-ae-handle {
	position: absolute;
	top: -2px; bottom: -2px;
	width: 8px;
	background: var(--td-accent);
	cursor: ew-resize;
	z-index: 4;
	border-radius: 3px;
	transform: translateX(-50%);
}
.td-ae-handle::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 2px; height: 18px;
	background: rgba(255,255,255,.7);
	border-radius: 1px;
}
.td-ae-handle-left  { left: 0; }
.td-ae-handle-right { left: 100%; }
.td-ae-timecodes {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--td-muted);
	margin-top: 2px;
}
.td-ae-controls {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.td-ae-sep { flex: 1; }



/* ================================================================
   TYPING INDICATOR — three dots bubble
   ================================================================ */
.td-typing-bubble {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 18px;
	background: rgba(0,0,0,0.08);
	width: fit-content;
}
.td-msg-row.from-me .td-typing-bubble { background: rgba(0,0,0,0.12); }
.td-typing-bubble span {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #888;
	display: block;
	animation: td-typing-dot 1.2s infinite;
}
.td-typing-bubble span:nth-child(2) { animation-delay: .2s; }
.td-typing-bubble span:nth-child(3) { animation-delay: .4s; }
@keyframes td-typing-dot {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1; }
}

/* per-skin dot colors */
.td-skin-whatsapp .td-msg-row.from-them .td-typing-bubble { background: #fff; }
.td-skin-whatsapp .td-msg-row.from-them .td-typing-bubble span { background: #8a8a8a; }
.td-skin-whatsapp .td-msg-row.from-me   .td-typing-bubble { background: #DCF8C6; }
.td-skin-whatsapp .td-msg-row.from-me   .td-typing-bubble span { background: #4a9a6a; }
.td-skin-whatsapp.theme-dark .td-msg-row.from-them .td-typing-bubble { background: #202c33; }
.td-skin-whatsapp.theme-dark .td-msg-row.from-me   .td-typing-bubble { background: #025c4c; }
.td-skin-whatsapp.theme-dark .td-typing-bubble span { background: #aaa; }
.td-skin-telegram .td-msg-row.from-them .td-typing-bubble { background: #fff; }
.td-skin-telegram .td-msg-row.from-me   .td-typing-bubble { background: #effdde; }
.td-skin-imessage .td-msg-row.from-them .td-typing-bubble { background: #e9e9eb; }
.td-skin-imessage .td-msg-row.from-me   .td-typing-bubble { background: #007aff; }
.td-skin-imessage .td-msg-row.from-me   .td-typing-bubble span { background: rgba(255,255,255,0.8); }


/* ================================================================
   IMAGE PANEL — video toggle button instead of checkbox
   ================================================================ */
.td-video-flag-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 12px;
	padding: 0 2px;
}
.td-toggle-switch {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 16px;
	cursor: pointer;
	flex-shrink: 0;
}
.td-toggle-switch input { display: none; }
.td-toggle-track {
	position: absolute;
	inset: 0;
	background: var(--td-border);
	border-radius: 8px;
	transition: background .2s;
}
.td-toggle-thumb {
	position: absolute;
	width: 12px; height: 12px;
	background: #fff;
	border-radius: 50%;
	top: 2px; left: 2px;
	transition: left .2s;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.td-toggle-switch input:checked ~ .td-toggle-track { background: rgba(255,107,53,0.55); }
.td-toggle-switch input:checked ~ .td-toggle-track .td-toggle-thumb { left: 14px; }

/* ================================================================
   AUDIO LOADED PANEL — spacing
   ================================================================ */
#td-audio-loaded { margin-top: 8px; }

/* From dropdown */
.td-from-dropdown { position: relative; margin-bottom: 8px; }
.td-from-btn {
	display: flex; align-items: center; gap: 7px;
	width: 100%; padding: 5px 8px;
	background: var(--td-surface); border: 1px solid var(--td-border);
	border-radius: 6px; cursor: pointer; color: var(--td-text);
	font-size: 12px; text-align: left;
}
.td-from-btn:hover { border-color: var(--td-accent); }
.td-from-avatar {
	width: 20px; height: 20px; border-radius: 50%;
	font-size: 10px; font-weight: 600; color: #fff;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.td-from-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-from-arrow { flex-shrink: 0; opacity: 0.5; }
.td-from-menu {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
	background: var(--td-surface-2, var(--td-surface));
	border: 1px solid var(--td-border); border-radius: 6px;
	overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.td-from-item {
	display: flex; align-items: center; gap: 7px;
	width: 100%; padding: 6px 8px;
	background: none; border: none; cursor: pointer;
	color: var(--td-text); font-size: 12px; text-align: left;
}
.td-from-item:hover { background: var(--td-hover, rgba(255,255,255,.05)); }
.td-from-item-active { color: var(--td-accent); }

.td-inline-fields {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.td-inline-pair {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
}
.td-inline-label {
	font-size: 11px;
	color: var(--td-muted);
	white-space: nowrap;
	flex-shrink: 0;
}
.td-inline-input {
	padding: 4px 6px;
	font-size: 12px;
	height: 28px;
	width: 100%;
	min-width: 0;
}

/* ================================================================
   AUDIO EDITOR — time display + result
   ================================================================ */
.td-ae-result-dur { font-weight: 700; color: var(--td-text); font-size: 12px; }
.td-ae-cursor-time { font-weight: 600; }

/* ================================================================
   AVATAR uploading indicator
   ================================================================ */
.td-avatar-wrap.td-uploading { opacity: 0.5; pointer-events: none; }
.td-avatar-wrap.td-uploading::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--td-accent);
	animation: td-spin 0.7s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }

/* ================================================================
   SOUND upload "..." more visible
   ================================================================ */
#td-sound-pick-btn:disabled { opacity: 0.5; }


/* ================================================================
   SITE LAYOUT — header + main (landing, login pages)
   ================================================================ */
.td-site-body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--td-bg);
}

.td-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 56px;
	border-bottom: 1px solid var(--td-border);
	flex-shrink: 0;
}

.td-site-header-login {
	font-size: 13px;
	padding: 6px 16px;
}

.td-site-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}

/* ================================================================
   SITE LANDING — hero section
   ================================================================ */
.td-site-hero {
	text-align: center;
	max-width: 560px;
}

.td-site-logo {
	display: inline-block;
	margin-bottom: 32px;
	font-size: 22px;
}

.td-site-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--td-text);
	margin-bottom: 12px;
	line-height: 1.3;
}

.td-site-subtitle {
	font-size: 1rem;
	color: var(--td-text-muted);
	margin-bottom: 32px;
}

.td-site-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.td-btn-lg {
	padding: 10px 28px;
	font-size: 15px;
}

/* ================================================================
   LOGIN FORM — Bootstrap overrides for dark TypeDrama theme
   ================================================================ */
.td-site-main .nk-block-head { width: 100%; max-width: 400px; margin-bottom: 20px; }
.td-site-main .nk-block-title { color: var(--td-text); font-size: 1.25rem; font-weight: 600; }
.td-site-main .nk-block-des p { color: var(--td-text-muted); font-size: 13px; margin: 4px 0 0; }

.td-site-main .form-group { margin-bottom: 14px; width: 100%; max-width: 400px; }
.td-site-main .form-group label { color: var(--td-text-muted); font-size: 12px; display: block; margin-bottom: 4px; }
.td-site-main .form-control {
	width: 100%;
	background: var(--td-input-bg);
	border: 1px solid var(--td-border);
	color: var(--td-text);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.15s;
}
.td-site-main .form-control:focus { border-color: var(--td-accent); }
.td-site-main .btn.btn-primary.w-100 {
	width: 100%;
	max-width: 400px;
	background: var(--td-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}
.td-site-main .btn.btn-primary.w-100:hover { opacity: 0.9; }
.td-site-main .ajax-form-result { width: 100%; max-width: 400px; }
.td-site-main .col-md-6 { width: 100%; max-width: 400px; padding: 0; }
.td-site-main .mt-4 { margin-top: 20px; color: var(--td-text-muted); font-size: 12px; text-align: center; }
.td-site-main .mt-4 a { color: var(--td-text-muted); }

.td-site-main .oauth-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 400px;
	margin-bottom: 16px;
}
.td-site-main .oauth-btn {
	flex: 1;
	min-width: 80px;
	text-align: center;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--td-border);
	background: var(--td-panel-bg);
	color: var(--td-text);
	font-size: 13px;
	text-decoration: none;
	transition: border-color 0.15s;
}
.td-site-main .oauth-btn:hover { border-color: var(--td-accent); }

.td-site-main .auth-divider {
	width: 100%;
	max-width: 400px;
	text-align: center;
	position: relative;
	margin-bottom: 16px;
}
.td-site-main .auth-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--td-border);
}
.td-site-main .auth-divider span {
	position: relative;
	background: var(--td-bg);
	padding: 0 12px;
	color: var(--td-text-muted);
	font-size: 12px;
}


/* ── Billing / Dashlite dark overrides ── */
.td-dl-body { display:flex; min-height:100vh; background:#0f1117; }
.td-dl-sidebar { width:180px; flex-shrink:0; background:#111827; border-right:1px solid #1f2937; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100; }
.td-dl-logo { padding:20px 20px 16px; }
.td-dl-logo a { color:#f97316; font-size:18px; font-weight:700; text-decoration:none; font-family:sans-serif; }
.td-dl-nav { flex:1; padding:8px 0; }
.td-dl-nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#9ca3af; font-size:13px; text-decoration:none; transition:all .15s; }
.td-dl-nav a:hover,.td-dl-nav a.active { color:#f97316; background:rgba(249,115,22,.08); }
.td-dl-nav a svg { flex-shrink:0; opacity:.7; }
.td-dl-footer { border-top:1px solid #1f2937; padding:8px 0 16px; }
.td-dl-footer a { display:flex; align-items:center; gap:10px; padding:8px 20px; color:#6b7280; font-size:13px; text-decoration:none; transition:all .15s; }
.td-dl-footer a:hover { color:#9ca3af; }
.td-dl-footer a.active { color:#f97316; }
.td-dl-user-row { display:flex; align-items:center; justify-content:space-between; padding:8px 20px; margin-top:4px; }
.td-dl-user-row span { color:#6b7280; font-size:13px; }
.td-dl-user-row a { color:#6b7280; text-decoration:none; padding:0; }
.td-dl-main { margin-left:180px; flex:1; min-width:0; }
.td-dl-topbar { background:#111827; border-bottom:1px solid #1f2937; padding:0 24px; height:56px; display:flex; align-items:center; }
.td-dl-content { padding:24px; }
.td-dl-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }
.td-dl-overlay.open { display:block; }
@media (max-width:991px) {
  .td-dl-sidebar { transform:translateX(-100%); transition:transform .25s; }
  .td-dl-sidebar.open { transform:translateX(0); }
  .td-dl-main { margin-left:0; }
}

.td-dl-body .card,
.td-dl-body .card-bordered { background:#1c2232; border-color:#2a3347; color:#e2e8f0; }
.td-dl-body .card-inner { padding:20px 24px; }
.td-dl-body .card-title-group .title,
.td-dl-body h5.title,
.td-dl-body h6.title { color:#e2e8f0; }
.td-dl-body .text-soft { color:#8892a4; }
.td-dl-body .amount { color:#e2e8f0; font-size:1.6rem; font-weight:700; }
.td-dl-body .amount-sm { color:#8892a4; font-size:12px; }
.td-dl-body .nk-wgw { background:transparent; }
.td-dl-body .nk-wgw-icon em { color:#f97316; }
.td-dl-body .nk-wgw-actions { border-top:1px solid #2a3347; }
.td-dl-body .nk-wgw-actions ul li a { color:#8892a4; }
.td-dl-body .nk-wgw-actions ul li a:hover { color:#f97316; }
.td-dl-body .nk-wgw-more { border-top:1px solid #2a3347; padding-top:16px; }
.td-dl-body .btn-primary { background:#f97316; border-color:#f97316; color:#fff; }
.td-dl-body .btn-primary:hover { background:#ea6a0a; border-color:#ea6a0a; }
.td-dl-body .btn-outline-primary { border-color:#f97316; color:#f97316; background:transparent; }
.td-dl-body .btn-outline-primary:hover { background:#f97316; color:#fff; }
.td-dl-body .tranx-list { background:#1c2232; border-color:#2a3347; }
.td-dl-body .tranx-item { border-bottom:1px solid #2a3347; }
.td-dl-body .tranx-label { color:#e2e8f0; }
.td-dl-body .tranx-date { color:#8892a4; }
.td-dl-body .tranx-amount .number { color:#e2e8f0; font-weight:600; }
.td-dl-body .tranx-amount .number-sm { color:#8892a4; }
.td-dl-body .modal-content { background:#1c2232; border-color:#2a3347; }
.td-dl-body .modal-header { border-bottom-color:#2a3347; }
.td-dl-body .modal-title { color:#e2e8f0; }
.td-dl-body .modal-footer { border-top-color:#2a3347; background:#151e2d; }
.td-dl-body .form-control { background:#151e2d; border-color:#2a3347; color:#e2e8f0; }
.td-dl-body .form-control:focus { background:#151e2d; border-color:#f97316; color:#e2e8f0; box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.td-dl-body .form-label { color:#9ca3af; }
.td-dl-body .form-note { color:#6b7280; }
.td-dl-body .form-note-alt { color:#6b7280; }
.td-dl-body .input-group-text { background:#2a3347; border-color:#2a3347; color:#8892a4; }
.td-dl-body .alert-info { background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.25); color:#93c5fd; }
.td-dl-body .alert-danger { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.25); color:#fca5a5; }
.td-dl-body .alert-success { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#86efac; }
.td-dl-body .alert-light { background:#1f2937; border-color:#2a3347; color:#9ca3af; }
.td-dl-body .custom-control-label { color:#9ca3af; }
.td-dl-body .custom-control-label a { color:#f97316; }
.td-dl-body .buysell-pm-label { background:#151e2d; border-color:#2a3347; color:#9ca3af; }
.td-dl-body .buysell-pm-control:checked + .buysell-pm-label { border-color:#f97316; }
.td-dl-body .table { color:#e2e8f0; }
.td-dl-body .table thead th { color:#8892a4; border-bottom-color:#2a3347; background:#151e2d; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.td-dl-body .table td { border-bottom-color:#1f2937; }
.td-dl-body .table-hover tbody tr:hover td { background:rgba(255,255,255,.03); }
.td-dl-body .thead-light th { background:#151e2d; color:#8892a4; border-color:#2a3347; }
.td-dl-body .breadcrumb { background:transparent; }
.td-dl-body .breadcrumb-item a { color:#8892a4; }
.td-dl-body .breadcrumb-item.active h1 { color:#e2e8f0; font-size:14px; font-weight:500; }
.td-dl-body .breadcrumb-item + .breadcrumb-item::before { color:#4b5563; }
.td-dl-body .link-primary { color:#f97316 !important; }
.td-dl-body .list-checked li::before { color:#f97316; }
.td-dl-body .dropdown-menu { background:#1c2232; border-color:#2a3347; }
.td-dl-body .dropdown-item { color:#9ca3af; }
.td-dl-body .dropdown-item:hover { background:#2a3347; color:#e2e8f0; }
.td-dl-body .nk-fmg-menu-item { color:#9ca3af; }
.td-dl-body .nk-fmg-menu-item:hover,.td-dl-body .nk-fmg-menu-item.active { background:#2a3347; color:#e2e8f0; }

.td-dl-mobile-toggle { background:none; border:none; color:#9ca3af; cursor:pointer; padding:0; margin-right:16px; }
.td-dl-body .breadcrumb { background:transparent; padding:0; margin:0; }
.td-dl-body .breadcrumb-item.active h1 { font-size:14px; font-weight:500; margin:0; color:#e2e8f0; }

/* Legal pages (Privacy, Terms) */
.td-legal-page { padding: 60px 20px 80px; }
.td-legal-container { max-width: 800px; margin: 0 auto; }
.td-legal-container h1 { font-size: 2rem; font-weight: 700; color: var(--td-text); margin-bottom: 8px; }
.td-legal-updated { color: var(--td-text-muted); font-size: 13px; margin-bottom: 32px; }
.td-legal-container h2 { font-size: 1.25rem; font-weight: 600; color: var(--td-text); margin-top: 40px; margin-bottom: 12px; border-bottom: 1px solid var(--td-border); padding-bottom: 8px; }
.td-legal-container h3 { font-size: 1rem; font-weight: 600; color: var(--td-text); margin-top: 24px; margin-bottom: 8px; }
.td-legal-container h4 { font-size: 0.9rem; font-weight: 600; color: var(--td-text); margin-top: 16px; margin-bottom: 6px; }
.td-legal-container p { color: var(--td-text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
.td-legal-container ul, .td-legal-container ol { color: var(--td-text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 14px; padding-left: 24px; }
.td-legal-container li { margin-bottom: 6px; }
.td-legal-container a { color: var(--td-accent); text-decoration: none; }
.td-legal-container a:hover { text-decoration: underline; }

/* ================================================================
   MODE ROW — Scroll/Split + Play/Static in one line
   ================================================================ */
.td-mode-row {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
}
.td-mode-row .td-btn-group { flex-shrink: 0; }
.td-mode-sep {
	width: 1px;
	height: 18px;
	background: var(--td-border);
	flex-shrink: 0;
	margin: 0 2px;
}

/* ================================================================
   SOUND FILENAME display in scenes bar
   ================================================================ */
.td-sound-fname {
	font-size: 10px;
	color: var(--td-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 80px;
	flex-shrink: 1;
}