/* ============================================
   File: public/pwa/chat.css
   Deskripsi: Style Chat PWA — room list, bubble, input, bottom sheet
   Tanggal: 2026-10-20
   Catatan: default = tema terang, override gelap (Telegram Dark) via @media (prefers-color-scheme: dark). Warna bubble = variabel --wa-* (dari Mini App public/style.css), warna chrome = --tg-*, sisanya tokens.css.
   Urutan load: tokens -> style -> chat -> xpose -> legacy
   Revisi: 2026-10-20 (UI-2c) — hijau WA dihapus; bubble me = var(--primary), them = var(--surface);
           kutipan/reply/send memakai var(--primary) / var(--primary-text); override dark mode via tokens.
   Revisi: 2026-10-20 (UI-2d) — tema Telegram: area chat #0e1621, header/input #17212b, bubble lawan #182533, bubble kita #8774e1,
           radius bubble 12px (ekor 4px), kutipan transparan gelap, send ungu. Light fallback: bg #e6ebee, lawan #ffffff, kita #effdde.
   Revisi: 2026-10-20 (UI-2e) — Telegram Dark exact match: bubble kita #2b5278, garis/border #242f3d, aksen biru #3390ec / #6ab2f2,
           kutipan border 2px, placeholder & jam #6d7f8f, banner obrolan ditutup oranye. Variabel baru: --tg-ph, --tg-meta, --tg-banner-*.
           Light fallback tetap sama (variabel baru di-reset di blok light).
   Revisi: 2026-10-20 (UI-2f) — nilai warna diukur langsung dari screenshot referensi (bukan dari hex sesi sebelumnya): send #2ea5ff,
           kutipan hijau #5fb35b (garis kiri 4px, bg putih 6%), jam bubble kita #7fa9d3, teks #f5f5f5, sub #7e8c99, border putih 12%,
           banner teks oranye redup #a8701c, input bar tanpa border atas, tombol ikon header bulat #222e3c. Rule layout tidak berubah.
   Revisi: 2026-10-20 (UI-2g) — layout bubble: jam (.pwa-chat-meta) absolute di pojok kanan bawah bubble (bubble = position:relative),
           .pwa-chat-text diberi padding-right agar tidak menabrak jam, kotak quote dirapatkan (margin-bottom 2px, padding 2px). Warna/bentuk tidak berubah.
   Revisi: 2026-10-20 (UI-2h) — padding-right 52px di .pwa-chat-text dihapus; ruang jam kini hanya spacer inline di akhir teks (::after),
           jadi hanya baris terakhir yang menyisakan ruang untuk jam (them 36px, me 52px). Jam tetap absolute di pojok kanan bawah. Quote tetap rapat.
   Revisi: 2026-10-20 (UI-2i) — porting CSS bubble dari Mini App (public/style.css): variabel --wa-*, bubble/teks/jam/quote disalin persis (hex tidak diubah),
           spacer ::after dan padding-right lama dihapus, diganti .pwa-chat-pad (diisi chat.js). Dark kini lewat @media dark (base = light).
   Revisi: 2026-10-20 (UI-2j) — centang kini SVG (16x11 / 12x11) rapat dengan jam (gap 3px); .pwa-chat-pad-tick memesan lebar centang (19px)
           di dalam .pwa-chat-pad pada bubble kita, jadi jam + centang tidak menabrak teks.
   ============================================ */

