:root {
  --formal-canvas: #f4f5f6;
  --formal-surface: #ffffff;
  --formal-soft: #f8f9fa;
  --formal-warm: #f7f3eb;
  --formal-ink: #171c24;
  --formal-muted: #69717f;
  --formal-quiet: #9299a5;
  --formal-line: #e1e4e8;
  --formal-line-strong: #cfd4da;
  --formal-nav: #182335;
  --formal-nav-soft: #223148;
  --formal-gold: #9a7a43;
  --formal-gold-soft: #eee4d2;
  --formal-green: #1d6656;
  --formal-green-soft: #e4f0ec;
  --formal-coral: #b34a44;
  --formal-coral-soft: #f6e8e6;
  --formal-shadow: 0 12px 32px rgba(24, 35, 53, 0.08);
}

body.formal-ui-refresh {
  min-width: 320px;
  margin: 0;
  background: var(--formal-canvas);
  color: var(--formal-ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body.formal-ui-refresh *,
body.formal-ui-refresh *::before,
body.formal-ui-refresh *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

body.formal-ui-refresh button,
body.formal-ui-refresh input,
body.formal-ui-refresh textarea,
body.formal-ui-refresh select {
  font: inherit;
}

body.formal-ui-refresh button {
  cursor: pointer;
}

body.formal-ui-refresh button:focus-visible,
body.formal-ui-refresh input:focus-visible,
body.formal-ui-refresh textarea:focus-visible,
body.formal-ui-refresh select:focus-visible {
  outline: 3px solid rgba(49, 94, 140, 0.18);
  outline-offset: 1px;
}

/* Headquarters */
body.formal-ui-refresh .app-shell {
  min-height: 100vh;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--formal-canvas);
}

body.formal-ui-refresh .sidebar {
  width: auto;
  height: 100vh;
  gap: 18px;
  padding: 22px 14px 16px;
  border-right: 0;
  background: var(--formal-nav);
  color: #eef2f6;
  box-shadow: none;
  backdrop-filter: none;
}

body.formal-ui-refresh .brand {
  min-height: 56px;
  padding: 0 7px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.formal-ui-refresh .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2e3c6;
  color: var(--formal-nav);
  box-shadow: none;
}

body.formal-ui-refresh .brand strong {
  color: #fff;
  font-size: 15px;
}

body.formal-ui-refresh .brand span {
  color: #9ba8b8;
  font-size: 10px;
}

body.formal-ui-refresh .side-nav {
  gap: 4px;
}

body.formal-ui-refresh .nav-item,
body.formal-ui-refresh .utility-button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c9d1dc;
}

body.formal-ui-refresh .nav-item:hover,
body.formal-ui-refresh .utility-button:hover {
  border: 0;
  background: var(--formal-nav-soft);
  color: #fff;
}

body.formal-ui-refresh .nav-item.is-active,
body.formal-ui-refresh .utility-button.is-active {
  border: 0;
  background: #f1e5cf;
  color: var(--formal-nav);
  box-shadow: none;
}

body.formal-ui-refresh .utility-button {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.06);
}

body.formal-ui-refresh .main-area {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.formal-ui-refresh .topbar {
  min-height: 68px;
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 18px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--formal-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

body.formal-ui-refresh .module-switcher {
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--formal-line);
  border-radius: 7px;
  background: var(--formal-soft);
}

body.formal-ui-refresh .module-button {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--formal-muted);
}

body.formal-ui-refresh .module-button.is-active {
  background: #fff;
  color: var(--formal-ink);
  box-shadow: 0 1px 4px rgba(24, 35, 53, 0.1);
}

body.formal-ui-refresh .subscription-button,
body.formal-ui-refresh .search-box,
body.formal-ui-refresh .icon-button,
body.formal-ui-refresh .square-button {
  min-height: 38px;
  border: 1px solid var(--formal-line);
  border-radius: 6px;
  background: #fff;
  color: var(--formal-ink);
  box-shadow: none;
}

body.formal-ui-refresh .subscription-button {
  padding: 0 12px;
  color: var(--formal-gold);
}

body.formal-ui-refresh .search-box {
  width: min(300px, 29vw);
  background: var(--formal-soft);
}

body.formal-ui-refresh .workspace-tabs {
  min-height: 52px;
  gap: 6px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--formal-line);
  background: #fff;
}

