/* XUI page migration layer: converge existing page class systems onto XUI tokens. */

:root {
  --bg-page: var(--xui-bg);
  --bg-panel: var(--xui-surface);
  --bg-soft: var(--xui-bg-quiet);
  --bg-hover: var(--xui-surface-tint);
  --line: var(--xui-line-soft);
  --line-strong: var(--xui-line-mid);
  --text-main: var(--xui-ink);
  --text-subtle: var(--xui-ink-muted);
  --text-light: var(--xui-ink-soft);
  --accent: var(--xui-accent);
  --accent-strong: var(--xui-accent-strong);
  --accent-soft: var(--xui-accent-soft);
  --panel-bg: var(--xui-surface);
  --panel-line: var(--xui-line-soft);
  --panel-shadow: none;
  --shadow-soft: none;
  --shadow-strong: none;
  --bg: var(--xui-bg);
  --top: var(--xui-surface);
  --panel: var(--xui-surface);
  --ink: var(--xui-ink);
  --muted: var(--xui-ink-muted);
  --green: var(--xui-accent);
  --green-line: var(--xui-accent-strong);
  --bubble: var(--xui-surface);
  --danger: var(--xui-danger);
  --ok: var(--xui-success);
  --warn: var(--xui-warning);
}

html[data-xui-theme] {
  font-size: var(--xui-rem);
}

html[data-xui-theme] body {
  color: var(--xui-ink);
  background: var(--xui-bg);
  font-family: var(--xui-font);
}

html[data-xui-theme] body::before,
html[data-xui-theme] body::after {
  display: none !important;
}

.page-shell,
.favorite-shell,
.goods-shell {
  background: var(--xui-bg);
}

.page-shell,
.favorite-shell {
  gap: var(--xui-space-4);
}

.nav-wrap {
  color: var(--xui-ink);
}

.glass-card,
.hero-card,
.tab-bar,
.favorite-card,
.goods-card,
.goods-state,
.feedback-card,
.media-card,
.stat-box,
.overview-card,
.info-card,
.item-card,
.company-field,
.company-inline-card,
.profile-dialog,
.feedback-dialog,
.webchat-fatal-panel,
.xapp-host-state,
.panel,
main > section,
body > main:not(.webchat-shell):not(.xui-desktop-shell) {
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: var(--xui-radius-panel);
  background: var(--xui-surface);
  box-shadow: none;
  backdrop-filter: none;
}

.glass-card,
.hero-card,
.favorite-card {
  overflow: hidden;
}

.section-head,
.favorite-head,
.goods-head,
.feedback-page-head,
.hero-copy,
.xapp-host-state,
.panel {
  color: var(--xui-ink);
}

.section-eyebrow,
.favorite-eyebrow,
.eyebrow,
.goods-head p,
.goods-state,
.goods-card p,
.goods-meta,
.feedback-card-title small,
.feedback-summary-side small,
.feedback-card-meta,
.feedback-reply small,
.feedback-reply-toolbar,
.profile-extra,
.company-field-head span,
.company-search-hint,
.company-inline-card p,
.webchat-customer-title small,
.xapp-host-state p,
.panel p,
main p {
  color: var(--xui-ink-muted);
}

.section-eyebrow,
.favorite-eyebrow,
.eyebrow {
  min-height: 24px;
  padding: 0 var(--xui-space-2);
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: 999px;
  background: var(--xui-accent-soft);
  color: var(--xui-accent);
  font-family: var(--xui-mono);
  font-size: var(--xui-text-xs);
  letter-spacing: 0;
}

.section-head h2,
.favorite-head h1,
.goods-head h1,
.hero-copy h1,
.panel h1,
.panel h2,
main h1,
main h2 {
  color: var(--xui-ink);
  font-family: var(--xui-font);
  letter-spacing: 0;
}

