* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background:
    radial-gradient(circle at 20% 15%, rgba(255, 194, 224, 0.65), transparent 32%),
    radial-gradient(circle at 85% 30%, rgba(207, 199, 255, 0.75), transparent 35%),
    linear-gradient(160deg, #fff7fb, #f2f3ff);

  color: #454052;
}

.app {
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(3px);
}

header {
  padding: 22px 20px 16px;

  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
}

header p {
  margin: 5px 0 0;
  font-size: 13px;
  color: #948ca1;
}

#chat {
  flex: 1;
  overflow-y: auto;

  padding: 24px 16px 110px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.message {
  max-width: 76%;
  padding: 13px 16px;

  font-size: 16px;
  line-height: 1.6;

  border-radius: 22px;

  box-shadow:
    0 8px 24px rgba(92, 73, 122, 0.08);

  word-break: break-word;
}

.character {
  align-self: flex-start;

  background: rgba(255, 255, 255, 0.82);

  border-bottom-left-radius: 8px;
}

.me {
  align-self: flex-end;

  background:
    linear-gradient(
      135deg,
      rgba(255, 196, 222, 0.92),
      rgba(216, 196, 255, 0.92)
    );

  border-bottom-right-radius: 8px;
}

footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  width: 100%;
  max-width: 520px;

  padding: 12px 14px 18px;

  display: flex;
  gap: 10px;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px);

  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

#messageInput {
  flex: 1;

  border: none;
  outline: none;

  padding: 13px 16px;

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.82);

  font-size: 16px;
  color: #44404d;

  box-shadow:
    inset 0 0 0 1px rgba(202, 192, 223, 0.35);
}

#messageInput::placeholder {
  color: #aaa2b2;
}

#sendButton {
  border: none;

  padding: 0 18px;

  border-radius: 22px;

  font-size: 15px;
  font-weight: 600;

  color: white;

  background:
    linear-gradient(
      135deg,
      #f2a8ca,
      #b7a1ed
    );

  box-shadow:
    0 8px 18px rgba(169, 135, 211, 0.22);
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clear-button {
  border: none;
  outline: none;

  padding: 8px 13px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.72);

  color: #9a849d;

  font-size: 13px;

  box-shadow:
    0 5px 15px rgba(113, 88, 135, 0.08);
}
.header-actions {
  display: flex;
  gap: 8px;
}

.header-button {
  border: none;
  outline: none;

  padding: 8px 12px;

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.72);

  color: #9a849d;

  font-size: 13px;

  box-shadow:
    0 5px 15px
    rgba(113, 88, 135, 0.08);
}


/* 字卡管理背景 */

.cards-panel {
  position: fixed;

  inset: 0;

  z-index: 100;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(60, 50, 72, 0.28);

  backdrop-filter:
    blur(10px);
}


/* 隐藏 */

.cards-panel.hidden {
  display: none;
}


/* 字卡窗口 */

.cards-box {
  width: 100%;
  max-width: 480px;

  max-height: 82vh;

  padding: 22px;

  border-radius: 28px;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 20px 60px
    rgba(77, 57, 100, 0.18);
}


.cards-box h2 {
  margin: 0;

  font-size: 22px;
}


#cardsCount {
  margin:
    6px 0 16px;

  color: #9b91a4;

  font-size: 13px;
}


#cardsInput {
  width: 100%;

  height: 48vh;

  resize: none;

  border: none;
  outline: none;

  padding: 16px;

  border-radius: 20px;

  background:
    #f7f3fa;

  color: #48414f;

  font-size: 16px;

  line-height: 1.7;

  box-shadow:
    inset 0 0 0 1px
    rgba(202, 192, 223, 0.4);
}


.cards-actions {
  display: flex;

  gap: 10px;

  margin-top: 14px;
}


.cards-actions button {
  flex: 1;

  border: none;

  padding:
    13px 10px;

  border-radius: 18px;

  font-size: 15px;
}


#saveCardsButton {
  color: white;

  background:
    linear-gradient(
      135deg,
      #efa6c9,
      #b69be9
    );
}


