:root {
  --wa-teal: #00a884;
  --wa-teal-dark: #008069;
  --wa-bg: #f0f2f5;
  --wa-panel: #ffffff;
  --wa-chat-bg: #efeae2;
  --wa-bubble-out: #d9fdd3;
  --wa-bubble-in: #ffffff;
  --wa-text: #111b21;
  --wa-text-2: #667781;
  --wa-border: #e9edef;
  --wa-hover: #f5f6f6;
  --wa-header: #f0f2f5;
  --wa-tick-read: #53bdeb;
  --wa-tick: #8696a0;
  --wa-panel-dark: #111b21;
  --wa-accent-text: #008069;
  --wa-input-bg: #fafbfc;
  --wa-chip: #ffffff;
  --wa-active: #f0f2f5;
  --wa-avatar-bg: #dfe5e7;
  --wa-glass: rgba(240, 242, 245, .88);
  --wa-hover-soft: rgba(0, 0, 0, .07);
  --wa-overlay: rgba(0, 0, 0, .05);
  --wa-danger-soft: #fdeeee;
  --wa-danger-text: #d5504f;
  --wa-blue-soft: #e7f3ff;
  --wa-blue-text: #1d6fd1;
  --wa-blue-link: #0a6ed1;
  --wa-border-strong: #d1d7d8;
  --wa-dash: rgba(11, 20, 26, .12);
  --wa-thumb: rgba(11, 20, 26, .2);
  --wa-toast: #111b21;
  --wa-chat-pattern: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d6cdc0' fill-opacity='0.35'%3E%3Cpath d='M10 10h5v5h-5zM30 20h4v4h-4zM55 40h6v6h-6zM20 55h5v5h-5zM65 15h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--wa-bg);
  color: var(--wa-text);
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }
.hidden { display: none !important; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--wa-toast); color: #fff; padding: 10px 18px; border-radius: 8px;
  z-index: 999; box-shadow: var(--shadow); max-width: 90vw; text-align: center;
  animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- auth ---------- */
.auth-view {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 28px; padding: 24px;
  background: linear-gradient(160deg, var(--wa-teal-dark) 0%, #0b3d33 60%, #071d1a 100%);
}
.auth-hero { text-align: center; color: #fff; }
.auth-logo { font-size: 64px; }
.auth-hero h1 { font-size: 34px; font-weight: 600; margin-top: 8px; }
.auth-hero p { opacity: .85; margin-top: 8px; }
.auth-copy { font-size: 12.5px; letter-spacing: .3px; opacity: .7 !important; margin-top: 14px !important; }
.auth-card {
  background: var(--wa-panel); border-radius: 16px; padding: 26px;
  width: 100%; max-width: 400px; box-shadow: var(--shadow);
}
.auth-tabs { display: flex; border-bottom: 1px solid var(--wa-border); margin-bottom: 20px; }
.auth-tab {
  flex: 1; padding: 10px; font-weight: 600; color: var(--wa-text-2);
  border-bottom: 3px solid transparent; transition: .15s;
}
.auth-tab.active { color: var(--wa-accent-text); border-bottom-color: var(--wa-teal); }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--wa-text-2); }
.auth-form input {
  padding: 12px 14px; border: 1px solid var(--wa-border); border-radius: 8px;
  outline: none; transition: border .15s; background: var(--wa-input-bg); color: var(--wa-text);
}
.auth-form input:focus { border-color: var(--wa-teal); }
.btn-primary {
  background: var(--wa-teal-dark); color: #fff; padding: 12px;
  border-radius: 24px; font-weight: 600; transition: filter .15s;
}
.btn-primary:hover { filter: brightness(1.1); }
.auth-error { color: var(--wa-danger-text); font-size: 13px; margin-top: 12px; text-align: center; }

/* ---------- app layout ---------- */
.app {
  display: flex; height: 100vh; max-width: 1600px; margin: 0 auto;
  background: var(--wa-panel); box-shadow: var(--shadow); overflow: hidden;
  position: relative;
}

