/* public/assets/css/chat.css
   Yellowdokk Jobs Tracker — Chat Popup Bubble
   - Responsif pakai clamp()
   - Tema mengikuti token: --panel, --text, --ring, --brand, --bg
   - Sudah termasuk state minimized, roster, thread, composer, bubbles, attachments, emoji panel
*/

/* ====== SIZE & THEME TOKENS ====== */
:root{
  /* FAB */
  --fab-size: 64px;

  /* Window size: min | preferred | max */
  --win-w: clamp(920px, 34vw, 720px);
  --win-h: clamp(620px, 70vh, 820px);

  /* Colors (fallbacks untuk jaga2) */
  --chat-bg: var(--panel, #121212);
  --chat-fg: var(--text, #e6e6e6);
  --chat-ring: var(--ring, #2a2a2a);
  --chat-border: rgba(255,255,255,.10);
  --chat-soft: rgba(255,255,255,.06);
  --chat-soft-2: rgba(255,255,255,.04);
  --bubble-outgoing:#d30000;
  --bubble-outgoing-fg:#fff;
  --bubble-incoming:#26262621;
  --bubble-incoming-fg:#eaeaea;
}
:root[data-theme="dark"]{
  --bubble-outgoing:#d30000;
  --bubble-outgoing-fg:#fff;
  --bubble-incoming:#262626;
  --bubble-incoming-fg:#eaeaea;
}

/* ====== ROOT CONTAINER ====== */
#ykChatRoot{
  position:fixed; 
  right: 20px; 
  bottom: 20px; 
  z-index:2147483000;
  font-family: inherit;
}
#ykChatRoot *{ box-sizing: border-box; }

/* ====== FAB (floating button) ====== */
.yk-chat-fab{
  position:fixed; 
  right: 20px; 
  bottom: 20px; 
  width:var(--fab-size); 
  height:var(--fab-size);
  border-radius:999px; 
  display:grid; 
  place-items:center;
  background:var(--brand, #f01b24); 
  color:#fff; 
  border:none; 
  cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.45); 
  transition: transform .08s ease;
  z-index:2147483001;
}
.yk-chat-fab:active{ transform: scale(.98); }
.yk-chat-fab .badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  background:#ff0000; color:#ffffff; border-radius:999px; font-size:11px; display:grid; place-items:center;
}

/* ====== WINDOW ====== */
.yk-chat-window.card{
  position:fixed; 
  right:20px; 
  bottom:calc(20px + var(--fab-size) + 12px);
  width:var(--win-w); 
  height:var(--win-h);
  background:var(--chat-bg); 
  color:var(--chat-fg);
  border:1px solid var(--chat-border); 
  border-radius:16px;
  box-shadow:0 22px 48px rgba(0,0,0,.48);
  display:flex; 
  flex-direction:column; 
  overflow:hidden;
  z-index:2147483002;
}
.yk-chat-window[hidden]{ display:none !important; }

/* Minimized = hanya header */
.yk-chat-window.minimized{ height:56px; }
.yk-chat-window.minimized .yk-chat-body{ display:none !important; }

  /* ====== HEADER ====== */
  .yk-chat-header{
    flex:0 0 56px;
    padding:12px 14px; border-bottom:1px solid var(--chat-border);
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(to bottom, rgba(255,255,255,.03), transparent);
    cursor: pointer; /* Indikasi bahwa header bisa di-double-click untuk minimize */
    user-select: none; /* Prevent text selection saat double-click */
  }
  .yk-chat-header .title{ font-weight:800; font-size:16px; letter-spacing:.2px; }
  .yk-chat-header .actions{ display:flex; gap:6px; cursor: default; /* Reset cursor untuk actions area */ }
.yk-chat-header .actions .icon-btn{
  appearance:none; background:transparent; border:none; color:var(--chat-fg);
  font-size:20px; line-height:1; padding:6px 10px; border-radius:8px; cursor:pointer;
}
.yk-chat-header .actions .icon-btn:hover{ background:var(--chat-soft); }

/* ====== BODY LAYOUT ====== */
.yk-chat-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:0;
  overflow:hidden;
}