#closeCardsButton {
  color: #746d79;

  background:
    #f1edf3;
}
/* =========================
   新版顶部布局
========================= */

header {
  display: block !important;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.header-main > div {
  min-width: 0;
}

.header-main h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-button {
  flex-shrink: 0;
}

.tool-row {
  display: flex;

  gap: 8px;

  margin-top: 14px;

  overflow-x: auto;

  padding-bottom: 2px;

  scrollbar-width: none;
}

.tool-row::-webkit-scrollbar {
  display: none;
}

.tool-row .header-button {
  flex-shrink: 0;
  white-space: nowrap;
}


/* =========================
   消息 + 头像
========================= */

.message-row {
  width: 100%;

  display: flex;

  align-items: flex-end;

  gap: 8px;
}

.character-row {
  justify-content: flex-start;
}

.me-row {
  justify-content: flex-end;
}

.message-row .message {
  margin: 0;
}

.message-avatar {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.82);

  background-size: cover;

  background-position: center;

  color: #9b809c;

  font-size: 14px;

  box-shadow:
    0 5px 16px
    rgba(91, 70, 116, 0.12);

  border:
    2px solid
    rgba(255, 255, 255, 0.8);
}


/* =========================
   设置面板背景
========================= */

.settings-panel {
  position: fixed;

  inset: 0;

  z-index: 200;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 18px;

  background:
    rgba(61, 48, 71, 0.30);

  backdrop-filter:
    blur(12px);
}

.settings-panel.hidden {
  display: none;
}


/* =========================
   设置窗口
========================= */

.settings-box {
  width: 100%;

  max-width: 480px;

  max-height: 88vh;

  overflow-y: auto;

  padding: 22px;

  border-radius: 28px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 22px 65px
    rgba(76, 56, 98, 0.20);
}

.settings-box h2 {
  margin: 0;

  font-size: 22px;
}

.settings-tip {
  margin:
    6px 0 20px;

  font-size: 13px;

  color: #a097a5;
}


/* =========================
   设置项目
========================= */

.setting-item {
  margin-bottom: 20px;
}

.setting-item > label {
  display: block;

  margin-bottom: 8px;

  font-size: 14px;

  color: #756b78;
}

.setting-item > input {
  width: 100%;

  border: none;
  outline: none;

  padding: 13px 15px;

  border-radius: 17px;

  background:
    #f7f3f8;

  color: #49404d;

  font-size: 16px;

  box-shadow:
    inset 0 0 0 1px
    rgba(205, 194, 218, 0.45);
}


/* =========================
   图片设置
========================= */

.image-setting-row {
  display: flex;

  align-items: center;

  gap: 14px;
}

.image-preview {
  background-size: cover;

  background-position: center;
}

.avatar-preview {
  width: 70px;
  height: 70px;

  flex: 0 0 70px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background-color:
    #f5edf7;

  color:
    #a184a5;

  font-size: 20px;

  border:
    3px solid white;

  box-shadow:
    0 7px 20px
    rgba(90, 67, 107, 0.12);
}

.upload-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 0 16px;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #f2b5d0,
      #c6acee
    );

  color: white;

  font-size: 14px;

  cursor: pointer;
}


/* =========================
   背景预览
========================= */

.background-preview {
  width: 100%;

  height: 130px;

  border-radius: 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffe5f1,
      #e8e2ff
    );

  background-size: cover;

  background-position: center;

  color: #978b9b;

  font-size: 13px;
}

.background-actions {
  display: flex;

  gap: 10px;

  margin-top: 10px;
}

.small-setting-button {
  border: none;

  min-height: 42px;

  padding: 0 16px;

  border-radius: 16px;

  background:
    #f3eef5;

  color: #746b78;

  font-size: 14px;
}


/* =========================
   设置底部按钮
========================= */

.settings-actions {
  display: flex;

  gap: 10px;

  margin-top: 6px;
}

.settings-actions button {
  flex: 1;

  border: none;

  padding: 13px 10px;

  border-radius: 18px;

  font-size: 15px;
}

#saveSettingsButton {
  color: white;

  background:
    linear-gradient(
      135deg,
      #efa6c9,
      #b69be9
    );
}