/* ---------- sidebar ---------- */
.sidebar {
  width: 400px; min-width: 320px; border-right: 1px solid var(--wa-border);
  display: flex; flex-direction: column; background: var(--wa-panel); z-index: 5;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--wa-header); gap: 8px;
}
.me { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.me-info { display: flex; flex-direction: column; min-width: 0; }
.me-info strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-info small { color: var(--wa-text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; gap: 4px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s; color: var(--wa-text-2); flex-shrink: 0;
}
.icon-btn:hover { background: var(--wa-hover-soft); }

.avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--wa-avatar-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex-shrink: 0; color: var(--wa-text-2); font-weight: 600; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xl { width: 120px; height: 120px; font-size: 42px; margin: 0 auto; }
.avatar .online-dot {
  position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px;
  background: var(--wa-teal); border: 2px solid var(--wa-panel); border-radius: 50%;
}

/* verified badge (centang biru resmi) */
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; margin-left: 4px;
  vertical-align: -3px; position: relative; overflow: hidden; border-radius: 50%;
  animation: badgePop .4s cubic-bezier(.2, 1.5, .4, 1) both;
  filter: drop-shadow(0 1px 2px rgba(10, 110, 209, .45));
}
.verified-badge svg { width: 100%; height: 100%; display: block; }
.verified-badge.lg { width: 22px; height: 22px; vertical-align: -5px; margin-left: 6px; }
.verified-badge::after {
  content: ''; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 180% 0;
  animation: badgeShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgePop {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes badgeShine {
  0%, 62% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.chip svg { width: 14px; height: 14px; }
.chip-verified {
  background: rgba(29, 155, 240, .12); color: var(--wa-blue-link);
  border: 1px solid rgba(29, 155, 240, .35);
  animation: fadeUp .35s ease both;
}

.search-wrap { padding: 8px 12px; background: var(--wa-panel); border-bottom: 1px solid var(--wa-border); }
.search-wrap input {
  width: 100%; padding: 9px 14px; background: var(--wa-bg); border: none;
  border-radius: 8px; outline: none; color: var(--wa-text);
}

.chat-list { flex: 1; overflow-y: auto; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--wa-text-2); font-size: 14px; }

.chat-item {
  display: flex; gap: 13px; padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--wa-border); align-items: center; transition: background .12s;
}
.chat-item:hover { background: var(--wa-hover); }
.chat-item.active { background: var(--wa-active); }
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat-item-top strong { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-top time { font-size: 11px; color: var(--wa-text-2); flex-shrink: 0; }
.chat-item-top time.unread-time { color: var(--wa-teal); font-weight: 600; }
.chat-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; }
.chat-item-preview {
  font-size: 13px; color: var(--wa-text-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: flex; gap: 5px; align-items: center;
}
.unread-badge {
  background: var(--wa-teal); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- chat pane ---------- */
.chat-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--wa-chat-bg);
  background-image: var(--wa-chat-pattern);
}
.chat-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; color: var(--wa-text-2);
  border-bottom: 6px solid var(--wa-teal); background: var(--wa-active); padding: 40px;
}
.chat-empty-logo { font-size: 72px; }
.chat-empty h2 { margin: 18px 0 10px; color: var(--wa-text); font-weight: 300; }
.chat-empty p { font-size: 14px; line-height: 1.6; max-width: 560px; }
.chat-active { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-header {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--wa-header); border-bottom: 1px solid var(--wa-border); z-index: 2;
}
.back-btn { display: none; font-size: 26px; }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-title strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title small { color: var(--wa-text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* messages */
.messages {
  flex: 1; overflow-y: auto; padding: 18px 6% 12px; display: flex;
  flex-direction: column; gap: 3px;
}
.day-divider {
  align-self: center; background: var(--wa-chip); color: var(--wa-text-2); font-size: 11.5px;
  padding: 5px 12px; border-radius: 8px; margin: 10px 0; box-shadow: 0 1px 1px rgba(11,20,26,.13);
}
.msg {
  max-width: 65%; padding: 6px 8px 8px 9px; border-radius: 8px; position: relative;
  background: var(--wa-bubble-in); box-shadow: 0 1px .5px rgba(11,20,26,.13);
  word-wrap: break-word; overflow-wrap: anywhere; align-self: flex-start;
  animation: msgIn .15s ease;
}
.msg.out { align-self: flex-end; background: var(--wa-bubble-out); border-top-right-radius: 0; }
.msg.in { border-top-left-radius: 0; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-sender { font-size: 12.5px; font-weight: 600; color: var(--wa-accent-text); margin-bottom: 2px; }
.msg-text { font-size: 14.2px; line-height: 1.45; white-space: pre-wrap; }
.msg-media { border-radius: 6px; overflow: hidden; margin-bottom: 4px; max-width: 100%; }
.msg-media img, .msg-media video { max-width: 330px; max-height: 380px; width: auto; display: block; border-radius: 6px; background: #000; }
.msg-media video { min-width: 260px; }
.msg-file {
  display: flex; align-items: center; gap: 10px; background: var(--wa-overlay);
  padding: 10px; border-radius: 8px; text-decoration: none; color: var(--wa-text);
}
.msg-file .file-ico { font-size: 28px; }
.msg-file-info { min-width: 0; }
.msg-file-info strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.msg-file-info small { color: var(--wa-text-2); font-size: 11.5px; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; }
.msg-time { font-size: 11px; color: var(--wa-text-2); }
.msg-ticks { font-size: 13px; color: var(--wa-tick); letter-spacing: -3px; }
.msg-ticks.read { color: var(--wa-tick-read); }
.msg.deleted { font-style: italic; color: var(--wa-text-2); font-size: 13px; }
.msg-actions { position: absolute; top: -14px; right: 4px; opacity: 0; transition: .15s; }
.msg:hover .msg-actions { opacity: 1; }
.msg-actions button {
  background: var(--wa-chip); border-radius: 50%; width: 28px; height: 28px; font-size: 13px;
  box-shadow: 0 1px 3px rgba(11,20,26,.3);
}
.uploading-bar { height: 4px; background: var(--wa-overlay); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.uploading-bar i { display: block; height: 100%; background: var(--wa-teal); transition: width .2s; width: 0%; }
.uploading-label { font-size: 11.5px; color: var(--wa-text-2); }

.typing-indicator { align-self: flex-start; background: var(--wa-chip); border-radius: 14px; padding: 10px 14px; box-shadow: 0 1px 1px rgba(11,20,26,.13); }
.typing-indicator span { display: inline-block; width: 7px; height: 7px; background: var(--wa-text-2); border-radius: 50%; margin: 0 1.5px; animation: blink 1.2s infinite both; }
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* composer */
.composer {
  display: flex; align-items: flex-end; gap: 6px; padding: 8px 12px;
  background: var(--wa-header); position: relative; border-top: 1px solid var(--wa-border);
}
.composer textarea {
  flex: 1; resize: none; border: none; outline: none; background: var(--wa-panel);
  border-radius: 8px; padding: 11px 14px; max-height: 120px; font-size: 15px;
  color: var(--wa-text); line-height: 1.4;
}
.send-btn { background: var(--wa-teal-dark); color: #fff; font-size: 18px; }
.send-btn:hover { background: var(--wa-teal); }
.attach-menu {
  position: absolute; bottom: 64px; left: 12px; background: var(--wa-panel); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; z-index: 20;
}
.attach-menu button { padding: 12px 22px; text-align: left; font-size: 14.5px; display: flex; gap: 10px; align-items: center; }
.attach-menu button:hover { background: var(--wa-hover); }
.attach-preview {
  position: absolute; bottom: 64px; left: 12px; right: 12px; background: var(--wa-panel);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; z-index: 20;
}
.attach-preview-info { flex: 1; min-width: 0; font-size: 14px; }
.attach-preview-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-preview-info small { color: var(--wa-text-2); }
.attach-preview img { max-height: 90px; border-radius: 8px; }

/* ---------- drawers ---------- */
.drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 400px; max-width: 100%;
  background: var(--wa-panel); z-index: 30; display: flex; flex-direction: column;
  box-shadow: 4px 0 16px rgba(11,20,26,.15); animation: slideIn .18s ease;
}
@keyframes slideIn { from { transform: translateX(-30px); opacity: .5; } to { transform: none; opacity: 1; } }
.drawer-header {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--wa-header); color: var(--wa-text); font-size: 16px;
}
.drawer-header .icon-btn { font-size: 26px; }
.profile-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.profile-body label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--wa-teal); }
.profile-body input {
  padding: 10px 12px; border: none; border-bottom: 2px solid var(--wa-border);
  outline: none; background: transparent; color: var(--wa-text); font-size: 15px;
}
.profile-body input:focus { border-bottom-color: var(--wa-teal); }
.profile-body input:disabled { color: var(--wa-text-2); }
.avatar-upload { text-align: center; cursor: pointer; color: var(--wa-text-2) !important; }
.avatar-upload small { display: block; margin-top: 10px; }
.profile-verified {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--wa-blue-soft); color: var(--wa-blue-text); border-radius: 8px;
  padding: 9px 12px; font-size: 13.5px; font-weight: 500;
}

/* ---------- call ---------- */
.call-modal {
  position: fixed; inset: 0; background: rgba(7, 20, 18, .92); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.call-box { text-align: center; color: #fff; animation: msgIn .2s ease; }
.call-box h3 { margin-top: 16px; font-size: 24px; font-weight: 500; }
.call-box p { color: #a9c7bf; margin-top: 6px; }
.call-box-wide { width: min(920px, 100%); }
.call-actions { display: flex; gap: 18px; justify-content: center; margin-top: 26px; }
.call-btn {
  padding: 13px 26px; border-radius: 28px; font-weight: 600; font-size: 15px;
  color: #fff; transition: filter .15s; display: inline-flex; align-items: center; gap: 8px;
}
.call-btn.accept, .call-btn.toggle { background: var(--wa-teal); }
.call-btn.decline { background: #ef5350; }
.call-btn.toggle.off { background: #54656f; opacity: .7; }
.call-btn:hover { filter: brightness(1.12); }
.call-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.call-btn:disabled:hover { filter: none; }
.call-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.call-timer { font-variant-numeric: tabular-nums; color: #a9c7bf; }
.call-videos { position: relative; background: #0b141a; border-radius: 14px; overflow: hidden; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.call-videos video { width: 100%; height: 100%; max-height: 60vh; object-fit: cover; }
#localVideo {
  position: absolute; bottom: 14px; right: 14px; width: 200px; height: 150px;
  object-fit: cover; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.5); background: #000;
}
.call-avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.call-state { margin-top: 10px; color: #a9c7bf; font-size: 14px; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--wa-thumb); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- ikon & sprite ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; display: block; color: currentColor; }
.icon-btn .ico { width: 19px; height: 19px; }
#btnMenu svg { fill: currentColor; }

/* ---------- scrim ---------- */
.scrim {
  position: absolute; inset: 0; z-index: 25; background: rgba(11, 20, 26, .45);
  backdrop-filter: blur(2px); animation: fadeIn .18s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- drawer kanan (menu / profil / info / latar) ---------- */
.drawer-right {
  left: auto; right: 0; width: 364px; max-width: 100%;
  box-shadow: -8px 0 30px rgba(11, 20, 26, .22);
  animation: slideInRight .26s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes slideInRight { from { transform: translateX(46px); opacity: .3; } to { transform: none; opacity: 1; } }
.drawer-header strong { flex: 1; }
.drawer-close { margin-left: auto; font-size: 0; }
.drawer-close .ico { width: 22px; height: 22px; }
.drawer-header .drawer-close + strong { flex: 0 1 auto; }

/* menu */
.menu-profile {
  display: flex; align-items: center; gap: 14px; padding: 20px 18px; color: #fff;
  background: linear-gradient(135deg, #073c33 0%, #008069 55%, #00a884 130%);
  position: relative; overflow: hidden;
}
.menu-profile::after {
  content: ''; position: absolute; right: -40px; top: -60px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
}
.avatar-lg { width: 62px; height: 62px; font-size: 24px; }
.avatar.ring { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 168, 132, .45); }
.menu-profile-info { min-width: 0; position: relative; z-index: 1; }
.menu-name strong { font-size: 17px; font-weight: 600; display: inline-flex; align-items: center; }
.menu-bio {
  font-size: 12.5px; opacity: .88; margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.menu-profile .chip-verified {
  margin-top: 9px; background: rgba(255, 255, 255, .16); color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.menu-list { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.menu-item {
  display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 13px;
  text-align: left; transition: background .16s, transform .16s;
  animation: fadeUp .32s ease both;
}
.menu-item:nth-child(1) { animation-delay: .03s; }
.menu-item:nth-child(2) { animation-delay: .08s; }
.menu-item:nth-child(3) { animation-delay: .13s; }
.menu-item:nth-child(4) { animation-delay: .18s; }
.menu-item:hover { background: var(--wa-hover); transform: translateX(4px); }
.menu-item .mi-ico {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font-size: 17px; background: var(--wa-bg); flex-shrink: 0;
}
.menu-item .mi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-item .mi-text strong { font-size: 14.5px; font-weight: 600; }
.menu-item .mi-text small { font-size: 11.5px; color: var(--wa-text-2); }
.menu-item .mi-arrow { color: var(--wa-text-2); font-size: 19px; }
.menu-item.danger .mi-text strong { color: var(--wa-danger-text); }
.menu-item.danger .mi-ico { background: var(--wa-danger-soft); }
.menu-footer {
  margin-top: auto; padding: 14px 16px; text-align: center; font-size: 11.5px;
  color: var(--wa-text-2); border-top: 1px solid var(--wa-border);
}
.menu-copy { display: block; margin-top: 5px; font-weight: 600; color: var(--wa-accent-text); }

/* latar belakang chat */
.wallpaper-body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.wp-preview {
  position: relative; height: 168px; border-radius: 14px; overflow: hidden;
  background-color: var(--wa-chat-bg); box-shadow: inset 0 0 0 1px rgba(11, 20, 26, .08);
}
.wp-preview-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wp-preview-layer video { width: 100%; height: 100%; object-fit: cover; }
.wp-preview-layer.has-shade::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--wp-dim, .18)); transition: background .2s; }
.wp-preview-chat {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; gap: 9px; padding: 18px;
}
.wp-bubble {
  max-width: 72%; padding: 7px 11px; border-radius: 10px; font-size: 13px;
  background: var(--wa-chip); box-shadow: 0 1px 1px rgba(11, 20, 26, .13); align-self: flex-start;
}
.wp-bubble.out { background: var(--wa-bubble-out); align-self: flex-end; }
.wp-label {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; font-size: 11px;
  background: rgba(11, 20, 26, .68); color: #fff; padding: 4px 10px; border-radius: 999px;
}
.wp-options { display: flex; flex-direction: column; gap: 8px; }
.wp-option {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 13px;
  border: 1px solid var(--wa-border); background: var(--wa-panel); text-align: left;
  transition: border .15s, background .15s, transform .15s, box-shadow .15s;
  animation: fadeUp .3s ease both;
}
.wp-option:nth-child(2) { animation-delay: .05s; }
.wp-option:nth-child(3) { animation-delay: .1s; }
.wp-option:nth-child(4) { animation-delay: .15s; }
.wp-option:hover { border-color: var(--wa-teal); background: var(--wa-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 20, 26, .09); }
.wp-option.active { border-color: var(--wa-teal); background: rgba(0, 168, 132, .14); box-shadow: 0 0 0 3px rgba(0, 168, 132, .14); }
.wp-option .wp-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: var(--wa-bg); flex-shrink: 0; }
.wp-option .wp-text { display: flex; flex-direction: column; gap: 1px; }
.wp-option .wp-text strong { font-size: 14.5px; font-weight: 600; }
.wp-option .wp-text small { font-size: 11.5px; color: var(--wa-text-2); }
.wp-option.danger .wp-text strong { color: #d5504f; }
.wp-option.danger .wp-ico { background: var(--wa-danger-soft); }
.wp-hint { font-size: 12px; color: var(--wa-text-2); line-height: 1.6; }
.wp-status { font-size: 13px; font-weight: 600; color: var(--wa-accent-text); animation: fadeUp .25s ease both; }

/* pengaturan ukuran latar */
.wp-settings {
  display: flex; flex-direction: column; gap: 14px; padding: 14px;
  background: var(--wa-bg); border-radius: 14px; border: 1px solid var(--wa-border);
  transition: opacity .2s;
}
.wp-settings.disabled { opacity: .55; pointer-events: none; }
.wp-row { display: flex; flex-direction: column; gap: 8px; }
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--wa-panel); border: 1px solid var(--wa-border); border-radius: 11px; padding: 4px;
}
.seg button {
  padding: 8px 6px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--wa-text-2); transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:hover { background: var(--wa-hover); color: var(--wa-text); }
.seg button.active {
  background: var(--wa-teal-dark); color: #fff; box-shadow: 0 2px 8px rgba(0, 128, 105, .3);
}
.wp-slider { display: flex; flex-direction: column; gap: 6px; }
.wp-slider-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--wa-text-2); }
.wp-slider-top b { color: var(--wa-accent-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.wp-slider-hint { font-size: 11px; color: var(--wa-text-2); opacity: .85; }
.wp-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, var(--wa-teal) 0%, var(--wa-teal) var(--fill, 0%), var(--wa-border) var(--fill, 0%), var(--wa-border) 100%);
  outline: none; cursor: pointer;
}
.wp-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--wa-teal-dark); box-shadow: 0 2px 6px rgba(11, 20, 26, .25);
  transition: transform .15s;
}
.wp-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.wp-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--wa-teal-dark); box-shadow: 0 2px 6px rgba(11, 20, 26, .25);
}
.wp-actions { display: flex; gap: 8px; }
.wp-actions .btn-primary { flex: 1; padding: 11px; }
.wp-actions .btn-ghost { padding: 11px 16px; }
.wp-disabled-note { font-size: 11.5px; color: var(--wa-text-2); text-align: center; }

/* info kontak */
.contact-body { padding: 26px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.contact-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; animation: fadeUp .3s ease both; }
.contact-hero h3 { font-size: 19px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.contact-hero .bio { color: var(--wa-text-2); font-size: 13.5px; line-height: 1.5; }
.contact-hero .presence { font-size: 12.5px; color: var(--wa-accent-text); font-weight: 600; }
.contact-card { background: var(--wa-panel); border: 1px solid var(--wa-border); border-radius: 14px; padding: 2px 14px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.contact-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--wa-border); align-items: flex-start; }
.contact-row:last-child { border-bottom: none; }
.contact-row .cr-ico { font-size: 16px; opacity: .75; line-height: 1.4; }
.contact-row small { display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--wa-text-2); margin-bottom: 2px; }
.contact-row strong { font-size: 14.5px; font-weight: 500; word-break: break-word; }
.contact-actions { display: flex; gap: 10px; }
.contact-actions .btn-ghost { flex: 1; }

/* profil */
.profile-body .avatar-upload { position: relative; display: block; }
.avatar-badge {
  position: absolute; top: 84px; left: 50%; margin-left: 27px; width: 36px; height: 36px;
  display: grid; place-items: center; background: var(--wa-chip); border-radius: 50%;
  box-shadow: 0 3px 10px rgba(11, 20, 26, .28); animation: badgePop .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
.avatar-badge svg { width: 26px; height: 26px; }
.avatar-upload small { display: block; margin-top: 14px; font-size: 12.5px; }
.profile-section { display: flex; flex-direction: column; gap: 6px; }
.ps-label { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--wa-accent-text); }
.profile-section input, .profile-section textarea {
  padding: 11px 13px; border: 1px solid var(--wa-border); border-radius: 11px;
  outline: none; background: var(--wa-input-bg); color: var(--wa-text); font-size: 15px;
  font-family: inherit; resize: none; transition: border .15s, box-shadow .15s, background .15s;
}
.profile-section input:focus, .profile-section textarea:focus {
  border-color: var(--wa-teal); background: var(--wa-panel); box-shadow: 0 0 0 3px rgba(0, 168, 132, .13);
}
.profile-section input:disabled { color: var(--wa-text-2); background: var(--wa-bg); }
.ps-counter { align-self: flex-end; font-size: 11px; color: var(--wa-text-2); }
.profile-facts { display: flex; flex-direction: column; background: var(--wa-bg); border-radius: 13px; padding: 4px 14px; }
.fact { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--wa-dash); font-size: 13.5px; }
.fact:last-child { border-bottom: none; }
.fact span { color: var(--wa-text-2); }
.fact strong { font-weight: 600; text-align: right; min-width: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-ghost {
  border: 1px solid var(--wa-border); background: var(--wa-panel); padding: 12px; border-radius: 26px;
  font-weight: 600; font-size: 14px; color: var(--wa-text); transition: .16s;
}
.btn-ghost:hover { background: var(--wa-hover); border-color: var(--wa-border-strong); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11, 20, 26, .08); }
.btn-ghost.danger { color: var(--wa-danger-text); border-color: rgba(213, 80, 79, .4); }
.btn-ghost.danger:hover { background: var(--wa-danger-soft); }
.profile-verified { animation: fadeUp .3s ease both; }
.profile-verified small { color: #4a86c5; font-weight: 500; }

/* ---------- latar belakang chat ---------- */
.chat-pane { position: relative; }
.chat-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-color: var(--wa-chat-bg);
  background-image: var(--wa-chat-pattern);
  background-size: 80px 80px;
}
.chat-bg.custom::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--wp-dim, .18)); transition: background .2s; }
.chat-bg video, .chat-bg .bg-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #0b141a;
  transform-origin: center; transition: transform .18s ease, object-fit .18s;
}
.chat-bg .bg-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.chat-bg.tile .bg-photo { background-repeat: repeat; background-size: auto; }
.chat-empty, .chat-active { position: relative; z-index: 1; }
.chat-empty { z-index: 2; background: var(--wa-glass); backdrop-filter: blur(3px); }