@keyframes chat-slide-in { from { opacity: 0; transform: translateX(var(--space-6)); } to { opacity: 1; transform: none; } }
@keyframes chat-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ===== DAFTAR ROOM ===== */
.pwa-chat-list{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);animation:fade-in var(--motion-base) var(--easing-decelerate) backwards}
.pwa-chat-item{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:calc(var(--space-12) + var(--space-5));padding:var(--space-3) var(--space-4);background:none;border:0;border-bottom:1px solid var(--border);color:inherit;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--motion-fast) var(--easing-standard)}
.pwa-chat-item:last-child{border-bottom:0}
.pwa-chat-item:active{background:var(--gradient-soft);transform:none}
@media (hover:hover){.pwa-chat-item:hover{background:var(--gradient-soft)}}
.pwa-chat-avatar{flex:none;display:flex;align-items:center;justify-content:center;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-full);object-fit:cover;background:var(--primary);color:var(--on-primary);font-size:var(--fs-17);font-weight:var(--fw-600)}
.pwa-chat-avatar.sm{width:var(--space-10);height:var(--space-10);font-size:var(--fs-15)}
.pwa-chat-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.pwa-chat-item-top,.pwa-chat-item-bot{display:flex;align-items:center;gap:var(--space-2)}
.pwa-chat-item-top{justify-content:space-between}
.pwa-chat-name{min-width:0;font-size:var(--fs-16);font-weight:var(--fw-600);line-height:var(--lh-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwa-chat-time{flex:none;font-size:var(--fs-12);color:var(--text-secondary)}
.pwa-chat-last{flex:1;min-width:0;font-size:var(--fs-14);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwa-chat-item.unread .pwa-chat-name{font-weight:var(--fw-800)}
.pwa-chat-item.unread .pwa-chat-time{color:var(--primary-text);font-weight:var(--fw-600)}
.pwa-chat-item.unread .pwa-chat-last{color:var(--text-primary);font-weight:var(--fw-500)}
.pwa-chat-tag{flex:none;padding:2px var(--space-2);border-radius:var(--radius-full);background:var(--bg);color:var(--text-secondary);font-size:var(--fs-12);font-weight:var(--fw-600)}
.pwa-chat-tag.dm{background:var(--gradient-soft);color:var(--primary-text)}
.pwa-chat-tag.ro{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-dark)}
.pwa-chat-unread{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:var(--space-5);height:var(--space-5);padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--danger);color:var(--on-primary);font-size:var(--fs-12);font-weight:var(--fw-700);box-shadow:var(--shadow-sm)}

/* ===== ROOM VIEW ===== */
/* Variabel warna (default = terang). Bubble: --wa-* (sama dengan Mini App). Chrome (header/input/banner): --tg-*. */
.pwa-chat-view {
  --wa-bg: #dfe8ee;
  --wa-in: #ffffff;
  --wa-out: #effdde;
  --wa-text: #000000;
  --wa-time-in: #a0acb6;
  --wa-time-out: #5fb35a;
  --wa-quote: rgba(0, 0, 0, 0.06);
  --wa-quote-bar: #1fa855;
  --wa-quote-out: rgba(79, 174, 78, 0.16);
  --wa-quote-bar-out: #4fae4e;
  --tg-bar: #ffffff;
  --tg-line: rgba(0, 0, 0, 0.08);
  --tg-bline: var(--tg-line);
  --tg-btn: none;
  --tg-text: #000000;
  --tg-sub: #707579;
  --tg-field: #f0f2f5;
  --tg-accent: #8774e1;
  --tg-accent-text: #6c5ac8;
  --tg-ph: var(--tg-sub);
  --tg-ph-op: .8;
  --tg-banner-bg: var(--tg-bar);
  --tg-banner-text: var(--tg-sub);
}
.pwa-chat-view{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--wa-bg);color:var(--tg-text);-webkit-user-select:none;user-select:none;animation:chat-slide-in var(--motion-slow) var(--easing-decelerate) backwards}
.pwa-chat-head{flex:none;display:flex;align-items:center;gap:var(--space-2);padding:calc(var(--safe-top) + var(--space-2)) var(--space-2) var(--space-2);background:var(--tg-bar);border-bottom:1px solid var(--tg-line)}
.pwa-chat-head-info{flex:1;min-width:0}
.pwa-chat-head .pwa-chat-name{font-size:var(--fs-16);font-weight:var(--fw-700);color:var(--tg-text)}
.pwa-chat-sub{display:flex;align-items:center;gap:var(--space-1);font-size:var(--fs-12);color:var(--tg-sub)}
.pwa-chat-dot{flex:none;width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--success)}
.pwa-chat-dot.ro{background:var(--accent)}
.pwa-chat-dot.end{background:var(--text-tertiary)}
.pwa-chat-dot.dm{background:var(--primary)}
.pwa-chat-iconbtn{flex:none;width:var(--tap-min);height:var(--tap-min);border:0;border-radius:var(--radius-full);background:var(--tg-btn);color:var(--tg-sub);font-size:var(--fs-24);line-height:1;cursor:pointer}
.pwa-chat-banner{flex:none;padding:var(--space-2) var(--space-4);background:var(--tg-banner-bg);border-bottom:1px solid var(--tg-line);color:var(--tg-banner-text);font-size:var(--fs-13);text-align:center}
.pwa-chat-msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);background:var(--wa-bg)}
.pwa-chat-empty{margin:auto;padding:var(--space-6);text-align:center;color:var(--tg-sub);font-size:var(--fs-14)}

