/* ════════════════════════════════
   STATUS / SW
   ════════════════════════════════ */

.status-avatar-wrap{position:relative;flex-shrink:0;width:56px;height:56px;border-radius:50%;padding:2.5px;background:var(--surface2)}
.status-avatar-wrap.has-status{background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899,#3b82f6);background-size:300% 300%;animation:statusRingGlow 3s ease infinite}
@keyframes statusRingGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.status-avatar-wrap.viewed{background:var(--surface2)}
.status-avatar-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--bg2);display:block}
.status-plus-badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--bg2);cursor:pointer;}

/* Create-status choice sheet */
.status-choice-item{display:flex;align-items:center;gap:14px;padding:14px 8px;cursor:pointer;border-radius:12px;font-size:14px;font-weight:700;}
.status-choice-item:hover{background:var(--surface)}
.status-choice-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;}

/* Text status composer */
.status-text-preview{width:100%;aspect-ratio:9/14;max-height:340px;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:24px;margin-bottom:14px;transition:background .2s;}
.status-text-preview-text{color:#fff;font-size:20px;font-weight:800;text-align:center;line-height:1.4;word-break:break-word;white-space:pre-wrap;}
.status-color-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;}
.status-color-dot.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent);}

/* Media status editor (preview + caption, ala WhatsApp) */
#status-editor{position:fixed;inset:0;background:#000;z-index:860;display:none;flex-direction:column;}
#status-editor.open{display:flex;}
.se-header{display:flex;padding:calc(var(--safe-top) + 10px) 14px 10px;}
.se-close-btn{color:#fff;font-size:18px;cursor:pointer;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.se-body{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.se-media{max-width:100%;max-height:100%;object-fit:contain;}
.se-caption-preview{position:absolute;left:0;right:0;bottom:24px;text-align:center;padding:0 24px;color:#fff;font-size:16px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7);word-break:break-word;white-space:pre-wrap;pointer-events:none;}
.se-caption-bar{display:flex;align-items:center;gap:10px;padding:10px 14px calc(var(--safe-bot) + 14px);background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0;}
.se-caption-bar input{flex:1;background:rgba(255,255,255,.15);border:none;border-radius:22px;padding:11px 16px;color:#fff;font-size:14px;font-family:inherit;outline:none;min-width:0;}
.se-caption-bar input::placeholder{color:rgba(255,255,255,.6);}
.se-send-btn{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;font-family:inherit;}
.se-send-btn:disabled{opacity:.5;cursor:default;}

/* Full-screen viewer */
#status-viewer{position:fixed;inset:0;background:#000;z-index:850;display:none;flex-direction:column;}
/* Modal "dilihat oleh" dibuka DI ATAS status-viewer (850) — tanpa ini,
   .modal-overlay bawaan (z-index:200) bikin modal ini kebuka tapi
   ketutup di belakang layar status, baru "muncul" pas status ditutup. */
#modal-status-viewers{z-index:870;}
#status-viewer.open{display:flex;}
.sv-progress-wrap{display:flex;gap:4px;padding:8px 10px 0;}
.sv-progress-track{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;}
.sv-progress-fill{height:100%;width:0;background:#fff;}
.sv-header{display:flex;align-items:center;gap:10px;padding:10px 14px;}
.sv-header img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.sv-header-name-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden;}
.sv-header-name{color:#fff;font-size:13px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-header-time{color:rgba(255,255,255,.6);font-size:11px;flex-shrink:0;}
.sv-close-btn{color:#fff;font-size:18px;cursor:pointer;padding:6px;flex-shrink:0;}
#sv-body{flex:1;position:relative;overflow:hidden;}
#sv-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.sv-media{max-width:100%;max-height:100%;object-fit:contain;}
.sv-media-caption{position:absolute;left:0;right:0;bottom:70px;text-align:center;padding:0 24px;color:#fff;font-size:16px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7);word-break:break-word;white-space:pre-wrap;z-index:1;}
.sv-text-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:32px;}
.sv-text-content{color:#fff;font-size:24px;font-weight:800;text-align:center;line-height:1.4;word-break:break-word;white-space:pre-wrap;}
.sv-tap-zone{position:absolute;top:0;bottom:0;width:50%;z-index:2;cursor:pointer;}
.sv-offline-block{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;}
.sv-offline-block i{font-size:36px;color:rgba(255,255,255,.35);}
.sv-offline-block p{color:rgba(255,255,255,.75);font-size:14px;font-weight:600;max-width:240px;}
.sv-tap-left{left:0;}
.sv-tap-right{right:0;}
.sv-own-actions{display:none;align-items:center;justify-content:space-between;padding:12px 16px 20px;gap:10px;}
.sv-viewers-btn,.sv-delete-btn{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:99px;padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;}
.sv-delete-btn{background:rgba(239,68,68,.25);color:#fecaca;}