:root {
  --bg: #f8fafd;
  --card: rgba(255, 255, 255, 0.82);
  --card-solid: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: rgba(31, 41, 55, 0.10);
  --blue: #4285f4;
  --red: #ea4335;
  --yellow: #fbbc04;
  --green: #34a853;
  --violet: #7c3aed;
  --shadow: 0 24px 70px rgba(31, 41, 55, 0.12);
  --radius: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(66, 133, 244, .18), transparent 32%),
    radial-gradient(circle at 88% 14%, rgba(251, 188, 4, .20), transparent 28%),
    radial-gradient(circle at 72% 88%, rgba(52, 168, 83, .14), transparent 30%),
    linear-gradient(135deg, #fbfdff 0%, #f3f6fb 100%);
}

button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

.admin-only { display: none !important; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.login-card {
  width: min(460px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 32px;
  padding: 36px;
  backdrop-filter: blur(22px);
}

.install-card { width: min(760px, 100%); }

.brand-mark {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  display: inline-block;
}

.blue { background: var(--blue); }
.red { background: var(--red); }
.yellow { background: var(--yellow); }
.green { background: var(--green); }

h1, h2, p { margin-top: 0; }

.login-card h1,
.panel-header h1 {
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.subtle {
  color: var(--muted);
  line-height: 1.7;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

label span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--muted);
}

.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.check-line input[type="checkbox"] {
  width: auto;
  min-width: 18px;
  height: 18px;
  padding: 0;
}

.check-line span {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.field-tip {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.compact-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(248, 250, 252, .72);
}

.compact-details summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 800;
  list-style-position: inside;
}

.compact-details label {
  margin-top: 10px;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  border-radius: 16px;
  padding: 13px 15px;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

textarea { resize: vertical; }

input:focus, textarea:focus, select:focus {
  border-color: rgba(66, 133, 244, .55);
  box-shadow: 0 0 0 4px rgba(66, 133, 244, .12);
  background: #fff;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.send-btn,
.quick-actions button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  transition: transform .18s, box-shadow .18s, background .18s, opacity .18s;
}

.primary-btn,
.send-btn {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 12px 30px rgba(66, 133, 244, .28);
}

.secondary-btn {
  color: #1f3b77;
  background: rgba(66, 133, 244, .10);
}

.ghost-btn,
.quick-actions button {
  color: #374151;
  background: rgba(31, 41, 55, .06);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.send-btn:hover,
.quick-actions button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none !important;
}

.link-btn {
  display: inline-flex;
  text-decoration: none;
  justify-content: center;
}

.form-msg {
  min-height: 20px;
  margin: 0;
  color: #dc2626;
  font-size: 13px;
}

.form-msg.ok { color: #15803d; }

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button-row button {
  flex: 1 1 130px;
}

.download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  color: #1f3b77;
  background: rgba(66, 133, 244, .12);
}

.download-link:hover {
  background: rgba(66, 133, 244, .18);
}

.hint-box,
.notice {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  color: #4b5563;
  background: rgba(66, 133, 244, .08);
  line-height: 1.7;
}

.notice.success {
  color: #166534;
  background: rgba(52, 168, 83, .12);
}

.notice.error {
  color: #991b1b;
  background: rgba(234, 67, 53, .12);
}

.row.two-cols,
.card-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  padding: 18px;
  gap: 18px;
}

.sidebar {
  background: rgba(255, 255, 255, .74);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(31, 41, 55, .10);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 6px 22px;
}

.spark {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: white;
  background: conic-gradient(from 120deg, var(--blue), var(--red), var(--yellow), var(--green), var(--blue));
  box-shadow: 0 10px 26px rgba(66, 133, 244, .24);
}

.side-brand strong { display: block; }
.side-brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.nav-item {
  border: 0;
  border-radius: 18px;
  padding: 13px 14px;
  text-align: left;
  background: transparent;
  color: #4b5563;
  font-weight: 700;
}

.nav-item.active {
  color: #173b7a;
  background: linear-gradient(135deg, rgba(66, 133, 244, .16), rgba(124, 58, 237, .12));
}

.side-footer {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid;
  gap: 12px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.user-chip b,
.user-chip small { display: block; }
.user-chip small { color: var(--muted); margin-top: 2px; }

.workspace {
  min-width: 0;
  overflow: hidden;
}

.panel {
  height: 100%;
  display: none;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  padding-right: 4px;
}

.panel.active { display: flex; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 8px 0;
}

.panel-header.compact { align-items: center; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .12em;
}

.scope-select {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scope-select label {
  color: var(--muted);
  font-size: 12px;
}

.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 8px;
}

.chat-messages {
  flex: 1;
  min-height: 360px;
  overflow: auto;
  border-radius: 30px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36);
  padding: 24px;
}

.message {
  display: flex;
  margin-bottom: 14px;
}

.message.user { justify-content: flex-end; }

.bubble {
  max-width: min(760px, 86%);
  padding: 15px 17px;
  border-radius: 22px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 8px 24px rgba(31, 41, 55, .08);
}

.message.user .bubble {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #6d5dfc);
  border-bottom-right-radius: 7px;
}

.message.assistant .bubble {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 7px;
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.composer textarea {
  border: 0;
  background: transparent;
  min-height: 58px;
  max-height: 180px;
  box-shadow: none !important;
}

.send-btn { align-self: end; padding: 14px 24px; }

.config-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(31, 41, 55, .08);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(18px);
}

.config-card h2 {
  margin-bottom: 14px;
  letter-spacing: -.02em;
}

.table-card { margin-bottom: 28px; }

.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.table-head h2 { margin: 0; }

.pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(52, 168, 83, .12);
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

.records-list,
.user-admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 14px;
  align-items: stretch;
}

.user-overview-card {
  min-height: 100%;
}

.user-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.user-overview-grid > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(248, 250, 252, .72);
}

.user-overview-grid b,
.user-overview-grid span {
  display: block;
}

.user-overview-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.user-table-head {
  gap: 12px;
}

.user-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-tools input,
.user-tools select {
  min-height: 38px;
  width: auto;
}

.user-search-input {
  min-width: 220px;
}

.users-list {
  display: grid;
  gap: 10px;
}

.records-list.empty,
.empty {
  color: var(--muted);
  padding: 22px;
  text-align: center;
  background: rgba(31, 41, 55, .04);
  border-radius: 18px;
}

.record-item,
.user-row {
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
}

.record-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(31, 41, 55, .05);
}

.record-content {
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.record-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.record-keywords span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef4ff;
  color: #174ea6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.user-row {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.user-card-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.user-row b,
.user-row span { display: block; }
.user-row span { color: var(--muted); margin-top: 4px; }
.row-actions { display: flex; gap: 8px; }

.user-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.role-badge,
.status-badge,
.user-permission-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(248, 250, 252, .9);
  color: var(--muted);
}

.role-admin {
  color: #174ea6;
  background: rgba(219, 234, 254, .78);
}

.status-active {
  color: #16794c;
  background: rgba(220, 252, 231, .78);
}

.status-disabled {
  color: #9f1239;
  background: rgba(255, 228, 230, .78);
}

.user-permission-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-edit-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.user-edit-form.collapsed {
  display: none;
}

.user-edit-section,
.permission-block {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(248, 250, 252, .72);
}

.user-edit-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.permission-scope {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(248, 250, 252, .72);
}

.permission-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.permission-section-head span {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.permission-tools {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.ghost-btn.tiny {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
}

.permission-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.permission-checks.visible-users {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.check-line.small {
  min-height: 32px;
  font-size: 13px;
}

.permission-scope {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 12px;
}

.visible-user-checks {
  opacity: .45;
}

.user-edit-form.scope-custom .visible-user-checks,
.user-edit-form.scope-all .visible-user-checks {
  opacity: 1;
}

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

@media (max-width: 980px) {
  .user-admin-layout,
  .user-overview-grid,
  .user-card-head,
  .permission-grid,
  .permission-scope {
    grid-template-columns: 1fr;
  }

  .user-tools,
  .user-card-actions,
  .user-save-row {
    width: 100%;
  }

  .user-tools input,
  .user-tools select,
  .user-tools button {
    flex: 1 1 160px;
  }
}

.log-json {
  margin: 10px 0 0;
  padding: 10px;
  max-height: 220px;
  overflow: auto;
  border-radius: 12px;
  background: rgba(15, 23, 42, .05);
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
}

@media (max-width: 760px) {
  .user-row,
  .permission-grid,
  .permission-scope {
    grid-template-columns: 1fr;
  }
  .permission-checks,
  .permission-checks.visible-users {
    grid-template-columns: 1fr;
  }
}

.danger-text {
  color: #b45309;
  background: rgba(251, 188, 4, .16);
  border-radius: 14px;
  padding: 12px;
  line-height: 1.6;
}

.loading { opacity: .6; }

@media (max-width: 980px) {
  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .side-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .side-footer {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .row.two-cols,
  .card-grid.two {
    grid-template-columns: 1fr;
  }

  .panel-header {
    flex-direction: column;
  }
  .scope-select { width: 100%; }
}

@media (max-width: 640px) {
  .login-page,
  .app-shell { padding: 10px; }
  .login-card,
  .config-card { padding: 18px; border-radius: 22px; }
  .composer { grid-template-columns: 1fr; }
  .send-btn { width: 100%; }
  .bubble { max-width: 94%; }
  .user-row { align-items: flex-start; flex-direction: column; }
}

/* 青云AI助理：手机端适配增强 */
.compact-code {
  font-size: 13px;
  overflow-x: auto;
}

.compact-code code {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(31, 41, 55, .07);
  word-break: break-all;
}

@media (max-width: 760px) {
  html, body {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .login-page {
    min-height: 100dvh;
    padding: 14px;
    align-items: start;
  }

  .login-card,
  .install-card {
    width: 100%;
    padding: 22px;
    border-radius: 24px;
  }

  .login-card h1,
  .panel-header h1 {
    font-size: 24px;
    line-height: 1.25;
  }

  .app-shell {
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }

  .sidebar {
    width: 100%;
    border-radius: 22px;
    padding: 12px;
    gap: 10px;
  }

  .side-brand {
    padding: 2px 4px 8px;
  }

  .spark {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .side-nav {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .nav-item {
    flex: 0 0 auto;
    padding: 11px 13px;
    white-space: nowrap;
    border-radius: 16px;
  }

  .side-footer {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-top: 10px;
  }

  .user-chip {
    min-width: 0;
  }

  .user-chip div {
    min-width: 0;
  }

  .user-chip b,
  .user-chip small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace {
    overflow: visible;
  }

  .panel {
    min-height: calc(100dvh - 168px);
    overflow: visible;
    gap: 12px;
    padding-right: 0;
  }

  .panel-header {
    padding: 8px 2px 0;
    gap: 10px;
  }

  .quick-actions {
    padding: 0;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .quick-actions button {
    flex: 0 0 auto;
    padding: 10px 13px;
  }

  .chat-messages {
    min-height: 45dvh;
    max-height: none;
    border-radius: 22px;
    padding: 14px;
  }

  .message {
    margin-bottom: 10px;
  }

  .bubble {
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 14px;
  }

  .composer {
    position: sticky;
    bottom: 8px;
    z-index: 5;
    grid-template-columns: 1fr;
    border-radius: 22px;
    padding: 10px;
  }

  .composer textarea {
    min-height: 72px;
    font-size: 16px;
  }

  .send-btn,
  .primary-btn,
  .secondary-btn,
  .ghost-btn {
    min-height: 44px;
  }

  .config-card {
    padding: 16px;
    border-radius: 22px;
  }

  .table-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .record-item,
  .user-row {
    padding: 13px;
    border-radius: 16px;
  }

  .row-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .row-actions button,
  .button-row button {
    flex: 1 1 120px;
  }

  .download-link {
    width: 100%;
  }
}

/* v6：记录列表工具栏、大模型等待动效、秒级时间展示 */
.records-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(180px, 1.2fr) auto;
  gap: 14px;
  align-items: end;
}

.records-toolbar .toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.records-toolbar .toolbar-actions button {
  min-width: 112px;
  white-space: nowrap;
}

.records-toolbar .form-msg {
  grid-column: 1 / -1;
}

.loading-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4b5563;
}

.mini-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(66, 133, 244, .20);
  border-top-color: var(--blue);
  display: inline-block;
  flex: 0 0 auto;
  animation: qy-spin .8s linear infinite;
}

@keyframes qy-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.records-list {
  grid-template-columns: 1fr;
}

.record-item {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.record-meta {
  margin-bottom: 0;
}

.record-content {
  padding: 2px 0;
}

@media (max-width: 980px) {
  .records-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .records-toolbar .toolbar-actions {
    justify-content: stretch;
  }
  .records-toolbar .toolbar-actions button {
    flex: 1 1 120px;
  }
  .record-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .records-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .records-toolbar .toolbar-actions {
    flex-direction: column;
  }
  .records-toolbar .toolbar-actions button {
    width: 100%;
  }
  .loading-bubble {
    align-items: flex-start;
  }
}

/* v7：手机主界面重排。目标：顶部入口单行、对话区域占满、输入框始终在底部。 */
.mobile-only { display: none; }

@media (max-width: 760px) {
  html,
  body {
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background:
      linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(148, 211, 255, .62) 100%);
  }

  .app-shell {
    height: 100vh;
    min-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background:
      linear-gradient(180deg, #ffffff 0%, #ffffff 60%, rgba(148, 211, 255, .56) 100%);
  }

  .sidebar {
    flex: 0 0 calc(56px + env(safe-area-inset-top));
    width: 100%;
    min-height: calc(56px + env(safe-area-inset-top));
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(31, 41, 55, .08);
    box-shadow: none;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: env(safe-area-inset-top) 8px 0;
  }

  .side-brand {
    flex: 0 0 auto;
    padding: 0;
    gap: 0;
  }

  .side-brand > div:not(.spark) {
    display: none;
  }

  .spark {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    font-size: 17px;
    box-shadow: none;
  }

  .side-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    overflow: hidden;
    padding: 0;
  }

  .nav-item {
    min-width: 0;
    width: auto;
    padding: 8px 4px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  .side-footer {
    flex: 0 0 auto;
    border-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .side-footer .user-chip {
    display: none;
  }

  #logoutBtn {
    min-height: 32px;
    padding: 7px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .workspace {
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px - env(safe-area-inset-top));
    overflow: hidden;
  }

  .panel {
    height: 100%;
    min-height: 0;
    overflow: auto;
    gap: 12px;
    padding: 10px;
  }

  #chatPanel.panel.active {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 74%, rgba(66, 133, 244, .12), transparent 30%),
      linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(148, 211, 255, .62) 100%);
  }

  #chatPanel .panel-header {
    display: none;
  }

  #chatPanel .quick-actions {
    flex: 0 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(74px, 1fr);
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(31, 41, 55, .06);
  }

  #chatPanel .quick-actions::-webkit-scrollbar {
    display: none;
  }

  #chatPanel .quick-actions button {
    min-height: 32px;
    padding: 7px 8px;
    font-size: 12px;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: none;
  }

  #chatPanel .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 18px 12px 14px;
    -webkit-overflow-scrolling: touch;
  }

  #chatPanel .message:first-child.assistant .bubble {
    margin-top: 22px;
  }

  #chatPanel .message {
    margin-bottom: 12px;
  }

  #chatPanel .bubble {
    max-width: 88%;
    font-size: 15px;
    line-height: 1.7;
  }

  #chatPanel .message.user .bubble {
    max-width: 82%;
  }

  #chatPanel .composer {
    flex: 0 0 auto;
    position: relative;
    bottom: auto;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: end;
    margin: 8px 10px calc(8px + env(safe-area-inset-bottom));
    padding: 8px 8px 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(31, 41, 55, .08);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 40px rgba(31, 41, 55, .16);
  }

  #chatPanel .composer textarea {
    min-height: 44px;
    height: 44px;
    max-height: 132px;
    padding: 11px 0 9px;
    resize: none;
    overflow-y: auto;
    font-size: 17px;
    line-height: 22px;
  }

  #chatPanel .send-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    box-shadow: none;
    align-self: end;
  }

  #chatPanel .send-btn::after {
    content: '↑';
    display: block;
    font-size: 24px;
    line-height: 44px;
    font-weight: 800;
  }

  #chatPanel .download-link {
    width: auto;
    max-width: 100%;
  }

  /* 非对话页面仍可正常滚动，避免配置页内容被底部输入框规则影响。 */
  #recordsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active {
    overflow-y: auto;
    padding: 10px;
  }
}

@media (max-width: 390px) {
  .nav-item {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 11px;
  }

  #logoutBtn {
    padding-left: 6px;
    padding-right: 6px;
  }

  .spark {
    width: 30px;
    height: 30px;
  }
}

/* v7：手机端短标签，保证顶部功能入口一行放下。 */
.mobile-label { display: none; }

@media (max-width: 760px) {
  .desktop-label { display: none; }
  .mobile-label { display: inline; }
  .nav-item { font-weight: 800; }
}


/* v8：电脑端按 Gemini 类布局收敛字号、按钮和侧栏；手机端重点压缩记录列表页。 */
@media (min-width: 761px) {
  html,
  body {
    background: #ffffff;
    font-size: 14px;
  }

  .app-shell {
    height: 100vh;
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    background: #ffffff;
  }

  .sidebar {
    border: 0;
    border-right: 1px solid #eef0f2;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: #ffffff;
    padding: 14px 8px 12px;
  }

  .side-brand {
    padding: 6px 8px 22px;
    gap: 12px;
  }

  .spark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 18px;
    box-shadow: none;
  }

  .side-brand strong {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: #1f1f1f;
    letter-spacing: 0;
  }

  .side-brand span {
    display: none;
  }

  .side-nav {
    gap: 4px;
  }

  .nav-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    padding: 9px 14px;
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    background: transparent;
  }

  .nav-item::before {
    width: 20px;
    text-align: center;
    color: #202124;
    font-size: 17px;
    font-weight: 400;
  }

  .nav-item[data-panel="chatPanel"]::before { content: '✎'; }
  .nav-item[data-panel="recordsPanel"]::before { content: '⌕'; }
  .nav-item[data-panel="announcementsPanel"]::before { content: 'i'; }
  .nav-item[data-panel="issueReportsPanel"]::before { content: '!'; }
  .nav-item[data-panel="usersPanel"]::before { content: '◌'; }
  .nav-item[data-panel="settingsPanel"]::before { content: '◇'; }

  .nav-item:hover {
    transform: none;
    background: #f5f5f5;
  }

  .nav-item.active {
    color: #1f1f1f;
    background: #f1eeee;
  }

  .side-footer {
    border-top: 0;
    padding: 12px 8px 0;
    gap: 8px;
  }

  .user-chip {
    padding: 6px 0;
  }

  .avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .user-chip b {
    font-size: 14px;
    font-weight: 600;
  }

  .user-chip small {
    font-size: 12px;
  }

  #logoutBtn.ghost-btn {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
  }

  #logoutBtn.ghost-btn:hover {
    background: #f5f5f5;
  }

  .workspace {
    background:
      radial-gradient(ellipse at 55% 52%, rgba(178, 220, 252, .62) 0%, rgba(224, 242, 255, .38) 30%, rgba(255, 255, 255, 0) 58%),
      #ffffff;
    overflow: hidden;
  }

  .panel {
    gap: 12px;
    padding: 22px 28px;
  }

  #chatPanel.panel.active {
    display: flex;
    overflow: hidden;
    padding: 0 0 22px;
  }

  #chatPanel .panel-header {
    justify-content: center;
    text-align: center;
    padding: 18vh 24px 8px;
  }

  #chatPanel .panel-header .eyebrow {
    display: none;
  }

  #chatPanel .panel-header h1 {
    margin: 0;
    color: #3c4043;
    font-size: 36px;
    line-height: 1.24;
    font-weight: 400;
    letter-spacing: -.02em;
  }

  #chatPanel .quick-actions {
    flex: 0 0 auto;
    justify-content: center;
    gap: 8px;
    padding: 0 20px 8px;
  }

  #chatPanel .quick-actions button {
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(60, 64, 67, .08);
    box-shadow: none;
    background: rgba(255, 255, 255, .70);
    color: #3c4043;
    font-size: 13px;
    font-weight: 500;
  }

  #chatPanel .quick-actions button:hover {
    transform: none;
    background: #ffffff;
  }

  #chatPanel .chat-messages {
    flex: 1 1 auto;
    width: min(940px, calc(100% - 48px));
    min-height: 0;
    margin: 0 auto;
    padding: 8px 0 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #chatPanel .message {
    margin-bottom: 12px;
  }

  #chatPanel .bubble {
    max-width: min(760px, 86%);
    padding: 13px 16px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.7;
    box-shadow: 0 4px 16px rgba(60, 64, 67, .07);
  }

  #chatPanel .message.assistant:first-child {
    justify-content: center;
  }

  #chatPanel .message.assistant:first-child .bubble {
    max-width: min(720px, 90%);
    color: #5f6368;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(60, 64, 67, .08);
    box-shadow: none;
  }

  #chatPanel .message.user .bubble {
    background: #1a73e8;
    border-bottom-right-radius: 7px;
  }

  #chatPanel .composer {
    width: min(920px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 42px;
    gap: 0;
    align-items: center;
    padding: 7px 8px 7px 10px;
    border: 1px solid #edf0f2;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(60, 64, 67, .15);
  }

  #chatPanel .composer::before {
    content: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #1f1f1f;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
  }

  #chatPanel .composer textarea {
    min-height: 44px;
    height: 44px;
    max-height: 140px;
    padding: 11px 8px 9px;
    border: 0;
    border-radius: 0;
    resize: none;
    overflow-y: auto;
    font-size: 16px;
    line-height: 22px;
  }

  #chatPanel .send-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: #5f6368;
    background: #e8eaed;
    box-shadow: none;
  }

  #chatPanel .send-btn::after {
    content: '↑';
    display: block;
    font-size: 24px;
    line-height: 40px;
    font-weight: 600;
  }

  #chatPanel .send-btn:hover {
    transform: none;
    background: #dfe3e7;
  }

  .panel-header.compact {
    padding: 12px 0 4px;
  }

  .panel-header.compact .eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .panel-header.compact h1 {
    margin: 0;
    color: #202124;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.02em;
  }

  .config-card {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 30px rgba(60, 64, 67, .06);
  }

  .config-card h2,
  .table-head h2 {
    font-size: 18px;
    font-weight: 600;
  }

  input,
  textarea,
  select {
    border-radius: 14px;
    padding: 11px 13px;
    font-size: 14px;
  }

  .primary-btn,
  .secondary-btn,
  .ghost-btn,
  .send-btn,
  .quick-actions button {
    font-size: 14px;
    font-weight: 500;
  }

  .records-toolbar {
    grid-template-columns: 160px 160px minmax(180px, 1fr) auto;
    gap: 12px;
  }

  .records-toolbar .toolbar-actions button {
    min-width: 104px;
  }

  .record-item,
  .user-row {
    border-radius: 14px;
    padding: 14px;
  }
}

@media (max-width: 760px) {
  .nav-item {
    min-height: 30px;
    padding: 7px 3px;
    font-size: 11px;
  }

  #recordsPanel.panel.active {
    padding: 8px 10px calc(76px + env(safe-area-inset-bottom));
    background: #f8fafd;
  }

  #recordsPanel .panel-header {
    padding: 6px 2px 2px;
  }

  #recordsPanel .panel-header h1 {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
  }

  #recordsPanel .eyebrow {
    margin-bottom: 3px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  #recordsPanel .records-toolbar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
  }

  #recordsPanel .records-toolbar label span {
    margin-bottom: 5px;
    font-size: 11px;
  }

  #recordsPanel .records-toolbar input,
  #recordsPanel .records-toolbar select {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
  }

  #recordsPanel .records-toolbar label:nth-of-type(3),
  #recordsPanel .records-toolbar .form-msg {
    grid-column: 1 / -1;
  }

  #recordsPanel .records-toolbar .toolbar-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #recordsPanel .records-toolbar .toolbar-actions button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }

  #recordsPanel .table-card {
    padding: 12px;
    border-radius: 18px;
  }

  #recordsPanel .table-head {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  #recordsPanel .table-head h2 {
    font-size: 16px;
    line-height: 1.25;
  }

  #recordsPanel .pill {
    padding: 5px 9px;
    font-size: 11px;
  }

  #recordsPanel .records-list.empty,
  #recordsPanel .empty {
    padding: 16px;
    font-size: 13px;
  }

  #recordsPanel .record-item {
    padding: 11px;
    border-radius: 14px;
    gap: 8px;
  }

  #recordsPanel .record-meta {
    gap: 5px;
    font-size: 11px;
    line-height: 1.35;
  }

  #recordsPanel .record-meta span {
    padding: 3px 6px;
  }

  #recordsPanel .record-content {
    font-size: 13px;
    line-height: 1.55;
  }

  #recordsPanel .form-msg {
    min-height: 16px;
    font-size: 12px;
  }
}

/* v9：桌面端按 Gemini 对话页重排。保持移动端 v8 规则不变。 */
@media (min-width: 761px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #1f1f1f;
    font-size: 14px;
  }

  body {
    font-family: Arial, "Google Sans", "Segoe UI", "Microsoft YaHei", sans-serif;
  }

  .app-shell {
    grid-template-columns: 332px minmax(0, 1fr);
    height: 100vh;
    padding: 0;
    gap: 0;
    background: #ffffff;
  }

  .sidebar {
    height: 100vh;
    border: 0;
    border-radius: 0;
    border-right: 1px solid #f0f1f3;
    background: #ffffff;
    box-shadow: none;
    backdrop-filter: none;
    padding: 18px 10px 12px;
  }

  .side-brand {
    position: relative;
    min-height: 44px;
    padding: 0 44px 18px 8px;
    gap: 10px;
  }

  .side-brand::after {
    content: '▯';
    position: absolute;
    top: 2px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #1f1f1f;
    font-size: 19px;
    line-height: 1;
  }

  .side-brand:hover::after {
    background: #f1f3f4;
  }

  .spark {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 18px;
    box-shadow: none;
    background: conic-gradient(from 0deg, #4285f4, #34a853, #fbbc04, #ea4335, #4285f4);
  }

  .side-brand strong {
    color: #1f1f1f;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 24px;
  }

  .side-brand span {
    display: none;
  }

  .side-nav {
    flex: 0 0 auto;
    gap: 3px;
    margin-bottom: 28px;
  }

  .nav-item {
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #1f1f1f;
    background: transparent;
  }

  .nav-item::before {
    width: 20px;
    margin-right: 1px;
    font-size: 18px;
    color: #202124;
  }

  .nav-item:hover,
  .nav-item.active {
    transform: none;
    background: #f1eeee;
    color: #1f1f1f;
  }

  .desktop-side-extra {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 0 0 12px;
    color: #1f1f1f;
  }

  .side-section-title {
    margin: 0 0 8px;
    padding: 0 4px;
    color: #8a8a8a;
    font-size: 14px;
    line-height: 20px;
  }


  .side-text-row {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    color: #1f1f1f;
    background: transparent;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .side-text-row:hover {
    background: #f7f7f7;
  }

  .side-footer {
    margin-top: auto;
    border-top: 0;
    padding: 8px 8px 0;
    gap: 8px;
  }

  .user-chip {
    min-height: 42px;
    padding: 4px 0;
  }

  .avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .user-chip b {
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
  }

  .user-chip small {
    color: #70757a;
    font-size: 12px;
    line-height: 16px;
  }

  #logoutBtn.ghost-btn {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #3c4043;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
  }

  #logoutBtn.ghost-btn:hover {
    transform: none;
    background: #f1f3f4;
  }

  .workspace {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 58% 59%, rgba(186, 224, 253, .82) 0%, rgba(225, 244, 255, .46) 33%, rgba(255, 255, 255, 0) 62%),
      #ffffff;
  }

  .workspace::after {
    content: '⋮';
    position: absolute;
    top: 20px;
    right: 26px;
    z-index: 2;
    color: #1f1f1f;
    font-size: 24px;
    line-height: 1;
  }

  #chatPanel.panel.active {
    position: relative;
    height: 100vh;
    min-height: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    gap: 0;
  }

  #chatPanel .quick-actions {
    display: none;
  }

  #chatPanel:not(.has-chat) .chat-messages {
    display: none;
  }

  #chatPanel:not(.has-chat) .panel-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 37%;
    transform: translateY(-50%);
    justify-content: center;
    text-align: center;
    padding: 0 24px;
  }

  #chatPanel:not(.has-chat) .panel-header .eyebrow {
    display: none;
  }

  #chatPanel:not(.has-chat) .panel-header h1 {
    margin: 0;
    color: #3c4043;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .02em;
  }

  #chatPanel:not(.has-chat) .composer {
    position: absolute;
    left: 50%;
    top: calc(37% + 112px);
    bottom: auto;
    transform: translateX(-50%);
  }

  #chatPanel.has-chat .panel-header {
    display: none;
  }

  #chatPanel.has-chat .chat-messages {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 132px;
    transform: translateX(-50%);
    width: min(930px, calc(100% - 112px));
    min-height: 0;
    margin: 0;
    padding: 54px 0 34px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #chatPanel .welcome-message {
    display: none;
  }

  #chatPanel .message {
    margin: 0 0 22px;
  }

  #chatPanel .message.user {
    justify-content: flex-end;
  }

  #chatPanel .bubble {
    max-width: min(680px, 82%);
    padding: 14px 18px;
    border-radius: 28px;
    font-size: 16px;
    line-height: 1.72;
    box-shadow: none;
  }

  #chatPanel .message.user .bubble {
    color: #1f1f1f;
    background: #f0eeee;
    border: 0;
    border-bottom-right-radius: 28px;
  }

  #chatPanel .message.assistant .bubble {
    max-width: 100%;
    padding: 8px 0;
    color: #1f1f1f;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #chatPanel .message.loading-message .bubble {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #5f6368;
  }

  #chatPanel .download-link {
    width: auto;
    margin-top: 12px;
    border-radius: 999px;
    background: #e8f0fe;
    color: #174ea6;
    font-size: 14px;
    font-weight: 600;
  }

  #chatPanel .composer {
    width: min(810px, calc(100% - 120px));
    min-height: 80px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 70px 44px;
    align-items: center;
    gap: 0;
    padding: 8px 10px 8px 14px;
    border: 1px solid #edf0f2;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(60, 64, 67, .14);
  }

  #chatPanel.has-chat .composer {
    position: absolute;
    left: 50%;
    bottom: 54px;
    transform: translateX(-50%);
  }

  #chatPanel .composer::before {
    content: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #1f1f1f;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
  }

  #chatPanel .composer::after {
    content: none;
    width: 62px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
  }

  #chatPanel .composer textarea {
    min-height: 46px;
    height: 46px;
    max-height: 140px;
    padding: 11px 10px 9px;
    border: 0;
    background: transparent;
    resize: none;
    overflow-y: auto;
    color: #1f1f1f;
    font-size: 18px;
    line-height: 24px;
    box-shadow: none !important;
  }

  #chatPanel .composer textarea::placeholder {
    color: #80868b;
  }

  #chatPanel .send-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    color: #3c4043;
    background: transparent;
    box-shadow: none;
    font-size: 0;
  }

  #chatPanel .send-btn::after {
    content: '↑';
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8eaed;
    color: #5f6368;
    font-size: 24px;
    line-height: 42px;
    font-weight: 600;
    text-align: center;
  }

  #chatPanel .send-btn:hover {
    transform: none;
    background: transparent;
  }

  #chatPanel .send-btn:hover::after {
    background: #dfe3e7;
  }

  /* 其他页面保持清爽卡片，但让字体和按钮接近桌面截图比例。 */
  #recordsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active {
    height: 100vh;
    overflow: auto;
    padding: 28px 34px;
    background: #ffffff;
  }

  .panel-header.compact h1 {
    font-size: 26px;
    font-weight: 500;
  }

  .config-card {
    background: #ffffff;
    border-color: #eceff1;
    box-shadow: 0 6px 20px rgba(60, 64, 67, .06);
  }
}