body.formal-ui-refresh .workspace-tab {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--formal-muted);
  box-shadow: none;
}

body.formal-ui-refresh .workspace-tab.is-active {
  border-color: var(--formal-line);
  background: var(--formal-soft);
  color: var(--formal-ink);
}

body.formal-ui-refresh .content-shell {
  padding: 24px;
}

body.formal-ui-refresh .page-panel {
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.formal-ui-refresh .page-panel::before {
  display: none;
}

body.formal-ui-refresh .beauty-os-page {
  display: grid;
  gap: 16px;
}

body.formal-ui-refresh .beauty-os-hero {
  min-height: 0;
  padding: 4px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--formal-ink);
  box-shadow: none;
}

body.formal-ui-refresh .beauty-os-hero .eyebrow {
  color: var(--formal-gold);
}

body.formal-ui-refresh .beauty-os-hero h1 {
  color: var(--formal-ink);
  font-size: clamp(25px, 2.3vw, 34px);
}

body.formal-ui-refresh .beauty-os-hero span {
  color: var(--formal-muted);
}

body.formal-ui-refresh .beauty-os-actions button,
body.formal-ui-refresh .action-button,
body.formal-ui-refresh .tiny-button {
  border-radius: 6px;
  box-shadow: none;
}

body.formal-ui-refresh .beauty-os-actions .primary,
body.formal-ui-refresh .action-button.primary,
body.formal-ui-refresh .tiny-button.primary {
  border-color: var(--formal-nav);
  background: var(--formal-nav);
  color: #fff;
}

body.formal-ui-refresh .beauty-os-metrics {
  gap: 10px;
}

body.formal-ui-refresh .beauty-os-metric,
body.formal-ui-refresh .beauty-os-card,
body.formal-ui-refresh .metric-card,
body.formal-ui-refresh .table-panel,
body.formal-ui-refresh .ops-panel,
body.formal-ui-refresh .account-card,
body.formal-ui-refresh .content-card {
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .beauty-os-metric {
  min-height: 116px;
  padding: 16px;
}

body.formal-ui-refresh .beauty-os-metric span,
body.formal-ui-refresh .beauty-os-metric small {
  color: var(--formal-muted);
}

body.formal-ui-refresh .beauty-os-metric strong {
  color: var(--formal-ink);
}

body.formal-ui-refresh .beauty-os-grid {
  gap: 12px;
}

body.formal-ui-refresh .beauty-os-card {
  padding: 18px;
}

body.formal-ui-refresh .beauty-os-card.is-planned-feature {
  background: var(--formal-soft);
}

/* Agent */
body.formal-ui-refresh .agent-app {
  min-height: 100vh;
  background: var(--formal-canvas);
}

body.formal-ui-refresh .agent-shell {
  min-height: 100vh;
  grid-template-columns: 224px minmax(0, 1fr);
  background: var(--formal-canvas);
}

body.formal-ui-refresh .agent-sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 24px 14px 16px;
  border-right: 0;
  background: var(--formal-nav);
  color: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .agent-sidebar > strong {
  color: #fff;
  font-size: 18px;
}

body.formal-ui-refresh .agent-sidebar > span {
  color: #9ba8b8;
}

body.formal-ui-refresh .agent-tabs {
  gap: 4px;
}

body.formal-ui-refresh .agent-tabs button,
body.formal-ui-refresh .agent-account-actions button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c9d1dc;
  box-shadow: none;
}

body.formal-ui-refresh .agent-tabs button:hover,
body.formal-ui-refresh .agent-account-actions button:hover {
  background: var(--formal-nav-soft);
  color: #fff;
}

body.formal-ui-refresh .agent-tabs button.is-active {
  background: #f1e5cf;
  color: var(--formal-nav);
}

body.formal-ui-refresh .agent-main {
  min-width: 0;
  padding: 24px;
}

body.formal-ui-refresh .agent-head {
  min-height: 0;
  align-items: flex-end;
  padding: 2px 0 18px;
  border: 0;
  background: transparent;
}

body.formal-ui-refresh .agent-head h1 {
  margin: 4px 0 7px;
  color: var(--formal-ink);
  font-size: clamp(25px, 2.3vw, 34px);
}

body.formal-ui-refresh .agent-head > div > span,
body.formal-ui-refresh .agent-head .eyebrow {
  color: var(--formal-muted);
}

