/* Yolori - penataan panel obrolan ruang rapat */
.chat .chat-history .message-data { margin-bottom: 4px; opacity: .72 }
.chat .chat-history .message-data img { width: 22px; box-shadow: none; vertical-align: middle }
.chat .chat-history .message-data-time { font-size: 11px; color: rgba(255,255,255,.55) }
.chat .chat-history li.ym-rapat .message-data { display: none }
.chat .chat-history li.ym-rapat { margin-top: -8px }

.chat .chat-history .message { padding: 9px 13px; min-width: 0; max-width: 82%; border-radius: 18px; font-size: 14px; line-height: 1.45 }
.chat .chat-history .my-message { border-bottom-right-radius: 6px }
.chat .chat-history .other-message { border-bottom-left-radius: 6px }
.chat .chat-history .message:hover { transform: none }
.chat .chat-history .message > hr { display: none }

.chat .chat-history .message .about-buttons { display: flex; justify-content: flex-end; gap: 2px; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .18s ease, opacity .18s ease, margin .18s ease }
.chat .chat-history .message:hover .about-buttons,
.chat .chat-history .message:focus-within .about-buttons,
.chat .chat-history .message.ym-buka .about-buttons { max-height: 34px; opacity: 1; margin-top: 6px }
.chat .chat-history .message .about-buttons button { background: none; border: 0; padding: 3px 5px; line-height: 1; color: rgba(255,255,255,.55); cursor: pointer; border-radius: 6px }
.chat .chat-history .message .about-buttons button:hover { color: #fff; background: rgba(255,255,255,.08) }
.chat .chat-history .message .about-buttons button svg { width: 14px; height: 14px }

.chat-send-btn { width: 38px; height: 38px; align-self: center; margin: 3px 4px 3px 2px; border-radius: 50%; border-left: 0; background: #1B67B2; color: #fff }
.chat-send-btn:hover { background: #12508F; color: #fff; border-radius: 50% }
.chat-char-count { font-size: 10px; opacity: .35 }

/* ikon aksi pesan: glyph isian diganti garis tipis lewat mask */
.chat .chat-history .message .about-buttons button i { display: none }
.chat .chat-history .message .about-buttons button::before {
  content: ''; display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--ym-ikon) center / 15px 15px no-repeat;
  mask: var(--ym-ikon) center / 15px 15px no-repeat;
}
.chat .chat-history .message .about-buttons button { padding: 5px 7px; color: rgba(255,255,255,.5) }
.chat .chat-history .message .about-buttons button:hover { color: rgba(255,255,255,.95) }

.chat .chat-history .message .about-buttons button[id^='msg-copy-'] {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15h-.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5'/%3E%3C/svg%3E")
}
.chat .chat-history .message .about-buttons button[id^='msg-speech-'] {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6.5 9H3.5v6h3L11 19z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6'/%3E%3Cpath d='M18.3 6.2a8 8 0 0 1 0 11.6'/%3E%3C/svg%3E")
}
.chat .chat-history .message .about-buttons button[id^='msg-react-'] {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.3s1.3 1.9 3.5 1.9 3.5-1.9 3.5-1.9'/%3E%3Cpath d='M9.2 9.5h.01'/%3E%3Cpath d='M14.8 9.5h.01'/%3E%3C/svg%3E")
}
.chat .chat-history .message .about-buttons button[id^='msg-delete-'] {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V5A1.5 1.5 0 0 1 11 3.5h2A1.5 1.5 0 0 1 14.5 5v1.5'/%3E%3Cpath d='M6.6 6.5 7.4 19a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.8-12.5'/%3E%3Cpath d='M10.5 10.5v6'/%3E%3Cpath d='M13.5 10.5v6'/%3E%3C/svg%3E")
}

/* ym-bilah: ikon bilah bawah obrolan disamakan ke garis tipis */
.chat-toolbar-btn i { display: none }
.chat-toolbar-btn::before {
  content: ''; display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ym-ikon) center / 16px 16px no-repeat;
  mask: var(--ym-ikon) center / 16px 16px no-repeat;
}
.chat-toolbar-btn { color: rgba(255,255,255,.58) }
.chat-toolbar-btn:hover { color: rgba(255,255,255,.95) }
#chatSpeechStartButton { color: rgba(224,50,47,.8) }
#chatSpeechStartButton:hover { color: rgba(224,50,47,1) }

#chatEmojiButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.3s1.3 1.9 3.5 1.9 3.5-1.9 3.5-1.9'/%3E%3Cpath d='M9.2 9.5h.01'/%3E%3Cpath d='M14.8 9.5h.01'/%3E%3C/svg%3E")
}
#chatMarkdownButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.5'/%3E%3Cpath d='M6 15.5v-7l2.7 3.3L11.4 8.5v7'/%3E%3Cpath d='M16.5 8.5v6'/%3E%3Cpath d='M14.6 12.6l1.9 2 1.9-2'/%3E%3C/svg%3E")
}
#fileShareChatButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 11.5 12.2 18.3a4.2 4.2 0 0 1-5.9-5.9l7.3-7.3a2.8 2.8 0 0 1 4 4l-7.3 7.3a1.4 1.4 0 0 1-2-2l6.6-6.6'/%3E%3C/svg%3E")
}
#chatSpeechStartButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='10' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 18v3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E")
}
#chatSpeechStopButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='10' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 18v3'/%3E%3C/svg%3E")
}
#chatPasteButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15h-.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5'/%3E%3C/svg%3E")
}
#chatCleanTextButton {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V5A1.5 1.5 0 0 1 11 3.5h2A1.5 1.5 0 0 1 14.5 5v1.5'/%3E%3Cpath d='M6.6 6.5 7.4 19a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.8-12.5'/%3E%3Cpath d='M10.5 10.5v6'/%3E%3Cpath d='M13.5 10.5v6'/%3E%3C/svg%3E")
}
#chatShowParticipantsListBtn {
  --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19.5a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.6'/%3E%3Cpath d='M17.5 14.2a6 6 0 0 1 3 5.3'/%3E%3C/svg%3E")
}

