*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-0: #07070e;
    --bg-1: #0c0c19;
    --bg-2: #101020;
    --bg-3: #161628;
    --bg-4: #1c1c32;
    --border: #1e1e38;
    --border-bright: #2a2a4a;
    --accent: #7c3aed;
    --accent-h: #8b5cf6;
    --accent-dim: rgba(124, 58, 237, 0.15);
    --cyan: #06b6d4;
    --cyan-dim: rgba(6, 182, 212, 0.12);
    --text-0: #f0f0f6;
    --text-1: #9090b8;
    --text-2: #55557a;
    --success: #10b981;
    --danger: #f43f5e;
    --warn: #f59e0b;
    --radius: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    --sidebar-w: 260px;
    --header-h: 56px;
    --input-h: 64px;
    --transition: 150ms ease;
}

html, body { height: 100%; background: var(--bg-0); color: var(--text-0); font-family: var(--font); font-size: 14px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; }

.mono { font-family: var(--mono); }

.view { position: fixed; inset: 0; }
.hidden { display: none !important; }

input, textarea, button { font-family: var(--font); font-size: 14px; outline: none; border: none; }

button { cursor: pointer; transition: background var(--transition), color var(--transition), opacity var(--transition); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

a { color: var(--accent-h); text-decoration: none; }


/* ─── loading ───────────────────────────────────────────── */

.loading_wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 22px; background: var(--bg-0); }
.loading_label { font-size: 13px; font-family: var(--mono); color: var(--text-2); letter-spacing: 0.04em; animation: blink 1.6s ease-in-out infinite; }

/* ─── auth ──────────────────────────────────────────────── */

.auth_wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,58,237,0.12) 0%, transparent 70%), var(--bg-0); }

.auth_card { width: 100%; max-width: 420px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 36px; display: flex; flex-direction: column; gap: 28px; box-shadow: 0 0 0 1px rgba(124,58,237,0.06), 0 32px 64px rgba(0,0,0,0.4); }
.licence_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.licence_card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; color: var(--text-1); }
.licence_card:hover { border-color: var(--border-bright); background: var(--bg-3); color: var(--text-0); }
.licence_card.lc_active { border-color: var(--accent); background: rgba(124,58,237,0.08); color: var(--accent-h); }
.lc_name { font-size: 13px; font-weight: 600; color: inherit; }
.lc_desc { font-size: 11px; color: var(--text-2); text-align: center; line-height: 1.4; }
.auth_subaction { display: flex; flex-direction: column; gap: 10px; }
.auth_expiry_label { font-size: 12px; color: var(--text-2); }

.brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.brand_glyph { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.brand_glyph::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0.45; animation: pulse_ring 3s ease-in-out infinite; }
.brand_glyph::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid var(--cyan); opacity: 0.25; animation: pulse_ring 3s ease-in-out infinite 0.6s; }
.glyph_ring_3 { position: absolute; inset: 20px; border-radius: 50%; border: 1px dashed rgba(124,58,237,0.3); animation: spin_slow 12s linear infinite; }
.glyph_inner { width: 20px; height: 20px; background: radial-gradient(circle, var(--accent-h), var(--accent)); border-radius: 50%; box-shadow: 0 0 24px var(--accent), 0 0 48px rgba(124,58,237,0.35), 0 0 80px rgba(124,58,237,0.15); position: relative; z-index: 1; }

@keyframes pulse_ring { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.1); opacity: 0.7; } }
@keyframes spin_slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.brand_name { font-size: 32px; font-weight: 700; letter-spacing: -1px; background: linear-gradient(135deg, #fff 20%, var(--accent-h) 60%, var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.brand_sub { font-size: 12px; color: var(--text-2); text-align: center; letter-spacing: 0.5px; text-transform: lowercase; }

.feature_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.feature_pill { display: flex; align-items: center; gap: 7px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--text-1); transition: border-color var(--transition), color var(--transition); }
.feature_pill:hover { border-color: var(--border-bright); color: var(--text-0); }
.feature_pill svg { color: var(--accent-h); flex-shrink: 0; }

.auth_actions { display: flex; flex-direction: column; gap: 10px; }

.btn_large { width: 100%; padding: 13px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 500; }

.btn_primary { background: var(--accent); color: #fff; border-radius: var(--radius); padding: 10px 18px; font-weight: 500; transition: background var(--transition), box-shadow var(--transition); }
.btn_primary:hover:not(:disabled) { background: var(--accent-h); box-shadow: 0 0 20px rgba(124,58,237,0.4); }

.btn_ghost { background: transparent; color: var(--text-1); border: 1px solid var(--border-bright); border-radius: var(--radius); padding: 10px 18px; font-weight: 400; }
.btn_ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-h); }

.btn_secondary { background: var(--bg-3); color: var(--text-1); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; }
.btn_secondary:hover { background: var(--bg-4); color: var(--text-0); }

.btn_icon { background: transparent; color: var(--text-2); border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.btn_icon:hover { background: var(--bg-3); color: var(--text-1); }

.divider { position: relative; text-align: center; margin: 2px 0; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.divider span { position: relative; background: var(--bg-1); padding: 0 12px; color: var(--text-2); font-size: 12px; }

.input_textarea { width: 100%; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-0); padding: 10px 12px; resize: none; font-family: var(--mono); font-size: 12px; line-height: 1.6; transition: border-color var(--transition); }
.input_textarea:focus { border-color: var(--accent); }
.input_textarea::placeholder { color: var(--text-2); }

.auth_footer { display: flex; justify-content: center; }
.badge_secure { font-size: 11px; color: var(--text-2); background: var(--bg-0); border: 1px solid var(--border); border-radius: 20px; padding: 5px 14px; display: flex; align-items: center; gap: 6px; }
.badge_secure::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: block; flex-shrink: 0; box-shadow: 0 0 6px var(--success); }