body.formal-ui-refresh .agent-head .eyebrow {
  color: var(--formal-gold);
}

body.formal-ui-refresh .agent-kpis {
  gap: 8px;
}

body.formal-ui-refresh .agent-kpis > div,
body.formal-ui-refresh .agent-overview-metrics > div,
body.formal-ui-refresh .agent-panel,
body.formal-ui-refresh .agent-store-directory,
body.formal-ui-refresh .agent-content-panel,
body.formal-ui-refresh .agent-wallet-panel {
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .agent-kpis > div {
  min-width: 94px;
  padding: 11px 13px;
}

body.formal-ui-refresh .agent-overview {
  display: grid;
  gap: 14px;
}

body.formal-ui-refresh .agent-overview-hero {
  padding: 2px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--formal-ink);
  box-shadow: none;
}

body.formal-ui-refresh .agent-overview-hero h2 {
  color: var(--formal-ink);
}

body.formal-ui-refresh .agent-overview-hero span {
  color: var(--formal-muted);
}

body.formal-ui-refresh .agent-overview-hero button,
body.formal-ui-refresh .agent-panel button,
body.formal-ui-refresh .agent-store-directory button {
  border-radius: 6px;
  box-shadow: none;
}

body.formal-ui-refresh .agent-overview-metrics {
  gap: 10px;
}

body.formal-ui-refresh .agent-overview-metrics > div {
  min-height: 112px;
}

body.formal-ui-refresh .agent-overview-grid {
  gap: 12px;
}

body.formal-ui-refresh .agent-panel {
  padding: 18px;
}

body.formal-ui-refresh .agent-store-directory-table th {
  background: var(--formal-soft);
  color: var(--formal-muted);
}

body.formal-ui-refresh .agent-store-directory-table td,
body.formal-ui-refresh .agent-store-directory-table th {
  border-color: var(--formal-line);
}

body.formal-ui-refresh .agent-login,
body.formal-ui-refresh .teacher-login {
  background: var(--formal-canvas);
}

body.formal-ui-refresh .agent-login-card,
body.formal-ui-refresh .login-card {
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--formal-shadow);
}

/* Store */
body.formal-ui-refresh .teacher-app {
  min-height: 100vh;
  background: var(--formal-canvas);
}

body.formal-ui-refresh .teacher-page {
  width: min(100%, 1600px);
  max-width: none;
  margin: 0 auto;
  padding: 22px 24px 30px;
}

body.formal-ui-refresh .teacher-inbox-page {
  width: min(100%, 1600px);
}

body.formal-ui-refresh .teacher-inbox-hero,
body.formal-ui-refresh .teacher-head {
  min-height: 0;
  padding: 2px 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--formal-ink);
  box-shadow: none;
}

body.formal-ui-refresh .teacher-inbox-hero span,
body.formal-ui-refresh .teacher-head > div > span {
  color: var(--formal-gold);
}

body.formal-ui-refresh .teacher-inbox-hero h1,
body.formal-ui-refresh .teacher-head h1 {
  color: var(--formal-ink);
  font-size: clamp(25px, 2.3vw, 34px);
}

body.formal-ui-refresh .teacher-inbox-hero p,
body.formal-ui-refresh .teacher-head p {
  color: var(--formal-muted);
}

body.formal-ui-refresh .teacher-inbox-hero .head-button-stack button,
body.formal-ui-refresh .teacher-head .head-button-stack button {
  min-height: 38px;
  border: 1px solid var(--formal-line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--formal-ink);
  box-shadow: none;
}

body.formal-ui-refresh .teacher-inbox-page .teacher-mode-tabs,
body.formal-ui-refresh .teacher-mode-tabs {
  min-height: 44px;
  gap: 3px;
  margin: 0 0 12px;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--formal-line);
  border-radius: 7px;
  background: #fff;
}

body.formal-ui-refresh .teacher-mode-tabs button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--formal-muted);
  box-shadow: none;
}

body.formal-ui-refresh .teacher-mode-tabs button.is-active {
  background: var(--formal-soft);
  color: var(--formal-ink);
  box-shadow: 0 1px 4px rgba(24, 35, 53, 0.08);
}

