/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
    --tg-bg: #EFEFF3;
    --tg-bubble-in: #FFFFFF;
    --tg-bubble-out: #EFFDDE;
    --tg-accent: #2AABEE;
    --tg-text-primary: #000000;
    --tg-text-secondary: #8D8E93;
    --tg-text-link: #2AABEE;
    --tg-separator: rgba(0, 0, 0, 0.12);
    --tg-tick-read: #4FAE4E;
    --tg-tick-sent: #8D8E93;
    --tg-reply-bar: #2AABEE;
    --tg-search-highlight: rgba(255, 235, 59, 0.5);
    --tg-date-pill-bg: rgba(0, 0, 0, 0.15);
    --tg-date-pill-text: #FFFFFF;
    --tg-service-text: #8D8E93;
    --tg-topbar-bg: #FFFFFF;
    --tg-topbar-height: 56px;
}

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
button { cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
a { color: var(--tg-text-link); text-decoration: none; }

/* ── App loading splash ────────────────────────────────────────────────────── */
.app-loading {
    display: flex; align-items: center; justify-content: center;
    height: 100vh; background: var(--tg-bg);
}
.app-loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--tg-separator);
    border-top-color: var(--tg-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Unlock screen ─────────────────────────────────────────────────────────── */
.unlock-screen {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--tg-bg);
}
.unlock-card {
    background: #fff; border-radius: 16px; padding: 40px 36px;
    width: 100%; max-width: 360px; box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.unlock-logo { font-size: 48px; }
.unlock-title { font-size: 22px; font-weight: 600; color: var(--tg-text-primary); }
.unlock-subtitle { font-size: 14px; color: var(--tg-text-secondary); text-align: center; }
.unlock-input-wrap { width: 100%; position: relative; }
.unlock-input {
    width: 100%; padding: 12px 44px 12px 16px;
    border: 1.5px solid var(--tg-separator); border-radius: 10px;
    font-size: 16px; color: var(--tg-text-primary); outline: none;
    transition: border-color 0.2s;
}
.unlock-input:focus { border-color: var(--tg-accent); }
.unlock-eye-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--tg-text-secondary); font-size: 18px; line-height: 1;
}
.unlock-btn {
    width: 100%; padding: 13px; background: var(--tg-accent); color: #fff;
    border-radius: 10px; font-size: 16px; font-weight: 600;
    transition: opacity 0.2s; white-space: nowrap;
}
.unlock-btn:disabled { opacity: 0.5; cursor: default; }
.unlock-btn:not(:disabled):hover { opacity: 0.9; }
.unlock-error { color: #e53935; font-size: 14px; text-align: center; }
.unlock-loading { color: var(--tg-text-secondary); font-size: 14px; text-align: center; }
@keyframes shake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.unlock-card.shake { animation: shake 0.4s ease; }

/* ── Chat layout ───────────────────────────────────────────────────────────── */
.chat-layout {
    display: flex; flex-direction: column; height: 100vh;
    background: var(--tg-bg); overflow: hidden;
}

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.topbar {
    height: var(--tg-topbar-height); min-height: var(--tg-topbar-height);
    background: var(--tg-topbar-bg); display: flex; align-items: center;
    padding: 0 12px; gap: 12px; border-bottom: 1px solid var(--tg-separator);
    z-index: 10; flex-shrink: 0;
}
.topbar-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--tg-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.topbar-info { flex: 1; min-width: 0; }
.topbar-name { font-size: 15px; font-weight: 600; color: var(--tg-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-status { font-size: 13px; color: var(--tg-text-secondary); }
.topbar-actions { display: flex; gap: 4px; }
.topbar-btn {
    width: 36px; height: 36px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: var(--tg-text-secondary);
    font-size: 18px; transition: background 0.15s;
}
.topbar-btn:hover { background: var(--tg-bg); }

/* ── Message list / scroll area ────────────────────────────────────────────── */
.message-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 20px 0 8px;
    overflow-anchor: none;
}
.message-scroll::-webkit-scrollbar { width: 6px; }
.message-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }

/* ── Date separator ────────────────────────────────────────────────────────── */
/* Zero flow height so this slot stays exactly ItemSize=80px in the Virtualize
   component. The pill is absolutely positioned and visually centred on the
   boundary between the previous item and this one. */
.date-sep {
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.date-sep-pill {
    position: absolute;
    top: -12px;         /* half of pill height (~24px) — centres pill on boundary */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--tg-date-pill-bg); color: var(--tg-date-pill-text);
    font-size: 12px; padding: 4px 10px; border-radius: 10px; user-select: none;
}

/* ── Single-emoji messages ─────────────────────────────────────────────────── */
.bubble.emoji-only { background: transparent !important; box-shadow: none; padding: 0; }
.group-end .bubble.emoji-only.incoming::after,
.group-end .bubble.emoji-only.outgoing::after { display: none; }
.emoji-only-content { padding: 0 4px !important; }
.emoji-only-content .msg-text { font-size: 120px; line-height: 1.1; display: block; }
.emoji-meta { float: none !important; margin: 2px 0 0 !important; }

/* ── Message row wrapper ───────────────────────────────────────────────────── */
.msg-row {
    display: flex; padding: 0 8px;
    margin-bottom: 2px;
}
.msg-row.group-end { margin-bottom: 8px; }
.msg-row.outgoing { justify-content: flex-end; }
.msg-row.incoming { justify-content: flex-start; }
.msg-row.service { justify-content: center; }

/* ── Bubble ────────────────────────────────────────────────────────────────── */
.bubble {
    position: relative; max-width: min(500px, 75vw);
    border-radius: 12px; word-break: break-word;
}
.bubble.incoming {
    background: var(--tg-bubble-in); border-bottom-left-radius: 4px;
    margin-left: 6px;
}
.bubble.outgoing {
    background: var(--tg-bubble-out); border-bottom-right-radius: 4px;
    margin-right: 6px;
}
/* Only last in group gets the tail */
.group-end .bubble.incoming::after {
    content: ''; position: absolute; bottom: 0; left: -7px;
    border: 0 solid transparent;
    border-right: 7px solid var(--tg-bubble-in);
    border-bottom: 10px solid transparent;
}
.group-end .bubble.outgoing::after {
    content: ''; position: absolute; bottom: 0; right: -7px;
    border: 0 solid transparent;
    border-left: 7px solid var(--tg-bubble-out);
    border-bottom: 10px solid transparent;
}
/* Grouping: first in group shows sender name for incoming */
.group-start .sender-name {
    font-size: 13px; font-weight: 600; color: var(--tg-accent);
    padding: 6px 12px 0; display: block;
}

/* ── Bubble inner padding ──────────────────────────────────────────────────── */
.bubble-content { padding: 6px 12px 6px; }
.bubble-content.with-media { padding: 0; overflow: hidden; border-radius: inherit; }

/* ── Message text ──────────────────────────────────────────────────────────── */
.msg-text { font-size: 15px; line-height: 1.45; color: var(--tg-text-primary); }
.msg-text .span-bold { font-weight: 700; }
.msg-text .span-italic { font-style: italic; }
.msg-text .span-code { font-family: monospace; background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.msg-text .span-pre { font-family: monospace; background: rgba(0,0,0,0.06); display: block; padding: 8px; border-radius: 6px; font-size: 13px; white-space: pre-wrap; margin: 4px 0; }
.msg-text .span-strikethrough { text-decoration: line-through; }
.msg-text .span-underline { text-decoration: underline; }
.msg-text .span-link { color: var(--tg-text-link); }
.msg-text .span-mention { color: var(--tg-accent); }

/* ── Timestamp + ticks ─────────────────────────────────────────────────────── */
.msg-meta {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 3px; margin-top: 2px; float: right; margin-left: 8px;
}
.msg-time { font-size: 11px; color: var(--tg-text-secondary); white-space: nowrap; }
.msg-ticks { font-size: 12px; color: var(--tg-tick-sent); }
/* Overlaid meta on photos/videos */
.bubble-content.with-media .msg-meta-overlay {
    position: absolute; bottom: 6px; right: 10px;
    background: rgba(0,0,0,0.35); border-radius: 8px;
    padding: 2px 6px; display: flex; align-items: center; gap: 3px;
}
.bubble-content.with-media .msg-meta-overlay .msg-time { color: #fff; }
.bubble-content.with-media .msg-meta-overlay .msg-ticks { color: rgba(255,255,255,0.85); }

/* ── Photo message ─────────────────────────────────────────────────────────── */
.photo-thumb {
    display: block; width: 100%; max-width: 320px; height: auto;
    cursor: pointer; border-radius: inherit;
}
.photo-caption { padding: 4px 12px 4px; font-size: 14px; color: var(--tg-text-primary); }

/* ── Video / animation ─────────────────────────────────────────────────────── */
.video-thumb-wrap {
    position: relative; display: inline-block; cursor: pointer;
    max-width: 320px; width: 100%;
}
.video-thumb-wrap img { width: 100%; height: auto; display: block; border-radius: inherit; }
.video-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0,0,0,0.45); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; pointer-events: none;
}
.video-duration {
    position: absolute; bottom: 6px; left: 8px;
    font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ── Voice message ─────────────────────────────────────────────────────────── */
.voice-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px; min-width: 220px;
}
.voice-play-btn {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--tg-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.voice-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.voice-waveform { height: 28px; }
.voice-waveform svg { width: 100%; height: 100%; }
.voice-time { font-size: 12px; color: var(--tg-text-secondary); }

/* ── Audio file card ───────────────────────────────────────────────────────── */
.audio-card {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; min-width: 220px;
}
.audio-icon {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--tg-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.audio-info { flex: 1; min-width: 0; }
.audio-title { font-size: 14px; font-weight: 600; color: var(--tg-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-performer { font-size: 12px; color: var(--tg-text-secondary); }
.audio-duration { font-size: 12px; color: var(--tg-text-secondary); }

/* ── Document card ─────────────────────────────────────────────────────────── */
.doc-card {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; cursor: pointer; min-width: 220px;
}
.doc-card:hover { background: rgba(0,0,0,0.03); }
.doc-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: #E3F2FD; color: var(--tg-accent);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 14px; font-weight: 500; color: var(--tg-text-primary); word-break: break-all; }
.doc-size { font-size: 12px; color: var(--tg-text-secondary); }

/* ── Sticker ───────────────────────────────────────────────────────────────── */
.sticker-wrap { padding: 4px; }
.sticker-img { width: 150px; height: 150px; object-fit: contain; display: block; }

/* ── Service message ───────────────────────────────────────────────────────── */
.service-msg {
    display: flex; justify-content: center; padding: 4px 16px; width: 100%;
}
.service-pill {
    background: var(--tg-date-pill-bg); color: var(--tg-date-pill-text);
    font-size: 13px; padding: 5px 12px; border-radius: 12px;
    text-align: center; user-select: none; max-width: 300px;
}

/* ── Reply quote ───────────────────────────────────────────────────────────── */
.reply-quote {
    display: flex; gap: 8px; padding: 4px 0 6px;
    border-left: 3px solid var(--tg-reply-bar); padding-left: 8px;
    margin-bottom: 4px; cursor: pointer;
}
.reply-quote-content { min-width: 0; flex: 1; }
.reply-author { font-size: 13px; font-weight: 600; color: var(--tg-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-text { font-size: 13px; color: var(--tg-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; align-self: center; }

/* ── Forward header ────────────────────────────────────────────────────────── */
.forward-header {
    font-size: 13px; color: var(--tg-accent); padding: 4px 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forward-from { font-weight: 600; }

/* ── Reactions ─────────────────────────────────────────────────────────────── */
.reactions {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 3px 0 0;
}
.msg-row.outgoing .reactions { justify-content: flex-end; }
.reaction-pill {
    background: rgba(0,0,0,0.06); border-radius: 12px;
    padding: 2px 7px; font-size: 13px; display: flex; align-items: center; gap: 3px;
}
.reaction-count { font-size: 12px; color: var(--tg-text-secondary); }

/* ── Highlight (after search jump) ────────────────────────────────────────── */
@keyframes highlight-fade {
    0%   { background: rgba(42,171,238,0.22); }
    100% { background: transparent; }
}
.msg-highlight .bubble { animation: highlight-fade 2s ease forwards; }

/* ── Lightbox overlay ──────────────────────────────────────────────────────── */
.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: flex; flex-direction: column; z-index: 100;
    align-items: center; justify-content: center;
}
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-close {
    position: fixed; top: 14px; right: 16px; color: #fff; font-size: 28px;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.1);
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 28px; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.1);
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-download {
    position: fixed; bottom: 20px;
    color: #fff; font-size: 14px; background: rgba(255,255,255,0.15);
    padding: 8px 20px; border-radius: 20px;
}
.lightbox-download:hover { background: rgba(255,255,255,0.25); }

/* ── Video player overlay ──────────────────────────────────────────────────── */
.video-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100;
}
.video-overlay video { max-width: 95vw; max-height: 85vh; }
.video-overlay-close {
    position: fixed; top: 14px; right: 16px; color: #fff; font-size: 28px;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.1);
}
.video-loading {
    color: #fff; font-size: 15px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* ── Search overlay ────────────────────────────────────────────────────────── */
.search-overlay {
    position: fixed; inset: 0 0 0 0; z-index: 50;
    display: flex; flex-direction: column;
    background: #fff;
}
.search-topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px; height: var(--tg-topbar-height);
    border-bottom: 1px solid var(--tg-separator); flex-shrink: 0;
}
.search-back { color: var(--tg-accent); font-size: 22px; padding: 8px; }
.search-input {
    flex: 1; border: none; outline: none;
    font-size: 16px; color: var(--tg-text-primary); background: none;
}
.search-results { flex: 1; overflow-y: auto; }
.search-result-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; border-bottom: 1px solid var(--tg-separator); cursor: pointer;
}
.search-result-item:hover { background: var(--tg-bg); }
.search-result-meta { display: flex; align-items: center; justify-content: space-between; }
.search-result-dir { font-size: 12px; color: var(--tg-accent); font-weight: 600; }
.search-result-date { font-size: 12px; color: var(--tg-text-secondary); }
.search-result-text { font-size: 14px; color: var(--tg-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-highlight { background: var(--tg-search-highlight); border-radius: 2px; }
.search-empty { padding: 40px 16px; text-align: center; color: var(--tg-text-secondary); font-size: 15px; }
.search-loading { padding: 24px; display: flex; justify-content: center; }

/* ── Loading spinner (inline) ──────────────────────────────────────────────── */
.spinner {
    width: 24px; height: 24px;
    border: 2.5px solid var(--tg-separator); border-top-color: var(--tg-accent);
    border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner.large { width: 36px; height: 36px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Misc utilities ────────────────────────────────────────────────────────── */
.clearfix::after { content: ''; display: table; clear: both; }