/* variable.css — token & style khusus nav /chat (gold premium)
   Tidak redeclare :root dari main.css, cuma extend dengan token baru
   yang mereferensi --premium-gold biar satu sumber warna, no bentrok. */

:root {
    --chat-gold: var(--premium-gold, #d9c089);
    --chat-gold-bright: #f2d98a;
    --chat-gold-dim: #8a7645;
    --chat-gold-glow: rgba(217, 192, 137, 0.55);
    --chat-nav-bg: rgba(18, 16, 10, 0.92);
    --chat-nav-border: rgba(217, 192, 137, 0.35);
    --chat-nav-height: 56px;
}

/* Safety net: elemen apa pun dengan display:flex/block/grid eksplisit di
   file ini tetap kehilangan attribute [hidden] kalau ditoggle lewat JS —
   aturan ini pastiin [hidden] SELALU menang, gak perlu patch satu-satu lagi. */
[hidden] { display: none !important; }

.chat-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--chat-nav-height);
    background: var(--chat-nav-bg);
    border-bottom: 1px solid var(--chat-nav-border);
    font-family: var(--font-main, 'Share Tech Mono', monospace);
}

.chat-nav-title {
    color: var(--chat-gold-bright);
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 1.1rem;
    text-shadow: 0 0 8px var(--chat-gold-glow);
}

.chat-beta-badge {
    display: inline-block;
    min-width: 3.2em;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--chat-gold);
    border: 1px solid var(--chat-gold-dim);
    border-radius: 3px;
    background: rgba(217, 192, 137, 0.08);
    text-shadow: 0 0 6px var(--chat-gold-glow);
}

.chat-beta-badge.is-scrambling {
    color: var(--chat-gold-bright);
    border-color: var(--chat-gold);
}

/* ── layout root /chat ─────────────────────────────────────── */
#chat-view {
    min-height: 100vh;
    background: #060502;
    color: var(--chat-gold);
    font-family: var(--font-main, 'Share Tech Mono', monospace);
}

.chat-nav {
    justify-content: flex-start;
    padding: 0 14px;
}

.chat-nav-title { margin-right: 2px; }

.chat-account-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--chat-nav-border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

.chat-account-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--chat-gold);
}

.chat-account-icon.is-locked {
    animation: chat-lock-pulse 1.8s ease-in-out infinite;
}

.chat-account-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

@keyframes chat-lock-pulse {
    0%, 100% { text-shadow: 0 0 4px var(--chat-gold-glow); transform: scale(1); }
    50%      { text-shadow: 0 0 12px var(--chat-gold-glow); transform: scale(1.12); }
}

/* ── daftar room ────────────────────────────────────────────── */
.chat-room-list {
    padding: 16px 14px 40px;
    max-width: 520px;
    margin: 0 auto;
}

.chat-room-hint {
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--chat-gold-dim);
    margin: 18px 0 8px;
}

.chat-room-hint-class { margin-top: 26px; }

.chat-room-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--chat-nav-border);
    border-radius: 6px;
    background: rgba(217, 192, 137, 0.05);
    text-decoration: none;
    color: var(--chat-gold);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.chat-room-item:hover,
.chat-room-item:focus-visible {
    border-color: var(--chat-gold);
    background: rgba(217, 192, 137, 0.1);
    transform: translateX(2px);
}

.chat-room-name {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.chat-room-sub {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--chat-gold-dim);
}

.chat-room-status {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--chat-gold-dim);
    white-space: nowrap;
}

.chat-room-status[data-state="pending"]  { color: var(--chat-gold-bright); }
.chat-room-status[data-state="approved"] { color: #9ee6a0; }
.chat-room-status[data-state="rejected"] { color: #e68a8a; }

/* ── badge "N online" per room (Supabase Realtime Presence) ────── */
.chat-room-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    color: #8fe6a0;
    white-space: nowrap;
}

.chat-room-online::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade6f;
    box-shadow: 0 0 6px #4ade6f;
    flex-shrink: 0;
}

.chat-thread-online {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    color: #8fe6a0;
    white-space: nowrap;
}

