/*index.html*/
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

:root, [data-theme="dark"] {
    --canvas: #000000;
    --surface: #0A0A0A;
    --elevated: #161616;
    --elevated2: #1F1F1F;
    --hairline: #242424;
    --ink: #FFFFFF;
    --muted: #A3A3A3;
    --faint: #666666;
    --online: #31D07C;
    --scrollbar-thumb: #242424;
    --avatar-text: #FFFFFF;
    --transparent-border: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] {
    --canvas: #FFFFFF;
    --surface: #F4F4F5;
    --elevated: #E4E4E7;
    --elevated2: #D4D4D8;
    --hairline: #E4E4E7;
    --ink: #09090B;
    --muted: #52525B;
    --faint: #71717A;
    --online: #16A34A;
    --scrollbar-thumb: #D4D4D8;
    --avatar-text: #FFFFFF;
    --transparent-border: rgba(0, 0, 0, 0.12);
}

body { background-color: var(--canvas); color: var(--ink); transition: background-color .15s ease, color .15s ease; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; }
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

textarea { field-sizing: content; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.typing-dot { animation: typing-dot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.fade-in { animation: fade-in .18s ease-out; }
@keyframes fade-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Screenshot Protection Overlay Style */
.screenshot-protected {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ÉP CÔNG TẮC BLOCK SCREENSHOTS SANG MÀU XANH LÁ CHUẨN KHI BẬT */
#blockScreenshotsToggle:checked + div {
    background-color: #10b981 !important;
}

/* Custom toast – no browser alert */
#zchatToast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    z-index: 9999;
    max-width: min(92vw, 380px);
    padding: 14px 20px;
    border-radius: 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    background: var(--elevated2);
    color: var(--ink);
    border: 1px solid var(--transparent-border);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#zchatToast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
#zchatToast .toast-icon { flex-shrink: 0; color: #f59e0b; }

/* Modern disappearing dropdown */
#disappearingMenuPopup {
    min-width: 188px;
}
.disappearing-option { letter-spacing: 0.01em; }
.disappearing-option:hover { background-color: var(--surface) !important; }
.disappearing-option.is-selected {
    background-color: rgba(16, 185, 129, 0.12);
    color: #10b981 !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/*profile.html*/
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

:root, [data-theme="dark"] {
    --canvas: #000000;
    --surface: #0A0A0A;
    --elevated: #161616;
    --elevated2: #1F1F1F;
    --hairline: #242424;
    --ink: #FFFFFF;
    --muted: #8C8C8C;
    --faint: #5C5C5C;
    --online: #31D07C;
    --away: #F5A623;
    --dnd: #EF4444;
    --bubble-sent-text: #0A0A0A;
    --scrollbar-thumb: #242424;
}
[data-theme="light"] {
    --canvas: #FFFFFF;
    --surface: #F7F7F8;
    --elevated: #EFEFF1;
    --elevated2: #E4E4E7;
    --hairline: #E2E2E5;
    --ink: #0B0B0C;
    --muted: #65656A;
    --faint: #9A9AA0;
    --online: #1FA968;
    --away: #B5750F;
    --dnd: #D8352C;
    --bubble-sent-text: #FFFFFF;
    --scrollbar-thumb: #D8D8DC;
}

body { background-color: var(--canvas); color: var(--ink); transition: background-color .15s ease, color .15s ease; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.fade-in { animation: fade-in .18s ease-out; }
@keyframes fade-in { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Segmented control */
.seg-btn[aria-pressed="true"] { background-color: var(--ink); color: var(--bubble-sent-text); }
.seg-btn[aria-pressed="false"] { background-color: transparent; color: var(--muted); }

/* Theme switch */
.switch-track { background-color: var(--elevated2); }
.switch-track[data-on="true"] { background-color: var(--ink); }
.switch-thumb { background-color: var(--ink); transition: transform .18s ease; }
.switch-track[data-on="true"] .switch-thumb { background-color: var(--bubble-sent-text); }

/*settings.html*/
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

:root, [data-theme="dark"] {
    --canvas: #000000;
    --surface: #0A0A0A;
    --elevated: #161616;
    --elevated2: #1F1F1F;
    --hairline: #242424;
    --ink: #FFFFFF;
    --muted: #A3A3A3;
    --faint: #666666;
    --online: #31D07C;
    --scrollbar-thumb: #242424;
    --avatar-text: #FFFFFF;
}
[data-theme="light"] {
    --canvas: #FFFFFF;
    --surface: #F4F4F5;
    --elevated: #E4E4E7;
    --elevated2: #D4D4D8;
    --hairline: #E4E4E7;
    --ink: #09090B;
    --muted: #52525B;
    --faint: #71717A;
    --online: #16A34A;
    --scrollbar-thumb: #D4D4D8;
    --avatar-text: #FFFFFF;
}

body { background-color: var(--canvas); color: var(--ink); transition: background-color .15s ease, color .15s ease; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; }
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* Tùy chỉnh mũi tên đẹp hơn cho select */
select.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px !important;
}