/* ym-panel: ikon daftar percakapan disamakan ke garis tipis */
#chatShareRoomBtn i, .chat-action-icon-btns button i, .input-group-text i.fa-search { display: none }
#chatShareRoomBtn::before, .chat-action-icon-btns button::before, .input-group-text::before {
  content: ''; display: inline-block; width: 16px; height: 16px; background: currentColor; vertical-align: -3px;
  -webkit-mask: var(--ym-ikon) center / 16px 16px no-repeat;
  mask: var(--ym-ikon) center / 16px 16px no-repeat;
}
#chatShareRoomBtn::before { margin-right: 7px }
.chat-action-icon-btns button { color: rgba(255,255,255,.6) }
.chat-action-icon-btns button:hover { color: rgba(255,255,255,.95) }

#chatShareRoomBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M2.8 19.5a6.2 6.2 0 0 1 12.4 0'/%3E%3Cpath d='M18.5 8v6'/%3E%3Cpath d='M15.5 11h6'/%3E%3C/svg%3E") }
#participantsUnreadMessagesBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4h8A2.5 2.5 0 0 1 16 6.5v4A2.5 2.5 0 0 1 13.5 13H8l-5 3.5z'/%3E%3Cpath d='M18 9.5h.5A2.5 2.5 0 0 1 21 12v4a2.5 2.5 0 0 1-2.5 2.5H18l-3 2.5V18'/%3E%3C/svg%3E") }
#participantsRaiseHandBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M12 11V4.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M15 11V6.5a1.5 1.5 0 0 1 3 0V14a6 6 0 0 1-6 6h-1a5 5 0 0 1-4.3-2.5L5 14.2a1.6 1.6 0 0 1 2.6-1.8L9 14'/%3E%3C/svg%3E") }
#participantsHiddenBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E") }
#participantsHiddenViewBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") }
#participantsHiddenShowAllBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19.5a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.6'/%3E%3Cpath d='M17.5 14.2a6 6 0 0 1 3 5.3'/%3E%3C/svg%3E") }
#participantsSaveBtn { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v9.5'/%3E%3Cpath d='M8.5 10.5 12 14l3.5-3.5'/%3E%3Cpath d='M4.5 16v2A1.5 1.5 0 0 0 6 19.5h12a1.5 1.5 0 0 0 1.5-1.5v-2'/%3E%3C/svg%3E") }
#chatHideParticipantsList { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E") }
.input-group-text { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") }

/* ym-menu: ikon menu dan header obrolan disamakan ke garis tipis */
#chatHeader i.fa-eye, #chatHeader i.fa-volume-high, #chatHeader i.fa-circle-half-stroke,
#chatHeader i.fa-save, #chatHeader i.fa-trash, #chatHeader i.fa-bars, #chatHeader i.fa-times {
  display: inline-block; width: 16px; height: 16px; background: currentColor; vertical-align: -3px;
  -webkit-mask: var(--ym-ikon) center / 16px 16px no-repeat;
  mask: var(--ym-ikon) center / 16px 16px no-repeat;
}
#chatHeader i.fa-eye::before, #chatHeader i.fa-volume-high::before, #chatHeader i.fa-circle-half-stroke::before,
#chatHeader i.fa-save::before, #chatHeader i.fa-trash::before, #chatHeader i.fa-bars::before, #chatHeader i.fa-times::before { content: '' }

