/* ================= nhắn riêng (nhan_rieng_ui.ts): tab Thế giới | Riêng trong khung chat ================= */
#nr-tab { display: flex; gap: 4px; min-width: 0; }
#nr-tab button { position: relative; padding: 4px 10px; min-height: 28px; border-radius: 7px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .06);
  color: var(--chu-mo); font-size: 12px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; text-shadow: none; }
#nr-tab button.chon { color: var(--chu); background: rgba(79, 227, 255, .22); border-color: var(--vien); text-shadow: 0 0 6px rgba(79, 227, 255, .6); }
#nr-tab .cham { top: -7px; right: -8px; letter-spacing: 0; }
.nut-vuong .cham.nr-cham { right: auto; left: -5px; background: #ff5aa8; box-shadow: 0 0 6px #ff5aa8; }

/* tab Riêng: ẩn kênh thế giới, khung to hơn */
#chat.nr-mo #chat-log, #chat.nr-mo #chat-form { display: none; }
#chat.nr-mo { width: 340px; height: min(430px, calc(var(--cao, 100vh) - var(--nut-day, 62px) - 120px)); }
#nr { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* danh sách hội thoại */
.nr-tim { display: flex; gap: 5px; padding: 0 8px 6px; flex: 0 0 auto; }
.nr-tim input, .nr-form input { flex: 1; min-width: 0; padding: 7px 9px; font: inherit; font-size: 14px; border-radius: 7px; border: 1px solid var(--vien-mo);
  background: rgba(0, 10, 20, .6); color: var(--chu); outline: none; -webkit-user-select: text; user-select: text; }
.nr-tim input:focus, .nr-form input:focus { border-color: var(--vien); }
.nr-tim button, .nr-form button { flex: 0 0 auto; padding: 0 12px; min-height: 34px; border-radius: 7px; border: 1px solid var(--vien); background: rgba(79, 227, 255, .2); font-weight: 700; }
.nr-form button:disabled, .nr-form input:disabled { opacity: .45; }
.nr-goi-y { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 6px; flex: 0 0 auto; }
.nr-goi { padding: 4px 10px; min-height: 30px; border-radius: 99px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .1); font-size: 13px; }
.nr-ds { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 8px 8px; }
.nr-dong { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; min-height: 50px;
  margin-bottom: 5px; border-radius: 9px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .04); }
.nr-dong:active { background: rgba(79, 227, 255, .14); }
.nr-dong.moi { border-color: #ff8ac4; background: rgba(255, 90, 168, .08); }
.nr-dong.moi .nr-cuoi { color: var(--chu); font-weight: 600; }
.nr-dong.bi-chan { opacity: .6; }
.nr-anh { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px;
  background: rgba(79, 227, 255, .12); border: 1px solid var(--vien-mo); position: relative; }
.nr-anh.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--xanh);
  border: 2px solid #071828; box-shadow: 0 0 4px var(--xanh); }
.nr-giua { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nr-hang1, .nr-hang2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nr-hang1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9fe8ff; }
.nr-hang1 small { color: var(--chu-mo); font-size: 11px; flex: 0 0 auto; }
.nr-cuoi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chu-mo); font-size: 13px; }
.nr-so { flex: 0 0 auto; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: #ff5aa8; color: #fff; font-style: normal; font-weight: 700;
  font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px #ff5aa8; }
.nr-trong { color: var(--chu-mo); text-align: center; padding: 18px 10px; font-size: 13px; line-height: 1.5; }
.nr-trong b { color: var(--chu); }
.nr-chan-ds { margin-top: 6px; border-top: 1px dashed var(--vien-mo); padding-top: 4px; }
.nr-mo-chan { background: none; border: 0; color: var(--chu-mo); font-size: 12px; padding: 6px 2px; min-height: 30px; }
.nr-chan-dong { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 2px; font-size: 13px; }
.nr-chan-dong button { padding: 3px 10px; min-height: 30px; border-radius: 7px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .1); font-size: 12px; }