/* ─── layout ─────────────────────────────────────────────── */

.layout { display: flex; height: 100vh; overflow: hidden; }


/* ─── sidebar ────────────────────────────────────────────── */

.sidebar { width: var(--sidebar-w); background: var(--bg-1); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }

.sidebar_top { padding: 16px; border-bottom: 1px solid var(--border); }

.identity_badge { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); }
.identity_badge:hover { background: var(--bg-2); }

.identity_avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-h); box-shadow: 0 0 8px var(--accent); }

.identity_info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.identity_label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.identity_id { font-size: 11px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar_section { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

.section_row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.section_label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; }

.contact_list { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.contact_list::-webkit-scrollbar { width: 3px; }
.contact_list::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.contact_item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); }
.contact_item:hover { background: var(--bg-2); }
.contact_item.active { background: var(--accent-dim); }

.contact_avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-1); flex-shrink: 0; font-family: var(--mono); }
.contact_item.active .contact_avatar { border-color: var(--accent); color: var(--accent-h); }

.contact_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.contact_name { font-size: 12px; font-family: var(--mono); color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact_sub { font-size: 10px; color: var(--text-2); }

.contact_indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--success); opacity: 0.6; flex-shrink: 0; }

.sidebar_bottom { padding: 12px 16px; border-top: 1px solid var(--border); }
.security_badge { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); }
.sec_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: blink 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }


/* ─── chat panel ─────────────────────────────────────────── */

.chat_panel { flex: 1; display: flex; flex-direction: column; background: var(--bg-0); min-width: 0; overflow: hidden; }

.chat_empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }

.empty_glyph { position: relative; width: 64px; height: 64px; margin-bottom: 8px; }
.empty_ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border-bright); animation: spin_slow 12s linear infinite; }
.empty_ring::before { content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent-h); opacity: 0.7; }
.ring_2 { inset: 14px; animation-duration: 8s; animation-direction: reverse; border-color: var(--accent); opacity: 0.3; }
.ring_2::before { background: var(--cyan); }

@keyframes spin_slow { to { transform: rotate(360deg); } }

.empty_title { font-size: 15px; font-weight: 500; color: var(--text-1); }
.empty_sub { font-size: 13px; color: var(--text-2); }

.chat_active { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.chat_header { height: var(--header-h); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; background: var(--bg-1); }

.chat_contact { display: flex; align-items: center; gap: 10px; }
.chat_avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; }

.chat_contact_info { display: flex; flex-direction: column; gap: 2px; }
.chat_contact_id { font-size: 13px; font-family: var(--mono); color: var(--text-0); }
.chat_enc_label { font-size: 10px; color: var(--success); display: flex; align-items: center; gap: 4px; opacity: 0.7; }

.chat_actions { display: flex; align-items: center; gap: 4px; }

.message_list { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.message_list::-webkit-scrollbar { width: 3px; }
.message_list::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.message { display: flex; transition: opacity 0.2s ease; }
.message_in { justify-content: flex-start; }
.message_out { justify-content: flex-end; }

.message_bubble { max-width: 68%; padding: 9px 13px 7px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.message_in .message_bubble { background: var(--bg-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.message_out .message_bubble { background: var(--accent); border-bottom-right-radius: 4px; }

.message_text { font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.message_out .message_text { color: rgba(255,255,255,0.95); }
.message_in .message_text { color: var(--text-0); }

.message_time { font-size: 10px; align-self: flex-end; }
.message_out .message_time { color: rgba(255,255,255,0.5); }
.message_in .message_time { color: var(--text-2); }

.message_file { flex-direction: row; align-items: center; gap: 8px; }
.file_icon { font-size: 16px; opacity: 0.8; }

.input_area { border-top: 1px solid var(--border); padding: 12px 20px; background: var(--bg-1); flex-shrink: 0; }

.input_row { display: flex; align-items: flex-end; gap: 8px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 10px; padding: 6px 6px 6px 14px; transition: border-color var(--transition); }
.input_row:focus-within { border-color: var(--accent); }

.message_input { flex: 1; background: transparent; color: var(--text-0); font-size: 14px; padding: 4px 0; min-width: 0; resize: none; overflow-y: hidden; line-height: 1.45; max-height: 160px; overflow-y: auto; }
.message_input::placeholder { color: var(--text-2); }
.btn_attach { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-1); border-radius: 8px; cursor: pointer; transition: color var(--transition), background var(--transition); }
.btn_attach:hover { color: var(--text-0); background: var(--bg-3); }

.btn_send { width: 34px; height: 34px; background: var(--accent); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition), transform var(--transition); }
.btn_send:hover { background: var(--accent-h); transform: scale(1.05); }
.btn_send:active { transform: scale(0.97); }


/* ─── modal ──────────────────────────────────────────────── */

.modal_overlay { position: fixed; inset: 0; background: rgba(4, 4, 10, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; transition: opacity 0.2s ease; padding: 20px; }
.modal_overlay.visible { opacity: 1; }

.modal { background: var(--bg-2); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); width: 100%; max-width: 420px; padding: 24px; transform: translateY(8px); transition: transform 0.2s ease; }
.modal_overlay.visible .modal { transform: translateY(0); }

.modal_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal_title { font-size: 16px; font-weight: 600; color: var(--text-0); }
.modal_close_btn { color: var(--text-2); }

.modal_body { display: flex; flex-direction: column; gap: 12px; }

.modal_form { display: flex; flex-direction: column; gap: 10px; }
.modal_form label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }

.modal_form input[type="text"] { width: 100%; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-0); padding: 9px 12px; font-size: 13px; font-family: var(--mono); transition: border-color var(--transition); }
.modal_form input[type="text"]:focus { border-color: var(--accent); }

.modal_form textarea { width: 100%; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-1); padding: 9px 12px; font-size: 11px; font-family: var(--mono); line-height: 1.6; resize: none; }

