:root {
  --green: #0a6b5c;
  --green-deep: #064c42;
  --green-light: #14967f;
  --green-pale: #d7f5c8;
  --accent: #1fbf6a;
  --bg: #ebe4dc;
  --bg-chat: #e4ddd4;
  --surface: #ffffff;
  --text: #102019;
  --muted: #5f6f68;
  --border: #e4ebe7;
  --danger: #e53935;
  --shadow: 0 1px 2px rgba(16, 32, 25, 0.06);
  --shadow-lift: 0 10px 28px rgba(6, 76, 66, 0.14);
  --radius: 16px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --nav-base: 58px;
  --topbar-base: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: calc(var(--nav-base) + var(--safe-bottom));
  --topbar-h: calc(var(--topbar-base) + var(--safe-top));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bubble-mine: #d9fdd3;
  --bubble-theirs: #ffffff;
  --bubble-text: #111b21;
  --sheet: #ffffff;
  --input-bg: #ffffff;
  --hover: rgba(10, 107, 92, 0.06);
  --elevated: #fafbfa;
  --chat-wall: #e5ddd5;
  --nav-bg: rgba(255, 255, 255, 0.96);
  --theme-meta: #0a6b5c;
}

html[data-theme="dark"] {
  --green: #128c7e;
  --green-deep: #0a6b5c;
  --green-light: #1aa56a;
  --green-pale: #16352f;
  --accent: #25d366;
  --bg: #0b141a;
  --bg-chat: #0b141a;
  --surface: #1f2c34;
  --text: #e9edef;
  --muted: #8696a0;
  --border: #2a3942;
  --danger: #ef5350;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.5);
  --bubble-mine: #005c4b;
  --bubble-theirs: #202c33;
  --bubble-text: #e9edef;
  --sheet: #1f2c34;
  --input-bg: #2a3942;
  --hover: rgba(18, 140, 126, 0.14);
  --elevated: #182229;
  --chat-wall: #0b141a;
  --nav-bg: rgba(17, 27, 33, 0.96);
  --theme-meta: #0b141a;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html.native-app,
html.native-app body,
body.native-app,
body.native-app #app {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html.native-app {
  color-scheme: light;
}

html[data-theme="dark"].native-app,
html.native-app[data-theme="dark"] {
  color-scheme: dark !important;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden; /* scroll hanya di #screen-main > .content / layar auth */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  position: relative;
}

body.native-app,
body.native-app #app {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.native-app input,
body.native-app textarea,
body.native-app select {
  font-size: 16px;
}

.hidden { display: none !important; }

.screen {
  min-height: 0;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*
 * Shell app: topbar tetap, .content yang scroll.
 * Berlaku web HP + Capacitor (Beranda / Chat / Profil).
 */
#screen-main.screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

#screen-main > .topbar,
#screen-main > #offline-banner {
  flex-shrink: 0;
}

#screen-main > .content {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

#screen-main .tab-panel {
  overflow: visible;
  height: auto;
  max-height: none;
  min-height: 0;
}

.screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
}

/* AUTH */
#screen-auth {
  align-items: center;
  justify-content: flex-start;
  padding: max(24px, var(--safe-top)) 20px max(24px, var(--safe-bottom));
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 10% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(31, 191, 106, 0.35), transparent 50%),
    linear-gradient(165deg, #064c42 0%, #0a6b5c 42%, #128f78 78%, #1aa56a 100%);
}

.auth-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.25) 0 1px, transparent 2px);
  background-size: 48px 48px, 36px 36px, 56px 56px;
}

.auth-bg::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  top: -100px;
  right: -80px;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 28px;
  padding: 28px 22px 26px;
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: authIn 0.45s var(--ease) both;
}

@keyframes authIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.brand { text-align: center; margin-bottom: 22px; }
.brand-logo {
  width: 88px;
  height: 88px;
  margin-bottom: 14px;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(6, 76, 66, 0.28);
}
.brand-eyebrow {
  display: inline-block;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-light);
}
.brand-icon { font-size: 48px; margin-bottom: 8px; }
.brand h1 {
  font-size: 2.35rem;
  color: var(--green-deep);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.brand-tagline {
  color: var(--muted);
  font-size: 0.98rem;
  margin-top: 8px;
  font-weight: 500;
}
.brand-blurb {
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text, #0f1419);
}
.brand-disclaimer {
  margin-top: 10px;
  font-size: 0.72rem;
  color: #8a9690;
  line-height: 1.35;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: #eef3f1;
  padding: 4px;
  border-radius: 14px;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px;
  border-radius: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.auth-tab.active {
  background: var(--surface);
  color: var(--green);
  box-shadow: var(--shadow);
}

.auth-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

.auth-form input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 16px;
  font-family: inherit;
  background: #f7faf8;
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px rgba(20, 150, 127, 0.15);
}

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px #f7faf8 inset;
  transition: background-color 99999s ease-out;
}

/* Daftar: brand lebih ringkas biar form muat 1 layar */
.auth-card.is-register .brand {
  margin-bottom: 14px;
}
.auth-card.is-register .brand-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 16px;
}
.auth-card.is-register .brand h1 {
  font-size: 1.85rem;
}
.auth-card.is-register .brand-tagline,
.auth-card.is-register .brand-blurb,
.auth-card.is-register .brand-disclaimer {
  display: none;
}
.auth-card.is-register .auth-form label {
  margin-bottom: 3px;
}
.auth-card.is-register .auth-form input {
  padding: 12px 14px;
  margin-bottom: 10px;
}
.auth-card.is-register .field-hint {
  margin: -2px 0 10px;
}
.auth-privacy-note {
  margin: 2px 0 14px !important;
  line-height: 1.4;
}
.auth-privacy-note a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px 16px;
  background: #fff;
  color: #1f1f1f;
  border: 1.5px solid #dadce0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c9ce;
}
.btn-google:active {
  transform: scale(0.98);
}
.btn-google:disabled {
  opacity: 0.65;
  cursor: wait;
}
.btn-google-icon {
  flex-shrink: 0;
}
.btn-google.btn-google-pulse {
  animation: googlePulse 0.9s ease 3;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(10, 107, 92, 0.18);
}
@keyframes googlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  flex-shrink: 0;
}

.profile-setup-modal {
  max-width: 400px;
  width: calc(100% - 32px);
}
.profile-setup-body {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.profile-setup-intro {
  margin: 0 0 14px;
  line-height: 1.4;
}
.profile-setup-body label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.profile-setup-body input {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
}
.profile-setup-body .field-hint {
  margin: -6px 0 12px;
}
.profile-setup-body .btn-primary {
  width: 100%;
  margin-top: 4px;
}
.profile-setup-body .btn-outline {
  width: 100%;
  margin-top: 10px;
}

.link-btn {
  display: block;
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  color: var(--green-light);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 0 12px;
  cursor: pointer;
}

.auth-browse {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.btn-browse-guest {
  width: 100%;
}
.auth-browse-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

/* Guest browse — lihat feed tanpa akun */
body.guest-mode .tweet-compose,
body.guest-mode #status-rail,
body.guest-mode #status-rail-chat,
body.guest-mode .feed-soft-bar,
body.guest-mode #btn-open-notifs,
body.guest-mode #btn-logout,
body.guest-mode .feed-tab[data-feed="following"] {
  display: none !important;
}
body.guest-mode .guest-cta-bar {
  display: flex;
}
body:not(.guest-mode) .guest-cta-bar {
  display: none !important;
}
.guest-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  z-index: 11;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(16, 32, 25, 0.08);
}
.guest-cta-text {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.guest-cta-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
body.guest-mode #screen-main > .content {
  padding-bottom: calc(var(--nav-h) + 72px);
}
.guest-feed-more {
  margin: 8px 12px 24px;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: rgba(46, 125, 80, 0.04);
}
.guest-feed-more p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}
body.guest-mode .tweet-avatar {
  align-self: flex-start;
}

.forgot-password-modal {
  max-width: 400px;
  width: calc(100% - 32px);
  margin: auto;
  border-radius: 20px;
}
.forgot-password-body {
  padding: 4px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forgot-password-desc {
  margin: 0 0 4px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #536471;
}
.forgot-password-body label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #536471;
}
.forgot-password-body input[type="email"] {
  width: 100%;
  border: 1px solid #e5ebe9;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.forgot-password-body input[type="email"]:focus {
  border-color: var(--green, #075e54);
}
.forgot-password-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.forgot-password-actions .btn {
  flex: 1;
}
.forgot-success {
  margin: 4px 0 0;
  padding: 14px;
  border-radius: 12px;
  background: #e8f5ef;
  color: #0f3d32;
  font-size: 0.9rem;
  line-height: 1.45;
}
.forgot-success p { margin: 0; }
.forgot-success p + p { margin-top: 6px; }
.forgot-success.hidden { display: none !important; }
.forgot-done-btn {
  width: 100%;
  margin-top: 14px;
}
.forgot-form-fields.hidden { display: none !important; }
.forgot-password-body .form-error {
  margin-top: 0;
  text-align: left;
}

.form-error {
  color: var(--danger);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 12px;
}

/* BUTTONS */
.btn {
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  font-size: 1rem;
  touch-action: manipulation;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease), box-shadow 0.2s var(--ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--green-light), var(--green-deep));
  color: #fff;
  width: 100%;
  border: 2px solid transparent;
  box-shadow: 0 4px 14px rgba(10, 107, 92, 0.28);
}

.btn-primary:active { transform: scale(0.98); opacity: 0.92; }
.btn-sm { padding: 10px 18px; width: auto; font-size: 0.9rem; }
.btn-send {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px;
  padding: 0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-ghost {
  background: transparent;
  color: #536471;
  border: 2px solid transparent;
  box-shadow: none;
  width: auto;
}
.btn-ghost:active { background: rgba(10, 107, 92, 0.06); color: var(--green); }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  min-width: 48px;
  min-height: 48px;
  touch-action: manipulation;
}

.btn-icon:active { background: rgba(255, 255, 255, 0.18); }

.topbar .btn-icon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 1px;
}

/* TOPBAR & NAV */
.topbar {
  min-height: var(--topbar-h);
  background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top) 8px 0 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(6, 76, 66, 0.2);
}

.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.notif-btn { position: relative; }
.notif-btn .nav-badge {
  top: 2px;
  right: 2px;
}
.topbar-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.topbar-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.topbar-brand {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.topbar h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bottom-nav {
  min-height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -4px 20px rgba(16, 32, 25, 0.06);
}

.nav-item {
  flex: 1;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 4px 6px;
  min-height: var(--nav-base);
  position: relative;
  transition: color 0.2s var(--ease);
}

.nav-item.active {
  color: var(--green);
  font-weight: 800;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28%;
  right: 28%;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 4px 4px;
}

.nav-item .nav-icon {
  transition: transform 0.2s var(--ease);
}

.nav-item.active .nav-icon {
  transform: translateY(-1px);
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 22px;
  height: 22px;
}

.content {
  flex: 1 1 0;
  min-height: 0;
  padding-bottom: calc(var(--nav-h) + 8px);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.offline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: #3d3d3d;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 20;
}

.offline-banner.hidden { display: none !important; }

.offline-banner .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  padding: 4px 10px;
  font-size: 0.78rem;
}

.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: #536471;
  font-size: 0.8rem;
  font-weight: 600;
  transition: height 0.12s ease, opacity 0.12s ease;
  --ptr-pull: 0px;
}

.content.ptr-pulling .ptr-indicator,
.content.ptr-ready .ptr-indicator,
.content.ptr-busy .ptr-indicator {
  height: var(--ptr-pull, 48px);
  opacity: 1;
}

.content.ptr-ready .ptr-label {
  color: #0a6b5c;
}

.ptr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(10, 107, 92, 0.2);
  border-top-color: #0a6b5c;
  border-radius: 50%;
  flex-shrink: 0;
}

.content.ptr-busy .ptr-spinner,
.content.ptr-ready .ptr-spinner {
  animation: spin 0.7s linear infinite;
}

.tab-panel { display: none; padding: 12px; }
.tab-panel.active { display: block; }
.tab-panel.active.tab-enter {
  animation: tabEnter 0.28s var(--ease);
}

@keyframes tabEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

#screen-main {
  background: var(--bg);
}

/* AVATAR */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}

.avatar-sm { width: 44px; height: 44px; }
.avatar-lg { width: 96px; height: 96px; }

.avatar-upload {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  width: 96px;
  height: 96px;
}

.avatar-upload .avatar-lg {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--green-light);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* FEED — Twitter / X style */
#tab-feed {
  padding: 0;
  background: var(--surface);
}

#screen-main.feed-mode {
  background: var(--surface);
}

#screen-main.feed-mode .topbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

#screen-main.feed-mode .topbar .btn-icon:active {
  background: var(--hover);
}

#screen-main.feed-mode .nav-item.active {
  color: var(--green);
}

#screen-main.feed-mode .nav-item.active::before {
  background: var(--accent);
}

/* Status 24 jam — ring strip di Beranda */
.status-rail {
  margin: 10px 0 4px;
  padding: 0 4px;
}
.status-rail.hidden { display: none !important; }
.status-rail-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 12px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.status-rail-scroll::-webkit-scrollbar { display: none; }
.status-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 12px 6px;
  scrollbar-width: none;
}
.status-filter-row::-webkit-scrollbar { display: none; }
.status-filter {
  flex: 0 0 auto;
  border: 1px solid #c5d5cf;
  background: #fff;
  color: #0f1419;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.status-filter[aria-pressed="true"] {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}
.status-filter-empty {
  margin: 0 12px 8px;
  font-size: 0.8rem;
  color: #536471;
}
.status-muted-box {
  margin: 0 12px 8px;
  padding: 8px 10px 4px;
  border-radius: 12px;
  background: #f4f7f6;
}
.status-muted-box p {
  margin: 0 0 2px;
  font-size: 0.75rem;
  color: #536471;
}
.status-muted-person {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 8px 2px;
  font: inherit;
  color: #0f1419;
  text-align: left;
}
.status-muted-person span:last-child {
  color: #075e54;
  font-weight: 600;
  font-size: 0.85rem;
  flex: 0 0 auto;
}
.status-ring {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  max-width: 112px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.status-ring-avatar-wrap {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 3px;
  background: #dbe5e1;
  display: grid;
  place-items: center;
  position: relative;
}
.status-ring.has-status .status-ring-avatar-wrap {
  background: linear-gradient(135deg, #1d9bf0, #17bf63 55%, #f4a261);
}
.status-ring.has-status.is-seen .status-ring-avatar-wrap {
  background: #b7c4bf;
}
.status-ring.has-status.is-seen .status-ring-name {
  color: #8b9794;
}
.status-ring-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  background: #edf2f0;
}
.status-ring-plus,
.status-ring-plus-only {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green, #17bf63);
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
}
.status-ring-plus-only {
  position: static;
  width: 54px;
  height: 54px;
  font-size: 28px;
  line-height: 1;
  border: none;
  background: #edf2f0;
  color: #536471;
}
.status-ring-name {
  font-size: 0.72rem;
  color: #536471;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.status-ring-tag {
  font-size: 0.66rem;
  font-weight: 700;
  color: #075e54;
  max-width: 108px;
  text-align: center;
  line-height: 1.15;
}
.status-ring-line {
  font-size: 0.68rem;
  color: #0f1419;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}
.status-ring-count {
  font-size: 0.66rem;
  font-weight: 700;
  color: #536471;
  text-align: center;
}
.status-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.status-tag {
  border: 1px solid #c5d5cf;
  background: #fff;
  color: #0f1419;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.status-tag[aria-pressed="true"] {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}
.status-tag-note {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #536471;
}
.status-viewer-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #d8fff4;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
}

.status-compose-modal .status-compose-body {
  padding: 12px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.status-compose-body textarea {
  width: 100%;
  border: 1px solid #e5ebe9;
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  resize: none;
  min-height: 72px;
  flex-shrink: 0;
}
.status-image-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  padding-bottom: 4px;
  background: transparent;
}
.status-thumb {
  position: relative;
  flex: 0 0 auto;
}
.status-thumb img {
  width: auto;
  height: auto;
  max-width: 70vw;
  max-height: 28dvh;
  object-fit: fill;
  border-radius: 12px;
  display: block;
}
.status-video-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  background: #111;
}
.status-video-preview.hidden,
.status-image-preview.hidden { display: none !important; }
.status-video-preview video {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  background: #111;
  pointer-events: none;
}
.status-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.status-video-play::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #111;
}
.status-viewer-media.is-playing .status-video-play,
.status-video-preview.is-playing .status-video-play {
  opacity: 0;
}
.status-compose-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.status-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 0.9rem;
  color: #536471;
}
.status-compose-hint {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #3d4a45;
  white-space: normal;
}

.status-viewer-modal {
  position: relative;
  padding: 0;
  border: none;
  width: min(100vw, 420px);
  max-width: 100vw;
  height: min(92vh, 720px);
  max-height: 100vh;
  margin: auto;
  background: #0f1419;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.status-compose-body .btn-primary {
  width: 100%;
}
.status-viewer-modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
}
.status-viewer-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  padding: 10px 12px 0;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 42%, transparent 100%);
  padding-bottom: 28px;
  pointer-events: none;
}
.status-viewer-top .btn-icon,
.status-viewer-top .status-delete-btn,
.status-viewer-top .status-viewer-meta {
  pointer-events: auto;
}
.status-viewer-modal.is-locked .status-viewer-top,
.status-viewer-modal.is-locked .status-tap,
.status-viewer-modal.is-locked .status-unmute-btn,
.status-viewer-modal.is-locked .status-views-btn,
.status-viewer-modal.is-locked .status-reply-bar,
.status-viewer-modal.is-locked .status-more-menu {
  visibility: hidden;
  pointer-events: none;
}
.status-viewer-modal.is-holding .status-seg.active i,
.status-viewer-modal.is-replying .status-seg.active i,
.status-viewer-modal.is-viewing .status-seg.active i,
.status-viewer-modal.is-zoomed .status-seg.active i {
  animation-play-state: paused;
}
.status-viewer-modal.is-holding .status-viewer-meta,
.status-viewer-modal.is-holding .status-unmute-btn,
.status-viewer-modal.is-holding .status-views-btn,
.status-viewer-modal.is-holding .status-reply-bar,
.status-viewer-modal.is-holding .status-more-menu {
  visibility: hidden;
}
.status-viewer-media,
.status-tap {
  -webkit-touch-callout: none;
  user-select: none;
}
.status-viewer-segments {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.status-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.status-seg i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}
.status-seg.done i { width: 100%; }
.status-seg.active i {
  width: 100%;
  animation: status-seg-fill var(--status-seg-dur, 5s) linear forwards;
}
.status-seg.active i.status-seg-video {
  animation: none !important;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
}
@keyframes status-seg-fill {
  from { width: 0; }
  to { width: 100%; }
}
.status-viewer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-viewer-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.status-viewer-profile .avatar {
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.status-viewer-name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewer-time {
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.status-delete-btn { color: #fff !important; opacity: 0.9; }
.status-viewer-top .btn-icon {
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  min-width: 40px;
  min-height: 40px;
}
.status-viewer-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0f1419;
  touch-action: none;
}
.status-viewer-media img,
.status-viewer-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
  transform-origin: center center;
  transition: transform 0.18s ease;
}
.status-viewer-modal.is-pinching .status-viewer-media img,
.status-viewer-modal.is-pinching .status-viewer-media video {
  transition: none;
}
.status-viewer-modal.is-zoomed .status-seg.active i {
  animation-play-state: paused;
}
dialog.status-viewer-modal.modal.is-dragging {
  transition: none;
}
dialog.status-viewer-modal.modal.is-drag-back {
  transition: transform 0.2s ease;
}
.status-unmute-btn {
  position: absolute;
  right: 14px;
  bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px));
  z-index: 4;
  width: auto;
  min-height: 44px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.status-unmute-btn.hidden { display: none !important; }
.status-viewer-media.text-only {
  background: linear-gradient(160deg, #0f766e, #134e4a 45%, #0f1419);
}
.status-viewer-text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 28px;
  z-index: 4;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
}
.status-viewer-text a.status-text-link {
  pointer-events: auto;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.status-viewer-text.hidden { display: none !important; }
.status-viewer-modal:not(:has(#form-status-reply.hidden)) .status-viewer-text {
  bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 76px));
}
.status-tap {
  position: absolute;
  top: 56px;
  bottom: 0;
  width: 42%;
  border: none;
  background: transparent;
  z-index: 2;
  padding: 0;
  touch-action: none;
}
.status-tap-prev { left: 0; }
.status-tap-next { right: 0; }
.status-more-menu {
  position: absolute;
  top: 64px;
  right: 12px;
  z-index: 6;
  min-width: 160px;
  background: #fff;
  color: #0f1419;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.status-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: #fff;
  color: #0f1419;
  padding: 12px 14px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.status-more-menu button:active { background: #f3f4f6; }
.status-more-menu.hidden { display: none !important; }
.status-reply-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: center;
}
.status-reply-bar.hidden { display: none !important; }
.status-reply-bar input {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 999px;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;
  background: #fff !important;
  color: #0f1419 !important;
}
.status-reply-bar input::placeholder {
  color: #667781;
}
.status-reply-emojis {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.status-reply-emojis button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.status-reply-bar .btn { width: auto; min-width: 72px; }
.status-reaction-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 4;
  pointer-events: none;
  font-size: 5.6rem;
  line-height: 1;
  animation: statusReactionPop 0.85s ease forwards;
}
@keyframes statusReactionPop {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(0.35); }
  22% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  68% { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.92); }
}

.status-view-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e0245e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border: 2px solid #fff;
  z-index: 2;
}
.status-views-btn {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.status-views-btn strong { font-weight: 800; }
.status-views-btn.hidden { display: none !important; }
.status-views-btn:active { opacity: 0.85; }

.status-viewer-modal .status-forward-btn {
  flex: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
  padding: 4px 8px;
  font-size: 0.78rem;
}
.status-forward-modal {
  max-height: 70dvh;
}
.status-forward-external {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  padding: 10px 2px;
  border: none;
  border-bottom: 1px solid var(--border, #e5ebe9);
  background: none;
  font: inherit;
  font-weight: 650;
  color: #0a6b5c;
  text-align: left;
  cursor: pointer;
}
.status-forward-external:disabled {
  opacity: 0.55;
  cursor: wait;
}
.status-forward-search {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5ebe9);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: inherit;
}
.status-forward-list {
  padding: 0 12px 16px;
  overflow-y: auto;
  max-height: calc(70dvh - 168px);
}
.status-forward-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 4px;
  border: none;
  border-bottom: 1px solid var(--border, #e5ebe9);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.status-forward-person:last-child { border-bottom: none; }
.status-forward-person:active { background: #f3f4f6; }
.status-forward-person span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewers-modal {
  max-height: 70dvh;
}
.status-viewers-list {
  padding: 8px 12px 20px;
  overflow-y: auto;
  max-height: calc(70dvh - 60px);
}
.status-viewers-empty {
  margin: 18px 8px;
  text-align: center;
}
.status-viewer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--border, #e5ebe9);
}
.status-viewer-row:last-child { border-bottom: none; }
.status-viewer-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.status-viewer-person {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.status-viewer-row-info strong {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewer-emoji {
  margin-left: auto;
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
}
.status-viewer-emoji + .status-viewer-when {
  margin-left: 8px;
}
.status-viewer-when {
  margin-left: auto;
  flex: none;
  font-size: 0.8rem;
  color: var(--muted, #667085);
  white-space: nowrap;
}

.tweet-compose {
  display: flex;
  gap: 12px;
  margin: 12px 14px 8px;
  padding: 14px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04);
}

.tweet-compose-body {
  flex: 1;
  min-width: 0;
}

.tweet-compose textarea {
  width: 100%;
  border: none;
  resize: none;
  font-family: inherit;
  font-size: 1.05rem;
  outline: none;
  min-height: 40px;
  max-height: 140px;
  line-height: 1.4;
  background: transparent;
  color: var(--text);
  overflow-y: auto;
}

.tweet-compose textarea::placeholder {
  color: var(--muted);
}

.compose-tip-focus {
  display: none;
  margin: 0 0 4px;
  font-size: 0.72rem;
  color: #8b98a5;
}
.compose-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.compose-price-row.hidden { display: none !important; }
.compose-price-row span {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: #536471;
}
.compose-price-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid #eff3f4;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 700;
  background: #f7f9f9;
  color: inherit;
}
.compose-cod {
  margin-top: 8px;
  border: 1px solid #c5d0cb;
  background: transparent;
  color: #3d4f48;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.compose-cod.is-on {
  background: #0a6b5c;
  border-color: #0a6b5c;
  color: #fff;
}
.compose-cod.hidden { display: none !important; }
#edit-post-cod { align-self: flex-start; }

.compose-tip-focus.visible {
  display: block;
}

.compose-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.compose-template-chips.hidden {
  display: none !important;
}

.compose-tpl-btn {
  border: 1px solid #cfd8d4;
  background: #f7f9f8;
  color: #0a6b5c;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 7px 11px;
  border-radius: 16px;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 34px;
}

.compose-tpl-btn[data-tpl="fill"] {
  background: #0a6b5c;
  border-color: #0a6b5c;
  color: #fff;
}

.compose-tpl-btn:active {
  transform: scale(0.98);
  opacity: 0.92;
}

.compose-more-panel {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eff3f4;
}

.compose-more-panel.hidden { display: none !important; }

.compose-more-panel .compose-cat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #536471;
}

.compose-more-panel select {
  flex: 1;
  border: 1px solid #eff3f4;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  background: #f7f9f9;
}

.compose-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f5e9;
  color: #075e54;
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 100%;
}

.compose-place-chip.hidden { display: none !important; }

.compose-place-ico { flex-shrink: 0; }

.compose-place-clear {
  border: none;
  background: transparent;
  color: #075e54;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0 0 2px;
}

.compose-place-block {
  margin-top: 10px;
}

.compose-place-heading {
  display: block;
  font-size: 0.8rem;
  color: #536471;
  margin-bottom: 6px;
}

.compose-place-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.place-chip {
  border: 1px solid #cfd9de;
  background: #fff;
  color: #0f1419;
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.place-chip.active {
  border-color: #075e54;
  background: #e8f5e9;
  color: #075e54;
  font-weight: 700;
}

.compose-place-custom {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #eff3f4;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #f7f9f9;
}

.compose-place-custom.hidden { display: none !important; }

.btn-attach-video.has-place {
  color: #075e54;
}

.feed-soft-bar:empty { display: none; }

.soft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid transparent;
}

.soft-banner.hidden { display: none !important; }

.soft-banner p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #536471;
  flex: 1;
  min-width: 0;
}