@media (max-width: 760px) {
  .desktop-side-extra {
    display: none;
  }
}

/* v10：查询意图修复、记录删除、日志页 */
.records-result-head {
  align-items: center;
}

.records-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.select-all-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}

.select-all-line input,
.record-check input {
  accent-color: var(--blue);
}

.danger-btn,
.danger-link {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.danger-btn {
  border-radius: 999px;
  background: rgba(239, 68, 68, .10);
  color: #b91c1c;
  font-weight: 800;
  padding: 10px 14px;
}

.danger-btn.small {
  padding: 8px 12px;
  font-size: 13px;
}

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

.danger-link {
  background: transparent;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 10px;
  align-self: start;
}

.danger-link:hover,
.danger-btn:hover:not(:disabled) {
  background: rgba(239, 68, 68, .16);
}

.record-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.record-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.record-check input {
  width: 16px;
  height: 16px;
}

.record-main {
  min-width: 0;
}

.logs-toolbar {
  grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(180px, 1.1fr) minmax(160px, .9fr) auto;
}

.logs-list {
  display: grid;
  gap: 12px;
}

.logs-switch-row {
  margin: 0 0 14px;
  min-height: 44px;
  align-items: center;
  overflow-y: visible;
}

#logsPanel .logs-module-tabs {
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: 0;
  min-height: 44px;
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.logs-module-pane {
  min-width: 0;
}

.logs-list.empty {
  color: var(--muted);
  padding: 22px;
  text-align: center;
  background: rgba(31, 41, 55, .04);
  border-radius: 18px;
}

.log-item {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}

.log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.log-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(31, 41, 55, .05);
}

.chat-log-item {
  border-radius: 16px !important;
  border-left: 4px solid #1a73e8 !important;
}

.chat-log-item.is-assistant {
  border-left-color: #34a853 !important;
}

.chat-log-item.is-user .log-meta span:nth-child(4) {
  background: #e8f0fe;
  color: #174ea6;
}

.chat-log-item.is-assistant .log-meta span:nth-child(4) {
  background: #e6f4ea;
  color: #137333;
}

.chat-log-content {
  color: #202124;
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sync-log-overview-card {
  margin-bottom: 16px;
}

.sync-log-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sync-log-status-grid div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e5e8ef;
  border-radius: 16px;
  background: #fff;
}

.sync-log-status-grid div.is-running {
  border-color: rgba(52, 168, 83, .35);
  background: #f8fffb;
}

.sync-log-status-grid span {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.sync-log-status-grid b {
  display: block;
  color: #202124;
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}

.sync-log-status-grid em {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
  word-break: break-word;
}

.sync-run-item {
  border-left: 4px solid #9aa0a6;
}

.sync-run-item.status-success {
  border-left-color: #34a853;
}

.sync-run-item.status-failed {
  border-left-color: #ea4335;
}

.sync-run-item.status-running,
.sync-run-item.status-queued {
  border-left-color: #1a73e8;
}

.sync-run-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}

.sync-run-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 12px;
  font-weight: 800;
}

.log-detail {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.55;
  background: rgba(15, 23, 42, .035);
  border-radius: 12px;
  padding: 10px;
  color: #334155;
}

@media (max-width: 980px) {
  .logs-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .logs-toolbar .toolbar-actions {
    justify-content: stretch;
  }

  .logs-toolbar .toolbar-actions button {
    width: 100%;
  }

  .record-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (max-width: 760px) {
  .records-result-head {
    align-items: flex-start;
  }

  .records-title-line {
    gap: 7px;
  }

  .select-all-line {
    font-size: 11px;
  }

  .danger-btn.small {
    padding: 6px 9px;
    font-size: 11px;
  }

  #recordsPanel .record-item {
    grid-template-columns: auto minmax(0, 1fr);
    position: relative;
  }

  #recordsPanel .danger-link {
    grid-column: 2;
    justify-self: start;
    padding: 4px 0;
    font-size: 12px;
  }

  .logs-toolbar {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .logs-toolbar label span {
    font-size: 11px;
  }

  .logs-toolbar input,
  .logs-toolbar select {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 12px;
  }

  .logs-toolbar label:nth-of-type(3),
  .logs-toolbar label:nth-of-type(4),
  .logs-toolbar .toolbar-actions {
    grid-column: 1 / -1;
  }

  .log-item {
    padding: 10px;
    border-radius: 14px;
  }

  .log-meta {
    gap: 5px;
    font-size: 10.5px;
  }

  .log-meta span {
    padding: 3px 6px;
  }

  .log-detail {
    max-height: 150px;
    font-size: 11px;
    padding: 8px;
  }
}

/* v10 补丁：日志页面板与导航图标 */
@media (min-width: 761px) {
  .nav-item[data-panel="logsPanel"]::before { content: '☷'; }
  #logsPanel.panel.active {
    height: 100vh;
    overflow: auto;
    padding: 28px 34px;
    background: #ffffff;
  }
}

@media (max-width: 760px) {
  #logsPanel.panel.active {
    overflow-y: auto;
    padding: 10px;
    background: #f8fafd;
  }
}

/* v11：侧栏显示/隐藏按钮、桌面/手机输入框单行化、常用模块精简。 */
.sidebar-toggle {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

@media (min-width: 761px) {
  .app-shell {
    transition: grid-template-columns .18s ease;
  }

  .side-brand {
    padding-right: 48px !important;
  }

  .side-brand::after {
    content: none !important;
    display: none !important;
  }

  .sidebar-toggle {
    position: absolute;
    top: 0;
    right: 8px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #202124;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
  }

  .sidebar-toggle:hover {
    background: #f1f3f4;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  body.sidebar-collapsed .sidebar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.sidebar-collapsed .side-brand {
    min-height: 42px;
    justify-content: center;
    padding: 0 0 18px !important;
  }

  body.sidebar-collapsed .side-brand .spark,
  body.sidebar-collapsed .side-brand > div:not(.spark) {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-toggle {
    position: static;
    margin: 0 auto;
  }

  body.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.sidebar-collapsed .nav-item::before {
    margin: 0 !important;
  }

  body.sidebar-collapsed .nav-item .desktop-label,
  body.sidebar-collapsed .desktop-side-extra,
  body.sidebar-collapsed .side-footer {
    display: none !important;
  }

  .desktop-side-extra {
    padding-top: 0 !important;
  }

  .desktop-side-extra .side-text-row {
    height: 38px;
  }

  #chatPanel .composer {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 6px 8px 6px 18px !important;
  }

  #chatPanel .composer::before,
  #chatPanel .composer::after {
    content: none !important;
    display: none !important;
  }

  #chatPanel .composer textarea {
    min-height: 40px !important;
    height: 40px;
    max-height: 108px;
    padding: 8px 8px 8px 0 !important;
    line-height: 24px !important;
    overflow-y: auto;
  }

  #chatPanel .send-btn {
    align-self: center;
  }
}

@media (max-width: 760px) {
  .sidebar-toggle {
    display: none !important;
  }

  #chatPanel .composer {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 54px;
    padding-left: 16px !important;
  }

  #chatPanel .composer::before,
  #chatPanel .composer::after {
    content: none !important;
    display: none !important;
  }

  #chatPanel .composer textarea {
    min-height: 40px !important;
    height: 40px;
    padding-top: 9px !important;
    padding-bottom: 7px !important;
    line-height: 22px !important;
  }
}


/* v11b：输入框进一步压缩，避免桌面和手机端显示成两行。 */
@media (min-width: 761px) {
  #chatPanel .composer:focus-within {
    border-color: #dfe3e7;
  }
}


/* v12：输入模式选择。用户明确选择【记录】或【对话】，避免把查询语句误保存成记录。 */
.mode-select {
  height: 36px;
  min-width: 72px;
  padding: 0 26px 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  align-self: center;
}
.mode-select:focus {
  border-color: #b7cdfb;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, .12);
  background: #fff;
}
#chatPanel .composer {
  grid-template-columns: auto minmax(0, 1fr) 44px !important;
  align-items: center !important;
}
#chatPanel .composer textarea {
  min-width: 0 !important;
}
@media (min-width: 761px) {
  #chatPanel .composer {
    width: min(810px, calc(100% - 120px));
    min-height: 56px !important;
    padding: 6px 8px 6px 10px !important;
  }
  #chatPanel .mode-select {
    margin-right: 8px;
  }
}
@media (max-width: 760px) {
  #chatPanel .composer {
    grid-template-columns: 66px minmax(0, 1fr) 42px !important;
    padding: 6px 8px 6px 8px !important;
    gap: 6px !important;
  }
  #chatPanel .mode-select {
    height: 34px;
    min-width: 62px;
    padding-left: 8px;
    padding-right: 20px;
    font-size: 13px;
  }
}



/* v13：桌面端侧栏瘦身、输入模式与输入文字拉开距离、对话区底部留白优化。 */
@media (min-width: 761px) {
  .app-shell {
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding: 16px 8px 10px !important;
  }

  .side-brand {
    min-height: 40px !important;
    padding: 0 38px 14px 6px !important;
    gap: 8px !important;
  }

  .spark {
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
  }

  .side-brand strong {
    font-size: 17px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
  }

  .sidebar-toggle {
    top: -1px !important;
    right: 5px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
  }

  .side-nav {
    gap: 2px !important;
    margin-bottom: 20px !important;
  }

  .nav-item {
    min-height: 34px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    line-height: 18px !important;
  }

  .nav-item::before {
    width: 18px !important;
    margin-right: 0 !important;
    font-size: 16px !important;
  }

  .desktop-side-extra {
    padding: 0 0 8px !important;
  }

  .side-section-title {
    margin: 0 0 7px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .side-text-row,
  .desktop-side-extra .side-text-row {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .side-footer {
    padding: 6px 8px 0 !important;
    gap: 6px !important;
  }

  .user-chip {
    min-height: 38px !important;
    gap: 8px !important;
  }

  .avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  .user-chip b {
    font-size: 13px !important;
    line-height: 17px !important;
  }

  .user-chip small {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  #logoutBtn.ghost-btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  body.sidebar-collapsed .side-brand {
    min-height: 38px !important;
  }

  body.sidebar-collapsed .nav-item {
    min-height: 34px !important;
  }

  #chatPanel:not(.has-chat) .panel-header {
    top: 36% !important;
  }

  #chatPanel:not(.has-chat) .composer {
    top: calc(36% + 110px) !important;
  }

  #chatPanel.has-chat .chat-messages {
    width: min(900px, calc(100% - 96px)) !important;
    bottom: 158px !important;
    padding: 56px 0 58px !important;
  }

  #chatPanel .message {
    margin-bottom: 26px !important;
  }

  #chatPanel .bubble {
    max-width: min(680px, 82%) !important;
    font-size: 15px !important;
    line-height: 1.78 !important;
  }

  #chatPanel .message.user .bubble {
    padding: 13px 18px !important;
  }

  #chatPanel .message.assistant .bubble {
    padding: 10px 0 !important;
  }

  #chatPanel .composer,
  #chatPanel:not(.has-chat) .composer {
    width: min(840px, calc(100% - 120px)) !important;
    min-height: 56px !important;
    grid-template-columns: 80px minmax(0, 1fr) 42px !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    padding: 6px 8px 6px 12px !important;
    border-radius: 999px !important;
  }

  #chatPanel.has-chat .composer {
    bottom: 48px !important;
  }

  #chatPanel .mode-select {
    width: 78px !important;
    min-width: 78px !important;
    height: 38px !important;
    margin-right: 0 !important;
    padding: 0 22px 0 12px !important;
    border-color: #e3e7ed !important;
    background-color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  #chatPanel .composer textarea {
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 2px 8px 14px !important;
    border-left: 1px solid #edf0f2 !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }

  #chatPanel .send-btn,
  #chatPanel .send-btn::after {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  #recordsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active,
  #logsPanel.panel.active {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* v13：手机端同步压缩模式按钮与输入文字间距，保持一行不换。 */
@media (max-width: 760px) {
  #chatPanel .composer {
    grid-template-columns: 64px minmax(0, 1fr) 42px !important;
    gap: 10px !important;
    padding: 6px 8px !important;
  }

  #chatPanel .mode-select {
    width: 62px !important;
    min-width: 62px !important;
    height: 32px !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  #chatPanel .composer textarea {
    padding-left: 10px !important;
    border-left: 1px solid #edf0f2 !important;
  }
}


/* v14：输入框按钮归位、全模块间距收敛、记录模式支持指定日期后的视觉优化。 */
@media (min-width: 761px) {
  .app-shell {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding: 14px 8px 10px !important;
    border-right-color: #eef1f4 !important;
  }

  .side-brand {
    min-height: 38px !important;
    padding: 0 36px 12px 6px !important;
  }

  .side-brand strong {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .sidebar-toggle {
    right: 4px !important;
    top: -2px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .side-nav {
    margin-bottom: 18px !important;
  }

  .nav-item {
    min-height: 33px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }

  .desktop-side-extra .side-text-row {
    height: 31px !important;
    font-size: 12.8px !important;
  }

  .workspace {
    background:
      radial-gradient(ellipse at 58% 61%, rgba(186, 224, 253, .72) 0%, rgba(225, 244, 255, .42) 34%, rgba(255, 255, 255, 0) 64%),
      #ffffff !important;
  }

  #chatPanel.panel.active {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #chatPanel:not(.has-chat) .panel-header {
    top: 34% !important;
  }

  #chatPanel:not(.has-chat) .panel-header h1 {
    font-size: 34px !important;
    line-height: 1.25 !important;
  }

  #chatPanel.has-chat .chat-messages {
    width: min(900px, calc(100% - 104px)) !important;
    bottom: 126px !important;
    padding: 46px 0 72px !important;
  }

  #chatPanel .message {
    margin-bottom: 24px !important;
  }

  #chatPanel .message.user .bubble {
    color: #1f1f1f !important;
    background: #f0eeee !important;
    border-radius: 28px !important;
    padding: 12px 18px !important;
  }

  #chatPanel .message.assistant .bubble {
    max-width: 100% !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1.82 !important;
  }

  #chatPanel .composer,
  #chatPanel:not(.has-chat) .composer {
    width: min(820px, calc(100% - 112px)) !important;
    min-height: 56px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) 40px !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid #e6e9ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(60, 64, 67, .14) !important;
    overflow: hidden !important;
  }

  #chatPanel:not(.has-chat) .composer {
    top: calc(34% + 106px) !important;
  }

  #chatPanel.has-chat .composer {
    bottom: 34px !important;
  }

  #chatPanel .mode-select {
    width: 72px !important;
    min-width: 72px !important;
    height: 36px !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 22px 0 12px !important;
    border: 1px solid #e1e5ea !important;
    border-radius: 999px !important;
    background-color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
  }

  #chatPanel .composer textarea {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px;
    max-height: 96px !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 8px 0 8px 12px !important;
    border: 0 !important;
    border-left: 1px solid #edf0f2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1f1f1f !important;
    font-size: 16px !important;
    line-height: 24px !important;
    resize: none !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  #chatPanel .send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #e8eaed !important;
    box-shadow: none !important;
    color: #5f6368 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #chatPanel .send-btn::after {
    content: '↑' !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #5f6368 !important;
    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  #chatPanel .send-btn:hover,
  #chatPanel .send-btn:hover::after {
    background: #dfe3e7 !important;
  }

  #recordsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active,
  #logsPanel.panel.active {
    padding: 24px 30px !important;
    background: #ffffff !important;
  }

  .panel-header.compact {
    padding: 8px 0 10px !important;
  }

  .panel-header.compact h1 {
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
  }

  .config-card {
    border-radius: 18px !important;
    padding: 18px !important;
    border-color: #e9edf2 !important;
    box-shadow: 0 6px 20px rgba(60, 64, 67, .055) !important;
  }

  .records-toolbar,
  .logs-toolbar {
    gap: 12px !important;
    align-items: end !important;
  }

  .record-item,
  .user-row,
  .log-item {
    border-radius: 16px !important;
    padding: 14px !important;
    border-color: #edf0f2 !important;
    background: #ffffff !important;
  }

  .record-content,
  .log-detail {
    font-size: 13px !important;
    line-height: 1.72 !important;
  }

  .table-head {
    margin-bottom: 12px !important;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 60px minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #chatPanel .composer {
    grid-template-columns: 60px minmax(0, 1fr) 38px !important;
    min-height: 52px !important;
    height: auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  #chatPanel .mode-select {
    width: 60px !important;
    min-width: 60px !important;
    height: 32px !important;
    padding: 0 18px 0 8px !important;
    font-size: 12px !important;
    line-height: 32px !important;
  }

  #chatPanel .composer textarea {
    min-height: 38px !important;
    height: 38px;
    max-height: 96px !important;
    align-self: center !important;
    padding: 8px 0 8px 10px !important;
    border-left: 1px solid #edf0f2 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    overflow-y: auto !important;
  }

  #chatPanel .send-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #e8eaed !important;
    color: #5f6368 !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  #chatPanel .send-btn::after {
    content: '↑' !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border-radius: 50% !important;
    color: #5f6368 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  #recordsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active,
  #logsPanel.panel.active {
    padding: 9px !important;
  }

  .config-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .record-item,
  .user-row,
  .log-item {
    padding: 11px !important;
    border-radius: 14px !important;
  }
}

/* v15: 业务数据同步与接口配置 */
.sync-toolbar {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5ebf3;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 28px rgba(60, 64, 67, 0.08);
}

.sync-toolbar label,
.business-settings-card label {
  display: grid;
  gap: 6px;
}

.sync-toolbar label span,
.business-settings-card label span {
  font-size: 12px;
  line-height: 1.2;
  color: #64748b;
  font-weight: 700;
}

.sync-toolbar input,
.sync-toolbar select,
.business-settings-card input,
.business-settings-card select {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #dbe4ef;
  border-radius: 13px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  outline: none;
}

.sync-toolbar input:focus,
.sync-toolbar select:focus,
.business-settings-card input:focus,
.business-settings-card select:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.14);
}

.sync-toolbar .secondary-btn {
  min-height: 38px;
  padding: 0 16px;
  white-space: nowrap;
}

.sync-msg {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 18px;
}

.business-settings-card {
  margin-top: 18px;
}

.business-auto-sync-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe7f2;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 26px rgba(60, 64, 67, .07);
}

.business-auto-sync-panel .settings-section-head {
  margin-bottom: 0;
}

.auto-sync-grid {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(120px, .7fr) minmax(120px, .7fr) minmax(120px, .7fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: end;
}

.auto-sync-toggle {
  min-height: 42px;
  align-self: end;
  padding: 8px 10px;
  border: 1px solid #dbe4ef;
  border-radius: 13px;
  background: #fff;
}

.auto-sync-status {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e4ebf5;
  border-radius: 14px;
  background: #fff;
  color: #475569;
  white-space: pre-line;
}

.auto-sync-status b {
  color: #1f2937;
}

.auto-sync-status.is-on {
  border-color: rgba(66, 133, 244, .35);
  background: #f8fbff;
}

.auto-sync-status.is-running {
  border-color: rgba(52, 168, 83, .35);
  background: #f8fffb;
}

.inline-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.auto-sync-page {
  min-height: 100vh;
  background: #f8fafd;
  color: #202124;
}

.auto-sync-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 56px;
}

.auto-sync-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.auto-sync-hero h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: 0;
}

.auto-sync-hero .subtle {
  max-width: 760px;
  margin-top: 10px;
}

.auto-sync-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.auto-sync-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: start;
}

.auto-sync-live-card,
.auto-sync-settings-standalone,
.auto-sync-log-card,
.auto-sync-empty {
  border-radius: 20px;
}

.auto-sync-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.auto-sync-live-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auto-sync-live-head h2 {
  margin: 0;
  font-size: 24px;
}

.auto-sync-live-head > b {
  min-width: 76px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  text-align: center;
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #9aa0a6;
  box-shadow: 0 0 0 6px rgba(154, 160, 166, .14);
}

.status-dot.is-on {
  background: #1a73e8;
  box-shadow: 0 0 0 6px rgba(26, 115, 232, .14);
}

.status-dot.is-running {
  background: #34a853;
  box-shadow: 0 0 0 6px rgba(52, 168, 83, .16);
}

.auto-sync-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.auto-sync-kpis div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e5e8ef;
  border-radius: 16px;
  background: #fff;
}

.auto-sync-kpis span {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.auto-sync-kpis b {
  display: block;
  color: #202124;
  font-size: 16px;
  word-break: break-word;
}

.auto-sync-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.auto-sync-settings-standalone {
  display: grid;
  gap: 14px;
}

.auto-sync-settings-standalone .auto-sync-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auto-sync-log-card {
  margin-top: 18px;
}

.auto-sync-log {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  color: #64748b;
}

.auto-sync-log div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  background: #fff;
}

.auto-sync-log div.good b {
  color: #188038;
}

.auto-sync-log div.bad b {
  color: #d93025;
}

.auto-sync-log span {
  min-width: 0;
  color: #202124;
}

.row.three-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#businessTokenStatus {
  margin: -2px 0 0;
}

@media (min-width: 761px) {
  .sidebar {
    width: 236px;
  }
  body.sidebar-collapsed .sidebar {
    width: 60px;
  }
  .workspace {
    margin-left: 236px;
  }
  body.sidebar-collapsed .workspace {
    margin-left: 60px;
  }
}

@media (max-width: 760px) {
  .auto-sync-grid {
    grid-template-columns: 1fr;
  }

  .business-auto-sync-panel .settings-section-head {
    align-items: stretch;
  }

  .business-auto-sync-panel .settings-section-head .secondary-btn {
    width: 100%;
  }

  .auto-sync-shell {
    width: min(100% - 24px, 720px);
    padding-top: 24px;
  }

  .auto-sync-hero,
  .auto-sync-dashboard {
    grid-template-columns: 1fr;
    display: grid;
  }

  .auto-sync-hero h1 {
    font-size: 30px;
  }

  .auto-sync-actions,
  .inline-actions {
    width: 100%;
    justify-content: stretch;
  }

  .auto-sync-actions > *,
  .inline-actions > * {
    flex: 1 1 auto;
  }

  .auto-sync-kpis,
  .auto-sync-settings-standalone .auto-sync-grid,
  .sync-log-status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sync-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sync-toolbar .secondary-btn {
    width: 100%;
  }
  .row.three-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sync-toolbar {
    width: calc(100% - 18px);
    margin: 8px auto 10px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px;
    border-radius: 16px;
  }
  .sync-toolbar label span {
    font-size: 11px;
  }
  .sync-toolbar input,
  .sync-toolbar select {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: 12px;
  }
  .sync-toolbar .secondary-btn {
    min-height: 34px;
    font-size: 12px;
  }
  .business-settings-card {
    margin-top: 12px;
  }
}

/* qingyun-16 final layout refinements */
@media (min-width: 761px) {
  .app-shell {
    grid-template-columns: 214px minmax(0, 1fr) !important;
  }
  body.sidebar-collapsed .app-shell {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }
  .sidebar {
    width: 214px !important;
    padding: 16px 10px 12px !important;
    border-right: 1px solid rgba(15, 23, 42, 0.06) !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }
  body.sidebar-collapsed .sidebar {
    width: 58px !important;
  }
  .workspace,
  body.sidebar-collapsed .workspace {
    margin-left: 0 !important;
  }
  .brand-title {
    font-size: 17px !important;
    letter-spacing: -0.02em !important;
  }
  .nav-item,
  .side-prompt {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }
  .side-section-title {
    margin: 16px 8px 8px !important;
    font-size: 12px !important;
  }
  .workspace {
    background:
      radial-gradient(circle at 68% 56%, rgba(207, 229, 248, 0.42), rgba(255, 255, 255, 0) 36%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #ffffff 100%) !important;
  }
  #chatPanel.has-chat .sync-toolbar {
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    margin: 0 !important;
  }
  body.role-admin #chatPanel.has-chat .chat-messages {
    top: 126px !important;
    bottom: 120px !important;
    padding: 16px min(7vw, 104px) 36px !important;
  }
  body.role-employee #chatPanel.has-chat .chat-messages {
    top: 30px !important;
    bottom: 120px !important;
    padding: 16px min(7vw, 104px) 36px !important;
  }
  #chatPanel .composer {
    width: min(820px, calc(100% - 140px)) !important;
    min-height: 58px !important;
    padding: 8px 10px 8px 12px !important;
    grid-template-columns: 116px minmax(0, 1fr) 48px !important;
    gap: 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .11), 0 1px 0 rgba(15, 23, 42, .04) !important;
  }
  #chatPanel .composer textarea {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 92px !important;
    padding: 5px 0 !important;
    line-height: 20px !important;
    font-size: 16px !important;
  }
  #chatPanel .mode-select {
    min-width: 112px !important;
    height: 44px !important;
    padding: 0 34px 0 18px !important;
    font-size: 15px !important;
  }
  #chatPanel .send-btn {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    transform: none !important;
  }
}

.sync-toolbar {
  width: min(930px, calc(100% - 80px)) !important;
  display: grid !important;
  grid-template-columns: 154px 154px 220px auto !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08) !important;
}
.sync-toolbar label span,
.records-toolbar label span,
.logs-toolbar label span {
  color: #64748b !important;
  font-weight: 700 !important;
}
.sync-toolbar input,
.sync-toolbar select {
  min-height: 42px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
}
.sync-toolbar .secondary-btn {
  min-height: 42px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
.sync-msg { grid-column: 1 / -1 !important; }

.records-toolbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(145px, 1fr)) auto !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 18px !important;
  border-radius: 22px !important;
}
.records-toolbar .quick-date-tabs {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: -2px !important;
}
.quick-date-tabs button {
  border: 1px solid rgba(148, 163, 184, .32) !important;
  background: #fff !important;
  color: #334155 !important;
  border-radius: 999px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.quick-date-tabs button.active,
.quick-date-tabs button:hover {
  background: #eaf2ff !important;
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, .25) !important;
}
.records-toolbar .toolbar-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: end !important;
  justify-content: flex-end !important;
}
.records-result-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 2px !important;
}
.records-title-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.select-all-line {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}
.select-all-line input,
.record-check input {
  writing-mode: horizontal-tb !important;
}
.log-detail-text {
  margin-top: 10px !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  background: rgba(248, 250, 252, .95) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  white-space: pre-wrap !important;
}
.log-detail { display: none !important; }

@media (max-width: 1100px) {
  .sync-toolbar { width: calc(100% - 36px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sync-toolbar .secondary-btn { width: 100% !important; }
  .records-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .records-toolbar .toolbar-actions { grid-column: 1 / -1 !important; justify-content: stretch !important; }
  .records-toolbar .toolbar-actions button { flex: 1 1 auto !important; }
}

@media (max-width: 760px) {
  .workspace {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  }
  .sync-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 18px) !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 8px auto 8px !important;
    border-radius: 16px !important;
  }
  #chatPanel.has-chat .chat-messages {
    top: 116px !important;
    bottom: 96px !important;
    padding: 10px 12px 26px !important;
  }
  body.role-employee #chatPanel.has-chat .chat-messages {
    top: 12px !important;
  }
  #chatPanel .composer {
    width: calc(100% - 18px) !important;
    min-height: 54px !important;
    padding: 7px 8px !important;
    grid-template-columns: 92px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
  }
  #chatPanel .mode-select {
    min-width: 88px !important;
    height: 40px !important;
    font-size: 13px !important;
    padding: 0 26px 0 12px !important;
  }
  #chatPanel .send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    position: static !important;
    transform: none !important;
  }
  #chatPanel .composer textarea {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
  }
  .records-toolbar {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px !important;
    gap: 9px !important;
  }
  .records-toolbar label:nth-of-type(3),
  .records-toolbar label:nth-of-type(4),
  .records-toolbar .quick-date-tabs,
  .records-toolbar .toolbar-actions,
  .records-toolbar .form-msg {
    grid-column: 1 / -1 !important;
  }
  .records-result-head {
    align-items: flex-start !important;
  }
  .select-all-line {
    font-size: 13px !important;
  }
}