body.formal-ui-refresh .teacher-inbox-metrics,
body.formal-ui-refresh .teacher-metrics {
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .teacher-inbox-metrics div,
body.formal-ui-refresh .teacher-metrics div {
  border-color: var(--formal-line);
  background: #fff;
}

body.formal-ui-refresh .teacher-message-workspace {
  grid-template-columns: 300px minmax(430px, 1fr) 310px;
  min-height: 680px;
  margin-top: 12px;
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--formal-shadow);
}

body.formal-ui-refresh .teacher-message-sidebar {
  border-right: 1px solid var(--formal-line);
  background: #fff;
}

body.formal-ui-refresh .teacher-inbox-search {
  border-color: var(--formal-line);
}

body.formal-ui-refresh .teacher-inbox-search input,
body.formal-ui-refresh .teacher-inbox-search button {
  border-color: var(--formal-line-strong);
  border-radius: 6px;
}

body.formal-ui-refresh .teacher-inbox-search button {
  border-color: var(--formal-nav);
  background: var(--formal-nav);
}

body.formal-ui-refresh .teacher-inbox-customer {
  border-color: var(--formal-line);
}

body.formal-ui-refresh .teacher-inbox-customer:hover,
body.formal-ui-refresh .teacher-inbox-customer.is-active {
  background: #f0f3f6;
}

body.formal-ui-refresh .teacher-inbox-customer.is-active {
  box-shadow: inset 3px 0 var(--formal-nav);
}

body.formal-ui-refresh .teacher-inbox-avatar {
  color: var(--formal-nav);
  background: var(--formal-gold-soft);
}

body.formal-ui-refresh .teacher-message-main {
  min-width: 0;
  padding: 12px;
  background: #f7f8f9;
}

body.formal-ui-refresh .teacher-inbox-intent-alert {
  border-color: #efc7b4;
  background: #fff5f1;
}

body.formal-ui-refresh .teacher-inbox-ai-dock,
body.formal-ui-refresh .teacher-social-chat-head,
body.formal-ui-refresh .teacher-staff-message-form {
  border-color: var(--formal-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .teacher-inbox-ai-dock button,
body.formal-ui-refresh .teacher-chat-actions button,
body.formal-ui-refresh .teacher-chat-assist-row button {
  border-color: var(--formal-line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--formal-ink);
}

body.formal-ui-refresh .teacher-chat-actions button.is-primary {
  border-color: var(--formal-nav);
  background: var(--formal-nav);
  color: #fff;
}

body.formal-ui-refresh .teacher-message-main .teacher-social-chat .teacher-chat-list {
  height: min(48vh, 510px);
  border: 1px solid var(--formal-line);
  background: #f4f6f8;
}

body.formal-ui-refresh .teacher-social-chat .teacher-chat > div,
body.formal-ui-refresh .teacher-social-chat .teacher-chat p {
  border-radius: 8px;
}

body.formal-ui-refresh .teacher-social-chat .teacher-chat.is-user > div {
  border-color: #d7dfe8;
  background: #e8edf3;
}

body.formal-ui-refresh .teacher-message-main .teacher-staff-message-form > button {
  border-color: var(--formal-nav);
  background: var(--formal-nav);
  color: #fff;
}

.teacher-inbox-context {
  min-width: 0;
  border-left: 1px solid var(--formal-line);
  background: #fff;
  overflow-y: auto;
}

.teacher-inbox-context-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--formal-line);
}

.teacher-inbox-context-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 50%;
  background: var(--formal-coral-soft);
  color: var(--formal-coral);
  font-weight: 800;
}

.teacher-inbox-context-head > div {
  min-width: 0;
  flex: 1;
}

.teacher-inbox-context-head strong,
.teacher-inbox-context-head small {
  display: block;
}

.teacher-inbox-context-head small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--formal-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-inbox-context-head button,
.teacher-inbox-context > button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--formal-line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--formal-ink);
}

.teacher-inbox-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--formal-line);
}

.teacher-inbox-context-grid div {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--formal-line);
  border-bottom: 1px solid var(--formal-line);
}

.teacher-inbox-context-grid div:nth-child(even) {
  border-right: 0;
}

.teacher-inbox-context-grid div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.teacher-inbox-context-grid span,
.teacher-inbox-context-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-inbox-context-grid span {
  color: var(--formal-quiet);
  font-size: 10px;
}

