User:弃权者/Template:少女前线邮件/styles.css：修订间差异

/* ===== 主题变量 ===== */
.gfl-mail {
  --gfl-bg-0:       var(--background-body,    #0d0e12);
  --gfl-bg-1:       var(--background-surface, #14161d);
  --gfl-bg-2:       var(--background-hover,   #1c1f2b);
  --gfl-border-1:   var(--border-color,       #252840);
  --gfl-border-2:   var(--border-color-hover, #2e3250);
  --gfl-text:       var(--color-base,         #d0d4e8);
  --gfl-text-em:    var(--color-emphasized,   #eef0f8);
  --gfl-text-sub:   var(--color-subtle,       #7a7f9a);
  --gfl-link:       var(--color-primary,      #6c8fc7);
  --gfl-radius:     var(--border-radius,      4px);
  --gfl-font-body:  14px;
  --gfl-font-meta:  12px;
  --gfl-font-label: 11.5px;
}

/* 浅色皮肤覆盖 —— Citizen 在 body 上加 .skin-citizen-light */
.skin-citizen-light .gfl-mail,
body.skin-citizen-light .gfl-mail {
  --gfl-bg-0:     #ffffff;
  --gfl-bg-1:     #f4f5f8;
  --gfl-bg-2:     #eaecf2;
  --gfl-border-1: #d0d3e0;
  --gfl-border-2: #b8bcd0;
  --gfl-text:     #2c2f3e;
  --gfl-text-em:  #14161d;
  --gfl-text-sub: #6b7080;
  --gfl-link:     #3a6ab8;
}

/* 系统级浅色回退（无 Citizen class 时也能用） */
@media (prefers-color-scheme: light) {
  .gfl-mail {
    --gfl-bg-0:     #ffffff;
    --gfl-bg-1:     #f4f5f8;
    --gfl-bg-2:     #eaecf2;
    --gfl-border-1: #d0d3e0;
    --gfl-border-2: #b8bcd0;
    --gfl-text:     #2c2f3e;
    --gfl-text-em:  #14161d;
    --gfl-text-sub: #6b7080;
    --gfl-link:     #3a6ab8;
  }
}

/* ===== 外壳 ===== */
.gfl-mail {
  position: relative;
  font-family: 'Roboto', 'Noto Sans JP', 'Microsoft YaHei', sans-serif;
  font-size: var(--gfl-font-body);
  color: var(--gfl-text);
  /* 用 grid 代替 height 切换，彻底消除高度跳动 */
  display: grid;
  grid-template-rows: 1fr;
}

/* ===== 列表面板 ===== */
.gfl-list {
  grid-area: 1 / 1;
  width: 100%;
  background: var(--gfl-bg-0);
  border: 1px solid var(--gfl-border-1);
  border-radius: 6px;
  overflow: hidden;
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  opacity: 1;
  transform: none;
  visibility: visible;
}

.gfl-mail.view-detail .gfl-list {
  opacity: 0;
  transform: translateX(-24px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility 0s .25s;
}

.gfl-list-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gfl-border-1);
  font-size: var(--gfl-font-label);
  font-weight: 600;
  color: var(--gfl-text-sub);
  letter-spacing: .06em;
  background: var(--gfl-bg-1);
  text-transform: uppercase;
}

.gfl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--gfl-bg-2);
  cursor: pointer;
  transition: background .12s;
  background: var(--gfl-bg-1);
}
.gfl-item:last-child { border-bottom: none; }
.gfl-item:hover      { background: var(--gfl-bg-2); }

.gfl-icon {
  width: 38px;
  height: 38px;
  background: var(--gfl-bg-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
  color: var(--gfl-text-sub);
}

.gfl-meta { flex: 1; min-width: 0; }

.gfl-subject {
  color: var(--gfl-text-em);
  font-size: var(--gfl-font-body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.gfl-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.gfl-date {
  font-size: var(--gfl-font-meta);
  color: var(--gfl-text-sub);
  flex-shrink: 0;
}

.gfl-chevron {
  font-size: 16px;
  color: var(--gfl-border-2);
  flex-shrink: 0;
  transition: color .12s;
}
.gfl-item:hover .gfl-chevron { color: var(--gfl-text-sub); }

/* ===== 详情面板 ===== */
.gfl-detail {
  grid-area: 1 / 1;          /* 与列表共占同一格，自然等高 */
  display: flex;
  flex-direction: column;
  background: var(--gfl-bg-0);
  border: 1px solid var(--gfl-border-1);
  border-radius: 6px;
  overflow: visible;
  opacity: 0;
  transform: translateX(24px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility 0s .25s;
}

.gfl-detail.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
}

.gfl-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--gfl-bg-1);
  border-bottom: 1px solid var(--gfl-border-1);
  border-radius: 5px 5px 0 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gfl-back-btn {
  background: var(--gfl-bg-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  color: var(--gfl-text);
  cursor: pointer;
  padding: 5px 12px;
  font-size: var(--gfl-font-meta);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .12s;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
.gfl-back-btn:hover { background: var(--gfl-border-1); }

.gfl-detail-icon {
  width: 30px;
  height: 30px;
  background: var(--gfl-bg-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--gfl-text-sub);
  flex-shrink: 0;
}

.gfl-detail-title-wrap {
  flex: 1;
  min-width: 0;
}

.gfl-detail-subject {
  font-size: 15px;
  font-weight: 500;
  color: var(--gfl-text-em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ===== 详情正文区 ===== */
.gfl-detail-body-wrap {
  flex: 1;
  display: flex;
  position: relative;
  overflow: visible;
  min-height: 0;
}

.gfl-detail-body {
  flex: 1;
  padding: 20px 220px 20px 20px;   /* 右边留给立绘 */
  overflow-y: auto;
  background: var(--gfl-bg-0);
  min-width: 0;
  position: relative;
  z-index: 2;
}

.gfl-date-row {
  font-size: var(--gfl-font-meta);
  color: var(--gfl-text-sub);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gfl-bg-2);
}

.gfl-content {
  font-size: var(--gfl-font-body);
  line-height: 1.9;
  color: var(--gfl-text);
}

/* ===== 立绘 ===== */
.gfl-char {
  position: absolute;
  top: 50px;
  right: -60px;
  width: 375px;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}

.gfl-char img,
.gfl-char a img {
  width: 350px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  display: block;
  flex-shrink: 0;
}

.gfl-char-placeholder { display: none; }