:root {
  --xy-home-bg-image: none;
  --xy-home-bg-size: cover;
  --xy-home-bg-position: center center;
  --xy-home-bg-repeat: no-repeat;
  --xy-home-bg-overlay: rgba(245, 245, 245, 0.12);
  --xy-chat-bg-image: none;
  --xy-chat-bg-size: cover;
  --xy-chat-bg-position: center center;
  --xy-chat-bg-repeat: no-repeat;
  --xy-chat-bg-overlay: rgba(247, 247, 247, 0.16);
}

/* 主页背景：兼容移动端和桌面双栏布局 */
html[data-xy-home-bg="1"] .page-wrapper > .main-content:not(.chat-content),
html[data-xy-home-bg="1"] .desktop-home-panel {
  background-color: #f5f5f5 !important;
  background-image: linear-gradient(var(--xy-home-bg-overlay), var(--xy-home-bg-overlay)), var(--xy-home-bg-image) !important;
  background-size: var(--xy-home-bg-size) !important;
  background-position: var(--xy-home-bg-position) !important;
  background-repeat: var(--xy-home-bg-repeat) !important;
}

html[data-xy-home-bg="1"] .desktop-home-scroll {
  background: transparent !important;
}

/* 聊天背景：覆盖聊天详情内置底色/纹理，同时保留头部与输入区可读性 */
html[data-xy-chat-bg="1"] .xy-chat-bg-target {
  background-color: #f7f7f7 !important;
  background-image: linear-gradient(var(--xy-chat-bg-overlay), var(--xy-chat-bg-overlay)), var(--xy-chat-bg-image) !important;
  background-size: var(--xy-chat-bg-size) !important;
  background-position: var(--xy-chat-bg-position) !important;
  background-repeat: var(--xy-chat-bg-repeat) !important;
}

html[data-xy-chat-bg="1"] .xy-chat-bg-target.chat-detail-view .gradient-bg-canvas,
html[data-xy-chat-bg="1"] .xy-chat-bg-target.chat-detail-view::before {
  display: none !important;
}

html[data-xy-chat-bg="1"] .xy-chat-bg-target.chat-detail-view .messages-container,
html[data-xy-chat-bg="1"] .xy-chat-bg-target.chat-container .messages-container {
  background: transparent !important;
  background-image: none !important;
}

/* 设置页入口 */
.xy-bg-settings-section {
  margin: 0 16px 22px;
}

.xy-bg-settings-section .xy-bg-section-title {
  color: #6d6d72;
  font-size: 13px;
  line-height: 18px;
  padding: 0 4px 7px;
}

.xy-bg-settings-card {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.xy-bg-settings-entry {
  width: 100%;
  min-height: 56px;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xy-bg-settings-entry:active {
  background: rgba(0, 0, 0, 0.045);
}

.xy-bg-settings-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #5b8cff, #8b5cf6);
  flex: 0 0 auto;
}

.xy-bg-settings-copy {
  min-width: 0;
  flex: 1;
}

.xy-bg-settings-label {
  display: block;
  font-size: 16px;
  line-height: 21px;
}

.xy-bg-settings-status {
  display: block;
  margin-top: 2px;
  color: #8e8e93;
  font-size: 12px;
  line-height: 16px;
}

.xy-bg-settings-arrow {
  color: #c7c7cc;
  flex: 0 0 auto;
}

/* 弹窗 */
.xy-bg-modal[hidden] {
  display: none !important;
}

.xy-bg-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.xy-bg-dialog {
  width: min(100%, 620px);
  max-height: min(92vh, 820px);
  max-height: min(92dvh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #111;
  background: #f5f5f7;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.16);
  transform: translateY(0);
  animation: xy-bg-sheet-in 0.22s ease-out;
}

@keyframes xy-bg-sheet-in {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

.xy-bg-dialog-header {
  height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.xy-bg-dialog-title {
  font-size: 17px;
  font-weight: 650;
}

.xy-bg-icon-button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ededf0;
  color: #555;
  cursor: pointer;
}

.xy-bg-dialog-body {
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.xy-bg-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 10px;
  background: #e8e8ed;
}

.xy-bg-tab {
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.xy-bg-tab.is-active {
  color: #111;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.xy-bg-preview {
  position: relative;
  height: 210px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #ececf1;
  background-image: linear-gradient(var(--xy-preview-overlay, rgba(245,245,245,.12)), var(--xy-preview-overlay, rgba(245,245,245,.12))), var(--xy-preview-image, none);
  background-size: var(--xy-preview-size, cover);
  background-position: var(--xy-preview-position, center center);
  background-repeat: var(--xy-preview-repeat, no-repeat);
}

.xy-bg-preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #909099;
  font-size: 14px;
  background: linear-gradient(135deg, #f7f7f9, #e5e5ea);
}

.xy-bg-preview-sample {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.xy-bg-preview-home-card {
  width: 78%;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.xy-bg-preview-home-card:nth-child(2) {
  width: 58%;
}

.xy-bg-preview-bubble {
  max-width: 74%;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 13px;
  line-height: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.xy-bg-preview-bubble.left {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.92);
}

.xy-bg-preview-bubble.right {
  align-self: flex-end;
  background: rgba(149, 236, 105, 0.93);
}

.xy-bg-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.xy-bg-button,
.xy-bg-upload-button {
  min-height: 42px;
  border-radius: 10px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  box-sizing: border-box;
}

.xy-bg-upload-button {
  color: #fff;
  background: #007aff;
}

.xy-bg-button.secondary {
  color: #333;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
}

.xy-bg-button.danger {
  color: #d70015;
  background: #fff;
  border: 1px solid rgba(215, 0, 21, 0.18);
}

.xy-bg-upload-button input {
  display: none;
}

.xy-bg-control-card {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.xy-bg-control-row {
  min-height: 54px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ededf0;
}

.xy-bg-control-row:last-child {
  border-bottom: 0;
}

.xy-bg-control-label {
  flex: 1;
  font-size: 14px;
}

.xy-bg-control-value {
  color: #8e8e93;
  font-size: 12px;
  min-width: 38px;
  text-align: right;
}

.xy-bg-control-row select {
  min-width: 128px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid #d7d7dc;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 14px;
}

.xy-bg-control-row input[type="range"] {
  width: min(46vw, 230px);
  accent-color: #007aff;
}

.xy-bg-mode-group {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #eeeef2;
}

.xy-bg-mode-button {
  min-width: 54px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}

.xy-bg-mode-button.is-active {
  color: #111;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.xy-bg-note {
  margin: 0 2px 14px;
  color: #8e8e93;
  font-size: 12px;
  line-height: 18px;
}

.xy-bg-footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}

.xy-bg-footer .xy-bg-button {
  min-height: 44px;
}

.xy-bg-footer .primary {
  color: #fff;
  background: #007aff;
}

.xy-bg-toast {
  position: fixed;
  left: 50%;
  bottom: calc(34px + env(safe-area-inset-bottom));
  z-index: 10080;
  max-width: min(84vw, 380px);
  padding: 10px 15px;
  transform: translateX(-50%);
  border-radius: 10px;
  color: #fff;
  background: rgba(24, 24, 27, 0.9);
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  animation: xy-bg-toast-in 0.2s ease-out;
}

@keyframes xy-bg-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (min-width: 700px) {
  .xy-bg-modal {
    align-items: center;
    padding: 24px;
  }

  .xy-bg-dialog {
    border-radius: 18px;
  }
}

@media (max-width: 380px) {
  .xy-bg-mode-button {
    min-width: 45px;
    padding: 0 5px;
  }

  .xy-bg-control-row {
    gap: 8px;
  }
}