/* khung hội thoại */
.nr-dau { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; flex: 0 0 auto; border-bottom: 1px solid var(--vien-mo); }
.nr-lui { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .08); font-size: 22px; line-height: 1; padding: 0 0 3px; }
.nr-ai { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nr-ai b { color: #9fe8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 15px; }
.nr-ai span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-on { color: var(--xanh); } .nr-off { color: var(--chu-mo); }
.nr-nut-chan { flex: 0 0 auto; padding: 4px 10px; min-height: 32px; border-radius: 7px; border: 1px solid rgba(255, 106, 106, .5); background: rgba(255, 106, 106, .08);
  color: #ffb0b0; font-size: 12px; font-weight: 700; }
.nr-nut-chan.xac-nhan { background: rgba(255, 106, 106, .3); color: #fff; border-color: var(--do); }
.nr-tin { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 4px; }
.nr-bong { max-width: 80%; padding: 5px 10px 4px; border-radius: 14px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word;
  -webkit-user-select: text; user-select: text; }
.nr-bong time { display: block; font-size: 10px; color: var(--chu-mo); margin-top: 1px; text-align: right; }
.nr-bong.minh { align-self: flex-end; background: linear-gradient(rgba(79, 227, 255, .34), rgba(79, 227, 255, .2)); border: 1px solid var(--vien); border-bottom-right-radius: 4px; }
.nr-bong.ho { align-self: flex-start; background: rgba(226, 251, 255, .07); border: 1px solid var(--vien-mo); border-bottom-left-radius: 4px; }
.nr-bong.ho time { text-align: left; }
.nr-ngay { text-align: center; margin: 6px 0 2px; font-size: 11px; color: var(--chu-mo); }
.nr-ngay span { padding: 1px 10px; border-radius: 99px; background: rgba(79, 227, 255, .08); border: 1px solid var(--vien-mo); }
.nr-bi-chan { flex: 0 0 auto; margin: 0 8px; padding: 5px 8px; border-radius: 7px; font-size: 12px; color: #ffb0b0; background: rgba(255, 106, 106, .08); border: 1px dashed rgba(255, 106, 106, .5); text-align: center; }
.nr-form { display: flex; gap: 5px; padding: 6px 8px 8px; flex: 0 0 auto; }

/* thông báo nhỏ khi có tin riêng mới */
#nr-bao { position: fixed; z-index: 41; top: calc(var(--tren-cao, 96px) + 8px); left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 24px - var(--le) - var(--phai)));
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.nr-the-bao { pointer-events: auto; display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; min-height: 48px; border-radius: 10px;
  background: var(--nen-dam); border: 1px solid #ff8ac4; box-shadow: 0 0 12px rgba(255, 90, 168, .45); animation: nr-vao .25s ease-out; transition: opacity .4s, transform .4s; }
.nr-the-bao.ra { opacity: 0; transform: translateY(-8px); }
.nr-bao-icon { font-size: 20px; color: #ff8ac4; flex: 0 0 auto; }
.nr-bao-giua { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nr-bao-giua b { color: #ffc6f0; font-size: 13px; }
.nr-bao-giua span { color: var(--chu); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-bao-mo { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--vien); border: 1px solid var(--vien-mo); border-radius: 7px; padding: 4px 8px; }
@keyframes nr-vao { from { opacity: 0; transform: translateY(-10px); } }

/* cảm ứng: vùng bấm ≥ 44px, ô nhập 16px để iOS khỏi phóng to */
body.cam-ung #nr-tab button { min-height: 36px; padding: 4px 12px; }
body.cam-ung .nr-tim input, body.cam-ung .nr-form input { font-size: 16px; }
body.cam-ung .nr-tim button, body.cam-ung .nr-form button, body.cam-ung .nr-lui, body.cam-ung .nr-nut-chan, body.cam-ung .nr-goi,
body.cam-ung .nr-chan-dong button, body.cam-ung .nr-mo-chan { min-height: 44px; }
body.cam-ung .nr-lui { width: 44px; }
body.cam-ung .nr-tim input, body.cam-ung .nr-form input { min-height: 44px; }
/* đang gõ trên máy cảm ứng màn rộng: nổi lên trên bàn phím ảo nhưng cao hơn kênh thế giới */
html body.cam-ung #chat.nr-mo:focus-within { top: auto; bottom: calc(var(--ban-phim, 0px) + 6px); height: min(430px, calc(var(--vv-cao, var(--cao, 100vh)) - 12px)); }

/* điện thoại (dọc lẫn ngang): tab Riêng thành tấm phủ gần toàn màn như các bảng lớn — đọc và gõ cho thoải mái;
   bấm "Thế giới" hoặc × là trả lại màn chơi (khung chat nhỏ không đè vùng cần điều khiển) */
@media (max-width: 620px), (max-height: 500px) {
  html body #chat.nr-mo { position: fixed; z-index: 8; left: calc(6px + var(--le)); right: calc(6px + var(--phai)); top: calc(6px + var(--tren));
    bottom: calc(6px + var(--day)); width: auto; height: auto; background: var(--nen-dam); }
  html body.cam-ung #chat.nr-mo:focus-within { top: auto; bottom: calc(var(--ban-phim, 0px) + 6px); height: calc(var(--vv-cao, var(--cao, 100vh)) - 12px - var(--tren)); }
  #chat.nr-mo .tieu-de { min-height: 48px; }
  .nr-bong { max-width: 85%; font-size: 15px; }
  #nr-bao { top: calc(var(--tren-cao, 150px) + 6px); }
}
/* điện thoại ngang: tấm phủ rộng quá thì giới hạn bề ngang cho dễ đọc */
@media (max-height: 500px) and (min-width: 621px) {
  html body #chat.nr-mo { left: 50%; right: auto; width: min(560px, calc(100vw - 12px - var(--le) - var(--phai))); transform: translateX(-50%); }
  #nr-bao { top: calc(var(--dh-day, 60px) + 6px); }
}

/* ---------- khung chat: 4 tab kênh (Thế giới · Gần đây · Hải đội · Riêng) dùng chung nhật ký, lọc theo kênh ---------- */
#chat.kenh-gan #chat-log p:not(.gan), #chat.kenh-doi #chat-log p:not(.doi) { display: none; }
#chat-log p.doi { color: #ffe9b0; }
#chat-log .doi-nhan { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: rgba(190, 140, 40, .55); color: #fff6dc; }
#chat-trong { padding: 10px 12px; font-size: 12px; color: var(--chu-mo); }
#chat-trong[hidden] { display: none; }
#chat.nr-mo #chat-trong { display: none; }
#nr-tab { flex: 1 1 auto; flex-wrap: nowrap; gap: 3px; }
#nr-tab button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 3px !important; padding-right: 3px !important; font-size: 12px; letter-spacing: 0; }
@media (max-width: 420px) { #nr-tab button { padding: 4px 7px; font-size: 12px; } }