/* ===== BUBBLE (disalin dari Mini App, class dipetakan ke PWA) ===== */
.pwa-chat-row{position:relative;display:flex}
.pwa-chat-row.me{justify-content:flex-end}
.pwa-chat-row.enter{animation:fade-up var(--motion-base) var(--easing-decelerate) backwards}
.pwa-chat-swipe-ic{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);opacity:0;font-size:var(--fs-20);color:var(--tg-sub)}

/* --- BUBBLE CHAT --- */
.pwa-chat-bubble {
  position: relative;
  display: block;
  max-width: 85%;
  width: fit-content;
  min-width: 64px;
  padding: 6px 8px 6px 9px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 20px;
  color: var(--wa-text);
  box-shadow: 0 1px 1px rgba(16, 35, 47, 0.12);
  flex-shrink: 0;
  margin-bottom: 3px;
  border: none;
  touch-action: pan-y;
}
.pwa-chat-row.them .pwa-chat-bubble { background: var(--wa-in);  border-bottom-left-radius: 4px; }
.pwa-chat-row.me .pwa-chat-bubble { background: var(--wa-out); border-bottom-right-radius: 4px; }

/* --- TEXT, PADDING & JAM --- */
.pwa-chat-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.pwa-chat-pad { display: inline-block; visibility: hidden; margin-left: 12px; font-size: 11px; line-height: 14px; white-space: nowrap; pointer-events: none; }
.pwa-chat-meta { position: absolute; right: 8px; bottom: 4px; font-size: 11px; line-height: 14px; color: var(--wa-time-in); white-space: nowrap; user-select: none; }
.pwa-chat-row.me .pwa-chat-meta { color: var(--wa-time-out); }
/* khusus PWA: jam + centang SVG (.pwa-chat-tick) sejajar & rapat */
.pwa-chat-meta { display: flex; align-items: center; gap: 3px; }
.pwa-chat-tick { flex: none; display: block; }
/* pemesan lebar centang di dalam .pwa-chat-pad (16px svg + 3px gap) */
.pwa-chat-pad-tick { display: inline-block; width: 19px; height: 1px; }

/* --- QUOTE / REPLY --- */
.pwa-chat-quote { display: block; position: relative; margin: 0 0 5px; padding: 5px 8px 5px 11px; border-radius: 6px; background: var(--wa-quote); font-size: 13px; line-height: 17px; cursor: pointer; overflow: hidden; border-left: none; }
.pwa-chat-quote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--wa-quote-bar); }
.pwa-chat-quote b { font-weight: 600; font-size: 13px; line-height: 17px; color: var(--wa-quote-bar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pwa-chat-quote span { color: var(--wa-text); opacity: 0.75; white-space: normal; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pwa-chat-row.me .pwa-chat-bubble .pwa-chat-quote { background: var(--wa-quote-out); }
.pwa-chat-row.me .pwa-chat-bubble .pwa-chat-quote::before { background: var(--wa-quote-bar-out); }
.pwa-chat-row.me .pwa-chat-bubble .pwa-chat-quote b { color: var(--wa-quote-bar-out); }

/* ===== OPTIMISTIC: sending / failed ===== */
.pwa-chat-bubble.sending{opacity:.6}
.pwa-chat-row.me .pwa-chat-bubble.failed{background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger-text);box-shadow:none}
.pwa-chat-row.failed{flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.pwa-chat-fail{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-13);color:var(--danger-text)}
.pwa-chat-fail button{min-height:var(--tap-min);padding:0 var(--space-3);border:1px solid var(--danger);border-radius:var(--radius-full);background:var(--surface);color:var(--danger-text);font-size:var(--fs-13);font-weight:var(--fw-600);cursor:pointer}

/* ===== REPLY PREVIEW + INPUT ===== */
.pwa-chat-reply{flex:none;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);background:var(--tg-bar);border-top:1px solid var(--tg-line);border-left:3px solid var(--tg-accent)}
.pwa-chat-reply-main{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--fs-13)}
.pwa-chat-reply-main b{color:var(--tg-accent-text)}
.pwa-chat-reply-main span{color:var(--tg-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwa-chat-bottom{flex:none;background:var(--tg-bar);border-top:1px solid var(--tg-bline);padding-bottom:calc(var(--safe-bottom) + var(--space-2))}
.pwa-chat-quota{padding-top:var(--space-2);font-size:var(--fs-12);text-align:center;color:var(--tg-sub)}
.pwa-chat-quota:empty{display:none}
.pwa-chat-inputrow{display:flex;align-items:flex-end;gap:var(--space-2);padding:var(--space-2) var(--space-3) 0}
.pwa-chat-inputrow textarea{flex:1;min-height:var(--tap-min);max-height:120px;resize:none;padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--radius-xl);background:var(--tg-field);color:var(--tg-text);font:inherit;font-size:var(--fs-16);line-height:var(--lh-body);outline:none;-webkit-user-select:text;user-select:text;transition:border-color var(--motion-fast) var(--easing-standard)}
.pwa-chat-inputrow textarea:focus{border-color:var(--tg-accent)}
.pwa-chat-inputrow textarea::placeholder{color:var(--tg-ph);opacity:var(--tg-ph-op)}
.pwa-chat-send{flex:none;width:var(--tap-min);height:var(--tap-min);border:0;border-radius:var(--radius-full);background:var(--tg-accent);color:#ffffff;font-size:var(--fs-17);box-shadow:none;cursor:pointer;transition:opacity var(--motion-fast) var(--easing-standard)}
.pwa-chat-send:disabled{opacity:.4;box-shadow:none}
.pwa-chat-actions{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-3) 0}
.pwa-chat-actbtn{min-height:var(--space-12);border:0;border-radius:var(--radius-md);background:var(--bg);color:var(--primary-text);font-size:var(--fs-15);font-weight:var(--fw-600);cursor:pointer}
.pwa-chat-actbtn.primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-md)}
.pwa-chat-actbtn:disabled{opacity:.5}