.soft-banner-sub {
  color: #6b7280;
  font-weight: 400;
}

.soft-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.soft-banner .btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  touch-action: manipulation;
}

.soft-banner .btn-ghost {
  border-color: transparent;
  background: rgba(16, 32, 25, 0.06);
  color: var(--text);
}

.soft-banner .btn-ghost:active {
  background: rgba(16, 32, 25, 0.12);
}

.soft-banner .btn-primary {
  box-shadow: none;
}

@media (max-width: 400px) {
  .soft-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .soft-banner-actions {
    width: 100%;
  }

  .soft-banner-actions .btn,
  .soft-banner-actions a.btn {
    flex: 1;
  }
}

.soft-banner-green {
  background: #f7f9f9;
  border-bottom-color: #eff3f4;
}

.soft-banner-amber {
  background: #fafafa;
  border-bottom-color: #eff3f4;
}

.soft-banner-quiet {
  padding-top: 8px;
  padding-bottom: 8px;
}

.soft-banner-quiet p {
  font-size: 0.8rem;
}

.soft-banner-blue {
  background: #f7f9f9;
  border-bottom-color: #eff3f4;
}

.soft-banner-invite {
  background: #f7f9f9;
  border-bottom-color: #eff3f4;
}

.video-preview {
  position: relative;
  margin: 10px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  max-height: 280px;
}

.image-preview {
  position: relative;
  margin: 10px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  background: #f0f2f5;
  max-height: 280px;
}

.image-preview.is-multi {
  max-height: none;
}

.preview-image-grid img {
  width: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
}

.preview-image-grid.is-multi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.preview-image-grid.is-multi img {
  height: 140px;
  max-height: none;
  object-fit: cover;
}

.compose-attachs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tweet-image-wrap {
  border-radius: 0;
  overflow: hidden;
  margin: 0 0 8px;
  border: none;
  background: #f3f5f4;
}

.tweet-image {
  width: 100%;
  height: auto;
  max-height: 560px;
  display: block;
  object-fit: scale-down;
  object-position: center;
  background: transparent;
  cursor: zoom-in;
}

.tweet-image-wrap.is-album {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: #e8ecf0;
}

.tweet-image-wrap.is-album .tweet-image {
  width: 100%;
  height: 168px;
  max-height: none;
  object-fit: cover;
}

.tweet-image-wrap.is-album.count-2 .tweet-image,
.tweet-image-wrap.is-album.count-3 .tweet-image:first-child {
  height: 240px;
}

.tweet-image-wrap.is-album.count-3 .tweet-image:first-child {
  grid-column: 1 / -1;
}

.video-preview video {
  width: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
  background: #000;
}

.btn-remove-video {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.75);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.tweet-compose:not(.is-open) .tweet-compose-bar {
  display: none;
}
.tweet-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #eff3f4;
  margin-top: 4px;
}

.btn-attach-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--green);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-attach-video:active {
  background: rgba(10, 107, 92, 0.1);
}

.btn-tweet {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.88rem;
  min-width: 0;
  width: auto;
  white-space: nowrap;
  box-shadow: none;
}

.btn-tweet:disabled {
  opacity: 0.5;
}

.btn-tweet:active:not(:disabled) {
  background: var(--green-deep);
  transform: scale(0.98);
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 24px;
  background: var(--surface);
}

.feed-older-status {
  text-align: center;
  margin: 0;
  padding: 4px 16px 24px;
  font-size: 13px;
}

.tweet {
  display: block;
  position: relative;
  padding: 12px 0 4px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #eef1f0;
  background: var(--surface);
  z-index: 1;
  overflow: visible;
  animation: tweetIn 0.22s var(--ease) both;
  box-shadow: none;
}

.tweet.menu-open {
  z-index: 60;
}

@keyframes tweetIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.heart-burst {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  color: #f91880;
  font-size: 2.4rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: heartBurst 0.7s var(--ease) forwards;
  text-shadow: 0 4px 12px rgba(249, 24, 128, 0.35);
}

@keyframes heartBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25% { opacity: 1; transform: translate(-50%, -55%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1); }
}

.skel-tweet {
  display: flex;
  gap: 14px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid #eff3f4;
  background: #fff;
}

.skel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #eef2f0 25%, #f7f9f8 50%, #eef2f0 75%);
  background-size: 200% 100%;
  animation: skelShine 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.skel-body { flex: 1; min-width: 0; }

.skel-line {
  height: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #eef2f0 25%, #f7f9f8 50%, #eef2f0 75%);
  background-size: 200% 100%;
  animation: skelShine 1.2s ease-in-out infinite;
}

.skel-line.w45 { width: 45%; }
.skel-line.w72 { width: 72%; }

.skel-actions {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}

.skel-actions span {
  width: 36px;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f0 25%, #f7f9f8 50%, #eef2f0 75%);
  background-size: 200% 100%;
  animation: skelShine 1.2s ease-in-out infinite;
}

.skel-chat {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eff3f4;
}

@keyframes skelShine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.tweet:active {
  background: #f7faf9;
}

.tweet-avatar {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tweet-avatar .avatar {
  width: 36px;
  height: 36px;
  box-shadow: none;
}

.tweet-body {
  flex: 1;
  min-width: 0;
}

.tweet-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  margin: 0 8px 8px 58px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.tweet-name {
  font-weight: 800;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tweet-meta .tweet-handle,
.tweet-meta .tweet-follow-btn {
  display: none;
}
.tweet-meta .tweet-time {
  flex-shrink: 0;
}
.tweet-edited {
  flex-shrink: 0;
  font-style: italic;
  font-size: 0.75rem;
  color: #6d7c75;
}

.tweet-handle,
.tweet-dot,
.tweet-time {
  color: #6d7c75;
}
button.tweet-time {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.tweet-more {
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}

.tweet-more-btn {
  border: none;
  background: none;
  color: #6d7c75;
  font-size: 1.25rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}

.tweet-more-btn:active,
.tweet-more-btn[aria-expanded="true"] {
  background: rgba(10, 107, 92, 0.08);
  color: #0a6b5c;
}

.tweet-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 70;
  min-width: 168px;
  max-height: min(70vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  background: #fff;
  border: 1px solid #e6eceb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);
}

.tweet-more-menu.hidden { display: none !important; }

.tweet-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f1419;
  cursor: pointer;
  font-family: inherit;
}

.tweet-menu-item:active {
  background: #f4f7f6;
}

.tweet-menu-item.delete-btn { color: #f4212e; }
.tweet-menu-item.block-author-btn { color: #c62828; }
.tweet-menu-item.report-post-btn { color: #536471; }
.tweet-menu-item.pin-btn { color: #075e54; }
.tweet-menu-item.pin-btn.pinned { color: #e65100; }

.tweet-text {
  font-size: 0.95rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f1419;
  margin: 0 16px 10px;
}
.tweet-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.tweet-expand {
  display: block;
  margin: -4px 16px 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--green, #0a6b5c);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.tweet-video-wrap {
  border-radius: 0;
  overflow: hidden;
  margin: 0 0 8px;
  background: #111;
  border: none;
}
.tweet-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.video-still {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #111;
}
.msg-video-wrap.is-playing .video-still,
.status-video-preview.is-playing .video-still,
.status-viewer-media.is-playing .video-still {
  opacity: 0;
}
.tweet-video-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
  background: transparent;
  cursor: pointer;
}
.tweet-video-open::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
.tweet-video-open::after {
  content: "";
  position: absolute;
  left: calc(50% + 2px);
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #111;
}
.tweet-video-dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.tweet-video-dur[hidden] { display: none !important; }

.tweet-video {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  background: #111;
  pointer-events: none;
}
.tweet-video::-webkit-media-controls,
.tweet-video::-webkit-media-controls-enclosure,
.tweet-video::-webkit-media-controls-panel,
.tweet-video::-webkit-media-controls-play-button,
.tweet-video::-webkit-media-controls-start-playback-button,
.tweet-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tweet-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: 2px 2px 6px;
  max-width: none;
}

.tweet-action.chat-post-btn {
  color: #1d9bf0;
}
.tweet-action.call-post-btn {
  color: #0a6b5c;
}

.tweet-action {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: #6b7c74;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0;
  border-radius: 10px;
  min-height: 40px;
  min-width: 0;
  touch-action: manipulation;
}
.tweet-action.share-post-btn span,
.tweet-action.bookmark-btn span,
.tweet-action.repost-btn span,
.tweet-action.chat-post-btn span,
.tweet-action.call-post-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tweet-action:active {
  background: rgba(10, 107, 92, 0.1);
}

.tweet-action.liked {
  color: #f91880;
}

.tweet-action.liked:active {
  background: rgba(249, 24, 128, 0.1);
}

.tweet-action.bookmarked {
  color: #075e54;
}

.tweet-action.bookmarked:active {
  background: rgba(7, 94, 84, 0.1);
}

.tweet-action svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#tab-feed .empty-state {
  padding: 48px 24px;
  color: #536471;
}

.feed-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid #eff3f4;
  padding: 4px 8px 4px 4px;
}
.feed-tabs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  border-right: 1px solid #e6eeea;
  padding: 0 8px;
}

.feed-tab {
  flex: none;
  border: 1px solid #e2e8e5;
  background: #f7f9f8;
  color: #3d4a45;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
  touch-action: manipulation;
}

.feed-tab.active {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}

.category-filters {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  margin: 0;
  padding: 4px 4px 4px 0;
  border-bottom: none;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  scroll-padding-inline: 8px;
}

.category-filters::-webkit-scrollbar {
  display: none;
}

.cat-filter {
  border: 1px solid #e2e8e5;
  background: #f7f9f8;
  color: #3d4a45;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 34px;
  touch-action: manipulation;
}

.cat-filter.active {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}

.listing-filters {
  display: contents;
}

.listing-filters.hidden {
  display: none;
}

.listing-filter {
  border: 1px solid #dbe7e2;
  background: #f0f7f4;
  color: #2f4a40;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 34px;
  touch-action: manipulation;
}

.listing-filter.active {
  background: #1565c0;
  border-color: #1565c0;
  color: #fff;
}

.listing-sold-badge {
  display: inline-block;
  margin: 0 16px 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #eceff1;
  color: #546e7a;
  letter-spacing: 0.02em;
}

.tweet-listing-sold {
  opacity: 0.72;
}

.tweet-listing-sold .tweet-image,
.tweet-listing-sold .tweet-video {
  filter: grayscale(0.35);
}

.compose-cat-label {
  display: inline-flex;
  align-items: center;
}

.compose-cat-label select {
  appearance: none;
  border: 1px solid #cfd9de;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23536471' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: #0f1419;
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 32px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cat-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 0;
  background: #e8f5e9;
  color: #075e54;
  cursor: pointer;
}
.cat-badge:active { opacity: 0.7; }

.tweet-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 16px 8px;
}

.place-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f3f4;
  color: #536471;
}
.tweet-area {
  cursor: pointer;
}
.tweet-area:active {
  background: #e3f2fd;
  color: #1565c0;
}

.cat-badge.cat-keamanan { background: #fff3e0; color: #e65100; }
.cat-badge.cat-bantuan { background: #e8f5e9; color: #2e7d32; }
.cat-badge.cat-jualbeli { background: #e3f2fd; color: #1565c0; }
.cat-badge.cat-loker { background: #fff8e1; color: #f57f17; }
.cat-badge.cat-loker-stale {
  background: #f5f5f5;
  color: #757575;
}
.cat-badge.cat-loker-expired {
  background: #eeeeee;
  color: #9e9e9e;
  text-decoration: line-through;
}
.cat-badge.cat-acara { background: #f3e5f5; color: #6a1b9a; }

.tweet-follow-btn {
  flex-shrink: 0;
  border: 1px solid #075e54;
  background: #fff;
  color: #075e54;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 2px;
  line-height: 1.3;
}

.tweet-follow-btn:active {
  background: #e7f8f5;
}

.tweet-follow-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.tweet-loker-stale {
  opacity: 0.88;
}

.tweet-loker-stale .tweet-text {
  color: #536471;
}

.tweet-loker-expired {
  opacity: 0.72;
}

.compose-tip {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
}

.compose-draft-hint {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: #075e54;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.compose-draft-hint.hidden {
  display: none !important;
}

.bookmark-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid #eff3f4;
}

.bookmark-item .bookmark-open {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  border: none;
  background: #fff;
  padding: 10px 4px 10px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}

.bookmark-item .bookmark-open:active {
  background: #eef6f3;
}

.bookmark-item .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bookmark-snippet {
  font-size: 0.82rem;
  color: #536471;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bookmark-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eff3f4;
}

.bookmark-item .bookmark-remove {
  flex-shrink: 0;
  align-self: center;
  min-width: 36px;
  color: #536471;
}

.community-tip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 12px 16px;
  background: #e8f5e9;
  border-bottom: 1px solid #c8e6c9;
}

.community-tip.hidden { display: none !important; }

.community-tip strong {
  display: block;
  font-size: 0.9rem;
  color: #1b5e20;
}

.community-tip p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: #33691e;
  line-height: 1.35;
}

.daily-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 12px 16px;
  background: #e3f2fd;
  border-bottom: 1px solid #bbdefb;
}

.daily-nudge.hidden { display: none !important; }

.daily-nudge strong {
  display: block;
  font-size: 0.9rem;
  color: #0d47a1;
}

.daily-nudge p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: #1565c0;
}

.daily-nudge-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.stat-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stat-link:active { opacity: 0.7; }

.notifs-list,
.people-list {
  max-height: min(70dvh, 480px);
  overflow-y: auto;
  padding: 8px 12px 16px;
}

.notif-item,
.people-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  border: none;
  background: #fff;
  border-bottom: 1px solid #eff3f4;
  padding: 14px 10px;
  font: inherit;
  cursor: pointer;
  min-height: 56px;
  border-radius: 10px;
  touch-action: manipulation;
  transition: background 0.15s var(--ease);
}

.notif-item:active,
.people-item:active {
  background: #eef6f3;
}

.notif-item.unread {
  background: #f0faf4;
}

.notif-item .notif-msg {
  flex: 1;
  font-size: 0.92rem;
  color: #0f1419;
  line-height: 1.35;
}

.notif-time {
  font-size: 0.72rem;
  white-space: nowrap;
}

.notif-item.is-invite {
  align-items: flex-start;
  gap: 10px;
  cursor: default;
}
.notif-invite-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--elevated, #fafbfa);
}
.notif-invite-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notif-item.is-invite .notif-msg { flex: none; }
.notif-invite-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.notif-invite-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.notif-item.is-invite .notif-time { margin-left: auto; flex: none; }
.notif-invite-line {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted, #667781);
}
.notif-invite-group {
  font-weight: 700;
  color: var(--text, #0f1419);
}
.notif-invite-line strong {
  font-weight: 700;
  color: var(--text, #102019);
}
.notif-invite {
  display: flex;
  gap: 8px;
  width: auto;
  margin-top: 8px;
}
.notif-invite .btn {
  width: auto;
  flex: none;
  min-height: 32px;
}

.people-item .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onboard-values {
  margin: 0 0 14px;
  padding: 12px;
  background: #f0faf4;
  border-radius: 12px;
  border: 1px solid #c8e6c9;
}

.onboard-values p {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.onboard-values ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.45;
}

.feed-suggest-box {
  text-align: left;
  margin: 12px 0 16px;
  padding: 0 4px;
}

.chat-suggest-box {
  text-align: left;
  margin: 8px 0 14px;
  padding: 0;
}

.empty-chat-card .suggest-heading {
  text-align: left;
}

.suggest-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f1419;
  margin: 0 0 8px;
  text-align: center;
}

.brand h1 {
  font-size: 1.45rem;
  line-height: 1.2;
}

.brand p {
  font-size: 0.85rem;
}

.brand-disclaimer {
  margin-top: 10px !important;
  font-size: 0.72rem !important;
  color: #8696a0 !important;
  line-height: 1.35;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.btn-open-app {
  width: 100%;
  margin: 0 0 14px;
}

.open-app-banner {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: #075e54;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.open-app-banner.hidden {
  display: none !important;
}

.open-app-banner-strong {
  background: #064c44;
}

.open-app-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.open-app-banner-text strong {
  font-size: 0.88rem;
  font-weight: 700;
}

.open-app-banner-text span {
  font-size: 0.75rem;
  opacity: 0.92;
  line-height: 1.3;
}

.open-app-banner-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.open-app-banner-actions .btn-sm {
  white-space: nowrap;
  background: #fff;
  color: #075e54;
  border: none;
  font-weight: 700;
  min-height: 36px;
  padding: 0 12px;
}

.open-app-banner-actions .btn-icon {
  color: #fff;
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}

html.native-app .open-app-banner {
  display: none !important;
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: #536471;
  font-size: 0.9rem;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #eff3f4;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.nav-icon-wrap { position: relative; display: inline-flex; }

.nav-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  background: #f4212e;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Secondary = outline; primary = solid — sama pola profil */
.btn-outline {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  box-shadow: none;
  width: auto;
  font-weight: 700;
}

.btn-outline:active {
  transform: scale(0.98);
  background: rgba(10, 107, 92, 0.06);
}

#screen-main.feed-mode .btn-outline {
  color: var(--green);
  border-color: var(--green);
}

.btn-copied {
  background: #e8f5f1 !important;
  color: #0a6b5c !important;
  border-color: #0a6b5c !important;
  animation: btnCopiedPulse 0.45s var(--ease);
}

.profile-invite-link.btn-copied {
  background: #e8f5f1;
  box-shadow: inset 0 0 0 2px #0a6b5c;
}

@keyframes btnCopiedPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.btn-projector {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-projector svg { width: 16px; height: 16px; }

#screen-projector {
  background: #000;
  z-index: 200;
}

.projector-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--safe-top) 12px 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.projector-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#projector-video {
  width: 100%;
  max-height: 75dvh;
  background: #000;
}

.projector-caption {
  color: #fff;
  margin-top: 16px;
  text-align: center;
  font-size: 1rem;
  max-width: 90%;
}

.btn-attach-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--green-light);
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-attach-chat.btn-attach-plus {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(10, 107, 92, 0.35);
}

.btn-attach-chat.btn-attach-plus:active {
  transform: scale(0.96);
  opacity: 0.92;
}

.btn-attach-chat.btn-voice {
  color: #fff;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(7, 94, 84, 0.35);
}

.btn-attach-chat.btn-voice:active {
  transform: scale(0.96);
  opacity: 0.92;
}

.btn-compose-action {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: none;
  cursor: pointer;
}

.btn-compose-action.btn-voice {
  color: #fff;
  background: var(--green);
  box-shadow: 0 2px 6px rgba(7, 94, 84, 0.35);
}

.btn-compose-action.hidden {
  display: none !important;
}

/* Jangan pakai display:none / hidden — WebView Android sering gagal buka gallery */
.file-input-native {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.01 !important;
  overflow: hidden !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: none !important;
  min-height: 0 !important;
  pointer-events: none;
}

.msg-image {
  width: auto;
  max-width: min(280px, 72vw);
  max-height: 280px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 4px;
  cursor: zoom-in;
  flex-shrink: 0;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.06);
}

.msg-image-wrap {
  position: relative;
  display: block;
  width: fit-content;
  max-width: min(280px, 72vw);
  margin-bottom: 4px;
  flex-shrink: 0;
  line-height: 0;
}

.msg-image-wrap .msg-image {
  margin-bottom: 0;
  max-width: 100%;
}

.msg-album {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: min(260px, 72vw);
  margin-bottom: 4px;
  position: relative;
}
.msg-album-1 { grid-template-columns: 1fr; }
.msg-album-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin: 0;
  border-radius: 6px;
}
.msg-album-img:nth-child(n+5) { display: block; }
.msg-album-more {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.album-preview {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100%);
  max-height: 70vh;
  z-index: 960;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 12px 14px 16px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.album-preview.hidden { display: none; }
.album-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.album-preview-head p { margin: 0; font-weight: 700; }
.album-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  overflow: auto;
}
.album-preview-cell { position: relative; }
.album-preview-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.album-preview-cell video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background: #111;
  pointer-events: none;
}
.album-preview-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.album-preview-play::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 11px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #111;
}
.album-caption {
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #e5ebe9;
  border-radius: 10px;
  font: inherit;
  resize: none;
  min-height: 44px;
  background: #f7f9f8;
}
.msg-forwarded {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 650;
  font-style: italic;
  color: #667781;
  margin: 0 0 4px;
}
.message.mine .msg-forwarded { color: #4a6b62; }
.msg-caption {
  margin-top: 4px;
  padding: 0 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-video-album .msg-album-video {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin: 0;
  border-radius: 6px;
  background: #111;
}
.msg-album-video:nth-child(n+5) { display: none; }
.album-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}
.album-preview-edit {
  position: absolute;
  left: 4px;
  bottom: 4px;
  border: none;
  border-radius: 12px;
  padding: 4px 10px;
  background: #0a6b5c;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.lb-edit-chip.is-selected .lb-chip-resize {
  display: block;
}
.lb-chip-resize {
  display: none;
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0a6b5c;
  cursor: nwse-resize;
  touch-action: none;
}
#btn-lb-chip-delete.hidden { display: none !important; }
.forward-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(70dvh, 520px);
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 6px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.28);
}
.forward-grab {
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: #d5ddd9;
  margin: 2px auto 8px;
}
.forward-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.forward-head .msg-action-title {
  margin: 0;
  text-align: left;
  font-size: 1rem;
  color: #111;
}
.forward-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f0f2f1;
  color: #333;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.forward-external {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 2px;
  border: none;
  border-bottom: 1px solid #eff3f4;
  background: none;
  font: inherit;
  font-weight: 650;
  color: #0a6b5c;
  cursor: pointer;
  text-align: left;
}
.forward-external:disabled {
  opacity: 0.55;
  cursor: wait;
}
.forward-external-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e7f3f0;
  color: #0a6b5c;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.forward-list {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding-bottom: 4px;
}
.forward-sheet.has-pick .forward-list {
  padding-bottom: 68px;
}
.forward-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: none;
  background: none;
  padding: 12px 4px;
  border-bottom: 1px solid #eff3f4;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  width: 100%;
}
.forward-preview {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
}
.forward-preview img,
.forward-preview video {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  background: #111;
}

.forward-text-preview {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f4f6f5;
  color: #102019;
  font-size: 0.9rem;
  line-height: 1.4;
  max-height: 4.2em;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.forward-preview-more {
  font-weight: 700;
  color: #536471;
  font-size: 0.85rem;
}
.forward-search {
  width: 100%;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid #e5ebe9;
  border-radius: 10px;
  font: inherit;
  background: #f7f9f8;
}
.forward-fab {
  position: absolute;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: #0a6b5c;
  color: #fff;
  box-shadow: 0 4px 14px rgba(10, 107, 92, 0.4);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.forward-fab[disabled] { display: none !important; }
.forward-fab-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #fff;
  color: #0a6b5c;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.forward-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.forward-name { flex: 1; min-width: 0; }
.forward-item.hidden { display: none; }
.forward-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #9aa7a2;
  flex-shrink: 0;
  margin-left: auto;
  display: grid;
  place-items: center;
}
.forward-item.on .forward-check {
  border-color: #0a6b5c;
  background: #0a6b5c;
  box-shadow: none;
}
.forward-item.on .forward-check::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.forward-item.on { color: #0a6b5c; }

.msg-image-wrap.media-wrap-failed {
  min-width: 140px;
  min-height: 100px;
  background: rgba(15, 40, 35, 0.06);
  border-radius: 10px;
}

.msg-image-wrap .media-retry {
  min-width: 7.5rem;
  padding: 10px 14px;
  font-weight: 700;
  background: #075e54;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.msg-image-pending,
.message.pending .msg-image {
  opacity: 0.72;
  filter: saturate(0.9);
}

.message.pending {
  opacity: 0.92;
}

.message.queued {
  opacity: 0.95;
  outline: 1px dashed rgba(10, 107, 92, 0.35);
}

.message.queued .time,
.message.queued .time-text {
  color: #b7cfc8;
  font-weight: 650;
}

.message.failed {
  outline: 1px solid rgba(229, 57, 53, 0.35);
  background: rgba(229, 57, 53, 0.06);
}

.message.failed .time-text {
  color: var(--danger);
  font-weight: 700;
}

.msg-fail-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.btn-msg-retry,
.btn-msg-discard {
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.btn-msg-retry {
  background: var(--green);
  color: #fff;
}

.btn-msg-discard {
  background: rgba(229, 57, 53, 0.12);
  color: var(--danger);
  border: 1px solid rgba(229, 57, 53, 0.4);
}

.message.mine .btn-msg-discard {
  background: rgba(255, 255, 255, 0.14);
  color: #ffcdd2;
  border-color: rgba(255, 205, 210, 0.45);
}

.msg-audio-local {
  opacity: 0.85;
  font-size: 0.85rem;
  font-weight: 600;
}

.chat-upload-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #e8f5f1;
  border-top: 1px solid #cfe8e1;
  color: var(--green-deep);
  font-size: 0.82rem;
  font-weight: 600;
}

.chat-upload-status.hidden { display: none !important; }

.chat-upload-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(10, 107, 92, 0.25);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: chatUploadSpin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes chatUploadSpin {
  to { transform: rotate(360deg); }
}

.msg-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  max-width: 250px;
  padding: 2px 0 2px;
  position: relative;
}

.audio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audio-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  flex: 1;
  position: relative;
}

.audio-knob {
  display: none;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #075e54;
  transform: translateY(-50%);
  pointer-events: none;
}
.msg-audio.playing .audio-knob { display: block; }

.audio-wave i {
  display: block;
  width: 3px;
  flex: 1 0 3px;
  max-width: 3px;
  height: 10px;
  border-radius: 2px;
  background: rgba(7, 94, 84, 0.22);
}

.audio-wave i.is-heard {
  background: #1f8a72;
}

.message.mine .audio-wave i {
  background: rgba(7, 94, 84, 0.28);
}
.message.mine .audio-wave i.is-heard {
  background: #1f8a72;
}
html[data-theme="dark"] .message.mine .audio-wave i {
  background: rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .message.mine .audio-wave i.is-heard {
  background: #fff;
}

.audio-dur {
  font-size: 0.72rem;
  opacity: 0.85;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.msg-audio-el {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.btn-audio-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #075e54;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-left: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.btn-audio-rate {
  display: none;
  flex: 0 0 auto;
  border: none;
  background: rgba(7, 94, 84, 0.12);
  color: #075e54;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 10px;
  padding: 4px 6px;
  cursor: pointer;
}

.msg-audio.playing .btn-audio-rate { display: inline-block; }

html[data-theme="dark"] .message.theirs .btn-audio-rate {
  background: rgba(255, 255, 255, 0.14);
  color: #e9edef;
}

.message.mine .btn-audio-play {
  background: #fff;
  color: #075e54;
}

.btn-chat-voice.recording,
#btn-chat-voice.recording {
  color: #e53935;
}

.voice-recording-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: #fff5f5;
  border-top: 1px solid #ffcdd2;
  flex-shrink: 0;
}

.voice-recording-bar.hidden { display: none !important; }

.voice-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e53935;
  animation: voice-blink 1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes voice-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

#voice-rec-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}

.voice-rec-hint {
  flex: 1;
  color: #c62828;
  font-size: 0.9rem;
}

.message-compose.recording-hidden {
  display: none !important;
}

.chat-unread .name { font-weight: 700; }
.unread-preview { font-weight: 600; color: #2a3732; }
.chat-item .preview.has-draft { font-weight: 400; font-style: italic; }
.chat-draft-label { color: var(--green); font-style: normal; font-weight: 700; }
.chat-remind-label { color: var(--green); font-weight: 700; }

.chat-blocked {
  opacity: 0.78;
}

.blocked-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b71c1c;
  background: #ffebee;
  vertical-align: middle;
}

.request-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0a6b5c;
  background: #e7f6f2;
  vertical-align: middle;
}

