:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --sidebar-bg: #f7f7f8;
  --fg: #1f2328;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bubble-user: #f0f1f3;
  --hover: #ececee;
  --accent: #2563eb;
  --accent-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #212121;
    --sidebar-bg: #171717;
    --fg: #ececec;
    --muted: #9b9b9b;
    --border: #2f2f2f;
    --bubble-user: #2f2f2f;
    --hover: #2a2a2a;
    --accent: #3b82f6;
    --accent-fg: #ffffff;
  }
}

:root[data-theme="dark"] {
  --bg: #212121;
  --sidebar-bg: #171717;
  --fg: #ececec;
  --muted: #9b9b9b;
  --border: #2f2f2f;
  --bubble-user: #2f2f2f;
  --hover: #2a2a2a;
  --accent: #3b82f6;
  --accent-fg: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Sidebar ---------- */

/* Sidebar LUON noi (position:fixed) o CA 2 trang thai thu gon/mo rong - ".main" tu dich
   margin-left theo dung do rong sidebar (xem media query desktop o phan ".main" ben duoi),
   giong Gemini: khung chat can giua lai theo khong gian con lai khi sidebar an/hien. */
.sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  transition: width 0.2s ease;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
}

.app[data-sidebar-collapsed="true"] .sidebar {
  width: 64px;
  padding: 14px 8px;
  box-shadow: none;
}

.app:not([data-sidebar-collapsed="true"]) .sidebar {
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 14px;
}

.app[data-sidebar-collapsed="true"] .sidebar-header {
  flex-direction: column;
  gap: 10px;
}

.app[data-sidebar-collapsed="true"] .brand-text {
  display: none;
}

.sidebar-collapse-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.app[data-sidebar-collapsed="true"] .sidebar-collapse-btn {
  margin-left: 0;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  overflow: hidden;
}

.brand-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.brand-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
}

.new-chat-btn:hover {
  background: var(--hover);
}

.new-chat-btn .icon {
  font-weight: 700;
}

.app[data-sidebar-collapsed="true"] .new-chat-btn {
  justify-content: center;
  padding: 10px;
}

.app[data-sidebar-collapsed="true"] .new-chat-label {
  display: none;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app[data-sidebar-collapsed="true"] .conversation-list {
  visibility: hidden;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item:hover {
  background: var(--hover);
}

.conversation-item.active {
  background: var(--bubble-user);
}

.conversation-item .conv-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item .conv-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

.conversation-item:hover .conv-delete {
  opacity: 1;
}

.conversation-item .conv-delete:hover {
  color: #dc2626;
}

.sidebar-footer {
  position: relative;
  padding: 10px 4px 2px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.quota-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 6px;
}

.quota-bar[hidden] {
  display: none;
}

.app[data-sidebar-collapsed="true"] .quota-bar {
  display: none;
}

.quota-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--hover);
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.quota-bar.warn .quota-bar-fill {
  background: #f59e0b;
}

.quota-bar.danger .quota-bar-fill {
  background: #dc2626;
}

.quota-bar-label {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  font-size: 13.5px;
}

.user-row:hover {
  background: var(--hover);
}

.app[data-sidebar-collapsed="true"] .user-row {
  flex-direction: column;
  gap: 8px;
  padding: 8px 2px;
}

.app[data-sidebar-collapsed="true"] .user-name {
  display: none;
}

.app[data-sidebar-collapsed="true"] .user-gear-btn {
  order: -1;
}

.user-gear-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-popup-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 4px;
  width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  z-index: 25;
}

.user-popup-menu:not([hidden]) {
  display: flex;
}

.user-popup-item {
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
}

.user-popup-item:not([hidden]) {
  display: block;
}

.user-popup-item:hover {
  background: var(--hover);
}

.header-theme-toggle {
  margin-left: auto;
}

/* ---------- Main ---------- */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: 268px;
  transition: margin-left 0.2s ease;
}

/* Desktop: ".main" phai DICH THEO dung do rong that su cua sidebar (rail 64px khi thu gon,
   268px khi mo rong) - giong Gemini, khung chat can giua lai theo khong gian con lai, khac
   thiet ke overlay cu (chi che, khong doi vi tri noi dung). Tren mobile KHONG ap dung dieu
   nay (xem @media max-width:820px ben duoi, luon margin-left:0 vi sidebar la overlay). */