.teacher-inbox-context-grid strong {
  margin-top: 4px;
  font-size: 12px;
}

.teacher-inbox-context-section {
  padding: 16px;
  border-bottom: 1px solid var(--formal-line);
}

.teacher-inbox-context-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.teacher-inbox-context-section ul,
.teacher-inbox-context-section ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-inbox-context-section li {
  position: relative;
  padding-left: 18px;
  color: var(--formal-muted);
  font-size: 11px;
  line-height: 1.55;
}

.teacher-inbox-context-section li::before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 5px;
  left: 0;
  border-radius: 50%;
  background: var(--formal-green);
}

.teacher-inbox-context > button {
  width: calc(100% - 32px);
  margin: 16px;
  border-color: var(--formal-nav);
  background: var(--formal-nav);
  color: #fff;
}

/* Customer */
body.formal-ui-refresh .customer-app {
  min-height: 100dvh;
  padding: 0;
  background: var(--formal-canvas);
}

body.formal-ui-refresh .customer-shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  border-right: 1px solid var(--formal-line);
  border-left: 1px solid var(--formal-line);
  background: #f8f8f6;
  box-shadow: 0 0 44px rgba(24, 35, 53, 0.12);
}

body.formal-ui-refresh .customer-entry,
body.formal-ui-refresh .customer-chat {
  width: 100%;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: #f8f8f6;
  box-shadow: none;
}

body.formal-ui-refresh .customer-entry.customer-entry-simple {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}

body.formal-ui-refresh .simple-entry-head,
body.formal-ui-refresh .customer-chat-head {
  min-height: 72px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--formal-line);
  border-radius: 0;
  background-color: #fff;
  background-image: none;
  box-shadow: none;
}

body.formal-ui-refresh .simple-entry-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-content: stretch;
  gap: 7px;
  height: auto;
  overflow: visible;
}

body.formal-ui-refresh .simple-entry-head::before,
body.formal-ui-refresh .simple-entry-head::after {
  display: none;
}

body.formal-ui-refresh .simple-brand-lockup,
body.formal-ui-refresh .customer-chat-title {
  min-width: 0;
}