.request-tag.is-waiting {
  color: #6b5b00;
  background: #fff6d6;
}

.chat-section-label {
  padding: 10px 14px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-tools-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 8px 12px 4px;
}
.chat-tools-row .kabar-entry {
  width: 100%;
  margin: 0;
}
.chat-list-filter {
  display: flex;
  gap: 6px;
  padding: 0;
}
#tab-chat:has(#chat-list.searching) .chat-list-filter { display: none; }
.chat-filter-btn {
  border: 1px solid #d5ddd9;
  background: #fff;
  color: #3d4a45;
  border-radius: 16px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-filter-btn.is-on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
html[data-theme="dark"] .chat-filter-btn {
  background: #1f2c34;
  color: #e9edef;
  border-color: #2a3942;
}
html[data-theme="dark"] .chat-filter-btn.is-on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.chat-archive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid #eef2f0;
  background: var(--surface);
  color: #0a6b5c;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}

.chat-archive-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0a6b5c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.chat-item.chat-request {
  background: rgba(10, 107, 92, 0.04);
}

.chat-request-banner {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e9edef);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-request-banner.hidden,
.chat-request-waiting.hidden {
  display: none !important;
}

.chat-request-banner-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text, #111b21);
}

.chat-request-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.chat-request-actions .btn {
  width: auto;
  min-width: 6.5rem;
}

.chat-request-waiting {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--muted);
  background: rgba(10, 107, 92, 0.06);
  border-bottom: 1px solid var(--border, #e9edef);
  text-align: center;
}

.chat-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}
.chat-meta-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-marks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.chat-time {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.chat-time.is-unread {
  color: #128c7e;
  font-weight: 700;
}
.chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.unread-dot {
  display: none;
}

.profile-stats { margin: 8px 0; }

.profile-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  position: relative;
  z-index: 5;
}

.profile-actions .btn {
  position: relative;
  z-index: 6;
  pointer-events: auto;
  min-height: 42px;
  flex: 1 1 0;
  max-width: none;
  border-radius: 12px;
  box-shadow: none;
  touch-action: manipulation;
}
.profile-actions .btn-primary {
  background: var(--green);
  border-color: var(--green);
}

.profile-actions .btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.profile-action-hint {
  margin: 8px 12px 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
}

.profile-links {
  margin: 18px 0 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
}

.profile-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: transparent;
  font: inherit;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}

.profile-link-row:last-child {
  border-bottom: none;
}

.profile-link-row:active {
  background: rgba(10, 107, 92, 0.06);
}

.profile-theme-row {
  cursor: pointer;
}
.profile-theme-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--green, #0a6b5c);
}

.profile-fold {
  margin: 12px 0 0;
  border: none;
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  overflow: hidden;
}
.profile-links > .profile-fold {
  margin: 0;
  border-radius: 0;
}
.profile-links > .profile-fold > .profile-fold-summary {
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.profile-links > .profile-fold:last-child:not([open]) > .profile-fold-summary {
  border-bottom: none;
}
.profile-fold-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  min-height: 48px;
}
.profile-fold-summary::-webkit-details-marker { display: none; }
.profile-fold[open] > .profile-fold-summary {
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.profile-fold-body {
  padding: 12px 14px 14px;
}
.profile-form .profile-fold-body label.quiet-hours-label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--text);
  font-weight: 650;
}
.profile-fold-body .quiet-hours-label + .field-hint {
  margin: 4px 36px 16px 0;
}
.profile-fold-body > .field-hint {
  margin: 4px 0 16px 0;
}
.profile-fold-body .profile-danger-zone {
  margin-top: 14px;
}
.profile-fold-body .btn-enable-notif,
#profile-notif-fold .btn {
  margin-top: 0;
}

.profile-link-row.hidden {
  display: none !important;
}

.profile-link-row:disabled,
.profile-link-row.is-on {
  opacity: 0.85;
  cursor: default;
}

.profile-email-row {
  cursor: default;
  pointer-events: none;
}

.profile-email-row .profile-link-meta {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.profile-link-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.profile-link-meta {
  font-size: 0.82rem;
  flex-shrink: 0;
}

.notif-channel-details {
  margin: 10px 0 0;
  text-align: left;
}

.notif-channel-details.hidden {
  display: none !important;
}

.notif-channel-summary {
  cursor: pointer;
  font-size: 0.8rem;
  list-style: none;
}

.notif-channel-summary::-webkit-details-marker {
  display: none;
}

.notif-channel-hint {
  margin: 8px 0 0;
  text-align: left;
  line-height: 1.4;
  font-size: 0.8rem;
}

.bird-sound-row {
  margin: 12px 0 0;
}

.bird-sound-toggle-label {
  margin-bottom: 10px;
}

.bird-sound-row.is-muted .bird-sound-picker,
.bird-sound-row.is-muted .bird-sound-title,
.bird-sound-row.is-muted .bird-sound-meta {
  opacity: 0.45;
  pointer-events: none;
}

.bird-sound-title {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f1419;
}

.bird-sound-meta {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.bird-sound-picker {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bird-sound-picker::-webkit-scrollbar { display: none; }

.bird-sound-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid #cfd9de;
  background: #fff;
  color: #0f1419;
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.bird-sound-btn.active {
  border-color: #075e54;
  background: #e8f5e9;
  color: #075e54;
  font-weight: 700;
}

.bird-sound-btn:active {
  transform: scale(0.98);
}

.quiet-hours-row {
  margin: 12px 0 0;
}

.quiet-hours-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-muted, #536471);
  cursor: pointer;
  text-align: left;
}

.quiet-hours-label input {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.quiet-hours-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 10px 0 0 28px;
}

.quiet-hours-range.hidden { display: none !important; }

.quiet-hours-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted, #536471);
}

.quiet-hours-time input[type="time"] {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: var(--text, #0f1419);
}

.quiet-hours-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.78rem;
}


.user-modal-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: stretch;
  margin-top: 14px;
}

.user-modal-actions .btn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  flex: 1 1 0;
  max-width: none;
}

.tweet-price {
  margin: 0 16px 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0a6b5c;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.tweet-ongkir {
  margin: -4px 16px 8px;
  font-size: 0.88rem;
  font-weight: 650;
  color: #536471;
}

.tweet-repost {
  margin: 0 16px 4px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #5f6f68;
}

.tweet.is-repost .tweet-avatar {
  top: 34px;
}

.tweet-action.repost-btn.is-on {
  color: #0a6b5c;
}
.msg-audio-gone {
  opacity: 0.72;
}
.msg-audio-gone .audio-wave {
  opacity: 0.35;
}
.user-seller-badge {
  display: inline-block;
  margin: 6px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.user-ig-actions {
  flex-shrink: 0;
  background: var(--surface);
  margin-top: 8px;
  padding: 0 0 8px;
}
.user-ig-actions #btn-user-follow {
  flex: 1 1 0;
}
.user-modal-chatbar {
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #eff3f4;
}
.user-modal-chatbar .btn {
  flex: 1;
  width: auto;
  margin: 0;
  font-weight: 700;
}
html[data-theme="dark"] .user-modal-chatbar {
  background: var(--surface);
  border-top-color: var(--border);
}

.user-modal-actions-secondary {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: stretch;
}

.user-modal-actions-secondary.hidden {
  display: none !important;
}

.user-modal-actions-secondary .btn {
  flex: 1 1 0;
  margin-top: 0;
}

.user-modal-actions-secondary .btn.hidden {
  display: none !important;
}

.user-modal-wa-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  text-align: left;
  line-height: 1.35;
}

.profile-wa-optin {
  margin: 8px 0 14px;
}

.muted { color: var(--muted); font-size: 0.85rem; }

.author-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.author-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.author-name:hover { color: var(--green-light); }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 2px;
  text-align: center;
}
.profile-stats .stat-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 52px;
  padding: 8px 4px;
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.2;
}
.profile-stats .stat-link > span:first-child {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.profile-actions {
  justify-content: flex-start;
  margin-top: 12px;
}
.profile-action-hint {
  text-align: left;
  margin: 6px 0 0;
}

.profile-stats strong { color: var(--text); }

/* Profil orang lain: hanya tampil saat dialog [open] — jangan paksa display:flex saat tertutup */
.user-modal.modal {
  display: none;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  inset: 0;
  overflow: hidden;
  box-shadow: none;
  background: #fff;
  padding: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.user-modal.modal[open] {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: fixed;
  z-index: 10050;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body.native-app .user-modal.modal[open] {
  margin: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin-bottom: 0 !important;
}

.user-modal.modal::backdrop {
  background: rgba(7, 30, 26, 0.5);
}

body.profile-modal-open #screen-chat-room {
  /* WebView/Android: dialog bisa kehilangan top-layer jika display di-override —
     sembunyikan room chat supaya modal profil tidak tertutup. */
  visibility: hidden;
  pointer-events: none;
}

body.profile-modal-open #screen-chat-room .chat-topbar {
  opacity: 0;
  pointer-events: none;
}

.user-modal .modal-header {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  border-bottom: 1px solid #eff3f4;
  padding-top: 12px;
  padding-bottom: 12px;
}

.user-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.user-more-wrap {
  position: relative;
}

.tweet-menu-item.tweet-menu-danger {
  color: #c62828;
}

.user-modal-body {
  min-height: 0;
  padding: 16px 16px 32px;
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.user-modal-pin {
  flex: 0 0 auto;
  padding: 16px 16px 0;
}

.user-ig-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 4px 0 12px;
}

.user-ig-avatar,
.user-modal-body .user-ig-avatar {
  display: block;
  width: 86px;
  height: 86px;
  margin: 0;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background: #e9edef;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e7e9ea;
}
.user-avatar-view {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 64px 24px 32px;
}
.user-avatar-view[hidden] { display: none !important; }
.user-avatar-view img {
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  object-fit: cover;
  border-radius: 50%;
  background: #111;
}
.user-avatar-view-close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #111 !important;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.product-photo-view {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  padding: 64px 16px 24px;
}
.product-photo-view[hidden] {
  display: none !important;
}
.product-photo-view.is-page {
  position: fixed;
  z-index: 10080;
}
.product-photo-view img {
  max-width: 100%;
  max-height: min(62vh, 520px);
  object-fit: contain;
  background: #111;
}
.product-photo-close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.product-photo-deal {
  margin: 0;
  max-width: 36rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}
.product-photo-deal[hidden] { display: none; }
.product-photo-text {
  margin: 0;
  max-width: 36rem;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
  max-height: 4.2em;
  overflow: auto;
}
.product-photo-text:empty { display: none; }
.product-photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.product-photo-comments,
.product-photo-call,
.product-photo-ask {
  margin: 0;
  width: auto;
  min-width: 140px;
  padding-inline: 22px;
}
.product-photo-call,
.product-photo-ask {
  background: #fff;
  color: #0b141a;
}
.user-avatar-share {
  margin-top: 36px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.user-ig-stats {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.user-ig-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: default;
}

button.user-ig-stat {
  cursor: pointer;
}

.user-ig-stat strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.user-ig-stat span {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}

.user-ig-identity {
  margin: 0 0 2px;
}

.user-modal-body #user-modal-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 800;
  text-align: left;
}

.user-modal-body #user-modal-username {
  margin: 2px 0 0;
  font-size: 0.88rem;
  text-align: left;
}

.user-modal-body #user-modal-bio {
  margin: 10px 0 0;
  max-width: none;
  line-height: 1.45;
  text-align: left;
  font-size: 0.92rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.user-modal-body #user-modal-bio[hidden],
.user-modal-body #user-modal-bio:empty {
  display: none !important;
}

.user-modal-body .avatar-lg {
  display: block;
  width: 96px;
  height: 96px;
  margin: 8px auto 14px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background: #e9edef;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e7e9ea;
}

.user-modal-stats {
  margin: 14px 0 0;
  font-size: 0.9rem;
  gap: 6px 10px;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 0;
  word-spacing: normal;
}

.user-modal-safety {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.user-modal-safety .btn {
  flex: 1 1 0;
  margin-top: 0;
}

.user-modal .profile-kicau-grid-wrap {
  margin-top: 10px;
  overflow: visible;
  border-top: 1px solid #eff3f4;
  padding-top: 12px;
}
.profile-kicau-grid-wrap {
  margin-top: 18px;
  text-align: left;
  border-top: 1px solid #eff3f4;
  padding-top: 12px;
}

.my-kicau-grid-wrap {
  margin: 18px -12px 8px;
  max-width: none;
}
.my-kicau-grid-wrap .profile-kicau-heading,
.my-kicau-grid-wrap .profile-kicau-tabs,
.my-kicau-grid-wrap .profile-kicau-shop {
  padding-left: 12px;
  padding-right: 12px;
}
.profile-kicau-shop {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green, #0a6b5c);
  text-align: left;
  cursor: pointer;
}
.profile-kicau-shop[hidden] { display: none !important; }

.profile-kicau-heading {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}
.profile-kicau-tabs {
  display: flex;
  gap: 16px;
  margin: 0 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.profile-kicau-tabs.hidden { display: none !important; }
.profile-kicau-tabs::-webkit-scrollbar { display: none; }
.profile-kicau-tabs button {
  flex: 0 0 auto;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 2px;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.profile-kicau-tabs button .tab-count {
  margin-left: 4px;
  opacity: 0.7;
  font-weight: 600;
}
.profile-kicau-tabs button.on {
  background: transparent;
  border-bottom-color: var(--text);
  color: var(--text);
}
.profile-kicau-tabs button.on .tab-count { opacity: 0.9; }
.profile-kicau-cat {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(7, 94, 84, 0.88);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 6px;
}
.profile-kicau-cat.profile-kicau-sold {
  background: rgba(84, 110, 122, 0.92);
}
.profile-kicau-slot {
  position: relative;
  min-width: 0;
}
.profile-kicau-slot .profile-kicau-cell {
  width: 100%;
  height: 100%;
}
.profile-kicau-pin-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  background: rgba(10, 107, 92, 0.92);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 6px;
}
.profile-kicau-pin {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-kicau-pin svg {
  width: 14px;
  height: 14px;
  display: block;
}
.profile-kicau-pin.is-on {
  background: #0a6b5c;
}
.profile-kicau-sold-cell img,
.profile-kicau-sold-cell .profile-kicau-vid {
  filter: grayscale(0.4);
  opacity: 0.85;
}
.user-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #128c7e;
}
.user-presence.hidden { display: none !important; }
.user-presence.is-away {
  color: #5f6f68;
  font-weight: 550;
}
.user-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.25);
}
.user-presence-dot.online { background: #25d366; }
.user-presence-dot.away,
.user-presence-dot.recent,
.user-presence-dot.today,
.user-presence-dot.week {
  background: #8aa39a;
  box-shadow: none;
}
.user-presence-dot.away ~ .user-presence-text,
.user-presence-dot.today ~ .user-presence-text,
.user-presence-dot.week ~ .user-presence-text {
  color: #5f6f68;
  font-weight: 550;
}
.user-admin-email {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--green-light, var(--green));
  max-width: 100%;
}
.user-admin-email.hidden { display: none !important; }
.user-admin-email-label {
  font-weight: 650;
  opacity: 0.85;
}
.user-admin-email-value {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}
.user-more-menu {
  right: 0;
  left: auto;
  z-index: 120;
  min-width: 200px;
}
.user-more-menu .tweet-menu-item {
  padding: 12px 14px;
  font-size: 0.9rem;
}
.user-more-menu .tweet-menu-danger {
  color: #c62828;
  border-top: 1px solid #f0f3f2;
  margin-top: 4px;
}

.profile-kicau-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

.profile-kicau-grid.is-empty {
  display: block;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.profile-kicau-cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  margin: 0;
  background: #e7e9ea;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.profile-kicau-cell img,
.profile-kicau-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1c2b28;
  pointer-events: none;
}

.profile-kicau-cell:active {
  opacity: 0.88;
}

.profile-kicau-play-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.62);
  color: #fff;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.profile-kicau-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(165deg, #f7fbf9 0%, #e8f2ee 100%);
  box-shadow: inset 3px 0 0 #0a6b5c;
}

.profile-kicau-text-mark {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0a6b5c;
  opacity: 0.85;
}

.profile-kicau-text-body {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #0f1419;
  font-size: 0.76rem;
  line-height: 1.3;
  text-align: left;
  font-weight: 650;
  width: 100%;
}

.profile-kicau-video {
  background: #10201c;
}

.profile-kicau-empty,
.profile-kicau-locked {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
}

.profile-kicau-empty {
  padding: 28px 16px;
  border: 1px dashed #d0d9d6;
  border-radius: 14px;
  background: #f7faf9;
}

.profile-kicau-empty-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f1419;
}

.profile-kicau-empty-desc {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.profile-visibility-opt {
  margin-top: 10px;
}

.search-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.search-item .info { cursor: pointer; }

.post-owner-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* CHAT */
.search-results, .chat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chat-item, .search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #eef2f0;
  cursor: pointer;
  box-shadow: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.chat-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: fit-content;
  height: fit-content;
}
.chat-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid var(--surface, #fff);
  box-sizing: border-box;
}
.chat-presence {
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1px 0 0;
}
.chat-presence.is-online {
  color: #128c7e;
  font-weight: 650;
}
.chat-presence.is-away {
  color: #8b98a5;
  font-weight: 500;
}

.chat-item:hover, .search-item:hover { background: #f5f6f6; }
.chat-item:active, .search-item:active { background: #eff3f4; }

.search-chat-cta {
  flex-shrink: 0;
  background: #075e54;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
}

#chat-list.searching .empty-state,
#chat-list.searching .loading-state,
#chat-list.searching .empty-card {
  display: none;
}

.chat-item .info, .search-item .info { flex: 1; min-width: 0; }
.chat-item .name, .search-item .name { font-weight: 600; }
.chat-item .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-item .preview, .search-item .username {
  font-size: 0.84rem;
  color: #3d4a45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-topbar { gap: 4px; }

.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.chat-search-bar.hidden { display: none !important; }

.chat-search-bar input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d0d7de;
  border-radius: 20px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.95rem;
}

.chat-search-count {
  font-size: 0.75rem;
  white-space: nowrap;
}

.btn-chat-search-nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #536471;
}

.btn-chat-search-nav:disabled {
  opacity: 0.35;
}

.chat-search-mark {
  background: #ffe082;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.message.msg-search-hit {
  outline: 1px solid rgba(10, 107, 92, 0.35);
}

.message.msg-search-focus {
  outline: 2px solid #0a6b5c;
  box-shadow: 0 0 0 3px rgba(10, 107, 92, 0.15);
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.danger-text { color: #c62828 !important; }

.tweet-action.report-post-btn {
  font-weight: 800;
  color: #8b98a5;
}
.chat-peer { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.chat-peer-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-peer-meta #chat-peer-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 1.2;
}
.chat-peer-status {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.chat-peer-status.is-online {
  color: #9ef0c8;
  font-weight: 650;
}
.chat-peer-status.is-away {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.chat-peer-status.hidden { display: none !important; }

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}
.typing-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.45;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.pin-tag,
.mute-tag,
.lock-tag,
.note-tag {
  font-size: 0.72rem;
  line-height: 1;
}
.chat-item.chat-muted .preview {
  opacity: 0.85;
}
.chat-peer span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-item.chat-pinned {
  background: #f3faf7;
}

.chat-menu {
  position: absolute;
  top: calc(var(--topbar-h) + 4px);
  right: 10px;
  z-index: 30;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  min-width: 180px;
  padding: 6px 0;
  overflow: hidden;
}

.chat-menu.hidden { display: none !important; }

.chat-menu-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 12px 16px;
  font: inherit;
  font-size: 0.95rem;
  color: #0f1419;
  cursor: pointer;
}

.chat-menu-item:active,
.chat-menu-item:hover {
  background: #f5f6f6;
}

.chat-menu-item.danger {
  color: #e53935;
  font-weight: 600;
}

#screen-chat-room {
  /* overlay fixed (inset:0) — jangan pakai 100dvh: saat keyboard buka
     WebView mengecil tapi dvh tetap penuh → header/profil terdorong naik */
  position: fixed;
  inset: 0;
  height: auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f6f8f7;
  background-image: none;
}

html[data-theme="dark"] #screen-chat-room {
  background-color: #0b141a;
  background-image: none;
}

#screen-chat-room .chat-topbar {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 20;
}

.message-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.chat-unread-jump {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 6;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  color: var(--green, #0a6b5c);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(11, 20, 26, 0.18);
  cursor: pointer;
  white-space: nowrap;
}
.chat-unread-jump.hidden { display: none; }
html[data-theme="dark"] .chat-unread-jump {
  background: #1f2c34;
  color: #8ef0c2;
}

.chat-latest-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: #54656f;
  box-shadow: 0 1px 3px rgba(11, 20, 26, 0.18);
  cursor: pointer;
}

.chat-latest-count {
  position: absolute;
  top: -7px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

html[data-theme="dark"] .chat-latest-btn {
  background: #1f2c34;
  color: #e9edef;
}

.message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column-reverse; /* pesan terbaru di bawah, buka chat langsung di situ */
  gap: 3px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.message-wrap {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: min(82%, 340px);
  min-width: 0;
}

.message-wrap.mine { align-self: flex-end; align-items: flex-end; }
.message-wrap.theirs { align-self: flex-start; align-items: flex-start; }
.message-list > .empty-state { align-self: center; margin: auto 0; }

.message {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* fit-content aman utk teks+quote; max-content + img max-width:100% = foto hilang */
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 9px 5px;
  border-radius: 16px;
  font-size: 0.94rem;
  line-height: 1.4;
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.05);
  position: relative;
}

.message.has-media,
.message.has-kicau-card {
  /* pastikan bubble media punya lebar minum agar thumb tidak collapse */
  min-width: min(12rem, 100%);
}

.message.mine {
  background: var(--bubble-mine);
  border-bottom-right-radius: 6px;
  color: var(--bubble-text);
}

.message.theirs {
  background: var(--bubble-theirs);
  border-bottom-left-radius: 6px;
  color: var(--bubble-text);
}