@media (min-width: 821px) {
  .app[data-sidebar-collapsed="true"] .main {
    margin-left: 64px;
  }

  .app:not([data-sidebar-collapsed="true"]) .main {
    margin-left: 268px;
  }
}

.main-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.main-title {
  font-weight: 600;
  font-size: 14px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 12px;
}

.messages-inner,
.msg-row {
  max-width: 760px;
  margin: 0 auto;
}

.empty-state {
  max-width: 560px;
  margin: 8vh auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.empty-logo {
  height: 56px;
  width: auto;
  margin-bottom: 10px;
  opacity: 0.9;
}

.empty-state h1 {
  font-size: 22px;
  margin: 0;
}

.empty-state p {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 14px;
}

/* Khi hoi thoai con trong, khung nhap noi dung "nhay" vao day (giua man hinh, ngay duoi loi
   chao) giong Gemini - thay vi nam co dinh o day trang nhu binh thuong. width:100% de ep
   ".composer-wrap" ben trong choang het chieu rong cua empty-state (600px) thay vi co lai
   theo noi dung, vi ".empty-state" dung align-items:center (khong stretch con mac dinh). */
.empty-composer-slot {
  width: 100%;
}

.msg-row {
  display: flex;
  padding: 14px 0;
  gap: 12px;
}

.msg-row.user {
  justify-content: flex-end;
}

.msg-row.assistant {
  justify-content: flex-start;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.msg-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: calc(100% - 40px);
}

.msg-content {
  line-height: 1.6;
  font-size: 15px;
  word-wrap: break-word;
  min-width: 0;
}

.msg-row.user .msg-content {
  background: var(--bubble-user);
  padding: 10px 15px;
  border-radius: 18px;
  max-width: 70%;
  white-space: pre-wrap;
}

.msg-row.assistant .msg-content {
  max-width: 100%;
}

.msg-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  max-width: 70%;
}

.msg-time {
  font-size: 11px;
  color: var(--muted);
  padding: 0 4px;
}

/* Dong trang thai "AI dang lam gi" (thay cho con tro nhap nhay) - xem progress-status.js.
   Hieu ung: 3 cham nhay + anh sang chay ngang chu (de thay AI van dang xu ly, khong chi so giay doi). */
.progress-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 2px 0;
}

.ps-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
}

.ps-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: ps-bounce 1.2s ease-in-out infinite;
}

.ps-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.ps-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

.ps-text {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 38%, var(--fg) 50%, var(--muted) 62%, var(--muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ps-shimmer 2.2s linear infinite;
}

@keyframes ps-bounce {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  35% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

@keyframes ps-shimmer {
  from {
    background-position: 125% 0;
  }
  to {
    background-position: -125% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-dots i {
    animation: none;
    opacity: 0.8;
  }
  .ps-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--muted);
  }
}

.tool-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.tool-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bubble-user);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: none;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.tool-icon {
  font-size: 14px;
  line-height: 1;
}

.tool-card-title {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-spinner {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  flex: none;
}

.tool-card[data-state="running"] .tool-spinner {
  display: block;
  animation: tool-spin 0.7s linear infinite;
}

.tool-badge {
  font-size: 12px;
  font-weight: 700;
  flex: none;
  display: none;
}

.tool-card[data-state="done"] .tool-badge {
  display: inline;
  color: #16a34a;
}

.tool-card[data-state="error"] .tool-badge {
  display: inline;
  color: #dc2626;
}

.tool-card[data-state="error"] {
  border-color: #dc2626;
}

.tool-duration {
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

.tool-card-detail {
  padding: 0 10px 8px 32px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
  white-space: pre-wrap;
}

@keyframes tool-spin {
  to {
    transform: rotate(360deg);
  }
}

.msg-content a[href^="/api/files/"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bubble-user);
  color: var(--fg);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}

.msg-content a[href^="/api/files/"]:hover {
  background: var(--hover);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.msg-content p {
  margin: 0 0 10px;
}

.msg-content p:last-child {
  margin-bottom: 0;
}

.msg-content pre {
  background: #0d1117;
  color: #c9d1d9;
  padding: 12px 14px;
  border-radius: 10px;
  overflow-x: auto;
  position: relative;
  margin: 10px 0;
}

.msg-content code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}

.msg-content p code {
  background: var(--bubble-user);
  padding: 1px 5px;
  border-radius: 4px;
}

.code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #e6e6e6;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------- Phan hoi 👍/👎 tren cau tra loi AI ---------- */

.msg-feedback {
  margin-top: 4px;
}

.feedback-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  margin-right: 6px;
}