/* v16-final: 业务同步、模糊查询、记录列表与对话区最终排版收敛 */
@media (min-width: 761px) {
  .workspace {
    background:
      radial-gradient(circle at 58% 58%, rgba(219, 234, 254, .72) 0%, rgba(239, 246, 255, .48) 34%, rgba(255,255,255,0) 62%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #f7fbff 100%) !important;
  }

  #chatPanel.panel.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 30px 22px !important;
    gap: 0 !important;
  }

  #chatPanel.has-chat .panel-header {
    display: none !important;
  }

  #chatPanel.has-chat .sync-toolbar {
    flex: 0 0 auto !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
  }

  #chatPanel.has-chat .chat-messages {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: min(980px, 100%) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 4px 132px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #chatPanel.has-chat .composer,
  #chatPanel:not(.has-chat) .composer {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 72px)) !important;
    height: 58px !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12), 0 1px 0 rgba(15, 23, 42, .04) !important;
    overflow: hidden !important;
    z-index: 10 !important;
  }

  #chatPanel.has-chat .composer {
    bottom: 24px !important;
    top: auto !important;
  }

  #chatPanel:not(.has-chat) .composer {
    top: calc(37% + 112px) !important;
    bottom: auto !important;
  }

  #chatPanel .mode-select {
    width: 100px !important;
    min-width: 100px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 30px 0 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  #chatPanel .composer textarea {
    min-width: 0 !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 92px !important;
    padding: 5px 0 !important;
    border: 0 !important;
    background: transparent !important;
    resize: none !important;
    overflow-y: auto !important;
    font-size: 15px !important;
    line-height: 20px !important;
    box-shadow: none !important;
  }

  #chatPanel .send-btn {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    transform: none !important;
    justify-self: end !important;
    align-self: center !important;
    overflow: hidden !important;
    font-size: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #chatPanel .send-btn::after {
    content: '↑' !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    color: #4b5563 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

.sync-toolbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: min(1040px, 100%) !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
  display: grid !important;
  grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(180px, 1.1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .07) !important;
  z-index: 4 !important;
}

.sync-toolbar label,
.records-toolbar label {
  min-width: 0 !important;
}

.sync-toolbar input,
.sync-toolbar select,
.records-toolbar input,
.records-toolbar select {
  width: 100% !important;
  box-sizing: border-box !important;
}

.date-shortcuts {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 2px !important;
}

.date-shortcuts button {
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(148, 163, 184, .32) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.date-shortcuts button.active,
.date-shortcuts button:hover {
  background: #eaf2ff !important;
  border-color: rgba(37, 99, 235, .24) !important;
  color: #1d4ed8 !important;
}

.records-toolbar {
  grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(160px, 1fr) minmax(180px, 1.15fr) auto !important;
  align-items: end !important;
}

.records-result-head,
.table-head.records-result-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.records-title-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.records-title-line h2 {
  margin: 0 !important;
  white-space: nowrap !important;
}

.select-all-line {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 58px !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  line-height: 18px !important;
}

.select-all-line input {
  flex: 0 0 auto !important;
  writing-mode: horizontal-tb !important;
}

.log-detail-text {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-radius: 14px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.log-detail { display: none !important; }

@media (max-width: 1100px) {
  .sync-toolbar,
  .records-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sync-toolbar .secondary-btn,
  .records-toolbar .toolbar-actions,
  .records-toolbar .form-msg {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  #chatPanel.has-chat .chat-messages {
    top: 104px !important;
    bottom: 90px !important;
    padding: 10px 12px 26px !important;
  }
  body.role-employee #chatPanel.has-chat .chat-messages {
    top: 10px !important;
  }
  #chatPanel .composer {
    grid-template-columns: 72px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
    width: calc(100% - 18px) !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 7px 8px !important;
  }
  #chatPanel .mode-select {
    width: 68px !important;
    min-width: 68px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 20px 0 9px !important;
    font-size: 12px !important;
  }
  #chatPanel .composer textarea {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 86px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 4px 0 !important;
  }
  #chatPanel .send-btn,
  #chatPanel .send-btn::after {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .sync-toolbar {
    width: calc(100% - 18px) !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 8px auto 8px !important;
    border-radius: 16px !important;
  }
  .sync-toolbar .secondary-btn,
  .sync-msg {
    grid-column: 1 / -1 !important;
  }
  .records-toolbar {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px !important;
    gap: 9px !important;
  }
  .records-toolbar label:nth-of-type(3),
  .records-toolbar label:nth-of-type(4),
  .date-shortcuts,
  .records-toolbar .toolbar-actions,
  .records-toolbar .form-msg {
    grid-column: 1 / -1 !important;
  }
  .date-shortcuts {
    gap: 6px !important;
  }
  .date-shortcuts button {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .records-result-head,
  .table-head.records-result-head {
    align-items: center !important;
  }
  .select-all-line {
    min-width: auto !important;
    font-size: 12px !important;
  }
}

/* qingyun-16 final polish: cleaner chat background, non-overlapping sync toolbar, record/log layout */
@media (min-width: 761px) {
  .workspace {
    background:
      radial-gradient(ellipse at 58% 48%, rgba(220, 235, 248, 0.34) 0%, rgba(220, 235, 248, 0.18) 32%, rgba(255,255,255,0) 62%),
      linear-gradient(180deg, #ffffff 0%, #f9fbfd 58%, #ffffff 100%) !important;
  }
  #chatPanel {
    overflow: hidden !important;
  }
  body.role-admin #chatPanel.has-chat > .sync-toolbar {
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(980px, calc(100% - 96px)) !important;
    min-height: 86px !important;
    z-index: 12 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.role-admin #chatPanel.has-chat > .chat-messages {
    top: 150px !important;
    bottom: 130px !important;
    padding-top: 8px !important;
  }
  body.role-employee #chatPanel.has-chat > .chat-messages {
    top: 34px !important;
    bottom: 130px !important;
  }
  #chatPanel.has-chat > .composer {
    bottom: 42px !important;
    z-index: 14 !important;
  }
  #chatPanel > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel.has-chat > .composer {
    width: min(760px, calc(100% - 150px)) !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 9px 7px 12px !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) 44px !important;
    gap: 12px !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  #chatPanel > .composer .mode-select,
  #chatPanel.has-chat > .composer .mode-select {
    width: 104px !important;
    min-width: 104px !important;
    height: 42px !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
  #chatPanel > .composer textarea,
  #chatPanel.has-chat > .composer textarea {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 72px !important;
    line-height: 24px !important;
    padding: 9px 2px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  #chatPanel > .composer .send-btn,
  #chatPanel.has-chat > .composer .send-btn {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    transform: none !important;
  }
}

.records-result-head,
.table-head.records-result-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.records-title-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.select-all-line,
.records-title-line .select-all-line {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  min-width: 54px !important;
  width: auto !important;
}
.select-all-line input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}
.quick-date-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.quick-date-tabs button.active {
  background: linear-gradient(135deg, #e8f1ff, #f3ecff) !important;
  color: #1e40af !important;
  border-color: rgba(37, 99, 235, 0.24) !important;
}
.log-detail-text,
.log-detail {
  font-family: inherit !important;
  white-space: normal !important;
  word-break: break-word !important;
  background: #f8fafc !important;
  color: #1f2937 !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  line-height: 1.7 !important;
}

@media (max-width: 1300px) and (min-width: 761px) {
  body.role-admin #chatPanel.has-chat > .sync-toolbar {
    width: min(900px, calc(100% - 56px)) !important;
    grid-template-columns: 1fr 1fr 1.3fr auto !important;
  }
  body.role-admin #chatPanel.has-chat > .chat-messages {
    top: 164px !important;
  }
  #chatPanel > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel.has-chat > .composer {
    width: min(720px, calc(100% - 90px)) !important;
  }
}

@media (max-width: 760px) {
  .workspace {
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 64%, #ffffff 100%) !important;
  }
  .records-result-head,
  .table-head.records-result-head {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .records-title-line {
    gap: 8px !important;
    overflow-x: auto !important;
  }
  .select-all-line {
    min-width: 50px !important;
    font-size: 12px !important;
  }
  #chatPanel.has-chat > .sync-toolbar {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 8px !important;
  }
  body.role-admin #chatPanel.has-chat > .chat-messages {
    top: 142px !important;
  }
}

/* qingyun-16 final pass: override all legacy layout leftovers */
@media (min-width: 761px) {
  body.role-admin #chatPanel.has-chat > .sync-toolbar,
  #chatPanel.has-chat > .sync-toolbar {
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(900px, calc(100% - 72px)) !important;
    grid-template-columns: 150px 150px 210px auto !important;
    z-index: 5 !important;
    margin: 0 !important;
  }
  body.role-admin #chatPanel.has-chat > .chat-messages {
    top: 124px !important;
    bottom: 118px !important;
  }
  body.role-employee #chatPanel.has-chat > .chat-messages {
    top: 28px !important;
    bottom: 118px !important;
  }
  #chatPanel > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel.has-chat > .composer {
    width: min(820px, calc(100% - 140px)) !important;
    grid-template-columns: 116px minmax(0, 1fr) 48px !important;
    overflow: hidden !important;
  }
  .app-shell { grid-template-columns: 214px minmax(0, 1fr) !important; }
  body.sidebar-collapsed .app-shell { grid-template-columns: 58px minmax(0, 1fr) !important; }
  .workspace, body.sidebar-collapsed .workspace { margin-left: 0 !important; }
}

.log-detail { display: none !important; }
.log-detail-text { display: block !important; white-space: pre-wrap !important; }

.date-shortcuts.quick-date-tabs,
.records-toolbar .date-shortcuts.quick-date-tabs,
.records-toolbar .quick-date-tabs {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.date-shortcuts.quick-date-tabs button,
.quick-date-tabs button {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.date-shortcuts.quick-date-tabs button.active,
.quick-date-tabs button.active {
  background: #eaf2ff !important;
  color: #1d4ed8 !important;
}
.records-result-head,
.table-head.records-result-head {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.records-title-line {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.select-all-line {
  display: inline-flex !important;
  flex-direction: row !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #chatPanel.has-chat > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 18px) !important;
    margin: 8px auto 6px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  body.role-admin #chatPanel.has-chat > .chat-messages {
    top: 128px !important;
    bottom: 96px !important;
  }
  #chatPanel > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel.has-chat > .composer {
    width: calc(100% - 18px) !important;
    grid-template-columns: 92px minmax(0, 1fr) 42px !important;
    overflow: hidden !important;
  }
  .records-result-head,
  .table-head.records-result-head {
    gap: 8px !important;
  }
}

/* qingyun-18: 同步工具栏与对话区采用同一内容宽度，彻底避免重叠；消息底部预留输入框高度。 */
@media (min-width: 761px) {
  #chatPanel.panel.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 16px 28px 24px !important;
    gap: 0 !important;
  }

  #chatPanel.has-chat > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: min(930px, 100%) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    grid-template-columns: 155px 155px minmax(190px, 1fr) auto !important;
    align-items: end !important;
    z-index: 3 !important;
  }

  #chatPanel.has-chat > .chat-messages,
  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: min(930px, 100%) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px 4px 116px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #chatPanel.has-chat > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel > .composer {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(820px, calc(100% - 112px)) !important;
    height: 58px !important;
    min-height: 58px !important;
    grid-template-columns: 104px minmax(0, 1fr) 44px !important;
    gap: 12px !important;
    padding: 7px 9px 7px 12px !important;
    z-index: 20 !important;
  }

  #chatPanel.has-chat > .composer,
  #chatPanel > .composer {
    bottom: 24px !important;
    top: auto !important;
  }

  #chatPanel:not(.has-chat) > .composer {
    top: calc(37% + 112px) !important;
    bottom: auto !important;
  }

  #chatPanel.has-chat .message:last-child {
    margin-bottom: 10px !important;
  }

  #chatPanel.has-chat .message.assistant .bubble {
    padding-right: 4px !important;
  }
}

@media (max-width: 760px) {
  #chatPanel.panel.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chatPanel.has-chat > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: calc(100% - 18px) !important;
    margin: 8px auto 6px !important;
    grid-template-columns: 1fr 1fr !important;
    z-index: 3 !important;
  }

  #chatPanel.has-chat > .chat-messages,
  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px calc(92px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  #chatPanel.has-chat > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel > .composer {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 18px) !important;
    z-index: 20 !important;
  }

  #chatPanel.has-chat .message:last-child {
    margin-bottom: 8px !important;
  }
}

/* qingyun-18 final: sync toolbar alignment and safe composer spacing */
@media (min-width: 761px) {
  .workspace {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #ffffff 100%) !important;
  }

  #chatPanel.panel.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 16px 28px 0 !important;
  }

  #chatPanel.has-chat .panel-header {
    display: none !important;
  }

  body.role-admin #chatPanel.has-chat > .sync-toolbar,
  #chatPanel.has-chat > .sync-toolbar,
  #chatPanel > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: min(860px, calc(100% - 36px)) !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 auto 12px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 156px 156px minmax(170px, 1fr) 210px !important;
    align-items: end !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(203, 213, 225, .76) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08) !important;
    z-index: 4 !important;
  }

  .sync-toolbar label span {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  .sync-toolbar input,
  .sync-toolbar select {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }

  .sync-toolbar .secondary-btn {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
  }

  .sync-msg {
    grid-column: 1 / -1 !important;
    min-height: 18px !important;
    margin: -2px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages,
  #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: min(860px, calc(100% - 36px)) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 12px 0 132px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    scroll-padding-bottom: 132px !important;
  }

  #chatPanel.has-chat > .chat-messages .message:last-child {
    margin-bottom: 34px !important;
  }

  #chatPanel.has-chat > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel > .composer {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 72px)) !important;
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 7px 9px 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(203, 213, 225, .88) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12) !important;
    overflow: hidden !important;
    z-index: 30 !important;
  }

  #chatPanel.has-chat > .composer {
    top: auto !important;
    bottom: 24px !important;
  }

  #chatPanel:not(.has-chat) > .composer {
    top: calc(37% + 112px) !important;
    bottom: auto !important;
  }

  #chatPanel .mode-select {
    width: 108px !important;
    min-width: 108px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
  }

  #chatPanel .composer textarea {
    min-width: 0 !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 90px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
    resize: none !important;
    overflow-y: auto !important;
    font-size: 15px !important;
    line-height: 20px !important;
    box-shadow: none !important;
  }

  #chatPanel .send-btn {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  #chatPanel .send-btn::after {
    content: '↑' !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    color: #4b5563 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 760px) {
  #chatPanel.panel.active {
    --qy-chat-width: min(var(--qy-chat-canvas-width), calc(100% - var(--qy-chat-canvas-gutter))) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 8px !important;
  }

  #chatPanel.has-chat > .sync-toolbar,
  #chatPanel > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 8px auto 8px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 16px !important;
    z-index: 3 !important;
  }

  .sync-toolbar label span {
    font-size: 11px !important;
  }

  .sync-toolbar input,
  .sync-toolbar select,
  .sync-toolbar .secondary-btn {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  .sync-msg {
    grid-column: 1 / -1 !important;
    margin: -1px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages,
  #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 12px 4px 108px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-padding-bottom: 108px !important;
  }

  #chatPanel.has-chat > .chat-messages .message:last-child {
    margin-bottom: 30px !important;
  }

  #chatPanel.has-chat > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel > .composer {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: calc(100% - 18px) !important;
    height: 54px !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 42px !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 6px 7px 6px 9px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 30 !important;
  }

  #chatPanel:not(.has-chat) > .composer {
    top: auto !important;
  }

  #chatPanel .mode-select {
    width: 92px !important;
    min-width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  #chatPanel .composer textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 74px !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  #chatPanel .send-btn,
  #chatPanel .send-btn::after {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    line-height: 1 !important;
  }
}

/* qingyun-18：修复同步工具栏、消息区、输入框错位与遮挡。桌面端采用稳定三段式布局：上方同步、中央滚动、底部输入。 */
@media (min-width: 761px) {
  #chatPanel.panel.active {
    --qy-chat-width: min(880px, calc(100% - 80px));
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 16px 28px 22px !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  #chatPanel.has-chat .panel-header,
  #chatPanel.has-chat .quick-actions {
    display: none !important;
  }

  body.role-admin #chatPanel.has-chat > .sync-toolbar,
  #chatPanel.has-chat > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: var(--qy-chat-width) !important;
    max-width: var(--qy-chat-width) !important;
    min-height: auto !important;
    margin: 0 auto 12px !important;
    grid-template-columns: minmax(126px, 1fr) minmax(126px, 1fr) minmax(160px, 1.25fr) minmax(150px, auto) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
  }

  #chatPanel.has-chat > .sync-toolbar .sync-msg {
    grid-column: 1 / -1 !important;
    min-height: 18px !important;
    line-height: 18px !important;
  }

  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages,
  #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: var(--qy-chat-width) !important;
    max-width: var(--qy-chat-width) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 0 26px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
  }

  #chatPanel.has-chat > .composer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: var(--qy-chat-width) !important;
    max-width: var(--qy-chat-width) !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 12px auto 0 !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }

  #chatPanel.has-chat > .composer .mode-select {
    width: 104px !important;
    min-width: 104px !important;
  }

  #chatPanel.has-chat > .composer textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    overflow-y: auto !important;
  }

  #chatPanel.has-chat > .composer .send-btn,
  #chatPanel.has-chat > .composer .send-btn::after {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
  }
}

@media (max-width: 760px) {
  #chatPanel.panel.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chatPanel.has-chat > .sync-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin: 8px auto 6px !important;
    grid-template-columns: 1fr 1fr !important;
    z-index: 2 !important;
  }

  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages,
  #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #chatPanel.has-chat > .composer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 8px auto calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 3 !important;
  }

  #chatPanel.has-chat > .composer textarea {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    overflow-y: auto !important;
  }
}

/* ===== v20 final polish: composer, records pagination, summary charts ===== */
#chatPanel .composer,
#chatPanel.has-chat > .composer {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px 8px 12px !important;
  overflow: hidden !important;
}
#chatPanel .composer .mode-select,
#chatPanel.has-chat > .composer .mode-select {
  width: 96px !important;
  min-width: 96px !important;
  height: 42px !important;
  border-radius: 999px !important;
}
#chatPanel .composer textarea,
#chatPanel.has-chat > .composer textarea {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 90px !important;
  padding: 9px 0 !important;
  line-height: 24px !important;
  overflow-y: auto !important;
}
#chatPanel .send-btn,
#chatPanel.has-chat > .composer .send-btn {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e5e7eb !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  opacity: 1 !important;
}
#chatPanel .send-btn::before,
#chatPanel .send-btn::after,
#chatPanel.has-chat > .composer .send-btn::before,
#chatPanel.has-chat > .composer .send-btn::after {
  content: '↑' !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  text-align: center !important;
}
#chatPanel .send-btn::before { display: none !important; }
#chatPanel .send-btn:hover { background: #dbe3ef !important; }
#chatPanel .send-btn:disabled {
  background: #eef2f7 !important;
  color: #64748b !important;
  opacity: .88 !important;
  cursor: wait !important;
}
#chatPanel .send-btn:disabled::after { color: #64748b !important; }
#chatMessages { padding-bottom: 150px !important; }

.records-toolbar,
.summary-toolbar {
  align-items: end !important;
}
#recordsPanel .table-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.records-list {
  overflow: auto !important;
  max-height: calc(100vh - 380px) !important;
  padding-right: 4px !important;
}
.records-result-head {
  gap: 14px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.records-title-line,
.select-all-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.select-all-line input { margin: 0 !important; }
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 2px;
  color: #64748b;
  font-size: 14px;
}
.pager button {
  min-width: 86px;
  height: 36px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  color: #1f3d6d;
  font-weight: 700;
  cursor: pointer;
}
.pager button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.summary-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
}
.summary-card {
  min-height: 340px;
  overflow: hidden;
}
.summary-card.wide { min-width: 0; }
.ranking-chart,
.time-chart {
  min-height: 260px;
}
.rank-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-size: 14px;
}
.rank-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #334155;
  font-weight: 700;
}
.rank-bar-track {
  height: 12px;
  border-radius: 999px;
  background: #edf4ff;
  overflow: hidden;
}
.rank-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4d8ff7, #7c3aed);
}
.rank-count {
  text-align: right;
  color: #0f172a;
  font-weight: 800;
}
.time-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-bg { fill: #fbfdff; }
.chart-grid { stroke: #e5edf7; stroke-width: 1; }
.chart-axis { fill: #64748b; font-size: 12px; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  color: #475569;
  font-size: 13px;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
@media (max-width: 980px) {
  .summary-grid { grid-template-columns: 1fr; }
  .records-list { max-height: none !important; }
}
@media (max-width: 760px) {
  #chatPanel .composer,
  #chatPanel.has-chat > .composer {
    grid-template-columns: 82px minmax(0, 1fr) 40px !important;
    gap: 8px !important;
    padding: 7px 8px !important;
  }
  #chatPanel .composer .mode-select,
  #chatPanel.has-chat > .composer .mode-select {
    width: 82px !important;
    min-width: 82px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
  #chatPanel .send-btn,
  #chatPanel .send-btn::after,
  #chatPanel.has-chat > .composer .send-btn,
  #chatPanel.has-chat > .composer .send-btn::after {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
  }
  .rank-row { grid-template-columns: 76px minmax(0, 1fr) 38px; }
  .summary-card { min-height: 260px; }
}

/* ===== v20 hotfix2: final layout guard ===== */
.side-nav .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.side-nav .nav-item::before {
  content: none !important;
  display: none !important;
}
.nav-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
.nav-item.active .nav-icon {
  color: #1d4ed8 !important;
}
body.sidebar-collapsed .nav-item {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.sidebar-collapsed .nav-icon {
  margin: 0 !important;
}

#chatPanel {
  overflow: hidden !important;
}
#chatPanel > .sync-toolbar,
#chatPanel > .quick-actions,
#chatPanel > .chat-pager,
#chatPanel > .composer {
  z-index: 6 !important;
}
#chatPanel > .chat-messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 170px !important;
}
#chatPanel > .chat-pager {
  width: min(860px, calc(100% - 96px)) !important;
  margin: 6px auto 102px !important;
  min-height: 0 !important;
  padding: 0 !important;
}
#chatPanel > .chat-pager:empty {
  display: none !important;
}
#chatPanel > form.composer,
#chatPanel:not(.has-chat) > form.composer,
#chatPanel.has-chat > form.composer {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  min-height: 62px !important;
  max-height: 92px !important;
  padding: 9px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #d8e2ee !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, .12) !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 26px !important;
  transform: translateX(-50%) !important;
  width: min(860px, calc(100% - 96px)) !important;
  z-index: 12 !important;
}
#chatPanel > form.composer .mode-select,
#chatPanel.has-chat > form.composer .mode-select {
  grid-column: 1 !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 26px 0 18px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}
#chatPanel > form.composer textarea,
#chatPanel.has-chat > form.composer textarea {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 78px !important;
  box-sizing: border-box !important;
  padding: 10px 0 !important;
  line-height: 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
}
#chatPanel > form.composer .send-btn,
#chatPanel.has-chat > form.composer .send-btn {
  grid-column: 3 !important;
  position: relative !important;
  display: block !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .25) !important;
  overflow: hidden !important;
  transform: none !important;
  opacity: 1 !important;
}
#chatPanel > form.composer .send-btn::before,
#chatPanel.has-chat > form.composer .send-btn::before {
  content: none !important;
  display: none !important;
}
#chatPanel > form.composer .send-btn::after,
#chatPanel.has-chat > form.composer .send-btn::after {
  content: '↑' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 44px !important;
  text-align: center !important;
  transform: none !important;
}
#chatPanel > form.composer .send-btn:hover,
#chatPanel.has-chat > form.composer .send-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%) !important;
}
#chatPanel > form.composer .send-btn:disabled,
#chatPanel.has-chat > form.composer .send-btn:disabled {
  background: #dbe3ef !important;
  cursor: wait !important;
  box-shadow: none !important;
}
#chatPanel > form.composer .send-btn:disabled::after,
#chatPanel.has-chat > form.composer .send-btn:disabled::after {
  color: #64748b !important;
}

.logs-list {
  max-height: calc(100vh - 360px) !important;
  overflow: auto !important;
  padding-right: 4px !important;
}
.logs-pager,
.chat-pager {
  flex-wrap: wrap !important;
}
.logs-pager button,
.chat-pager button {
  background: #fff !important;
}

@media (max-width: 760px) {
  #chatPanel > .chat-pager {
    width: calc(100% - 22px) !important;
    margin-bottom: 96px !important;
    font-size: 12px !important;
  }
  #chatPanel > form.composer,
  #chatPanel:not(.has-chat) > form.composer,
  #chatPanel.has-chat > form.composer {
    grid-template-columns: 82px minmax(0, 1fr) 40px !important;
    gap: 8px !important;
    min-height: 56px !important;
    padding: 8px !important;
    width: calc(100% - 20px) !important;
    bottom: 14px !important;
  }
  #chatPanel > form.composer .mode-select,
  #chatPanel.has-chat > form.composer .mode-select {
    width: 82px !important;
    min-width: 82px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 13px !important;
    font-size: 14px !important;
  }
  #chatPanel > form.composer textarea,
  #chatPanel.has-chat > form.composer textarea {
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 0 !important;
    font-size: 15px !important;
  }
  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    font-size: 22px !important;
  }
  #chatPanel > .chat-messages {
    padding-bottom: 150px !important;
  }
  .logs-list { max-height: none !important; }
}

/* v20 hotfix3：对话宽度、发送按钮、图表数据标签最终覆盖 */
#chatPanel > .chat-messages {
  box-sizing: border-box !important;
  width: min(860px, calc(100% - 96px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#chatPanel > .chat-messages .message {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
#chatPanel > .chat-messages .bubble {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
#chatPanel > .chat-messages .message.user .bubble {
  max-width: min(74%, 620px) !important;
  margin-left: auto !important;
}
#chatPanel > .chat-messages .message.assistant .bubble {
  max-width: 100% !important;
}
#chatPanel > form.composer,
#chatPanel:not(.has-chat) > form.composer,
#chatPanel.has-chat > form.composer {
  width: min(860px, calc(100% - 96px)) !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px !important;
  overflow: hidden !important;
}
#chatPanel > form.composer .send-btn,
#chatPanel.has-chat > form.composer .send-btn {
  align-self: center !important;
  justify-self: end !important;
  display: block !important;
  position: relative !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: transparent !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .24) !important;
  overflow: hidden !important;
}
#chatPanel > form.composer .send-btn::before,
#chatPanel.has-chat > form.composer .send-btn::before { content: none !important; display: none !important; }
#chatPanel > form.composer .send-btn::after,
#chatPanel.has-chat > form.composer .send-btn::after {
  content: '↑' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}
.chart-value-label,
.chart-value {
  fill: #334155;
  font-size: 12px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255,255,255,.92);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.nav-item .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
}
@media (max-width: 760px) {
  #chatPanel > .chat-messages { width: calc(100% - 22px) !important; }
  #chatPanel > .chat-messages .message.user .bubble { max-width: 84% !important; }
  #chatPanel > form.composer,
  #chatPanel:not(.has-chat) > form.composer,
  #chatPanel.has-chat > form.composer {
    width: calc(100% - 20px) !important;
    grid-template-columns: 82px minmax(0, 1fr) 40px !important;
  }
  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 22px !important;
  }
}

/* qingyun-20-hotfix3: 对话宽度、发送按钮、管理员标签和汇总图表最终收敛 */
@media (min-width: 761px) {
  .nav-item[data-panel="summaryPanel"]::before { content: '▥' !important; }
  body.role-employee .nav-item[data-panel="summaryPanel"],
  body.role-employee .nav-item[data-panel="usersPanel"],
  body.role-employee .nav-item[data-panel="settingsPanel"],
  body.role-employee .nav-item[data-panel="logsPanel"],
  body.role-employee .desktop-side-extra { display: none !important; }

  #summaryPanel.panel.active,
  #recordsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active,
  #logsPanel.panel.active {
    padding: 24px 30px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
  }

  #chatPanel.has-chat > .chat-messages {
    width: min(820px, calc(100% - 140px)) !important;
    max-width: min(820px, calc(100% - 140px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  #chatPanel > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel.has-chat > .composer {
    width: min(820px, calc(100% - 140px)) !important;
    max-width: min(820px, calc(100% - 140px)) !important;
    grid-template-columns: 104px minmax(0, 1fr) 44px !important;
    box-sizing: border-box !important;
  }
  #chatPanel .message {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #chatPanel .message.user { justify-content: flex-end !important; }
  #chatPanel .message.assistant { justify-content: flex-start !important; }
  #chatPanel .message.user .bubble {
    max-width: min(620px, 76%) !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }
  #chatPanel .message.assistant .bubble {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }

  #chatPanel .send-btn,
  #chatPanel > .composer .send-btn,
  #chatPanel.has-chat > .composer .send-btn {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3b82f6, #6457f6) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .24) !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  #chatPanel .send-btn::after,
  #chatPanel > .composer .send-btn::after,
  #chatPanel.has-chat > .composer .send-btn::after {
    content: '↑' !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  #chatPanel .send-btn:disabled,
  #chatPanel.has-chat > .composer .send-btn:disabled {
    background: #dbe1ea !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }
  #chatPanel .send-btn:disabled::after { color: #64748b !important; }
}

