/* ReMind Team board — theme-aware (dùng biến của styles.css) */
#team-wrap { position: absolute; inset: 0; overflow: hidden; }
.team-root { display: flex; height: 100%; background: var(--bg); color: var(--text); }

/* Sidebar */
.team-side { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; }
.team-side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 600; font-size: 13px; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.team-proj-list { overflow-y: auto; padding: 6px; }
.team-proj { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.team-proj:hover { background: var(--panel-hover); }
.team-proj.active { background: var(--accent-soft); }
.team-proj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-proj-dept { font-size: 10px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); }
.team-proj-count { font-size: 11px; color: var(--text-muted); }
.team-proj-del { opacity: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 11px; }
.team-proj:hover .team-proj-del { opacity: 1; }
.team-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Main */
.team-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.team-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.team-scope { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.team-views { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.team-view-btn { border: none; background: none; padding: 5px 14px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text-soft); }
.team-view-btn.active { background: var(--accent); color: #fff; }
.team-quickadd { padding: 10px 18px; }
.team-quickadd input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: 14px; }
.team-quickadd input:focus { outline: none; border-color: var(--accent); }
.team-body { flex: 1; overflow: auto; padding: 0 18px 18px; }
.team-empty { padding: 40px; text-align: center; color: var(--text-muted); }

/* Table */
.team-table { display: table; width: 100%; border-collapse: collapse; }
.team-tr { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1.1fr 0.9fr 1.2fr 0.7fr 32px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.team-th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.team-cell-input, .team-cell-select { width: 100%; border: 1px solid transparent; background: none; color: var(--text); padding: 5px 7px; border-radius: 5px; font-size: 13px; }
.team-cell-input:hover, .team-cell-select:hover { border-color: var(--border); }
.team-cell-input:focus, .team-cell-select:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.team-cell-select { cursor: pointer; }
.team-pr { color: var(--accent); font-size: 12px; text-decoration: none; }
.team-row-del { opacity: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; }
.team-tr:hover .team-row-del { opacity: 1; }

/* Board */
.team-board { display: flex; gap: 12px; height: 100%; padding-top: 8px; align-items: flex-start; }
.team-col { flex: 1; min-width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 100%; }
.team-col-head { padding: 10px 12px; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); }
.team-col-count { color: var(--text-muted); font-weight: 400; margin-left: auto; }
.team-col-body { padding: 8px; overflow-y: auto; flex: 1; min-height: 60px; }
.team-col-body.drop-hover { background: var(--accent-soft); }
.team-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow-sm); }
.team-card.dragging { opacity: .5; }
.team-card-title { font-size: 13px; margin-bottom: 6px; }
.team-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.team-chip { font-size: 10px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); }
.team-chip.muted { color: var(--text-muted); }
.team-chip.link { text-decoration: none; color: var(--accent); border-color: var(--accent); }