#chatHeader i.fa-eye { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") }
#chatHeader i.fa-volume-high { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6.5 9H3.5v6h3L11 19z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6'/%3E%3Cpath d='M18.3 6.2a8 8 0 0 1 0 11.6'/%3E%3C/svg%3E") }
#chatHeader i.fa-circle-half-stroke { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black' stroke='none'/%3E%3C/svg%3E") }
#chatHeader i.fa-save { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v9.5'/%3E%3Cpath d='M8.5 10.5 12 14l3.5-3.5'/%3E%3Cpath d='M4.5 16v2A1.5 1.5 0 0 0 6 19.5h12a1.5 1.5 0 0 0 1.5-1.5v-2'/%3E%3C/svg%3E") }
#chatHeader i.fa-trash { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V5A1.5 1.5 0 0 1 11 3.5h2A1.5 1.5 0 0 1 14.5 5v1.5'/%3E%3Cpath d='M6.6 6.5 7.4 19a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.8-12.5'/%3E%3Cpath d='M10.5 10.5v6'/%3E%3Cpath d='M13.5 10.5v6'/%3E%3C/svg%3E") }
#chatHeader i.fa-bars { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 17h16'/%3E%3C/svg%3E") }
#chatHeader i.fa-times { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E") }

/* ym-status: ikon status baris daftar + header yang meluber di layar sempit */
#plist i.fa-microphone-slash, #plist i.fa-microphone-lines, #plist i.fa-microphone,
#plist i.fa-video-slash, #plist i.fa-video, #plist i.fa-desktop {
  display: inline-block; width: 15px; height: 15px; background: currentColor; vertical-align: -2px;
  -webkit-mask: var(--ym-ikon) center / 15px 15px no-repeat;
  mask: var(--ym-ikon) center / 15px 15px no-repeat;
}
#plist i.fa-microphone-slash::before, #plist i.fa-microphone-lines::before, #plist i.fa-microphone::before,
#plist i.fa-video-slash::before, #plist i.fa-video::before, #plist i.fa-desktop::before { content: '' }

#plist i.fa-microphone-slash { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='10' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 18v3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E") }
#plist i.fa-microphone-lines, #plist i.fa-microphone { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='10' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 18v3'/%3E%3C/svg%3E") }
#plist i.fa-video-slash { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='13' height='11' rx='2.5'/%3E%3Cpath d='M15.5 10.5 21 7.5v9l-5.5-3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") }
#plist i.fa-video { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='13' height='11' rx='2.5'/%3E%3Cpath d='M15.5 10.5 21 7.5v9l-5.5-3'/%3E%3C/svg%3E") }
#plist i.fa-desktop { --ym-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='12' rx='2'/%3E%3Cpath d='M9 20.5h6'/%3E%3Cpath d='M12 16.5v4'/%3E%3C/svg%3E") }

.chat-list-actions { flex-wrap: wrap; row-gap: 8px }
.chat-action-icon-btns { flex-wrap: wrap }
#chatShareRoomBtn { flex: 0 1 auto; min-width: 0 }
@media (max-width: 480px) {
  .chat-list-actions { gap: 6px }
  .chat-action-icon-btns { gap: 2px }
  .chat-action-icon-btns button { padding: 6px }
}

/* ym-lembar: di layar sempit daftar percakapan jadi lapisan geser, bukan kolom */
@media (max-width: 600px) {
  #chatApp { position: relative; overflow: hidden }
  #plist {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30;
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    background: var(--msger-bg, #0e2a52);
    box-shadow: 0 0 40px rgba(0,0,0,.45);
    transform: translateX(0); visibility: visible;
    transition: transform .22s ease, visibility .22s ease;
  }
  #plist.hidden {
    display: flex !important;
    transform: translateX(-100%); visibility: hidden; pointer-events: none;
  }
  #chat { margin-left: 0 !important; border-left: none !important; width: 100% !important }
}

/* ym-lembar2: keadaan tersembunyi kembali display:none supaya lebarnya tidak terbaca penuh
   oleh updateChatFooterVisibility; geseran dipindah ke animasi saat muncul */
@keyframes ymLembarMasuk { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@media (max-width: 600px) {
  #plist.hidden { display: none !important; transform: none; visibility: hidden; transition: none }
  #plist:not(.hidden) { animation: ymLembarMasuk .22s ease; visibility: visible; transform: none }
}