.feedback-btn:hover {
  background: var(--hover);
}

.feedback-reason {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
}

.feedback-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.feedback-status {
  font-size: 12.5px;
  color: var(--muted);
}

.feedback-status.error {
  color: #dc2626;
}

/* ---------- Composer ---------- */

.composer-wrap {
  padding: 6px 20px 16px;
}

.composer {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px;
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.attach-btn {
  flex-shrink: 0;
}

.composer textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  padding: 6px 0;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  color: var(--fg);
  max-height: 200px;
}

.send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
}

.attachment-chip {
  max-width: 760px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bubble-user);
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--fg);
}

/* "display: flex" o tren de nham lan voi thuoc tinh HTML "hidden" (ca 2 cung do specificity
   0-1-0, class dinh nghia SAU nen thang) - phai ep lai o day de khi hidden thi AN THAT, khong
   con hien ra 1 thanh trong co vien/nen du khong co noi dung. */
.attachment-chip[hidden] {
  display: none;
}

.attachment-remove {
  flex: none;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
}

.attachment-remove:hover {
  color: #dc2626;
  background: var(--hover);
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-icon:hover {
  background: var(--hover);
}

/* Nut hamburger o main-header - CHI dung tren dien thoai. Tren desktop van dung nut thu gon/mo
   rong nam trong chinh sidebar (sidebar-collapse-btn) nhu cu. */
.mobile-menu-btn {
  display: none;
}

.composer-disclaimer {
  display: none;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 8px 20px 0;
}

.error-banner {
  color: #dc2626;
  font-size: 13px;
}

/* ---------- Bam ra ngoai (khi sidebar dang mo rong) de dong lai ----------
   CHI kich hoat o man hinh hep (< 820px) - o man hinh rong, sidebar mo la trang thai
   THUONG XUYEN (giong Gemini/ChatGPT desktop), khong duoc chan click vao khung chat ben duoi. */

.sidebar-backdrop {
  display: none;
}

@media (max-width: 820px) {
  .app:not([data-sidebar-collapsed="true"]) .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 25;
  }
}

/* ---------- Responsive (mobile) ---------- */

@media (max-width: 820px) {
  .msg-row.user .msg-content {
    max-width: 85%;
  }

  /* Sidebar tren dien thoai la 1 drawer PHU HOAN TOAN len tren khi mo, AN SACH (width:0) khi
     dong - khac desktop (dong = rail 64px chi icon). Vi vay ".main" khong con giu cho 64px nua,
     va phai them 1 nut hamburger rieng o main-header (nut thu gon goc nam trong sidebar se bi an
     mat theo sidebar, khong bam duoc). */
  .mobile-menu-btn {
    display: flex;
  }

  .app[data-sidebar-collapsed="true"] .sidebar {
    width: 0;
    padding: 0;
    overflow: hidden;
    border-right: none;
  }

  .app:not([data-sidebar-collapsed="true"]) .sidebar {
    width: 86vw;
    max-width: 300px;
  }

  .main {
    margin-left: 0;
  }

  /* Header: hamburger trai - tieu de giua - nut tron phai (bo cuc kieu Gemini mobile) */
  .main-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .main-title {
    flex: 1;
    text-align: center;
    margin-right: 0;
  }

  /* Man hinh chao mung to, ro, can giua nhu Gemini */
  .empty-state {
    margin-top: 10vh;
    gap: 8px;
    padding: 0 12px;
  }

  .empty-logo {
    height: 60px;
    margin-bottom: 6px;
  }

  .empty-state h1 {
    font-size: 25px;
    line-height: 1.3;
  }

  .empty-state p {
    font-size: 14px;
  }

  /* Composer dang pill phang, khong vien, bo tron lon - giong khung nhap cua Gemini */
  .composer-wrap {
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .composer {
    border: none;
    border-radius: 28px;
    padding: 6px 6px 6px 18px;
    background: var(--bubble-user);
    box-shadow: none;
  }

  .composer textarea {
    /* >=16px de Safari/Chrome tren iOS khong tu dong zoom trang khi focus vao o nhap */
    font-size: 16px;
  }

  .attach-btn,
  .send-btn {
    width: 38px;
    height: 38px;
  }

  .composer-hint {
    display: none;
  }

  .composer-disclaimer {
    display: block;
  }
}

/* ---------- Auth pages ---------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  color: var(--fg);
}

.auth-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--sidebar-bg);
}

.auth-logo {
  height: 40px;
  width: auto;
  margin: 0 auto 4px;
}

.auth-card h1 {
  font-size: 20px;
  margin: 0;
  text-align: center;
}

.auth-sub {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin: 0 0 8px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.auth-field input,
.auth-field select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}

.auth-error {
  color: #dc2626;
  font-size: 13px;
}

.auth-submit {
  padding: 11px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---------- Header user menu ---------- */

.user-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}