.id_display { font-family: var(--mono); font-size: 11px; color: var(--text-1); background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; word-break: break-all; line-height: 1.6; }

.form_status { font-size: 12px; color: var(--text-2); min-height: 16px; }


/* ─── toasts ─────────────────────────────────────────────── */

.toast { position: fixed; bottom: 24px; right: 24px; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; z-index: 200; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.2s ease; pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast_info { background: var(--bg-3); color: var(--text-0); border: 1px solid var(--border-bright); }
.toast_success { background: rgba(16,185,129,0.15); color: var(--success); border: 1px solid rgba(16,185,129,0.3); }
.toast_error { background: rgba(244,63,94,0.15); color: var(--danger); border: 1px solid rgba(244,63,94,0.3); }


/* ─── sidebar header row ─────────────────────────────────── */

.sidebar_top { display: flex; align-items: center; gap: 6px; padding: 14px 12px; border-bottom: 1px solid var(--border); }
.sidebar_top .identity_badge { flex: 1; padding: 6px 8px; }
.settings_btn { flex-shrink: 0; width: 32px; height: 32px; }


/* ─── pending requests ────────────────────────────────────── */

.pending_section { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.pending_label_head { color: var(--warn); }
.pending_list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 4px; }

.pending_item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius); background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.12); }
.pending_avatar { border-color: var(--warn); color: var(--warn); background: rgba(245, 158, 11, 0.1); }
.pending_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pending_actions { display: flex; gap: 4px; flex-shrink: 0; }

.btn_accept { width: 26px; height: 26px; border-radius: 6px; background: rgba(16, 185, 129, 0.15); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.25); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition); }
.btn_accept:hover { background: rgba(16, 185, 129, 0.3); }

.btn_reject { width: 26px; height: 26px; border-radius: 6px; background: rgba(244, 63, 94, 0.1); color: var(--danger); border: 1px solid rgba(244, 63, 94, 0.2); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition); }
.btn_reject:hover { background: rgba(244, 63, 94, 0.25); }

.contact_pending { opacity: 0.55; pointer-events: none; }
.contact_pending .contact_sub { color: var(--warn); }
.pending_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; animation: blink 1.5s ease-in-out infinite; }
.contact_list_empty { padding: 16px 10px; font-size: 12px; color: var(--text-2); text-align: center; }


/* ─── message delete button ──────────────────────────────── */

.message { position: relative; transition: opacity 0.2s ease, transform 0.2s ease; }

.msg_delete_btn { position: absolute; top: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border-bright); color: var(--text-2); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition), background var(--transition); cursor: pointer; z-index: 2; padding: 0; }
.message_out .msg_delete_btn { right: -7px; }
.message_in .msg_delete_btn { left: -7px; }
.message:hover .msg_delete_btn { opacity: 1; }
.msg_delete_btn:hover { background: rgba(244, 63, 94, 0.25); border-color: var(--danger); color: var(--danger); }


/* ─── settings modal ─────────────────────────────────────── */

.settings_section { display: flex; flex-direction: column; gap: 8px; }
.settings_desc { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.settings_divider { height: 1px; background: var(--border); margin: 4px 0; }
.toggle_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle_label { font-size: 13px; color: var(--text-1); }
.toggle_btn { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--bg-4); border: 1px solid var(--border-bright); flex-shrink: 0; transition: background var(--transition), border-color var(--transition); cursor: pointer; }
.toggle_btn.toggle_on { background: var(--accent); border-color: var(--accent); }
.toggle_knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-1); transition: transform var(--transition), background var(--transition); pointer-events: none; }
.toggle_btn.toggle_on .toggle_knob { transform: translateX(18px); background: #fff; }

.expiry_live { font-family: var(--mono); font-size: 12px !important; color: var(--warn) !important; }

.expiry_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.expiry_btn { padding: 7px 4px; border-radius: var(--radius); background: var(--bg-3); color: var(--text-1); font-size: 12px; font-weight: 500; border: 1px solid var(--border); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); }
.expiry_btn:hover { background: var(--bg-4); color: var(--text-0); border-color: var(--border-bright); }
.expiry_btn.expiry_active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-h); }

.btn_danger { background: rgba(244, 63, 94, 0.1); color: var(--danger); border: 1px solid rgba(244, 63, 94, 0.25); border-radius: var(--radius); padding: 9px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--transition); }
.btn_danger:hover { background: rgba(244, 63, 94, 0.2); }