/* Buttons / auth */
.team-icon-btn { border: none; background: none; color: var(--text-soft); cursor: pointer; font-size: 16px; line-height: 1; }
.team-btn { padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.team-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.team-auth { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--bg); }
.team-auth-card { width: 300px; padding: 28px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.team-auth-card h2 { margin: 0 0 6px; }
.team-auth-card p { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.team-auth-card input { width: 100%; padding: 9px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.team-auth-card .team-btn { width: 100%; }
.team-auth-err { color: #ef4444; font-size: 12px; margin-top: 8px; min-height: 14px; }

/* ===== Giang delegation UI (assignee dropdown, badges, detail modal) ===== */

/* Widen last column for the 2 action buttons (open + delete) */
.team-tr { grid-template-columns: 2fr 1.2fr 1fr 1.1fr 0.9fr 1.2fr 0.7fr 56px; }
.team-title-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-row-actions { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.team-row-open { opacity: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.team-tr:hover .team-row-open { opacity: 1; }

/* assignee dropdown: task giao Giang (unassigned/giang) tô nhạt để phân biệt việc đã gán người */
.team-assignee.is-intake { color: var(--text-muted); font-style: italic; }

/* Giang stage badge — màu nền lấy từ biến inline --badge-bg (mỗi stage 1 màu) */
.team-badge { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.4;
  padding: 1px 7px; border-radius: 8px; color: #fff; background: var(--badge-bg, var(--text-muted));
  cursor: default; white-space: nowrap; }
.team-title-cell .team-badge[data-open-task] { cursor: pointer; align-self: flex-start; }
.team-card-badge { margin-bottom: 6px; }

/* Detail modal */
.team-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex;
  align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.team-modal { width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.team-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.team-modal-title { flex: 1; font-size: 16px; font-weight: 600; border: 1px solid transparent; background: none;
  color: var(--text); padding: 6px 8px; border-radius: var(--radius-sm); }
.team-modal-title:hover { border-color: var(--border); }
.team-modal-title:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.team-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.team-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.team-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.team-field-row { display: flex; gap: 12px; }
.team-field .team-cell-input, .team-field .team-cell-select { border-color: var(--border); background: var(--bg); }
.team-modal-desc { border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }
.team-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

/* Giang panel inside modal */
.team-giang { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--bg); }
.team-giang.planned { border-color: #3b82f6; }
.team-giang.need_info { border-color: #f59e0b; }
.team-giang.spawned { border-color: #22c55e; }
.team-giang.error { border-color: #ef4444; }
.team-giang-head { margin-bottom: 8px; font-weight: 600; font-size: 12px; color: var(--text-soft); }
.team-giang-note { font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.team-giang-q { font-size: 13px; padding: 8px 10px; background: var(--panel); border-radius: var(--radius-sm);
  border: 1px solid var(--border); white-space: pre-wrap; }
.team-giang-q.err { color: #ef4444; }
.team-plan-list, .team-kid-list { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.team-kid-list { list-style: none; padding-left: 0; }
.team-plan-list li, .team-kid-list li { font-size: 13px; }
.team-kid-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.team-kid-list li:hover { background: var(--panel-hover, var(--panel)); }
.team-plan-title, .team-kid-title { font-weight: 600; margin-right: 6px; }
.team-plan-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.team-giang .team-btn.primary { margin-top: 6px; }

/* ===== Ops incident (Ngọc — cs_agent giám sát hệ thống) ===== */
/* Badge 🚨 Ops đỏ + tên component bị lỗi nằm cạnh (extra.component).
   Màu tác giả `ngoc` trong timeline đi qua --badge-bg như các agent khác. */
.team-badge-row { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; }
.team-ops-comp { font-size: 10px; font-family: ui-monospace, monospace; color: #e11d48;
  border: 1px solid #e11d48; border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.team-ops-filter.active { background: #e11d48; color: #fff; }

/* ===== Collab thread + QC loop (hybrid A+B) ===== */
.team-giang.qc { border-color: #f97316; }
.team-giang.qcpass { border-color: #22c55e; }
.team-giang.escalated { border-color: #ef4444; }

.team-thread { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--bg); }
.team-thread-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.team-thread-item { display: flex; gap: 8px; align-items: flex-start; }
.team-thread-who { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: #fff; background: var(--badge-bg, var(--text-muted));
  padding: 2px 7px; border-radius: 8px; min-width: 44px; text-align: center; }
.team-thread-body { flex: 1; min-width: 0; }
.team-thread-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.team-thread-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.team-thread-text { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ===== Feed tin nhắn team marketing (💬 Tin nhắn) =====
   Kiểu chat chuyên nghiệp: tách theo NGÀY (Hôm nay/Hôm qua/dd-mm), vạch đỏ
   "Tin mới" đánh dấu chỗ đọc dở từ lần trước, bong bóng agent bên trái (avatar
   màu theo người), tin founder (.mine) bên phải nền accent, tin dài tự thu gọn
   kèm nút Xem thêm. Founder trả lời ở composer dưới đáy. */
.team-feed { display: flex; flex-direction: column; height: 100%; padding-top: 8px; }
.team-feed-list { list-style: none; margin: 0; padding: 4px 6px; flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; }
.team-feed-list.in-modal { max-height: 280px; flex: none; margin-top: 8px; }

/* Ngăn ngày */
.team-feed-day { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px;
  color: var(--text-muted); font-size: 11px; font-weight: 600; }
.team-feed-day::before, .team-feed-day::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* Vạch "Tin mới" — mọi tin dưới vạch là tin chưa đọc từ lần mở trước */
.team-feed-newdiv { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px;
  color: #ef4444; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.team-feed-newdiv::before, .team-feed-newdiv::after { content: ''; flex: 1; border-top: 1px solid currentColor; opacity: .45; }

/* Bong bóng tin nhắn */
.team-msg { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; max-width: 82%;
  border: none; background: none; padding: 0; }
.team-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.team-msg-ava { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ava, var(--text-muted)); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px; user-select: none; }
.team-msg-bubble { min-width: 0; max-width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; border-top-left-radius: 4px; padding: 8px 12px 7px; box-shadow: var(--shadow-sm); }
.team-msg.mine .team-msg-bubble { background: var(--accent-soft); border-color: transparent;
  border-radius: 12px; border-top-right-radius: 4px; }
.team-msg.is-new .team-msg-bubble { border-color: var(--accent); }
.team-msg-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; margin-bottom: 3px; }
.team-msg-author { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.team-msg-to { font-size: 11px; color: var(--text-muted); }
.team-msg-topic { font-size: 10px; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 6px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-msg-newtag { font-size: 9px; font-weight: 700; color: #fff; background: #ef4444;
  border-radius: 7px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .04em; }
.team-msg-time { font-size: 10px; color: var(--text-muted); margin-left: auto; padding-left: 8px; }
.team-msg-text { font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.team-msg-text.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.team-msg-more { display: block; border: none; background: none; color: var(--accent);
  font-size: 11px; font-weight: 600; cursor: pointer; padding: 3px 0 0; }
.team-msg-more:hover { text-decoration: underline; }
.team-msg-foot { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.team-msg-reply { border: none; background: none; color: var(--accent); font-size: 11px;
  cursor: pointer; padding: 0; }
.team-msg-reply:hover { text-decoration: underline; }
.team-msg-task { cursor: pointer; background: none; }
.team-feed-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 2px 2px;
  border-top: 1px solid var(--border); margin-top: 8px; }
.team-feed-compose select { flex: 0 0 190px; border: 1px solid var(--border); background: var(--panel); }
.team-feed-compose textarea { flex: 1; resize: vertical; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel);
  color: var(--text); font-size: 13px; font-family: inherit; }
.team-feed-compose textarea:focus { outline: none; border-color: var(--accent); }
.team-unread { display: inline-block; margin-left: 5px; min-width: 16px; padding: 0 4px;
  border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  text-align: center; line-height: 16px; }
.team-view-btn.active .team-unread { background: #fff; color: var(--accent); }

/* =========================================================
   MOBILE — Team board dùng tốt trên điện thoại
   (map/tasks/notes đã responsive trong styles.css; team.css trước đây
    chưa có @media nào — sidebar 220px + kanban ngang + bảng 8 cột vỡ hết.)
   ========================================================= */
@media (max-width: 900px) {
  /* Xếp dọc: bỏ sidebar cạnh trái, biến project thành dải lọc ngang trên đầu */
  .team-root { flex-direction: column; }
  .team-side {
    width: auto; flex-shrink: 0;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .team-side-head { display: none; }   /* tạo project là việc trên desktop */
  .team-proj-list {
    display: flex; flex-direction: row; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; padding: 8px;
  }
  .team-proj {
    flex-shrink: 0; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
  }
  .team-proj.active { border-color: var(--accent); }
  .team-proj-del { display: none; }    /* xoá project: để desktop */

  /* Topbar: XẾP DỌC — scope 1 dòng, dãy nút view (Table/Board/💬 Tin nhắn/
     🚨 Ops) xuống dòng riêng full-width. Trước đây chỉ flex-wrap + giữ
     justify-between của bản desktop nên dãy nút bị đẩy tràn khỏi mép phải,
     founder không bấm tới được nút 💬 Tin nhắn (mục comment). */
  .team-topbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .team-views { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .team-view-btn { padding: 7px 10px; }   /* chạm dễ hơn */
  .team-quickadd { padding: 10px 12px; }
  .team-body { padding: 0 12px 14px; }

  /* Board: 4 cột ngang -> xếp dọc, mỗi cột full-width (đọc & kéo dễ) */
  .team-board { flex-direction: column; height: auto; gap: 10px; }
  .team-col { width: 100%; min-width: 0; max-height: none; }
  .team-col-body { min-height: 0; }
  .team-card { cursor: default; }        /* touch: mở bằng chạm đúp/modal */

  /* Bảng 8 cột: cho cuộn ngang trong khung, giữ tối thiểu để không bẹp */
  .team-table { min-width: 680px; }

  /* Feed 💬: ô soạn tin xuống dòng gọn trên màn hẹp; bong bóng rộng gần hết */
  .team-feed-compose { flex-wrap: wrap; }
  .team-feed-compose select { flex: 1 1 100%; }
  .team-feed-compose textarea { flex: 1 1 100%; }
  .team-feed-compose .team-btn { margin-left: auto; }
  .team-msg { max-width: 94%; }

  /* Modal chi tiết: full-bleed, các hàng field xếp dọc.
     QUAN TRỌNG: modal gần full màn hình nên gần như KHÔNG còn nền để chạm ra
     ngoài mà đóng. Vì vậy ghim (sticky) thanh đầu (có nút ✕) + thanh chân
     (Đóng/Lưu) để dù cuộn xuống đọc/trả lời tin nhắn cuối modal vẫn luôn bấm
     đóng được — trước đây header cuộn mất → "comment xong không tắt được". */
  .team-modal-overlay { padding: 8px; align-items: flex-start; }
  .team-modal { width: 100%; max-height: calc(100dvh - 16px); max-height: calc(100vh - 16px); }
  .team-modal-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }
  .team-modal-foot { position: sticky; bottom: 0; z-index: 2; background: var(--panel); }
  .team-modal-head [data-close] { min-width: 40px; min-height: 40px; font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center; }
  .team-field-row { flex-direction: column; gap: 12px; }
  .team-auth-card { width: 100%; max-width: 340px; }
}

@media (max-width: 520px) {
  .team-scope { font-size: 14px; }
  .team-view-btn { font-size: 12px; padding: 6px 9px; }
  .team-modal-body { padding: 12px; }
  .team-feed-list { gap: 10px; }
}

/* Touch: nút hover-only luôn hiện + vùng chạm lớn hơn */
@media (hover: none), (pointer: coarse) {
  .team-row-del, .team-proj-del { opacity: 1; }
  .team-cell-input, .team-cell-select { min-height: 34px; }
  .team-view-btn, .team-btn { min-height: 36px; }
}