.message.is-phrase {
  background: var(--phrase, #7a1f2b);
  color: var(--phrase-ink, #fff6ea);
  border-radius: 999px;
  padding: 8px 16px 6px;
}

.message.is-phrase .msg-phrase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.15;
  text-align: center;
}

.message.is-phrase .msg-sticker-emoji {
  font-size: 1.7rem;
  line-height: 1;
}

.message.is-emoji-sticker {
  background: transparent;
  box-shadow: none;
  padding: 0 2px;
}

.message.is-emoji-sticker .msg-sticker-emoji.is-lone {
  font-size: 3rem;
  line-height: 1;
}

.message.is-emoji-sticker .time,
.message.is-emoji-sticker .time-text,
html[data-theme="dark"] .message.is-emoji-sticker .time,
html[data-theme="dark"] .message.is-emoji-sticker .time-text,
.message.is-art-sticker .time,
.message.is-art-sticker .time-text,
html[data-theme="dark"] .message.is-art-sticker .time,
html[data-theme="dark"] .message.is-art-sticker .time-text {
  color: #667781;
  opacity: 1;
}
html[data-theme="dark"] .msg-art-label {
  color: #f4f7f6;
}

.chat-art-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.chat-art-grid.hidden { display: none !important; }
.chat-art-btn {
  border: none;
  border-radius: 14px;
  padding: 6px 4px 8px;
  background: #f3f6f5;
  color: #1c2b26;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}
.chat-art-btn svg {
  width: 58px;
  height: 58px;
}
.chat-art-btn:active { transform: scale(0.97); }

.message.is-art-sticker {
  background: transparent;
  box-shadow: none;
  padding: 0 2px;
  overflow: visible;
}
.msg-art-sticker {
  width: 168px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  filter: drop-shadow(0 3px 6px rgba(16, 32, 25, 0.18));
}
.msg-art-sticker svg {
  width: 148px;
  height: 148px;
  display: block;
}
.msg-art-label {
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #1c2b26;
}

.message.is-photo-sticker {
  background: transparent;
  box-shadow: none;
  padding: 0 2px;
  overflow: visible;
}
.msg-sticker-photo {
  width: 168px;
  height: 168px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(16, 32, 25, 0.18));
}
.chat-img-sticker-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
  min-height: 104px;
  padding: 2px 2px 4px;
}
.chat-img-sticker-list:empty { display: none; }
.chat-img-sticker-list::-webkit-scrollbar { display: none; }
.chat-img-sticker {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #e7eeeb;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 32, 25, 0.16);
}
.chat-img-sticker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message.is-phrase .time,
.message.is-phrase .time-text,
html[data-theme="dark"] .message.is-phrase .time,
html[data-theme="dark"] .message.is-phrase .time-text {
  color: var(--phrase-ink, #fff6ea);
  opacity: 0.82;
}

.message.is-phrase .msg-receipt,
.message.is-phrase .msg-receipt.read {
  color: var(--phrase-ink, #fff6ea);
  opacity: 0.9;
}

.message.deleted {
  opacity: 0.85;
}

.msg-deleted {
  font-size: 0.88rem;
  color: #667781;
  font-style: italic;
}

.message[data-id] {
  /* Izinkan seleksi teks; long-press tetap buka menu Salin */
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.message[data-id] .msg-image,
.message[data-id] .msg-video,
.message[data-id] .msg-audio,
.message[data-id] .msg-quote,
.message[data-id] button {
  user-select: none;
  -webkit-user-select: none;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}

.message .time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.62rem;
  color: #8b9890;
  margin-top: 0;
  margin-left: auto;
  min-height: 14px;
}

.msg-edited {
  font-style: italic;
  font-size: 0.62rem;
}

.msg-receipt {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 14px;
  min-height: 12px;
}

/* Centang: mengirim → 1 abu → 2 abu → 2 hijau = dibaca */
.msg-receipt.pending { color: #a0aeb0; }
.msg-receipt.sent { color: #8aa39c; }
.msg-receipt.delivered { color: #5f8f84; }
.msg-receipt.read { color: #1fbf6a; }

.tick-pending {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tickSpin 0.7s linear infinite;
}

@keyframes tickSpin {
  to { transform: rotate(360deg); }
}

.tick-css {
  display: inline-flex;
  align-items: center;
  height: 10px;
  position: relative;
}

.tick-css i {
  display: block;
  width: 4px;
  height: 7px;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.tick-css.double i + i {
  margin-left: -2px;
}

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -4px;
  padding: 0 4px;
  max-width: 100%;
}

.msg-reaction-chip {
  border: 1px solid #e9edef;
  background: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.msg-reaction-chip span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #54656f;
}

.msg-reaction-chip.mine {
  border-color: #075e54;
  background: #e7f8f5;
}

.msg-action-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 900;
}

.msg-action-backdrop.hidden,
.msg-action-sheet.hidden {
  display: none !important;
}

.message del {
  text-decoration: line-through;
}
.message strong { font-weight: 700; }
.message em { font-style: italic; }

.chat-disappear-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #e7f6ea;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.chat-disappear-banner.hidden {
  display: none;
}

.chat-note-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: calc(100% - 20px);
  margin: 8px 10px 0;
  padding: 8px 12px;
  border: none;
  border-left: 3px solid #c4a35a;
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #102019);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.chat-note-bar.hidden { display: none; }
.chat-note-label {
  flex: none;
  font-weight: 700;
  color: #8a6a22;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
html[data-theme="dark"] .chat-note-bar {
  background: #1f2c34;
  color: #e9edef;
}

.chat-pin-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 8px 10px 0;
  background: var(--surface, #fff);
  color: var(--text, #102019);
  border-radius: 12px;
  border-left: 3px solid #0a6b5c;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.08);
}

.chat-pin-bar.hidden { display: none; }

.chat-kicau-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: calc(100% - 20px);
  margin: 8px 10px 0;
  padding: 8px 12px;
  border: none;
  border-left: 3px solid #0a6b5c;
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #102019);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.08);
}

.chat-kicau-bar.hidden { display: none; }

.chat-kicau-title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
}

.chat-kicau-bar-meta {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: #536471;
}

html[data-theme="dark"] .chat-kicau-bar-meta {
  color: #9aa8a2;
}

.chat-pin-jump {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  text-align: left;
  padding: 8px 4px 8px 10px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.chat-pin-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.chat-pin-off {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: #667781;
  cursor: pointer;
  font-size: 1rem;
}

.chat-disappear-mark {
  margin-right: 4px;
  font-size: 12px;
  line-height: 1;
}

.msg-timer {
  margin-right: 4px;
}

.disappear-choice.is-on {
  font-weight: 700;
}

.chat-wall-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 8px;
  justify-items: center;
  padding: 6px 4px 16px;
}

.chat-wall-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(11, 20, 26, 0.16);
}

.chat-wall-swatch.is-on {
  box-shadow: inset 0 0 0 1px rgba(11, 20, 26, 0.16), 0 0 0 2px #fff, 0 0 0 4px #0a6b5c;
}

.chat-wall-label {
  margin: 0 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #667781;
}

.chat-wall-patterns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 2px 14px;
}

.chat-wall-pattern {
  height: 58px;
  border-radius: 14px;
  border: none;
  padding: 0;
  cursor: pointer;
  background-repeat: repeat;
  box-shadow: inset 0 0 0 1px rgba(11, 20, 26, 0.12);
}

.chat-wall-pattern.is-on {
  box-shadow: inset 0 0 0 1px rgba(11, 20, 26, 0.12), 0 0 0 2px #fff, 0 0 0 4px #0a6b5c;
}

#btn-chat-wall-photo.is-on {
  box-shadow: inset 0 0 0 2px #0a6b5c;
}

.chat-font-choice {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: #f6f8f7;
  color: #102019;
  border-radius: 12px;
  padding: 8px 12px 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

.chat-font-choice small {
  display: block;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  color: #667781;
}

.chat-font-choice span {
  display: block;
  margin-top: 2px;
  font-size: 1.05rem;
  line-height: 1.35;
}

.chat-font-choice.is-biasa span { font-family: system-ui, "Segoe UI", sans-serif; }
.chat-font-choice.is-klasik span { font-family: Georgia, "Times New Roman", serif; }
.chat-font-choice.is-tulis span { font-family: "Segoe Print", "Segoe Script", "Comic Sans MS", cursive; }
.chat-font-choice.is-mesin span { font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace; }

.chat-font-choice.is-on {
  box-shadow: inset 0 0 0 2px #0a6b5c;
}

#screen-chat-room.chat-font-biasa .message,
#screen-chat-room.chat-font-biasa #message-input {
  font-family: system-ui, "Segoe UI", sans-serif;
}
#screen-chat-room.chat-font-klasik .message,
#screen-chat-room.chat-font-klasik #message-input {
  font-family: Georgia, "Times New Roman", serif;
}
#screen-chat-room.chat-font-tulis .message,
#screen-chat-room.chat-font-tulis #message-input {
  font-family: "Segoe Print", "Segoe Script", "Comic Sans MS", cursive;
}
#screen-chat-room.chat-font-mesin .message,
#screen-chat-room.chat-font-mesin #message-input {
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
}

.msg-action-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 950;
  background: var(--sheet);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.msg-action-title {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #54656f;
  margin-bottom: 10px;
}

#star-list {
  max-height: 46vh;
  overflow-y: auto;
}

.chat-lock-gate {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: #f6f8f7;
  color: #0f1419;
}
.chat-lock-gate.hidden { display: none !important; }
.chat-lock-back {
  position: absolute;
  top: 8px;
  left: 8px;
}
.chat-lock-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.chat-lock-gate input,
.chat-lock-field {
  width: min(200px, 100%);
  margin: 0 auto 8px;
  display: block;
  text-align: center;
  font: inherit;
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  border: 1px solid #d5ddd9;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
html[data-theme="dark"] .chat-lock-gate {
  background: #0b141a;
  color: #e9edef;
}
html[data-theme="dark"] .chat-lock-gate input,
html[data-theme="dark"] .chat-lock-field {
  background: #1f2c34;
  color: #e9edef;
  border-color: #2a3942;
}

.msg-react-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.msg-react-btn {
  border: 1px solid #e9edef;
  background: #f7f8fa;
  border-radius: 14px;
  padding: 10px 2px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 64px;
}

.msg-react-btn .emoji {
  font-size: 1.55rem;
  line-height: 1;
}

.msg-react-btn .label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #54656f;
}

.msg-react-btn:active {
  background: #e7f8f5;
  border-color: #075e54;
  transform: scale(1.05);
}

.msg-action-delete,
.msg-action-cancel,
.msg-action-reply,
.msg-action-copy {
  display: block;
  width: 100%;
  border: none;
  background: #f0f2f5;
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}

#msg-action-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 12px 16px calc(8px + env(safe-area-inset-bottom, 0px));
}

#msg-action-sheet .msg-action-title {
  display: none;
}

#msg-action-sheet .msg-react-bar {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin: 0 0 4px;
  padding: 2px 0 8px;
  border-bottom: 1px solid #eff3f4;
}

#msg-action-sheet .msg-react-btn {
  flex: 1;
  min-height: 0;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 4px 0;
}

#msg-action-sheet .msg-react-btn .emoji {
  font-size: 1.75rem;
}

#msg-action-sheet .msg-react-btn .label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 640px) {
  #msg-action-sheet,
  .forward-sheet {
    left: 50%;
    right: auto;
    width: min(420px, calc(100% - 24px));
    transform: translateX(-50%);
  }
}

#msg-action-sheet .msg-action-reply,
#msg-action-sheet .msg-action-copy,
#msg-action-sheet .msg-action-share-img,
#msg-action-sheet .msg-action-delete {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 4px;
  border: none;
  border-bottom: 1px solid #eff3f4;
  border-radius: 0;
  background: none;
  color: #111;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

#msg-action-sheet .msg-action-delete {
  color: #e53935;
  border-bottom: none;
}

.msg-action-reply {
  color: #075e54;
  background: #e7f8f5;
}

.msg-action-copy {
  color: #075e54;
  background: #e7f8f5;
}

#msg-action-sheet .msg-action-share-img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 4px;
  border: none;
  border-bottom: 1px solid #eff3f4;
  border-radius: 0;
  background: none;
  color: #111;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

#msg-action-sheet .msg-action-delete {
  color: #e53935;
  background: none;
  border-bottom: none;
}

#msg-delete-sheet .msg-action-delete {
  color: #e53935;
  background: #fdecea;
}

.msg-action-delete.hidden,
.msg-action-copy.hidden,
.msg-action-share-img.hidden,
#btn-del-for-everyone.hidden { display: none !important; }

.msg-delete-hint {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.chat-reply-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 8px 6px;
  padding: 8px 10px;
  background: #fff;
  border-left: 3px solid #075e54;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-reply-banner.hidden { display: none !important; }

.chat-reply-banner-body {
  flex: 1;
  min-width: 0;
}

.chat-reply-banner-body strong {
  display: block;
  font-size: 0.78rem;
  color: #075e54;
}

.chat-reply-preview {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #54656f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-quote {
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* Jangan width:100% — di bubble shrink-wrap itu meruntuhkan lebar ke ~teks pendek */
  align-self: stretch;
  width: auto;
  min-width: 9.5rem;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 4px;
  padding: 5px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  flex: 0 0 auto;
}

.message.mine .msg-quote {
  background: rgba(0, 0, 0, 0.08);
}

.msg-quote-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: #075e54;
  flex-shrink: 0;
}

.msg-quote-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.msg-quote-body strong {
  font-size: 0.72rem;
  line-height: 1.25;
  color: #075e54;
}

.msg-quote-body span,
.msg-quote-kind {
  font-size: 0.8rem;
  line-height: 1.25;
  color: #54656f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-quote-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.msg-quote-cam {
  width: 14px;
  height: 10px;
  border: 1.4px solid currentColor;
  border-radius: 2px;
  position: relative;
  flex: none;
}
.msg-quote-cam::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 2px;
  border-style: solid;
  border-width: 3px 0 3px 4px;
  border-color: transparent transparent transparent currentColor;
}

.msg-quote-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.12);
  align-self: center;
}

video.msg-quote-thumb {
  pointer-events: none;
}
.msg-quote.has-thumb {
  padding-right: 5px;
  min-width: 11rem;
}

.chat-reply-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.08);
}

.chat-reply-thumb[hidden] {
  display: none !important;
}

.message.msg-flash {
  outline: 2px solid #25d366;
  outline-offset: 2px;
  animation: msgFlashPulse 1.2s ease;
}
@keyframes msgFlashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
  40% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.35); }
}

.tweet.tweet-flash {
  outline: 2px solid #0a6b5c;
  outline-offset: 2px;
  border-radius: 14px;
  animation: tweetFlashPulse 1.6s ease;
}
@keyframes tweetFlashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 107, 92, 0); }
  35% { box-shadow: 0 0 0 8px rgba(10, 107, 92, 0.28); }
}

.msg-heart-burst {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  pointer-events: none;
  animation: heartBurst 0.65s ease forwards;
  z-index: 2;
}
@keyframes heartBurst {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.4); }
  35% { opacity: 1; transform: translate(-50%, -55%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

.chat-day-sep {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
  pointer-events: none;
}
.chat-day-sep span {
  background: rgba(255, 255, 255, 0.92);
  color: #54656f;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.chat-unread-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0;
  pointer-events: none;
}
.chat-unread-sep::before,
.chat-unread-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}
.chat-unread-sep span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.msg-info-preview {
  margin: 0 16px 4px;
  color: #667781;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  font-size: 0.92rem;
}
.msg-info-row span { color: #667781; }
.msg-info-row strong { font-weight: 600; }

.chat-emoji-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(64px + var(--safe-bottom));
  z-index: 94;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sheet);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(16, 32, 25, 0.22);
  padding: 8px 10px 10px;
  max-height: min(420px, 58vh);
  overflow: hidden;
  animation: attachIn 0.18s var(--ease);
}
.chat-emoji-sheet.hidden { display: none !important; }
.chat-emoji-tabs {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.chat-emoji-tab {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.chat-emoji-tab.is-active {
  background: #0a6b5c;
  color: #fff;
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
}
.chat-phrase-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}
.chat-phrase-wrap.hidden { display: none !important; }
#chat-phrase-mine {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  min-height: 0;
  overflow-y: auto;
  gap: 8px;
}
.chat-phrase-new {
  align-self: flex-start;
  border: 1px dashed #0a6b5c;
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: #0a6b5c;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.chat-phrase-maker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.chat-phrase-maker.hidden { display: none !important; }
.chat-phrase-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-phrase-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  border-radius: 16px;
  padding: 6px 10px 7px;
  min-width: 64px;
  background: #0a6b5c;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.chat-phrase-emoji {
  font-size: 1.35rem;
  line-height: 1;
}
.chat-sticker-pick {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}
.chat-sticker-pick::-webkit-scrollbar { display: none; }
.chat-sticker-emoji {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
}
.chat-sticker-emoji.is-active {
  background: #e7f3ef;
  box-shadow: inset 0 0 0 2px #0a6b5c;
}
.chat-phrase-btn:active { transform: scale(0.98); }
.chat-phrase-make {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.chat-phrase-make input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--input-bg, #fff);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.chat-phrase-save {
  border: none;
  border-radius: 12px;
  padding: 0 12px;
  background: #25d366;
  color: #0b141a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.chat-emoji-btn {
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 1.35rem;
  line-height: 1.4;
  padding: 6px 2px;
  cursor: pointer;
}
.chat-emoji-btn:active,
.chat-emoji-btn:hover {
  background: #e7f8f5;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10060;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  touch-action: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lightbox.is-dragging { transition: none; }
.lightbox-film {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lightbox.is-chat-film.is-film .lightbox-film {
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.lightbox.is-dragging .lightbox-film,
.lightbox.is-film-jump .lightbox-film {
  transition: none;
}
.lightbox.is-chat-film .lightbox-side {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
  background: #000;
  z-index: 1;
}
.lightbox.is-chat-film .lightbox-side.is-next { left: 100%; }
.lightbox.is-chat-film .lightbox-side.is-prev { left: -100%; }
.lightbox.is-chat-film .lightbox-side[hidden] { display: none !important; }
.lightbox.is-under-film .lightbox-close,
.lightbox.is-under-film .lightbox-chat-meta,
.lightbox.is-under-film .lightbox-chat-save,
.lightbox.is-under-film .lightbox-chat-more,
.lightbox.is-under-film .lightbox-chat-menu,
.lightbox.is-under-film .lightbox-chat-reply {
  opacity: 0;
}

.lightbox.is-editing,
.lightbox.is-sticker-crop {
  background: #0b141a;
}

.lb-sticker-crop {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.lb-sticker-crop.hidden { display: none !important; }
.lb-sticker-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}
.lb-sticker-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
  border: 2px solid #0a6b5c;
  cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.lb-sticker-handle::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #0a6b5c;
  border-bottom: 2px solid #0a6b5c;
}
.lb-sticker-caption {
  position: absolute;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%);
  max-width: 92%;
  padding: 2px 16px 2px 6px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.15;
  text-shadow:
    0 0 2px #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  white-space: nowrap;
  z-index: 2;
}
.lb-sticker-caption.is-empty { display: none; }
.lb-sticker-caption-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid #fff;
  cursor: nwse-resize;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.lb-sticker-colors {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.lb-sticker-crop-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(11, 20, 26, 0.94);
  pointer-events: auto;
}
.lb-sticker-crop-bar p {
  margin: 0;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}
.lb-sticker-caption-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #0b141a;
  font: inherit;
  font-weight: 700;
}
.lb-sticker-crop-actions {
  display: flex;
  gap: 8px;
}
.lb-sticker-crop-actions .lb-edit-btn {
  flex: 1;
}

.lightbox.hidden { display: none !important; }

.lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  padding: 24px;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 1;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100% - 56px);
  object-fit: contain;
  border-radius: 8px;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  cursor: grab;
}

.lightbox img.is-zoomed {
  cursor: grab;
}