.btn_close_dm { color: rgba(244, 63, 94, 0.6); border: 1px solid rgba(244, 63, 94, 0.18); border-radius: 6px; }
.btn_close_dm:hover { background: rgba(244, 63, 94, 0.12); color: var(--danger); border-color: rgba(244, 63, 94, 0.35); }

.danger_zone label { color: var(--danger); }

.btn_row { display: flex; gap: 8px; }

.key_export { width: 100%; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); padding: 9px 12px; font-size: 11px; font-family: var(--mono); line-height: 1.6; resize: none; }


/* ─── file bubbles ───────────────────────────────────────── */

.file_bubble { min-width: 200px; max-width: 280px; }

.file_info { display: flex; align-items: center; gap: 10px; }

.file_icon_wrap { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.message_in .file_icon_wrap { background: var(--bg-3); color: var(--text-1); }
.message_out .file_icon_wrap { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }

.file_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file_name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message_out .file_name { color: rgba(255,255,255,0.95); }
.message_in .file_name { color: var(--text-0); }
.file_size { font-size: 11px; }
.message_out .file_size { color: rgba(255,255,255,0.5); }
.message_in .file_size { color: var(--text-2); }

.file_dl_btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition), color var(--transition); text-decoration: none; }
.message_in .file_dl_btn { background: var(--bg-3); color: var(--text-1); border: 1px solid var(--border-bright); }
.message_in .file_dl_btn:hover { background: var(--accent-dim); color: var(--accent-h); border-color: var(--accent); }
.message_out .file_dl_btn { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.message_out .file_dl_btn:hover { background: rgba(255,255,255,0.2); }

.file_sent_label { font-size: 11px; flex-shrink: 0; }
.message_out .file_sent_label { color: rgba(255,255,255,0.45); }
.message_in .file_sent_label { color: var(--text-2); }


/* ─── image / gif bubbles ────────────────────────────────── */

.img_bubble { padding: 5px 5px 8px; max-width: 300px; min-width: 120px; }

.chat_img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--bg-3);
    cursor: zoom-in;
}

.img_footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px 0;
}

.img_name {
    font-size: 11px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message_out .img_name { color: rgba(255,255,255,0.5); }
.message_in .img_name  { color: var(--text-2); }

.img_bubble .file_dl_btn {
    width: 22px; height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
}
.message_in  .img_bubble .file_dl_btn { background: var(--bg-3); color: var(--text-1); border: 1px solid var(--border-bright); }
.message_out .img_bubble .file_dl_btn { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.img_bubble .file_dl_btn:hover { opacity: 0.8; }
.img_bubble .file_dl_btn svg { width: 12px; height: 12px; }

/* lightbox */
.img_lightbox {
    position: fixed; inset: 0;
    background: rgba(4,4,10,0.92);
    backdrop-filter: blur(8px);
    z-index: 300;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
    animation: lb_in 0.15s ease;
}
@keyframes lb_in { from { opacity: 0; } to { opacity: 1; } }
.img_lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 80px rgba(0,0,0,0.8); pointer-events: none; }


/* ─── active call bar ────────────────────────────────────── */

.call_bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--bg-3); border-bottom: 1px solid rgba(16,185,129,0.35); border-radius: 0 0 12px 12px; z-index: 120; box-shadow: 0 4px 24px rgba(0,0,0,0.4); height: var(--call-bar-h, 46px); box-sizing: border-box; }

.view_main_call .layout { padding-top: var(--call-bar-h, 46px); }
.view_main_incoming .layout { padding-top: var(--call-bar-h, 46px); }
.view_main_call.view_main_incoming .layout { padding-top: calc(var(--call-bar-h, 46px) * 2); }
.call_bar_dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: blink 1.5s ease-in-out infinite; flex-shrink: 0; }
.call_bar_info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.call_bar_label { font-size: 11px; color: var(--success); font-weight: 500; }
.call_bar_who { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call_timer { font-size: 13px; color: var(--text-1); font-family: var(--mono); flex-shrink: 0; }
.call_btn_mute { color: var(--text-1); }
.call_btn_mute.muted { color: var(--danger); background: rgba(244,63,94,0.1); }
.call_btn_mute.ptt_tx { color: var(--accent); background: rgba(124,58,237,0.15); }
.call_btn_end { color: var(--danger); background: rgba(244,63,94,0.12); border-radius: 50%; width: 32px; height: 32px; }
.call_btn_end:hover { background: rgba(244,63,94,0.3); }
.ptt_btn { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; padding: 3px 10px 3px 8px; border-radius: 20px; background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.3); color: var(--text-2); user-select: none; flex-shrink: 0; cursor: pointer; transition: background 0.08s, box-shadow 0.08s, color 0.08s; }
.ptt_btn:hover { background: rgba(124,58,237,0.18); color: var(--text-1); }
.ptt_btn.ptt_tx, .ptt_btn:active { background: rgba(124,58,237,0.32); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(124,58,237,0.4); }
.ptt_key_row { display: flex; flex-direction: column; gap: 4px; }
.ptt_bind_btn { font-family: var(--mono); font-size: 12px; min-width: 80px; align-self: flex-start; margin-top: 4px; }
.ptt_bind_btn.ptt_binding { border-color: var(--accent); color: var(--accent); }