.chat-thread-online::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade6f;
    box-shadow: 0 0 7px #4ade6f;
    flex-shrink: 0;
}

.chat-room-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--chat-gold);
    color: #060502;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-room-group {
    border: 1px solid rgba(217, 192, 137, 0.15);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.chat-room-group-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--chat-gold-dim);
    margin-bottom: 8px;
}

.chat-room-group .chat-room-item { margin-bottom: 6px; }
.chat-room-group .chat-room-item:last-child { margin-bottom: 0; }

/* ── placeholder isi room (sebelum UI chat per-room dibangun) ── */
.chat-room-placeholder {
    padding: 16px 14px 40px;
    max-width: 520px;
    margin: 0 auto;
}

.chat-back-btn {
    background: none;
    border: 1px solid var(--chat-nav-border);
    color: var(--chat-gold);
    padding: 6px 12px;
    border-radius: 5px;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 14px;
}

.chat-back-btn:hover { border-color: var(--chat-gold); }

#chat-room-placeholder-text {
    color: var(--chat-gold-dim);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ── thread pesan per-room ──────────────────────────────────── */
.chat-room-thread {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--chat-nav-height));
    max-width: 640px;
    margin: 0 auto;
    padding: 0 14px 14px;
}

.chat-thread-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.chat-thread-title {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.85rem;
    color: var(--chat-gold-bright);
}

.chat-thread-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 2px 12px;
}

.chat-thread-msg {
    max-width: 82%;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(217, 192, 137, 0.07);
    border: 1px solid var(--chat-nav-border);
    align-self: flex-start;
}

.chat-thread-msg.is-own {
    position: relative;
    align-self: flex-end;
    background: rgba(217, 192, 137, 0.16);
    border-color: var(--chat-gold-dim);
    padding-right: 26px;
    transition: opacity 0.2s ease;
}

.chat-thread-msg.is-own.is-deleting { opacity: 0.4; pointer-events: none; }

.chat-thread-msg-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--chat-gold-dim);
    font-size: 0.62rem;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.chat-thread-msg-del:hover,
.chat-thread-msg-del:focus-visible { opacity: 1; color: #e68a8a; }

.chat-thread-msg-name {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    color: var(--chat-gold-dim);
    margin-bottom: 3px;
}

.chat-thread-msg-content {
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-thread-msg-time {
    display: block;
    font-size: 0.58rem;
    color: var(--chat-gold-dim);
    margin-top: 3px;
    text-align: right;
}

.chat-thread-empty,
.chat-thread-loading {
    color: var(--chat-gold-dim);
    font-size: 0.75rem;
    text-align: center;
    padding: 24px 0;
}

.chat-thread-readonly-note {
    font-size: 0.68rem;
    color: var(--chat-gold-dim);
    text-align: center;
    padding: 6px 0;
}

.chat-thread-form {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--chat-nav-border);
}

.chat-thread-form input {
    flex: 1;
    background: rgba(217, 192, 137, 0.05);
    border: 1px solid var(--chat-nav-border);
    border-radius: 6px;
    padding: 9px 12px;
    color: var(--chat-gold);
    font-family: inherit;
    font-size: 0.8rem;
}

.chat-thread-form input:focus {
    outline: none;
    border-color: var(--chat-gold);
}

.chat-thread-form button {
    background: rgba(217, 192, 137, 0.15);
    border: 1px solid var(--chat-gold-dim);
    color: var(--chat-gold-bright);
    border-radius: 6px;
    padding: 0 16px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
}

.chat-thread-form button:hover { border-color: var(--chat-gold); }

.chat-thread-form.is-disabled input,
.chat-thread-form.is-disabled button {
    opacity: 0.4;
    pointer-events: none;
}

/* ── tombol nav "CHAT" di main site, arah ke /chat ─────────────── */
.nav-chat-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-chat-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--chat-gold-dim);
    text-shadow: 0 0 4px var(--chat-gold-glow);
}

