* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html, body { height:100%; height:100dvh; overflow:hidden; background:#0a0a0a; color:#e0e0e0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif; font-size:15px }
body { min-height:var(--app-height,100dvh); }


#app { height:var(--app-height,100dvh); display:flex; flex-direction:column; overflow:hidden }


/* ===== LOGIN / REGISTER ===== */
.auth-screen { min-height:var(--app-height,100dvh); display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(135deg,#0a0a0a 0%,#111 100%) }

.auth-box { background:#141414; border:1px solid #222; border-radius:20px; padding:36px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.6) }
.auth-box h1 { color:#00a884; font-size:26px; margin-bottom:6px; text-align:center }
.auth-box .subtitle { color:#777; font-size:13px; text-align:center; margin-bottom:28px }
.auth-box label { display:block; color:#aaa; font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin:18px 0 6px }
.auth-box input[type="text"], .auth-box input[type="password"], .auth-box input[type="number"] { width:100%; background:#1a1a1a; border:1px solid #2a2a2a; color:#fff; padding:13px 14px; border-radius:10px; font-size:15px; transition:border .2s }
.auth-box input:focus { outline:none; border-color:#00a884; background:#1c1c1c }
.auth-box button { width:100%; background:#00a884; border:none; color:#fff; padding:14px; border-radius:10px; font-size:16px; font-weight:600; cursor:pointer; margin-top:24px; transition:transform .1s, background .2s }
.auth-box button:hover { background:#00b894 }
.auth-box button:active { transform:scale(.98) }
.auth-box .link { text-align:center; margin-top:18px; color:#777; font-size:14px; cursor:pointer }
.auth-box .link span { color:#00a884; font-weight:500 }
.auth-box .error { background:rgba(255,50,50,.08); border:1px solid rgba(255,50,50,.2); color:#ff5555; padding:12px; border-radius:8px; margin-top:14px; font-size:13px }
.auth-box .info { background:rgba(0,168,132,.08); border:1px solid rgba(0,168,132,.2); color:#00a884; padding:12px; border-radius:8px; margin-top:14px; font-size:13px; word-break:break-all }

/* ===== APP LAYOUT ===== */
.app-layout { display:flex; height:var(--app-height,100dvh); max-width:1400px; margin:0 auto; width:100%; overflow:hidden }

.sidebar { width:360px; min-width:300px; background:#111; border-right:1px solid #1a1a1a; display:flex; flex-direction:column; transition:transform .3s }
.sidebar-header { padding:10px 14px; background:#1a1a1a; border-bottom:1px solid #222; display:flex; align-items:center; justify-content:space-between }
.sidebar-header h2 { font-size:16px; color:#fff; font-weight:600 }
.sidebar-header .btn-icon { width:36px; height:36px; border-radius:50%; border:none; background:#2a2a2a; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .2s }
.sidebar-header .btn-icon:hover { background:#333 }
.profile-mini { padding:4px; border-radius:8px; transition:background .2s }
.profile-mini:hover { background:#222 }
.search-box { padding:10px 14px; border-bottom:1px solid #1a1a1a }
.search-box input { width:100%; background:#1a1a1a; border:1px solid #222; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px }
.search-box input:focus { outline:none; border-color:#00a884 }
.user-list { flex:1; overflow-y:auto }
.user-item { padding:12px 18px; display:flex; align-items:center; gap:12px; cursor:pointer; border-bottom:1px solid #161616; transition:background .15s }
.user-item:hover, .user-item.active { background:#1a1a1a }
.user-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#00a884,#005c4b); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff; flex-shrink:0 }
.user-info { flex:1; min-width:0 }
.user-name { color:#fff; font-weight:500; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-meta { color:#666; font-size:12px; margin-top:2px }

.chat-area { flex:1; display:flex; flex-direction:column; background:#0d0d0d; min-width:0; min-height:0; position:relative; overflow:hidden }

.chat-header { padding:10px 14px; background:#1a1a1a; border-bottom:1px solid #222; display:flex; align-items:center; gap:12px; flex-shrink:0 }

.chat-header .back-btn { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer }
.chat-header .chat-title { flex:1 }
.chat-header .chat-title .name { color:#fff; font-weight:600; font-size:16px }
.chat-header .chat-title .status { color:#00a884; font-size:12px }
.chat-header .secure-badge { background:rgba(0,168,132,.1); color:#00a884; padding:5px 10px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:.3px }

.messages-container { flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:4px; background-image:radial-gradient(#1a1a1a 1px,transparent 1px); background-size:20px 20px; overscroll-behavior:contain; position:relative }

.msg { max-width:75%; padding:9px 13px; border-radius:14px; font-size:14.5px; line-height:1.45; word-wrap:break-word; position:relative; animation:msgIn .25s ease; display:flex; flex-direction:column; gap:4px }
.msg.sent { align-self:flex-end; background:#005c4b; border-bottom-right-radius:4px; color:#e8f5e9 }
.msg.received { align-self:flex-start; background:#1f2c33; border-bottom-left-radius:4px; color:#e0e0e0 }
.msg .msg-text { white-space:pre-wrap }
.msg .msg-img { max-width:260px; border-radius:10px; cursor:pointer; display:block }
.msg .msg-audio { max-width:260px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.2); padding:8px 12px; border-radius:10px }
.msg .msg-audio audio { max-width:180px; height:32px }
.msg .msg-footer { display:flex; align-items:center; gap:6px; align-self:flex-end; margin-top:2px }
.msg .msg-time { font-size:11px; opacity:.6 }
.msg .msg-timer { font-size:11px; color:#ff9800; font-weight:600 }

.input-area { padding:10px 14px; background:#1a1a1a; border-top:1px solid #222; display:flex; align-items:flex-end; gap:10px; flex-shrink:0; z-index:20 }

.input-area .attach-btn, .input-area .mic-btn { background:none; border:none; color:#8696a0; font-size:24px; cursor:pointer; padding:6px; line-height:1 }
.input-area .attach-btn:hover, .input-area .mic-btn:hover { color:#fff }
.input-area .mic-btn.recording { color:#ff4444; animation:pulse 1s infinite }
.input-area textarea { flex:1; background:#2a2a2a; border:none; color:#fff; padding:12px 14px; border-radius:14px; font-size:15px; resize:none; max-height:120px; min-height:44px; font-family:inherit; line-height:1.3 }

.input-area textarea:focus { outline:none; background:#333 }
.input-area .send-btn { background:#00a884; border:none; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; transition:background .2s }
.input-area .send-btn:hover { background:#00b894 }
.input-area .send-btn:disabled { background:#333; cursor:not-allowed }

.timer-select { background:#2a2a2a; border:none; color:#fff; padding:8px 10px; border-radius:8px; font-size:13px; margin-left:4px }

/* ===== UTILITÁRIOS ===== */
.empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#555; gap:12px }
.empty-state svg { width:64px; height:64px; opacity:.3 }
.empty-state p { font-size:14px }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:#222; color:#fff; padding:12px 22px; border-radius:10px; font-size:14px; z-index:2000; transition:transform .3s; border:1px solid #333 }
.toast.show { transform:translateX(-50%) translateY(0) }

.hidden { display:none !important }

/* ===== ADMIN PANEL ===== */
.stat-card { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:16px; text-align:center }
.stat-card .stat-num { color:#00a884; font-size:28px; font-weight:700 }
.stat-card .stat-label { color:#888; font-size:12px; margin-top:4px; text-transform:uppercase; letter-spacing:.5px }

.admin-table { width:100%; border-collapse:collapse; font-size:13px }
.admin-table th { text-align:left; padding:10px 12px; background:#1a1a1a; color:#aaa; font-weight:600; border-bottom:1px solid #333 }
.admin-table td { padding:10px 12px; border-bottom:1px solid #222; color:#e0e0e0 }
.admin-table tr:hover td { background:#161616 }

/* ===== MOBILE ===== */
@media (max-width:768px) {
    html, body, #app { height:var(--app-height,100dvh); width:100%; overflow:hidden }
    .app-layout { position:relative; height:var(--app-height,100dvh); max-width:none; overflow:hidden }
    .sidebar { position:absolute; inset:0; width:100%; min-width:0; z-index:10; border-right:none }
    .sidebar.hidden-mobile { transform:translateX(-100%) }
    .chat-area { height:var(--app-height,100dvh); width:100%; min-height:0; overflow:hidden }
    .chat-header { min-height:70px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px 12px }
    .chat-header .back-btn { display:block; min-width:34px; min-height:34px }
    .messages-container { flex:1 1 auto; min-height:0; padding:14px 12px 10px 12px; scroll-padding-bottom:96px }
    .input-area { position:sticky; bottom:0; padding:8px 10px calc(8px + env(safe-area-inset-bottom)) 10px; gap:6px; align-items:center; box-shadow:0 -8px 18px rgba(0,0,0,.25) }
    .input-area textarea { font-size:16px; min-height:42px; max-height:104px; padding:11px 12px }
    .input-area .attach-btn, .input-area .mic-btn { font-size:21px; padding:4px; min-width:34px }
    .input-area .send-btn { width:42px; height:42px; min-width:42px }
    .timer-select { max-width:82px; padding:8px 6px; font-size:12px }
    .msg { max-width:88%; font-size:14px }
    .msg .msg-img, .msg .msg-audio { max-width:200px }
    .auth-box { padding:24px }
    .toast { bottom:calc(16px + env(safe-area-inset-bottom)) }
}

@keyframes msgIn {
    from { opacity:0; transform:translateY(12px) scale(.96) }
    to { opacity:1; transform:translateY(0) scale(1) }
}

@keyframes pulse {
    0% { opacity:1 }
    50% { opacity:.5 }
    100% { opacity:1 }
}

.mini-accept, .mini-reject { width:28px; height:28px; border:none; border-radius:8px; color:#fff; cursor:pointer; font-weight:700; font-size:14px }
.mini-accept { background:#00a884 }
.mini-reject { background:#c0392b }
.mini-accept:hover { background:#00b894 }
.mini-reject:hover { background:#e74c3c }

.admin-form { background:#111; border:1px solid #252525; border-radius:14px; padding:16px; margin-bottom:16px }
.admin-form .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px }
.admin-form input, .admin-form select { background:#0a0a0a; border:1px solid #333; color:#fff; border-radius:8px; padding:11px 12px; font-size:14px }
.admin-form button { margin-top:12px; background:#00a884; border:none; color:#fff; border-radius:8px; padding:11px 16px; cursor:pointer; font-weight:700 }
.info { background:#10221d; border:1px solid #1d5748; color:#b7ffe9; padding:12px; border-radius:8px; font-size:14px; line-height:1.55 }
.success { background:#113311; border:1px solid #225522; color:#7cff7c; padding:12px; border-radius:8px; font-size:14px }
.error { background:#331111; border:1px solid #551111; color:#ff8b8b; padding:12px; border-radius:8px; font-size:14px }

/* ===== ADMIN PREMIUM / FIX ===== */
.btn-admin-mini { height:36px; min-width:58px; padding:0 12px; border-radius:999px; border:1px solid rgba(0,168,132,.45); background:rgba(0,168,132,.12); color:#7ee6c5; font-weight:800; font-size:12px; letter-spacing:.3px; cursor:pointer }
.btn-admin-mini:hover { background:rgba(0,168,132,.22); color:#fff }
.admin-page { flex:1; overflow-y:auto; padding:22px; background:#0b0b0b }
.admin-tabs { position:sticky; top:0; z-index:5; display:flex; gap:8px; flex-wrap:wrap; padding:0 0 18px; background:linear-gradient(#0b0b0b 72%,rgba(11,11,11,0)) }
.admin-tab { border:1px solid #2a2a2a; background:#151515; color:#aaa; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:700; font-size:13px }
.admin-tab:hover { color:#fff; border-color:#3a3a3a }
.admin-tab.active { background:#00a884; color:#fff; border-color:#00a884 }
.admin-content { max-width:1120px; margin:0 auto }
.admin-section h2 { color:#fff; font-size:21px; margin:0 0 8px }
.admin-help { color:#8b949e; font-size:14px; line-height:1.55; margin-bottom:18px }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 18px }
.admin-callout { background:#111; border:1px solid #242424; border-left:4px solid #00a884; color:#cfd7df; padding:14px; border-radius:12px; margin:12px 0; line-height:1.55 }
.admin-callout.warn { border-left-color:#ff9800 }
.admin-form label { display:flex; flex-direction:column; gap:6px; color:#aeb6bf; font-size:12px; text-transform:uppercase; letter-spacing:.4px; font-weight:700 }
.admin-form .checkline { flex-direction:row; align-items:center; text-transform:none; letter-spacing:0; font-size:14px; margin-top:12px; font-weight:500 }
.admin-form input, .admin-form select { width:100%; background:#090909; border:1px solid #2f2f2f; color:#fff; border-radius:10px; padding:12px 12px; font-size:14px }
.admin-form input:focus, .admin-form select:focus { outline:none; border-color:#00a884 }
.admin-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.admin-form button, .admin-actions button, .result-box button { background:#00a884; border:none; color:#fff; border-radius:10px; padding:12px 16px; cursor:pointer; font-weight:800 }
.admin-form button.secondary, .admin-actions button.secondary, .result-box button.secondary { background:#2a2a2a; color:#fff }
.result-box { margin-top:12px }
.result-box input { width:100%; margin:10px 0; background:#050505; border:1px solid #333; color:#fff; border-radius:8px; padding:10px }
.table-wrap { overflow:auto; border:1px solid #222; border-radius:14px; background:#111 }
.admin-table { min-width:900px }
.admin-table th { position:sticky; top:0 }
.actions-cell { display:flex; gap:6px; flex-wrap:wrap }
.mini-action { background:#2d333b; border:none; color:#fff; border-radius:8px; padding:7px 10px; cursor:pointer; font-size:12px; font-weight:700 }
.mini-action.success { background:#00785f }
.mini-action.danger { background:#c0392b }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; letter-spacing:.3px }
.badge.ok { color:#7ee6c5; background:rgba(0,168,132,.12) }
.badge.warn { color:#ffc46b; background:rgba(255,152,0,.12) }
.badge.muted { color:#bbb; background:#242424 }
@media (max-width:768px) { .admin-page { padding:14px } .admin-tab { flex:1; min-width:130px } .admin-content { max-width:none } }

/* ===== VAULT UPDATE: WhatsApp-like chat badges/actions ===== */
.chat-filters { display:flex; gap:8px; margin-top:10px }
.chat-filter { flex:1; background:#171717; border:1px solid #292929; color:#9aa4ad; border-radius:999px; padding:7px 10px; cursor:pointer; font-weight:700; font-size:12px }
.chat-filter.active { background:#00a884; border-color:#00a884; color:#fff }
.filter-count { display:none; min-width:18px; height:18px; margin-left:6px; padding:0 6px; align-items:center; justify-content:center; border-radius:999px; background:#ff9800; color:#111; font-size:11px; font-weight:900 }
.user-item.unread .user-name { font-weight:800; color:#fff }
.unread-badge { min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:#00a884; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; margin-left:auto; box-shadow:0 0 0 3px rgba(0,168,132,.12) }
.chat-action { width:34px; height:34px; border:none; border-radius:50%; background:#242424; color:#aeb6bf; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center }
.chat-action:hover { background:#332020; color:#ff8b8b }
.new-msg-btn { position:absolute; right:24px; bottom:78px; z-index:8; border:none; border-radius:999px; background:#00a884; color:#fff; padding:10px 14px; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35) }
.msg-delete { opacity:.35; border:none; background:transparent; color:inherit; cursor:pointer; font-size:12px; line-height:1; padding:0 0 0 4px }
.msg:hover .msg-delete { opacity:.9 }
.msg-delete:hover { color:#ff8b8b }
.chat-area { position:relative }
@media (max-width:768px) { .timer-select { width:92px; font-size:12px } .new-msg-btn { right:14px; bottom:76px } .chat-action { width:32px; height:32px } }
.msg .msg-timer.muted { color:#8b949e; font-weight:500 }