.btn_call { color: var(--text-2); }
.btn_call.in_call { color: var(--success); }
.btn_call.calling { color: var(--warn); animation: blink 1s ease-in-out infinite; }

.contact_in_call .contact_avatar { border-color: var(--success); }
.contact_call_icon { color: var(--success); flex-shrink: 0; animation: blink 1.5s ease-in-out infinite; }
.contact_screen_icon { color: var(--cyan); flex-shrink: 0; animation: blink 1.5s ease-in-out infinite; }

.btn_screen { color: var(--text-2); }
.btn_screen.sharing { color: var(--cyan); animation: blink 1.5s ease-in-out infinite; }

/* ─── incoming screen share toast ───────────────────────── */

.incoming_screen { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--bg-3); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; z-index: 130; box-shadow: 0 8px 32px rgba(0,0,0,0.5); min-width: 300px; animation: slide_up 0.2s ease; }
@keyframes slide_up { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.incoming_screen_icon { color: var(--cyan); flex-shrink: 0; }
.incoming_screen_info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.incoming_screen_label { font-size: 12px; color: var(--text-2); }
.incoming_screen_id { font-size: 12px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incoming_screen_actions { display: flex; gap: 6px; flex-shrink: 0; }
.incoming_screen_btn { padding: 6px 12px; font-size: 12px; }


/* ─── inline screen share panel ─────────────────────────── */

.screen_inline { flex: 7; min-height: 0; position: relative; background: #000; overflow: hidden; border-bottom: 1px solid var(--border); }
.screen_inline.hidden { display: none; flex: 0; }
.chat_active.has_screen .message_list { flex: 3; }

.screen_video_inline { width: 100%; height: 100%; object-fit: contain; display: block; }

.screen_inline_controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(transparent, rgba(4,4,10,0.75)); opacity: 0; transition: opacity 0.2s ease; }
.screen_inline:hover .screen_inline_controls { opacity: 1; }
.screen_inline_who { font-size: 11px; color: rgba(255,255,255,0.7); font-family: var(--mono); }
.screen_inline_label { font-size: 11px; color: var(--cyan); flex: 1; }
.screen_ctrl_btn { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); border-radius: 5px; }
.screen_ctrl_btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.screen_ctrl_stop:hover { background: rgba(244,63,94,0.4); color: #fff; }

.call_bar_screen { display: flex; align-items: center; gap: 4px; color: var(--cyan); font-size: 11px; padding: 3px 7px; background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.25); border-radius: 20px; animation: blink 2s ease-in-out infinite; }


/* ─── incoming call bar ───────────────────────────────────── */

.incoming_bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--bg-3); border-bottom: 1px solid rgba(124,58,237,0.45); border-radius: 0 0 12px 12px; z-index: 125; box-shadow: 0 4px 24px rgba(0,0,0,0.4); height: var(--call-bar-h, 46px); box-sizing: border-box; animation: slide_down 0.18s ease; }

@keyframes slide_down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.incoming_bar_pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse_ring 1s ease-in-out infinite; flex-shrink: 0; box-shadow: 0 0 8px var(--accent); }

.incoming_bar_label { color: var(--accent) !important; }

.incoming_bar_btn { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }

.call_btn_accept { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.4); color: var(--success); }
.call_btn_accept:hover { background: rgba(16,185,129,0.28); }


/* ─── reply preview bar ──────────────────────────────────── */

