/* GPT 29.10.2026 · hidden-chat/call UI · DOM confirmed by Claude at e200456.
   Load after existing app styles, before giao-dien.js. Existing icons are reused. */
#hop[data-loai="an"] .hop-dau h3 { min-width: 0; overflow-wrap: anywhere; }
#hop[data-loai="an"] .hop-than { line-height: 1.55; overflow-wrap: anywhere; }
#hop[data-loai="an"] .hop-than > p:first-child { margin-top: 0; }
#hop[data-loai="an"] .o-pin-ket {
  display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 52px;
  margin: 0 0 14px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--vien); background: var(--mat-2); color: var(--chu);
}
#hop[data-loai="an"] .o-pin-ket:focus-visible { outline: 3px solid var(--chinh-2); outline-offset: 2px; }
#hop[data-loai="an"] .o-pin-ket::placeholder { font-size: .875rem; letter-spacing: normal; }
#hop[data-loai="an"] .nhat { margin: 8px 0 16px; line-height: 1.55; }
#hop[data-loai="an"] .loi:not(:empty) {
  padding: 12px; border: 1px solid currentColor; border-inline-start-width: 4px;
  border-radius: 12px; line-height: 1.55;
}
#hop[data-loai="an"] .loi:empty { min-height: 0; margin: 0; }
#hop[data-loai="an"] .ds-an { flex: none; overflow: visible; border: 1px solid var(--vien); border-radius: 16px; margin-bottom: 16px; }
#hop[data-loai="an"] .ds-an .muc { min-height: 72px; margin: 0; border-radius: 0; }
#hop[data-loai="an"] .ds-an .muc:first-child { border-start-start-radius: 16px; border-start-end-radius: 16px; }
#hop[data-loai="an"] .ds-an .muc:last-child { border-end-start-radius: 16px; border-end-end-radius: 16px; border-bottom: 0; }
#hop[data-loai="an"] .hang-nut { gap: 10px; margin-top: 14px; }
#hop[data-loai="an"] .hang-nut > .nut { flex: 1 1 9rem; }
#hop[data-loai="an"] .nut:not(.nut-tron) { min-height: 44px; height: auto; padding-block: 10px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#hop[data-loai="an"] form > .nut-do { margin-top: 16px; width: 100%; }
#hop[data-loai="an"] .trong { padding: 24px 12px; }
@media (hover: hover) {
  #hop[data-loai="an"] .nut:hover, #hop[data-loai="an"] .muc:hover { transform: none; }
}

/* New call details. Keep receiver identity and safety text readable above controls. */
.goi-anh > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.goi-nick { max-width: 100%; color: #d8eafb; font-size: .95rem; overflow-wrap: anywhere; }
.goi-im { max-width: 100%; padding: 6px 12px; border: 1px solid #ffffff45; border-radius: 12px; color: #e7f4ff; background: #ffffff14; font-size: .9rem; overflow-wrap: anywhere; }
.goi-canh { width: 100%; max-width: 34rem; padding: 12px 14px; border: 1px solid #f0c574; border-inline-start-width: 4px; border-radius: 14px; background: #fff1d6; color: #633b08; text-align: start; text-shadow: none; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.goi-canh p { margin: 0; }
.goi-canh p + p { margin-top: 6px; }
.goi-canh p:last-child { margin-top: 10px; padding-top: 10px; border-top: 1px solid #633b0833; font-weight: 650; }
.goi:not(.goi-nho):has(.goi-canh, .goi-im) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
.goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-dau {
  min-height: 0; width: 100%; max-width: 36rem; justify-self: center; align-self: stretch;
  overflow-y: auto; margin: 0; padding: 12px 8px 16px; scrollbar-gutter: stable; overscroll-behavior: contain;
}
.goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-dau > * { flex-shrink: 0; max-width: 100%; }
.goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-ten { overflow-wrap: anywhere; }
.goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-nut { width: 100%; max-width: 36rem; justify-self: center; gap: 12px; }
.goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-b { flex: 1 1 72px; min-width: 0; max-width: 140px; padding: 4px; }
.goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-b-chu { overflow-wrap: anywhere; line-height: 1.4; }
@media (max-height: 650px) {
  .goi:not(.goi-nho):has(.goi-canh, .goi-im) .goi-anh { width: 72px; height: 72px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lkm-qr, #hop[data-loai="an"] .nut { transition: none; }
}