.primary-button,
.secondary-button,
.danger-button,
.goods-button,
.tab-button,
.primary-link,
.secondary-link,
.panel-form button,
.feedback-new-button,
.feedback-delete-button,
.favorite-icon-button,
.favorite-row-actions button,
.favorite-row-actions a,
.favorite-pager button,
.fatal-actions button,
.xapp-host-state button,
.webchat-send,
.tool-button,
.ai-toggle,
.icon-button {
  min-height: var(--xui-control-h);
  border: var(--xui-border) solid var(--xui-line-mid);
  border-radius: var(--xui-radius-control);
  padding: 0 var(--xui-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xui-space-2);
  background: var(--xui-surface);
  color: var(--xui-ink);
  box-shadow: none;
  font: inherit;
  font-size: var(--xui-text-md);
  font-weight: 700;
  text-decoration: none;
  transform: none;
}

.primary-button,
.goods-button,
.tab-button.is-active,
.primary-link,
.panel-form button,
.feedback-scope-tabs button.is-active,
.favorite-tabs button.is-active,
.fatal-primary,
.webchat-send {
  border-color: var(--xui-accent);
  background: var(--xui-accent);
  color: var(--xui-accent-ink);
}

.secondary-button,
.ghost-button,
.secondary-link,
.goods-button.secondary,
.fatal-secondary {
  background: var(--xui-surface);
  color: var(--xui-ink);
}

.danger-button,
.feedback-delete-button,
.is-danger {
  color: var(--xui-danger);
}

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover,
.goods-button:hover,
.tab-button:hover,
.primary-link:hover,
.secondary-link:hover,
.panel-form button:hover,
.item-card:hover,
.wxoa-admin-nav-item:hover,
.wxoa-admin-secondary-item:hover,
.icon-button:hover,
.tool-button:hover,
.ai-toggle:hover {
  transform: none;
  border-color: var(--xui-line);
  box-shadow: none;
}

input,
textarea,
select,
.picker-trigger,
.profile-form input,
.feedback-field input,
.feedback-field textarea,
.feedback-field select {
  border: var(--xui-border) solid var(--xui-line-mid);
  border-radius: var(--xui-radius-control);
  background: var(--xui-surface);
  color: var(--xui-ink);
  outline: none;
}

input:focus,
textarea:focus,
select:focus,
.picker-trigger:focus-visible {
  border-color: var(--xui-accent);
}

select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.feedback-scope-tabs,
.favorite-tabs,
.tab-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: var(--xui-space-3) var(--xui-space-4);
  border: 0;
  border-bottom: var(--xui-border) solid var(--xui-line-soft);
  border-radius: 0;
  background: transparent;
}

.feedback-scope-tabs button,
.favorite-tabs button,
.tab-bar .tab-button {
  min-height: var(--xui-control-h);
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: 0;
  font-size: var(--xui-text-md);
}

.feedback-scope-tabs button + button,
.favorite-tabs button + button,
.tab-bar .tab-button + .tab-button {
  margin-left: -1px;
}

.feedback-scope-tabs button:first-child,
.favorite-tabs button:first-child,
.tab-bar .tab-button:first-child {
  border-radius: var(--xui-radius-control) 0 0 var(--xui-radius-control);
}

.feedback-scope-tabs button:last-child,
.favorite-tabs button:last-child,
.tab-bar .tab-button:last-child {
  border-radius: 0 var(--xui-radius-control) var(--xui-radius-control) 0;
}

.chip-list span,
.follow-list span,
.goods-tags span,
.goods-resources span,
.feedback-status,
.unread-badge {
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: 999px;
  background: var(--xui-surface);
  color: var(--xui-ink-muted);
  box-shadow: none;
}

.feedback-status.is-answered,
.goods-order {
  border-color: var(--xui-success);
  background: var(--xui-success-soft);
  color: var(--xui-success);
}

.goods-error {
  color: var(--xui-danger);
}

.favorite-body,
.favorite-list,
.webchat-messages,
.webchat-composer,
.webchat-topbar,
.webchat-xapp-panel,
.profile-modal,
.feedback-modal {
  background: var(--xui-bg-quiet);
}

.favorite-row,
.feedback-card,
.webchat-input-wrap,
.msg-text,
.link-card,
.artifact-card,
.media-item,
.profile-content,
.feedback-detail {
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: var(--xui-radius-control);
  background: var(--xui-surface);
  box-shadow: none;
}

.favorite-row,
.feedback-card {
  border-radius: var(--xui-radius-control);
}

