*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{background:#f0f2f7;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#1a1a2e;display:flex;flex-direction:column;height:100%;overflow:hidden}

/* ── Messenger wrap ── */
.chat-page{max-width:1600px;margin:0 auto;width:100%;padding:14px 12px 0;flex:1;min-height:0;display:flex;flex-direction:column}
.messenger-wrap{display:flex;flex:1;min-height:0;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06)}

/* ── Left panel (30%) ── */
.conv-left{width:30%;min-width:220px;border-right:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;background:#fff;overflow:hidden}
.conv-left-hd{height:57px;padding:0 14px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0;display:flex;align-items:center;gap:10px;box-sizing:border-box}
.conv-left-hd-back{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.08);background:none;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:all .15s}
.conv-left-hd-back:hover{background:rgba(0,0,0,.04);color:#1a1a2e}
.conv-left-hd h3{font-size:13px;font-weight:700;color:#1a1a2e;flex:1}
.conv-search{padding:8px 10px;flex-shrink:0;position:relative;border-bottom:1px solid rgba(0,0,0,.04)}
.conv-search input{width:100%;height:32px;padding:0 10px 0 28px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:#f5f6fa;font-size:16px;outline:none;color:#1a1a2e;transition:border-color .15s}
.conv-search input:focus{border-color:rgba(245,158,11,.4);background:#fff}
.conv-search i{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:11px;color:#9ca3af;pointer-events:none}
.conv-list{flex:1;overflow-y:auto;overflow-x:hidden}
.conv-list::-webkit-scrollbar{width:3px}
.conv-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
.conv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.04);transition:background .12s}
.conv-item:hover{background:rgba(0,0,0,.025)}
.conv-item.active{background:rgba(245,158,11,.08);border-left:3px solid #f59e0b}
.conv-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#f59e0b,#f97316);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;font-weight:700}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:13px;font-weight:600;color:#1a1a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-sub{font-size:11px;color:#9ca3af;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.conv-time{font-size:10px;color:#9ca3af;white-space:nowrap}
.conv-unread{min-width:20px;height:20px;border-radius:99px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1;flex-shrink:0}

/* ── Right panel (70%) ── */
.chat-right{flex:1;display:flex;flex-direction:column;background:#f8f9fa;min-width:0;overflow:hidden}
.chat-panel-hd{height:57px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.08);background:#fff;display:flex;align-items:center;gap:12px;flex-shrink:0;box-sizing:border-box}
.chat-panel-hd-info{flex:1;min-width:0}
.chat-panel-hd-name{font-size:14px;font-weight:700;color:#1a1a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-panel-hd-sub{font-size:11px;color:#9ca3af;margin-top:2px}
.order-status-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;flex-shrink:0}

/* ── Messages ─────────────────────────────────────────────────────── */
/* Admin  = trái (tin nhắn đến) · User = phải (tin nhắn của mình)     */
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.chat-msgs::-webkit-scrollbar{width:4px}
.chat-msgs::-webkit-scrollbar-track{background:transparent}
.chat-msgs::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}
.msg-wrap{display:flex;flex-direction:column;gap:3px}
.msg-wrap.admin{align-items:flex-start}
.msg-wrap.user {align-items:flex-end}
.msg-bubble{padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;max-width:72%;word-wrap:break-word;white-space:pre-wrap}
.msg-wrap.admin .msg-bubble{background:#fff;color:#1a1a2e;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.msg-wrap.user  .msg-bubble{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;border-bottom-right-radius:4px}
.msg-bubble img{max-width:100%;max-height:280px;border-radius:8px;display:block;cursor:pointer;margin-top:4px}
.msg-meta{font-size:10px;color:#9ca3af;padding:0 4px}
.msg-sender{font-size:10px;font-weight:600;margin-bottom:2px;padding:0 4px}
.msg-sender.admin-lbl{color:#d97706}
.msg-sender.user-lbl{color:#6b7280}

/* ── Input bar ── */
.chat-input-bar{padding:12px 14px;border-top:1px solid rgba(0,0,0,.06);background:#fff;flex-shrink:0}
.chat-input-row{display:flex;align-items:flex-end;gap:8px}
/* font-size:16px ngăn iOS auto-zoom khi focus textarea */
.chat-input-box{flex:1;min-height:44px;max-height:120px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.1);background:#f5f6fa;font-size:16px;font-family:inherit;outline:none;resize:none;line-height:1.4;transition:border-color .15s;overflow-y:auto}
.chat-input-box:focus{border-color:rgba(245,158,11,.4);background:#fff}
.chat-input-box::placeholder{color:#aaa}
.chat-btns{display:flex;gap:6px;flex-shrink:0}
.chat-btn{width:44px;height:44px;border-radius:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s;flex-shrink:0}
.chat-btn.img-btn{background:#f3f4f6;color:#6b7280}
.chat-btn.img-btn:hover{background:#e5e7eb;color:#374151}
.chat-btn.send-btn{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 3px 10px rgba(245,158,11,.25)}
.chat-btn.send-btn:hover{opacity:.88}
.chat-btn.send-btn:disabled{opacity:.4;cursor:not-allowed}
.chat-hints{font-size:11px;color:#9ca3af;margin-top:6px;line-height:1.5}
.lock-notice{background:#fef3c7;border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:12px 14px;font-size:12px;color:#92400e;display:flex;align-items:center;gap:8px;margin-bottom:8px}

/* ── Upload preview ── */
.upload-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f9fafb;border-top:1px solid rgba(0,0,0,.06);flex-wrap:wrap}
.upload-preview-item{position:relative;display:inline-flex}
.upload-preview-item img{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
.upload-preview-rm{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px}

/* ── Empty / loading states ── */
.panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#9ca3af;gap:12px;font-size:13px;text-align:center;padding:24px}
.panel-empty i{font-size:36px;color:#d1d5db}
.spin-sm{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,.1);border-top-color:#f59e0b;border-radius:50%;animation:sp .6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Lightbox ── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:none;align-items:center;justify-content:center;cursor:pointer}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain}

/* Ẩn site header + game nav trên trang chat — mobile */
@media(max-width:680px){
  #mtg-header, #mobileGameNav, .mobile-bottom-bar { display: none !important; }
}
/* Ẩn game nav trên desktop cũng */
#mobileGameNav { display: none !important; }

/* Nút back trong chat header — ẩn trên desktop, hiện trên mobile */
.chat-back-btn { display: none; }

/* ── Mobile: full-screen messenger ── */
@media(max-width:680px){
  .chat-back-btn { display: flex; }

  /* Xoá padding của chat-page, dùng toàn bộ viewport */
  .chat-page { padding: 0; flex: 1; }

  /* messenger-wrap lấp đầy flex từ body → chat-page → ở đây, không cần height cứng */
  .messenger-wrap {
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: hidden;
  }

  /* Screen 1: danh sách đơn — chiếm toàn bộ */
  .conv-left {
    width: 100%;
    border-right: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
  }
  .conv-left.hidden { display: none; }

  /* Screen 2: cửa sổ chat — chiếm toàn bộ, dùng flex column */
  .chat-right {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #f8f9fa;
    flex-direction: column;
  }
  .chat-right.visible { display: flex; }

  /* Header chat cố định trên cùng — đã flex-shrink:0 */
  .chat-panel-hd { position: sticky; top: 0; z-index: 10; }

  /* Input bar cố định dưới cùng — đã flex-shrink:0 */
  .chat-input-bar {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Vùng tin nhắn cuộn giữa header và input */
  .chat-msgs { flex: 1; overflow-y: auto; }

  /* Hints ẩn đi trên mobile để tiết kiệm chỗ */
  .chat-hints { display: none; }
}