#closeSettingsButton {
  color: #746d79;

  background:
    #f1edf3;
}


/* =========================
   自定义背景下的可读性
========================= */

.app {
  background:
    rgba(255, 255, 255, 0.10);
}

#chat {
  background:
    rgba(248, 246, 255, 0.10);
}
/* =========================
   消息时间
========================= */

.message-content {
  display: flex;
  flex-direction: column;

  max-width: 76%;
}

.message-row .message {
  max-width: 100%;
}

.me-row .message-content {
  align-items: flex-end;
}

.character-row .message-content {
  align-items: flex-start;
}

.message-time {
  margin-top: 4px;

  padding: 0 6px;

  font-size: 11px;

  color:
    rgba(91, 80, 103, 0.55);
}
/* =========================
   回复设置
========================= */

.setting-item select {
  width: 100%;

  border: none;
  outline: none;

  padding: 13px 15px;

  border-radius: 17px;

  background: #f7f3f8;

  color: #49404d;

  font-size: 16px;

  box-shadow:
    inset 0 0 0 1px
    rgba(205, 194, 218, 0.45);
}


.range-row {
  display: flex;

  align-items: center;

  gap: 12px;
}


.range-row input {
  flex: 1;
}


.range-row span {
  min-width: 44px;

  text-align: right;

  font-size: 14px;

  color: #8b748e;
}


.small-tip {
  margin: 7px 0 0;

  font-size: 12px;

  color: #aaa0ad;
}


/* =========================
   表情包库
========================= */

.sticker-upload-button {
  margin-bottom: 14px;
}


.stickers-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 10px;

  max-height: 48vh;

  overflow-y: auto;

  padding: 4px 2px 12px;
}


.sticker-item {
  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 16px;

  background:
    #f5f0f6;
}


.sticker-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


.sticker-delete {
  position: absolute;

  top: 4px;
  right: 4px;

  width: 24px;
  height: 24px;

  border: none;

  border-radius: 50%;

  background:
    rgba(40, 35, 45, 0.65);

  color: white;

  font-size: 17px;

  line-height: 22px;
}


.stickers-empty {
  grid-column: 1 / -1;

  padding: 40px 10px;

  text-align: center;

  color: #aaa0ad;

  font-size: 14px;
}


/* =========================
   聊天里的表情包
========================= */

.sticker-message {
  max-width: 145px;

  background: transparent;

  box-shadow: none;
}


.sticker-message img {
  display: block;

  max-width: 145px;
  max-height: 145px;

  width: auto;
  height: auto;

  border-radius: 14px;
}


.sticker-missing {
  padding: 10px 13px;

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.7);

  color: #a094a4;

  font-size: 12px;
}

/* =========================
   紧凑吸顶工具栏
========================= */

#chatHeader {
  position: sticky;
  top: 0;
  z-index: 60;

  transition:
    padding 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#chatHeader .header-main h1,
#chatHeader .header-main p,
#chatHeader .header-button,
#chatHeader .tool-row {
  transition:
    font-size 0.18s ease,
    margin 0.18s ease,
    padding 0.18s ease,
    opacity 0.18s ease;
}

#chatHeader.compact-header {
  padding: 8px 10px 7px;

  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  box-shadow:
    0 8px 24px rgba(84, 67, 101, 0.10);
}

#chatHeader.compact-header .header-main {
  gap: 8px;
}

#chatHeader.compact-header .header-main h1 {
  font-size: 15px;
  line-height: 1.15;
}

#chatHeader.compact-header .header-main p {
  display: none;
}

#chatHeader.compact-header .settings-button {
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 12px;
}

#chatHeader.compact-header .tool-row {
  gap: 6px;
  margin-top: 7px;
  padding-bottom: 0;
}

#chatHeader.compact-header .tool-row .header-button {
  padding: 6px 9px;
  border-radius: 14px;
  font-size: 12px;
}

@media (max-width: 390px) {
  #chatHeader.compact-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  #chatHeader.compact-header .header-main h1 {
    font-size: 14px;
  }

  #chatHeader.compact-header .tool-row .header-button {
    padding-left: 8px;
    padding-right: 8px;
  }
}