.reply_preview { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--bg-2); border-top: 1px solid var(--border); flex-shrink: 0; }
.reply_preview_bar { width: 3px; height: 28px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.reply_preview_text { flex: 1; font-size: 12px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply_cancel_btn { color: var(--text-2); flex-shrink: 0; }
.reply_cancel_btn:hover { color: var(--danger); background: transparent; }

/* ─── reply quote inside bubble ──────────────────────────── */

.msg_reply_quote { border-left: 2px solid var(--accent); padding: 4px 8px; border-radius: 4px; margin-bottom: 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message_out .msg_reply_quote { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); border-left-color: rgba(255,255,255,0.4); }
.message_in .msg_reply_quote { background: var(--bg-3); color: var(--text-2); }

/* ─── code blocks ────────────────────────────────────────── */

.code_block { position: relative; background: #0d0d1a; border: 1px solid var(--border-bright); border-radius: 10px; overflow: hidden; margin: 2px 0; min-width: 220px; max-width: 100%; }
.code_content { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: #c9d1d9; padding: 14px 14px 10px; overflow-x: auto; white-space: pre; display: block; }
.code_content code { font-family: inherit; background: none; padding: 0; }
.code_footer { display: flex; align-items: center; padding: 5px 12px 7px; border-top: 1px solid var(--border); background: #0a0a15; }
.code_lang { font-size: 11px; font-family: var(--mono); color: var(--text-2); letter-spacing: 0.03em; text-transform: lowercase; }
.code_copy_btn { position: absolute; top: 7px; right: 8px; background: var(--bg-4); border: 1px solid var(--border-bright); border-radius: 6px; padding: 4px 7px; color: var(--text-1); cursor: pointer; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity var(--transition), background var(--transition); z-index: 2; }
.code_block:hover .code_copy_btn { opacity: 1; }
.code_copy_btn:hover { background: var(--bg-3); color: var(--text-0); }
.message_out .code_block { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.15); }
.message_out .code_footer { background: rgba(0,0,0,0.2); border-top-color: rgba(255,255,255,0.1); }
.message_out .code_lang { color: rgba(255,255,255,0.4); }
.message_out .code_copy_btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.message_out .code_copy_btn:hover { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }

/* ─── swipe reply glow ───────────────────────────────────── */

.message_bubble { transition: transform 0.18s ease; }
.swipe_reply_icon { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; color: var(--accent-h); }
.message_in .swipe_reply_icon { left: -28px; }
.message_out .swipe_reply_icon { right: -28px; }
.swipe_reply_icon.visible { opacity: 1; }

/* ─── mobile back button (hidden on desktop) ─────────────── */

.btn_back_mobile { display: none; }


/* ─── mobile responsive ──────────────────────────────────── */

@media (max-width: 640px) {
    html, body { font-size: 15px; height: 100%; }

    /* use visualViewport height (set by JS) so keyboard doesn't cut off input */
    .view { height: 100%; height: var(--vp-height, 100dvh); }
    .layout { height: 100%; height: var(--vp-height, 100dvh); }

    /* auth */
    .auth_card { padding: 28px 20px; gap: 24px; }
    .brand_name { font-size: 22px; }

    /* layout: stack sidebar / chat as full-screen panels */
    .layout { position: relative; overflow: hidden; }

    .sidebar {
        position: absolute;
        inset: 0;
        width: 100%;
        z-index: 10;
        transition: transform 0.22s ease;
    }

    .chat_panel {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: transform 0.22s ease;
    }

    .chat_active { flex: 1; min-height: 0; }
    .chat_empty { flex: 1; }

    /* hide sidebar, show chat */
    .layout.mobile_in_chat .sidebar {
        transform: translateX(-100%);
        pointer-events: none;
    }

    /* hide chat panel when showing sidebar */
    .layout:not(.mobile_in_chat) .chat_panel {
        transform: translateX(100%);
        pointer-events: none;
    }

    /* back button visible on mobile */
    .btn_back_mobile {
        display: flex;
        margin-right: 4px;
        color: var(--text-1);
    }

    /* chat header tighter */
    .chat_header { padding: 0 10px; }
    .chat_contact_id { font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* message list */
    .message_list { padding: 12px 10px; gap: 5px; }
    .message_bubble { max-width: 82%; }

    /* input area — font-size 16px prevents iOS zoom on focus */
    .input_area { padding: 8px 10px; }
    .message_input { font-size: 16px; }
    .modal_form input[type="text"],
    .modal_form textarea,
    .input_textarea { font-size: 16px; }

    /* modal full width */
    .modal_overlay { padding: 12px; align-items: flex-end; }
    .modal { max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

    /* toast */
    .toast { right: 12px; left: 12px; text-align: center; }

    /* img bubbles */
    .img_bubble { max-width: min(260px, 82vw); }
    .file_bubble { min-width: 160px; max-width: min(260px, 82vw); }

    /* sidebar identity truncation */
    .identity_id { font-size: 10px; }

    /* expiry grid tighter */
    .expiry_grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .expiry_btn { padding: 6px 2px; font-size: 11px; }
}


/* ─── groups ─────────────────────────────────────────────── */

.group_avatar { background: rgba(6,182,212,0.12); border-color: var(--cyan); color: var(--cyan); }
.group_avatar svg { width: 15px; height: 15px; }

.group_item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); }
.group_item:hover { background: var(--bg-2); }
.group_item.active { background: rgba(6,182,212,0.1); }

.group_icon { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border-bright); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.group_item.active .group_icon { border-color: var(--cyan); color: var(--cyan); }

.group_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.group_name { font-size: 12px; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group_sub  { font-size: 10px; color: var(--text-2); }

.group_unread { width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* pending group invite */
.pending_group_item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius); background: rgba(6,182,212,0.05); border: 1px solid rgba(6,182,212,0.15); margin-bottom: 4px; }
.pending_group_icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.3); color: var(--cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pending_group_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pending_group_name { font-size: 12px; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending_group_from { font-size: 10px; color: var(--text-2); }

/* group message sender label */
.group_msg_sender { font-size: 10px; color: var(--cyan); font-family: var(--mono); margin-bottom: 2px; display: block; opacity: 0.7; }

/* group call participant strip */
.group_participant_strip { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--bg-1); border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; height: 64px; }
.group_participant_strip::-webkit-scrollbar { height: 2px; }
.group_participant_strip::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.ptile { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.ptile_avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-3); border: 2px solid var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-1); font-family: var(--mono); transition: border-color 0.3s ease; }
.ptile_avatar.speaking { border-color: var(--success); }
.ptile_avatar.muted { border-color: var(--danger); opacity: 0.6; }
.ptile_label { font-size: 9px; color: var(--text-2); font-family: var(--mono); max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* group screen share participant tiles overlaid at bottom of screen */
.group_screen_tiles { position: absolute; bottom: 44px; left: 0; right: 0; display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; z-index: 3; pointer-events: none; }
.group_screen_tiles::-webkit-scrollbar { display: none; }

.gstile { flex-shrink: 0; width: 80px; height: 60px; border-radius: 8px; background: rgba(7,7,14,0.8); border: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; backdrop-filter: blur(8px); }
.gstile_avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); border: 1.5px solid var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text-1); font-family: var(--mono); }
.gstile_avatar.speaking { border-color: var(--success); }
.gstile_label { font-size: 9px; color: rgba(255,255,255,0.5); font-family: var(--mono); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* group settings modal extras */
.member_list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.member_list::-webkit-scrollbar { width: 3px; }
.member_list::-webkit-scrollbar-thumb { background: var(--border-bright); }
.member_item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--bg-0); }
.member_item_avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text-1); font-family: var(--mono); flex-shrink: 0; }
.member_item_id { flex: 1; font-size: 11px; color: var(--text-1); font-family: var(--mono); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member_item_you { font-size: 10px; color: var(--accent-h); flex-shrink: 0; }
.btn_remove_member { width: 22px; height: 22px; border-radius: 5px; background: rgba(244,63,94,0.1); color: var(--danger); border: 1px solid rgba(244,63,94,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background var(--transition); }
.btn_remove_member:hover { background: rgba(244,63,94,0.25); }

.invite_link_wrap { display: flex; gap: 6px; }
.invite_link_input { flex: 1; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-1); padding: 8px 10px; font-size: 11px; font-family: var(--mono); min-width: 0; }

.group_expiry_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* join request items */
.join_req_item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius); background: rgba(6,182,212,0.05); border: 1px solid rgba(6,182,212,0.15); margin-bottom: 4px; }
.join_req_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.join_req_name { font-size: 11px; color: var(--text-1); font-family: var(--mono); }
.join_req_sub { font-size: 10px; color: var(--text-2); }