.lightbox.is-chat-film {
  background: #000;
}
.lightbox.is-chat-film .lightbox-stage {
  padding: 0;
}
.lightbox.is-chat-film .lightbox-stage img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}
.lightbox.is-chat-film .lightbox-nav {
  display: none !important;
}
.lightbox.is-feed-view {
  background: #000;
}
.lightbox.is-feed-view .lightbox-stage {
  padding: 0;
}
.lightbox.is-feed-view .lightbox-stage img,
.lightbox.is-feed-view .lightbox-video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}
.lightbox.is-feed-view .lightbox-actions,
.lightbox.is-feed-view .lightbox-chat-reply,
.lightbox.is-feed-view .lightbox-chat-more,
.lightbox.is-feed-view .lightbox-nav {
  display: none !important;
}
.lightbox-video { display: none; }
.lightbox.is-feed-view.is-video .lightbox-video { display: block; }
.lightbox.is-feed-view.is-video #lightbox-img { display: none !important; }
.lightbox-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: rgba(11, 20, 26, 0.45);
  cursor: pointer;
}
.lightbox-video-play[hidden] { display: none !important; }
.lightbox-video-play::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.lightbox-video-scrub {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 3;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.lightbox-video-scrub[hidden] { display: none !important; }
.lightbox-video-scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.lightbox-video-scrub span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.lightbox-chat-meta {
  display: none;
}
.lightbox.is-chat-film .lightbox-chat-meta {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 60px;
  right: 112px;
  z-index: 3;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.lightbox.is-chat-film .lightbox-chat-meta::before {
  content: "";
  position: absolute;
  left: -60px;
  right: -112px;
  top: calc(-1 * max(12px, env(safe-area-inset-top)));
  height: 92px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
  z-index: -1;
}
.lightbox.is-chat-film .lightbox-chat-meta strong {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox.is-chat-film .lightbox-chat-meta span {
  font-size: 0.72rem;
  line-height: 1.2;
  opacity: 0.88;
}
.lightbox.is-chat-film.is-clean .lightbox-close,
.lightbox.is-chat-film.is-clean .lightbox-chat-meta,
.lightbox.is-chat-film.is-clean .lightbox-chat-save,
.lightbox.is-chat-film.is-clean .lightbox-chat-more,
.lightbox.is-chat-film.is-clean .lightbox-chat-menu,
.lightbox.is-chat-film.is-clean .lightbox-chat-reply {
  opacity: 0;
  pointer-events: none;
}
.lightbox.is-chat-film .lightbox-close,
.lightbox.is-chat-film .lightbox-chat-meta,
.lightbox.is-chat-film .lightbox-chat-save,
.lightbox.is-chat-film .lightbox-chat-more,
.lightbox.is-chat-film .lightbox-chat-menu,
.lightbox.is-chat-film .lightbox-chat-reply {
  transition: opacity 0.2s ease;
}
.lightbox.is-chat-film .lightbox-close,
html.native-app .lightbox.is-chat-film .lightbox-close,
body.native-app .lightbox.is-chat-film .lightbox-close {
  display: grid !important;
  left: 12px;
  right: auto;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
}
.lightbox-chat-save,
.lightbox-chat-more,
.lightbox-chat-menu,
.lightbox-chat-reply {
  display: none;
}
.lightbox.is-chat-film .lightbox-chat-save,
.lightbox.is-chat-film .lightbox-chat-more {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  z-index: 4;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.lightbox.is-chat-film .lightbox-chat-save { right: 60px; }
.lightbox.is-chat-film .lightbox-chat-more { right: 12px; }
.lightbox.is-feed-view .lightbox-close {
  display: grid !important;
  left: 12px;
  right: auto;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
}
.lightbox.is-feed-view .lightbox-chat-meta {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 60px;
  right: 112px;
  z-index: 3;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.lightbox.is-feed-view .lightbox-chat-meta::before {
  content: "";
  position: absolute;
  left: -60px;
  right: -112px;
  top: calc(-1 * max(12px, env(safe-area-inset-top)));
  height: 92px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
  z-index: -1;
}
.lightbox.is-feed-view .lightbox-chat-meta strong {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox.is-feed-view .lightbox-chat-meta span {
  font-size: 0.72rem;
  line-height: 1.2;
  opacity: 0.88;
}
.lightbox.is-feed-view .lightbox-chat-save {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 60px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.lightbox-feed-more,
.lightbox-feed-menu { display: none; }
.lightbox.is-feed-view .lightbox-feed-more:not([hidden]) {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.lightbox.is-feed-view .lightbox-feed-menu:not(.hidden) {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 148px;
  padding: 6px;
  border-radius: 14px;
  background: #1f2c34;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.lightbox-feed-menu button {
  border: none;
  background: transparent;
  color: #fff;
  text-align: left;
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.lightbox-feed-menu button[hidden] { display: none; }
.lightbox-feed-menu button:active { background: rgba(255, 255, 255, 0.08); }
.lightbox-feed-menu button[data-feed-menu="delete"] { color: #ff8a80; }
.lightbox-feed-caption { display: none; }
.lightbox.is-feed-view .lightbox-feed-caption:not([hidden]) {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  overflow: hidden;
  cursor: pointer;
  max-height: calc(1.35em * 2 + 20px);
}
.lightbox.is-feed-view .lightbox-feed-caption.is-open {
  display: block;
  -webkit-line-clamp: unset;
  max-height: 40vh;
  overflow: auto;
}
.lightbox.is-feed-view.has-feed-caption.is-video .lightbox-video-scrub {
  bottom: calc(72px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-caption.is-caption-open.is-video .lightbox-video-scrub {
  bottom: calc(40vh + 24px + env(safe-area-inset-bottom));
}
.lightbox-feed-actions { display: none; }
.lightbox.is-feed-view .lightbox-feed-actions:not([hidden]) {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  gap: 8px;
}
.lightbox-feed-actions button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.lightbox-feed-actions button[data-feed-act="chat"] {
  background: var(--green);
  color: #fff;
}
.lightbox-feed-actions button[hidden] { display: none; }
.lightbox.is-feed-view.has-feed-actions .lightbox-feed-caption:not([hidden]) {
  bottom: calc(68px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.is-video .lightbox-video-scrub {
  bottom: calc(70px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.has-feed-caption.is-video .lightbox-video-scrub {
  bottom: calc(124px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.has-feed-caption.is-caption-open.is-video .lightbox-video-scrub {
  bottom: calc(40vh + 78px + env(safe-area-inset-bottom));
}
.lightbox-feed-price { display: none; }
.lightbox.is-feed-view .lightbox-feed-price:not([hidden]) {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 4;
  display: block;
  width: auto;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.lightbox.is-feed-view .lightbox-feed-price.is-toggle:not([hidden]) {
  pointer-events: auto;
  cursor: pointer;
}
.lightbox-feed-price small {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  opacity: 0.88;
}
.listing-link {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #000;
}
.listing-link.hidden { display: none !important; }
body:has(#listing-link:not(.hidden)) #share-post-backdrop:not(.hidden) {
  z-index: 10050;
}
body:has(#listing-link:not(.hidden)) #share-post-sheet:not(.hidden) {
  z-index: 10051;
}
.listing-link-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: #000;
  cursor: pointer;
}
.listing-link-card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  display: grid;
  background: #000;
  color: #fff;
  border-radius: 0;
  padding: 0;
}
.listing-link-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}
.listing-link-media {
  position: relative;
  grid-area: 1 / 1;
  min-height: 0;
  height: 100%;
}
.listing-link-media:empty { display: none; }
.listing-link-media img,
.listing-link-media video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
  border-radius: 0;
}
.listing-link-media img { cursor: pointer; }
.listing-link-album {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 0;
}
.listing-link-album::-webkit-scrollbar { display: none; }
.listing-link-album img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.listing-link-count {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.78rem;
  font-weight: 700;
}
.listing-link-sheet {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  max-height: 58%;
  overflow: auto;
  padding: 72px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 46%, rgba(0, 0, 0, 0) 100%);
}
.listing-link-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.listing-link-seller-col {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.listing-link-seller {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.listing-link-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.listing-link-seller-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.listing-link-price {
  margin: 0;
  flex: 0 0 auto;
  max-width: 46%;
  text-align: right;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
}
.listing-link-price[hidden] { display: none !important; }
.listing-link-price.is-sold { color: #ffb4a8; }
.listing-link-ongkir {
  margin: 6px 0 0;
  font-weight: 650;
  opacity: 0.92;
}
.listing-link-place,
.listing-link-text {
  margin: 6px 0 0;
}
.listing-link-seller .listing-link-who,
.listing-link-seller .listing-link-area { margin: 0; }
.listing-link-who {
  font-weight: 800;
  font-size: 1.02rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing-link-area {
  margin-top: 2px;
  font-size: 0.84rem;
  font-weight: 700;
  opacity: 0.8;
}
.listing-link-when {
  margin: 2px 0 0 50px;
  font-size: 0.78rem;
  font-weight: 650;
  opacity: 0.72;
}
.listing-link-place,
.listing-link-text { opacity: 0.9; }
.listing-link-sold {
  align-self: flex-start;
  margin-top: 12px;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
}
.listing-link-sold.is-sold {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.listing-link-sold[hidden] { display: none !important; }
.listing-link-sold:disabled { opacity: 0.6; }
.listing-link-text {
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.listing-link-asks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.listing-link-asks[hidden] { display: none !important; }
.listing-link-asks button {
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-weight: 650;
  font-size: 0.84rem;
  cursor: pointer;
}
.listing-link-actions {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 14px;
}
.listing-link-chat,
.listing-link-save,
.listing-link-share {
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.listing-link-chat[hidden],
.listing-link-save[hidden] { display: none !important; }
.listing-link-chat svg,
.listing-link-save svg,
.listing-link-share svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.listing-link-chat svg { background: var(--green); }
.listing-link-save.is-saved { color: #8ef0c2; background: transparent; }
.listing-link-save.is-saved svg { background: rgba(142, 240, 194, 0.22); }
.lightbox.is-feed-view.has-feed-actions .lightbox-feed-price:not([hidden]) {
  bottom: calc(66px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view .lightbox-feed-price.is-sold { color: #ffb4a8; }
.lightbox.is-feed-view.has-feed-price .lightbox-feed-caption:not([hidden]) {
  bottom: calc(74px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.has-feed-price .lightbox-feed-caption:not([hidden]) {
  bottom: calc(126px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-price.is-video .lightbox-video-scrub {
  bottom: calc(58px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-price.has-feed-caption.is-video .lightbox-video-scrub {
  bottom: calc(116px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-price.has-feed-caption.is-caption-open.is-video .lightbox-video-scrub {
  bottom: calc(40vh + 68px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.has-feed-price.is-video .lightbox-video-scrub {
  bottom: calc(110px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.has-feed-price.has-feed-caption.is-video .lightbox-video-scrub {
  bottom: calc(168px + env(safe-area-inset-bottom));
}
.lightbox.is-feed-view.has-feed-actions.has-feed-price.has-feed-caption.is-caption-open.is-video .lightbox-video-scrub {
  bottom: calc(40vh + 120px + env(safe-area-inset-bottom));
}
.lightbox.is-chat-film .lightbox-chat-menu:not(.hidden) {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: #1f2c34;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.lightbox-chat-menu button {
  border: none;
  background: transparent;
  color: #fff;
  text-align: left;
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.lightbox-chat-menu button:active { background: rgba(255, 255, 255, 0.08); }
.lightbox.is-chat-film .lightbox-chat-reply {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}
.lightbox-chat-reply input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.lightbox-chat-reply input::placeholder { color: rgba(255, 255, 255, 0.72); }
.lightbox-chat-reply-send {
  flex: none;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #1f8a70;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.lightbox.is-kabar .lightbox-actions,
.lightbox.is-kabar .lightbox-nav,
.lightbox.is-kabar .lightbox-counter { display: none !important; }
.lightbox.is-kabar .kabar-lb-side {
  position: absolute;
  left: 8px;
  right: 8px;
  top: max(56px, calc(env(safe-area-inset-top) + 48px));
  bottom: calc(108px + env(safe-area-inset-bottom));
  z-index: 1;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-kabar.is-dragging #lightbox-img,
.lightbox.is-kabar.is-dragging .kabar-lb-side,
.lightbox.is-kabar.is-dragging .kabar-lb-voice-side,
.lightbox.is-kabar.is-dragging .kabar-lb-play,
.lightbox.is-kabar.is-dragging #lightbox-kabar,
.lightbox.is-kabar.is-dragging .kabar-lb-note,
.lightbox.is-kabar.is-kabar-jump #lightbox-img,
.lightbox.is-kabar.is-kabar-jump .kabar-lb-side,
.lightbox.is-kabar.is-kabar-jump .kabar-lb-voice-side,
.lightbox.is-kabar.is-kabar-jump .kabar-lb-play,
.lightbox.is-kabar.is-kabar-jump #lightbox-kabar,
.lightbox.is-kabar.is-kabar-jump .kabar-lb-note { transition: none; }
.lightbox.is-kabar.is-kabar-glide #lightbox-img,
.lightbox.is-kabar.is-kabar-glide .kabar-lb-side,
.lightbox.is-kabar.is-kabar-glide .kabar-lb-voice-side,
.lightbox.is-kabar.is-kabar-glide .kabar-lb-play,
.lightbox.is-kabar.is-kabar-glide #lightbox-kabar,
.lightbox.is-kabar.is-kabar-glide .kabar-lb-note {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-kabar .kabar-lb-voice-side {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lightbox.is-kabar .kabar-lb-voice-side[hidden] { display: none !important; }
.lightbox.is-kabar .kabar-lb-voice-side span {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lightbox.is-kabar .kabar-lb-note[hidden] { display: none !important; }
.lightbox.is-kabar .lightbox-stage {
  padding: max(56px, calc(env(safe-area-inset-top) + 48px)) 8px calc(108px + env(safe-area-inset-bottom));
}
.lightbox.is-kabar img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}
.lightbox.is-kabar .lightbox-film { top: 64px; }
.lightbox.is-kabar .lightbox-close,
html.native-app .lightbox.is-kabar .lightbox-close,
body.native-app .lightbox.is-kabar .lightbox-close {
  display: grid !important;
  place-items: center;
  z-index: 80;
  pointer-events: auto;
  touch-action: manipulation;
}
.lightbox-kabar { display: none; }
.lightbox.is-kabar .lightbox-kabar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 20px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.lightbox.is-kabar .lightbox-kabar strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lightbox.is-kabar .lightbox-kabar-line {
  margin: 2px 0 0;
  max-width: 36rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.lightbox-kabar-line[hidden] { display: none !important; }
.lightbox.is-kabar .lightbox-kabar-seen {
  margin: 0;
  max-width: 36rem;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}
.lightbox-kabar-seen[hidden] { display: none !important; }
.lightbox-kabar-dots { display: none; }
.lightbox.is-kabar .lightbox-kabar-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 6px;
  pointer-events: none;
}
.lightbox.is-kabar .lightbox-kabar-dots[hidden] { display: none !important; }
.lightbox-kabar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.lightbox-kabar-dot.is-on { background: #fff; }
.lightbox.is-chat-film .lightbox-actions,
.lightbox.is-editing .lightbox-chat-save,
.lightbox.is-editing .lightbox-chat-more,
.lightbox.is-editing .lightbox-chat-menu,
.lightbox.is-editing .lightbox-chat-reply,
.lightbox.is-editing .lightbox-chat-meta,
.lightbox.is-sticker-crop .lightbox-chat-save,
.lightbox.is-sticker-crop .lightbox-chat-more,
.lightbox.is-sticker-crop .lightbox-chat-menu,
.lightbox.is-sticker-crop .lightbox-chat-reply,
.lightbox.is-sticker-crop .lightbox-chat-meta,
.lightbox.is-edit-preparing .lightbox-chat-save,
.lightbox.is-edit-preparing .lightbox-chat-more,
.lightbox.is-edit-preparing .lightbox-chat-menu,
.lightbox.is-edit-preparing .lightbox-chat-reply {
  display: none !important;
}

.lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
}

/* HP / app: tanpa tombol ✕ (mirip WA) — tutup pakai back / geser turun / ketuk luar */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .lightbox-close {
    display: none !important;
  }
}
html.native-app .lightbox-close,
body.native-app .lightbox-close {
  display: none !important;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
}
.lightbox-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-counter {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 10px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.msg-album-more {
  cursor: pointer;
  z-index: 2;
}

.lightbox-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px;
  z-index: 2;
}
.lightbox.is-call-photo #btn-lightbox-edit,
.lightbox.is-call-photo #btn-lightbox-sticker {
  display: none;
}
.lightbox.is-call-photo .lightbox-actions {
  flex-wrap: nowrap;
}

.lightbox.is-sticker-crop .lightbox-actions,
.lightbox.is-sticker-crop .lightbox-close,
.lightbox.is-editing .lightbox-actions,
.lightbox.is-editing .lightbox-nav,
.lightbox.is-editing .lightbox-counter,
.lightbox.is-editing .lightbox-close {
  display: none !important;
}

.lightbox.is-editing #lightbox-img {
  visibility: hidden;
}

.lightbox.is-edit-preparing .lightbox-actions,
.lightbox.is-edit-preparing .lightbox-nav,
.lightbox.is-edit-preparing .lightbox-counter {
  visibility: hidden;
}

.lightbox-action {
  border: none;
  border-radius: 22px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  background: #0a6b5c;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.lightbox-action-edit {
  background: rgba(255, 255, 255, 0.18);
}

.lightbox-action:active {
  transform: scale(0.97);
}

#btn-lightbox-copy {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.lightbox.is-editing .lightbox-stage {
  bottom: 230px;
  pointer-events: auto;
}
.lightbox.is-editing #lightbox-img {
  pointer-events: none;
}
.lightbox-edit-bar,
.lb-edit-btn,
.lb-edit-size,
.lb-edit-color {
  touch-action: manipulation;
}

.lightbox-edit-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  width: auto;
  height: auto;
  border-radius: 8px;
  touch-action: none;
  z-index: 3;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.lightbox-edit-canvas.hidden { display: none !important; }

.lightbox.is-stickers .lightbox-edit-canvas {
  bottom: calc(168px + var(--lb-sticker-lift, 170px));
  max-height: calc(100% - 188px - var(--lb-sticker-lift, 170px));
}

.lightbox.is-erasing .lightbox-edit-canvas,
.lightbox.is-blurring .lightbox-edit-canvas,
.lightbox.is-magic .lightbox-edit-canvas {
  cursor: cell;
}

.lightbox-edit-overlays {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.lightbox:not(.is-editing) .lightbox-edit-overlays {
  display: none !important;
}

.lb-edit-chip {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 80%;
  margin: 0;
  padding: 2px 4px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  color: #25d366;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.4);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lb-edit-chip.is-emoji {
  background: transparent;
  border-color: transparent;
  text-shadow: none;
  line-height: 1;
  padding: 0;
}

.lb-edit-chip.is-badge {
  padding: 0.28em 0.62em;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: var(--badge, #7a1f2b);
  color: var(--ink, #fff6ea);
  text-shadow: none;
  white-space: nowrap;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.lb-edit-sizes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.lb-edit-size {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
}

.lb-edit-size.is-active {
  background: #0a6b5c;
}

.lightbox-edit-stickers {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(168px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 18px;
  background: #141c22;
}

.lb-sticker-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lb-sticker-row::-webkit-scrollbar { display: none; }

.lightbox-edit-stickers.hidden { display: none !important; }

.lb-sticker {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.lb-sticker:active,
.lb-sticker.is-active {
  background: #0a6b5c;
}

.lb-sticker-label {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-sticker-mks {
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fill, #7a1f2b);
  color: var(--ink, #fff6ea);
  font-size: 0.82rem;
  font-weight: 800;
}

.lb-sticker-mks.is-active,
.lb-sticker-mks:active {
  background: var(--fill, #7a1f2b);
  box-shadow: 0 0 0 2px #fff;
}

.lb-sticker-new {
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.lb-sticker-make {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-sticker-make.hidden { display: none !important; }

.lb-sticker-make input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.lb-sticker-make input::placeholder { color: rgba(255, 255, 255, 0.45); }

.lb-sticker-make-colors {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.lb-make-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c, #fff);
  padding: 0;
  cursor: pointer;
}

.lb-make-color.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.9);
}

.lb-crop-box {
  position: absolute;
  z-index: 6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  touch-action: none;
  cursor: move;
}

.lb-crop-box.hidden { display: none !important; }

.lb-crop-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0a6b5c;
  touch-action: none;
}

.lb-crop-handle[data-handle="nw"] { left: -9px; top: -9px; cursor: nwse-resize; }
.lb-crop-handle[data-handle="ne"] { right: -9px; top: -9px; cursor: nesw-resize; }
.lb-crop-handle[data-handle="sw"] { left: -9px; bottom: -9px; cursor: nesw-resize; }
.lb-crop-handle[data-handle="se"] { right: -9px; bottom: -9px; cursor: nwse-resize; }

#btn-lb-crop-apply.hidden { display: none !important; }

.lightbox-edit-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  z-index: 80;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11, 20, 26, 0.97);
  border-radius: 18px 18px 0 0;
  transform: none;
}

.lb-edit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  scrollbar-width: none;
}

.lb-edit-row::-webkit-scrollbar { display: none; }

.lb-edit-row-tools {
  justify-content: center;
  gap: 6px;
}

.lb-edit-row-tools .lb-edit-btn {
  width: 38px;
  min-width: 34px;
  height: 38px;
  padding: 0;
  flex: 0 1 38px;
}

.lb-edit-row-meta {
  gap: 10px;
}

.lb-edit-row-actions {
  justify-content: center;
  gap: 14px;
}

.lb-edit-actions-start,
.lb-edit-actions-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.lb-edit-actions-start .lb-edit-btn {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.lb-edit-undo {
  background: rgba(255, 255, 255, 0.28);
  font-size: 1.15rem;
}

.lightbox-edit-bar.hidden { display: none !important; }

/* Layar lebar: foto penuh, toolbar edit hanya satu di bawah. */
@media (min-width: 900px) {
  body:not(.native-app) .lightbox-actions,
  body:not(.native-app) .lightbox-edit-text,
  body:not(.native-app) .lightbox-kicau,
  body:not(.native-app) .lightbox-edit-stickers {
    left: 50%;
    right: auto;
    width: min(480px, calc(100% - 32px));
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
  }

  body:not(.native-app) .lightbox-stage,
  body:not(.native-app) .lightbox-edit-bar {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }

  body:not(.native-app) .lightbox-kicau {
    top: 0;
    bottom: 0;
  }
}

.lb-edit-btn {
  border: none;
  border-radius: 20px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.lb-edit-btn.is-active,
.lb-edit-tool.is-active {
  background: #0a6b5c;
}

.lb-edit-done {
  background: #25d366;
  color: #0b141a;
}

.lightbox-kicau {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: auto;
  pointer-events: auto;
}

.lightbox-kicau.hidden { display: none !important; }

.lightbox-kicau-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0, 0, 0, 0.45);
}

.lightbox-kicau-card {
  position: relative;
  margin: 12px;
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(20, 28, 34, 0.97);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.lightbox-kicau-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
}

.lightbox-kicau-card input {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
}

.lightbox-kicau-card input::placeholder { color: rgba(255, 255, 255, 0.45); }

.lightbox-kicau-places {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lightbox-kicau-places::-webkit-scrollbar { display: none; }

.lb-kicau-place {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.lb-kicau-place.is-active {
  background: #25d366;
  color: #0b141a;
}

.lightbox-kicau-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.lb-edit-ghost {
  background: rgba(255, 255, 255, 0.1);
}

.lb-edit-colors {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0 4px;
}

.lb-edit-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: var(--c, #fff);
  padding: 0;
  cursor: pointer;
}

.lb-edit-color.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.9);
}

.lightbox-edit-text {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(200px + env(safe-area-inset-bottom));
  z-index: 85;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(20, 28, 34, 0.96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.lightbox-edit-text.hidden { display: none !important; }

.lightbox-edit-text input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.lightbox-edit-text input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.message-compose {
  display: flex;
  gap: 8px;
  padding: 6px 8px calc(8px + var(--safe-bottom));
  background: #f0f2f5;
  border-top: none;
  flex-shrink: 0;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

#screen-chat-room.kb-open .message-compose {
  /* keyboard sudah di bawah — jangan tambah safe-area lagi */
  padding-bottom: 8px;
}

#screen-chat-room.kb-open .chat-attach-sheet {
  bottom: 64px;
}

.chat-quick-chips {
  display: flex;
  gap: 8px;
  padding: 6px 10px 2px;
  background: #f0f2f5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}

.chat-quick-chips.hidden {
  display: none !important;
}

.chat-quick-chips::-webkit-scrollbar {
  display: none;
}

.chat-quick-chip {
  flex: 0 0 auto;
  border: 1px solid #cfd8d4;
  background: #fff;
  color: #0a6b5c;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 8px 12px;
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 36px;
}

.chat-quick-chip:active {
  background: #e7f3ef;
  transform: scale(0.98);
}

.chat-quick-chip.is-add {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  border-style: solid;
  color: #0a6b5c;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  display: grid;
  place-items: center;
}

.quick-phrase-form {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
}
.quick-phrase-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d5ddd9;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9rem;
}

.compose-pill {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: var(--input-bg) !important;
  border-radius: 24px;
  padding: 4px 6px 4px 4px;
  min-height: 48px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.compose-pill #message-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 10px 6px;
  border: none !important;
  border-radius: 0;
  font-size: 16px;
  line-height: 1.35;
  outline: none;
  background: var(--input-bg) !important;
  min-height: 40px;
  max-height: 120px;
  box-sizing: border-box;
  box-shadow: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--green);
  opacity: 1 !important;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  field-sizing: content;
}

.compose-pill #message-input::placeholder {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  opacity: 1;
}

.compose-pill #message-input:-webkit-autofill,
.compose-pill #message-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111b21 !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 99999s ease-out;
}

.compose-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #54656f;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.compose-ico:active {
  background: rgba(0, 0, 0, 0.06);
}

.message-compose input[type="text"],
.message-compose #message-input,
.message-compose textarea#message-input {
  /* fallback jika di luar pill */
  flex: 1 1 auto;
  min-width: 0;
}

#screen-chat-room .btn-compose-action.btn-voice,
#screen-chat-room .btn-compose-action.btn-send {
  background: var(--green);
  color: #fff;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(10, 107, 92, 0.35);
  margin-bottom: 0;
}

.chat-select-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #0a6b5c 0%, #086055 100%);
  color: #fff;
  flex-shrink: 0;
  z-index: 22;
}
.chat-select-bar.hidden { display: none !important; }
.chat-select-bar .btn-icon {
  color: #fff;
  background: transparent;
  border: none;
}
.chat-select-count {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 700;
}
.btn-select-share,
.btn-select-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.btn-select-delete {
  background: rgba(229, 57, 53, 0.92);
}
.btn-select-share:disabled,
.btn-select-delete:disabled {
  opacity: 0.45;
  cursor: default;
}
#screen-chat-room.chat-selecting > .chat-topbar {
  display: none !important;
}
#screen-chat-room.chat-selecting .message-compose,
#screen-chat-room.chat-selecting .chat-quick-chips {
  display: none !important;
}
.message.msg-selectable {
  cursor: pointer;
}
.message.msg-selected {
  outline: 2px solid #0a6b5c;
  outline-offset: 2px;
  position: relative;
}
.message.msg-selected::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0a6b5c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.message.theirs.msg-selected::after {
  right: auto;
  left: 8px;
}
.message.has-kicau-card.msg-selected {
  outline-offset: 3px;
}
.message.has-kicau-card.msg-selectable .msg-kicau-card {
  pointer-events: auto;
}
#screen-chat-room.chat-selecting .msg-kicau-card {
  cursor: pointer;
}
.msg-media-expired {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 240px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(15, 40, 35, 0.06);
  color: #3d4f4a;
  font-size: 0.86rem;
  line-height: 1.35;
}
.msg-media-expired-ico {
  font-size: 1.1rem;
  line-height: 1.2;
}
.message.mine .msg-media-expired {
  background: rgba(255, 255, 255, 0.35);
}

.chat-attach-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: transparent;
}

.chat-attach-backdrop.hidden { display: none !important; }

.chat-attach-sheet {
  position: absolute;
  left: 10px;
  bottom: calc(64px + var(--safe-bottom));
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: min(232px, calc(100% - 24px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(16, 32, 25, 0.22);
  padding: 6px;
  transform-origin: left bottom;
  animation: attachIn 0.16s var(--ease);
}

.chat-attach-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  color: #1b1b1b;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 10px;
}

.chat-attach-item:active {
  background: #f3f6f4;
}

.attach-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.attach-gallery { background: #1e88e5; }
.attach-camera { background: #e91e63; }
.attach-doc { background: #7e57c2; }
.attach-audio { background: #fb8c00; }
.attach-loc { background: #43a047; }
.attach-contact { background: #00897b; }

.chat-attach-sheet.hidden { display: none !important; }

html[data-theme="dark"] .chat-attach-item {
  color: var(--text);
}
html[data-theme="dark"] .chat-attach-item:active {
  background: rgba(255, 255, 255, 0.08);
}

@keyframes attachIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0 4px;
  border-radius: 12px;
  background: rgba(16, 32, 25, 0.06);
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  max-width: 240px;
}

.msg-file:active { opacity: 0.85; }

.msg-file-ico {
  font-size: 1.3rem;
}

.msg-person-card,
.msg-place-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(220px, 68vw);
  margin: 2px 0 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.msg-person-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #075e54;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}
.msg-person-name {
  font-weight: 750;
  font-size: 0.95rem;
}
.msg-person-cta,
.msg-place-cta {
  display: block;
  text-align: center;
  background: #fff;
  color: #075e54;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 750;
  font-size: 0.86rem;
}
.msg-place-map {
  display: block;
  height: 140px;
  border-radius: 12px;
  background-color: #d7e6df;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.msg-place-live {
  font-size: 0.78rem;
  font-weight: 650;
  color: #075e54;
}
.loc-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.28);
}
.loc-backdrop.hidden,
.loc-sheet.hidden { display: none !important; }
.loc-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  z-index: 45;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(16, 32, 25, 0.28);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loc-map {
  height: 168px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: #d7e6df;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.loc-map::after,
.msg-place-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  background: #e53935;
  border: 3px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
}
.loc-status {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  overflow: visible;
  flex-shrink: 0;
  background: transparent;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.loc-live-label {
  margin: 8px 0 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #075e54;
}
.loc-now,
.loc-times button,
.loc-cancel {
  border: none;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 12px;
}
.loc-now {
  background: #075e54;
  color: #fff;
}
.loc-now:disabled,
.loc-times button:disabled { opacity: 0.45; }
.loc-times {
  display: flex;
  gap: 8px;
}
.loc-times button {
  flex: 1;
  background: #e7f3ef;
  color: #075e54;
}
.loc-cancel {
  background: transparent;
  color: #54656f;
}
.loc-now,
.loc-times,
.loc-cancel,
.loc-live-label {
  flex-shrink: 0;
}

.msg-phone {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#phone-sheet a.msg-action-reply {
  display: block;
  width: 100%;
  padding: 14px 4px;
  border-bottom: 1px solid #eff3f4;
  text-align: center;
  text-decoration: none;
  font-weight: 650;
}

.msg-link-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(16, 32, 25, 0.06);
  border-left: 3px solid #0a6b5c;
  text-decoration: none;
  color: inherit;
  max-width: 260px;
  min-width: 160px;
}

.message.mine .msg-link-card {
  background: rgba(7, 94, 84, 0.1);
  border-left-color: #075e54;
  color: #075e54;
}

.msg-link-domain {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: #536471;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message.mine .msg-link-domain {
  color: #0a6b5c;
}

.msg-link-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message.mine .msg-link-title {
  color: #064c44;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.msg-link-card:active {
  opacity: 0.88;
}

.msg-kicau-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(100%, 248px);
  margin: 2px 0 4px;
  padding: 0;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: #0f1419;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  font: inherit;
  box-shadow: 0 1px 2px rgba(16, 32, 25, 0.08);
}

.message.mine .msg-kicau-card,
.message.theirs .msg-kicau-card {
  background: #fff;
  color: #0f1419;
}

.msg-kicau-thumb {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
  background: #dfe5e2;
}

.msg-kicau-thumb-empty,
.msg-kicau-thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #536471;
  background: linear-gradient(145deg, #e8eeeb, #d5ddd8);
}

.msg-kicau-thumb-video span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.95rem;
  padding-left: 2px;
}

.msg-kicau-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 11px;
  background: #fff;
}

.msg-kicau-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0a6b5c;
}

.message.mine .msg-kicau-label,
.message.theirs .msg-kicau-label {
  color: #0a6b5c;
}

.msg-kicau-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-kicau-fact {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f1419;
}

.msg-kicau-snippet {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
  color: #0f1419;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  word-break: break-word;
}

.message.mine .msg-kicau-snippet,
.message.theirs .msg-kicau-snippet {
  color: #0f1419;
}

.msg-kicau-cta {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0a6b5c;
}

.message.mine .msg-kicau-cta,
.message.theirs .msg-kicau-cta {
  color: #0a6b5c;
  text-decoration: none;
}

.msg-kicau-card:active {
  opacity: 0.92;
}

.message.has-kicau-card {
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 6px;
  min-width: min(12rem, 100%);
}

.message.has-status-react {
  min-width: 0;
  padding: 4px 8px 3px 4px;
}
.msg-status-react {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.msg-status-react-media {
  position: relative;
  width: 46px;
  height: 62px;
  border-radius: 7px;
  overflow: hidden;
  background: #1a1a1a;
  flex: none;
}
.msg-status-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.msg-status-play::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #111;
}
.msg-status-react-img,
.msg-status-react-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.msg-status-react-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.msg-status-react-emoji {
  font-size: 1.45rem;
  line-height: 1;
}
.msg-status-react-label {
  font-size: 0.78rem;
  color: #667781;
  opacity: 1;
}
.message.mine .msg-status-react-label { color: #3b6a5e; }
.message.has-status-react .msg-caption {
  margin-top: 6px;
}
.msg-status-react.is-gone {
  cursor: default;
}
.msg-status-react.is-gone .msg-status-react-media,
.msg-status-react.is-gone .msg-status-play {
  filter: grayscale(1);
  opacity: 0.4;
}
.msg-status-react.is-gone .msg-status-react-emoji {
  opacity: 0.45;
}
.msg-status-react.is-gone .msg-status-react-label {
  opacity: 0.9;
  white-space: normal;
  line-height: 1.2;
  max-width: 8.5rem;
}

.msg-video {
  width: auto;
  max-width: min(260px, 72vw);
  max-height: 280px;
  height: auto;
  border-radius: 12px;
  background: #000;
  margin: 2px 0 4px;
  flex-shrink: 0;
}
.msg-video.is-turn-90,
.msg-video.is-turn-270 {
  width: min(280px, 70vw);
  height: min(200px, 56vw);
  max-width: none;
  max-height: none;
  transform: rotate(90deg);
  margin: 28px 0;
}
.msg-video.is-turn-270 { transform: rotate(-90deg); }
.msg-video.is-turn-180 { transform: rotate(180deg); }

.msg-video-wrap {
  position: relative;
  container-type: size;
  width: min(230px, 68vw);
  aspect-ratio: 3 / 4;
  max-height: 320px;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.msg-video-wrap.is-wide {
  width: min(280px, 78vw);
  max-height: 200px;
}
.msg-video-wrap .msg-video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  pointer-events: none;
  background: #000;
}
.msg-video-wrap video::-webkit-media-controls,
.msg-video-wrap video::-webkit-media-controls-enclosure,
.msg-video-wrap video::-webkit-media-controls-panel,
.msg-video-wrap video::-webkit-media-controls-play-button,
.msg-video-wrap video::-webkit-media-controls-start-playback-button,
.msg-video-wrap video::-webkit-media-controls-overlay-play-button,
.msg-quote-video::-webkit-media-controls-start-playback-button,
.msg-quote-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.msg-video-wrap.is-turned .msg-video,
.msg-video-wrap.is-turned-180 .msg-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg);
}
.msg-video-wrap.is-turned-270 .msg-video {
  transform: translate(-50%, -50%) rotate(-90deg);
}
.msg-video-wrap.is-turned-180 .msg-video {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(180deg);
}
.msg-video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 22%, transparent 40%);
}
.msg-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.msg-video-play::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 17px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #1a1a1a;
}
.msg-video-dur {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.msg-video-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  display: none;
}
.msg-video-wrap.is-playing .msg-video-bar,
.msg-video-wrap.is-seen .msg-video-bar { display: block; }
.msg-video-wrap.is-playing .msg-video-play,
.msg-video-wrap.is-playing .msg-video-shade,
.msg-video-wrap.is-playing .msg-video-dur {
  opacity: 0;
}
.msg-video-album .msg-video-wrap.is-album {
  width: 100%;
  aspect-ratio: 1;
  max-height: none;
  margin: 0;
  border-radius: 6px;
}
.msg-video-album .msg-video-wrap.is-album .msg-video-play {
  width: 36px;
  height: 36px;
}
.msg-video-album .msg-video-wrap.is-album .msg-video-play::before {
  left: 13px;
  top: 11px;
  border-width: 7px 0 7px 12px;
}
.msg-video-album .msg-video-wrap:nth-child(n+5) { display: none; }
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) {
  border-radius: 8px;
  padding: 3px;
}
.message.mine:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) {
  border-bottom-right-radius: 4px;
}
.message.theirs:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) {
  border-bottom-left-radius: 4px;
}
.message:has(.msg-video-wrap) {
  padding: 3px;
}
.message:has(.msg-video-wrap) .msg-caption,
.message:has(.msg-video-wrap) .msg-forwarded {
  padding-left: 4px;
  padding-right: 4px;
}
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .msg-meta {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 3;
  margin: 0;
  pointer-events: none;
}
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .time,
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .time-text,
html[data-theme="dark"] .message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .time,
html[data-theme="dark"] .message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .time-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .msg-receipt.sent,
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .msg-receipt.delivered {
  color: rgba(255, 255, 255, 0.92);
}
.message:has(.msg-video-wrap):not(:has(.msg-caption)):not(:has(.msg-status-react)) .msg-receipt.read {
  color: #53bdeb;
}
.msg-video-wrap:has(.is-turn-90),
.msg-video-wrap:has(.is-turn-270),
.msg-video-wrap:has(.is-turn-180) {
  overflow: visible;
  background: transparent;
}

.chat-video-view {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  touch-action: none;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.chat-video-film {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.chat-video-view.is-film .chat-video-film {
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.chat-video-view.is-dragging .chat-video-film,
.chat-video-view.is-film-jump .chat-video-film {
  transition: none;
}
.chat-video-view .chat-media-side {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  background: #000;
}
.chat-video-view .chat-media-side.is-next { left: 100%; }
.chat-video-view .chat-media-side.is-prev { left: -100%; }
.chat-video-view .chat-media-side[hidden] { display: none !important; }
.chat-video-view.is-handoff {
  background: transparent;
}
.chat-video-view.is-handoff #chat-video-player {
  opacity: 0;
}
.chat-video-view.hidden { display: none; }
.chat-video-view.is-dragging { transition: none; }
.chat-video-view.is-pinch-back video {
  transition: transform 0.2s ease;
}
.chat-video-view.is-pinching video {
  transition: none;
}
.chat-video-view video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  pointer-events: none;
}
.chat-video-view video.is-turn-90 { transform: rotate(90deg); }
.chat-video-view video.is-turn-270 { transform: rotate(-90deg); }
.chat-video-view video.is-turn-180 { transform: rotate(180deg); }
.chat-video-view video.chat-media-side.is-next { left: 100%; width: 100%; height: 100%; }
.chat-video-view video.chat-media-side.is-prev { left: -100%; width: 100%; height: 100%; }
.chat-video-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
}
.chat-video-meta {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 60px;
  right: 224px;
  z-index: 2;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.chat-video-meta::before {
  content: "";
  position: absolute;
  left: -60px;
  right: -224px;
  top: calc(-1 * max(12px, env(safe-area-inset-top)));
  height: 92px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
  z-index: -1;
}
.chat-video-meta strong {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-video-meta span {
  font-size: 0.72rem;
  line-height: 1.2;
  opacity: 0.88;
}
.chat-video-mute {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 60px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.chat-video-mute .is-off { display: none; }
.chat-video-mute.is-muted .is-on { display: none; }
.chat-video-mute.is-muted .is-off { display: block; }
.chat-video-speed {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 164px;
  z-index: 2;
  height: 40px;
  min-width: 48px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 700 0.82rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.chat-video-save {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 108px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.chat-video-more {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.chat-video-menu {
  display: none;
}
.chat-video-menu:not(.hidden) {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: #1f2c34;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.chat-video-menu button {
  border: none;
  background: transparent;
  color: #fff;
  text-align: left;
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.chat-video-menu button:active { background: rgba(255, 255, 255, 0.08); }
.chat-video-menu button.is-wait { opacity: 0.55; }
.chat-video-menu button.is-danger,
.lightbox-chat-menu button.is-danger { color: #ff8a80; }
.chat-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.chat-video-play::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #111;
}
.chat-video-view.is-playing .chat-video-play { opacity: 0; }
.chat-video-close,
.chat-video-meta,
.chat-video-mute,
.chat-video-speed,
.chat-video-save,
.chat-video-more,
.chat-video-menu,
.chat-video-scrub,
.chat-video-reply {
  transition: opacity 0.22s ease;
}
.chat-video-view.is-clean .chat-video-close,
.chat-video-view.is-clean .chat-video-meta,
.chat-video-view.is-clean .chat-video-mute,
.chat-video-view.is-clean .chat-video-speed,
.chat-video-view.is-clean .chat-video-save,
.chat-video-view.is-clean .chat-video-more,
.chat-video-view.is-clean .chat-video-menu,
.chat-video-view.is-clean .chat-video-scrub,
.chat-video-view.is-clean .chat-video-reply {
  opacity: 0;
  pointer-events: none;
}
.chat-video-view.is-clean .chat-video-menu:not(.hidden),
.chat-video-view.is-clean:has(.chat-video-menu:not(.hidden)) .chat-video-more,
.chat-video-view.is-clean .chat-video-sticker-tray:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}
.chat-video-sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.chat-video-sticker,
.msg-video-sticker {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  padding: 0;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  user-select: none;
}
.chat-video-sticker { font-size: 3.4rem; }
.chat-video-view.is-sticker .chat-video-sticker { pointer-events: auto; cursor: grab; }
.chat-video-trim {
  position: absolute; left: 12px; right: 12px; bottom: 18px; z-index: 6;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-video-trim.hidden { display: none; }
.chat-video-view.is-trim .chat-video-scrub,
.chat-video-view.is-trim .chat-video-reply { opacity: 0; pointer-events: none; }
.chat-video-view.is-clean .chat-video-trim { opacity: 1; pointer-events: auto; }
.chat-video-trim-bar {
  position: relative; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.22);
}
.chat-video-trim-sel {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: rgba(37, 211, 102, .55); border-radius: 8px;
}
.chat-video-trim-now {
  position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px;
  background: #fff; pointer-events: none;
}
.chat-video-trim-hand {
  position: absolute; top: 50%; width: 18px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 6px; background: #fff; transform: translate(-50%, -50%);
  touch-action: none;
}
.chat-video-trim-len {
  margin: 0; text-align: center; color: #fff; font-size: 13px;
}
.msg-video-sticker { font-size: 1.55rem; }
.chat-video-sticker-tray {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(17, 27, 33, 0.94);
}
.chat-video-sticker-tray.hidden { display: none; }
.chat-video-sticker-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.chat-video-sticker-row button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 1.55rem;
  cursor: pointer;
}
.chat-video-sticker-row button:active { background: rgba(255, 255, 255, 0.08); }
.chat-video-sticker-actions { display: flex; justify-content: flex-end; gap: 8px; }
.chat-video-sticker-actions button {
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#btn-chat-video-sticker-cancel,
#btn-chat-video-trim-cancel { background: transparent; color: #fff; }
#btn-chat-video-sticker-send,
#btn-chat-video-trim-send { background: #25d366; color: #062; }
#btn-chat-video-trim-send:disabled { opacity: .55; }
.chat-video-scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
  touch-action: none;
}
.chat-video-reply {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}
.chat-video-reply input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.chat-video-reply input::placeholder { color: rgba(255, 255, 255, 0.72); }
.chat-video-reply-send {
  flex: none;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #1f8a70;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.chat-video-time {
  flex: none;
  min-width: 2.5rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.chat-video-end { text-align: right; }
.chat-video-track {
  position: relative;
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.chat-video-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.chat-video-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.chat-video-knob {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.chat-video-view.is-seeking .chat-video-track::before,
.chat-video-view.is-seeking .chat-video-bar { height: 5px; }
.chat-video-view.is-seeking .chat-video-knob {
  width: 18px;
  height: 18px;
  margin-left: -9px;
}
.chat-video-skip {
  position: absolute;
  top: 46%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.chat-video-skip.is-left { left: 12%; }
.chat-video-skip.is-right { right: 12%; }
.chat-video-skip.is-on { opacity: 1; }
body.chat-video-open { overflow: hidden; }

/* PROFILE */
.profile-header {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  text-align: left;
  align-items: center;
  background: transparent;
  padding: 8px 2px 4px;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 8px;
}

.profile-header > .avatar-upload {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--green);
}

.profile-header > h3 {
  grid-column: 2;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.profile-header > #profile-username {
  grid-column: 2;
  margin: 2px 0 0;
}

.profile-header > #profile-bio,
.profile-header > #profile-area,
.profile-header > #profile-stats,
.profile-header > #profile-streak,
.profile-header > #pengajak-badge,
.profile-header > #admin-badge,
.profile-header > #profile-setup-banner,
.profile-header > .profile-actions,
.profile-header > .profile-action-hint {
  grid-column: 1 / -1;
}

.profile-header h3 { margin-top: 0; font-size: 1.2rem; }
.profile-bio { margin-top: 8px; color: var(--text); font-size: 0.95rem; white-space: pre-wrap; word-break: break-word; }
.profile-bio.profile-bio-empty {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
  white-space: normal;
  cursor: pointer;
}
.profile-header > #profile-bio {
  cursor: pointer;
}
.profile-area {
  margin: 4px 0 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.profile-area.profile-area-empty {
  font-weight: 600;
  font-style: italic;
}

.profile-fold > .profile-form {
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 14px 16px;
}
.profile-fold > .profile-form > label:first-of-type {
  margin-top: 8px;
}

.profile-form {
  background: var(--surface);
  padding: 16px;
  border-radius: 16px;
  box-shadow: none;
  margin-top: 16px;
}

.profile-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  margin-top: 14px;
}

.profile-form input,
.profile-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}
.profile-form input:not([type="checkbox"]):focus,
.profile-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(10, 107, 92, 0.12);
}

.profile-form input.input-locked,
.profile-form input[readonly],
.profile-form input:disabled {
  background: var(--elevated, #f5f6f6);
  color: var(--text);
  opacity: 1;
  -webkit-text-fill-color: var(--text);
  cursor: default;
}

.profile-form .quiet-hours-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  margin-top: 2px;
  flex: 0 0 18px;
}

.profile-form > .btn-primary {
  margin-top: 18px;
  min-height: 48px;
  border-radius: 12px;
  box-shadow: none;
  background: var(--green);
}

.profile-danger-zone {
  margin: 12px 0 32px;
  padding: 14px 16px;
  border: 1px solid rgba(198, 40, 40, 0.25);
  border-radius: var(--radius);
  background: var(--surface);
}
.profile-danger-zone .muted {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.profile-disclaimer {
  margin: 18px 2px 0;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: left;
  color: var(--muted);
}
.profile-logout {
  display: block;
  width: 100%;
  margin: 12px 0 32px;
  padding: 14px 16px;
  border: 1px solid rgba(198, 40, 40, 0.28);
  border-radius: 14px;
  background: transparent;
  color: #c62828;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
}
.profile-danger-zone .btn {
  border-color: rgba(198, 40, 40, 0.45);
}

.delete-account-body {
  padding: 16px 16px 24px;
}
.delete-account-body > p {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}
.delete-account-body label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.delete-account-body input[type="password"] {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  margin-bottom: 8px;
}
.delete-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.delete-account-actions .btn {
  flex: 1;
}
.btn-danger {
  background: #c62828;
  color: #fff;
  border: none;
}
.btn-danger:disabled {
  opacity: 0.65;
}

.report-body {
  padding: 16px 16px 24px;
}
.report-body > .muted {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.report-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.report-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.report-chip.active {
  border-color: var(--green, #0a6b5c);
  background: rgba(10, 107, 92, 0.08);
  color: var(--green, #0a6b5c);
  font-weight: 600;
}
.report-body label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.report-body input[type="text"] {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
}
.report-also-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
}
.report-also-block.hidden {
  display: none !important;
}
.report-also-block input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--green, #0a6b5c);
}

/* MODAL */
.modal {
  border: none;
  border-radius: 20px 20px 0 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
  max-height: 85dvh;
  margin: auto auto 0;
  background: var(--sheet);
  color: var(--text);
  box-shadow: 0 -8px 32px rgba(16, 32, 25, 0.12);
}

body.native-app .modal {
  margin-bottom: var(--safe-bottom);
  max-height: calc(85dvh - var(--safe-bottom));
}

/* Status viewer: override bottom-sheet .modal (harus setelah .modal) */
dialog.status-viewer-modal.modal {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  background: #0f1419;
  color: #fff;
  box-shadow: none;
  padding: 0;
}
body.native-app dialog.status-viewer-modal.modal {
  margin-bottom: 0;
  max-height: 100dvh;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
dialog.status-viewer-modal.modal::backdrop {
  background: #000;
}

.modal::backdrop { background: rgba(0, 0, 0, 0.45); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--sheet);
  z-index: 2;
}

.modal-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modal-header .btn-icon {
  color: var(--text);
  min-width: 44px;
  min-height: 44px;
}

.modal-header .btn-icon:active {
  background: rgba(16, 32, 25, 0.08);
}

.comments-sheet {
  max-height: 88dvh;
  height: min(88dvh, 720px);
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.comments-sheet[open] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.comments-sheet > .modal-header,
.comments-sheet > .comment-post-preview,
.comments-sheet > .comment-reply-banner,
.comments-sheet > .comment-compose,
.comments-sheet > .comment-disabled-note {
  flex-shrink: 0;
}

.comments-sheet:not([open]) {
  display: none;
}

.comment-post-preview {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #f7f9f9;
  overflow: visible;
}

.comment-post-preview .preview-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 34dvh;
  margin: 0 auto 10px;
  object-fit: fill;
  border-radius: 12px;
  background: transparent;
}
.comment-post-preview .preview-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f1419;
}

.comment-post-preview .preview-text {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #536471;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comments-list {
  padding: 8px 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eff3f4;
}

.comment-item:active {
  background: #f7f9f9;
}

.comment-item .body { flex: 1; min-width: 0; }

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-size: 0.85rem;
}

.comment-meta .author {
  font-weight: 700;
  color: #0f1419;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
}

.comment-meta .handle,
.comment-meta .dot,
.comment-meta .time {
  color: #536471;
}

.comment-item .text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #0f1419;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2px;
}

.comment-reply-to {
  font-size: 0.8rem;
  color: #536471;
  margin-bottom: 4px;
}

.comment-reply-to strong {
  color: var(--green);
  font-weight: 600;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.comment-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.comment-reactions .c-react-chip {
  font: inherit;
}

.comment-reactions .c-react-add {
  width: 28px;
  height: 28px;
  border: 1px dashed #cfd9de;
  background: #f7f9f9;
  border-radius: 999px;
  color: #536471;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.comment-reactions .c-react-add:active {
  background: #eff3f4;
}

.comment-react-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1200;
}

.comment-react-backdrop.hidden,
.comment-react-sheet.hidden {
  display: none !important;
}

.comment-react-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 1250;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.comment-react-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0f1419;
}

.comment-react-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.comment-react-btn {
  border: 1px solid #e9edef;
  background: #f7f9f9;
  border-radius: 12px;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.comment-react-btn .emoji {
  font-size: 1.35rem;
  line-height: 1;
}

.comment-react-btn .label {
  font-size: 0.62rem;
  font-weight: 600;
  color: #536471;
}

.comment-react-btn:active {
  background: #e7f8f5;
  border-color: #075e54;
}

.comment-react-cancel {
  width: 100%;
  border: none;
  background: #f0f2f5;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f1419;
  cursor: pointer;
}

.comment-actions button {
  background: none;
  border: none;
  color: #536471;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.comment-actions button:active {
  background: #f0f2f5;
}

.comment-actions .c-like.liked {
  color: #f91880;
}

.comment-actions .c-report {
  color: #536471;
}

.comment-item .comment-del {
  margin-left: auto;
  background: none;
  border: none;
  color: #f4212e;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}

.comment-reply-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background: #e8f5fe;
  border-top: 1px solid #eff3f4;
  font-size: 0.85rem;
  color: #0f1419;
  font-weight: 600;
}

.comment-reply-banner.hidden {
  display: none !important;
}

.comment-reply-banner .btn-icon {
  min-width: 36px;
  min-height: 36px;
  color: #536471;
}

.comments-list .empty-state {
  padding: 36px 20px;
}

.comment-compose {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
  flex-shrink: 0;
}

.comment-compose.hidden {
  display: none !important;
}

.comment-disabled-note {
  padding: 12px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: #f7f9f8;
  text-align: center;
  flex-shrink: 0;
}

.comment-disabled-note.hidden {
  display: none !important;
}

.comment-disabled-note p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #536471;
}

.comment-disabled-note .btn {
  min-height: 40px;
}

.comment-compose input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  font-size: 16px;
  min-height: 44px;
}

.comment-compose .btn-sm:disabled {
  opacity: 0.5;
}

#edit-post-modal {
  overflow-y: auto;
}

.edit-post-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-post-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  resize: none;
  min-height: 120px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #1c2b26;
  color: #fff;
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 10070;
  max-width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 8px 24px rgba(16, 32, 25, 0.22);
  animation: toastIn 0.28s var(--ease);
}

body.native-app .toast {
  bottom: calc(var(--nav-h) + 8px);
}

#screen-chat-room ~ .toast,
body:has(#screen-chat-room:not(.hidden)) .toast {
  bottom: calc(72px + var(--safe-bottom));
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.chat-pick {
  width: 100%;
  border: none;
  text-align: left;
  background: var(--surface);
  cursor: pointer;
}

.search-input {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  margin-bottom: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  min-height: 48px;
}

.chat-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.chat-search-row .chat-search-wrap {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.chat-search-wrap {
  position: relative;
  margin-bottom: 4px;
}

.feed-search-wrap {
  position: relative;
  margin: 8px 12px 0;
}
.feed-search-wrap.hidden { display: none !important; }
.feed-search-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  border: 1px solid #e2e8e5;
  border-radius: 50%;
  background: #f7f9f8;
  color: #3d4a45;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.feed-search-toggle svg {
  width: 16px;
  height: 16px;
}
.feed-search-toggle.is-on {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}
html[data-theme="dark"] .feed-search-toggle {
  background: #1f2c34;
  border-color: #2a3942;
  color: #e9edef;
}
html[data-theme="dark"] .feed-search-toggle.is-on {
  background: #075e54;
  border-color: #075e54;
  color: #fff;
}

.feed-search-wrap .search-input {
  margin-bottom: 0;
  padding-right: 44px;
}

.feed-search-people {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f7f9f8;
  border: 1px solid #e8eeec;
}

.feed-search-people.hidden { display: none !important; }

.feed-search-people-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #536471;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.feed-search-people-hint {
  margin: 0;
  font-size: 0.85rem;
}

.feed-search-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.feed-search-person:hover,
.feed-search-person:focus-visible {
  background: #eef5f2;
}

.feed-search-person-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.feed-search-person-meta strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.feed-search-person-meta .muted {
  font-size: 0.8rem;
}

.chat-search-wrap .search-input {
  margin-bottom: 0;
  padding-right: 44px;
}

.btn-clear-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--border, #e7e7e7);
  color: var(--text-muted, #536471);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.btn-clear-search.hidden { display: none !important; }

.chat-search-hint {
  font-size: 0.8rem;
  margin: 6px 2px 10px;
  line-height: 1.35;
}

.chat-search-hint.hidden { display: none !important; }
.chat-contacts-btn {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid #d5ddd9;
  border-radius: 50%;
  background: #fff;
  color: #0a6b5c;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-contacts-btn svg {
  width: 20px;
  height: 20px;
}
.chat-contacts-btn:active {
  background: #eef5f2;
}
html[data-theme="dark"] .chat-contacts-btn {
  background: #1f2c34;
  border-color: #2a3942;
  color: #8ef0c2;
}

.known-people-title {
  margin: 10px 4px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #3d4a45;
}

.known-people-note {
  margin: 0 4px 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.known-person,
.known-invite {
  cursor: default;
}

button.search-chat-cta {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

button.search-chat-cta.is-follow,
button.search-chat-cta.is-invite {
  background: transparent;
  color: #075e54;
  border: 1px solid #075e54;
}

.search-empty .empty-actions {
  margin-top: 4px;
}

.empty-room-card .empty-actions {
  margin-top: 4px;
}

@media (min-width: 640px) {
  #screen-auth {
    padding: 40px 24px;
  }

  .auth-card {
    max-width: 420px;
    padding: 32px 28px 28px;
  }

  /* Tablet / desktop sempit: kolom lebih lega + bayangan */
  body:not(.native-app) #screen-main {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 12px auto;
    min-height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(16, 32, 25, 0.08);
    box-shadow: 0 16px 48px rgba(16, 32, 25, 0.12);
    background: var(--bg);
  }

  body:not(.native-app) #screen-main > .content {
    flex: 1;
    min-height: 0;
    padding-bottom: 12px;
  }

  body:not(.native-app) .bottom-nav {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    max-width: none;
    width: 100%;
    flex-shrink: 0;
    border-radius: 0 0 18px 18px;
  }

  body:not(.native-app) #screen-chat-room {
    max-width: 560px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(16, 32, 25, 0.08);
    box-shadow: 0 16px 48px rgba(16, 32, 25, 0.12);
    top: 12px;
    bottom: 12px;
    height: auto;
  }

  body:not(.native-app) .topbar {
    border-radius: 18px 18px 0 0;
  }
}

/* Desktop lebar: full window (isi layar) */
@media (min-width: 960px) {
  body:not(.native-app) {
    background: var(--bg);
  }

  body:not(.native-app):has(#screen-main:not(.hidden)) {
    overflow: hidden;
  }

  body:not(.native-app) #app {
    height: 100dvh;
    max-height: 100dvh;
  }

  body:not(.native-app) #screen-main {
    --desk-rail: 168px;
    display: grid;
    grid-template-columns: var(--desk-rail) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    max-width: none;
    width: 100%;
    margin: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
    background: var(--bg);
  }

  body:not(.native-app) #screen-main > .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    border-radius: 0;
  }

  body:not(.native-app) #screen-main > #offline-banner {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body:not(.native-app) #screen-main > .content {
    grid-column: 2;
    grid-row: 3;
    padding-bottom: 0;
    min-height: 0;
    background: var(--surface);
  }

  body:not(.native-app) #screen-main > .bottom-nav {
    position: relative;
    grid-column: 1;
    grid-row: 3;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    max-width: none;
    width: auto;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 14px 10px 20px;
    border-top: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: var(--elevated);
  }

  /* Guest CTA: kolom feed saja, bukan full-bleed di bawah sidebar */
  body:not(.native-app).guest-mode #screen-main > .guest-cta-bar {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    align-self: end;
    left: auto;
    right: auto;
    bottom: 0;
    width: auto;
    z-index: 6;
  }
  body:not(.native-app).guest-mode #screen-main > .content {
    padding-bottom: 76px;
  }

  body:not(.native-app) .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 12px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.88rem;
    text-align: left;
  }

  body:not(.native-app) .nav-item:hover {
    background: rgba(10, 107, 92, 0.06);
    color: var(--green);
  }

  body:not(.native-app) .nav-item.active {
    background: rgba(10, 107, 92, 0.1);
  }

  body:not(.native-app) .nav-item.active::before {
    top: 18%;
    bottom: 18%;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 4px 4px 0;
  }

  body:not(.native-app) #screen-main.feed-mode .nav-item.active::before {
    left: 0;
    right: auto;
  }

  body:not(.native-app) .nav-item.active .nav-icon {
    transform: none;
  }

  body:not(.native-app) .nav-icon {
    width: 22px;
    height: 22px;
  }

  body:not(.native-app) #screen-chat-room {
    max-width: none;
    width: 100%;
    left: 0;
    right: 0;
    transform: none;
    top: 0;
    bottom: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* Konten isi sisa layar — bukan kartu sempit di tengah */
  body:not(.native-app) #tab-feed {
    max-width: none;
    width: 100%;
    margin: 0;
    background: #f5f7f6;
    min-height: 100%;
    box-shadow: none;
    padding: 0 24px;
  }

  body:not(.native-app) #tab-feed .tweet-compose,
  body:not(.native-app) #tab-feed .feed-soft-bar,
  body:not(.native-app) #tab-feed .feed-filter-row,
  body:not(.native-app) #tab-feed .feed-tabs,
  body:not(.native-app) #tab-feed .category-filters,
  body:not(.native-app) #tab-feed .feed-list,
  body:not(.native-app) #tab-feed .feed-streak-chip,
  body:not(.native-app) #tab-feed .feed-vitality {
    max-width: 960px;
  }

  body:not(.native-app) #tab-feed .tweet-image-wrap {
    max-width: none;
  }

  body:not(.native-app) #tab-feed .tweet-image {
    max-height: 520px;
  }

  body:not(.native-app) #tab-feed .tweet-image-wrap.is-album .tweet-image {
    max-height: none;
  }

  body:not(.native-app) #tab-chat {
    max-width: none;
    width: 100%;
    margin: 0;
    background: var(--surface);
    min-height: 100%;
    box-shadow: none;
    padding: 16px 28px 28px;
  }

  body:not(.native-app) #tab-chat .chat-list,
  body:not(.native-app) #tab-chat .chat-search-wrap,
  body:not(.native-app) #tab-chat .search-results,
  body:not(.native-app) #tab-chat .chat-search-hint {
    max-width: none;
    width: 100%;
  }

  body:not(.native-app) .avatar-lg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
  }

  body:not(.native-app) .avatar-upload {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
  }

  /* Profil: isi lebar, identitas kiri + pengaturan kanan */
  body:not(.native-app) #tab-profile {
    max-width: none;
    width: 100%;
    margin: 0;
    background: var(--surface);
    padding: 18px 28px 28px;
  }

  body:not(.native-app) #tab-profile.tab-panel {
    padding: 18px 28px 28px;
  }

  body:not(.native-app) .profile-header {
    display: grid;
    grid-template-columns: 88px minmax(260px, 520px);
    column-gap: 18px;
    row-gap: 8px;
    text-align: left;
    align-items: start;
    justify-content: start;
    padding: 16px 0 8px;
    margin-bottom: 4px;
    max-width: 860px;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  body:not(.native-app) .profile-header > .avatar-upload {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: start;
  }

  body:not(.native-app) .profile-header > h3 {
    grid-column: 2;
    margin: 2px 0 0;
    font-size: 1.25rem;
  }

  body:not(.native-app) .profile-header > #profile-username {
    grid-column: 2;
    margin: 0;
  }

  body:not(.native-app) .profile-header > #profile-bio,
  body:not(.native-app) .profile-header > #profile-area {
    grid-column: 2;
    margin: 0;
  }

  body:not(.native-app) .profile-header > #profile-stats {
    grid-column: 2;
    margin: 2px 0 0;
  }

  body:not(.native-app) .profile-header > #pengajak-badge {
    grid-column: 2;
    justify-self: start;
    width: auto;
    margin: 2px 0 0;
  }

  body:not(.native-app) .profile-header > #profile-streak {
    grid-column: 2;
    justify-self: start;
    max-width: 240px;
    width: 100%;
  }

  body:not(.native-app) .profile-header > #admin-badge {
    grid-column: 2;
    justify-self: start;
    width: auto;
    margin: 2px 0 0;
  }

  body:not(.native-app) .profile-header > #profile-setup-banner,
  body:not(.native-app) .profile-header > .profile-actions,
  body:not(.native-app) .profile-header > .profile-action-hint {
    grid-column: 2;
  }

  body:not(.native-app) .profile-header > .profile-links {
    grid-column: 3;
    grid-row: 1 / span 5;
    align-self: start;
    margin: 0;
  }

  body:not(.native-app) .profile-header > .notif-channel-details,
  body:not(.native-app) .profile-header > #bird-sound-row,
  body:not(.native-app) .profile-header > #quiet-hours-row {
    grid-column: 3;
  }

  body:not(.native-app) .profile-header > .profile-invite-card {
    grid-column: 2;
    margin-top: 4px;
    max-width: 420px;
  }

  body:not(.native-app) .profile-actions {
    justify-content: flex-start;
    margin-top: 6px;
  }

  body:not(.native-app) .profile-actions .btn {
    flex: 0 1 auto;
    min-width: 9.5rem;
    max-width: none;
    min-height: 40px;
  }

  body:not(.native-app) .profile-action-hint {
    text-align: left;
    margin: 4px 0 0;
  }

  body:not(.native-app) .profile-streak {
    margin: 4px 0 0;
    max-width: 240px;
    margin-left: 0;
    margin-right: auto;
  }

  body:not(.native-app) .profile-form {
    max-width: 640px;
  }

  body:not(.native-app) .my-kicau-grid-wrap {
    max-width: 640px;
    margin: 4px 0 8px;
  }

  body:not(.native-app) #tab-profile > .profile-invite-card,
  body:not(.native-app) #tab-profile > .profile-links,
  body:not(.native-app) #tab-profile > .profile-fold {
    max-width: 640px;
  }

  body:not(.native-app) .tweet-compose {
    padding: 14px 18px;
  }

  body:not(.native-app) .tab-panel {
    padding: 14px 18px 20px;
  }

  body:not(.native-app) #tab-feed.tab-panel {
    padding: 0 24px;
  }

  body:not(.native-app) .profile-disclaimer {
    text-align: left;
    margin: 12px 0 4px;
  }
}

