html,
body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f5f5 !important;
  transform: none;
  transform-origin: top left;
  display: block !important;
  box-shadow: none !important;
}

.main-wrapper,
.app-body,
.main {
  min-width: 0;
  min-height: 0;
}

.main {
  flex: 1 1 0;
}

.chat-input {
  flex: 0 0 auto;
  align-items: center;
  min-height: 52px;
  box-sizing: border-box;
}

.chat-input-inner,
.chat-input-inner textarea {
  min-width: 0;
}

.chat-input .btn-add-circle {
  flex: 0 0 22px;
  align-self: center;
}

.app-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-setfn-theme="dark"] {
  --bg: #111827;
  --bg-2: #182231;
  --white: #202b3a;
  --border: #334155;
  --accent-light: #1e3157;
  --accent-mid: #27416f;
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --muted-light: #64748b;
}

html[data-setfn-theme="dark"] body,
html[data-setfn-theme="dark"] .app-container,
html[data-setfn-theme="dark"] .iconbar,
html[data-setfn-theme="dark"] .topbar,
html[data-setfn-theme="dark"] .sidebar,
html[data-setfn-theme="dark"] .main-wrapper,
html[data-setfn-theme="dark"] .main,
html[data-setfn-theme="dark"] .side-panel,
html[data-setfn-theme="dark"] .panel-head,
html[data-setfn-theme="dark"] .panel-body,
html[data-setfn-theme="dark"] .chat-input,
html[data-setfn-theme="dark"] .chat-input-inner,
html[data-setfn-theme="dark"] .file-list,
html[data-setfn-theme="dark"] .file-table {
  background-color: var(--bg) !important;
  color: var(--text);
}

html[data-setfn-theme="dark"] input,
html[data-setfn-theme="dark"] textarea,
html[data-setfn-theme="dark"] button {
  color: var(--text);
}

@media (max-width: 1000px) {
  .sidebar {
    display: none;
  }
}