@media (max-width: 760px) {
  body.role-employee .nav-item[data-panel="summaryPanel"],
  body.role-employee .nav-item[data-panel="usersPanel"],
  body.role-employee .nav-item[data-panel="settingsPanel"],
  body.role-employee .nav-item[data-panel="logsPanel"],
  body.role-employee .desktop-side-extra { display: none !important; }

  #chatPanel.has-chat > .chat-messages {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  #chatPanel > .composer,
  #chatPanel:not(.has-chat) > .composer,
  #chatPanel.has-chat > .composer {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    grid-template-columns: 72px minmax(0, 1fr) 38px !important;
    box-sizing: border-box !important;
  }
  #chatPanel .message,
  #chatPanel .bubble {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }
  #chatPanel .message.user .bubble { max-width: 86% !important; }
  #chatPanel .message.assistant .bubble { width: 100% !important; }
  #chatPanel .send-btn,
  #chatPanel .send-btn::after {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
  }
  #chatPanel .send-btn {
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #3b82f6, #6457f6) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, .22) !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }
  #chatPanel .send-btn::after {
    content: '↑' !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 21px !important;
    font-weight: 700 !important;
  }
}

.pager,
.chat-pager,
.logs-pager {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.pager button {
  min-height: 32px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #334155 !important;
  font-weight: 700 !important;
}
.pager button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
.pager span {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.chart-value {
  fill: #334155;
  font-size: 11px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.time-chart svg { overflow: visible !important; }

/* ===== v20 hotfix4: export-only reply, nicer pagers, compact summary chart ===== */
.pager,
#recordsPager,
#logsPager,
#chatPager {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 16px 8px 4px !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.pager:empty,
#recordsPager:empty,
#logsPager:empty,
#chatPager:empty {
  display: none !important;
}
.pager .pager-btn,
.pager button,
#recordsPager button,
#logsPager button,
#chatPager button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 92px !important;
  height: 34px !important;
  padding: 0 15px !important;
  border: 1px solid #d7e2ef !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  color: #24446f !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .06) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.pager .pager-btn:hover:not(:disabled),
.pager button:hover:not(:disabled),
#recordsPager button:hover:not(:disabled),
#logsPager button:hover:not(:disabled),
#chatPager button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: #a9c5ea !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .12) !important;
}
.pager .pager-btn:disabled,
.pager button:disabled,
#recordsPager button:disabled,
#logsPager button:disabled,
#chatPager button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.pager .pager-status,
#recordsPager .pager-status,
#logsPager .pager-status,
#chatPager .pager-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: #49627f !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
#chatPanel > .chat-pager {
  width: min(820px, calc(100% - 120px)) !important;
  margin: 8px auto 98px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 7 !important;
}
#recordsPanel .table-card,
#logsPanel .table-card {
  padding-bottom: 14px !important;
}
#recordsPanel .records-list,
#logsPanel .logs-list {
  border-bottom: 1px solid #edf2f7 !important;
}
.summary-grid {
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr) !important;
  gap: 16px !important;
}
.summary-card {
  min-height: 250px !important;
  padding: 18px !important;
}
.summary-card.wide {
  min-height: 270px !important;
}
.ranking-chart,
.time-chart {
  min-height: 190px !important;
}
.time-chart {
  max-height: 250px !important;
  padding: 4px 0 0 !important;
}
.time-chart svg {
  max-height: 230px !important;
}
.chart-axis { font-size: 11px !important; }
.chart-value {
  fill: #1e293b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.chart-legend {
  margin-top: 6px !important;
  font-size: 12px !important;
}
#chatPanel .message,
#chatPanel.has-chat .message {
  width: min(820px, calc(100% - 120px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
#chatPanel .message.user {
  justify-content: flex-end !important;
}
#chatPanel .message .bubble {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
#chatPanel .message.user .bubble {
  max-width: min(560px, 78%) !important;
}
#chatPanel .message.assistant .bubble {
  max-width: 100% !important;
}
#chatPanel > form.composer,
#chatPanel:not(.has-chat) > form.composer,
#chatPanel.has-chat > form.composer {
  width: min(820px, calc(100% - 120px)) !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px !important;
  overflow: hidden !important;
}
#chatPanel > form.composer .send-btn,
#chatPanel.has-chat > form.composer .send-btn {
  position: relative !important;
  display: block !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
#chatPanel > form.composer .send-btn::after,
#chatPanel.has-chat > form.composer .send-btn::after {
  content: '↑' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 44px !important;
}
@media (max-width: 980px) {
  .summary-grid { grid-template-columns: 1fr !important; }
  .summary-card,
  .summary-card.wide { min-height: 230px !important; }
  .time-chart { max-height: 230px !important; }
}
@media (max-width: 760px) {
  .pager,
  #recordsPager,
  #logsPager,
  #chatPager {
    gap: 7px !important;
    padding-top: 12px !important;
    font-size: 12px !important;
  }
  .pager .pager-btn,
  .pager button,
  #recordsPager button,
  #logsPager button,
  #chatPager button {
    min-width: 76px !important;
    height: 32px !important;
    padding: 0 10px !important;
  }
  .pager .pager-status,
  #recordsPager .pager-status,
  #logsPager .pager-status,
  #chatPager .pager-status {
    width: 100% !important;
    justify-content: center !important;
    order: -1 !important;
    min-height: 30px !important;
  }
  #chatPanel .message,
  #chatPanel.has-chat .message,
  #chatPanel > .chat-pager,
  #chatPanel > form.composer,
  #chatPanel:not(.has-chat) > form.composer,
  #chatPanel.has-chat > form.composer {
    width: calc(100% - 24px) !important;
  }
  #chatPanel .message.user .bubble { max-width: 86% !important; }
  .summary-card,
  .summary-card.wide { min-height: 210px !important; padding: 14px !important; }
  .ranking-chart,
  .time-chart { min-height: 170px !important; }
  .time-chart svg { max-height: 200px !important; }
}


/* qingyun-20-hotfix4: final export/pager/chart polish */
.pager,
#recordsPager,
#logsPager,
#chatPager {
  gap: 10px !important;
  padding: 10px 12px !important;
  margin: 16px auto 6px !important;
  width: fit-content !important;
  max-width: 100% !important;
  border: 1px solid rgba(203, 213, 225, .78) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.07) !important;
  backdrop-filter: blur(8px) !important;
}
.pager .pager-btn,
.pager button,
#recordsPager button,
#logsPager button,
#chatPager button {
  gap: 5px !important;
  min-width: 82px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #eef6ff 0%, #f6f3ff 100%) !important;
  color: #1e3a8a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 0 1px rgba(147,197,253,.48) !important;
}
.pager .pager-btn:hover:not(:disabled),
.pager button:hover:not(:disabled),
#recordsPager button:hover:not(:disabled),
#logsPager button:hover:not(:disabled),
#chatPager button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(59,130,246,.13), inset 0 0 0 1px rgba(96,165,250,.65) !important;
}
.pager .pager-status,
#recordsPager .pager-status,
#logsPager .pager-status,
#chatPager .pager-status {
  min-height: 34px !important;
  padding: 0 16px !important;
  background: #f8fbff !important;
  color: #475569 !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
#recordsPanel .records-list {
  max-height: min(58vh, 620px) !important;
  overflow: auto !important;
  padding-right: 4px !important;
}
#recordsPanel .records-list.empty { max-height: none !important; }
.message .download-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.2) !important;
}
.message .download-link::before { content: '⬇'; font-size: 14px; }
.summary-grid {
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.summary-card {
  min-height: 0 !important;
  padding: 16px !important;
}
.summary-card.wide { min-height: 0 !important; }
.ranking-chart { min-height: 190px !important; max-height: 300px !important; overflow: auto !important; }
.time-chart { min-height: 0 !important; max-height: 225px !important; padding: 2px 0 0 !important; }
.time-chart svg { height: 210px !important; max-height: 210px !important; }
.chart-value { font-size: 10px !important; stroke-width: 2.5px !important; }
.chart-axis { font-size: 11px !important; }
.chart-legend { margin-top: 4px !important; font-size: 12px !important; }
@media (max-width: 980px) {
  .summary-grid { grid-template-columns: 1fr !important; }
  .time-chart { max-height: 210px !important; }
  .time-chart svg { height: 195px !important; max-height: 195px !important; }
}
@media (max-width: 760px) {
  .pager,
  #recordsPager,
  #logsPager,
  #chatPager {
    width: calc(100% - 16px) !important;
    border-radius: 18px !important;
    padding: 8px !important;
  }
  .pager .pager-status,
  #recordsPager .pager-status,
  #logsPager .pager-status,
  #chatPager .pager-status {
    order: -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .pager .pager-btn,
  .pager button,
  #recordsPager button,
  #logsPager button,
  #chatPager button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #recordsPanel .records-list { max-height: none !important; }
  .time-chart svg { height: 180px !important; max-height: 180px !important; }
}

/* qingyun-20-hotfix4: export simplification, pagination polish, compact summary chart */
:root {
  --qy-soft-border: rgba(148, 163, 184, .22);
  --qy-soft-blue: rgba(37, 99, 235, .08);
}

/* 分页统一美化：对话、记录、日志都用同一套胶囊样式 */
.pager,
.chat-pager,
.logs-pager,
#recordsPager {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
  margin: 12px auto 0 !important;
  border-top: 1px solid rgba(226, 232, 240, .78) !important;
  color: #64748b !important;
  font-size: 13px !important;
}
.pager:empty,
.chat-pager:empty,
.logs-pager:empty,
#recordsPager:empty {
  display: none !important;
}
.pager .pager-btn,
.pager button,
.chat-pager .pager-btn,
.logs-pager .pager-btn,
#recordsPager .pager-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .30) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  color: #1e3a8a !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .06) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.pager .pager-btn:hover:not(:disabled),
.pager button:hover:not(:disabled),
.chat-pager .pager-btn:hover:not(:disabled),
.logs-pager .pager-btn:hover:not(:disabled),
#recordsPager .pager-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #eaf2ff, #f5f3ff) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .14) !important;
  transform: translateY(-1px) !important;
}
.pager .pager-btn:disabled,
.pager button:disabled,
.chat-pager .pager-btn:disabled,
.logs-pager .pager-btn:disabled,
#recordsPager .pager-btn:disabled {
  background: #f1f5f9 !important;
  color: #a7b2c3 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.pager .pager-status,
.pager span,
.chat-pager .pager-status,
.logs-pager .pager-status,
#recordsPager .pager-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* 记录列表区域：结果滚动，分页固定在卡片底部，避免超出屏幕 */
#recordsPanel .table-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: calc(100vh - 290px) !important;
  overflow: hidden !important;
}
#recordsPanel .records-list {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
}
#recordsPanel #recordsPager {
  flex: 0 0 auto !important;
}
.records-result-head {
  flex: 0 0 auto !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(226, 232, 240, .78) !important;
}

/* 记录汇总：减小分时曲线体量，让图表更轻、更稳 */
.summary-grid {
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) !important;
  gap: 16px !important;
}
.summary-card {
  min-height: 250px !important;
  padding: 18px !important;
}
.summary-card.wide {
  min-height: 250px !important;
}
.ranking-chart {
  min-height: 190px !important;
}
.time-chart {
  min-height: 168px !important;
  max-height: 198px !important;
  padding: 4px 0 0 !important;
  overflow: visible !important;
}
.time-chart svg {
  width: 100% !important;
  height: 168px !important;
  max-height: 168px !important;
  display: block !important;
}
.chart-bg {
  fill: #fcfdff !important;
}
.chart-grid {
  stroke: rgba(203, 213, 225, .72) !important;
}
.chart-axis {
  fill: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.chart-value,
.chart-value-label {
  fill: #1e293b !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  paint-order: stroke !important;
  stroke: rgba(255,255,255,.96) !important;
  stroke-width: 3px !important;
}
.chart-legend {
  margin-top: 6px !important;
  font-size: 12px !important;
  gap: 7px 12px !important;
}
.rank-row {
  margin: 9px 0 !important;
  font-size: 13px !important;
}
.rank-bar-track {
  height: 10px !important;
}

/* Excel 下载按钮更突出，聊天气泡不再展示长明细时看起来更干净 */
.download-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #2563eb, #6457f6) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18) !important;
}
.download-link::before {
  content: '⬇' !important;
  font-size: 13px !important;
}

@media (max-width: 980px) {
  #recordsPanel .table-card { max-height: none !important; }
  .summary-grid { grid-template-columns: 1fr !important; }
  .summary-card,
  .summary-card.wide { min-height: auto !important; }
  .time-chart,
  .time-chart svg { height: 158px !important; max-height: 158px !important; }
}

@media (max-width: 760px) {
  .pager,
  .chat-pager,
  .logs-pager,
  #recordsPager {
    gap: 6px !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
  }
  .pager .pager-status,
  .pager span,
  .chat-pager .pager-status,
  .logs-pager .pager-status,
  #recordsPager .pager-status {
    width: auto !important;
    max-width: calc(100% - 88px) !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .pager .pager-btn,
  .pager button,
  .chat-pager .pager-btn,
  .logs-pager .pager-btn,
  #recordsPager .pager-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 18px !important;
  }
  .time-chart,
  .time-chart svg {
    height: 150px !important;
    max-height: 150px !important;
  }
  .summary-card { padding: 14px !important; }
}

/* qingyun-20-hotfix9: mobile layout, sync panel collapsed by default, latest visual polish */
#chatPanel > .sync-panel-wrap {
  width: min(860px, calc(100% - 96px)) !important;
  margin: 8px auto 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 9 !important;
  flex: 0 0 auto !important;
}
.sync-toggle-btn {
  width: 100% !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1px solid rgba(191, 219, 254, .95) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(239,246,255,.98), rgba(224,242,254,.92)) !important;
  color: #1e3a8a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 10px 28px rgba(30, 64, 175, .08) !important;
  cursor: pointer !important;
}
.sync-toggle-btn:hover {
  background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .13) !important;
}
.sync-toggle-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #2563eb !important;
  box-shadow: inset 0 0 0 1px rgba(191,219,254,.9) !important;
}
.sync-toggle-btn small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.sync-panel-wrap.collapsed .sync-toolbar {
  display: none !important;
}
#chatPanel .sync-panel-wrap .sync-toolbar,
#chatPanel.has-chat .sync-panel-wrap .sync-toolbar {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 1fr) auto !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08) !important;
}
#chatPanel .sync-panel-wrap .sync-toolbar .sync-msg {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  padding-left: 2px !important;
}

/* 对话内容与输入框保持同宽，避免文案越界 */
#chatPanel > .chat-messages {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#chatPanel > .chat-messages .message {
  width: min(860px, calc(100% - 96px)) !important;
  max-width: min(860px, calc(100% - 96px)) !important;
  box-sizing: border-box !important;
}
#chatPanel > .chat-messages .message.user {
  display: flex !important;
  justify-content: flex-end !important;
}
#chatPanel > .chat-messages .message.assistant {
  display: flex !important;
  justify-content: flex-start !important;
}
#chatPanel > .chat-messages .bubble {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  width: min(860px, calc(100% - 96px)) !important;
}

/* 发送按钮最终兜底：始终在输入框内，始终显示向上箭头 */
#chatPanel > form.composer .send-btn,
#chatPanel.has-chat > form.composer .send-btn,
#chatPanel:not(.has-chat) > form.composer .send-btn {
  justify-self: center !important;
  align-self: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #2563eb 0%, #6547f4 100%) !important;
}
#chatPanel > form.composer .send-btn::after,
#chatPanel.has-chat > form.composer .send-btn::after,
#chatPanel:not(.has-chat) > form.composer .send-btn::after {
  content: '↑' !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 44px !important;
}

@media (min-width: 761px) {
  #recordsPanel .records-list {
    scroll-behavior: smooth !important;
  }
}

@media (max-width: 760px) {
  html, body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .app-shell {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    height: calc(100dvh - 116px) !important;
    min-height: 560px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 8px 7px !important;
    gap: 7px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, .84) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
  }
  .side-brand {
    min-height: 34px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .side-brand .spark {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }
  .side-brand strong {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .side-brand span,
  .desktop-side-extra,
  .side-footer .user-chip div small {
    display: none !important;
  }
  .sidebar-toggle {
    margin-left: auto !important;
    width: 32px !important;
    height: 32px !important;
  }
  .side-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .side-nav::-webkit-scrollbar { display: none !important; }
  .side-nav .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 62px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
  }
  .side-nav .nav-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 15px !important;
    line-height: 18px !important;
  }
  .desktop-label { display: none !important; }
  .mobile-label {
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    letter-spacing: 0 !important;
  }
  .side-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 2px !important;
  }
  .side-footer .user-chip {
    min-width: 0 !important;
    padding: 0 !important;
  }
  .side-footer .avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .side-footer .user-chip b {
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    font-size: 12px !important;
  }
  #logoutBtn {
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  #chatPanel.panel.active {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  #chatPanel .panel-header {
    display: none !important;
  }
  #chatPanel > .sync-panel-wrap {
    width: calc(100% - 18px) !important;
    margin: 8px auto 6px !important;
  }
  .sync-toggle-btn {
    min-height: 38px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }
  .sync-toggle-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
  }
  #chatPanel .sync-panel-wrap .sync-toolbar,
  #chatPanel.has-chat .sync-panel-wrap .sync-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
    max-height: min(330px, calc(100dvh - 260px)) !important;
    overflow: auto !important;
  }
  .sync-panel-wrap.collapsed .sync-toolbar {
    display: none !important;
  }
  #chatPanel .sync-panel-wrap .sync-toolbar .secondary-btn {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
    width: 100% !important;
  }
  #chatPanel .sync-panel-wrap .sync-toolbar .sync-msg {
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .quick-actions {
    flex: 0 0 auto !important;
    width: calc(100% - 18px) !important;
    margin: 6px auto 4px !important;
    padding: 0 0 4px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .quick-actions button {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  #chatPanel > .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 10px 10px 116px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
  }
  #chatPanel > .chat-messages .message {
    width: 100% !important;
    max-width: 100% !important;
  }
  #chatPanel > .chat-messages .bubble {
    max-width: min(88%, 620px) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  #chatPanel > .chat-messages .message.assistant .bubble {
    max-width: 92% !important;
  }
  #chatPanel > .chat-pager {
    flex: 0 0 auto !important;
    position: relative !important;
    width: calc(100% - 22px) !important;
    margin: 2px auto 76px !important;
    padding: 8px 4px !important;
    z-index: 8 !important;
  }
  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    min-height: 54px !important;
    max-height: 76px !important;
    grid-template-columns: 76px minmax(0, 1fr) 38px !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 999px !important;
    z-index: 80 !important;
  }
  #chatPanel > form.composer .mode-select,
  #chatPanel.has-chat > form.composer .mode-select {
    width: 76px !important;
    min-width: 76px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 22px 0 12px !important;
    font-size: 13px !important;
    line-height: 38px !important;
  }
  #chatPanel > form.composer textarea,
  #chatPanel.has-chat > form.composer textarea {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 62px !important;
    padding: 7px 0 !important;
    font-size: 15px !important;
    line-height: 24px !important;
  }
  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    font-size: 22px !important;
  }

  #recordsPanel.panel.active,
  #summaryPanel.panel.active,
  #logsPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active {
    height: 100% !important;
    overflow-y: auto !important;
    padding: 14px 10px 90px !important;
  }
  #recordsPanel .records-toolbar {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    padding: 14px !important;
  }
  #recordsPanel .records-toolbar label,
  #recordsPanel .records-toolbar .toolbar-actions,
  #recordsPanel .records-toolbar .form-msg {
    grid-column: auto !important;
  }
  #recordsPanel .records-toolbar label:nth-of-type(3),
  #recordsPanel .records-toolbar label:nth-of-type(4),
  #recordsPanel .records-toolbar .toolbar-actions,
  #recordsPanel .records-toolbar .form-msg {
    grid-column: 1 / -1 !important;
  }
  #recordsPanel .table-card {
    max-height: none !important;
    overflow: visible !important;
  }
  #recordsPanel .records-list {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* qingyun-20-hotfix10: sync panel click fix and mobile compact overlay */
#chatPanel > .sync-panel-wrap,
#chatPanel.has-chat > .sync-panel-wrap {
  position: relative !important;
  z-index: 70 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
#syncPanelToggle,
.sync-toggle-btn {
  position: relative !important;
  z-index: 72 !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.sync-panel-wrap.collapsed {
  max-height: 52px !important;
  overflow: visible !important;
}
.sync-panel-wrap.collapsed .sync-toolbar,
#chatPanel .sync-panel-wrap.collapsed .sync-toolbar,
#chatPanel.has-chat .sync-panel-wrap.collapsed .sync-toolbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
#chatPanel > .chat-messages {
  position: relative !important;
  z-index: 1 !important;
}

@media (min-width: 761px) {
  #chatPanel > .sync-panel-wrap {
    width: min(860px, calc(100% - 96px)) !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }
  #chatPanel > .sync-panel-wrap.collapsed {
    margin-bottom: 8px !important;
  }
  #chatPanel > .sync-panel-wrap:not(.collapsed) .sync-toolbar {
    position: static !important;
    display: grid !important;
  }
}

@media (max-width: 760px) {
  #chatPanel > .sync-panel-wrap,
  #chatPanel.has-chat > .sync-panel-wrap {
    flex: 0 0 42px !important;
    width: calc(100% - 20px) !important;
    margin: 6px auto 4px !important;
    max-height: 42px !important;
  }
  #chatPanel > .sync-panel-wrap:not(.collapsed),
  #chatPanel.has-chat > .sync-panel-wrap:not(.collapsed) {
    max-height: 42px !important;
    margin-bottom: 4px !important;
  }
  #syncPanelToggle,
  .sync-toggle-btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .08) !important;
  }
  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar,
  #chatPanel.has-chat .sync-panel-wrap:not(.collapsed) .sync-toolbar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 48px !important;
    z-index: 120 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: min(260px, calc(100dvh - 330px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: auto !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(219, 234, 254, .95) !important;
    box-shadow: 0 18px 38px rgba(15,23,42,.16) !important;
  }
  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar label span {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }
  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar input,
  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar select {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }
  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar .secondary-btn {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
    height: 38px !important;
  }
  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar .sync-msg {
    grid-column: 1 / -1 !important;
    max-height: 66px !important;
    overflow: auto !important;
  }
  #chatPanel > .quick-actions {
    margin-top: 6px !important;
  }
  #chatPanel > .chat-messages {
    padding-top: 8px !important;
  }
}

/* hotfix13: 操作记录筛选与汇总柱状图 */
.operation-filter-label select {
  min-width: 150px;
}
.operation-type-chart {
  min-height: 190px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 10px 4px 4px;
}
.operation-type-chart.empty {
  align-items: center;
  color: var(--muted);
}
.operation-bars {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, 1fr));
  gap: 14px;
  align-items: end;
}
.operation-bar-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.operation-bar-count {
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}
.operation-bar-wrap {
  width: 38px;
  height: 124px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fbff, #eef4ff);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
}
.operation-bar-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa, #7c3aed);
  box-shadow: 0 10px 20px rgba(37, 99, 235, .16);
}
.operation-bar-label {
  max-width: 78px;
  min-height: 32px;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  color: #475569;
  word-break: break-word;
}
@media (min-width: 761px) {
  .summary-grid {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.1fr) minmax(520px, 3fr) !important;
  }
  .summary-card.wide {
    grid-column: auto !important;
  }
}
@media (max-width: 760px) {
  .operation-bars {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: 12px 8px;
  }
  .operation-type-chart {
    min-height: 220px;
  }
  .operation-bar-wrap {
    height: 100px;
    width: 34px;
  }
  .operation-filter-label select {
    min-width: 0;
  }
}

/* hotfix13 final layout guard: 新增操作筛选后，避免工具栏换行错乱 */
@media (min-width: 761px) {
  #recordsPanel .records-toolbar {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto !important;
  }
  #summaryPanel .records-toolbar {
    grid-template-columns: repeat(6, minmax(120px, 1fr)) auto !important;
  }
  #recordsPanel .records-toolbar .toolbar-actions,
  #summaryPanel .records-toolbar .toolbar-actions {
    grid-column: auto !important;
  }
}
@media (max-width: 760px) {
  #recordsPanel .records-toolbar label:nth-of-type(3),
  #recordsPanel .records-toolbar label:nth-of-type(4),
  #recordsPanel .records-toolbar label:nth-of-type(5),
  #summaryPanel .records-toolbar label:nth-of-type(3),
  #summaryPanel .records-toolbar label:nth-of-type(4),
  #summaryPanel .records-toolbar label:nth-of-type(5),
  #summaryPanel .records-toolbar label:nth-of-type(6) {
    grid-column: 1 / -1 !important;
  }
}

/* hotfix18: 同步失败详情展示，避免只看到浏览器 500 */
.sync-detail {
  grid-column: 1 / -1;
  display: none;
  margin: 8px 0 0;
  padding: 12px 14px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff7f7;
  color: #7f1d1d;
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}
.sync-detail[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .sync-detail {
    max-height: 180px;
    font-size: 11px;
    padding: 10px 12px;
  }
}

/* hotfix22: 用户配置页分组编辑布局 */
#usersPanel .user-admin-layout {
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) 1fr !important;
  gap: 14px !important;
}
#usersPanel .user-row.user-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
#usersPanel .user-card-head {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto auto !important;
  align-items: center !important;
}
#usersPanel .user-edit-form.collapsed {
  display: none !important;
}
#usersPanel .permission-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#usersPanel .permission-scope {
  display: grid !important;
  grid-template-columns: minmax(180px, 260px) 1fr !important;
}
@media (max-width: 980px) {
  #usersPanel .user-admin-layout,
  #usersPanel .user-card-head,
  #usersPanel .permission-grid,
  #usersPanel .permission-scope {
    grid-template-columns: 1fr !important;
  }
}

/* sign deduct embedded dashboard */
.sign-deduct-panel {
  padding: 0 !important;
  min-height: calc(100vh - 24px);
  overflow: hidden;
}

.sign-deduct-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 24px);
  min-height: 760px;
  border: 0;
  background: #0f1528;
}

@media (max-width: 760px) {
  .sign-deduct-frame {
    height: calc(100vh - 72px);
    min-height: 680px;
  }
}

/* google-polish-20260620: final visual layer */
:root {
  --g-bg: #f8fafd;
  --g-surface: #ffffff;
  --g-surface-soft: #f1f5f9;
  --g-text: #202124;
  --g-muted: #5f6368;
  --g-border: #e5e8ef;
  --g-blue: #1a73e8;
  --g-blue-soft: #e8f0fe;
  --g-green: #188038;
  --g-red: #d93025;
  --g-yellow: #f9ab00;
  --g-shadow: 0 10px 30px rgba(60, 64, 67, .08);
}

html,
body {
  background: var(--g-bg) !important;
  color: var(--g-text) !important;
  letter-spacing: 0 !important;
}

body {
  font-family: "Google Sans", Inter, Arial, "Microsoft YaHei", sans-serif !important;
}

input,
textarea,
select {
  border-color: var(--g-border) !important;
  background: #fff !important;
  color: var(--g-text) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #8ab4f8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .12) !important;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn,
.quick-actions button,
.download-link {
  letter-spacing: 0 !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.primary-btn,
.send-btn {
  background: var(--g-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, .22) !important;
}

.secondary-btn {
  color: #174ea6 !important;
  background: var(--g-blue-soft) !important;
  border: 1px solid transparent !important;
}

.ghost-btn,
.quick-actions button {
  color: #3c4043 !important;
  background: #f1f3f4 !important;
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.quick-actions button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(60, 64, 67, .10) !important;
}

.app-shell {
  background: var(--g-bg) !important;
}

@media (min-width: 761px) {
  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr) !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .sidebar {
    width: auto !important;
    height: 100vh !important;
    padding: 18px 10px 14px !important;
    border-right: 1px solid var(--g-border) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: none !important;
  }

  .side-brand {
    padding: 0 38px 18px 8px !important;
  }

  .spark {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: conic-gradient(from 0deg, #4285f4, #34a853, #fbbc04, #ea4335, #4285f4) !important;
  }

  .side-brand strong,
  .brand-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
  }

  .nav-item {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #3c4043 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .nav-item:hover {
    background: #f1f3f4 !important;
    transform: none !important;
  }

  .nav-item.active {
    color: #174ea6 !important;
    background: #e8f0fe !important;
  }

  .side-text-row {
    border-radius: 999px !important;
    color: #3c4043 !important;
  }

  .side-text-row:hover {
    background: #f1f3f4 !important;
  }

  .workspace {
    margin-left: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%) !important;
    overflow: hidden !important;
  }

  .panel {
    height: 100vh !important;
    min-height: 0 !important;
    padding: 24px 30px !important;
    overflow: auto !important;
    gap: 16px !important;
  }

  #chatPanel.panel.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 24px 30px !important;
    overflow: hidden !important;
    gap: 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  }

  #chatPanel .panel-header {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 0 2px !important;
  }

  #chatPanel.has-chat .panel-header {
    display: none !important;
  }

  #chatPanel .panel-header h1 {
    color: #3c4043 !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  #chatPanel > .sync-panel-wrap {
    width: min(940px, 100%) !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    z-index: 8 !important;
  }

  #chatPanel .sync-panel-wrap .sync-toolbar,
  #chatPanel.has-chat .sync-panel-wrap .sync-toolbar {
    position: static !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    grid-template-columns: 150px 150px minmax(190px, 1fr) auto !important;
  }

  #chatPanel .quick-actions {
    width: min(940px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  #chatPanel > .chat-messages,
  #chatPanel.has-chat > .chat-messages,
  body.role-admin #chatPanel.has-chat > .chat-messages,
  body.role-employee #chatPanel.has-chat > .chat-messages {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: min(940px, 100%) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 2px 116px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #chatPanel > .chat-messages .message {
    width: 100% !important;
    max-width: 100% !important;
  }

  #chatPanel .message.user .bubble {
    color: #202124 !important;
    background: #e8f0fe !important;
    border: 1px solid #d2e3fc !important;
    border-radius: 18px !important;
  }

  #chatPanel .message.assistant .bubble {
    color: var(--g-text) !important;
    background: #ffffff !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 8px rgba(60, 64, 67, .05) !important;
  }

  #chatPanel .welcome-message .bubble {
    color: var(--g-muted) !important;
    background: #fff !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 24px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(820px, calc(100% - 96px)) !important;
    height: 58px !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) 44px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 7px 9px 7px 12px !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 16px 42px rgba(60, 64, 67, .16) !important;
    z-index: 30 !important;
    overflow: hidden !important;
  }

  #chatPanel:not(.has-chat) > form.composer {
    bottom: 72px !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 104px !important;
    min-width: 104px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: #f1f3f4 !important;
    border-color: transparent !important;
    color: #3c4043 !important;
    font-weight: 600 !important;
  }

  #chatPanel > form.composer textarea {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 78px !important;
    padding: 9px 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 24px !important;
    font-size: 15px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
  }

  #recordsPanel.panel.active,
  #summaryPanel.panel.active,
  #usersPanel.panel.active,
  #settingsPanel.panel.active,
  #logsPanel.panel.active {
    padding: 26px 32px !important;
    background: var(--g-bg) !important;
  }
}