/* ===== BOTTOM SHEET (menu ⋮) ===== */
.pwa-chat-sheet-back{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(15,23,42,.45);animation:fade-in var(--motion-fast) linear backwards}
.pwa-chat-sheet{width:100%;padding:0 var(--space-3) calc(var(--safe-bottom) + var(--space-3));border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--surface);box-shadow:var(--shadow-lg);animation:chat-sheet-up var(--motion-slow) var(--easing-decelerate) backwards}
.pwa-chat-grab{display:flex;justify-content:center;padding:var(--space-3) 0 var(--space-2);touch-action:none;cursor:grab}
.pwa-chat-handle{width:var(--space-10);height:var(--space-1);border-radius:var(--radius-full);background:var(--text-tertiary);opacity:.6}
.pwa-chat-sheet button{display:block;width:100%;min-height:var(--space-12);border:0;border-bottom:1px solid var(--border);background:none;color:var(--primary-text);font-size:var(--fs-16);font-weight:var(--fw-500);cursor:pointer}
.pwa-chat-sheet button.danger{color:var(--danger-text)}
.pwa-chat-sheet button.cancel{margin-top:var(--space-2);border:0;border-radius:var(--radius-md);background:var(--bg);color:var(--text-secondary);font-weight:var(--fw-600)}

/* ===== TOAST ===== */
.pwa-chat-toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + var(--space-12) * 2);transform:translateX(-50%);z-index:60;max-width:88%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);background:var(--text-primary);color:var(--surface);font-size:var(--fs-14);text-align:center;box-shadow:var(--shadow-lg)}

/* ===== DARK MODE (Telegram Dark) — override variabel di atas ===== */
@media (prefers-color-scheme: dark) {
  .pwa-chat-view {
    --wa-bg: #0e1621;
    --wa-in: #182533;
    --wa-out: #2b5278;
    --wa-text: #f5f5f5;
    --wa-time-in: #6d7f8f;
    --wa-time-out: #7da8d3;
    --wa-quote: rgba(255, 255, 255, 0.06);
    --wa-quote-bar: #5fb35a;
    --wa-quote-out: rgba(0, 0, 0, 0.2);
    --wa-quote-bar-out: #8fc7f5;
    --tg-bar: #17212b;
    --tg-line: rgba(255, 255, 255, 0.12);
    --tg-bline: transparent;
    --tg-btn: #222e3c;
    --tg-text: #f5f5f5;
    --tg-sub: #7e8c99;
    --tg-field: #232f3d;
    --tg-accent: #2ea5ff;
    --tg-accent-text: #6ab2f2;
    --tg-ph: #6d7f8f;
    --tg-ph-op: 1;
    --tg-banner-bg: rgba(255, 149, 0, 0.15);
    --tg-banner-text: #a8701c;
  }
}