@media (max-width: 900px) {
  .main {
    padding: 10px;
    gap: 8px;
  }

  .side-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-left: 0;
  }

  .panel-body {
    min-height: 0;
  }

  .col-modified,
  .col-author {
    display: none;
  }

  .col-name,
  .topbar-center,
  .search-wrap,
  .search-input,
  .mail-field,
  .mail-input {
    min-width: 0;
  }

  .topbar-logo {
    display: none;
  }

  .topbar {
    padding: 0 10px;
    gap: 8px;
  }

  .topbar-actions,
  .main-top-right {
    gap: 4px;
    flex-shrink: 0;
  }

  .main-top {
    gap: 6px;
  }

  .breadcrumb {
    min-width: 0;
    flex-wrap: wrap;
    font-size: 12px;
  }

  .demo-mail-modal {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .mail-modal-footer {
    gap: 8px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .iconbar,
  .topbar-logo {
    display: none;
  }

  .main {
    padding: 10px;
  }

  .search-wrap {
    min-width: 0;
  }
}

/* ── Chat messages, matched to the product chat (ChatContentMessage) ──
   Avatar, name and time share one row; the message runs underneath. */
html .panel-body .msg {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px 8px;
}
html .panel-body .msg-content { display: contents; }
html .panel-body .msg-av {
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
}
html .panel-body .msg-hdr { grid-column: 2; align-items: center; margin: 0; }
html .panel-body .msg-name { font-size: var(--demo-body-size); font-weight: 600; color: #374151; }
html .panel-body .msg-time { margin-left: auto; font-size: var(--demo-meta-size); color: var(--muted); }
html .panel-body .msg-bubble { grid-column: 1 / -1; font-size: var(--demo-body-size); line-height: 1.7; color: var(--text-2); word-break: keep-all; overflow-wrap: anywhere; }
html .panel-body .msg-badge { padding: 0 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 9px; font-weight: 600; }
html .typing-av { width: 24px; height: 24px; font-size: 12px; font-weight: 500; }

/* Mentions use the product's mention chip: yellow-50 / yellow-700, regular weight. */
html .mention,
html .mention-ai { padding: 0 4px; border-radius: 4px; background: #fefce8; color: #a16207; font-size: var(--demo-body-size); font-weight: 400; }

/* ── Dark theme: the surfaces the inline styles hard-code as light ── */
html[data-setfn-theme="dark"] {
  --bg: #161b22;
  --bg-2: #1c2330;
  --white: #1f2632;
  --border: #2d3644;
  --accent-light: #1e2c4a;
  --accent-mid: #263a5f;
  --text: #e5e7eb;
  --text-2: #c9d1dc;
  --muted: #8b95a5;
  --muted-light: #6b7585;
}
html[data-setfn-theme="dark"] body,
html[data-setfn-theme="dark"] .app-container,
html[data-setfn-theme="dark"] .iconbar,
html[data-setfn-theme="dark"] .topbar,
html[data-setfn-theme="dark"] .sidebar,
html[data-setfn-theme="dark"] .chat-input,
html[data-setfn-theme="dark"] .chat-subhead,
html[data-setfn-theme="dark"] .chat-visitors-box,
html[data-setfn-theme="dark"] .panel-head { background-color: #161b22 !important; border-color: var(--border) !important; }
html[data-setfn-theme="dark"] .main,
html[data-setfn-theme="dark"] .main-wrapper { background-color: #12161d !important; }
html[data-setfn-theme="dark"] .side-panel,
html[data-setfn-theme="dark"] .panel-body,
html[data-setfn-theme="dark"] .file-list,
html[data-setfn-theme="dark"] .file-table,
html[data-setfn-theme="dark"] .chat-input-inner { background-color: #1a2029 !important; border-color: var(--border) !important; }
html[data-setfn-theme="dark"] .panel-body .msg-name { color: #e5e7eb; }
html[data-setfn-theme="dark"] .panel-body .msg-time { color: #6b7585; }
html[data-setfn-theme="dark"] .msg-ai-box,
html[data-setfn-theme="dark"] .typing-body { background: #222a36 !important; border-color: var(--border) !important; color: var(--text-2) !important; }
html[data-setfn-theme="dark"] .mention,
html[data-setfn-theme="dark"] .mention-ai { background: rgb(133 77 14 / 30%); color: #fef9c3; }
html[data-setfn-theme="dark"] :is(.batch-folder-modal, .create-file-modal, .cleanup-modal, .demo-mail-modal) { background: #1f2632 !important; color: var(--text); box-shadow: 0 18px 48px rgb(0 0 0 / 45%); }
html[data-setfn-theme="dark"] :is(.batch-folder-head, .cleanup-nav, .cleanup-desc, .cleanup-option, .create-file-field, .batch-folder-input) { background-color: transparent !important; border-color: var(--border) !important; color: var(--text-2); }
html[data-setfn-theme="dark"] .batch-folder-overlay { background: rgb(0 0 0 / 35%); }
html[data-setfn-theme="dark"] .btn-tool { background: #1f2632 !important; border-color: #3a4556 !important; color: var(--text-2) !important; }
html[data-setfn-theme="dark"] .frow { background: #1a2029 !important; border-bottom-color: #252d39 !important; }
html[data-setfn-theme="dark"] .frow:hover,
html[data-setfn-theme="dark"] .frow.active-highlight { background: #1e2a3d !important; }
html[data-setfn-theme="dark"] .mail-modal-header,
html[data-setfn-theme="dark"] .mail-modal-footer { background: #1a2029 !important; border-color: var(--border) !important; }
html[data-setfn-theme="dark"] :is(.mail-field, .mail-input, .mail-textarea) { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-setfn-theme="dark"] .mail-save-btn { background: transparent !important; border-color: #3a4556 !important; color: var(--text-2) !important; }

/* Shared typography for both languages at the homepage's displayed size. */
html { --demo-body-size: 13px; --demo-meta-size: 11px; }
html :is(.tree-name, .tree-new, .sidebar-group-header, .breadcrumb, .btn-tool,
  .list-hdr, .frow-name-text, .col-modified, .col-author, .col-history) {
  font-size: var(--demo-body-size);
}
html .sidebar-group-header { letter-spacing: .02em; }
html .panel-body .msg-ai-box-title,
html :is(.chat-subhead, .chat-input-inner textarea, .chat-system-msg) {
  font-size: var(--demo-body-size);
}
html .panel-body .msg-ai-box { font-size: var(--demo-body-size); line-height: 1.65; }
html .panel-body .msg-ai-box [style*="font-size"] { font-size: var(--demo-body-size) !important; }

/* Avatar to name ratio of the product chat: a 20px avatar beside the name (UserColorIndicatorIcon sm). */
html .panel-body .msg { grid-template-columns: 20px minmax(0, 1fr); gap: 5px 6px; }
html .panel-body .msg-av,
html .typing-av { width: 20px; height: 20px; font-size: 11px; }
html .panel-body .msg-badge { padding: 1px 5px; border-radius: 6px; font-size: 10.5px; font-weight: 500; }
/* Member level tag beside the name (UserLevelTag, basic level). */
html .level-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 6px; background: #f3f4f6; color: #374151; font-size: 10.5px; font-weight: 400; line-height: 1.4; }

/* App switcher (AppSwitcher.vue): light icons, soft blue active state, divider. */
html .iconbar { gap: 8px; padding-inline: 8px; }
html .ibar-btn { width: 100%; height: 40px; border-radius: 8px; color: #656971; }
html .ibar-btn:hover { background: rgb(24 24 27 / 6%); color: #656971; }
html .ibar-btn.active { background: #e7eefb; color: #2f60cf; }
html .ibar-divider { flex-shrink: 0; width: 20px; height: 1px; margin: 2px 0; background: rgb(212 212 216 / 70%); }

/* File sidebar (MenuTitle, file-dashboard.scss). */
html .tree-new { background: rgb(59 130 246 / 85%) !important; font-weight: 500; }
html .tree-new:hover { background: #3b82f6 !important; }
html .sidebar-group-header { font-size: 11px; font-weight: 600; letter-spacing: 0; color: #9ca3af; }
html .tree-name { font-weight: 400; color: #111827; }
html .tree-item.sel { background: rgb(219 234 254 / 70%); }
html .tree-item.sel .tree-name { color: #3b82f6; font-weight: 400; }

/* File list: rounded-2xl card, author name and edit-history badge. */
html .file-table { border-radius: 16px; }
html .col-author { width: 104px; justify-content: flex-start; gap: 6px; }
html .author-name { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; }
html .col-history { width: 48px; }

html[data-setfn-theme="dark"] .level-tag { background: #374151; color: #d1d5db; }
html[data-setfn-theme="dark"] .ibar-btn { color: #a1a1aa; }
html[data-setfn-theme="dark"] .ibar-btn:hover { background: rgb(255 255 255 / 8%); }
html[data-setfn-theme="dark"] .ibar-btn.active { background: rgb(96 165 250 / 14%); color: #8ab4ff; }
html[data-setfn-theme="dark"] .ibar-divider { background: #3f3f46; }
html[data-setfn-theme="dark"] .tree-new { background: #3b82f6 !important; }
html[data-setfn-theme="dark"] .tree-name { color: #e5e7eb; }
html[data-setfn-theme="dark"] .tree-item.sel { background: rgb(30 58 138 / 25%); }
html[data-setfn-theme="dark"] .tree-item.sel .tree-name { color: #60a5fa; }
html[data-setfn-theme="dark"] .sidebar-group-header { color: #6b7280; }
html[data-setfn-theme="dark"] .history-pill { background: transparent; border-color: var(--border); color: var(--text-2); }
html .frow-name-text { font-weight: 400; color: var(--text); }
html .col-modified { width: 96px; color: var(--muted); }