.invite-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e8f5e9, #e3f2fd);
  border-bottom: 1px solid #eff3f4;
}

.invite-banner strong {
  display: block;
  font-size: 0.92rem;
  color: #0f1419;
}

.invite-banner p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #536471;
}

.notif-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 12px 16px;
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
}

.notif-nudge.hidden { display: none !important; }

.notif-nudge strong {
  display: block;
  font-size: 0.9rem;
  color: #0f1419;
}

.notif-nudge p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: #795548;
}

.notif-nudge-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.empty-card {
  text-align: center;
  padding: 40px 20px 32px;
  color: var(--muted);
  max-width: 360px;
  margin: 0 auto;
}

.empty-illu {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #e8f5f1, #d5ebe4);
  box-shadow: inset 0 0 0 1px rgba(10, 107, 92, 0.08);
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 750;
  color: #0f1419;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.empty-desc {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 16px;
  color: #536471;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.empty-actions .btn-sm {
  min-height: 40px;
  padding: 0 16px;
  font-weight: 650;
}

.empty-card-inline {
  padding: 48px 20px;
}

.empty-chat-card .chat-suggest-box,
.empty-card .feed-suggest-box {
  margin-top: 18px;
  text-align: left;
}

.onboarding-modal {
  width: min(420px, 94vw);
  max-height: min(90dvh, 640px);
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.onboard-body {
  padding: 8px 16px 16px;
  overflow-y: auto;
  max-height: calc(90dvh - 64px);
}

.onboard-intro {
  color: #536471;
  font-size: 0.92rem;
  margin-bottom: 14px;
  line-height: 1.4;
}

.onboard-step {
  background: #f7f9f9;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}

.onboard-step-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.onboard-step-head strong {
  font-size: 0.95rem;
  color: #0f1419;
}

.onboard-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.onboard-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboard-person .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.onboard-person .info strong {
  font-size: 0.9rem;
}

.onboard-person .info span {
  font-size: 0.78rem;
  color: #667781;
}

#btn-onboard-done {
  margin-top: 8px;
}

.admin-badge {
  display: inline-block;
  margin: 6px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff3e0;
  color: #e65100;
  font-size: 0.72rem;
  font-weight: 800;
}

.pengajak-badge {
  display: inline-block;
  justify-self: start;
  width: auto;
  margin: 6px 6px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #0a6b5c;
  font-size: 0.72rem;
  font-weight: 800;
}

.pengajak-badge.hidden { display: none !important; }

.tweet-pinned {
  background: #f3faf7;
  border-left: 3px solid #0a6b5c;
}

.pin-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #075e54;
  margin: 0 16px 6px;
}