.user-badge {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.header-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.header-link:hover {
  text-decoration: underline;
}

.main-header {
  justify-content: flex-start;
}

.main-header .main-title {
  margin-right: 8px;
}

/* ---------- Admin / Team dashboard ---------- */

.admin-body {
  background: var(--bg);
  color: var(--fg);
}

.admin-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.admin-topbar h1 {
  font-size: 18px;
  margin: 0;
}

.admin-section {
  margin-bottom: 32px;
}

.admin-section h2 {
  font-size: 15px;
  margin: 0 0 12px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.admin-tab {
  padding: 9px 14px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.admin-tab:hover {
  color: var(--fg);
}

.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.admin-tab[hidden] {
  display: none;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.admin-toolbar select,
.admin-toolbar input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
}

.btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}

.btn:hover:not(:disabled) {
  background: var(--hover);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* .btn:hover (o tren) doi nen thanh --hover (gan trang) nhung chu .btn-primary van trang -> chu "mat" khi re chuot.
   Giu nen xanh, chi lam dam hon mot chut. */
.btn-primary:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-fg);
  filter: brightness(0.9);
}

.btn-danger {
  color: #dc2626;
  border-color: #dc2626;
}

/* Cho phep bang tu rong ra dung do rong noi dung (khong bi ep xuong 100% container) khi can -
   thay vi bop moi cot deu nhau lam header/so lieu ngan bi xuong dong xau. Chi cuon ngang trong
   khung nay khi that su khong du cho, khong lam vo layout ca trang. */
.table-scroll {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

/* 3 cot dau (Ho ten/Email/Chuc vu-Don vi hoac Ngay/So tin nhan/Token) co the co noi dung dai
   (nhieu badge chuc vu, ten/email dai...) - cho phep xuong dong binh thuong, khac cac cot
   ngan con lai (so lieu, trang thai, nut hanh dong) LUON o tren 1 dong duy nhat. */
.admin-table td:nth-child(1),
.admin-table td:nth-child(2),
.admin-table td:nth-child(3) {
  white-space: normal;
}

.admin-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
}

/* Cot "Trang thai" trong Kho tri thuc co the co canh bao trung/thay the rat dai - ep xuong dong
   trong 1 do rong CO DINH thay vi ke thua white-space:nowrap mac dinh cua .admin-table td (se
   lam ca bang gian ra qua kho khi canh bao dai). */
.doc-status-cell {
  white-space: normal !important;
  max-width: 340px;
}

.doc-warning {
  word-wrap: break-word;
}

.doc-warning-expandable {
  cursor: pointer;
  text-decoration: underline dotted;
}

.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid var(--border);
  margin: 1px 3px 1px 0;
  white-space: nowrap;
}

.role-badge.admin {
  color: #b45309;
  border-color: #b45309;
}

.role-badge.manager {
  color: #2563eb;
  border-color: #2563eb;
}

.role-badge.member {
  color: var(--muted);
}

.status-pill {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.status-pill.inactive {
  color: #dc2626;
  border-color: #dc2626;
}

.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.admin-modal {
  width: 100%;
  max-width: 380px;
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-modal h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.admin-modal.wide {
  max-width: 460px;
}

.memory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.memory-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bubble-user);
}

.memory-content {
  flex: 1;
  font-size: 13px;
  color: var(--fg);
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.suggestion-chip {
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bubble-user);
  color: var(--fg);
  cursor: pointer;
  max-width: 100%;
}

.suggestion-chip:hover {
  border-color: var(--muted);
}

.memory-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  vertical-align: 1px;
}

.memory-delete {
  flex: none;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
}

.memory-delete:hover {
  color: #dc2626;
  background: var(--hover);
}

.admin-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 12px 0;
}