body.formal-ui-refresh .simple-brand-lockup {
  width: 100%;
  max-width: none;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.formal-ui-refresh .simple-brand-logo,
body.formal-ui-refresh .customer-chat-logo {
  width: 42px;
  height: 42px;
  border: 1px solid var(--formal-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .simple-brand-logo img,
body.formal-ui-refresh .customer-chat-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.formal-ui-refresh .simple-brand-lockup span,
body.formal-ui-refresh .customer-chat-title span {
  color: var(--formal-green);
  font-size: 10px;
}

body.formal-ui-refresh .simple-brand-lockup h1,
body.formal-ui-refresh .customer-chat-title h1 {
  margin-top: 3px;
  color: var(--formal-ink);
  font-size: 16px;
}

body.formal-ui-refresh .customer-head-actions {
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  gap: 5px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.formal-ui-refresh .customer-head-actions::-webkit-scrollbar {
  display: none;
}

body.formal-ui-refresh .customer-refresh-shortcut,
body.formal-ui-refresh .customer-install-shortcut,
body.formal-ui-refresh .customer-voice-playback,
body.formal-ui-refresh .simple-vip-button {
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--formal-line);
  border-radius: 6px;
  background: #fff;
  color: var(--formal-ink);
  box-shadow: none;
}

body.formal-ui-refresh .simple-vip-button {
  border-color: var(--formal-nav);
  background: var(--formal-nav);
  color: #fff;
}

.customer-entry-dialog {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 12px;
  padding: 18px 14px 10px;
  overflow-y: auto;
}

.customer-entry-brand-strip {
  min-height: 88px;
  margin: 10px 12px 0;
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background-image: var(--brand-poster);
  background-position: center 42%;
  background-size: cover;
}

.customer-entry-assistant {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.customer-entry-assistant > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--formal-line);
  border-radius: 50%;
  background: #fff;
  color: var(--formal-gold);
  font-size: 11px;
  font-weight: 800;
}

.customer-entry-assistant > div {
  min-width: 0;
}

.customer-entry-assistant strong {
  display: block;
  margin: 0 0 5px 2px;
  font-size: 11px;
}

.customer-entry-assistant p {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--formal-line);
  border-radius: 8px;
  background: #fff;
  color: var(--formal-ink);
  font-size: 13px;
  line-height: 1.65;
}

.customer-entry-prompts {
  display: flex;
  gap: 7px;
  margin-left: 43px;
  overflow-x: auto;
  scrollbar-width: none;
}

.customer-entry-prompts::-webkit-scrollbar {
  display: none;
}

.customer-entry-prompts button {
  min-height: 32px;
  padding: 0 11px;
  flex: 0 0 auto;
  border: 1px solid var(--formal-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--formal-ink);
  font-size: 11px;
}

body.formal-ui-refresh .entry-start-panel {
  margin-top: auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--formal-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .entry-composer,
body.formal-ui-refresh .customer-composer {
  gap: 6px;
  padding: 0;
  border: 0;
  background: #fff;
}

body.formal-ui-refresh .entry-composer input,
body.formal-ui-refresh .customer-composer input {
  min-height: 42px;
  border: 1px solid var(--formal-line-strong);
  border-radius: 6px;
  background: #fff;
}

body.formal-ui-refresh .entry-icon-button,
body.formal-ui-refresh .entry-voice-button,
body.formal-ui-refresh .entry-send-button,
body.formal-ui-refresh .composer-round,
body.formal-ui-refresh .composer-voice,
body.formal-ui-refresh .composer-send {
  min-height: 42px;
  border-radius: 6px;
  box-shadow: none;
}

body.formal-ui-refresh .entry-send-button,
body.formal-ui-refresh .composer-send {
  border-color: var(--formal-nav);
  background: var(--formal-nav);
  color: #fff;
}

body.formal-ui-refresh .customer-timeline {
  padding: 16px 14px;
  background: #f8f8f6;
}

body.formal-ui-refresh .customer-message,
body.formal-ui-refresh .message-bubble,
body.formal-ui-refresh .customer-answer-card {
  border-radius: 8px;
}

body.formal-ui-refresh .customer-tools {
  border-color: var(--formal-line);
  background: #fff;
}

body.formal-ui-refresh .chat-bottom-links {
  border: 0;
  background: var(--formal-soft);
}

body.formal-ui-refresh .chat-bottom-links button {
  color: var(--formal-gold);
}

body.formal-ui-refresh .vip-bottom-drawer {
  border-color: var(--formal-line);
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: none;
}

body.formal-ui-refresh .customer-entry > .vip-bottom-drawer {
  position: absolute;
  right: 10px;
  bottom: calc(66px + env(safe-area-inset-bottom));
  left: 10px;
  z-index: 50;
  max-height: min(68vh, 620px);
  overflow-y: auto;
}

@media (max-width: 1240px) {
  body.formal-ui-refresh .teacher-message-workspace {
    grid-template-columns: 290px minmax(400px, 1fr);
  }

  body.formal-ui-refresh .teacher-inbox-context {
    display: none;
  }

  body.formal-ui-refresh .agent-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  body.formal-ui-refresh .app-shell,
  body.formal-ui-refresh .agent-shell {
    grid-template-columns: 1fr;
  }

  body.formal-ui-refresh .sidebar,
  body.formal-ui-refresh .agent-sidebar {
    width: 100%;
    height: auto;
    position: static;
  }

  body.formal-ui-refresh .agent-sidebar {
    padding: 14px;
  }

  body.formal-ui-refresh .agent-tabs {
    display: flex;
    overflow-x: auto;
  }

  body.formal-ui-refresh .agent-tabs button {
    flex: 0 0 auto;
  }

  body.formal-ui-refresh .agent-account-actions {
    display: none;
  }

  body.formal-ui-refresh .agent-main {
    padding: 18px;
  }
}

@media (max-width: 720px) {
  body.formal-ui-refresh .topbar {
    padding: 9px 12px;
  }

  body.formal-ui-refresh .content-shell {
    padding: 14px 10px 24px;
  }

  body.formal-ui-refresh .workspace-tabs {
    padding: 7px 10px;
  }

  body.formal-ui-refresh .beauty-os-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.formal-ui-refresh .teacher-page,
  body.formal-ui-refresh .teacher-inbox-page {
    width: 100%;
    padding: 12px 10px calc(124px + env(safe-area-inset-bottom));
  }

  body.formal-ui-refresh .teacher-inbox-hero,
  body.formal-ui-refresh .teacher-head {
    align-items: stretch;
    flex-direction: column;
  }

  body.formal-ui-refresh .teacher-message-workspace {
    grid-template-columns: minmax(0, 1fr);
    min-height: 620px;
  }

  body.formal-ui-refresh .teacher-message-workspace.has-active-chat .teacher-message-sidebar,
  body.formal-ui-refresh .teacher-inbox-context {
    display: none;
  }

  body.formal-ui-refresh .teacher-message-workspace:not(.has-active-chat) .teacher-message-main {
    display: none;
  }

  body.formal-ui-refresh .teacher-message-main .teacher-social-chat .teacher-chat-list {
    height: 46vh;
    min-height: 320px;
  }

  body.formal-ui-refresh .customer-shell {
    width: 100%;
    border: 0;
    box-shadow: none;
  }

  body.formal-ui-refresh .customer-entry,
  body.formal-ui-refresh .customer-chat {
    min-height: 100dvh;
  }

  .customer-entry-prompts {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  body.formal-ui-refresh .beauty-os-metrics {
    grid-template-columns: 1fr;
  }

  body.formal-ui-refresh .customer-refresh-shortcut,
  body.formal-ui-refresh .customer-install-shortcut,
  body.formal-ui-refresh .customer-voice-playback,
  body.formal-ui-refresh .simple-vip-button {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.formal-ui-refresh *,
  body.formal-ui-refresh *::before,
  body.formal-ui-refresh *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Clear navigation state: every selected workspace remains obvious at a glance. */
body.formal-ui-refresh .nav-item.is-active,
body.formal-ui-refresh .utility-button.is-active {
  position: relative;
  background: #fff8eb;
  color: #101b2d;
  font-weight: 800;
  box-shadow: inset 4px 0 #c89b52, 0 0 0 1px rgba(200, 155, 82, 0.3);
}

body.formal-ui-refresh .nav-item.is-active .nav-icon {
  color: #8b6427;
}

body.formal-ui-refresh .module-button.is-active,
body.formal-ui-refresh .workspace-tab.is-active,
body.formal-ui-refresh .page-tab.is-active,
body.formal-ui-refresh .agent-toolbar-tabs button.is-active,
body.formal-ui-refresh .inner-tab.is-active,
body.formal-ui-refresh .segmented button.is-active {
  border-color: #17243a;
  background: #17243a;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(23, 36, 58, 0.18);
}

body.formal-ui-refresh .brand-agent-tabs button.is-active {
  border-color: var(--brand-color, #b58b48);
  background: #fff8ea;
  color: #17243a;
  font-weight: 800;
  box-shadow: inset 0 -3px var(--brand-color, #b58b48), 0 0 0 1px rgba(181, 139, 72, 0.24);
}

body.formal-ui-refresh .brand-scene-card.is-active,
body.formal-ui-refresh .knowledge-file-record.is-active,
body.formal-ui-refresh .conversation-card.is-active,
body.formal-ui-refresh .store-customer-card.is-active {
  border-color: #b58b48;
  background: #fffaf0;
  box-shadow: inset 4px 0 #b58b48, 0 5px 16px rgba(23, 36, 58, 0.1);
}

body.formal-ui-refresh .agent-tabs button.is-active {
  position: relative;
  background: #fff8eb;
  color: #101b2d;
  font-weight: 800;
  box-shadow: inset 4px 0 #c89b52, 0 0 0 1px rgba(200, 155, 82, 0.3);
}

body.formal-ui-refresh .teacher-mode-tabs button.is-active,
body.formal-ui-refresh .teacher-status-tabs button.is-active,
body.formal-ui-refresh .detail-tabs button.is-active,
body.formal-ui-refresh .teacher-brand-filter button.is-active,
body.formal-ui-refresh .quick-status button.is-active,
body.formal-ui-refresh .profile-ai-mode-tabs button.is-active,
body.formal-ui-refresh .conversion-buttons button.is-active {
  border-color: #17243a;
  background: #17243a;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(23, 36, 58, 0.16);
}

body.formal-ui-refresh .teacher-inbox-customer.is-active {
  border-color: #b58b48;
  background: #fff8eb;
  box-shadow: inset 5px 0 #b58b48;
}

body.formal-ui-refresh :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(47, 105, 156, 0.32);
  outline-offset: 2px;
}