/* message failed state */
.bubble_failed { border: 1px solid rgba(244,63,94,0.35) !important; background: rgba(244,63,94,0.05) !important; }
.msg_fail_row { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(244,63,94,0.2); }
.msg_fail_label { font-size: 11px; color: var(--danger); flex: 1; }
.msg_retry_btn { font-size: 11px; color: var(--accent-h); background: none; border: 1px solid rgba(124,58,237,0.35); border-radius: 4px; padding: 2px 8px; cursor: pointer; transition: background var(--transition); }
.msg_retry_btn:hover { background: rgba(124,58,237,0.15); }

/* remove contact button */
.btn_remove_contact { color: var(--text-2); }
.btn_remove_contact:hover { color: var(--danger); }

/* call bar group mode */
.call_bar_group .call_bar_label::before { content: '⬡ '; }

/* settings tabs */
.settings_tabbed { gap: 0; }
.stab_bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 0; }
.stab { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 12px; font-size: 12px; color: var(--text-2); cursor: pointer; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); font-weight: 500; letter-spacing: 0.02em; }
.stab:hover { color: var(--text-1); }
.stab.stab_active { color: var(--accent-h); border-bottom-color: var(--accent); }
.stab_panels { min-height: 220px; }
.stab_panel { display: none; flex-direction: column; gap: 10px; }
.stab_panel.stab_panel_active { display: flex; }
.muted_desc { color: var(--text-2) !important; opacity: 0.6; }

/* call quality */
.call_quality_btn { background: none; border: none; padding: 2px 4px; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; border-radius: 4px; }
.call_quality_btn:hover { background: rgba(255,255,255,0.06); }
.quality_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); transition: background 0.4s; }
.quality_dot.quality_good { background: var(--success); box-shadow: 0 0 5px rgba(16,185,129,0.5); }
.quality_dot.quality_medium { background: var(--warn); box-shadow: 0 0 5px rgba(245,158,11,0.5); }
.quality_dot.quality_poor { background: var(--danger); box-shadow: 0 0 5px rgba(244,63,94,0.5); animation: blink 1s ease-in-out infinite; }
.quality_dot.quality_unknown { background: var(--text-2); }
.call_debug_panel { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); background: var(--bg-3); border: 1px solid var(--border-bright); border-radius: 10px; padding: 12px 14px; z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5); min-width: 252px; }
.dbg_header { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); margin-bottom: 8px; }
.dbg_stats { display: flex; gap: 14px; margin-bottom: 10px; }
.dbg_stat { display: flex; flex-direction: column; gap: 2px; }
.dbg_label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.dbg_val { font-size: 13px; font-family: var(--mono); color: var(--text-0); }
.dbg_val.dbg_warn { color: var(--warn); }
.dbg_canvas { display: block; border-radius: 4px; background: var(--bg-2); }

/* message read status */
.message_meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.msg_status { display: inline-flex; align-items: center; color: var(--text-2); opacity: 0.7; }
.msg_status.status_read { color: var(--accent-h); opacity: 1; }

/* typing indicator */
.typing_indicator { display: flex; align-items: center; gap: 6px; padding: 4px 16px 2px; font-size: 11px; color: var(--text-2); }
.typing_dots { display: flex; gap: 3px; align-items: center; }
.typing_dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-2); animation: typing_bounce 1.2s ease-in-out infinite; }
.typing_dots span:nth-child(2) { animation-delay: 0.2s; }
.typing_dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing_bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* voice message button */
.btn_voice_msg_icon { color: var(--text-2); transition: color var(--transition), background var(--transition); }
.btn_voice_msg_icon:hover { color: var(--accent-h); }
.btn_voice_msg_icon.recording { color: var(--danger); background: rgba(244,63,94,0.12); animation: blink 0.8s ease-in-out infinite; }