/* ---------- micro-interaksi ---------- */
.chat-item { transition: background .14s, transform .16s; }
.chat-item:hover { transform: translateX(3px); }
.chat-item:hover .avatar { transform: scale(1.05); }
.avatar { transition: transform .2s cubic-bezier(.2, .9, .3, 1.4); }
.icon-btn { transition: background .15s, transform .15s, color .15s; }
.icon-btn:hover { transform: scale(1.08); }
.icon-btn:active { transform: scale(.94); }
.menu-btn.open { background: rgba(0, 168, 132, .16); color: var(--wa-accent-text); }
.drawer-header .icon-btn:hover, .contact-hero .avatar:hover { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .sidebar { width: 100%; min-width: 0; }
  .app.chat-open .sidebar { display: none; }
  .app:not(.chat-open) .chat-pane { display: none; }
  .back-btn { display: inline-flex; }
  .drawer { width: 100%; }
  .drawer-right { width: 100%; animation-name: slideInRightMobile; }
  .msg { max-width: 82%; }
  .messages { padding: 14px 10px; }
  #localVideo { width: 120px; height: 90px; }
  .profile-facts .fact strong { max-width: 60%; }
}
@keyframes slideInRightMobile { from { transform: translateY(26px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ================= mode gelap ================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --wa-bg: #0b141a;
  --wa-panel: #111b21;
  --wa-chat-bg: #0b141a;
  --wa-bubble-out: #005c4b;
  --wa-bubble-in: #202c33;
  --wa-text: #e9edef;
  --wa-text-2: #8696a0;
  --wa-border: #26343c;
  --wa-hover: #202c33;
  --wa-header: #202c33;
  --wa-tick: #8696a0;
  --wa-panel-dark: #0b141a;
  --wa-accent-text: #2ee0b0;
  --wa-input-bg: #16222a;
  --wa-chip: #202c33;
  --wa-active: #2a3942;
  --wa-avatar-bg: #3b4a54;
  --wa-glass: rgba(11, 20, 26, .88);
  --wa-hover-soft: rgba(255, 255, 255, .08);
  --wa-overlay: rgba(255, 255, 255, .07);
  --wa-danger-soft: rgba(239, 83, 80, .16);
  --wa-danger-text: #ff8a80;
  --wa-blue-soft: rgba(29, 155, 240, .16);
  --wa-blue-text: #7cc4f8;
  --wa-blue-link: #7cc4f8;
  --wa-border-strong: #3b4a54;
  --wa-dash: rgba(255, 255, 255, .14);
  --wa-thumb: rgba(255, 255, 255, .22);
  --wa-toast: #2a3942;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --wa-chat-pattern: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2354656f' fill-opacity='0.22'%3E%3Cpath d='M10 10h5v5h-5zM30 20h4v4h-4zM55 40h6v6h-6zM20 55h5v5h-5zM65 15h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="dark"] .app { box-shadow: none; }
html[data-theme="dark"] .msg { box-shadow: 0 1px .5px rgba(0, 0, 0, .32); }
html[data-theme="dark"] .day-divider,
html[data-theme="dark"] .typing-indicator { box-shadow: 0 1px 1px rgba(0, 0, 0, .32); }
html[data-theme="dark"] .msg-actions button { box-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .drawer { box-shadow: 4px 0 16px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .drawer-right { box-shadow: -8px 0 30px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .wp-preview { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .btn-ghost:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .wp-option:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .contact-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .avatar-badge { box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .profile-verified small { color: var(--wa-blue-text); }
html[data-theme="dark"] .auth-view { background: linear-gradient(160deg, #06251f 0%, #071d1a 60%, #050f0e 100%); }
html[data-theme="dark"] .wp-option:hover,
html[data-theme="dark"] .wp-option.active { box-shadow: none; }

/* ================= tab sidebar (chats / status) ================= */
.side-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 6px;
}
.side-tab {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  background: var(--wa-panel);
  color: var(--wa-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.side-tab:hover { background: var(--wa-hover); }
.side-tab.active {
  background: rgba(0, 168, 132, .14);
  border-color: var(--wa-teal);
  color: var(--wa-accent-text);
}

/* ================= status ================= */
.status-create {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--wa-border);
  background: transparent;
  color: var(--wa-text);
  text-align: left;
  cursor: pointer;
}
.status-create:hover { background: var(--wa-hover); }
.status-create-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 168, 132, .15);
  color: var(--wa-accent-text);
  font-size: 26px;
  border: 2px dashed var(--wa-teal);
}
.status-create-text strong { display: block; font-size: 15px; }
.status-create-text small { color: var(--wa-text-2); font-size: 12.5px; }

.status-item { cursor: pointer; }
.status-item .status-avatar { border: 2px solid var(--wa-border); }
.status-item.unread .status-avatar { border-color: var(--wa-teal); }
.status-item.mine .status-avatar { border-style: dashed; }
.status-add {
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 168, 132, .15);
  color: var(--wa-accent-text);
  font-weight: 700;
}

/* pembuat status */
.status-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.status-preview {
  min-height: 170px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  overflow: hidden;
}
.status-preview img, .status-preview video { max-width: 100%; max-height: 240px; border-radius: 10px; }
.status-body textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--wa-border);
  border-radius: 10px;
  background: var(--wa-input-bg);
  color: var(--wa-text);
  font-size: 15px;
  resize: vertical;
  outline: none;
}
.status-colors { display: flex; gap: 8px; }
.status-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.status-color.active { border-color: var(--wa-text); box-shadow: 0 0 0 2px var(--wa-panel); }
.status-actions { display: flex; gap: 10px; }
.status-actions .btn-ghost, .status-actions .btn-primary { flex: 1; }
.status-media-note { font-size: 12.5px; color: var(--wa-accent-text); margin: 0; }

/* pemontok status */
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #05090c;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.story-progress {
  display: flex;
  gap: 4px;
  width: min(520px, 96vw);
  padding: 10px 4px 6px;
  box-sizing: border-box;
}
.story-progress i {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
  position: relative;
}
.story-progress i.done { background: #fff; }
.story-progress i.active::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: #fff;
}
.story-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 96vw);
  padding: 4px 6px 8px;
  box-sizing: border-box;
}
.story-head .avatar { width: 38px; height: 38px; }
.story-meta { flex: 1; display: flex; flex-direction: column; }
.story-meta strong { font-size: 14.5px; }
.story-meta small { color: rgba(255, 255, 255, .7); font-size: 12px; }
.story-close { color: #fff; }
.story-stage {
  width: min(520px, 96vw);
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  background: #0b141a;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.story-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.story-stage.text { padding: 24px; text-align: center; }
.story-stage.text p {
  font-size: clamp(18px, 4.5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.story-caption {
  width: min(520px, 96vw);
  margin: 8px 0 4px;
  padding: 0 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  text-align: center;
  box-sizing: border-box;
}
.story-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 64px;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
}
.story-nav:hover { background: rgba(255, 255, 255, .22); }
.story-nav.prev { left: 8px; }
.story-nav.next { right: 8px; }
.story-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(520px, 96vw);
  padding: 6px 6px 14px;
  box-sizing: border-box;
}
.story-foot span { font-size: 13px; color: rgba(255, 255, 255, .8); }
.story-del { flex: none; }

/* ================= grup ================= */
.group-form { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.group-name-label { display: flex; flex-direction: column; gap: 6px; }
.group-form input[type='text'], #groupSearch, #giSearch {
  padding: 11px 12px;
  border: 1px solid var(--wa-border);
  border-radius: 9px;
  background: var(--wa-input-bg);
  color: var(--wa-text);
  font-size: 15px;
  outline: none;
  width: 100%;
}
.group-form input:focus, .profile-section input:focus, .profile-section textarea:focus { border-color: var(--wa-teal); }
.group-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 168, 132, .14);
  color: var(--wa-accent-text);
  font-size: 13px;
  font-weight: 600;
}
.group-chip i { font-style: normal; cursor: pointer; opacity: .7; }
.group-chip i:hover { opacity: 1; }
.group-form-actions { position: sticky; bottom: 0; padding-top: 6px; }
.group-form-actions .btn-primary { width: 100%; }

.group-info-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.group-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.group-hero h3 { margin: 6px 0 0; font-size: 19px; color: var(--wa-text); }
.group-sub { margin: 0; color: var(--wa-text-2); font-size: 13px; }
.member-list { display: flex; flex-direction: column; gap: 2px; }
.member-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 6px;
  border-radius: 9px;
}
.member-item:hover { background: var(--wa-hover); }
.member-meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.member-meta strong { font-size: 14.5px; color: var(--wa-text); }
.member-meta small { font-size: 12.5px; color: var(--wa-text-2); overflow: hidden; text-overflow: ellipsis; }
.role-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 168, 132, .16);
  color: var(--wa-accent-text);
}
.drawer-action { margin-left: auto; }