.comments-off-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #536471;
  background: #eff3f4;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 16px 6px;
  vertical-align: middle;
}

.reports-list {
  padding: 8px 12px 16px;
  max-height: 70dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reports-admin-hint {
  margin: 0 16px 8px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-wipe-toolbar {
  margin: 0 16px 12px;
  padding: 12px;
  background: #f7f9f9;
  border-radius: 12px;
  border: 1px solid #eff3f4;
}

.admin-wipe-toolbar label {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.admin-wipe-toolbar-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-wipe-toolbar-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e6eceb;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
}

.admin-wipe-toolbar-row .btn {
  flex-shrink: 0;
  margin-top: 0;
  width: auto;
}

.admin-wipe-body {
  padding: 12px 16px 20px;
}

.admin-wipe-summary {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-all;
}

.admin-wipe-preview {
  margin: 0 0 12px;
  padding: 0 0 0 1.1rem;
  max-height: 180px;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #536471;
}

.admin-wipe-preview code {
  font-size: 0.75rem;
  color: #0a6b5c;
}

.admin-wipe-warn {
  margin: 0 0 12px;
  font-size: 0.8rem;
}

.admin-wipe-body label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.admin-wipe-body input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 10px;
}

.report-item {
  background: #fff;
  border: 1px solid #eff3f4;
  border-radius: 12px;
  padding: 12px;
}

.report-item.report-urgent {
  border-color: #f4c7c3;
  background: #fff8f7;
}

.report-priority {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: #fce8e6;
  color: #c5221f;
  vertical-align: middle;
}

.report-item.resolved { opacity: 0.65; }

.community-rules-body {
  padding: 4px 16px 16px;
}

.community-rules-body ul {
  margin: 0 0 16px;
  padding-left: 1.15rem;
  color: #374151;
  line-height: 1.5;
  font-size: 0.92rem;
}

.community-rules-body li {
  margin-bottom: 10px;
}

.community-rules-body .btn {
  width: 100%;
}

.report-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.report-reason {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.report-note {
  font-size: 0.85rem;
  margin: -2px 0 8px;
  color: var(--muted, #667781);
}

.report-emails {
  font-size: 0.8rem;
  margin: 0 0 6px;
  line-height: 1.45;
  word-break: break-word;
}

.report-emails strong {
  font-weight: 600;
  color: var(--text, #111);
}

.report-ids {
  font-size: 0.75rem;
  margin-bottom: 8px;
  word-break: break-all;
}

.report-status {
  font-size: 0.8rem;
  font-weight: 700;
  color: #075e54;
}

.field-hint {
  margin: -4px 0 10px;
  font-size: 0.75rem;
  color: #667781;
}

.input-locked {
  background: #f0f2f5 !important;
  color: #667781;
}

.media-failed {
  opacity: 0.35;
  filter: grayscale(0.4);
}

.tweet-image-wrap,
.tweet-video-wrap {
  position: relative;
}

.media-retry {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(16, 32, 25, 0.88);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.media-retry:active {
  opacity: 0.9;
}

/* Habit / delight */
.soft-banner-welcome {
  background: #f7f9f9;
  border-bottom-color: #eff3f4;
}

.soft-banner-welcome strong {
  color: var(--green-deep);
}

.feed-fresh {
  position: sticky;
  top: 8px;
  z-index: 8;
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--green, #0a6b5c);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(10, 107, 92, 0.28);
  cursor: pointer;
}
.feed-fresh[hidden] { display: none !important; }
.feed-fresh:active { opacity: 0.88; }

.feed-vitality {
  margin: 0;
  padding: 4px 16px 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: #8b98a5;
  letter-spacing: 0.01em;
}

.feed-vitality.hidden { display: none !important; }

.feed-vitality.feed-vitality-new {
  color: #075e54;
  font-weight: 600;
}

.feed-vitality.feed-vitality-quiet {
  color: #075e54;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.today-idea-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px solid #d7ebe7;
  background: #f3faf8;
  border-radius: 10px;
  text-align: left;
  font: inherit;
  color: #0f1419;
  cursor: pointer;
}

.today-idea-chip.hidden { display: none !important; }

.today-idea-chip:active {
  background: #e7f8f5;
}

.today-idea-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #075e54;
}

#today-idea-label {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  color: #536471;
}

.today-idea-chip.today-idea-pulse {
  box-shadow: 0 0 0 1px rgba(7, 94, 84, 0.12);
}

.feed-streak-chip {
  margin: 2px 12px 4px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  border-radius: 0;
}

.feed-streak-chip.hidden { display: none !important; }

.profile-streak {
  margin: 10px auto 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(10, 107, 92, 0.05);
  border: 1px solid rgba(10, 107, 92, 0.08);
  text-align: left;
  max-width: 260px;
}

.profile-streak.hidden { display: none !important; }

.habit-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.habit-progress-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.habit-progress-label {
  font-size: 0.75rem;
  font-weight: 650;
  color: #536471;
  white-space: nowrap;
}

.profile-streak .habit-progress-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0a6b5c;
}

.habit-progress-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: #536471;
}

.habit-progress-track {
  display: none;
}

.habit-progress-fill {
  display: none;
}

.habit-dots {
  display: flex;
  gap: 4px;
  flex: 1;
  max-width: 120px;
}

.profile-streak .habit-dots {
  max-width: none;
}

.habit-progress-compact .habit-dots {
  max-width: 112px;
}

.habit-dot {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(10, 107, 92, 0.14);
}

.habit-dot.on {
  background: #0a6b5c;
}

.confirm-face {
  display: block;
  width: 56px;
  height: 56px;
  margin: 16px 16px 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--elevated, #fafbfa);
}
.confirm-body {
  padding: 8px 16px 24px;
}

.confirm-message {
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

.user-modal-safety {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eff3f4;
}

.user-modal-safety .btn-sm {
  min-width: 110px;
  min-height: 40px;
}

.user-modal-safety .danger-outline {
  color: #c62828;
  border-color: #f1b0b7;
}

.user-modal-safety .danger-outline:active {
  background: #fff5f5;
}

@keyframes popCelebrate {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.pop-celebrate {
  animation: popCelebrate 0.42s var(--ease);
}

.tweet-action.liked svg {
  fill: #f91880;
  stroke: #f91880;
}

.tweet-action.bookmarked svg {
  fill: #075e54;
  stroke: #075e54;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.nav-badge:not(.hidden) {
  animation: badgePulse 1.5s ease-in-out infinite;
}

/* Hanya pesan baru — jangan animasi ulang semua bubble saat list di-render */
.message.msg-enter {
  animation: msgIn 0.28s var(--ease);
}

@keyframes msgIn {
  from { opacity: 0.45; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.profile-setup-banner {
  margin: 10px 16px 0;
  padding: 10px 12px;
  background: #fff8e8;
  border: 1px solid #f3e0a8;
  border-radius: 12px;
  font-size: 0.84rem;
  color: #5c4a12;
  text-align: left;
}

.profile-setup-banner.hidden { display: none !important; }

.profile-setup-banner p { margin: 0; line-height: 1.4; }


.profile-invite-card {
  margin: 16px 0 0;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
}

.profile-invite-label {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.profile-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.profile-invite-progress {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green, #0a6b5c);
}

.profile-invite-link {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--green, #0a6b5c);
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-invite-row .linkish {
  flex: none;
  font-size: 0.8rem;
  text-align: right;
}

.linkish {
  border: none;
  background: none;
  padding: 0;
  color: #0a6b5c;
  font-weight: 700;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.onboard-invite-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.invite-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(15, 20, 25, 0.45);
}

.invite-sheet-backdrop.hidden { display: none !important; }

.invite-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 111;
  background: var(--sheet);
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(15, 20, 25, 0.16);
  max-width: 520px;
  margin: 0 auto;
}

.invite-sheet.hidden { display: none !important; }

.invite-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: #d0d7d4;
  margin: 4px auto 10px;
}

.invite-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.invite-sheet-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f1419;
}

.invite-sheet-desc {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: #536471;
  line-height: 1.4;
}

.invite-sheet-progress {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 650;
  color: #075e54;
}

.invite-sheet-link {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f4faf8;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0a6b5c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-sheet-actions {
  display: grid;
  gap: 8px;
}

.invite-sheet-actions .btn {
  min-height: 46px;
  width: 100%;
}


/* ===== Mode gelap — surfaces & hardcoded light leftovers ===== */
html[data-theme="dark"] .tweet {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .tweet-action:not(.liked):not(.bookmarked):not(.chat-post-btn):not(.call-post-btn):not(.is-on) {
  color: #9aa8a3;
}

html[data-theme="dark"] .tweet-image-wrap {
  background: #111b21;
}
html[data-theme="dark"] #tab-feed,
html[data-theme="dark"] #screen-main.feed-mode,
html[data-theme="dark"] #tab-chat,
html[data-theme="dark"] #tab-profile,
html[data-theme="dark"] .feed-list,
html[data-theme="dark"] .chat-list,
html[data-theme="dark"] .search-results,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .msg-action-sheet,
html[data-theme="dark"] .invite-sheet,
html[data-theme="dark"] .share-post-sheet,
html[data-theme="dark"] .album-preview,
html[data-theme="dark"] .chat-compose,
html[data-theme="dark"] .chat-select-bar,
html[data-theme="dark"] .chat-reply-banner,
html[data-theme="dark"] .comments-sheet,
html[data-theme="dark"] .lightbox {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .lightbox.is-editing,
html[data-theme="dark"] .lightbox.is-sticker-crop {
  background: #0b141a;
}

html[data-theme="dark"] #screen-main.feed-mode .topbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .brand h1 { color: var(--green-light); }
html[data-theme="dark"] .brand-disclaimer { color: var(--muted); }
html[data-theme="dark"] .auth-tabs {
  background: var(--elevated);
}
html[data-theme="dark"] .auth-tab.active {
  background: var(--surface);
  color: var(--green-light);
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--green);
}

html[data-theme="dark"] .tweet-more-menu,
html[data-theme="dark"] .tweet-menu-item,
html[data-theme="dark"] .chat-menu,
html[data-theme="dark"] .chat-menu-item,
html[data-theme="dark"] .chat-attach-sheet,
html[data-theme="dark"] .forward-sheet,
html[data-theme="dark"] .notif-panel,
html[data-theme="dark"] .profile-invite-card,
html[data-theme="dark"] .soft-banner,
html[data-theme="dark"] .feed-soft-bar,
html[data-theme="dark"] .compose-tpl-btn,
html[data-theme="dark"] .chat-quick-chip,
html[data-theme="dark"] .bird-sound-btn,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .skel-tweet,
html[data-theme="dark"] .comment-post-preview,
html[data-theme="dark"] .comments-compose,
html[data-theme="dark"] .comment-item,
html[data-theme="dark"] .user-modal-body,
html[data-theme="dark"] .profile-form,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .status-rail,
html[data-theme="dark"] .feed-filter-row,
html[data-theme="dark"] .feed-tabs,
html[data-theme="dark"] .open-app-banner,
html[data-theme="dark"] .bookmark-item .bookmark-open {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .chat-menu-item:active,
html[data-theme="dark"] .chat-menu-item:hover {
  background: var(--hover);
  color: var(--text);
}
html[data-theme="dark"] .chat-menu-item.danger {
  color: #ff8a80;
}

html[data-theme="dark"] .tweet-name,
html[data-theme="dark"] .tweet-text,
html[data-theme="dark"] .chat-item,
html[data-theme="dark"] .search-item,
html[data-theme="dark"] .invite-sheet-head h3,
html[data-theme="dark"] .profile-link-label {
  color: var(--text);
}
html[data-theme="dark"] .tweet-handle,
html[data-theme="dark"] .tweet-dot,
html[data-theme="dark"] .tweet-time,
html[data-theme="dark"] .tweet-edited,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .invite-sheet-desc,
html[data-theme="dark"] .msg-action-title,
html[data-theme="dark"] .forgot-password-desc,
html[data-theme="dark"] .forgot-password-body label,
html[data-theme="dark"] .known-people-title {
  color: var(--muted);
}
html[data-theme="dark"] .status-ring-line {
  color: var(--text);
}
html[data-theme="dark"] .status-ring.has-status.is-seen .status-ring-avatar-wrap {
  background: #3d4a46;
}
html[data-theme="dark"] .status-ring.has-status.is-seen .status-ring-name {
  color: #8b9794;
}

html[data-theme="dark"] button.search-chat-cta.is-follow,
html[data-theme="dark"] button.search-chat-cta.is-invite {
  color: #8fd9c8;
  border-color: #8fd9c8;
}

html[data-theme="dark"] .chat-item,
html[data-theme="dark"] .search-item {
  background: var(--surface);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .chat-item:hover,
html[data-theme="dark"] .search-item:hover,
html[data-theme="dark"] .chat-item:active,
html[data-theme="dark"] .search-item:active,
html[data-theme="dark"] .profile-link-row:active,
html[data-theme="dark"] .tweet-menu-item:active,
html[data-theme="dark"] .nav-item:active {
  background: var(--hover);
}

html[data-theme="dark"] .chat-day-sep span {
  background: var(--surface);
  color: var(--muted);
}
html[data-theme="dark"] #screen-chat-room {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(18, 140, 126, 0.08) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 42%, rgba(10, 107, 92, 0.06) 0 1.2px, transparent 2px),
    radial-gradient(circle at 40% 78%, rgba(18, 140, 126, 0.05) 0 1px, transparent 2px),
    linear-gradient(180deg, #0b141a 0%, #0f1a21 55%, #0b141a 100%);
}
html[data-theme="dark"] .message.mine .msg-forwarded { color: #9ec9bc; }
html[data-theme="dark"] .msg-status-react-label,
html[data-theme="dark"] .message.mine .msg-status-react-label { color: #9ec9bc; }
html[data-theme="dark"] .message .time,
html[data-theme="dark"] .msg-deleted { color: var(--muted); }
html[data-theme="dark"] .message.mine .time,
html[data-theme="dark"] .message.mine .time-text {
  color: #a8c5bc;
}
html[data-theme="dark"] .message.queued .time,
html[data-theme="dark"] .message.queued .time-text {
  color: #d2ebe3 !important;
  font-weight: 700;
}
html[data-theme="dark"] .message.queued {
  outline-color: rgba(158, 201, 188, 0.55);
}
html[data-theme="dark"] .message.mine .btn-msg-discard {
  background: rgba(255, 255, 255, 0.16);
  color: #ffcdd2;
  border-color: rgba(255, 205, 210, 0.5);
}
html[data-theme="dark"] #screen-chat-room .message-compose,
html[data-theme="dark"] #screen-chat-room .compose-pill {
  background: var(--elevated) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] #screen-chat-room .compose-pill #message-input,
html[data-theme="dark"] #screen-chat-room #message-input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
html[data-theme="dark"] #screen-chat-room .compose-pill #message-input::placeholder {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}
html[data-theme="dark"] #screen-chat-room .compose-pill #message-input:-webkit-autofill,
html[data-theme="dark"] #screen-chat-room .compose-pill #message-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}
html[data-theme="dark"] #screen-chat-room .compose-ico {
  color: var(--muted);
}
html[data-theme="dark"] .message.mine .msg-quote {
  background: rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .msg-quote-body strong { color: var(--green-light); }
html[data-theme="dark"] .msg-quote-body span { color: var(--muted); }
html[data-theme="dark"] .request-tag {
  color: #9ec9bc;
  background: rgba(18, 140, 126, 0.18);
}
html[data-theme="dark"] .request-tag.is-waiting {
  color: #e6d38a;
  background: rgba(180, 140, 20, 0.2);
}
html[data-theme="dark"] .chat-item.chat-request {
  background: rgba(18, 140, 126, 0.08);
}
html[data-theme="dark"] .chat-request-banner,
html[data-theme="dark"] .chat-request-waiting {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .compose-tpl-btn {
  background: var(--elevated);
  color: var(--green-light);
  border-color: var(--border);
}
html[data-theme="dark"] .compose-tpl-btn[data-tpl="fill"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
html[data-theme="dark"] .chat-quick-chip {
  background: var(--surface);
  color: var(--green-light);
  border-color: var(--border);
}
html[data-theme="dark"] .chat-quick-chip:active {
  background: var(--hover);
}

html[data-theme="dark"] .invite-sheet-link {
  background: var(--elevated);
  color: var(--green-light);
}
html[data-theme="dark"] .invite-sheet-progress { color: var(--green-light); }

html[data-theme="dark"] .btn-outline {
  background: transparent;
  color: var(--green-light);
  border-color: var(--border);
}
html[data-theme="dark"] .btn-ghost { color: var(--muted); }
html[data-theme="dark"] .btn-ghost:active { background: var(--hover); color: var(--green-light); }

html[data-theme="dark"] .guest-cta-bar {
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .bottom-nav {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .skel-tweet,
html[data-theme="dark"] .skel-line,
html[data-theme="dark"] .skel-avatar {
  background: var(--elevated) !important;
  border-color: var(--border);
}

html[data-theme="dark"] .profile-theme-row {
  cursor: pointer;
}
html[data-theme="dark"] .profile-theme-row input {
  accent-color: var(--green);
}

html[data-theme="dark"] .message.mine {
  background: var(--bubble-mine);
  color: var(--bubble-text);
}
html[data-theme="dark"] .message.theirs {
  background: var(--bubble-theirs);
  color: var(--bubble-text);
}
html[data-theme="dark"] #screen-chat-room .chat-compose,
html[data-theme="dark"] #screen-chat-room .chat-topbar {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Catch-all: sisa permukaan putih di desktop / sheet / kartu */
html[data-theme="dark"] body:not(.native-app) #screen-main > .content,
html[data-theme="dark"] body:not(.native-app) #screen-main > .bottom-nav,
html[data-theme="dark"] body:not(.native-app) #tab-chat,
html[data-theme="dark"] body:not(.native-app) #tab-profile,
html[data-theme="dark"] body:not(.native-app) #tab-feed,
html[data-theme="dark"] .tweet-compose,
html[data-theme="dark"] .profile-links,
html[data-theme="dark"] .profile-link-row,
html[data-theme="dark"] .profile-fold,
html[data-theme="dark"] .profile-invite-link,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .msg-action-sheet,
html[data-theme="dark"] .chat-attach-sheet,
html[data-theme="dark"] .message-compose,
html[data-theme="dark"] .compose-pill,
html[data-theme="dark"] .chat-search-bar,
html[data-theme="dark"] .bookmarks-list,
html[data-theme="dark"] .report-modal,
html[data-theme="dark"] .people-list,
html[data-theme="dark"] .notif-item,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .profile-fold-body {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .notif-item,
html[data-theme="dark"] .people-item {
  background: var(--surface) !important;
  color: var(--text);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .notif-item .notif-msg,
html[data-theme="dark"] .people-item .info,
html[data-theme="dark"] .people-item .name {
  color: var(--text) !important;
}
html[data-theme="dark"] .notif-time,
html[data-theme="dark"] .notif-item .muted,
html[data-theme="dark"] .people-item .username {
  color: var(--muted) !important;
}
html[data-theme="dark"] .notif-item.unread {
  background: rgba(18, 140, 126, 0.14) !important;
}
html[data-theme="dark"] .notif-item:active,
html[data-theme="dark"] .people-item:active {
  background: var(--hover) !important;
}
html[data-theme="dark"] #notifs-modal .modal-header,
html[data-theme="dark"] #people-modal .modal-header,
html[data-theme="dark"] #bookmarks-modal .modal-header {
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] #notifs-modal .modal-header .btn-icon,
html[data-theme="dark"] #people-modal .modal-header .btn-icon,
html[data-theme="dark"] #bookmarks-modal .modal-header .btn-icon {
  color: var(--text) !important;
  opacity: 1;
}

html[data-theme="dark"] body:not(.native-app) #screen-main > .bottom-nav {
  background: var(--elevated) !important;
}

html[data-theme="dark"] .tweet-compose {
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .compose-price-row span { color: var(--muted); }
html[data-theme="dark"] .compose-price-row input {
  background: var(--elevated);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .compose-cod {
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .compose-cod.is-on {
  background: #0a6b5c;
  border-color: #0a6b5c;
  color: #fff;
}

html[data-theme="dark"] .profile-invite-link {
  color: var(--green-light) !important;
  background: var(--bg) !important;
}

html[data-theme="dark"] .user-ig-actions {
  background: var(--surface) !important;
}
html[data-theme="dark"] .user-ig-stat strong {
  color: var(--text);
}
html[data-theme="dark"] .user-ig-stat span,
html[data-theme="dark"] .user-modal-body #user-modal-username {
  color: var(--muted);
}
html[data-theme="dark"] .profile-kicau-heading {
  color: var(--text);
}
html[data-theme="dark"] .user-admin-email {
  color: #5eead4;
}
html[data-theme="dark"] .profile-kicau-tabs button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
html[data-theme="dark"] .profile-kicau-tabs button.on {
  background: transparent;
  border-bottom-color: var(--text);
  color: var(--text);
}
html[data-theme="dark"] .user-seller-badge {
  background: var(--green-pale);
  color: var(--green-light);
}
html[data-theme="dark"] .user-modal.modal,
html[data-theme="dark"] .user-modal .modal-header {
  background: var(--sheet);
  color: var(--text);
  border-color: var(--border);
}

/* Dark mode: input + teks wajib terbaca (locked/autofill/hardcoded) */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .profile-form input,
html[data-theme="dark"] .profile-form textarea,
html[data-theme="dark"] .auth-form input,
html[data-theme="dark"] .auth-form textarea,
html[data-theme="dark"] #edit-username,
html[data-theme="dark"] #edit-name,
html[data-theme="dark"] #edit-bio,
html[data-theme="dark"] #edit-wa-phone,
html[data-theme="dark"] #setup-username,
html[data-theme="dark"] #setup-name,
html[data-theme="dark"] #message-input,
html[data-theme="dark"] #user-search,
html[data-theme="dark"] #chat-msg-search,
html[data-theme="dark"] #edit-post-input,
html[data-theme="dark"] .compose-pill #message-input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--green-light);
  border-color: var(--border) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input.input-locked,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] textarea[readonly] {
  background: var(--elevated) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--green-light);
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  transition: background-color 99999s ease-out;
}

html[data-theme="dark"] .profile-form label,
html[data-theme="dark"] .profile-fold-summary,
html[data-theme="dark"] .username-hint,
html[data-theme="dark"] #username-hint,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .profile-danger-zone .muted {
  color: var(--muted) !important;
}

html[data-theme="dark"] .profile-form,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .profile-fold,
html[data-theme="dark"] .profile-fold-body,
html[data-theme="dark"] .profile-danger-zone,
html[data-theme="dark"] .profile-links,
html[data-theme="dark"] .profile-link-row,
html[data-theme="dark"] .profile-invite-card,
html[data-theme="dark"] .settings-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .feed-tabs {
  border-right-color: var(--border);
}
html[data-theme="dark"] .feed-filter-row .feed-tab.active {
  background: #075e54;
  border-color: #075e54;
  color: #fff !important;
}
html[data-theme="dark"] .profile-header h3,
html[data-theme="dark"] .profile-link-label,
html[data-theme="dark"] .profile-fold-summary,
html[data-theme="dark"] .modal-header h3,
html[data-theme="dark"] .tweet-name,
html[data-theme="dark"] .tweet-text,
html[data-theme="dark"] .feed-tab.active,
html[data-theme="dark"] .chat-item .name,
html[data-theme="dark"] .search-item .name,
html[data-theme="dark"] .comment-author,
html[data-theme="dark"] .comment-text,
html[data-theme="dark"] .msg-action-sheet button,
html[data-theme="dark"] .msg-action-title,
html[data-theme="dark"] .forward-item,
html[data-theme="dark"] .invite-sheet-head h3 {
  color: var(--text) !important;
}

html[data-theme="dark"] .btn-outline {
  background: transparent !important;
  color: var(--green-light) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .stat-link {
  color: var(--muted) !important;
}

html[data-theme="dark"] .soft-banner,
html[data-theme="dark"] .soft-banner p,
html[data-theme="dark"] .profile-setup-banner,
html[data-theme="dark"] .profile-setup-banner p {
  color: var(--text) !important;
}

html[data-theme="dark"] .profile-setup-banner {
  background: #2a2410 !important;
  border-color: #5c4a12 !important;
}

.call-sheet {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: #0b141a;
  color: #fff;
  padding: max(28px, env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
}
.call-sheet.hidden { display: none !important; }
.call-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 14vh;
  margin-bottom: 16px;
  background: #1f2c28;
}
.call-photo.is-product {
  width: 168px;
  height: 168px;
  border-radius: 18px;
}
.call-title { margin: 0; font-size: 1.65rem; font-weight: 500; text-align: center; }
.call-sub { margin: 0; color: rgba(255,255,255,0.7); font-size: 1rem; }
.call-topic {
  margin: 6px 0 18px;
  max-width: 18rem;
  color: #d7ffe8;
  font-weight: 700;
  text-align: center;
}
.call-topic:empty { display: none; }
.call-ask {
  margin: 0 0 18px;
  color: #ffd60a;
  font-weight: 800;
  text-align: center;
}
.call-ask:empty { display: none; }
.call-replies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 22rem;
  margin: 0 0 16px;
}
.call-replies.hidden { display: none !important; }
.call-replies button {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #ffd60a;
  color: #0b141a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.call-replies button.is-on { outline: 3px solid #fff; }
.call-reply-hint {
  width: 100%;
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}
.call-ask-sheet {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.call-ask-sheet.hidden { display: none !important; }
.call-ask-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  color: #0b141a;
}
.call-ask-card p { margin: 0 0 4px; font-weight: 800; text-align: center; }
.call-ask-card button {
  border: none;
  border-radius: 12px;
  padding: 12px;
  background: #0a6b5c;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.call-ask-cancel { background: #e8eeeb !important; color: #0b141a !important; }
.call-actions {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  width: min(420px, 100%);
  margin-top: auto;
  padding-bottom: 12px;
}
.call-sheet[data-mode="incoming"] .call-actions {
  justify-content: space-between;
  padding: 0 28px 18px;
}
.call-btn {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 72px;
  padding: 0;
  font: inherit;
}
.call-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.call-ico svg { width: 28px; height: 28px; fill: #fff; }
.call-lbl { font-size: 0.82rem; font-weight: 600; }
.call-btn-yes .call-ico { background: #25d366; }
.call-btn-yes .call-ico svg { fill: #fff; transform: rotate(0deg); }
.call-btn-no .call-ico { background: #ea0038; }
.call-btn-no .call-ico svg { fill: #fff; transform: rotate(135deg); }
.call-btn-side .call-ico { background: rgba(255, 255, 255, 0.14); }
.call-btn-side.is-on .call-ico { background: #fff; }
.call-btn-side.is-on .call-ico svg { fill: #0b141a; }
.call-btn.hidden { display: none; }

.msg-call-log {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px auto;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff;
  color: #0b141a;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.08);
}
.msg-call-log.is-missed { color: #c62828; }
.msg-call-thumb-btn {
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: none;
  line-height: 0;
}
.msg-call-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  background: #e8eeeb;
}
.msg-call-log .time { font-weight: 600; color: #5c6b66; opacity: 1; font-size: 0.75rem; }
.msg-call-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.msg-call-label { line-height: 1.25; }
.msg-call-detail {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #5c6b66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-call-log.is-missed .msg-call-detail { color: #d32f2f; }
html[data-theme="dark"] .msg-call-log {
  background: #1f2c28;
  color: #e8f2ee;
}
html[data-theme="dark"] .msg-call-log.is-missed { color: #ff8a80; }
html[data-theme="dark"] .msg-call-log .time { color: #9eb0aa; }
html[data-theme="dark"] .msg-call-detail { color: #9eb0aa; }
html[data-theme="dark"] .msg-call-log.is-missed .msg-call-detail { color: #ffab91; }
.msg-call-back {
  border: none;
  border-radius: 12px;
  padding: 4px 10px;
  background: #25d366;
  color: #0b141a;
  font: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
}

.kabar-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: calc(100% - 24px);
  margin: 8px 12px 4px;
  padding: 14px 14px 12px;
  border: none;
  border-radius: 18px;
  background: var(--card, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(11, 20, 26, 0.06);
  overflow: hidden;
  touch-action: pan-y;
}
.kabar-entry.is-plain {
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
}
.kabar-entry.is-plain > span:not(.kabar-entry-meta):not(.kabar-entry-line) {
  display: none;
}
.kabar-entry.is-dragging { transition: none; }
.kabar-entry.is-snap { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-entry-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  min-width: 0;
}
.kabar-entry-stage.is-from-left { animation: kabarFromLeft 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-entry-stage.is-from-right { animation: kabarFromRight 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-entry.is-waiting { box-shadow: 0 8px 22px rgba(10, 107, 92, 0.12); }
.kabar-entry strong { font-size: 15px; letter-spacing: 0.01em; }
.kabar-entry span { color: var(--muted, #667781); font-size: 13px; }
.kabar-entry > span:not(.kabar-entry-meta):not(.kabar-entry-line) { align-self: stretch; }
.kabar-entry:not(.is-plain) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
}
.kabar-entry:not(.is-plain) > strong {
  grid-column: 1;
  grid-row: 1;
}
.kabar-entry:not(.is-plain) > span:not(.kabar-entry-meta):not(.kabar-entry-line) {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.kabar-entry:not(.is-plain) > .kabar-entry-stage,
.kabar-entry:not(.is-plain) > .kabar-entry-dots {
  grid-column: 1 / -1;
}
.kabar-entry-photo {
  display: block;
  align-self: stretch;
  width: auto;
  max-height: 148px;
  margin: 10px -14px 0;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0;
  pointer-events: none;
}
.kabar-entry-photo.is-reel { animation: kabarReel 0.45s ease; }
.kabar-entry-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 148px;
  margin: 10px -14px 0;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}
.kabar-entry .kabar-entry-voice span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted, #667781);
}
.kabar-entry-voice.is-reel { animation: kabarReel 0.45s ease; }
@keyframes kabarReel {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
.kabar-entry-foot {
  display: flex;
  align-items: baseline;
  align-self: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}
.kabar-entry .kabar-entry-meta {
  flex: none;
  max-width: 48%;
  color: var(--muted, #667781);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kabar-entry-foot:has(.kabar-entry-line) .kabar-entry-meta {
  margin-left: auto;
}
.kabar-entry .kabar-entry-line {
  flex: 1;
  min-width: 0;
  color: var(--text, #1c1c1c);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  margin-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kabar-entry-line.is-reel { animation: kabarReel 0.45s ease; }
.kabar-entry-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 6px;
  margin-top: 10px;
  pointer-events: none;
}
.kabar-entry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(11, 20, 26, 0.22);
}
.kabar-entry-dot.is-on { background: #0a6b5c; }
html[data-theme="dark"] .kabar-entry-dot { background: rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] .kabar-entry-dot.is-on { background: #7dcea0; }
#screen-kabar .topbar {
  justify-content: flex-start;
  gap: 4px;
}
#screen-kabar .topbar h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.kabar-body {
  flex: 1;
  min-height: 0;
  padding: 12px 16px 28px;
  overflow: auto;
  touch-action: pan-y;
}
.kabar-create, .kabar-invite, .kabar-actions, .kabar-daybar, .kabar-rename {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.kabar-create {
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
}
.kabar-create input, .kabar-invite input, .kabar-rename input {
  flex: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.18));
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  background: var(--card, #fff);
  color: inherit;
}
.kabar-create .btn-primary { width: auto; flex: none; }
.kabar-create .kabar-text,
.kabar-invite .kabar-text { padding: 0 4px; flex: none; }
.kabar-actions .btn {
  width: auto;
  flex: 1;
}
.kabar-daybar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.kabar-daybar .btn {
  width: auto;
  flex: none;
  justify-self: start;
}
.kabar-daybar .btn:last-child,
.kabar-day-spacer { justify-self: end; }
.kabar-daybar strong { text-align: center; }
.kabar-week {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -12px -16px 12px;
  padding: 12px 16px 8px;
  background: #f7f6f4;
  overflow: hidden;
  touch-action: pan-y;
}
.kabar-week-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.kabar-week-track.is-dragging { transition: none; }
.kabar-week-track.is-snap { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-week-track.is-from-left { animation: kabarFromLeft 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-week-track.is-from-right { animation: kabarFromRight 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
html[data-theme="dark"] .kabar-week { background: #12181c; }
.kabar-week-day {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
}
html[data-theme="dark"] .kabar-week-day {
  background: #1c2429;
  border-color: rgba(255, 255, 255, 0.08);
}
.kabar-week-day.is-current { box-shadow: inset 0 0 0 2px var(--green, #0a6b5c); }
.kabar-week-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #0a6b5c);
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
html[data-theme="dark"] .kabar-week-dot { box-shadow: 0 0 0 2px #1c2429; }
.kabar-week-wait {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c47b2b;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
html[data-theme="dark"] .kabar-week-wait { box-shadow: 0 0 0 2px #1c2429; }
.kabar-week-day img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kabar-week-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #5c6560;
}
html[data-theme="dark"] .kabar-week-num { color: #c5cdc8; }
.kabar-week-day.is-photo .kabar-week-num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  padding: 10px 0 3px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.kabar-week-day.is-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.kabar-week-day.is-audio .kabar-week-num { height: auto; }
.kabar-week-voice {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--green, #0a6b5c);
}
.kabar-invite .btn,
.kabar-rename .btn { width: auto; flex: 0 0 auto; }
.kabar-invite input,
.kabar-rename input { width: auto; }
.kabar-rename { margin-bottom: 12px; }
.kabar-create-link { margin-top: 12px; }
.kabar-text {
  border: none;
  background: transparent;
  color: var(--green, #0a6b5c);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0 12px;
}
.kabar-leave {
  display: block;
  width: 100%;
  margin: 4px 0 24px;
  border: none;
  background: transparent;
  color: #b42318;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 12px;
}
#screen-kabar .kabar-body { background: #f7f6f4; }
html[data-theme="dark"] #screen-kabar .kabar-body { background: #12181c; }
.kabar-day-hint {
  position: absolute;
  left: 50%;
  top: calc(var(--topbar-h, 56px) + 12px);
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 32, 25, 0.86);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
}
.kabar-day-hint[hidden] { display: none; }
.kabar-day.is-snap { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-day.is-from-left { animation: kabarFromLeft 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.kabar-day.is-from-right { animation: kabarFromRight 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes kabarFromLeft {
  from { transform: translateX(-40px); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}
@keyframes kabarFromRight {
  from { transform: translateX(40px); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kabar-day.is-from-left,
  .kabar-day.is-from-right,
  .kabar-day.is-snap,
  .kabar-week-track.is-from-left,
  .kabar-week-track.is-from-right,
  .kabar-week-track.is-snap,
  .kabar-entry-stage.is-from-left,
  .kabar-entry-stage.is-from-right,
  .kabar-entry-photo.is-reel,
  .kabar-entry-voice.is-reel,
  .kabar-entry-line.is-reel,
  .kabar-entry.is-snap,
  .lightbox.is-kabar.is-kabar-glide #lightbox-img,
  .lightbox.is-kabar.is-kabar-glide .kabar-lb-side,
  .lightbox.is-kabar.is-kabar-glide .kabar-lb-voice-side,
  .lightbox.is-kabar.is-kabar-glide .kabar-lb-play,
  .lightbox.is-kabar.is-kabar-glide #lightbox-kabar,
  .lightbox.is-kabar.is-kabar-glide .kabar-lb-note { animation: none; transition: none; }
}
.kabar-sheet {
  background: transparent;
  color: var(--text);
  border-radius: 0;
  padding: 0 0 4px;
  margin: 0 0 20px;
  box-shadow: none;
}
.kabar-sheet .kabar-note {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted, #667781);
}
.kabar-sheet .kabar-daybar { margin-bottom: 8px; }
.kabar-sheet .kabar-daybar strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.kabar-sheet .kabar-daybar .btn,
.kabar-sheet .kabar-actions .btn {
  flex: none;
  width: auto;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: none;
}
.kabar-sheet .btn-primary {
  width: auto;
  background: var(--green, #0a6b5c);
}
.kabar-missing {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.kabar-missing-label { color: var(--muted, #667781); font-weight: 400; }
.kabar-missing-name { font-weight: 700; }
.kabar-missing-name + .kabar-missing-name::before { content: ", "; font-weight: 400; }
.kabar-missing .kabar-text { margin-left: 8px; padding: 0; }
#btn-kabar-nudge:disabled { opacity: 0.55; cursor: default; }
.kabar-missing .kabar-kick {
  display: inline;
  margin: 0 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}
.kabar-sheet .kabar-text { padding-bottom: 8px; }
.kabar-waiting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}
.kabar-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.kabar-wait-face {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--elevated, #fafbfa);
}
.kabar-wait-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kabar-wait-name {
  font-size: 14px;
  font-weight: 700;
}
.kabar-wait-state {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #667781);
}
.kabar-wait .kabar-text {
  margin-left: auto;
  padding: 0;
  flex: none;
}
.kabar-thread {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kabar-turn {
  display: flex;
  flex-direction: column;
  width: 92%;
}
.kabar-turn.is-quiet { width: auto; max-width: 92%; }
.kabar-turn.is-other { align-self: flex-start; }
.kabar-turn.is-mine { align-self: flex-end; align-items: flex-end; }
.kabar-face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--elevated, #fafbfa);
}
.kabar-who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.kabar-who strong {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--green, #0a6b5c);
}
.kabar-turn.is-mine .kabar-who {
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--green, #0a6b5c);
}
.kabar-turn.is-mine .kabar-who strong { color: var(--text); }
.kabar-absent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted, #667781);
  font-size: 13px;
}
.kabar-absent strong { color: var(--text); }
.kabar-turn.is-mine .kabar-absent { flex-direction: row-reverse; }
.kabar-turn .kabar-drop {
  width: 100%;
  margin-bottom: 0;
  padding: 14px;
  overflow: hidden;
  border: none;
  background: var(--surface, #fff);
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(11, 20, 26, 0.08);
}
.kabar-turn.is-mine .kabar-drop {
  background: var(--surface, #fff);
  border-radius: 18px;
}
.kabar-turn.is-mine .kabar-text,
.kabar-turn.is-mine .kabar-note,
.kabar-turn.is-mine .kabar-line { color: var(--bubble-text); }
.kabar-turn .kabar-drop.is-photo,
.kabar-turn.is-mine .kabar-drop.is-photo {
  padding: 0;
  background: transparent;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(11, 20, 26, 0.1);
}
.kabar-drop.is-photo .kabar-media { margin: 0; background: rgba(0, 0, 0, 0.04); }
.kabar-drop.is-photo .kabar-photo { border-radius: 18px; }
.kabar-turn .kabar-foot { width: 100%; margin-top: 8px; }
.kabar-turn .kabar-foot .kabar-line,
.kabar-turn.is-mine .kabar-foot .kabar-line { color: var(--text); }
.kabar-turn .kabar-foot .kabar-text { color: var(--green, #0a6b5c); }
.kabar-media { margin: 8px -12px -10px; background: rgba(0, 0, 0, 0.05); }
.kabar-drop:has(.kabar-foot) .kabar-media { margin-bottom: 0; }
.kabar-photo {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  cursor: pointer;
}
.kabar-foot .kabar-rename { margin: 8px 0 0; width: 100%; }
.kabar-foot .kabar-rename input { background: var(--surface, #fff); color: var(--text); }
.kabar-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 8px;
}
.kabar-tools .kabar-text,
.kabar-tools .kabar-kick { margin: 0; padding: 0; }
.kabar-clock,
.kabar-seen {
  margin: 6px 8px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted, #667781);
}
.kabar-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 2px 0;
}
.kabar-turn.is-mine .kabar-meta { justify-content: flex-end; }
.kabar-meta .kabar-clock,
.kabar-meta .kabar-seen { margin: 0; }
.kabar-seen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.kabar-seen-faces { display: inline-flex; align-items: center; }
.kabar-seen-face {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -5px;
  border: 1.5px solid #f7f6f4;
  background: var(--elevated, #fafbfa);
}
.kabar-seen-face:first-child { margin-left: 0; }
html[data-theme="dark"] .kabar-seen-face { border-color: #12181c; }
.kabar-seen.is-empty { font-weight: 400; }
.kabar-unopened {
  align-self: stretch;
  margin: 4px 2px 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--muted, #667781);
}
.kabar-replaced { font-weight: 600; margin-left: 6px; letter-spacing: 0.04em; }
.kabar-card, .kabar-drop {
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card, #fff);
  color: inherit;
  text-align: left;
  width: 100%;
}
.kabar-card { cursor: pointer; }
.kabar-cards.is-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.kabar-card.is-pair {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
}
.kabar-card.is-pair .kabar-card-photo {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 8px;
}
.kabar-card.is-send { box-shadow: 0 8px 22px rgba(10, 107, 92, 0.12); }
.kabar-card.is-pair.is-door { box-shadow: inset 0 0 0 1.5px var(--green, #0a6b5c); }
.kabar-card.is-pair.is-door.is-send {
  box-shadow: inset 0 0 0 1.5px var(--green, #0a6b5c), 0 8px 22px rgba(10, 107, 92, 0.12);
}
.kabar-card.is-pair .kabar-card-line {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kabar-card.is-pair strong,
.kabar-card.is-pair small { display: block; }
.kabar-card.is-pair strong { overflow-wrap: break-word; }
.kabar-card.is-pair small { margin-top: 6px; }
.kabar-card-note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.kabar-card-faces { display: inline-flex; align-items: center; }
.kabar-card-face {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -4px;
  border: 1.5px solid var(--card, #fff);
  background: var(--elevated, #fafbfa);
}
.kabar-card-face:first-child { margin-left: 0; }
.kabar-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.kabar-card-photo {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}
.kabar-card-who {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--muted, #667781);
}
.kabar-card-copy { min-width: 0; }
.kabar-card-copy strong,
.kabar-card-copy small { display: block; }
.kabar-card small, .kabar-drop .muted, .kabar-note { color: var(--muted, #667781); }
.kabar-drop audio,
.kabar-drop .kabar-voice-open { width: 100%; margin: 0; }
.kabar-drop .kabar-voice-open {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  border: none;
  background: transparent;
  color: var(--muted, #667781);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.kabar-lb-audio { display: none; }
.kabar-lb-play { display: none; }
.lightbox.is-kabar-voice #lightbox-img,
.lightbox.is-kabar-voice .kabar-lb-side { visibility: hidden; }
.lightbox.is-kabar-voice.is-dragging .kabar-lb-side,
.lightbox.is-kabar-voice.is-kabar-glide .kabar-lb-side { visibility: visible; }
.lightbox.is-kabar-voice .kabar-lb-play {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: 0;
  border: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.kabar-results button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.kabar-result-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--elevated, #fafbfa);
}
.kabar-results button span { min-width: 0; }
.kabar-results button strong { display: block; font-weight: 700; }
.kabar-results button small {
  display: block;
  margin-top: 2px;
  color: var(--muted, #667781);
  font-size: 12px;
  font-weight: 400;
}
.kabar-preview {
  border: none;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bubble-mine);
  color: var(--bubble-text);
}
.kabar-preview img,
.kabar-preview audio {
  width: 100%;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
}
.kabar-preview img {
  display: block;
  max-height: 460px;
  object-fit: contain;
}
.kabar-preview input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.18));
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  background: var(--card, #fff);
  color: inherit;
}
.kabar-line { margin: 8px 2px 0; font-size: 15px; line-height: 1.45; font-weight: 500; }
.kabar-preview .kabar-notice {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted, #667781);
}
.kabar-preview .kabar-actions { margin: 10px 0 0; }
.kabar-kick {
  display: inline-block;
  margin-top: 8px;
  border: none;
  background: transparent;
  color: #b42318;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}