.config-card,
.record-item,
.user-row,
.log-item,
.user-overview-grid > div,
.user-edit-section,
.permission-block,
.permission-scope,
.records-toolbar,
.logs-toolbar,
.summary-card,
.sync-toolbar {
  border-radius: 8px !important;
  border: 1px solid var(--g-border) !important;
  background: var(--g-surface) !important;
  box-shadow: var(--g-shadow) !important;
}

.panel-header.compact h1,
.config-card h2,
.table-head h2 {
  color: var(--g-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.eyebrow {
  color: var(--g-blue) !important;
  letter-spacing: .08em !important;
}

.pill,
.role-badge,
.status-badge,
.record-meta span,
.log-meta span,
.user-permission-summary span {
  border-radius: 999px !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  border: 0 !important;
}

.status-active,
.role-admin {
  color: #174ea6 !important;
  background: #e8f0fe !important;
}

.status-disabled {
  color: var(--g-red) !important;
  background: #fce8e6 !important;
}

.sync-toggle-btn {
  min-height: 44px !important;
  border: 1px solid #d2e3fc !important;
  background: #e8f0fe !important;
  color: #174ea6 !important;
  box-shadow: none !important;
  outline: none !important;
}

.sync-toggle-btn:hover {
  background: #d2e3fc !important;
  box-shadow: none !important;
}

.sync-toggle-btn:focus,
.sync-toggle-btn:focus-visible,
.sync-panel-wrap:not(.collapsed) .sync-toggle-btn,
#chatPanel .sync-panel-wrap:not(.collapsed) .sync-toggle-btn {
  border-color: #a8c7fa !important;
  background: #e8f0fe !important;
  color: #174ea6 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .10) !important;
  outline: none !important;
}

.sync-toggle-icon {
  background: #fff !important;
  color: var(--g-blue) !important;
}

.sync-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d2e3fc;
  border-radius: 8px;
  background: #f8fbff;
}

.sync-range-note {
  grid-column: 1 / -1;
  margin: -2px 0 0 !important;
  padding: 8px 10px;
  border: 1px solid #d2e3fc;
  border-radius: 8px;
  background: #f8fbff;
  color: #174ea6;
  font-size: 12px;
  line-height: 1.5;
}

.sync-progress[hidden] {
  display: none !important;
}

.sync-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #174ea6;
  font-size: 13px;
  font-weight: 700;
}

.sync-progress-head b {
  color: var(--g-blue);
  font-variant-numeric: tabular-nums;
}

.sync-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eaed;
}

.sync-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4285f4, #34a853);
  transition: width .35s ease;
}

.sync-progress.running .sync-progress-track i {
  background-size: 42px 42px;
  background-image: linear-gradient(90deg, #4285f4, #34a853);
}

.sync-progress.done {
  border-color: #ceead6;
  background: #f6fff8;
}

.sync-progress.done .sync-progress-head,
.sync-progress.done .sync-progress-head b {
  color: var(--g-green);
}

.sync-progress.done .sync-progress-track i {
  background: var(--g-green);
}

.sync-progress.error {
  border-color: #f4c7c3;
  background: #fff8f7;
}

.sync-progress.error .sync-progress-head,
.sync-progress.error .sync-progress-head b {
  color: var(--g-red);
}

.sync-progress.error .sync-progress-track i {
  background: var(--g-red);
}

.sync-progress-hint {
  color: var(--g-muted);
  font-size: 12px;
  line-height: 1.55;
}

.sync-msg {
  color: var(--g-muted) !important;
}

.sync-msg.ok {
  color: var(--g-green) !important;
}

.sync-detail {
  border-radius: 8px !important;
}

.sync-detail.success {
  border-color: #ceead6 !important;
  background: #f8fff9 !important;
  color: #137333 !important;
}

.sync-detail.error {
  border-color: #f4c7c3 !important;
  background: #fff8f7 !important;
  color: #a50e0e !important;
}

.sign-deduct-frame {
  background: #ffffff !important;
}

.chat-business-chart {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(218, 220, 224, .95);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(60, 64, 67, .08);
  max-width: 100%;
}

.chat-chart-title {
  font-size: 15px;
  font-weight: 800;
  color: #202124;
}

.chat-chart-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: #5f6368;
}

.chat-chart-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.chat-chart-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background: #f8fbff;
}

.chat-chart-metric span,
.chat-chart-bar-label {
  display: block;
  font-size: 11px;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-chart-metric b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-chart-bars {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.chat-chart-bar-row {
  display: grid;
  grid-template-columns: 74px minmax(80px, 1fr) 54px;
  align-items: center;
  gap: 8px;
}

.chat-chart-bar-track {
  height: 9px;
  border-radius: 999px;
  background: #edf2fb;
  overflow: hidden;
}

.chat-chart-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.chat-chart-bar-row b {
  color: #202124;
  font-size: 12px;
  text-align: right;
}

.chat-chart-top {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}

.chat-chart-small-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #3c4043;
}

.chat-chart-cost-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  padding: 8px 0 10px;
}

.chat-chart-cost-row + .chat-chart-cost-row {
  border-top: 1px solid #f1f3f4;
}

.chat-chart-cost-row span,
.chat-chart-cost-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-chart-cost-row span {
  font-size: 12px;
  font-weight: 700;
  color: #202124;
}

.chat-chart-cost-row em {
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: #5f6368;
}

.chat-chart-cost-row strong {
  font-size: 12px;
  color: #202124;
  text-align: right;
}

.chat-chart-cost-row > i {
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: #1a73e8;
  opacity: .82;
}

@media (max-width: 1100px) {
  #chatPanel .sync-panel-wrap .sync-toolbar,
  #chatPanel.has-chat .sync-panel-wrap .sync-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #chatPanel .sync-panel-wrap .sync-toolbar .secondary-btn,
  #chatPanel .sync-panel-wrap .sync-toolbar .sync-progress,
  #chatPanel .sync-panel-wrap .sync-toolbar .sync-msg,
  #chatPanel .sync-panel-wrap .sync-toolbar .sync-detail {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .chat-business-chart {
    padding: 12px;
    border-radius: 14px;
  }

  .chat-chart-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-chart-bar-row {
    grid-template-columns: 56px minmax(0, 1fr) 42px;
    gap: 6px;
  }

  .app-shell {
    background: var(--g-bg) !important;
  }

  .sidebar {
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(60, 64, 67, .08) !important;
  }

  .workspace {
    height: calc(100dvh - 116px) !important;
    background: var(--g-bg) !important;
  }

  #chatPanel.panel.active {
    background: var(--g-bg) !important;
  }

  #chatPanel > .sync-panel-wrap,
  #chatPanel.has-chat > .sync-panel-wrap {
    flex: 0 0 auto !important;
    max-height: none !important;
  }

  #chatPanel > .sync-panel-wrap:not(.collapsed),
  #chatPanel.has-chat > .sync-panel-wrap:not(.collapsed) {
    max-height: none !important;
  }

  #chatPanel .sync-panel-wrap:not(.collapsed) .sync-toolbar,
  #chatPanel.has-chat .sync-panel-wrap:not(.collapsed) .sync-toolbar {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    max-height: min(360px, calc(100dvh - 240px)) !important;
    margin: 8px 0 0 !important;
  }

  #chatPanel > .chat-messages {
    padding-bottom: 110px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    grid-template-columns: 78px minmax(0, 1fr) 40px !important;
    background: #fff !important;
    border: 1px solid var(--g-border) !important;
    box-shadow: 0 10px 28px rgba(60, 64, 67, .16) !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 78px !important;
    min-width: 78px !important;
    border-radius: 999px !important;
    background: #f1f3f4 !important;
    border-color: transparent !important;
  }

  #chatPanel > form.composer textarea {
    border: 0 !important;
  }

  .config-card,
  .record-item,
  .user-row,
  .log-item,
  .records-toolbar,
  .logs-toolbar,
  .sync-toolbar {
    border-radius: 8px !important;
  }
}

/* mimo-progress-20260620: chat progress and web-search toggle */
.settings-divider {
  height: 1px;
  margin: 6px 0 2px;
  background: var(--g-border, #e5e8ef);
}

.web-search-toggle {
  position: relative;
  height: 42px;
  min-width: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.web-search-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.web-search-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #5f6368;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px #e5e8ef;
}

.web-search-toggle.checked {
  border-color: #a8c7fa;
  background: #e8f0fe;
  color: #174ea6;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .08);
}

.web-search-toggle.checked .web-search-icon {
  background: #1a73e8;
  color: #fff;
  box-shadow: none;
}

#chatPanel .loading-message .bubble.loading-bubble {
  width: min(640px, 100%) !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px 10px !important;
  align-items: start !important;
  color: #3c4043 !important;
}

#chatPanel .loading-message .loading-text {
  min-width: 0;
  color: #174ea6;
  font-weight: 700;
  line-height: 20px;
}

.chat-progress-list {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #eef2f7;
}

.chat-progress-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #7b818a;
  font-size: 12px;
  line-height: 18px;
}

.chat-progress-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: #dfe3ea;
}

.chat-progress-list li.active {
  color: #174ea6;
  font-weight: 700;
}

.chat-progress-list li.active .chat-progress-dot {
  background: #1a73e8;
  box-shadow: 0 0 0 5px rgba(26, 115, 232, .12);
}

.chat-progress-list li.done {
  color: #188038;
}

.chat-progress-list li.done .chat-progress-dot {
  background: #188038;
}

@media (min-width: 761px) {
  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    width: min(900px, calc(100% - 96px)) !important;
    grid-template-columns: 104px minmax(0, 1fr) 82px 44px !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    height: 42px !important;
    min-width: 82px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }
}

@media (max-width: 760px) {
  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    grid-template-columns: 70px minmax(0, 1fr) 66px 40px !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    height: 40px !important;
    min-width: 66px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  #chatPanel > form.composer .web-search-icon {
    width: 20px !important;
    height: 20px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  #chatPanel .loading-message .bubble.loading-bubble {
    width: min(305px, 100%) !important;
  }
}