/* voice message bubble */
.voice_bubble { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 180px; }
.voice_play_btn { background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3); color: var(--accent-h); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background var(--transition); }
.voice_play_btn:hover { background: rgba(124,58,237,0.3); }
.voice_progress_wrap { flex: 1; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.voice_progress_bar { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width 0.1s linear; }
.voice_time_label { font-size: 11px; color: var(--text-2); font-family: var(--mono); flex-shrink: 0; }


/* ─── desktop app (Electron) compact mode ────────────────────
   Activated by preload.js setting data-electron on <html>.
   Tightens spacing and scales down oversized elements so the
   UI fits naturally in a resizable desktop window.
   ──────────────────────────────────────────────────────────── */

[data-electron] {
    --header-h: 48px;
    --sidebar-w: 240px;
    --input-h: 54px;
}

/* auth screen — smaller card and brand */
[data-electron] .auth_card {
    padding: 28px 28px;
    gap: 20px;
    max-width: 390px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
}
[data-electron] .auth_card::-webkit-scrollbar { width: 4px; }
[data-electron] .auth_card::-webkit-scrollbar-track { background: transparent; }
[data-electron] .auth_card::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
[data-electron] .brand_glyph { width: 54px; height: 54px; }
[data-electron] .brand_glyph::after { inset: 8px; }
[data-electron] .glyph_ring_3 { inset: 16px; }
[data-electron] .glyph_inner { width: 16px; height: 16px; }
[data-electron] .brand_name { font-size: 24px; }
[data-electron] .brand { gap: 10px; }
[data-electron] .feature_grid { gap: 6px; }
[data-electron] .feature_pill { padding: 6px 8px; font-size: 11px; }
[data-electron] .btn_large { padding: 10px 16px; }
[data-electron] .auth_card .auth_actions { gap: 8px; }

/* sidebar — tighter rows */
[data-electron] .sidebar_top { padding: 10px 10px; }
[data-electron] .section_row { padding: 10px 14px 6px; }
[data-electron] .contact_item { padding: 6px 8px; }
[data-electron] .group_item { padding: 6px 8px; }
[data-electron] .sidebar_bottom { padding: 8px 12px; }

/* chat — tighter header and messages */
[data-electron] .chat_header { padding: 0 14px; }
[data-electron] .message_list { padding: 14px 16px; gap: 5px; }
[data-electron] .input_area { padding: 8px 14px; }

/* modal — add max-height so it never overflows short windows */
[data-electron] .modal {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 18px 20px;
}
[data-electron] .modal_header { margin-bottom: 14px; }

/* group participant strip */
[data-electron] .group_participant_strip { height: 54px; padding: 4px 12px; }
[data-electron] .ptile_avatar { width: 30px; height: 30px; font-size: 10px; }

/* hide the "home" back-link — not relevant in the desktop app */
[data-electron] #btn_home { display: none !important; }

/* adaptive height — when the window is shorter than 680px, shrink further */
@media (max-height: 680px) {
    [data-electron] .auth_card { padding: 20px 22px; gap: 14px; }
    [data-electron] .brand_glyph { width: 42px; height: 42px; }
    [data-electron] .brand_name { font-size: 20px; }
    [data-electron] .brand { gap: 8px; }
    [data-electron] .feature_grid { display: none; }
    [data-electron] .auth_card .auth_footer { display: none; }
    [data-electron] .modal { max-height: calc(100vh - 32px); }
}

/* ── First-run setup wizard (Electron only) ─────────────────────────────────── */
.setup_wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,58,237,0.12) 0%, transparent 70%), var(--bg-0);
}
.setup_card {
    width: 100%; max-width: 440px;
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 36px 36px;
    display: flex; flex-direction: column; gap: 22px;
    box-shadow: 0 0 0 1px rgba(124,58,237,0.06), 0 32px 64px rgba(0,0,0,0.4);
    max-height: calc(100vh - 40px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent;
}
.setup_card::-webkit-scrollbar { width: 4px; }
.setup_card::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
.setup_header { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.setup_title { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; background: linear-gradient(135deg, #fff 20%, var(--accent-h) 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.setup_subtitle { font-size: 12px; color: var(--text-2); text-align: center; }
.setup_terms {
    background: var(--bg-0); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    font-size: 12px; color: var(--text-1); line-height: 1.7;
    max-height: 200px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent;
}
.setup_terms::-webkit-scrollbar { width: 4px; }
.setup_terms::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
.setup_terms h4 { color: var(--text-0); font-size: 12px; font-weight: 600; margin: 0 0 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.setup_terms p { margin: 0 0 8px; }
.setup_terms p:last-child { margin: 0; }
.setup_option {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
    transition: border-color 0.15s;
}
.setup_option:hover { border-color: var(--border-bright); }
.setup_option input[type="checkbox"] { display: none; }
.setup_checkbox {
    width: 18px; height: 18px; border: 1.5px solid var(--border-bright);
    border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.setup_option.checked .setup_checkbox { background: var(--accent); border-color: var(--accent); }
.setup_checkbox svg { display: none; }
.setup_option.checked .setup_checkbox svg { display: block; }
.setup_option_text { display: flex; flex-direction: column; gap: 2px; }
.setup_option_label { font-size: 13px; font-weight: 500; color: var(--text-0); }
.setup_option_desc { font-size: 11px; color: var(--text-2); }
.setup_actions { display: flex; gap: 10px; }
.setup_actions .btn_ghost { flex: 1; }
.setup_actions .btn_primary { flex: 2; }