.nav-btn-chat {
    color: var(--chat-gold-bright);
    border-color: var(--chat-gold-dim);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-btn-chat:hover {
    background: rgba(217, 192, 137, 0.15);
    border-color: var(--chat-gold);
    text-shadow: 0 0 8px var(--chat-gold-glow);
}

/* ── glow gold halus di background nav /chat, biar gak flat polos ── */
.chat-nav {
    background-image: radial-gradient(ellipse 240px 60px at 50% 0%, rgba(217, 192, 137, 0.10), transparent 70%);
}

/* ── greeting bar di atas daftar room ──────────────────────────── */
.chat-room-greeting {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--chat-gold-bright);
    margin: 4px 0 2px;
    white-space: pre-line;
    line-height: 1.5;
}

/* ── ikon di kiri tiap room item ────────────────────────────────── */
.chat-room-icon {
    font-size: 1rem;
    line-height: 1;
    filter: grayscale(0.15);
}

/* ── toast notifikasi ringan (error login dsb) ─────────────────── */
.chatapp-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(12px);
    max-width: 90vw;
    padding: 10px 16px;
    background: #1a1206;
    border: 1px solid var(--chat-gold-dim);
    color: var(--chat-gold-bright);
    font-size: 0.72rem;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 60;
}

.chatapp-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── tombol kembali ke beranda, kiri nav /chat ─────────────────── */
.chat-home-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--chat-nav-border);
    border-radius: 50%;
    color: var(--chat-gold);
    text-decoration: none;
    font-size: 0.9rem;
    margin-right: 4px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.chat-home-btn:hover {
    border-color: var(--chat-gold);
    background: rgba(217, 192, 137, 0.1);
}

/* ── wrap: flex:1 konsumsi sisa ruang nav — hint gak akan pernah
   nabrak title/badge di lebar layar manapun, gak perlu angka ajaib ── */
.chat-account-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ── hint ticker akun: lebar ngikutin sisa ruang beneran (flex),
   truncate otomatis via ellipsis kalau kepanjangan ─────────────── */
.chat-account-hint {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 0.6rem;
    color: var(--chat-gold-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-account-hint.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.chat-account-hint.is-identity {
    font-weight: 700;
    font-size: 0.7rem;
    background: linear-gradient(90deg, #ff5f6d, #ffc371, #47cf73, #38b6ff, #a06cff, #ff5f6d);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: chat-rainbow-shift 6s linear infinite;
}

@keyframes chat-rainbow-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 400% 50%; }
}

/* ── red dot notifikasi unread (dipakai di nav utama & tempat lain) ── */
.chat-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 6px rgba(255, 77, 77, 0.8);
    margin-left: 5px;
    vertical-align: middle;
    animation: chat-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes chat-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ── biar room list gak flat: fade-in halus pas landing kebuka ─── */
.chat-room-item,
.chat-room-group {
    animation: chat-fade-up 0.35s ease backwards;
}

.chat-room-list .chat-room-item:nth-child(1) { animation-delay: 0.02s; }
.chat-room-list .chat-room-item:nth-child(2) { animation-delay: 0.06s; }
.chat-room-list .chat-room-group:nth-of-type(1) { animation-delay: 0.10s; }
.chat-room-list .chat-room-group:nth-of-type(2) { animation-delay: 0.14s; }
.chat-room-list .chat-room-group:nth-of-type(3) { animation-delay: 0.18s; }

@keyframes chat-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── widget "N orang online" di landing /chat ──────────────────── */
.chatapp-online-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 8px;
    padding: 4px 10px;
    border: 1px solid var(--chat-nav-border);
    border-radius: 999px;
    background: rgba(217, 192, 137, 0.05);
    color: var(--chat-gold-dim);
    font-family: inherit;
    font-size: 0.66rem;
    cursor: pointer;
}

.chatapp-online-total:hover { border-color: var(--chat-gold-dim); }

.chatapp-online-count {
    color: var(--chat-gold-bright);
    font-weight: 700;
}

.chatapp-online-list {
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--chat-nav-border);
}

.chatapp-online-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    font-size: 0.68rem;
}

.chatapp-online-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.7);
}

.chatapp-online-name {
    color: var(--chat-gold);
    font-weight: 700;
}

.chatapp-online-where {
    margin-left: auto;
    color: var(--chat-gold-dim);
    font-size: 0.62rem;
}