/* ====== ROSTER (left) ====== */
.yk-chat-roster{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-right:1px solid var(--chat-border);
}
.roster-head{ 
  flex:0 0 auto;
  padding:10px; display:flex; flex-direction:column; gap:8px; 
}
.roster-head .title.sm{ font-size:12px; font-weight:700; opacity:.85; }
.input.xs{
  font-size:13px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--chat-border); background:var(--bg, #0c0c0c); color:var(--chat-fg);
  outline:none;
}
.input.xs:focus{ border-color: var(--brand, #f01b24); box-shadow: 0 0 0 3px rgba(240,27,36,.2); }

.roster-list{ 
  flex:1 1 auto;
  min-height:0;
  list-style:none; margin:0; padding:0; overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.roster-list li{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; cursor:pointer; user-select:none; transition: background .12s ease;
}
.roster-list li:hover{ background:var(--chat-soft); }
.roster-list li.active{ background:var(--chat-soft-2); }

.roster-list li .avatar{
  position:relative;
  width:36px; height:36px; border-radius:999px;
  object-fit:cover;
  background:#2f2f2f;
  flex:0 0 36px;
}

.roster-list li .status{
  position:absolute; 
  left:34px; 
  bottom:8px;
  width:12px; height:12px; border-radius:999px; 
  border:2px solid var(--chat-bg);
  z-index:2;
}
.roster-list li .status.online{ background:#34d399; }
.roster-list li .status.offline{ background:#6b7280; }

.roster-list li .name{
  flex:1;
  font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.roster-list li .badge.unread{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  min-width:18px; height:18px; padding:0 6px; border-radius:999px;
  font-size:11px; line-height:18px; text-align:center;
  background:#d9534f; color:#fff; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.roster-list li .badge.unread[hidden]{ display:none !important; }

.roster-list .empty{ opacity:.6; font-size:12px; padding:10px; }

/* ====== THREAD (right) ====== */
.yk-chat-thread{
  position:relative; display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

/* Thread header (peer info) */
.thread-head{
  flex:0 0 auto;
  padding:10px 12px; border-bottom:1px solid var(--chat-border);
  display:flex; align-items:center; gap:10px;
}

/* Hide back buttons di desktop */
.thread-head .btn-back,
.roster-head .btn-back{
  display: none;
}
  .thread-head .peer{ display:flex; gap:10px; align-items:center; min-width:0; flex:1; }
  .thread-head .actions{ display:flex; gap:6px; align-items:center; }
  .thread-head .peer .avatar{
    width:40px; height:40px; border-radius:999px;
    background:#2f2f2f center/cover no-repeat;
    flex:0 0 40px;
  }
.peer-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.peer-presence{ font-size:12px; opacity:.75; }

/* Messages area */
.thread-messages{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:12px 16px;
  display:flex; flex-direction:column; gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.thread-messages .empty{ opacity:.6; font-size:13px; text-align:center; margin-top: 16%; }

/* Grouping (opsional dipakai nanti) */
.msg-group{ display:flex; flex-direction:column; gap:8px; }
.msg-row{ display:flex; flex-direction:column; }

/* ====== BUBBLES ====== */
.msg{
  max-width:86%; padding:10px 12px; border-radius:14px; font-size:14px; line-height:1.35;
  word-wrap: break-word; white-space: normal;
  display:block;
}
.msg.me{
  align-self:flex-end; background:var(--bubble-outgoing); color:#eaeaea;
  border-bottom-right-radius: 6px;
}
.msg.you{
  align-self:flex-start; background:var(--bubble-incoming); border:1px solid var(--chat-border);
  border-bottom-left-radius: 6px;
}
.msg .text a{ color:#9ddcff; text-decoration:underline; word-break: break-all; }

/* Single emoji message - emoji lebih besar */
.msg.msg-single-emoji .text.single-emoji{
  font-size: 48px;
  line-height: 1.2;
  text-align: center;
  padding: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.msg.msg-single-emoji{
  padding: 16px 20px;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.msg.msg-single-emoji .meta{
  margin-top: 6px;
  justify-content: center;
  width: 100%;
}

.msg .meta{
  margin-top:4px; font-size:11px; opacity:.72; display:flex; gap:6px; align-items:center;
  justify-content:flex-end;
}
.msg.you .meta{ justify-content:flex-start; }

.msg .receipt{ 
  font-size:14px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  line-height:1; 
  opacity:.7;
  margin-left:4px;
  min-width:16px;
  min-height:12px;
}
.msg .receipt .receipt-icon{
  width:16px;
  height:12px;
  display:inline-block;
  vertical-align:middle;
  object-fit:contain;
  flex-shrink:0;
}
.msg .receipt.sent{ 
  opacity:0.7;
}
.msg .receipt.delivered{ 
  opacity:0.8;
}
.msg .receipt.read{ 
  opacity:1;
}
.msg .receipt .seen{ color:#60a5fa; }

/* Message bubble wrapper */
.msg .bubble { position: relative; }

/* Status di bubble */
.msg.mine .bubble .msg-status{
  position:absolute; right:8px; bottom:4px;
  font-size:11px; opacity:.8; user-select:none;
}
.msg.mine .bubble .msg-status.seen{ font-weight:600; opacity:1; }

/* Image bubble */
.msg-img,
.msg .bubble.image img {
  display:block; max-width:240px; max-height:240px; height:auto; 
  border-radius:10px; border:1px solid var(--chat-border);
  background:#111;
}

/* File attachment bubble */
.msg-file{
  display:flex; align-items:center; gap:10px; padding:10px 12px; 
  background:var(--chat-soft); border:1px solid var(--chat-border); border-radius:10px;
}
.msg-file .ico{ width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:rgba(255,255,255,.08); font-size:12px; }
.msg-file .info{ display:flex; flex-direction:column; gap:2px; }
.msg-file .name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.msg-file .meta{ font-size:11px; opacity:.75; }

.msg .bubble.file a {
  text-decoration: none; word-break: break-all;
}
.msg .bubble.file a:hover { text-decoration: underline; }

/* ====== COMPOSER ====== */
.yk-chat-composer{
  flex:0 0 auto;
  position:relative; border-top:1px solid var(--chat-border); padding:10px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:10px;
  background:rgba(255,255,255,.02);
}
.composer-tools{ display:flex; gap:6px; }
.btn-ghost, .icon-btn{
  appearance:none; background:transparent; border:none; color:var(--chat-fg);
  padding:6px 8px; border-radius:8px; cursor:pointer;
}
.btn-ghost:hover{ background:var(--chat-soft); }
.composer-input{
  min-height:44px; max-height:160px; overflow:auto; padding:10px 12px;
  border:1px solid var(--chat-border); border-radius:12px; background:var(--bg, #0c0c0c); outline:none; color:var(--chat-fg);
}
.composer-input:empty:before{ content: attr(data-placeholder); color:#9ca3af; }
.btn-send{
  background:var(--brand, #f01b24); color:#fff; border:none; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  transition: transform .06s ease, opacity .12s ease;
}
.btn-send:active{ transform: translateY(1px); }
.btn-send:disabled{ opacity:.5; cursor:not-allowed; }

/* Attachment preview row (optional future use) */
.att-preview{ display:flex; gap:8px; align-items:center; padding:6px 0; }
.att-chip{
  display:inline-flex; gap:6px; align-items:center; padding:6px 8px; border-radius:10px; border:1px dashed var(--chat-border);
  background:var(--chat-soft-2); font-size:12px;
}
.att-chip .remove{ cursor:pointer; opacity:.8; }
.att-chip .remove:hover{ opacity:1; }

/* ====== EMOJI PANEL ====== */
#ykChatEmojiPanel{
  position:absolute; bottom:60px; right:10px; width:580px; max-height:260px; overflow:auto;
  background:var(--chat-bg); color:var(--chat-fg); border:1px solid var(--chat-border); border-radius:12px;
  box-shadow:0 18px 38px rgba(0,0,0,.45); padding:8px; display:grid; grid-template-columns: repeat(8, 1fr); gap:4px;
  z-index:1000;
}
#ykChatEmojiPanel[hidden]{ display:none !important; }
#ykChatEmojiPanel button{
  font-size:18px; line-height:1; padding:6px; background:transparent; border:none; cursor:pointer; border-radius:8px;
  transition: background 0.15s ease;
}
#ykChatEmojiPanel button:hover{ background:var(--chat-soft); }
#ykChatEmojiPanel button:active{ transform: scale(0.9); }

/* ====== UNREAD MESSAGES INDICATOR ====== */
.unread-indicator{
  display:flex; flex-direction:column; align-items:center; margin:12px 0;
  gap:8px;
}
.unread-indicator .unread-line{
  width:100%; height:1px; background:var(--text);
  max-width:200px;
}
.unread-indicator .unread-text{
  font-size:12px; color:var(--text); 
  padding:4px 12px; border-radius:10px;
  background:rgba(255, 0, 0, 0.1);
  white-space:nowrap;
  font-weight:500;
  user-select:none;
}

/* ====== SCROLLBAR (Chrome/WebKit) ====== */
#ykChatRoot ::-webkit-scrollbar{ width:10px; height:10px; }
#ykChatRoot ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }
#ykChatRoot ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); }
#ykChatRoot ::-webkit-scrollbar-track{ background: transparent; }

/* ====== ACCESSIBILITY STATES ====== */
#ykChatRoot .focus-ring:focus{
  outline: 2px solid var(--brand, #f01b24); outline-offset: 2px;
}

/* ====== FAB ALERT ANIMATION ====== */
@keyframes yk-wiggle {
  0%, 100% { transform: translateZ(0) rotate(0deg) scale(1); box-shadow: 0 0 0 0 rgba(255,195,0,.0); }
  10% { transform: translateY(-1px) rotate(-2deg) scale(1.02); }
  20% { transform: translateY(1px) rotate(2deg)  scale(1.02); }
  30% { transform: translateY(-1px) rotate(-2deg) scale(1.02); }
  40% { transform: translateY(1px) rotate(2deg)  scale(1.02); }
  50% { transform: rotate(0deg) }
}
#ykChatToggle.alert {
  animation: yk-wiggle 1.2s ease-in-out infinite;
}

/* ====== IKON SVG ====== */
#ykChatRoot .ik{
  display:block;
  width:20px; height:20px;
  pointer-events: none;
}
.yk-chat-fab .ik{ width:24px; height:24px; }

/* Auto-invert utk SVG hitam di dark theme */
#ykChatRoot .ik.auto { filter: none; }
:root[data-theme="dark"] #ykChatRoot .ik.auto,
html.dark #ykChatRoot .ik.auto,
body.dark #ykChatRoot .ik.auto,
.theme-dark #ykChatRoot .ik.auto {
  filter: invert(1) brightness(1.2) contrast(1.05);
}

/* ====== TYPING INDICATOR ====== */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  opacity: 0.7;
}

.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

  .typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: typing-bounce 1.4s infinite ease-in-out;
  }
  
  .typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  .typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  .typing-dots span:nth-child(3) {
    animation-delay: 0;
  }
  
  @keyframes typing-bounce {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.7;
    }
    30% {
      transform: translateY(-10px);
      opacity: 1;
    }
  }
  
  .typing-text {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
    font-style: italic;
  }
  
  /* Dark mode override untuk typing indicator */
  :root[data-theme="dark"] .typing-dots span,
  html.dark .typing-dots span,
  body.dark .typing-dots span,
  .theme-dark .typing-dots span {
    background-color: rgba(255, 255, 255, 0.6);
  }
  
  :root[data-theme="dark"] .typing-text,
  html.dark .typing-text,
  body.dark .typing-text,
  .theme-dark .typing-text {
    color: rgba(255, 255, 255, 0.8);
  }

/* ====== LOADING ANIMATION ====== */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ====== MOBILE / SMALL SCREENS ====== */
@media (max-width: 880px){
  :root{
    --win-w: clamp(360px, 90vw, 560px);
    --win-h: clamp(520px, 70vh, 760px);
  }
  .yk-chat-body{ grid-template-columns: 180px 1fr; }
  .msg{ max-width: 92%; }
}

/* ====== MOBILE PHONE (< 768px) ====== */
@media (max-width: 767px){
  /* Full screen window untuk mobile */
  :root{
    --win-w: 100vw;
    --win-h: 100vh;
    --fab-size: 56px;
  }
  
      /* Root container - tetap di pojok kanan bawah untuk FAB */
  #ykChatRoot{
    right: 16px;
    bottom: 16px;
    left: auto;
    top: auto;
  }
  
  /* Window - full screen */
  .yk-chat-window.card{
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    z-index: 2147483002;
  }
  
  /* Body - single column, tampilkan hanya chat thread atau roster */
  .yk-chat-body{ 
    grid-template-columns: 1fr;
    position: relative;
  }
  
  /* Roster - full width ketika tampil, hidden secara default */
  .yk-chat-roster{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--chat-bg);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }
  
  .yk-chat-roster.show{
    transform: translateX(0);
  }
  
  /* Thread - full width */
  .yk-chat-thread{
    width: 100%;
    height: 100%;
  }
  
  /* Header - lebih kompak */
  .yk-chat-header{
    flex: 0 0 52px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--chat-border);
  }
  
  .yk-chat-header .title{
    font-size: 16px;
    font-weight: 700;
  }
  
  .yk-chat-header .actions .icon-btn{
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
  
  /* Roster head - mobile styling */
  .roster-head{
    padding: 12px;
    position: relative;
    min-height: 48px;
  }
  
  /* Hide "Semua User" title di mobile (terlalu ramai) */
  .roster-head .title.sm{
    display: none;
  }
  
  .roster-head .input.xs{
    margin-top: 0;
    padding-left: 44px; /* Space untuk back button */
  }
  
  /* Show back buttons di mobile */
  .thread-head .btn-back,
  .roster-head .btn-back{
    display: flex;
  }
  
  /* Back button di roster header (mobile only) */
  .roster-head .btn-back{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--chat-fg);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 8px;
    z-index: 2;
  }
  
  .roster-head .btn-back:hover{
    background: var(--chat-soft);
  }
  
  .roster-head .btn-back:active{
    background: var(--chat-soft-2);
  }
  
  /* Thread head - mobile styling */
  .thread-head{
    padding: 12px;
    position: relative;
    min-height: 56px;
    border-bottom: 1px solid var(--chat-border);
  }
  
  /* Back button di thread header (mobile only) */
  .thread-head .btn-back{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--chat-fg);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 8px;
    z-index: 1;
  }
  
  .thread-head .btn-back:hover{
    background: var(--chat-soft);
  }
  
  .thread-head .btn-back:active{
    background: var(--chat-soft-2);
  }
  
      .thread-head .peer{
      margin-left: 44px; /* Space untuk back button */
      flex: 1;
      min-width: 0;
    }
    
    /* Thread head actions di mobile */
    .thread-head .actions{
      margin-left: auto;
      z-index: 1;
    }
  
  /* Roster list items - mobile */
  .roster-list li{
    padding: 14px 12px;
  }
  
  .roster-list li .avatar{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  
  .roster-list li .status{
    width: 14px;
    height: 14px;
    left: 38px;
    bottom: 10px;
  }
  
  /* Messages - padding lebih kecil */
  .thread-messages{
    padding: 12px;
  }
  
  /* Message bubbles - lebih lebar */
  .msg{
    max-width: 85%;
    padding: 12px 14px;
    font-size: 15px;
  }
  
  /* Single emoji - lebih kecil untuk mobile */
  .msg.msg-single-emoji .text.single-emoji{
    font-size: 36px;
  }
  
  .msg.msg-single-emoji{
    padding: 14px 18px;
    min-width: 50px;
  }
  
  /* Composer - lebih besar untuk touch */
  .yk-chat-composer{
    padding: 12px;
    gap: 8px;
    border-top: 1px solid var(--chat-border);
  }
  
  .composer-input{
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .btn-send{
    padding: 12px 18px;
    font-size: 15px;
    min-width: 60px;
  }
  
  .btn-ghost, .icon-btn{
    padding: 8px 10px;
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Avatar di thread head */
  .thread-head .peer .avatar{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  
  /* Badge unread */
  .roster-list li .badge.unread{
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
  }
  
  .roster-list li .name{
    font-size: 14px;
    font-weight: 500;
  }
  
  .peer-name{
    font-size: 15px;
    font-weight: 600;
  }
  
  /* Emoji panel - full width untuk mobile */
  #ykChatEmojiPanel{
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    right: 10px;
    left: 10px;
    bottom: 70px;
  }
  
  /* Typing indicator */
  .typing-indicator{
    padding: 10px 14px;
  }
  
  .typing-text{
    font-size: 13px;
  }
  
  /* Scrollbar - lebih kecil untuk mobile */
  #ykChatRoot ::-webkit-scrollbar{ 
    width: 6px; 
    height: 6px; 
  }
  
  /* FAB - posisi lebih aman di pojok kanan bawah */
  .yk-chat-fab{
    position: fixed;
    width: 56px;
    height: 56px;
    bottom: 16px;
    right: 16px;
    left: auto;
    top: auto;
    z-index: 2147483001;
  }
  
  /* Unread indicator */
  .unread-indicator .unread-text{
    font-size: 13px;
    padding: 6px 14px;
  }
}

/* ====== VERY SMALL MOBILE (< 480px) ====== */
@media (max-width: 479px){
  .msg{
    max-width: 88%;
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .msg.msg-single-emoji .text.single-emoji{
    font-size: 32px;
  }
  
  .yk-chat-header{
    padding: 8px 12px;
  }
  
  .yk-chat-header .title{
    font-size: 15px;
  }
  
  .roster-head{
    padding: 10px 12px;
  }
  
  .roster-head .btn-back{
    left: 10px;
  }
  
  .roster-head .input.xs{
    padding-left: 42px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .roster-list li{
    padding: 12px;
  }
  
  .roster-list li .name{
    font-size: 13px;
  }
  
  .thread-head{
    padding: 10px 12px;
    min-height: 52px;
  }
  
  .thread-head .btn-back{
    left: 10px;
  }
  
  .thread-messages{
    padding: 10px 12px;
  }
  
  .peer-name{
    font-size: 14px;
  }
  
  .composer-input{
    font-size: 16px; /* Tetap 16px untuk prevent zoom */
    padding: 10px 12px;
  }
  
  .yk-chat-composer{
    padding: 10px 12px;
  }
  
  .btn-send{
    padding: 10px 16px;
    font-size: 14px;
  }
}