.admin-flash {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bubble-user);
  margin-bottom: 12px;
}

.admin-flash.error {
  color: #dc2626;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12.5px;
  padding: 0;
  margin-right: 8px;
}

.link-btn.danger {
  color: #dc2626;
}

/* Menu hanh dong dang dropdown (nut "⋮") cho tung dong bang - thay cho danh sach link
   phang xep chong nhau, trong "pro" hon va do doc hon khi nhieu hanh dong. */
.row-actions-trigger {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 9px;
}

.row-actions-trigger:hover {
  background: var(--hover);
}

/* position:fixed (khong phai absolute) + toa do dat qua JS luc mo (xem buildRowActionsMenu
   trong admin.js) - BAT BUOC de menu "thoat" duoc phan bi cat cua ".table-scroll" (overflow-x:
   auto tren 1 truc tu dong keo theo truc con lai cung bi clip, se cat mat menu neu dung
   position:absolute nam trong do). */
.row-actions-menu {
  position: fixed;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}

.row-actions-menu[hidden] {
  display: none;
}

.row-actions-item {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
}

.row-actions-item:hover {
  background: var(--hover);
}

.row-actions-item.danger {
  color: #dc2626;
}

.row-actions-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

.stat-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 150px;
  background: var(--sidebar-bg);
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.stat-card .stat-value {
  font-size: 18px;
  font-weight: 700;
}

.stat-card .stat-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Anh trong cau tra loi (anh AI tao...): thu nho vua khung chat, bam de phong to (xem openImageLightbox trong app.js) */
.msg-content img {
  display: block;
  max-width: min(100%, 420px);
  max-height: 460px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: zoom-in;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  cursor: zoom-out;
}

.img-lightbox img {
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
}

/* Bam vao anh lan nua: xem kich thuoc that, cuon de xem phan con lai */
.img-lightbox.actual {
  align-items: flex-start;
  justify-content: flex-start;
}

.img-lightbox.actual img {
  max-width: none;
  max-height: none;
  margin: auto;
  cursor: zoom-out;
}

.img-lightbox-bar {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 1001;
}

.img-lightbox-bar a,
.img-lightbox-bar button {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.img-lightbox-bar a:hover,
.img-lightbox-bar button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Thanh bao co ban cap nhat moi (xem checkAppBuild trong app.js) */
.update-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 14px;
}

.update-banner button {
  background: var(--accent-fg);
  color: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 4px 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Chip file dinh kem tren tin nhan nguoi dung (giu lai trong khung chat sau khi gui va sau khi tai lai trang) */
.msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.3;
}

.msg-attachment .att-icon {
  display: inline-flex;
}

.msg-attachment .att-icon svg {
  width: 22px;
  height: 28px;
}

.msg-attachment .att-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.msg-attachment .att-size {
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Thu vien (file do AI tao) ---------- */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 12px 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg, inherit);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.nav-btn:hover,
.nav-btn.active {
  background: var(--bubble-user);
}

.library-view {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 28px;
}

.library-view[hidden] {
  display: none;
}

.library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.library-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.library-head p {
  margin: 0;
  max-width: 560px;
  font-size: 13px;
  color: var(--muted);
}

.library-search {
  min-width: 220px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: inherit;
  font-size: 14px;
}

.library-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.library-tab {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.library-tab.active,
.library-tab:hover {
  background: var(--bubble-user);
}

.library-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.lib-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}

.lib-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: var(--bubble-user);
  cursor: pointer;
  overflow: hidden;
}

.lib-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lib-thumb .lib-icon svg {
  width: 76px;
  height: 95px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.lib-thumb.unavailable {
  cursor: default;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 8px;
}

.lib-info {
  padding: 8px 10px 2px;
  min-width: 0;
}

.lib-name {
  font-size: 13px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.lib-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.lib-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  margin-top: auto;
}

.lib-btn {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.lib-btn:hover {
  background: var(--bubble-user);
}

.lib-btn.lib-del {
  flex: 0 0 auto;
}

.library-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.library-more {
  display: flex;
  justify-content: center;
  padding: 18px 0 0;
}

/* The file AI tao trong cau tra loi (thay cho link "📄 Tai xuong: ...") */
.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 8px 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
}

.file-card:hover {
  background: var(--bubble-user);
}

.file-card .fc-badge svg {
  width: 32px;
  height: 40px;
  display: block;
}

.file-card .fc-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card .fc-action {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}