/* ux-polish-20260620: embedded report shell and calmer work surfaces */
.sign-deduct-panel,
.hourly-monitor-panel {
  padding: 0 !important;
  background: var(--g-bg, #f8fafd) !important;
}

.sign-deduct-shell,
.hourly-monitor-shell {
  position: relative;
  width: 100%;
  height: calc(100vh - 24px);
  min-height: 760px;
  overflow: hidden;
  background: var(--g-bg, #f8fafd);
}

.sign-deduct-frame,
.hourly-monitor-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  border: 0 !important;
  background: var(--g-bg, #f8fafd) !important;
}

.sign-deduct-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  color: var(--g-muted, #5f6368);
  transition: opacity .18s ease, visibility .18s ease;
}

.sign-deduct-loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sign-deduct-loading span {
  width: 28px;
  height: 28px;
  border: 3px solid #d2e3fc;
  border-top-color: var(--g-blue, #1a73e8);
  border-radius: 999px;
  animation: qySpin .8s linear infinite;
}

.sign-deduct-loading b {
  font-size: 14px;
  font-weight: 800;
  color: var(--g-text, #202124);
}

.hourly-monitor-shell {
  border-radius: 18px;
  border: 1px solid rgba(218, 220, 224, .76);
  box-shadow: 0 18px 46px rgba(60, 64, 67, .08);
}

.hourly-monitor-loading {
  border-radius: 18px;
}

@keyframes qySpin {
  to { transform: rotate(360deg); }
}

@media (min-width: 761px) {
  #recordsPanel .records-toolbar,
  #summaryPanel .summary-toolbar,
  #logsPanel .logs-toolbar {
    position: sticky !important;
    top: 0;
    z-index: 18;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 22px rgba(60, 64, 67, .06) !important;
  }
}

#recordsList.loading,
#usersList.loading,
#logsList.loading,
#errorLogsList.loading,
.records-list.loading,
.users-list.loading,
.logs-list.loading,
.error-logs-list.loading {
  opacity: .68;
  cursor: progress;
}

.quick-actions button,
.side-text-row {
  white-space: nowrap;
}

.config-card,
.record-item,
.user-row,
.log-item,
.sync-detail,
.chat-business-chart {
  border-color: rgba(218, 220, 224, .96) !important;
}

.config-card:hover,
.record-item:hover,
.user-row:hover,
.log-item:hover {
  box-shadow: 0 10px 24px rgba(60, 64, 67, .08) !important;
}

@media (max-width: 760px) {
  .sign-deduct-shell,
  .hourly-monitor-shell {
    height: calc(100dvh - 72px);
    min-height: 680px;
  }

  .hourly-monitor-shell,
  .hourly-monitor-loading {
    border-radius: 0;
  }

  .quick-actions button,
  .side-text-row {
    white-space: normal;
  }
}

/* business-insights-20260620: added analytics workspace */
.business-insights-toolbar {
  margin-bottom: 16px !important;
}

.business-insights-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.business-insights-meta span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
}

.business-insights-meta b {
  color: var(--g-muted, #5f6368);
  font-size: 12px;
  font-weight: 800;
}

.business-insights-meta em {
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-insights-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 14px;
}

.insight-kpi-card {
  grid-column: span 2;
  min-height: 126px;
  display: grid;
  gap: 8px;
  align-content: center;
  border-radius: 8px !important;
  background: #fff !important;
}

.insight-kpi-card span {
  color: var(--g-muted, #5f6368);
  font-size: 13px;
  font-weight: 800;
}

.insight-kpi-card b {
  color: var(--g-text, #202124);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
}

.insight-kpi-card em {
  color: var(--g-muted, #5f6368);
  font-size: 12px;
  font-style: normal;
}

.insight-rank-card {
  grid-column: span 5;
  min-height: 320px;
  border-radius: 8px !important;
}

.insight-rank-list,
.insight-advice-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.insight-rank-list.empty,
.insight-advice-list.empty {
  min-height: 190px;
  place-items: center;
  color: var(--g-muted, #5f6368);
  border: 1px dashed var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #f8fafd;
}

.insight-rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
}

.insight-rank-row i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--g-blue, #1a73e8);
}

.insight-rank-no {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 12px;
  font-weight: 900;
}

.insight-rank-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.insight-rank-main b {
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-rank-main em {
  overflow: hidden;
  color: var(--g-muted, #5f6368);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-rank-row strong {
  color: var(--g-text, #202124);
  font-size: 14px;
  font-weight: 900;
}

.insight-advice-item {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-left: 4px solid var(--g-blue, #1a73e8);
  border-radius: 8px;
  background: #fff;
}

.insight-advice-item b {
  color: var(--g-text, #202124);
  font-size: 14px;
}

.insight-advice-item span {
  color: var(--g-muted, #5f6368);
  font-size: 13px;
  line-height: 1.55;
}

.insight-advice-item.level-risk {
  border-left-color: #d93025;
  background: #fff8f7;
}

.insight-advice-item.level-warn {
  border-left-color: #f9ab00;
  background: #fffcf2;
}

.insight-advice-item.level-ok {
  border-left-color: #188038;
  background: #f8fff9;
}

#businessInsightsPanel.loading .business-insights-grid {
  opacity: .68;
  cursor: progress;
}

#parentChannelInsightsPanel.loading .business-insights-grid {
  opacity: .68;
  cursor: progress;
}

#optimizerCostPanel.loading .optimizer-cost-kpis,
#optimizerCostPanel.loading .optimizer-cost-medal-card,
#optimizerCostPanel.loading .optimizer-cost-detail-modal,
#optimizerCostPanel.loading .optimizer-cost-rank-card {
  opacity: .68;
  cursor: progress;
}

.optimizer-cost-toolbar {
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 1fr)) auto;
}

.optimizer-cost-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

#optimizerCostPanel .optimizer-cost-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#optimizerCostPanel .optimizer-cost-kpis > .optimizer-cost-kpi {
  grid-column: auto / span 1 !important;
  min-width: 0;
  min-height: 118px;
}

.optimizer-cost-medal-card,
.optimizer-cost-rank-card {
  margin-top: 14px;
  border-radius: 8px !important;
}

.modal-card.optimizer-cost-detail-modal {
  width: min(1180px, calc(100vw - 48px));
}

.optimizer-cost-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.optimizer-cost-medals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.optimizer-cost-medals.empty,
.optimizer-cost-table.empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--g-muted, #5f6368);
  border: 1px dashed var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #f8fafd;
}

.optimizer-cost-medal {
  position: relative;
  width: 100%;
  min-height: 152px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
}

.optimizer-cost-medal.is-clickable,
.optimizer-cost-row.is-clickable {
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.optimizer-cost-medal:disabled,
.optimizer-cost-row:disabled {
  color: inherit;
  cursor: default;
  opacity: 1;
}

.optimizer-cost-medal.is-clickable:hover,
.optimizer-cost-row.is-clickable:hover,
.optimizer-cost-medal.is-active,
.optimizer-cost-row.is-active {
  border-color: #bfd4ff;
  background: #f8fbff;
  box-shadow: 0 8px 20px rgba(26, 115, 232, .08);
}

.optimizer-cost-medal.is-clickable:hover,
.optimizer-cost-row.is-clickable:hover {
  transform: translateY(-1px);
}

.optimizer-cost-medal::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: #e8f0fe;
}

.optimizer-cost-medal.rank-1::after {
  background: #fef7e0;
}

.optimizer-cost-medal.rank-2::after {
  background: #edf2f7;
}

.optimizer-cost-medal.rank-3::after {
  background: #fff4e5;
}

.optimizer-cost-medal span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.optimizer-cost-medal b {
  min-width: 0;
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-medal strong {
  color: var(--g-blue, #1a73e8);
  font-size: 30px;
  line-height: 1;
}

.optimizer-cost-medal em {
  color: var(--g-muted, #5f6368);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.optimizer-cost-medal small {
  color: var(--g-blue, #1a73e8);
  font-size: 12px;
  font-weight: 800;
}

.optimizer-cost-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.optimizer-cost-table-head,
.optimizer-cost-row {
  display: grid;
  grid-template-columns: 54px minmax(220px, 1.45fr) minmax(94px, .7fr) minmax(94px, .7fr) minmax(82px, .55fr) minmax(72px, .45fr);
  gap: 10px;
  align-items: center;
}

.optimizer-cost-table-head {
  min-height: 38px;
  padding: 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  background: #f8fafd;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
}

.optimizer-cost-row {
  position: relative;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
}

.optimizer-cost-no {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #174ea6;
  background: #e8f0fe;
  font-size: 13px;
  font-weight: 900;
}

.optimizer-cost-name {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.optimizer-cost-name b {
  min-width: 0;
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-name em {
  min-width: 0;
  overflow: hidden;
  color: var(--g-muted, #5f6368);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-name i {
  width: 0;
  height: 4px;
  display: block;
  border-radius: 999px;
  background: var(--g-blue, #1a73e8);
}

.optimizer-cost-row strong,
.optimizer-cost-row > span:not(.optimizer-cost-no) {
  min-width: 0;
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-detail-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.optimizer-cost-detail-meta span {
  min-height: 62px;
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #f8fafd;
}

.optimizer-cost-detail-meta b {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.optimizer-cost-detail-meta em {
  min-width: 0;
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-channel-list {
  display: grid;
  gap: 8px;
}

.optimizer-cost-detail-modal .optimizer-cost-channel-list {
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 2px;
}

.optimizer-cost-channel-list.empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--g-muted, #5f6368);
  border: 1px dashed var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #f8fafd;
}

.optimizer-cost-channel-head,
.optimizer-cost-channel-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(5, minmax(88px, .65fr));
  gap: 10px;
  align-items: center;
}

.optimizer-cost-channel-head {
  min-height: 38px;
  padding: 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  background: #f8fafd;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
}

.optimizer-cost-channel-row {
  min-height: 62px;
  padding: 12px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
}

.optimizer-cost-channel-name {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.optimizer-cost-channel-name b {
  min-width: 0;
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-channel-name em {
  min-width: 0;
  overflow: hidden;
  color: var(--g-muted, #5f6368);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimizer-cost-channel-name i {
  width: 0;
  height: 4px;
  display: block;
  border-radius: 999px;
  background: var(--g-blue, #1a73e8);
}

.optimizer-cost-channel-row strong,
.optimizer-cost-channel-row > span {
  min-width: 0;
  overflow: hidden;
  color: var(--g-text, #202124);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-channel-toolbar {
  grid-template-columns: minmax(260px, 1.25fr) repeat(4, minmax(150px, 1fr)) auto;
}

.parent-channel-toolbar input[type="search"] {
  min-width: 0;
}

.parent-channel-grid .insight-rank-row strong {
  min-width: 68px;
  text-align: right;
}

.parent-channel-meta em,
.parent-channel-grid .insight-kpi-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .business-insights-meta,
  .business-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insight-kpi-card,
  .insight-rank-card {
    grid-column: span 1;
  }

  .optimizer-cost-medals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .optimizer-cost-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .optimizer-cost-kpi {
    min-height: 100px;
    padding: 12px !important;
  }

  .optimizer-cost-kpi b {
    font-size: 26px;
  }

  .optimizer-cost-detail-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .optimizer-cost-table-head {
    display: none;
  }

  .optimizer-cost-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .optimizer-cost-row > span:not(.optimizer-cost-no) {
    display: none;
  }

  .optimizer-cost-channel-head {
    display: none;
  }

  .optimizer-cost-channel-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .optimizer-cost-channel-row > span {
    display: none;
  }
}

@media (max-width: 760px) {
  .business-insights-meta,
  .business-insights-grid {
    grid-template-columns: 1fr;
  }

  .insight-kpi-card,
  .insight-rank-card {
    grid-column: span 1;
  }

  .insight-kpi-card b {
    font-size: 26px;
  }

  .optimizer-cost-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #optimizerCostPanel .optimizer-cost-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .optimizer-cost-medals {
    grid-template-columns: 1fr;
  }

  .optimizer-cost-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .optimizer-cost-medal {
    min-height: 132px;
  }

  .optimizer-cost-row {
    min-height: 70px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px;
  }

  .optimizer-cost-medal strong {
    font-size: 26px;
  }

  .optimizer-cost-name em {
    white-space: normal;
  }
}

@media (max-width: 1200px) {
  .parent-channel-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-channel-toolbar .toolbar-actions,
  .parent-channel-toolbar .form-msg {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .parent-channel-toolbar {
    grid-template-columns: 1fr;
  }
}

/* hotfix: 合并左侧入口，使用顶部切换承载同类功能 */
.hub-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #f8fafd;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.hub-tab {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--g-muted, #5f6368);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
}

.hub-tab:hover {
  background: #edf3ff;
  color: #174ea6;
}

.hub-tab.active {
  background: #fff;
  color: var(--g-blue, #1a73e8);
  box-shadow: 0 1px 3px rgba(60, 64, 67, .16), 0 1px 2px rgba(60, 64, 67, .08);
}

.section-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin: 0 0 18px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.section-switch-row::-webkit-scrollbar {
  display: none;
}

.section-switch-row .hub-tabs,
.section-switch-row .module-tabs {
  margin: 0;
  min-height: 44px;
  position: relative;
  z-index: 2;
}

.section-switch-row .hub-tabs {
  flex: 0 0 auto;
}

.section-switch-row .module-tabs {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.section-switch-row .hub-tab,
.section-switch-row .module-tab {
  min-height: 34px;
}

.compact-admin-intro {
  display: block;
  margin-bottom: 16px;
}

.admin-card-head,
.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-card-head h2,
.settings-section-head h2 {
  margin: 0;
}

.user-overview-card {
  min-height: auto;
}

.user-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.user-overview-grid div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
}

.user-overview-grid b {
  display: block;
  color: var(--g-text, #202124);
  font-size: 15px;
  margin-bottom: 4px;
}

.user-overview-grid span {
  color: var(--g-muted, #5f6368);
  font-size: 13px;
  line-height: 1.5;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-subsection {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
}

.settings-subsection h3 {
  margin: 0;
  color: var(--g-text, #202124);
  font-size: 16px;
}

.settings-note-card {
  background: #f8fafd !important;
}

.form-footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(32, 33, 36, .34);
  backdrop-filter: blur(2px);
}

.modal-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.modal-open .modal-backdrop:not([hidden]):not(.is-closed) {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
}

body:not(.modal-open) .modal-backdrop,
body:not(.modal-open) .modal-backdrop[hidden],
body:not(.modal-open) .modal-backdrop.is-closed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.frontend-error-card {
  width: min(860px, calc(100% - 48px));
  margin: 18px auto;
  padding: 14px 16px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.modal-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(60, 64, 67, .26);
}

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

.modal-head h2 {
  margin: 0;
  color: var(--g-text, #202124);
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--g-border, #e5e8ef);
  border-radius: 50%;
  background: #fff;
  color: var(--g-muted, #5f6368);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.icon-btn:hover {
  background: #f1f5fb;
  color: var(--g-text, #202124);
}

@media (max-width: 900px) {
  .settings-form-grid,
  .user-overview-grid {
    grid-template-columns: 1fr;
  }

  .admin-card-head,
  .settings-section-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .section-switch-row {
    margin-bottom: 12px;
  }

  .section-switch-row .hub-tabs,
  .section-switch-row .module-tabs {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .hub-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .hub-tab {
    flex: 1 0 auto;
    padding: 0 12px;
  }

  .modal-backdrop {
    padding: 12px;
    align-items: end;
  }

  .modal-card {
    max-height: calc(100vh - 24px);
  }
}

body.role-employee .nav-item[data-panel="summaryPanel"],
body.role-employee .nav-item[data-panel="usersPanel"],
body.role-employee .nav-item[data-panel="settingsPanel"],
body.role-employee .nav-item[data-panel="logsPanel"] {
  display: flex !important;
}

/* work-review1: 记录中心复盘快照 + Google 风格视觉收口 */
.module-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 420px);
  min-height: 44px;
  margin: 0 0 18px 8px;
  padding: 4px;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  background: #f8fafd;
  vertical-align: top;
  overflow-x: auto;
  scrollbar-width: none;
}

.module-tabs::-webkit-scrollbar {
  display: none;
}

.module-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5f6368;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.module-tab:hover {
  background: #edf3ff;
  color: #174ea6;
}

.module-tab.active {
  background: #fff;
  color: #1a73e8;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .16), 0 1px 2px rgba(60, 64, 67, .08);
}

.module-pane {
  display: none !important;
}

.module-pane.active {
  display: block !important;
}

.business-insights-meta.module-pane.active {
  display: grid !important;
}

.business-insights-grid .insight-kpi-card.module-pane.active,
.parent-channel-grid .insight-kpi-card.module-pane.active {
  display: grid !important;
}

.summary-module-wrap {
  min-width: 0;
}

.summary-module-wrap .summary-card.module-pane.active,
.business-insights-grid .insight-rank-card.module-pane.active,
.parent-channel-grid .insight-rank-card.module-pane.active {
  grid-column: 1 / -1 !important;
  width: 100%;
}

.side-command-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.side-command-card {
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  background: #fff;
  color: #202124;
  text-align: left;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.side-command-card b,
.side-command-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-command-card b {
  color: #202124;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.side-command-card span {
  margin-top: 3px;
  color: #5f6368;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.side-command-card:hover {
  border-color: #c7d7fb;
  background: #f8fafd;
  box-shadow: 0 4px 12px rgba(60, 64, 67, .1);
}

.ai-command-center {
  width: min(860px, calc(100% - 96px));
  margin: 0 auto 12px;
  display: grid;
  gap: 10px;
}

.ai-command-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.ai-command-head h2 {
  margin: 0;
  color: #202124;
  font-size: 16px;
  font-weight: 900;
}

.ai-command-head > span {
  color: #5f6368;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  white-space: nowrap;
}

.ai-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.assistant-task-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 14px;
  border: 1px solid #e4e8f0;
  border-radius: 8px;
  background: #fff;
  color: #202124;
  text-align: left;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.assistant-task-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #1a73e8;
}

.assistant-task-card[data-tone="red"]::before { background: #ea4335; }
.assistant-task-card[data-tone="green"]::before { background: #34a853; }
.assistant-task-card[data-tone="yellow"]::before { background: #fbbc04; }

.assistant-task-card span,
.assistant-task-card b,
.assistant-task-card em {
  display: block;
  min-width: 0;
}

.assistant-task-card span {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f4f9;
  color: #5f6368;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.assistant-task-card b {
  margin-bottom: 6px;
  color: #202124;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.assistant-task-card em {
  color: #5f6368;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.assistant-task-card:hover {
  border-color: #c7d7fb;
  box-shadow: 0 8px 20px rgba(60, 64, 67, .12);
  transform: translateY(-1px);
}

.chat-capture-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(860px, calc(100% - 96px));
  margin: 0 auto 12px;
}

.chat-announcement-card {
  width: min(860px, 100%);
  margin: 0 auto 6px;
  padding: 10px;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

.chat-capture-grid .chat-announcement-card {
  width: 100%;
  margin: 0;
}

.record-helper-card {
  width: min(860px, calc(100% - 96px));
  margin: 0 auto 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chat-capture-grid .record-helper-card {
  width: 100%;
  margin: 0;
}

.record-helper-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.record-helper-head h2 {
  margin: 0;
  color: #202124;
  font-size: 16px;
  font-weight: 900;
}

.record-helper-head > span {
  color: #5f6368;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

.record-template-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.record-template-grid button {
  min-height: 42px;
  border: 1px solid #dfe6f3;
  border-radius: 999px;
  background: #f8fafd;
  color: #174ea6;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: none;
}

.record-template-grid button:hover {
  background: #e8f0fe;
  border-color: #c7d7fb;
}

.chat-announcement-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.announcement-helper-head {
  margin-bottom: 8px;
}

.chat-announcement-preview {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.chat-announcement-preview[hidden] {
  display: none !important;
}

.chat-announcement-preview.empty {
  place-items: center;
  border: 1px dashed #dfe6f3;
  border-radius: 10px;
  background: #f8fafd;
  color: #5f6368;
  font-size: 13px;
  font-weight: 750;
}

.announcement-preview-item {
  padding: 10px 12px;
  border: 1px solid #edf1f7;
  border-left: 3px solid #1a73e8;
  border-radius: 10px;
  background: #fff;
}

.announcement-preview-item.severity-critical {
  border-left-color: #ea4335;
}

.announcement-preview-item.severity-important {
  border-left-color: #fbbc04;
}

.announcement-preview-item.is-read {
  opacity: .76;
}

.announcement-preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.announcement-preview-title strong {
  min-width: 0;
  overflow: hidden;
  color: #202124;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-preview-title span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 11px;
  font-weight: 850;
}

.severity-critical .announcement-preview-title span,
.severity-critical .announcement-title-row span {
  background: #fce8e6;
  color: #c5221f;
}

.severity-important .announcement-preview-title span,
.severity-important .announcement-title-row span {
  background: #fef7e0;
  color: #b06000;
}

.announcement-preview-item p {
  margin: 7px 0;
  color: #3c4043;
  font-size: 12px;
  line-height: 1.55;
}

.announcement-preview-item footer {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5f6368;
  font-size: 11px;
}

.announcement-preview-item footer span {
  margin-right: auto;
}

.chat-optimizer-podium {
  display: grid;
  gap: 8px;
  min-height: 98px;
}

.chat-optimizer-podium[hidden] {
  display: none !important;
}

.chat-optimizer-podium.empty {
  place-items: center;
  min-height: 98px;
  border: 1px dashed #dfe6f3;
  border-radius: 10px;
  background: #f8fafd;
  color: #5f6368;
  font-size: 13px;
  font-weight: 750;
}

.chat-podium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-podium-head strong {
  display: block;
  color: #202124;
  font-size: 13px;
  font-weight: 950;
}

.chat-podium-head span {
  display: block;
  margin-top: 2px;
  color: #5f6368;
  font-size: 11px;
  font-weight: 750;
}

.chat-podium-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chat-podium-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid #e5e8ef;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f8fafd);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-podium-item:hover {
  border-color: #bfd4ff;
  background: #f8fbff;
  box-shadow: 0 8px 18px rgba(26, 115, 232, .08);
}

.chat-podium-item i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.chat-podium-item.rank-1 i {
  background: #fef7e0;
  color: #b06000;
}

.chat-podium-item.rank-2 i {
  background: #edf2f7;
  color: #475569;
}

.chat-podium-item.rank-3 i {
  background: #fff4e5;
  color: #a15c07;
}

.chat-podium-item b {
  min-width: 0;
  overflow: hidden;
  color: #202124;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-podium-item strong {
  color: #174ea6;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.chat-podium-item span {
  grid-column: 2 / 4;
  min-width: 0;
  overflow: hidden;
  color: #5f6368;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .ai-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ai-command-center {
    width: calc(100% - 28px);
    margin-bottom: 10px;
  }

  .ai-command-head {
    align-items: flex-start;
  }

  .ai-command-head > span {
    white-space: normal;
    text-align: right;
  }

  .assistant-task-card {
    min-height: 96px;
    padding: 12px;
  }
}

@media (max-width: 540px) {
  .ai-command-grid {
    grid-template-columns: 1fr;
  }
}

.record-template-modal {
  width: min(680px, 100%);
}

.record-template-form {
  display: grid;
  gap: 14px;
}

.record-template-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.record-template-fields label {
  min-width: 0;
}

.record-template-fields label span {
  color: #5f6368;
  font-size: 12px;
  font-weight: 800;
}

.record-template-fields input {
  min-height: 42px;
  border-radius: 10px !important;
}

.record-template-choice {
  min-width: 0;
  margin: 0;
  padding: 9px 10px 10px;
  border: 1px solid #dfe6f3;
  border-radius: 10px;
  background: #fff;
}

.record-template-choice legend {
  padding: 0 4px;
  color: #5f6368;
  font-size: 12px;
  font-weight: 800;
}

.record-template-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-template-choice label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #dfe6f3;
  border-radius: 999px;
  background: #f8fafd;
  cursor: pointer;
}

.record-template-choice input {
  width: auto !important;
  min-height: 0 !important;
  margin: 0;
}

.record-template-choice label:has(input:checked) {
  border-color: #c7d7fb;
  background: #e8f0fe;
}

.record-template-choice input:checked + span {
  color: #174ea6;
  font-weight: 900;
}

.record-template-tip {
  margin: 0;
  color: #5f6368;
  font-size: 12px;
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-actions button {
  min-width: 96px;
}

.quick-actions-title {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 6px;
  color: #5f6368;
  font-size: 12px;
  font-weight: 850;
}

#chatPanel.record-mode .composer {
  border-color: rgba(52, 168, 83, .36) !important;
}

/* qingyun-20260622: soften same-group tab switches without changing layout */
.panel,
.section-switch-row,
.hub-tabs,
.module-tabs,
.module-pane,
.records-toolbar,
.business-insights-grid,
.summary-module-wrap {
  overflow-anchor: none;
}

.hub-tab,
.module-tab {
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.panel.ui-soft-switching {
  scroll-behavior: auto !important;
}

.panel.ui-soft-switching .section-switch-row,
.panel.ui-soft-switching .records-toolbar,
.panel.ui-soft-switching .business-insights-toolbar,
.panel.ui-soft-switching .business-insights-meta.module-pane.active,
.panel.ui-soft-switching .module-pane.active {
  animation: qy-soft-tab-in .18s ease-out both;
}

@keyframes qy-soft-tab-in {
  from { opacity: .92; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-tab,
  .module-tab {
    transition: none;
  }

  .panel.ui-soft-switching .section-switch-row,
  .panel.ui-soft-switching .records-toolbar,
  .panel.ui-soft-switching .business-insights-toolbar,
  .panel.ui-soft-switching .business-insights-meta.module-pane.active,
  .panel.ui-soft-switching .module-pane.active {
    animation: none;
  }
}

/* qingyun-20260622: record hub uses one stable top switch layout */
#chatPanel .section-switch-row,
#recordsPanel .section-switch-row,
#summaryPanel .section-switch-row,
#businessInsightsPanel .section-switch-row,
#parentChannelInsightsPanel .section-switch-row,
#usersPanel .section-switch-row,
#settingsPanel .section-switch-row,
#logsPanel .section-switch-row {
  min-height: 44px;
  align-items: center;
  gap: 8px;
}

#businessInsightsPanel .section-switch-row,
#parentChannelInsightsPanel .section-switch-row {
  position: sticky;
  top: 0;
  z-index: 18;
  padding: 6px 0 8px;
  background: linear-gradient(180deg, rgba(248, 250, 253, .98) 0%, rgba(248, 250, 253, .92) 100%);
  backdrop-filter: blur(10px);
}

#chatPanel .section-switch-row .hub-tabs,
#chatPanel .section-switch-row .module-tabs,
#recordsPanel .section-switch-row .hub-tabs,
#summaryPanel .section-switch-row .hub-tabs,
#recordsPanel .section-switch-row .module-tabs,
#summaryPanel .section-switch-row .module-tabs,
#businessInsightsPanel .section-switch-row .hub-tabs,
#businessInsightsPanel .section-switch-row .module-tabs,
#parentChannelInsightsPanel .section-switch-row .hub-tabs,
#parentChannelInsightsPanel .section-switch-row .module-tabs,
#usersPanel .section-switch-row .hub-tabs,
#usersPanel .section-switch-row .module-tabs,
#settingsPanel .section-switch-row .hub-tabs,
#settingsPanel .section-switch-row .module-tabs,
#logsPanel .section-switch-row .hub-tabs,
#logsPanel .section-switch-row .module-tabs {
  flex-shrink: 0;
  min-height: 44px;
  border-radius: 12px;
  margin: 0 !important;
  transform: none !important;
  clip-path: none !important;
}

#chatPanel .section-switch-row .module-tabs,
#recordsPanel .section-switch-row .module-tabs,
#summaryPanel .section-switch-row .module-tabs,
#businessInsightsPanel .section-switch-row .module-tabs,
#parentChannelInsightsPanel .section-switch-row .module-tabs,
#usersPanel .section-switch-row .module-tabs,
#settingsPanel .section-switch-row .module-tabs,
#logsPanel .section-switch-row .module-tabs {
  flex: 1 1 auto;
  max-width: none !important;
}

#recordsPanel .summary-module-tabs .module-tab.active {
  background: transparent;
  color: #5f6368;
  box-shadow: none;
}

#recordsPanel .summary-module-tabs .module-tab:hover {
  background: #edf3ff;
  color: #174ea6;
}

/* qingyun-20260622: long record text uses progressive disclosure */
.has-collapsible-text {
  white-space: normal !important;
}

.collapsible-text {
  min-width: 0;
}

.collapsible-text-body {
  position: relative;
  color: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.collapsible-text.is-collapsed .collapsible-text-body {
  max-height: 15.8em;
  overflow: hidden;
}

.collapsible-text.is-collapsed .collapsible-text-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.2em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);
}

.message.user .collapsible-text.is-collapsed .collapsible-text-body::after {
  background: linear-gradient(to bottom, rgba(66,133,244,0), rgba(92,106,248,.96) 78%);
}

.collapsible-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.collapsible-toggle,
.collapsible-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #dfe6f3;
  border-radius: 999px;
  background: #f8fafd;
  color: #174ea6;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.collapsible-toggle:hover,
.collapsible-copy:hover {
  border-color: #c7d7fb;
  background: #e8f0fe;
}

.message.user .collapsible-toggle,
.message.user .collapsible-copy {
  border-color: rgba(255,255,255,.48);
  background: rgba(255,255,255,.18);
  color: #fff;
}

.message.user .collapsible-toggle:hover,
.message.user .collapsible-copy:hover {
  background: rgba(255,255,255,.26);
}

#chatPanel .bubble.has-collapsible-text .collapsible-text.is-collapsed .collapsible-text-body {
  max-height: none;
  overflow: visible;
}

#chatPanel .bubble.has-collapsible-text .collapsible-text.is-collapsed .collapsible-text-body::after {
  display: none;
}

#chatPanel .message.user .collapsible-toggle,
#chatPanel .message.user .collapsible-copy {
  border-color: #c7d7fb;
  background: #ffffff;
  color: #174ea6;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

#chatPanel .message.user .collapsible-toggle:hover,
#chatPanel .message.user .collapsible-copy:hover {
  border-color: #aecbfa;
  background: #f8fafd;
}

.record-content.has-collapsible-text,
.log-detail-text.has-collapsible-text,
.log-json.has-collapsible-text,
.chat-log-content.has-collapsible-text {
  padding-top: 2px;
}

.review-recent-row span.has-collapsible-text {
  display: block;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.review-recent-row span.has-collapsible-text .collapsible-toggle,
.review-recent-row span.has-collapsible-text .collapsible-copy {
  min-height: 26px;
  padding: 0 10px;
}

@media (max-width: 760px) {
  .collapsible-toggle,
  .collapsible-copy {
    min-height: 34px;
    padding: 0 14px;
  }

  .collapsible-text.is-collapsed .collapsible-text-body {
    max-height: 14.2em;
  }
}

#chatPanel.chat-mode .composer {
  border-color: rgba(26, 115, 232, .28) !important;
}

.work-review-card {
  margin: 0 0 18px !important;
  border: 1px solid #e5e8ef !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .10), 0 1px 3px rgba(60, 64, 67, .08) !important;
}

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

.work-review-head h2 {
  margin: 0;
  color: #202124;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 0;
}

.work-review-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.work-review-kpis div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #f8fafd;
}

.work-review-kpis span {
  display: block;
  margin-bottom: 6px;
  color: #5f6368;
  font-size: 12px;
  font-weight: 750;
}

.work-review-kpis b {
  display: block;
  min-width: 0;
  color: #202124;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 12px;
}

.review-block {
  min-width: 0;
  padding: 14px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #fff;
}

.review-block.wide {
  grid-column: 1 / -1;
}

.review-block-title {
  margin-bottom: 10px;
  color: #202124;
  font-size: 14px;
  font-weight: 850;
}

.review-list.empty,
.review-keywords.empty,
.review-recent.empty {
  color: #5f6368;
  font-size: 13px;
  line-height: 1.6;
}

.review-user-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid #f1f3f4;
  overflow: hidden;
}

.review-user-row:last-child {
  border-bottom: 0;
}

.review-user-row b,
.review-recent-row strong {
  color: #202124;
  font-size: 14px;
  font-weight: 850;
}

.review-user-row span {
  display: block;
  margin-top: 3px;
  color: #5f6368;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-user-row em {
  color: #1a73e8;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.review-user-row i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 99px;
  background: #1a73e8;
}

.review-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-keywords span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #dfe6f3;
  border-radius: 999px;
  background: #f8fafd;
  color: #3c4043;
}

.review-keywords b {
  font-size: 13px;
}

.review-keywords em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.review-daily {
  display: grid;
  gap: 8px;
}

.review-daily.empty {
  color: #5f6368;
  font-size: 13px;
  line-height: 1.6;
}

.review-daily-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.review-daily-row time {
  color: #5f6368;
  font-size: 12px;
  white-space: nowrap;
}

.review-daily-row div {
  height: 8px;
  border-radius: 999px;
  background: #edf1f7;
  overflow: hidden;
}

.review-daily-row i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1a73e8;
}

.review-daily-row b {
  color: #202124;
  font-size: 12px;
  text-align: right;
}

.review-recent {
  display: grid;
  gap: 6px;
}

.review-recent-row {
  display: grid;
  grid-template-columns: 88px 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafd;
}

.review-recent-row time {
  color: #5f6368;
  font-size: 12px;
  white-space: nowrap;
}

.review-recent-row span {
  min-width: 0;
  color: #3c4043;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.review-notes span {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5fb;
  color: #3c4043;
  font-size: 12px;
  line-height: 1.45;
}

.operator-evaluation-card {
  margin: 0 0 18px !important;
  border: 1px solid #e5e8ef !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .10), 0 1px 3px rgba(60, 64, 67, .08) !important;
}

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

.operator-evaluation-head h2 {
  margin: 0;
  color: #202124;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 0;
}

.operator-evaluation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.operator-evaluation-list.empty {
  display: block;
  color: #5f6368;
  font-size: 13px;
  line-height: 1.7;
}

.operator-score-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background: #fff;
}

.operator-score-card.excellent { border-left: 4px solid #34a853; }
.operator-score-card.stable { border-left: 4px solid #1a73e8; }
.operator-score-card.watch { border-left: 4px solid #fbbc04; }
.operator-score-card.risk { border-left: 4px solid #ea4335; }

.operator-score-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.operator-score-head strong {
  display: block;
  color: #202124;
  font-size: 16px;
  font-weight: 900;
}

.operator-score-head span {
  display: block;
  margin-top: 3px;
  color: #5f6368;
  font-size: 12px;
}

.operator-score-head > b {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 18px;
  font-weight: 950;
}

.operator-score-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.operator-score-metrics span {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: #f8fafd;
}

.operator-score-metrics em {
  display: block;
  color: #5f6368;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.operator-score-metrics b {
  display: block;
  margin-top: 4px;
  color: #202124;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operator-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.operator-category-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5fb;
  color: #3c4043;
  font-size: 12px;
  font-weight: 750;
}

.operator-category-strip em {
  color: #174ea6;
  font-style: normal;
  font-weight: 900;
}

.operator-score-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.operator-score-text div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafd;
}

.operator-score-text b {
  display: block;
  margin-bottom: 6px;
  color: #202124;
  font-size: 12px;
  font-weight: 900;
}

.operator-score-text span {
  display: block;
  color: #5f6368;
  font-size: 12px;
  line-height: 1.45;
  min-height: 34px;
}

.operator-score-text span + span {
  margin-top: 4px;
}

.operator-latest {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #eef3fb;
  color: #3c4043;
  font-size: 12px;
  line-height: 1.45;
}

.operator-ai-summary {
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid #dfe8fb;
  border-radius: 8px;
  background: #f8fbff;
  color: #174ea6;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.operator-ai-summary.is-rule {
  border-color: #eceff5;
  background: #f8fafd;
  color: #3c4043;
}

.evaluation-note {
  margin: 12px 0 0;
  color: #5f6368;
  font-size: 12px;
  line-height: 1.6;
}

#recordsPanel .config-card,
#summaryPanel .config-card {
  border-radius: 12px !important;
}

#recordsPanel .records-toolbar,
#summaryPanel .summary-toolbar {
  background: #fff !important;
  border-color: #e5e8ef !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08) !important;
}

#summaryPanel .summary-card {
  border: 1px solid #e5e8ef !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08) !important;
}

.summary-rank-trend-card {
  min-height: 360px !important;
}

.summary-rank-trend-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin-bottom: 8px;
  color: #3c4043;
  font-size: 13px;
  font-weight: 900;
}

.inline-muted {
  color: #5f6368;
  font-size: 12px;
  font-weight: 750;
}

#announcementsPanel .panel-header {
  align-items: center;
}

.announcement-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px !important;
  border-color: #e5e8ef !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08) !important;
}

.announcement-toolbar h2 {
  margin: 0 0 4px;
  color: #202124;
  font-size: 20px;
  font-weight: 950;
}

.announcement-toolbar p {
  margin: 0;
  color: #5f6368;
  font-size: 13px;
  font-weight: 750;
}

.announcement-table-card {
  border-radius: 12px !important;
  border-color: #e5e8ef !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08) !important;
}

.announcement-list {
  display: grid;
  gap: 10px;
}

.announcement-list.empty {
  display: block;
  padding: 28px;
  border-radius: 12px;
  background: #f8fafd;
  color: #5f6368;
  text-align: center;
  font-weight: 800;
}

.announcement-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #edf1f7;
  border-left: 4px solid #1a73e8;
  border-radius: 12px;
  background: #fff;
}

.announcement-item.severity-important {
  border-left-color: #fbbc04;
}

.announcement-item.severity-critical {
  border-left-color: #ea4335;
}

.announcement-item.is-read {
  background: #fbfcff;
}

.announcement-main {
  min-width: 0;
  flex: 1 1 auto;
}

.announcement-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.announcement-title-row strong {
  color: #202124;
  font-size: 17px;
  font-weight: 950;
}

.announcement-title-row span,
.announcement-title-row i {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.announcement-title-row i {
  background: #e6f4ea;
  color: #137333;
}

.announcement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  color: #5f6368;
  font-size: 12px;
}

.announcement-text {
  margin: 0;
  color: #3c4043;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announcement-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.danger-soft {
  color: #c5221f !important;
}

.announcement-modal-card {
  width: min(720px, calc(100vw - 28px));
}

.announcement-detail-meta {
  margin: -4px 0 12px;
  color: #5f6368;
  font-size: 13px;
  font-weight: 750;
}

.announcement-detail-body {
  max-height: min(56vh, 520px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  background: #f8fafd;
  color: #202124;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announcement-read-roster {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  background: #fff;
}

.announcement-read-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.announcement-read-head strong {
  color: #202124;
  font-size: 15px;
  font-weight: 950;
}

.announcement-read-head span {
  color: #5f6368;
  font-size: 12px;
  font-weight: 800;
}

.announcement-read-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.announcement-read-group {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: #f8fafd;
}

.announcement-read-group h3 {
  margin: 0 0 8px;
  color: #202124;
  font-size: 13px;
  font-weight: 950;
}

.announcement-read-group p {
  margin: 0;
  color: #5f6368;
  font-size: 12px;
  font-weight: 750;
}

.announcement-person-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 170px;
  overflow: auto;
  padding-right: 2px;
}

.announcement-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid #d7eadc;
  border-radius: 999px;
  background: #e6f4ea;
  color: #137333;
  font-size: 12px;
  font-weight: 850;
}

.announcement-person-chip b {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-person-chip small {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  opacity: .78;
}

.announcement-read-group.is-unread .announcement-person-chip {
  border-color: #f2d5d2;
  background: #fce8e6;
  color: #c5221f;
}

.announcement-target-all-row {
  justify-content: flex-start;
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid #e5e8ef;
  border-radius: 999px;
  background: #f8fafd;
}

.announcement-target-users {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  background: #fff;
}

.announcement-target-users.empty {
  display: block;
  color: #5f6368;
}

.announcement-target-users.is-disabled {
  opacity: .58;
}

.announcement-user-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #f8fafd;
}

.announcement-user-check span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.announcement-user-check b {
  overflow: hidden;
  color: #202124;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-user-check small {
  color: #5f6368;
  font-size: 11px;
  font-weight: 750;
}

#issueReportsPanel .panel-header {
  align-items: center;
}

.issue-toolbar {
  grid-template-columns: minmax(250px, 1.2fr) minmax(145px, .8fr) minmax(145px, .8fr) minmax(180px, 1fr) auto;
}

.issue-highlight-card,
#issueReportsPanel .table-card {
  border-radius: 12px !important;
  border-color: #e5e8ef !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08) !important;
}

.issue-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.issue-highlight-grid.empty,
.issue-report-list.empty {
  display: block;
  padding: 24px;
  border-radius: 12px;
  background: #f8fafd;
  color: #5f6368;
  text-align: center;
}

.issue-highlight-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid #edf1f7;
  border-left: 4px solid #ea4335;
  border-radius: 12px;
  background: #fff;
}

.issue-highlight-item > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.issue-highlight-item strong {
  display: block;
  color: #202124;
  font-size: 16px;
  font-weight: 900;
}

.issue-highlight-item span {
  color: #5f6368;
  font-size: 12px;
  font-weight: 750;
}

.issue-highlight-item > b {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fce8e6;
  color: #c5221f;
  font-size: 18px;
  font-weight: 950;
}

.issue-highlight-item p {
  margin: 12px 0;
  color: #3c4043;
  font-size: 13px;
  line-height: 1.55;
}

.issue-highlight-item footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.issue-highlight-item footer span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5fb;
  color: #5f6368;
}

.issue-report-list {
  display: grid;
  gap: 10px;
}

.issue-report-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #edf1f7;
  border-left: 4px solid #9aa0a6;
  border-radius: 12px;
  background: #fff;
}

.issue-report-item.severity-important { border-left-color: #fbbc04; }
.issue-report-item.severity-serious { border-left-color: #ea4335; }

.issue-report-main {
  min-width: 0;
  flex: 1 1 auto;
}

.issue-report-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.issue-report-title strong {
  color: #202124;
  font-size: 16px;
  font-weight: 900;
}

.issue-report-title span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 12px;
  font-weight: 850;
}

.severity-important .issue-report-title span {
  background: #fef7e0;
  color: #b06000;
}

.severity-serious .issue-report-title span {
  background: #fce8e6;
  color: #c5221f;
}

.issue-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  color: #5f6368;
  font-size: 12px;
}

.issue-report-text {
  margin: 0;
  color: #3c4043;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.issue-modal-card {
  width: min(680px, calc(100vw - 28px));
}

.issue-modal-card textarea {
  resize: vertical;
  min-height: 128px;
}

@media (max-width: 980px) {
  .work-review-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-review-layout {
    grid-template-columns: 1fr;
  }

  .operator-evaluation-list {
    grid-template-columns: 1fr;
  }

  .summary-rank-trend-grid,
  .issue-highlight-grid {
    grid-template-columns: 1fr;
  }

  .chat-capture-grid {
    grid-template-columns: 1fr;
  }

  .announcement-target-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issue-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .module-tabs {
    display: flex;
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 auto 12px;
  }

  .module-tab {
    padding: 0 12px;
    font-size: 13px;
  }

  .work-review-card {
    margin: 0 12px 14px !important;
    padding: 14px !important;
  }

  .work-review-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .work-review-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .work-review-kpis div {
    padding: 12px;
  }

  .work-review-kpis b {
    font-size: 20px;
  }

  .review-block {
    padding: 12px;
  }

  .review-recent-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3px;
  }

  .review-recent-row span {
    white-space: normal;
  }

  .record-helper-card {
    width: calc(100% - 24px);
    margin: 0 auto 10px;
    padding: 12px;
  }

  .chat-capture-grid {
    width: calc(100% - 24px);
    margin-bottom: 10px;
    gap: 10px;
  }

  .chat-announcement-card {
    padding: 12px;
  }

  .announcement-toolbar,
  .announcement-item {
    align-items: stretch;
    flex-direction: column;
  }

  .announcement-actions {
    justify-content: flex-start;
  }

  .announcement-target-users {
    grid-template-columns: 1fr;
  }

  .announcement-read-head,
  .announcement-read-grid {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .announcement-read-head {
    flex-direction: column;
  }

  .issue-toolbar {
    grid-template-columns: 1fr;
  }

  .issue-report-item {
    flex-direction: column;
  }

  #issueReportsPanel .panel-header {
    align-items: stretch;
  }

  .record-helper-head {
    flex-direction: column;
    gap: 4px;
  }

  .record-helper-head > span {
    white-space: normal;
  }

  .record-template-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .record-template-grid button {
    flex: 0 0 auto;
    padding: 0 12px;
  }

  .record-template-fields {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .quick-actions-title {
    flex: 0 0 100%;
  }

  .operator-evaluation-card {
    margin: 0 12px 14px !important;
    padding: 14px !important;
  }

  .operator-evaluation-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .operator-score-metrics,
  .operator-score-text {
    grid-template-columns: 1fr 1fr;
  }
}

/* mobile-drawer1: 手机端主导航改为侧边抽屉，避免顶部标签拥挤 */
.mobile-app-bar,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    background: #f8fafd !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    padding: calc(60px + env(safe-area-inset-top)) 0 0 !important;
    background: #f8fafd !important;
  }

  .mobile-app-bar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 980 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: calc(60px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 14px 0 !important;
    border-bottom: 1px solid #e7ecf4 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 2px 12px rgba(60, 64, 67, .08) !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-menu-btn {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #3c4043 !important;
    box-shadow: none !important;
  }

  .mobile-menu-btn:active,
  .mobile-menu-btn:hover {
    background: #f1f3f4 !important;
    transform: none !important;
  }

  .mobile-menu-lines,
  .mobile-menu-lines::before,
  .mobile-menu-lines::after {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #3c4043 !important;
  }

  .mobile-menu-lines {
    position: relative !important;
  }

  .mobile-menu-lines::before,
  .mobile-menu-lines::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
  }

  .mobile-menu-lines::before { top: -7px !important; }
  .mobile-menu-lines::after { top: 7px !important; }

  .mobile-app-title {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
  }

  .mobile-app-title strong {
    color: #202124 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .mobile-app-title span {
    color: #5f6368 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-app-avatar {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    background: conic-gradient(from 135deg, #4285f4, #34a853, #fbbc04, #ea4335, #7c3aed, #4285f4) !important;
    box-shadow: 0 2px 8px rgba(60, 64, 67, .16) !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: block !important;
    background: rgba(32, 33, 36, .36) !important;
    opacity: 1 !important;
    backdrop-filter: blur(2px) !important;
  }

  .mobile-nav-backdrop[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  body:not(.mobile-nav-open) .mobile-nav-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1010 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(86vw, 326px) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    border: 0 !important;
    border-right: 1px solid #e7ecf4 !important;
    border-radius: 0 24px 24px 0 !important;
    background: #fff !important;
    box-shadow: 0 20px 52px rgba(60, 64, 67, .26) !important;
    transform: translateX(-106%) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0) !important;
  }

  .side-brand {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 0 !important;
  }

  .side-brand .spark {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
    border-radius: 16px !important;
  }

  .side-brand > div:not(.spark) {
    display: block !important;
    min-width: 0 !important;
  }

  .side-brand strong {
    display: block !important;
    color: #202124 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .side-brand span {
    display: block !important;
    color: #5f6368 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar-toggle {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f3f4 !important;
    color: #3c4043 !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .sidebar-toggle:hover,
  .sidebar-toggle:active {
    background: #e8eaed !important;
    transform: none !important;
  }

  .side-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 6px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .side-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #3c4043 !important;
    box-shadow: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
  }

  .side-nav .nav-item.active {
    background: #e8f0fe !important;
    color: #174ea6 !important;
    box-shadow: inset 3px 0 0 #1a73e8 !important;
  }

  .side-nav .nav-item:hover {
    background: #f1f3f4 !important;
    transform: none !important;
  }

  .side-nav .nav-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .desktop-label {
    display: none !important;
  }

  .mobile-label {
    display: inline-block !important;
    color: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .desktop-side-extra {
    display: none !important;
  }

  .side-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #edf1f7 !important;
  }

  .side-footer .user-chip {
    min-width: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  .side-footer .avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  .side-footer .user-chip b {
    display: block !important;
    max-width: 128px !important;
    color: #202124 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .side-footer .user-chip small {
    display: block !important;
    color: #5f6368 !important;
    font-size: 11px !important;
  }

  #logoutBtn.ghost-btn,
  #logoutBtn {
    min-width: 66px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #f1f3f4 !important;
    color: #3c4043 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    height: calc(100dvh - 60px - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f8fafd !important;
    overflow: hidden !important;
  }

  .panel.active {
    min-height: 0 !important;
  }

  .sign-deduct-shell,
  .hourly-monitor-shell {
    height: calc(100dvh - 60px - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
  }

  .sign-deduct-shell,
  .hourly-monitor-shell,
  .sign-deduct-loading,
  .hourly-monitor-loading {
    border-radius: 0 !important;
  }
}