/* ================= pesan suara ================= */
.audio-player {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 200px;
  max-width: 260px;
  padding: 5px 0;
}
.ap-play {
  width: 34px;
  height: 34px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}
.msg.out .ap-play { background: rgba(255, 255, 255, .2); }
.ap-play:hover { filter: brightness(.94); }
.ap-track {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .14);
  overflow: hidden;
}
.msg.out .ap-track { background: rgba(255, 255, 255, .3); }
.ap-track i { display: block; height: 100%; background: var(--wa-accent-text); border-radius: 4px; }
.msg.out .ap-track i { background: #fff; }
.ap-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: .75;
  min-width: 34px;
  text-align: right;
}
.mic-btn { font-size: 17px; }

/* perekam */
.rec-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  padding: 6px 10px;
  border-radius: 24px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border);
}
.rec-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef5350;
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse { 50% { opacity: .3; } }
.rec-time { font-size: 14px; font-weight: 700; color: var(--wa-text); font-variant-numeric: tabular-nums; }
.rec-hint { flex: 1; font-size: 12.5px; color: var(--wa-text-2); }

/* ================= foto sekali lihat ================= */
.vo-bubble {
  display: block;
  width: 210px;
  padding: 26px 14px;
  border: 1px dashed rgba(0, 168, 132, .6);
  border-radius: 10px;
  background: rgba(0, 168, 132, .12);
  color: var(--wa-accent-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.msg.out .vo-bubble { background: rgba(255, 255, 255, .18); color: inherit; border-color: rgba(255, 255, 255, .5); }
.vo-bubble.opened { cursor: default; border-style: solid; opacity: .8; }
.attach-preview.view-once { border-color: var(--wa-teal); box-shadow: 0 0 0 2px rgba(0, 168, 132, .3); }

.vo-viewer {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: #05090c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}
.vo-viewer img { max-width: 96vw; max-height: 78vh; border-radius: 10px; }
.vo-note { color: rgba(255, 255, 255, .7); font-size: 13px; margin: 0; }
.vo-close { position: absolute; top: 14px; right: 14px; color: #fff; }

@media (max-width: 720px) {
  .story-nav { width: 34px; height: 54px; font-size: 22px; }
  .audio-player { min-width: 160px; }
}