.media-card {
  border-radius: var(--xui-radius-panel);
}

.media-card,
.media-backdrop,
.placeholder-box {
  background: var(--xui-surface);
  box-shadow: none;
}

.manage-root,
.manage-page-shell,
.super-root-host,
.wxoa-admin-workspace,
.wxcw-shell,
.webchat-shell {
  background: var(--xui-bg);
}

.manage-root {
  min-height: 100dvh;
  padding: var(--xui-space-2);
}

.manage-page-shell {
  min-height: calc(100dvh - var(--xui-space-4));
  border: var(--xui-border) solid var(--xui-line-mid);
  border-radius: var(--xui-radius-page);
  background: var(--xui-surface);
  overflow: hidden;
  box-shadow: none;
}

.nav-strip {
  padding: 0;
  border-bottom: var(--xui-border) solid var(--xui-line-soft);
  background: var(--xui-surface);
}

.wxoa-admin-workspace {
  gap: 0;
  padding: 0;
}

.wxoa-admin-sidebar,
.wxoa-admin-content,
.manage-sidebar,
.manage-content,
.super-root-host,
.wxcw-sidebar,
.wxcw-content,
.wxcw-panel,
.wxca-drawer,
.manage-drawer,
.drawer-panel {
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: var(--xui-radius-panel);
  background: var(--xui-surface);
  box-shadow: none;
}

.wxoa-admin-sidebar,
.wxoa-admin-content {
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
}

.wxoa-admin-sidebar {
  border-left: 0;
  border-right-color: var(--xui-line-soft);
}

.wxoa-admin-content {
  border-right: 0;
  border-left: 0;
}

.wxoa-admin-brand-icon,
.agent-avatar img,
.msg-avatar img,
.letter-avatar {
  border-radius: var(--xui-radius-control);
  background: var(--xui-accent-soft);
  color: var(--xui-accent);
}

.wxoa-admin-primary-nav {
  border: var(--xui-border) solid var(--xui-line-soft);
  border-radius: var(--xui-radius-panel);
  background: var(--xui-bg-quiet);
  box-shadow: none;
}

.wxoa-admin-nav-item,
.wxoa-admin-secondary-item,
.nav-item,
.sidebar-item,
.manage-nav-item {
  border-radius: var(--xui-radius-control);
  background: transparent;
  color: var(--xui-ink-muted);
  box-shadow: none;
}

.wxoa-admin-nav-item.is-active,
.wxoa-admin-secondary-item.is-active,
.nav-item.is-active,
.sidebar-item.is-active,
.manage-nav-item.is-active {
  border-color: var(--xui-accent);
  background: var(--xui-accent) !important;
  background-image: none !important;
  color: var(--xui-accent-ink);
  box-shadow: none;
}

.wxoa-admin-inline-subtabs {
  border-left: var(--xui-border) solid var(--xui-line-soft);
}

.webchat-shell {
  border: var(--xui-border) solid var(--xui-line-mid);
  border-radius: var(--xui-radius-page);
  overflow: hidden;
}

.webchat-chat {
  border-right: var(--xui-border) solid var(--xui-line-soft);
}

.webchat-topbar {
  min-height: var(--xui-topbar-h);
  border-bottom: var(--xui-border) solid var(--xui-line-soft);
  background: var(--xui-surface);
}

.icon-button,
.tool-button,
.webchat-send {
  width: var(--xui-control-h);
  padding: 0;
}

.profile-modal,
.feedback-modal {
  backdrop-filter: none;
}

.profile-dialog,
.feedback-dialog {
  border-radius: var(--xui-radius-panel);
}

.toast,
.feedback-toast {
  border: var(--xui-border) solid var(--xui-line);
  border-radius: var(--xui-radius-control);
  background: var(--xui-surface);
  color: var(--xui-ink);
  box-shadow: none;
}

@media (max-width: 760px) {
  .glass-card,
  .hero-card,
  .favorite-card,
  .goods-card,
  .feedback-card,
  .media-card {
    border-radius: var(--xui-radius-panel);
  }

  .profile-form,
  .hero-card {
    grid-template-columns: 1fr;
  }
}