User:弃权者/Template:少女前线邮件/styles.css

.gfl-mail {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius-medium, 6px);
  overflow: hidden;
  font-family: var(--font-family-base);
  font-size: 13px;
  color: var(--color-base);
  position: relative;
  min-height: 420px;
}

.gfl-wrapper {
  display: flex;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 200%;
}

.gfl-wrapper.detail-open {
  transform: translateX(-50%);
}

/* ── LIST VIEW ── */
.gfl-list {
  min-width: 50%;
  width: 50%;
  flex-shrink: 0;
}

.gfl-list-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-surface-3);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-subtle);
  letter-spacing: .04em;
  background: var(--color-surface-1);
  text-transform: uppercase;
}

.gfl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-surface-2);
  cursor: pointer;
  transition: background .15s;
  background: var(--color-surface-1);
}

.gfl-item:last-child { 
  border-bottom: none; 
}

.gfl-item:hover { 
  background: var(--color-surface-2); 
}

.gfl-icon {
  width: 36px; 
  height: 36px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius-small, 4px);
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-subtle);
}

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

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

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

.gfl-date {
  font-size: 11px;
  color: var(--color-subtle);
}

.gfl-chevron {
  font-size: 14px;
  color: var(--color-surface-4);
  flex-shrink: 0;
}

.gfl-item:hover .gfl-chevron { 
  color: var(--color-subtle); 
}

/* ── DETAIL VIEW ── */
.gfl-detail {
  min-width: 50%;
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.gfl-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-surface-3);
}

.gfl-back-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius-small, 4px);
  color: var(--color-base);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 12px;
  display: flex; 
  align-items: center; 
  gap: 5px;
  transition: background .15s;
  flex-shrink: 0;
}

.gfl-back-btn:hover { 
  background: var(--color-surface-3); 
}

.gfl-detail-icon {
  width: 28px; 
  height: 28px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius-small, 4px);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 14px; 
  color: var(--color-subtle);
  flex-shrink: 0;
}

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

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

.gfl-detail-body-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.gfl-detail-body {
  flex: 1;
  padding: 20px 18px;
  overflow-y: auto;
  background: var(--color-surface-0);
  min-width: 0;
}

.gfl-date-row {
  font-size: 11px;
  color: var(--color-subtle);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-surface-2);
}

.gfl-content {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-base);
}

.gfl-content p {
  margin-bottom: 12px;
}

.gfl-char {
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-surface-1);
  border-left: 1px solid var(--color-surface-2);
  overflow: hidden;
  padding: 0;
}

.gfl-char img {
  width: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.gfl-char-placeholder {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--color-subtle);
  line-height: 1.5;
}