/* mobile-clean-chat-20260622: 手机端隐藏对话页辅助大块，并统一模块紧凑布局 */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #f8fafd !important;
  }

  body {
    font-size: 14px !important;
  }

  .app-shell {
    padding-top: calc(56px + env(safe-area-inset-top)) !important;
  }

  .mobile-app-bar {
    height: calc(56px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 12px 0 !important;
  }

  .mobile-menu-btn {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .mobile-app-title strong {
    font-size: 15px !important;
    font-weight: 750 !important;
  }

  .mobile-app-title span {
    font-size: 11px !important;
  }

  .mobile-app-avatar {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .workspace {
    height: calc(100dvh - 56px - env(safe-area-inset-top)) !important;
    overflow: hidden !important;
  }

  .panel.active {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 12px calc(86px + env(safe-area-inset-bottom)) !important;
    gap: 12px !important;
    background: #f8fafd !important;
  }

  .panel-header.compact,
  .panel-header {
    min-height: auto !important;
    padding: 2px 2px 4px !important;
    margin: 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .panel-header .eyebrow {
    margin-bottom: 3px !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
  }

  .panel-header h1,
  .panel-header.compact h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 760 !important;
  }

  #chatPanel.panel.active {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: #f8fafd !important;
  }

  #chatPanel .panel-header,
  #chatPanel > .sync-panel-wrap,
  #chatPanel.has-chat > .sync-panel-wrap,
  #chatPanel .record-helper-card {
    display: none !important;
  }

  #chatPanel .quick-actions {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px 4px !important;
    gap: 8px !important;
    border-bottom: 1px solid #e7ecf4 !important;
    background: rgba(255,255,255,.92) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #chatPanel .quick-actions::-webkit-scrollbar {
    display: none !important;
  }

  .quick-actions-title {
    flex: 0 0 auto !important;
    align-self: center !important;
    font-size: 12px !important;
    color: #5f6368 !important;
    padding-left: 2px !important;
  }

  #chatPanel .quick-actions button {
    flex: 0 0 auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-messages {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px 10px calc(102px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
    scroll-padding-bottom: 112px !important;
  }

  #chatPanel > .chat-messages .message {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
  }

  #chatPanel > .chat-messages .bubble {
    max-width: 90% !important;
    border-radius: 18px !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
    overflow-wrap: anywhere !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble {
    max-width: 94% !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    max-width: 86% !important;
  }

  #chatPanel > .chat-pager {
    margin: 0 auto 76px !important;
    padding: 6px 8px !important;
    width: 100% !important;
    background: rgba(248,250,253,.92) !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-height: 52px !important;
    max-height: 86px !important;
    grid-template-columns: 70px minmax(0, 1fr) 38px 38px !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #dfe5ef !important;
    box-shadow: 0 12px 28px rgba(60,64,67,.16) !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 70px !important;
    min-width: 70px !important;
    height: 38px !important;
    padding: 0 20px 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  #chatPanel > form.composer textarea {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 70px !important;
    padding: 7px 0 !important;
    font-size: 14px !important;
    line-height: 24px !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  #chatPanel > form.composer .web-search-label {
    display: none !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
  }

  .section-switch-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: calc(100% + 24px) !important;
    margin: 0 -12px !important;
    padding: 0 12px 2px !important;
    overflow: hidden !important;
  }

  .hub-tabs,
  .module-tabs {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #eef2f7 !important;
    border: 1px solid #e1e7f0 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
  }

  .hub-tabs::-webkit-scrollbar,
  .module-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .hub-tab,
  .module-tab {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .hub-tab.active,
  .module-tab.active {
    color: #174ea6 !important;
    background: #fff !important;
    box-shadow: 0 1px 5px rgba(60,64,67,.12) !important;
  }

  .config-card,
  .table-card,
  .summary-card,
  .work-review-card,
  .operator-evaluation-card,
  .insight-kpi-card,
  .insight-rank-card,
  .issue-highlight-card,
  .sync-log-overview-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 4px 16px rgba(60,64,67,.08) !important;
  }

  .records-toolbar,
  .logs-toolbar,
  .business-insights-toolbar,
  .issue-toolbar,
  .summary-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .records-toolbar .date-shortcuts,
  .logs-toolbar .date-shortcuts,
  .business-insights-toolbar .date-shortcuts,
  .issue-toolbar .date-shortcuts,
  .summary-toolbar .date-shortcuts {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 7px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .date-shortcuts::-webkit-scrollbar {
    display: none !important;
  }

  .date-shortcuts button {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  .records-toolbar label,
  .logs-toolbar label,
  .business-insights-toolbar label,
  .issue-toolbar label,
  .summary-toolbar label,
  .settings-form-grid label,
  .form-stack label {
    min-width: 0 !important;
  }

  .records-toolbar label span,
  .logs-toolbar label span,
  .business-insights-toolbar label span,
  .issue-toolbar label span,
  .summary-toolbar label span,
  .form-stack label span {
    font-size: 12px !important;
    color: #64748b !important;
    margin-bottom: 5px !important;
  }

  input,
  textarea,
  select {
    min-width: 0 !important;
    min-height: 42px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  .toolbar-actions,
  .form-footer-row,
  .form-msg {
    grid-column: 1 / -1 !important;
  }

  .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .toolbar-actions button,
  .form-footer-row button,
  .primary-btn,
  .secondary-btn,
  .ghost-btn,
  .danger-btn {
    min-height: 40px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .table-head,
  .records-result-head,
  .user-table-head,
  .work-review-head,
  .operator-evaluation-head,
  .settings-section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .table-head h2,
  .work-review-head h2,
  .operator-evaluation-head h2,
  .settings-section-head h2,
  .config-card h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .pill {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .summary-grid,
  .summary-rank-trend-grid,
  .work-review-layout,
  .business-insights-grid,
  .parent-channel-grid,
  .issue-highlight-grid,
  .user-overview-grid,
  .settings-layout,
  .settings-form-grid,
  #usersPanel .user-admin-layout,
  #usersPanel .permission-grid,
  #usersPanel .permission-scope {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .business-insights-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .insight-kpi-card b {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }

  .insight-rank-list,
  .records-list,
  .logs-list,
  .users-list,
  .issue-report-list {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .record-item,
  .log-item,
  .user-row,
  .issue-report-item,
  .insight-rank-item {
    border-radius: 14px !important;
    padding: 12px !important;
  }

  .user-tools {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .user-search-input {
    grid-column: 1 / -1 !important;
  }

  .row.two-cols,
  .row.three-cols,
  .auto-sync-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .modal-card,
  .record-template-modal,
  .create-user-modal,
  .issue-modal-card {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    overflow: auto !important;
  }

  .modal-head h2 {
    font-size: 20px !important;
  }

  .chat-business-chart {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .chat-chart-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chat-chart-bar-row {
    grid-template-columns: 56px minmax(0, 1fr) 44px !important;
  }

  .sign-deduct-panel,
  .hourly-monitor-panel {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .sign-deduct-frame,
  .hourly-monitor-frame,
  .sign-deduct-shell,
  .hourly-monitor-shell {
    width: 100% !important;
    height: calc(100dvh - 56px - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  .sync-log-status-grid,
  .sync-run-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* responsive-fit-20260622: keep every module usable on small desktop/tablet/mobile widths */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-shell,
.workspace,
.panel,
.config-card,
.table-card,
.summary-card,
.module-pane,
.records-toolbar,
.business-insights-toolbar,
.logs-toolbar,
.issue-toolbar,
.section-switch-row,
.hub-tabs,
.module-tabs,
.users-list,
.records-list,
.logs-list,
.issue-report-list,
.business-insights-grid,
.business-insights-meta,
.settings-layout,
.settings-form-grid,
.user-admin-layout,
.user-row,
.record-item,
.log-item,
.issue-report-item,
.insight-rank-item,
.hourly-monitor-panel,
.sign-deduct-panel {
  min-width: 0 !important;
  max-width: 100% !important;
}

img,
svg,
canvas,
iframe,
table {
  max-width: 100%;
}

.section-switch-row,
.hub-tabs,
.module-tabs,
.date-shortcuts {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.section-switch-row::-webkit-scrollbar,
.hub-tabs::-webkit-scrollbar,
.module-tabs::-webkit-scrollbar,
.date-shortcuts::-webkit-scrollbar {
  display: none;
}

.hub-tab,
.module-tab,
.date-shortcuts button,
.toolbar-actions button,
.row-actions button,
.user-card-actions button,
.inline-actions button {
  white-space: nowrap !important;
}

.row-actions,
.user-card-actions,
.toolbar-actions,
.inline-actions,
.form-footer-row,
.user-tools {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.user-row-main,
.record-content,
.log-content,
.issue-report-text,
.insight-rank-item,
.sync-log-status-grid div {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 761px) and (max-width: 1360px) {
  .app-shell {
    grid-template-columns: clamp(184px, 16vw, 214px) minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100vw !important;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .sidebar {
    width: auto !important;
    min-width: 0 !important;
    padding: 16px 8px 12px !important;
    overflow-x: hidden !important;
  }

  .side-brand {
    gap: 8px !important;
    padding: 0 34px 14px 8px !important;
  }

  .side-brand strong,
  .brand-title {
    font-size: 15px !important;
  }

  .side-brand span,
  .desktop-side-extra {
    display: none !important;
  }

  .side-nav {
    gap: 4px !important;
  }

  .nav-item {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .side-footer {
    padding: 8px !important;
  }

  .panel {
    width: 100% !important;
    padding: 18px clamp(14px, 2vw, 24px) !important;
    gap: 14px !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
  }

  .panel-header {
    min-height: auto !important;
    margin-bottom: 8px !important;
  }

  .panel-header h1 {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }

  .section-switch-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 2px !important;
  }

  .section-switch-row .hub-tabs,
  .section-switch-row .module-tabs {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .section-switch-row .hub-tab,
  .section-switch-row .module-tab {
    min-width: max-content !important;
    padding-inline: 16px !important;
  }

  .config-card,
  .table-card,
  .summary-card,
  .work-review-card,
  .operator-evaluation-card,
  .issue-highlight-card,
  .sync-log-overview-card {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .records-toolbar,
  .logs-toolbar,
  .business-insights-toolbar,
  .issue-toolbar,
  .summary-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .records-toolbar .date-shortcuts,
  .logs-toolbar .date-shortcuts,
  .business-insights-toolbar .date-shortcuts,
  .issue-toolbar .date-shortcuts,
  .summary-toolbar .date-shortcuts,
  .records-toolbar .toolbar-actions,
  .logs-toolbar .toolbar-actions,
  .business-insights-toolbar .toolbar-actions,
  .issue-toolbar .toolbar-actions,
  .summary-toolbar .toolbar-actions,
  .records-toolbar .form-msg,
  .logs-toolbar .form-msg,
  .business-insights-toolbar .form-msg,
  .issue-toolbar .form-msg,
  .summary-toolbar .form-msg {
    grid-column: 1 / -1 !important;
  }

  .date-shortcuts {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  .toolbar-actions {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .business-insights-meta,
  .parent-channel-meta,
  .sync-log-status-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .business-insights-grid,
  .parent-channel-grid,
  .summary-rank-trend-grid,
  .work-review-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .summary-grid,
  .issue-highlight-grid,
  .chat-chart-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #usersPanel .user-admin-layout,
  .settings-layout,
  .settings-form-grid,
  #usersPanel .permission-grid,
  #usersPanel .permission-scope {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .user-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .user-table-head,
  .table-head,
  .settings-section-head,
  .admin-card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .user-table-head {
    flex-direction: column !important;
  }

  .user-tools {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) minmax(130px, auto) minmax(130px, auto) auto !important;
    gap: 8px !important;
  }

  .user-search-input {
    min-width: 0 !important;
    width: 100% !important;
  }

  #usersPanel .user-card-head,
  .user-card-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .user-card-actions,
  .row-actions {
    justify-content: flex-start !important;
  }

  .modal-card,
  .create-user-modal,
  .record-template-modal,
  .issue-modal-card {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding: 14px 8px !important;
  }

  .side-brand {
    justify-content: center !important;
    padding: 0 0 12px !important;
  }

  .side-brand > div:not(.spark),
  .side-nav .desktop-label,
  .side-footer,
  .side-section-title,
  .desktop-side-extra {
    display: none !important;
  }

  .sidebar-toggle {
    position: static !important;
    margin: 0 auto !important;
  }

  .nav-item {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 14px !important;
  }

  .nav-icon {
    margin: 0 !important;
  }

  .panel {
    padding: 16px 12px !important;
  }

  .panel-header h1 {
    font-size: 25px !important;
  }

  .records-toolbar,
  .logs-toolbar,
  .business-insights-toolbar,
  .issue-toolbar,
  .summary-toolbar,
  .summary-grid,
  .issue-highlight-grid,
  .business-insights-meta,
  .parent-channel-meta,
  .sync-log-status-grid,
  .user-overview-grid,
  .chat-chart-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .user-tools {
    grid-template-columns: minmax(0, 1fr) minmax(118px, auto) minmax(118px, auto) auto !important;
  }

  .settings-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .workspace,
  .panel {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .panel {
    padding-inline: 12px !important;
  }

  .panel-header h1 {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  .section-switch-row {
    overflow: hidden !important;
  }

  .hub-tabs,
  .module-tabs {
    max-width: 100% !important;
  }

  .records-toolbar,
  .logs-toolbar,
  .business-insights-toolbar,
  .issue-toolbar,
  .summary-toolbar,
  .settings-form-grid,
  .user-tools,
  .sync-log-status-grid,
  .business-insights-meta,
  .parent-channel-meta,
  .summary-grid,
  .issue-highlight-grid,
  .user-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .toolbar-actions,
  .form-footer-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  .toolbar-actions button,
  .form-footer-row button {
    width: 100% !important;
  }

  .table-head,
  .records-result-head,
  .user-table-head,
  .settings-section-head,
  .admin-card-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #usersPanel .user-card-head,
  .user-card-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .row-actions,
  .user-card-actions,
  .inline-actions {
    justify-content: flex-start !important;
  }

  .user-card-actions button,
  .row-actions button,
  .inline-actions button {
    flex: 1 1 128px !important;
  }
}

@media (max-width: 520px) {
  .panel {
    padding-inline: 10px !important;
  }

  .config-card,
  .table-card,
  .summary-card,
  .work-review-card,
  .operator-evaluation-card,
  .issue-highlight-card,
  .sync-log-overview-card {
    padding: 12px !important;
  }

  .toolbar-actions,
  .form-footer-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hub-tab,
  .module-tab {
    min-width: 68px !important;
    padding-inline: 12px !important;
  }

  .chat-chart-bar-row {
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
  }
}

/* qingyun-20260623: MiMo speech recognition input */
#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  grid-template-columns: 96px minmax(0, 1fr) auto 44px 44px !important;
}

#chatPanel > form.composer .mode-select,
#chatPanel.has-chat > form.composer .mode-select {
  grid-column: 1 !important;
}

#chatPanel > form.composer textarea,
#chatPanel.has-chat > form.composer textarea {
  grid-column: 2 !important;
}

#chatPanel > form.composer .web-search-toggle,
#chatPanel.has-chat > form.composer .web-search-toggle {
  grid-column: 3 !important;
}

#chatPanel > form.composer .voice-input-btn,
#chatPanel.has-chat > form.composer .voice-input-btn {
  grid-column: 4 !important;
}

#chatPanel > form.composer .send-btn,
#chatPanel.has-chat > form.composer .send-btn {
  grid-column: 5 !important;
}

.voice-input-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #d8e2ee;
  border-radius: 50%;
  background: #fff;
  color: #3c4043;
  box-shadow: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.voice-input-btn:hover {
  background: #f1f5fb;
  border-color: #c7d7fb;
  color: #174ea6;
  transform: translateY(-1px);
}

.voice-input-btn:disabled {
  cursor: wait;
  opacity: .74;
  transform: none;
}

.voice-input-btn span {
  position: relative;
  width: 12px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-sizing: border-box;
}

.voice-input-btn span::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 18px;
  height: 10px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.voice-input-btn span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 2px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.voice-input-btn.is-recording {
  background: #fce8e6;
  border-color: #f6aea9;
  color: #c5221f;
  box-shadow: 0 0 0 6px rgba(234, 67, 53, .10);
  animation: voicePulse 1.2s ease-in-out infinite;
}

.voice-input-btn.is-processing {
  background: #e8f0fe;
  border-color: #c7d7fb;
  color: #174ea6;
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(234, 67, 53, .10); }
  50% { box-shadow: 0 0 0 9px rgba(234, 67, 53, .16); }
}

@media (max-width: 760px) {
  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    grid-template-columns: 70px minmax(0, 1fr) 38px 38px 38px !important;
    gap: 6px !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel > form.composer .voice-input-btn span,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #chatPanel > form.composer .voice-input-btn span {
    width: 10px !important;
    min-width: 10px !important;
    height: 16px !important;
    min-height: 16px !important;
  }

  .voice-input-btn span::before {
    width: 16px;
    bottom: -7px;
  }

  .voice-input-btn span::after {
    bottom: -12px;
    height: 6px;
  }
}

/* qingyun-20260623: chat avatars, profile settings, and mobile chat polish */
#chatPanel > .chat-messages .message {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
}

#chatPanel > .chat-messages .message.assistant {
  justify-content: flex-start !important;
}

#chatPanel > .chat-messages .message.user {
  justify-content: flex-end !important;
}

.message-avatar,
.chat-avatar-preview {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  overflow: hidden;
  color: #174ea6;
  background: linear-gradient(135deg, #e8f0fe 0%, #ffffff 100%);
  border: 1px solid #d8e7ff;
  box-shadow: 0 8px 20px rgba(60, 64, 67, .08);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.message-avatar img,
.chat-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message-avatar.assistant-avatar {
  color: #fff;
  background: linear-gradient(135deg, #1a73e8 0%, #7c4dff 100%);
  border-color: rgba(26, 115, 232, .18);
}

.message-avatar.user-avatar,
.user-card-avatar {
  color: #fff;
  background: radial-gradient(circle at 30% 20%, #34a853 0 18%, #fbbc04 19% 40%, #ea4335 41% 62%, #4285f4 63% 100%);
  border-color: rgba(26, 115, 232, .12);
}

#chatPanel > .chat-messages .message.user .bubble {
  order: 1 !important;
}

#chatPanel > .chat-messages .message.user .message-avatar {
  order: 2 !important;
}

#chatPanel > .chat-messages .message.assistant .bubble,
#chatPanel > .chat-messages .message.user .bubble {
  max-width: min(78%, 980px) !important;
}

.profile-settings-card {
  display: grid;
  gap: 18px;
}

.profile-settings-row {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(180px, .45fr);
  gap: 14px;
  align-items: end;
}

.chat-avatar-preview {
  width: 54px;
  height: 54px;
  min-width: 54px;
  font-size: 16px;
  align-self: center;
}

.assistant-avatar-preview {
  color: #fff;
  background: linear-gradient(135deg, #1a73e8 0%, #7c4dff 100%);
}

.user-row-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.user-card-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  font-size: 15px;
}

.password-toggle-label {
  position: relative;
}

.password-toggle-label input[type="password"],
.password-toggle-label input[type="text"] {
  padding-right: 46px !important;
}

.password-eye-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.password-eye-btn:hover,
.password-eye-btn.is-visible {
  background: #e8f0fe;
  color: #174ea6;
}

.password-eye-btn span {
  position: relative;
  width: 15px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

.password-eye-btn span::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.password-eye-btn:not(.is-visible) span::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 3px;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-38deg);
}

.avatar-upload-field input[type="file"] {
  padding: 12px !important;
  cursor: pointer;
}

@media (max-width: 920px) {
  .profile-settings-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-settings-row .avatar-upload-field {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  #chatPanel .chat-announcement-card {
    display: none !important;
  }

  #chatPanel > .chat-messages {
    padding: 12px 10px calc(116px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    background: #f8fafd !important;
  }

  #chatPanel > .chat-messages .message {
    gap: 8px !important;
    padding-inline: 0 !important;
  }

  #chatPanel > .chat-messages .message-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 11px !important;
    box-shadow: 0 4px 12px rgba(60, 64, 67, .10) !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble,
  #chatPanel > .chat-messages .message.user .bubble {
    max-width: calc(100% - 42px) !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    color: #fff !important;
    background: linear-gradient(135deg, #1a73e8 0%, #5b55f6 100%) !important;
    border-color: transparent !important;
  }

  #chatPanel > .quick-actions {
    padding: 8px 12px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    background: rgba(255, 255, 255, .94) !important;
  }

  #chatPanel > .quick-actions button {
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-pager {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    gap: 6px !important;
  }

  #chatPanel > .chat-pager .pager-status {
    font-size: 13px !important;
    padding-inline: 8px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    grid-template-columns: 64px minmax(0, 1fr) 36px 36px 40px !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  #chatPanel > form.composer .mode-select {
    height: 38px !important;
    min-width: 64px !important;
    padding-inline: 10px !important;
    font-size: 14px !important;
  }

  #chatPanel > form.composer textarea {
    min-height: 38px !important;
    max-height: 104px !important;
    padding: 9px 4px !important;
    font-size: 15px !important;
  }

  #chatPanel > form.composer .web-search-label {
    display: none !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .profile-settings-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-settings-row .chat-avatar-preview,
  .profile-settings-row .avatar-upload-field {
    grid-column: 1 !important;
  }
}

/* qingyun-20260623: mobile layout repair and voice recognition wave */
#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  position: fixed !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}

.voice-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 10px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 115, 232, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  color: #1f2937;
  box-shadow: 0 14px 34px rgba(60, 64, 67, .16);
  backdrop-filter: blur(16px);
  pointer-events: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.voice-status[hidden] {
  display: none !important;
}

.voice-wave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  min-width: 34px;
}

.voice-wave i {
  display: block;
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: #1a73e8;
  animation: qingyunVoiceWave .78s ease-in-out infinite;
}

.voice-wave i:nth-child(2) { animation-delay: .09s; }
.voice-wave i:nth-child(3) { animation-delay: .18s; }
.voice-wave i:nth-child(4) { animation-delay: .27s; }
.voice-wave i:nth-child(5) { animation-delay: .36s; }

.voice-status.is-recording {
  border-color: rgba(234, 67, 53, .24);
  color: #9f1c18;
  background: rgba(255, 247, 246, .97);
}

.voice-status.is-recording .voice-wave i {
  background: #ea4335;
}

.voice-status.is-processing {
  border-color: rgba(26, 115, 232, .24);
  color: #174ea6;
  background: rgba(248, 251, 255, .98);
}

.voice-status.is-done {
  border-color: rgba(52, 168, 83, .28);
  color: #137333;
  background: rgba(246, 253, 248, .98);
}

.voice-status.is-done .voice-wave i {
  background: #34a853;
  animation-duration: 1.05s;
}

.voice-status.is-error {
  border-color: rgba(234, 67, 53, .24);
  color: #c5221f;
  background: rgba(255, 247, 246, .98);
}

.voice-status.is-error .voice-wave i {
  background: #ea4335;
  animation: none;
  height: 8px;
}

@keyframes qingyunVoiceWave {
  0%, 100% { height: 8px; opacity: .55; }
  50% { height: 22px; opacity: 1; }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .main-content,
  .workspace,
  .panel,
  #chatPanel {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #chatPanel {
    padding-inline: 0 !important;
    background: #f8fafd !important;
  }

  #chatPanel .sync-panel-wrap,
  #chatPanel .chat-capture-grid,
  #chatPanel .chat-announcement-card {
    display: none !important;
  }

  #chatPanel > .quick-actions {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(218, 220, 224, .7) !important;
    background: rgba(255, 255, 255, .96) !important;
    scrollbar-width: none;
  }

  #chatPanel > .quick-actions::-webkit-scrollbar {
    display: none;
  }

  #chatPanel > .quick-actions .quick-actions-title {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    color: #5f6368 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions button {
    flex: 0 0 auto !important;
    min-width: auto !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-messages {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(100vh - 260px) !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 14px 12px calc(144px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }

  #chatPanel > .chat-messages .message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 7px !important;
  }

  #chatPanel > .chat-messages .message-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    align-self: flex-end !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble,
  #chatPanel > .chat-messages .message.user .bubble {
    width: auto !important;
    max-width: calc(100vw - 64px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 13px 15px !important;
    border-radius: 18px !important;
  }

  #chatPanel > .chat-pager {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 10px 28px rgba(60, 64, 67, .12) !important;
  }

  #chatPanel > .chat-pager:empty {
    display: none !important;
  }

  #chatPanel > .chat-pager .pager-status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 0 8px !important;
  }

  #chatPanel > .chat-pager .pager-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 34px 38px 40px !important;
    align-items: end !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 23px !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 12px 30px rgba(60, 64, 67, .16) !important;
  }

  #chatPanel > form.composer .mode-select {
    grid-column: 1 !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
  }

  #chatPanel > form.composer textarea {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    max-height: 96px !important;
    padding: 10px 2px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    overflow-y: auto !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    grid-column: 3 !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
  }

  #chatPanel > form.composer .web-search-label {
    display: none !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    grid-column: 4 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after {
    grid-column: 5 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
  }

  #chatPanel > form.composer .send-btn {
    font-size: 0 !important;
    padding: 0 !important;
  }

  #chatPanel > form.composer .voice-status {
    left: 2px !important;
    right: 2px !important;
    bottom: calc(100% + 8px) !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 18px !important;
    font-size: 13px !important;
  }

  #chatPanel > form.composer .voice-wave {
    min-width: 30px !important;
  }

  #chatPanel > form.composer .voice-wave i {
    width: 3px !important;
  }
}

/* qingyun-20260623: final desktop/mobile chat layout repair */
#chatPanel {
  overflow-x: hidden !important;
}

#chatPanel.panel.active {
  box-sizing: border-box !important;
}

#chatPanel > .sync-panel-wrap,
#chatPanel > .chat-capture-grid,
#chatPanel > .quick-actions,
#chatPanel > .chat-messages {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#chatPanel > .chat-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  min-height: calc(100vh - 360px) !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 18px 18px 142px !important;
  background: transparent !important;
}

#chatPanel > .chat-messages .message {
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

#chatPanel > .chat-messages .message.assistant {
  justify-content: flex-start !important;
}

#chatPanel > .chat-messages .message.user {
  justify-content: flex-end !important;
}

#chatPanel > .chat-messages .message-avatar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  align-self: flex-end !important;
}

#chatPanel > .chat-messages .message.user .bubble {
  order: 1 !important;
}

#chatPanel > .chat-messages .message.user .message-avatar {
  order: 2 !important;
}

#chatPanel > .chat-messages .message.assistant .bubble,
#chatPanel > .chat-messages .message.user .bubble {
  width: auto !important;
  max-width: min(760px, calc(100% - 54px)) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.62 !important;
}

#chatPanel > .chat-messages .message.assistant .bubble {
  margin-left: 0 !important;
}

#chatPanel > .chat-messages .message.user .bubble {
  margin-right: 0 !important;
}

#chatPanel > .chat-pager {
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: 86px !important;
  transform: none !important;
  z-index: 48 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(560px, calc(100% - 32px)) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  margin: 4px auto 18px !important;
  padding: 6px !important;
  border: 1px solid rgba(218, 220, 224, .92) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 30px rgba(60, 64, 67, .12) !important;
  backdrop-filter: blur(14px) !important;
  box-sizing: border-box !important;
}

#chatPanel > .chat-pager:empty {
  display: none !important;
}

#chatPanel > .chat-pager .pager-status {
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#chatPanel > .chat-pager .pager-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
}

#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 42px 46px 50px !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100vw - 56px) !important;
  max-width: 1080px !important;
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 8px 10px 8px 16px !important;
  border: 1px solid rgba(218, 220, 224, .95) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 18px 46px rgba(60, 64, 67, .16) !important;
  backdrop-filter: blur(18px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#chatPanel > form.composer .mode-select {
  grid-column: 1 !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f1f3f4 !important;
  color: #202124 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

#chatPanel > form.composer textarea {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  max-height: 128px !important;
  padding: 12px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #202124 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  resize: none !important;
  overflow-y: auto !important;
}

#chatPanel > form.composer textarea::placeholder {
  color: #8a9099 !important;
}

#chatPanel > form.composer .web-search-toggle {
  grid-column: 3 !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #3c4043 !important;
}

#chatPanel > form.composer .web-search-label {
  display: none !important;
}

#chatPanel > form.composer .voice-input-btn,
#chatPanel.has-chat > form.composer .voice-input-btn {
  grid-column: 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  color: #111827 !important;
}

#chatPanel > form.composer .send-btn,
#chatPanel.has-chat > form.composer .send-btn,
#chatPanel:not(.has-chat) > form.composer .send-btn {
  grid-column: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1a73e8 0%, #5b55f6 100%) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px rgba(26, 115, 232, .24) !important;
}

#chatPanel > form.composer .send-btn::after,
#chatPanel.has-chat > form.composer .send-btn::after,
#chatPanel:not(.has-chat) > form.composer .send-btn::after {
  content: '↑' !important;
  display: grid !important;
  place-items: center !important;
  position: static !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

