/* style.css - Kompletná, otestovaná a uzatvorená verzia */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #0b141a; color: #e9edef; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }

button { transition: all 0.2s ease; cursor: pointer; border: none; }
button:hover { transform: translateY(-2px); filter: brightness(1.15); }
button:active { transform: translateY(0) scale(0.96); }

.notification-bar { position: absolute; top: 10px; padding: 12px 25px; border-radius: 8px; font-weight: bold; display: none; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.notification-bar.error { background: #ea0038; color: white; }
.notification-bar.success { background: #00a884; color: white; }

.auth-screen { background: #111b21; padding: 30px; border-radius: 10px; width: 350px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.auth-screen h2 { color: #00a884; margin-bottom: 20px; font-size: 32px; }
.auth-screen input { width: 100%; padding: 12px; margin-bottom: 15px; background: #2a3942; border: none; border-radius: 6px; color: #fff; }
.auth-screen button { width: 100%; padding: 12px; background: #00a884; color: #fff; font-weight: bold; border-radius: 6px; }
.auth-screen .switch-btn { color: #34b7f1; cursor: pointer; font-size: 13px; margin-top: 12px; }

.app-screen { width: 100%; max-width: 1200px; height: 94vh; background: #111b21; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); overflow: hidden; }
.layout { display: flex; height: 100%; }

.sidebar { width: 32%; background: #111b21; border-right: 1px solid #222e35; display: flex; flex-direction: column; height: 100%; }
.sidebar-header { padding: 15px; background: #202c33; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #222e35; }
.profile-text { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#myProfileHeader { font-weight: bold; }
#myStatusHeader { font-size: 11px; color: #8696a0; font-style: italic; }

.avatar-circle { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; text-transform: uppercase; font-size: 18px; background-color: #00a884; }

.search-bar-box { padding: 12px; display: flex; gap: 6px; background: #111b21; border-bottom: 1px solid #222e35; }
.search-bar-box input { flex: 1; padding: 9px; background: #2a3942; border: none; border-radius: 20px; color: #fff; padding-left: 15px; }
.search-bar-box button { padding: 9px 14px; background: #00a884; border-radius: 20px; color: #fff; font-weight: bold; }

.contact-list { flex: 1; overflow-y: auto; height: 100%; }
.contact-item { padding: 14px 15px; border-bottom: 1px solid #222e35; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.contact-item:hover, .contact-item.active { background: #202c33; }
.community-section { background: #182229; padding: 8px 12px; font-weight: bold; color: #34b7f1; font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.status-dot { width: 9px; height: 9px; background: #8696a0; border-radius: 50%; }
.status-dot.online { background: #00a884; }

.main-chat { width: 68%; display: flex; flex-direction: column; background: #0b141a; height: 100%; position: relative; }
.empty-placeholder { position: absolute; top:0; left:0; width:100%; height:100%; display: flex; align-items: center; justify-content: center; background: #0b141a; color: #8696a0; font-size: 18px; font-weight: bold; z-index: 10; }

.chat-header { padding: 15px 20px; background: #202c33; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #222e35; }
.messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.msg { max-width: 65%; padding: 9px 14px; border-radius: 8px; font-size: 15px; word-wrap: break-word; }
.msg.me { background: #005c4b; align-self: flex-end; }
.msg.peer { background: #202c33; align-self: flex-start; }

/* FIX LIŠTY PÍSANIA - SPONKA A POLÍČKO V JEDNEJ LINKE */
.input-area { padding: 15px; background: #202c33; display: flex; gap: 12px; align-items: center; width: 100%; }
.input-area input { flex: 1; padding: 12px 18px; background: #2a3942; border: none; border-radius: 8px; color: #fff; font-size: 15px; outline: none; }

/* FIX GIGANTICKEJ SPONKY (attach.png) - ROZMER 24px */
.attach-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent !important; }
.attach-btn img { width: 24px !important; height: 24px !important; object-fit: contain !important; background: transparent !important; cursor: pointer; filter: grayscale(1) opacity(0.7); }
.attach-btn img:hover { filter: none; opacity: 1; transform: scale(1.1); }

/* FIX GIGANTICKÉHO ODOSIELANIA (send.png) - BLEDOHNEDÉ NEPRIEHLADNÉ POZADIE */
.btn-send { 
    background: #5c4033 !important; 
    padding: 10px 18px !important; 
    border: none !important; 
    border-radius: 8px !important; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
}
.btn-send img { width: 20px !important; height: 20px !important; object-fit: contain !important; background: transparent !important; }
.btn-send:hover { background: #7a5848 !important; transform: scale(1.05); }

/* FIX TLAČIDIEL OVLÁDANIA HOVORU - BLEDOHNEDÉ NEPRIEHLADNÉ POZADIE */
.call-controls button, .flat-icon-btn, .call-btn-img {
    background: #5c4033 !important; 
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    color: #e9edef !important;
    font-weight: bold;
    font-size: 14px;
    gap: 8px;
    border-radius: 6px;
    cursor: pointer;
}
.call-controls button:hover, .flat-icon-btn:hover, .call-btn-img:hover { background: #7a5848 !important; }

/* Špecifické červené tlačidlo Zložiť pre hovor */
.call-controls button.btn-hangup { background: #ea0038 !important; color: white !important; }
.call-controls button.btn-hangup:hover { background: #ff1a4d !important; }

/* FIX: ROZHRANIE PRE SYMETRICKÝ LIVE HOVOR S VIDEOM */
.call-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11,20,26,0.98); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.call-box { background: #1f2c34; padding: 30px; border-radius: 15px; text-align: center; width: 90%; max-width: 650px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.call-video-container { display: flex; gap: 15px; justify-content: center; margin: 20px 0; width: 100%; }
.video-wrapper { width: 48%; background: #0b141a; padding: 8px; border-radius: 8px; }
.video-wrapper video { width: 100%; height: 220px; object-fit: cover; background: #000; border-radius: 6px; }

/* Globálne ošetrenie veľkosti pre top ikony 100x100px */
.ui-icon, .call-controls img, .chat-header img { width: 22px !important; height: 22px !important; object-fit: contain !important; background: transparent !important; }

/* Stavové fajky doručenia (sended.png a sukcess.png) */
.msg-status-tick-img { width: 16px !important; height: 16px !important; object-fit: contain !important; background: transparent !important; vertical-align: middle; margin-left: 6px; }

/* MODALY */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: #111b21; padding: 25px; border-radius: 10px; width: 90%; max-width: 420px; }
.modal-input { width: 100%; padding: 10px; background: #2a3942; border: none; color: white; border-radius: 5px; margin-bottom: 12px; margin-top: 4px; }
.btn-block { padding: 10px 15px; background: #3b4a54; color: white; border-radius: 6px; font-weight: bold; }
.btn-report { background: #ea0038; border: none; color: white; border-radius: 5px; cursor: pointer; }

/* INTRO LINEÁRNA ANIMÁCIA LOGA */
.intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #0b141a; z-index: 99999; display: flex; align-items: center; overflow: hidden; }
#flyingLogo { width: 120px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: -150px; animation: flyAcross 2.2s linear forwards; }

@keyframes flyAcross {
    0% { left: -150px; transform: translateY(-50%) scale(0.3); opacity: 0.7; }
    50% { left: 50%; transform: translate(-50%, -50%) scale(2.2); opacity: 1; }
    100% { left: 110%; transform: translateY(-50%) scale(0.3); opacity: 0; }
}

/* SVETLÁ TÉMA */
body.bright-theme { background: #e5ddd5; color: #111b21; }
body.bright-theme .app-screen, body.bright-theme .sidebar, body.bright-theme .modal-content, body.bright-theme .auth-theme { background: #ffffff; color: #111b21; }
body.bright-theme .sidebar-header, body.bright-theme .chat-header, body.bright-theme .input-area { background: #f0f2f5; color: #111b21; }
body.bright-theme .main-chat, body.bright-theme .empty-placeholder { background: #efeae2; }
body.bright-theme .msg.peer { background: #ffffff; color: #111b21; }

/* ===== MOBIL / TABLET LAYOUT ===== */
.tab-page { display: none; flex-direction: column; flex: 1; min-height: 0; }
.tab-page.active { display: flex; }

/* Dolné menu - viditeľné len na mobile/tablete */
.mobile-tabs { display: none; border-top: 1px solid #222e35; background: #202c33; }
.mobile-tabs button { flex: 1; background: transparent; color: #8696a0; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; }
.mobile-tabs button.active { color: #00a884; }
.tab-icon { width: 18px; height: 18px; object-fit: contain; filter: grayscale(1) opacity(0.8); }
.mobile-tabs button.active .tab-icon { filter: none; }

/* Šípka späť - viditeľná len na mobile/tablete */
.back-btn { display: none; background: transparent; color: #8696a0; font-size: 24px; padding: 0 8px; line-height: 1; border-radius: 8px; }

@media (max-width: 820px) {
    body { align-items: stretch; }
    .app-screen { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }

    /* Ikony menšie */
    .ui-icon, .attach-btn img, .input-area .btn-send img, .title-icon { width: 18px !important; height: 18px !important; }
    .call-controls img, .call-accept-controls img { width: 16px !important; height: 16px !important; }
    .mini-icon { width: 14px; height: 14px; }
    .avatar-circle { width: 36px; height: 36px; font-size: 15px; }
    .call-title-icon { width: 18px; height: 18px; }

    .layout { display: block; position: relative; height: 100%; }

    /* Sidebar = celá obrazovka; chat = celá obrazovka */
    .sidebar { width: 100%; border-right: none; padding-bottom: 0; }
    .sidebar .mobile-tabs { position: absolute; bottom: 0; left: 0; right: 0; display: flex; }
    /* FIX: karty (Chaty/Kontakty/Hovory) NEPREKRYVAJÚ vrchnú lištu - tok flexu, nie absolútne pozicionovanie */
    .sidebar > .tab-page.active { position: relative; flex: 1; min-height: 0; padding-bottom: 58px; }
    .tab-page .contact-list { flex: 1; }

    .main-chat { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; transform: translateX(100%); transition: transform .22s ease; background: #0b141a; display: flex; flex-direction: column; }
    body.mobile-chat-open .main-chat { transform: translateX(0); }
    .back-btn { display: inline-block; }
    .messages { padding: 12px; }
    .msg { max-width: 100%; font-size: 14px; }
    .msg-row { max-width: 92%; }
    .msg-avatar { width: 24px; height: 24px; min-width: 24px; font-size: 11px; }
    .input-area { padding: 10px; }
    .input-area input { padding: 10px 14px; }
}

/* Malé tlačidlá volania v kontaktoch a denníku hovorov */
.call-mini-btn { background: transparent; padding: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.call-mini-btn:hover { background: rgba(255,255,255,.08); }
.call-mini-btn .mini-icon { filter: invert(0.6); }
.call-mini-btn:hover .mini-icon { filter: invert(1); }

/* ===== VYHĽADÁVANIE V SPRÁVACH (návrhy pod poľom hľadania) ===== */
#searchSuggestions { display: none; max-height: 240px; overflow-y: auto; background: #111b21; border-bottom: 1px solid #222e35; }
.suggestion-item { padding: 10px 15px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #182229; }
.suggestion-item:hover { background: #202c33; }
.suggestion-item .suggestion-preview { display: block; font-size: 12px; color: #8696a0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== KONTEXTOVÉ MENU SPRÁVY (dlhé podržanie / pravý klik) ===== */
.msg-context-menu { position: fixed; z-index: 5000; background: #233138; border: 1px solid #2a3942; border-radius: 10px; padding: 6px 0; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: none; }
.msg-context-menu button { display: block; width: 100%; text-align: left; background: transparent; color: #e9edef; padding: 10px 16px; font-size: 14px; border-radius: 0; }
.msg-context-menu button:hover { background: #2a3942; transform: none; filter: none; }
.msg-context-menu button.danger { color: #f15c6d; }

/* ===== DOKONČENÉ / UPRAVENÉ SPRÁVY ===== */
.msg.deleted { opacity: .55; font-style: italic; color: #8696a0; }
.msg .edited-tag { display: block; font-size: 11px; color: #8696a0; margin-top: 2px; }

/* ===== TLAČIDLO NASTAVENÍ V HLAVIČKE ČATU + PREKLADAČ ===== */
#translatorToggleBtn.active { background: #00a884 !important; }
#translatorToggleBtn.active img { filter: none !important; }

/* ===== MOBIL: TLAČIDLO VŠEOBECNÝCH NASTAVENÍ V HLAVIČKE ČATU ===== */
/* Na mobile je bočná hlavička skrytá za četom, takže Nastavenia musia byť aj v hlavičke čatu */
#chatSettingsBtn { display: none; }
@media (max-width: 820px) {
    body.mobile-chat-open #chatSettingsBtn { display: inline-flex; }
}

/* ===== REAKCIE NA SPRÁVY (emoji) ===== */
.msg-reactions { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.msg-reaction { background: #2a3942; border: 1px solid #2a3942; border-radius: 12px; padding: 1px 7px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.msg-reaction.mine { background: #134f40; border-color: #00a884; }
.msg-reaction-count { color: #8696a0; font-size: 11px; }

/* ===== EMOJI REAKČNÁ LIŠTA (zobrazí sa pri podržaní správy) ===== */
.reaction-bar { position: fixed; z-index: 5001; background: #233138; border: 1px solid #2a3942; border-radius: 24px; padding: 6px 10px; display: none; gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.reaction-bar button { background: transparent; border: none; font-size: 22px; padding: 2px; cursor: pointer; line-height: 1; }
.reaction-bar button:hover { transform: scale(1.25); }

/* ===== EMOJI KLÁVESNICA (písanie správ) ===== */
/* FIX čierny obdĺžnik pri písaní (Redmi A9): picker je SKRYTÝ cez visibility,
   pozicovaný relativne k input area (nie fixed viewport), žiadne -top hodnoty */
.emoji-picker { position: absolute; z-index: 3001; background: #233138; border: 1px solid #2a3942; border-radius: 10px; width: 300px; max-width: 92vw; height: 220px; overflow-y: auto; padding: 8px; display: none; grid-template-columns: repeat(8, 1fr); gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.5); visibility: hidden; bottom: 64px; right: 8px; left: auto; top: auto; }
.emoji-picker.open { display: grid; visibility: visible; }
.emoji-picker button { background: transparent; border: none; font-size: 19px; padding: 3px; cursor: pointer; border-radius: 6px; }
.emoji-picker button:hover { background: #2a3942; transform: none; }
@media (max-width: 820px) { .emoji-picker { width: 92%; right: 4%; } }

/* FIX: input-area musí byť poziciovaný (kotva pre emoji picker) a bez pretekania */
.input-area { position: relative; overflow: visible; }

/* ===== FOTOOVACIE TLAČIDLO V INPUT AREA ===== */
.camera-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: none !important; padding: 6px; cursor: pointer; }
.camera-btn img { width: 22px !important; height: 22px !important; object-fit: contain !important; background: transparent !important; cursor: pointer; filter: grayscale(1) opacity(0.7); }
.camera-btn img:hover { filter: none; opacity: 1; transform: scale(1.1); }

/* ===== PREPOSIELANIE: VOĽBA CIEĽA ===== */
.forward-target-list { max-height: 260px; overflow-y: auto; }
.forward-target-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #182229; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.forward-target-item:hover { background: #202c33; }

/* ===== FAB + tlačidlo v bočnej hlavičke (nový kontakt/skupina/komunita) ===== */
/* Dobrý kontrast: jasne zelené pozadie, biely plus, výrazný tieň */
.fab-plus { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: #00a884 !important; color: #fff !important; border: none !important; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.45); font-weight: bold; }
.fab-plus:hover { background: #00c298 !important; transform: none; }
.fab-plus:active { transform: scale(.94); }
.sidebar-header .flat-icon-btn { background: transparent !important; }
.sidebar-header .flat-icon-btn img { filter: brightness(1.6); }

/* ===== PROFILOVKY PRI SPRÁVACH ===== */
.msg-row { display: flex; align-items: flex-end; gap: 6px; max-width: 85%; }
.msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.peer { align-self: flex-start; }
.msg-row .msg { max-width: 100%; }
.msg-avatar { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background-color: #00a884; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; text-transform: uppercase; background-size: cover; background-position: center; overflow: hidden; }
.msg-row.me .msg-avatar { visibility: hidden; }

/* ===== LAST SEEN V HLAVIČKE ČATU ===== */
#peerLastSeen { display: block; font-size: 11px; color: #8696a0; }
#peerLastSeen.online { color: #00a884; }

/* ===== NASTAVENIA SKUPINY (menu ako v WhatsApp) ===== */
.group-settings-list { display: flex; flex-direction: column; }
.group-settings-list button { display: block; width: 100%; text-align: left; background: transparent; color: #e9edef; padding: 12px 14px; font-size: 14px; border-radius: 0; border-bottom: 1px solid #182229; }
.group-settings-list button:hover { background: #2a3942; transform: none; filter: none; }
.group-settings-list button.danger { color: #f15c6d; }
.gs-sub { display: block; font-size: 11px; color: #8696a0; margin-top: 2px; }
.gs-toggle { font-weight: bold; }