#chatPanel > form.composer .voice-status {
  left: 16px !important;
  right: 16px !important;
  bottom: calc(100% + 10px) !important;
}

@media (max-width: 900px) {
  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel > .quick-actions,
  #chatPanel > .chat-messages {
    width: calc(100% - 20px) !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .main-content,
  .workspace,
  #chatPanel {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #chatPanel.panel.active {
    padding: 0 !important;
    background: #f8fafd !important;
  }

  #chatPanel .panel-header,
  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel .chat-announcement-card,
  #chatPanel .record-helper-card {
    display: none !important;
  }

  #chatPanel > .quick-actions {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 1px 0 rgba(218, 220, 224, .85) !important;
    scrollbar-width: none !important;
  }

  #chatPanel > .quick-actions::-webkit-scrollbar {
    display: none !important;
  }

  #chatPanel > .quick-actions .quick-actions-title {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #5f6368 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions button {
    flex: 0 0 auto !important;
    height: 32px !important;
    min-height: 32px !important;
    min-width: auto !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-messages {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    gap: 18px !important;
    min-height: calc(100vh - 214px) !important;
    padding: 14px 10px calc(150px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  #chatPanel > .chat-messages .message {
    gap: 7px !important;
  }

  #chatPanel > .chat-messages .message-avatar {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 11px !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble,
  #chatPanel > .chat-messages .message.user .bubble {
    max-width: calc(100vw - 58px) !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    color: #fff !important;
    background: linear-gradient(135deg, #1a73e8 0%, #5b55f6 100%) !important;
    border-color: transparent !important;
  }

  #chatPanel > .chat-pager {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 6px !important;
    padding: 5px !important;
    border-radius: 18px !important;
  }

  #chatPanel > .chat-pager .pager-status {
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #chatPanel > .chat-pager .pager-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-height: 58px !important;
    grid-template-columns: 54px minmax(0, 1fr) 34px 38px 44px !important;
    gap: 5px !important;
    padding: 7px 8px 7px 10px !important;
    border-radius: 28px !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 54px !important;
    min-width: 54px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 15px !important;
  }

  #chatPanel > form.composer textarea {
    min-height: 42px !important;
    max-height: 92px !important;
    padding: 11px 2px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    font-size: 23px !important;
  }

  #chatPanel > form.composer .voice-status {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 18px !important;
    font-size: 13px !important;
  }
}

/* qingyun-20260623: restore chat canvas width and make web search state obvious */
:root {
  --qy-chat-main-width: 1248px;
}

#chatPanel > .sync-panel-wrap,
#chatPanel > .chat-capture-grid,
#chatPanel > .quick-actions,
#chatPanel > .chat-messages {
  width: min(var(--qy-chat-main-width), calc(100% - 48px)) !important;
  max-width: var(--qy-chat-main-width) !important;
}

#chatPanel > .chat-capture-grid .chat-announcement-card,
#chatPanel > .chat-capture-grid .record-helper-card {
  width: 100% !important;
  max-width: 100% !important;
}

#chatPanel > .chat-capture-grid {
  gap: 12px !important;
}

#chatPanel > .chat-capture-grid .record-template-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#chatPanel > .chat-capture-grid .record-template-grid button {
  min-width: 0 !important;
  width: 100% !important;
}

#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  width: calc(100vw - 64px) !important;
  max-width: var(--qy-chat-main-width) !important;
}

#chatPanel > form.composer .web-search-toggle {
  position: relative !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#chatPanel > form.composer .web-search-toggle:hover {
  background: #e8f0fe !important;
  color: #174ea6 !important;
  transform: translateY(-1px) !important;
}

#chatPanel > form.composer .web-search-toggle.checked {
  background: linear-gradient(135deg, #1a73e8 0%, #5b55f6 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(26, 115, 232, .14), 0 10px 24px rgba(26, 115, 232, .22) !important;
}

#chatPanel > form.composer .web-search-toggle.checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #34a853 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 3px 8px rgba(52, 168, 83, .26) !important;
}

#chatPanel > form.composer .web-search-toggle.checked .web-search-icon {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (min-width: 761px) {
  #chatPanel > form.composer .web-search-toggle.checked {
    animation: qy-web-search-active-pulse 1.9s ease-in-out infinite;
  }
}

@keyframes qy-web-search-active-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(26, 115, 232, .14), 0 10px 24px rgba(26, 115, 232, .22);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(26, 115, 232, .08), 0 12px 28px rgba(26, 115, 232, .26);
  }
}

@media (max-width: 900px) {
  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel > .quick-actions,
  #chatPanel > .chat-messages {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 760px) {
  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel > .quick-actions,
  #chatPanel > .chat-messages {
    width: 100% !important;
    max-width: 100vw !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    width: auto !important;
    max-width: none !important;
  }

  #chatPanel > form.composer .web-search-toggle.checked {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .16), 0 8px 18px rgba(26, 115, 232, .20) !important;
  }
}

/* qingyun-20260623: hard chat stage clamp for desktop and compact mobile controls */
:root {
  --qy-chat-stage-width: 1120px;
  --qy-chat-stage-gutter: 32px;
}

#chatPanel.panel.active {
  overflow-x: hidden !important;
}

#chatPanel > .sync-panel-wrap,
#chatPanel > .chat-capture-grid,
#chatPanel > .quick-actions,
#chatPanel > .chat-messages,
#chatPanel > .chat-pager,
#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  box-sizing: border-box !important;
}

@media (min-width: 761px) {
  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel > .quick-actions,
  #chatPanel > .chat-messages {
    width: min(var(--qy-chat-stage-width), calc(100% - var(--qy-chat-stage-gutter))) !important;
    max-width: var(--qy-chat-stage-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #chatPanel > .sync-panel-wrap {
    overflow: hidden !important;
  }

  #chatPanel > .sync-panel-wrap.collapsed {
    max-height: 52px !important;
  }

  #chatPanel > .sync-panel-wrap .sync-toggle-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #chatPanel > .sync-panel-wrap .sync-toolbar {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #chatPanel > .chat-capture-grid {
    display: block !important;
    overflow: hidden !important;
  }

  #chatPanel > .chat-capture-grid .chat-announcement-card,
  #chatPanel > .chat-capture-grid .record-helper-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #chatPanel > .chat-capture-grid .chat-announcement-card {
    margin-bottom: 12px !important;
  }

  #chatPanel > .chat-capture-grid .record-helper-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #chatPanel > .chat-capture-grid .record-template-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #chatPanel > .chat-capture-grid .record-template-grid button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #chatPanel > .quick-actions::-webkit-scrollbar {
    display: none !important;
  }

  #chatPanel > .chat-messages {
    overflow-x: hidden !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 30px !important;
  }

  #chatPanel > .chat-messages .message,
  #chatPanel > .chat-messages .message .bubble {
    min-width: 0 !important;
  }

  #chatPanel > .chat-pager {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 96px !important;
    transform: none !important;
    width: min(520px, calc(100% - 32px)) !important;
    max-width: 520px !important;
    margin: 4px auto 14px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 16px !important;
    transform: none !important;
    width: min(var(--qy-chat-stage-width), calc(100% - var(--qy-chat-stage-gutter))) !important;
    max-width: var(--qy-chat-stage-width) !important;
    min-width: 0 !important;
    margin: 0 auto 2px !important;
    grid-template-columns: 76px minmax(0, 1fr) 42px 46px 50px !important;
  }
}

@media (min-width: 761px) and (max-width: 1220px) {
  :root {
    --qy-chat-stage-gutter: 24px;
  }

  #chatPanel > .chat-capture-grid .record-template-grid {
    gap: 10px !important;
  }

  #chatPanel > .chat-capture-grid .record-template-grid button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 760px) {
  #chatPanel.panel.active {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  #chatPanel > .quick-actions {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 7px 9px 9px !important;
  }

  #chatPanel > .quick-actions .quick-actions-title {
    font-size: 12px !important;
  }

  #chatPanel > .quick-actions button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  #chatPanel > .chat-messages {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: calc(100dvh - 206px) !important;
    padding: 12px 9px calc(126px + env(safe-area-inset-bottom)) !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble,
  #chatPanel > .chat-messages .message.user .bubble {
    max-width: calc(100vw - 56px) !important;
    padding: 11px 13px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    line-height: 1.52 !important;
  }

  #chatPanel > .chat-pager {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    grid-template-columns: 30px minmax(0, 1fr) 30px !important;
    gap: 5px !important;
    padding: 4px !important;
    border-radius: 18px !important;
    z-index: 58 !important;
  }

  #chatPanel > .chat-pager .pager-status {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-pager .pager-status::after {
    content: attr(data-mobile-text) !important;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
  }

  #chatPanel > .chat-pager .pager-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 17px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-height: 50px !important;
    max-height: 56px !important;
    grid-template-columns: 42px minmax(0, 1fr) 30px 34px 38px !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 6px 5px 8px !important;
    border-radius: 25px !important;
    z-index: 60 !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 42px !important;
    min-width: 42px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 5px !important;
    font-size: 13px !important;
    line-height: 38px !important;
  }

  #chatPanel > form.composer textarea {
    min-height: 38px !important;
    max-height: 70px !important;
    padding: 9px 1px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    width: 30px !important;
    min-width: 30px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    font-size: 21px !important;
  }

  #chatPanel > form.composer .voice-status {
    left: 2px !important;
    right: 2px !important;
    bottom: calc(100% + 7px) !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
  }

  #chatPanel > form.composer .voice-wave {
    min-width: 26px !important;
  }
}

/* qingyun-20260623: chatfix5 repair announcement, bubble width, mobile pager and record tabs */
:root {
  --qy-chat-stage-width: 1120px;
  --qy-chat-stage-gutter: 32px;
}

@media (min-width: 761px) {
  #chatPanel.panel.active {
    overflow-x: hidden !important;
  }

  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel > .quick-actions,
  #chatPanel > .chat-messages,
  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    width: min(var(--qy-chat-stage-width), calc(100% - var(--qy-chat-stage-gutter))) !important;
    max-width: var(--qy-chat-stage-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #chatPanel > .chat-capture-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }

  #chatPanel > .chat-capture-grid .chat-announcement-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 88px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-capture-grid .chat-announcement-preview,
  #chatPanel > .chat-capture-grid .announcement-preview-item {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-title,
  #chatPanel > .chat-capture-grid .announcement-preview-item p,
  #chatPanel > .chat-capture-grid .announcement-preview-item footer {
    grid-column: 1 !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item footer {
    display: flex !important;
    align-items: center !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item footer .ghost-btn {
    grid-column: 2 !important;
  }

  #chatPanel > .chat-capture-grid .record-helper-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-messages {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble {
    max-width: calc(100% - 54px) !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    max-width: min(760px, calc(100% - 54px)) !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 16px !important;
    transform: none !important;
    grid-template-columns: 96px minmax(0, 1fr) 42px 46px 50px !important;
    gap: 10px !important;
    min-height: 66px !important;
    padding: 8px 10px 8px 14px !important;
    overflow: visible !important;
  }

  #chatPanel > form.composer .mode-select,
  #chatPanel.has-chat > form.composer .mode-select {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chatPanel > form.composer textarea,
  #chatPanel.has-chat > form.composer textarea {
    min-width: 0 !important;
    padding-left: 4px !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 760px) {
  #chatPanel > .chat-pager {
    display: none !important;
  }

  #chatPanel > .chat-messages {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    grid-template-columns: 58px minmax(0, 1fr) 30px 34px 38px !important;
    gap: 4px !important;
    min-height: 50px !important;
    max-height: 56px !important;
    padding: 5px 6px 5px 8px !important;
    border-radius: 25px !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 58px !important;
    min-width: 58px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }

  #chatPanel > form.composer textarea {
    min-height: 38px !important;
    max-height: 72px !important;
    padding: 9px 1px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    width: 30px !important;
    min-width: 30px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn,
  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  #recordsPanel .section-switch-row,
  #summaryPanel .section-switch-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #recordsPanel .section-switch-row .hub-tabs,
  #recordsPanel .section-switch-row .module-tabs,
  #summaryPanel .section-switch-row .hub-tabs,
  #summaryPanel .section-switch-row .module-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #recordsPanel .section-switch-row .hub-tab,
  #recordsPanel .section-switch-row .module-tab,
  #summaryPanel .section-switch-row .hub-tab,
  #summaryPanel .section-switch-row .module-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* qingyun-20260623: chatfix8 centered chat rail layout */
:root {
  --qy-chat-canvas-width: 880px;
  --qy-chat-canvas-gutter: 80px;
  --qy-chat-composer-height: 74px;
}

#chatPanel > .sync-panel-wrap,
#chatPanel > .chat-capture-grid,
#chatPanel > .quick-actions,
#chatPanel > .chat-messages,
#chatPanel > .chat-pager,
#chatPanel > form.composer,
#chatPanel.has-chat > form.composer,
#chatPanel:not(.has-chat) > form.composer {
  box-sizing: border-box !important;
}

#chatPanel > .chat-pager {
  display: none !important;
}

@media (min-width: 761px) {
  #chatPanel.panel.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
  }

  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel > .quick-actions,
  #chatPanel > .chat-messages,
  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    width: min(var(--qy-chat-canvas-width), calc(100% - var(--qy-chat-canvas-gutter))) !important;
    max-width: var(--qy-chat-canvas-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  #chatPanel > .sync-panel-wrap {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 8 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  #chatPanel > .chat-capture-grid {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 7 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-capture-grid .chat-announcement-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 92px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid #e3e8f2 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
  }

  #chatPanel > .chat-capture-grid .chat-announcement-preview {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    gap: 8px 16px !important;
    min-height: 68px !important;
    padding: 8px 12px 8px 14px !important;
    overflow: hidden !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-title,
  #chatPanel > .chat-capture-grid .announcement-preview-item p,
  #chatPanel > .chat-capture-grid .announcement-preview-item footer {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item footer {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-level {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-capture-grid .announcement-preview-item footer .ghost-btn,
  #chatPanel > .chat-capture-grid .announcement-preview-action {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-capture-grid .record-helper-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-capture-grid .record-helper-card .eyebrow,
  #chatPanel > .chat-capture-grid .record-helper-card h2,
  #chatPanel > .chat-capture-grid .record-helper-card .record-template-hint,
  #chatPanel > .chat-capture-grid .record-helper-card > p,
  #chatPanel > .chat-capture-grid .record-helper-card > div:not(.record-template-grid) {
    display: none !important;
  }

  #chatPanel > .chat-capture-grid .record-template-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #chatPanel > .chat-capture-grid .record-template-grid button {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 26px !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 6 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #chatPanel > .chat-messages {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    min-height: 560px !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 24px 0 26px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-messages .message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  #chatPanel > .chat-messages .message.assistant {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
  }

  #chatPanel > .chat-messages .message.user {
    justify-content: flex-end !important;
    padding-left: 24px !important;
    padding-right: 0 !important;
  }

  #chatPanel > .chat-messages .message-avatar {
    position: static !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #chatPanel > .chat-messages .bubble {
    position: relative !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #chatPanel > .chat-messages .bubble > * {
    max-width: 100% !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble {
    width: calc(100% - 50px) !important;
    max-width: calc(100% - 50px) !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    width: auto !important;
    max-width: min(760px, calc(100% - 50px)) !important;
  }

  #chatPanel .bubble .chat-business-chart,
  #chatPanel .bubble .chat-chart-bars,
  #chatPanel .bubble .ranking-chart,
  #chatPanel .bubble table {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  #chatPanel .bubble .chat-chart-bar-row {
    min-width: 0 !important;
    grid-template-columns: minmax(82px, 120px) minmax(0, 1fr) auto !important;
  }

  #chatPanel > .chat-pager {
    display: none !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    flex: 0 0 auto !important;
    position: sticky !important;
    z-index: 14 !important;
    bottom: 14px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 44px 48px 52px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: var(--qy-chat-composer-height) !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 9px 11px 9px 14px !important;
    border-radius: 37px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #dfe6f2 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
    overflow: visible !important;
  }

  #chatPanel > form.composer .mode-select,
  #chatPanel.has-chat > form.composer .mode-select {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 48px !important;
    min-height: 48px !important;
    align-self: center !important;
    padding: 0 10px !important;
    border-radius: 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chatPanel > form.composer textarea,
  #chatPanel.has-chat > form.composer textarea,
  #chatPanel:not(.has-chat) > form.composer textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    max-height: 120px !important;
    align-self: center !important;
    padding: 13px 4px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    overflow-x: hidden !important;
    resize: none !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 24px !important;
  }

  #chatPanel > form.composer .web-search-toggle.checked {
    background: #e8f0fe !important;
    border-color: #1a73e8 !important;
    box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.18), 0 6px 16px rgba(26, 115, 232, 0.18) !important;
  }

  #chatPanel > form.composer .web-search-toggle.checked::after {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #1a73e8 !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    line-height: 52px !important;
    font-size: 26px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --qy-mobile-composer-height: 58px;
  }

  #chatPanel.panel.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    padding-bottom: calc(var(--qy-mobile-composer-height) + 20px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  #chatPanel .panel-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 22 !important;
  }

  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel .chat-announcement-card,
  #chatPanel .record-helper-card,
  #chatPanel > .chat-pager {
    display: none !important;
  }

  #chatPanel > .quick-actions {
    position: sticky !important;
    top: 76px !important;
    z-index: 21 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #edf1f7 !important;
    border-bottom: 1px solid #edf1f7 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
  }

  #chatPanel > .quick-actions .quick-actions-title {
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions button {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 17px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-messages {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 12px calc(var(--qy-mobile-composer-height) + 42px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-messages .message {
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #chatPanel > .chat-messages .message.assistant {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 36px !important;
  }

  #chatPanel > .chat-messages .message.user {
    justify-content: flex-end !important;
    padding-left: 36px !important;
    padding-right: 0 !important;
  }

  #chatPanel > .chat-messages .message-avatar {
    position: static !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #chatPanel > .chat-messages .bubble {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 76px) !important;
    padding: 13px 15px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    max-width: calc(100vw - 92px) !important;
  }

  #chatPanel .bubble .chat-business-chart,
  #chatPanel .bubble .chat-chart-bars,
  #chatPanel .bubble .ranking-chart,
  #chatPanel .bubble table {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  #chatPanel .bubble .chat-chart-bar-row {
    min-width: 0 !important;
    grid-template-columns: minmax(64px, 92px) minmax(0, 1fr) auto !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: fixed !important;
    z-index: 40 !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 34px 38px 42px !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: var(--qy-mobile-composer-height) !important;
    max-height: var(--qy-mobile-composer-height) !important;
    margin: 0 !important;
    padding: 6px 7px 6px 8px !important;
    border-radius: calc(var(--qy-mobile-composer-height) / 2) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #dfe6f2 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
    overflow: visible !important;
    transform: none !important;
  }

  #chatPanel > form.composer .mode-select {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
    line-height: 44px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chatPanel > form.composer textarea,
  #chatPanel.has-chat > form.composer textarea,
  #chatPanel:not(.has-chat) > form.composer textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 11px 2px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    resize: none !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
  }

  #chatPanel > form.composer .web-search-toggle.checked {
    background: #e8f0fe !important;
    border-color: #1a73e8 !important;
    box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.18) !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
    font-size: 21px !important;
  }

  #chatPanel > form.composer .voice-status {
    left: 2px !important;
    right: 2px !important;
    bottom: calc(100% + 7px) !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 19px !important;
    font-size: 12px !important;
  }

  #recordsPanel .section-switch-row,
  #summaryPanel .section-switch-row,
  #configPanel .section-switch-row,
  #businessPanel .section-switch-row,
  #auditPanel .section-switch-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #recordsPanel .section-switch-row .hub-tabs,
  #recordsPanel .section-switch-row .module-tabs,
  #summaryPanel .section-switch-row .hub-tabs,
  #summaryPanel .section-switch-row .module-tabs,
  #configPanel .section-switch-row .hub-tabs,
  #configPanel .section-switch-row .module-tabs,
  #businessPanel .section-switch-row .hub-tabs,
  #businessPanel .section-switch-row .module-tabs,
  #auditPanel .section-switch-row .hub-tabs,
  #auditPanel .section-switch-row .module-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #recordsPanel .section-switch-row .hub-tab,
  #recordsPanel .section-switch-row .module-tab,
  #summaryPanel .section-switch-row .hub-tab,
  #summaryPanel .section-switch-row .module-tab,
  #configPanel .section-switch-row .hub-tab,
  #configPanel .section-switch-row .module-tab,
  #businessPanel .section-switch-row .hub-tab,
  #businessPanel .section-switch-row .module-tab,
  #auditPanel .section-switch-row .hub-tab,
  #auditPanel .section-switch-row .module-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* qingyun-20260623: mobilefix3 compact chat and records layout */
@media (max-width: 760px) {
  :root {
    --qy-mobile-composer-height: 52px;
    --qy-mobile-page-gutter: 10px;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  #chatPanel.panel.active {
    min-height: 100dvh !important;
    padding-bottom: calc(var(--qy-mobile-composer-height) + 26px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  #chatPanel .panel-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 24 !important;
  }

  #chatPanel > .sync-panel-wrap,
  #chatPanel > .chat-capture-grid,
  #chatPanel .chat-announcement-card,
  #chatPanel .record-helper-card,
  #chatPanel > .chat-pager {
    display: none !important;
  }

  #chatPanel > .quick-actions {
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: calc(100% + 20px) !important;
    max-width: calc(100% + 20px) !important;
    min-height: 46px !important;
    margin: 0 -10px 6px !important;
    padding: 7px 10px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #edf1f7 !important;
    border-bottom: 1px solid #edf1f7 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #chatPanel > .quick-actions::-webkit-scrollbar {
    display: none !important;
  }

  #chatPanel > .quick-actions .quick-actions-title {
    flex: 0 0 auto !important;
    margin: 0 2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
  }

  #chatPanel > .chat-messages {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 10px calc(var(--qy-mobile-composer-height) + 42px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #chatPanel > .chat-messages .message {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  #chatPanel > .chat-messages .message.assistant {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 26px !important;
  }

  #chatPanel > .chat-messages .message.user {
    justify-content: flex-end !important;
    padding-left: 26px !important;
    padding-right: 0 !important;
  }

  #chatPanel > .chat-messages .message-avatar {
    position: static !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #chatPanel > .chat-messages .bubble {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 68px) !important;
    padding: 11px 13px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #chatPanel > .chat-messages .message.assistant .bubble {
    max-width: calc(100vw - 64px) !important;
  }

  #chatPanel > .chat-messages .message.user .bubble {
    max-width: calc(100vw - 86px) !important;
  }

  #chatPanel .bubble .chat-business-chart,
  #chatPanel .bubble .chat-chart-bars,
  #chatPanel .bubble .ranking-chart,
  #chatPanel .bubble table {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  #chatPanel .bubble .chat-chart-bar-row {
    min-width: 0 !important;
    grid-template-columns: minmax(58px, 82px) minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  #chatPanel > form.composer,
  #chatPanel.has-chat > form.composer,
  #chatPanel:not(.has-chat) > form.composer {
    position: fixed !important;
    z-index: 42 !important;
    left: max(var(--qy-mobile-page-gutter), env(safe-area-inset-left)) !important;
    right: max(var(--qy-mobile-page-gutter), env(safe-area-inset-right)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--qy-mobile-composer-height) !important;
    min-height: var(--qy-mobile-composer-height) !important;
    max-height: var(--qy-mobile-composer-height) !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 32px 36px 40px !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    border-radius: calc(var(--qy-mobile-composer-height) / 2) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #dfe6f2 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
    overflow: visible !important;
    transform: none !important;
  }

  #chatPanel > form.composer .mode-select,
  #chatPanel.has-chat > form.composer .mode-select,
  #chatPanel:not(.has-chat) > form.composer .mode-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #f1f3f4 !important;
    color: #202124 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
    text-align: center !important;
    text-align-last: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  #chatPanel > form.composer textarea,
  #chatPanel.has-chat > form.composer textarea,
  #chatPanel:not(.has-chat) > form.composer textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 10px 1px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 20px !important;
    overflow: hidden !important;
    resize: none !important;
  }

  #chatPanel > form.composer textarea::placeholder {
    font-size: 13px !important;
    color: #8a8f98 !important;
  }

  #chatPanel > form.composer .web-search-toggle {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 20px !important;
  }

  #chatPanel > form.composer .web-search-label {
    display: none !important;
  }

  #chatPanel > form.composer .web-search-toggle.checked {
    color: #fff !important;
    background: #1a73e8 !important;
    border-color: #1a73e8 !important;
    box-shadow: 0 6px 14px rgba(26, 115, 232, 0.24) !important;
  }

  #chatPanel > form.composer .web-search-toggle.checked::after {
    display: none !important;
  }

  #chatPanel > form.composer .voice-input-btn,
  #chatPanel.has-chat > form.composer .voice-input-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 20px !important;
  }

  #chatPanel > form.composer .send-btn,
  #chatPanel.has-chat > form.composer .send-btn,
  #chatPanel:not(.has-chat) > form.composer .send-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  #chatPanel > form.composer .send-btn::after,
  #chatPanel.has-chat > form.composer .send-btn::after,
  #chatPanel:not(.has-chat) > form.composer .send-btn::after {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    font-size: 20px !important;
  }

  #chatPanel > form.composer .voice-status {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 7px) !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
  }

  #recordsPanel.panel.active,
  #summaryPanel.panel.active {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  #recordsPanel .section-switch-row,
  #summaryPanel .section-switch-row {
    position: relative !important;
    z-index: 8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 84px !important;
    max-height: none !important;
    margin: 0 0 14px !important;
    padding: 4px !important;
    overflow: visible !important;
    border-radius: 20px !important;
    background: #eef2f7 !important;
    border: 1px solid #e1e7f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
  }

  #recordsPanel .section-switch-row .hub-tabs,
  #recordsPanel .section-switch-row .module-tabs,
  #summaryPanel .section-switch-row .hub-tabs,
  #summaryPanel .section-switch-row .module-tabs {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
  }

  #recordsPanel .section-switch-row .hub-tabs::-webkit-scrollbar,
  #recordsPanel .section-switch-row .module-tabs::-webkit-scrollbar,
  #summaryPanel .section-switch-row .hub-tabs::-webkit-scrollbar,
  #summaryPanel .section-switch-row .module-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #recordsPanel .section-switch-row .hub-tab,
  #recordsPanel .section-switch-row .module-tab,
  #summaryPanel .section-switch-row .hub-tab,
  #summaryPanel .section-switch-row .module-tab {
    flex: 1 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
  }

  #recordsPanel .records-toolbar,
  #summaryPanel .summary-toolbar {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    margin-top: 0 !important;
  }

  #recordsPanel .records-toolbar .quick-date-tabs,
  #summaryPanel .summary-toolbar .summary-date-tabs {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #recordsPanel .table-card {
    position: relative !important;
    padding-bottom: 82px !important;
  }

  #recordsPanel .records-list {
    padding-bottom: 4px !important;
  }

  #recordsPanel #recordsPager {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 36 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border-radius: 27px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #dfe6f2 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden !important;
  }

  #recordsPanel #recordsPager:empty {
    display: none !important;
  }

  #recordsPanel #recordsPager .pager-status,
  #recordsPanel #recordsPager span {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 19px !important;
    font-size: 13px !important;
    line-height: 38px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #recordsPanel #recordsPager .pager-btn,
  #recordsPanel #recordsPager button {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 20px !important;
    font-size: 20px !important;
  }
}

/* qingyun-20260629: keep the chat top slot mutually exclusive */
#chatPanel .chat-announcement-preview[hidden],
#chatPanel .chat-optimizer-podium[hidden] {
  display: none !important;
}

/* qingyun-20260629: mobile chat quick strip becomes optimizer rank */
.mobile-quick-title,
#chatPanel > .quick-actions .mobile-optimizer-rank-strip {
  display: none;
}

@media (max-width: 760px) {
  #chatPanel > .quick-actions {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: min(100% - 24px, 720px) !important;
    max-width: min(100% - 24px, 720px) !important;
    min-height: 50px !important;
    margin: 0 auto 8px !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
    border-width: 1px 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
  }

  #chatPanel > .quick-actions .desktop-quick-title {
    display: none !important;
  }

  #chatPanel > .quick-actions .mobile-quick-title {
    display: inline !important;
  }

  #chatPanel > .quick-actions .quick-actions-title {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 72px !important;
    height: 32px !important;
    margin: 0 !important;
    color: #3c4043 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions > button {
    display: none !important;
  }

  #chatPanel > .quick-actions .mobile-optimizer-rank-strip {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    color: #5f6368 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions .mobile-optimizer-rank-strip::-webkit-scrollbar {
    display: none !important;
  }

  #chatPanel > .quick-actions .mobile-optimizer-rank-strip[hidden] {
    display: none !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip {
    display: inline-grid !important;
    grid-template-columns: 20px minmax(42px, auto) auto !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: 150px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px 0 7px !important;
    border: 1px solid #e3e8f2 !important;
    border-radius: 17px !important;
    background: #f4f6f9 !important;
    color: #202124 !important;
    box-shadow: none !important;
    line-height: 1 !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip i {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #e8f0fe !important;
    color: #185abc !important;
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip.rank-1 i {
    background: #fff4d8 !important;
    color: #b06000 !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip.rank-2 i {
    background: #edf2f7 !important;
    color: #52616f !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip.rank-3 i {
    background: #fff0df !important;
    color: #9a4d00 !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip b {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  #chatPanel > .quick-actions .mobile-rank-chip span {
    color: #1a73e8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #chatPanel > .quick-actions .mobile-optimizer-rank-strip.empty {
    justify-content: flex-start !important;
    padding-left: 2px !important;
  }
}