/* ===== 翻译历史整体 ===== */
.history-wrapper{
  max-width:1100px;
  margin:28px auto 0;
  font-size:13px;
  color:#666;
  border-radius:12px;
}

.history-wrapper button{
  border:1px solid #e5e5e5;
  background:#fff;
  padding:6px 14px;
  border-radius:6px;
}

/* ===== 标题栏 ===== */
.history-header{
  cursor:pointer;
  padding:12px 16px;
  background:linear-gradient(180deg,#fafafa,#f3f3f3);
  border:1px solid #eee;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:600;
  transition:all .2s ease;
}
.history-header:hover{ background:#f7f7f7; }

/* ===== 展开面板 ===== */
#history-panel{
  margin-top:10px;
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fcfcfc;
}

/* ===== 单条记录：三列 + 删除按钮浮动 ===== */
.history-item{
  position:relative;
  display:grid;

  /* ✅ 关键：右侧译文更宽 */
  grid-template-columns: minmax(0, 1.4fr) max-content minmax(0, 2.2fr);

  gap:16px;
  padding:14px 54px 14px 14px;  /* ✅ 右侧多留一点给删除按钮，避免压字 */
  border-bottom:1px dashed #eee;
  align-items:center;
}

.history-item:hover{
  background:#f9f9f9;
  border-radius:8px;
}

/* 原文 */
.history-src{
  min-width:0;
  white-space:normal;
  color:#444;
  font-size:13px;
  line-height:1.65;
  cursor:pointer;
  word-break:break-word;
}
.history-src-text{ white-space:pre-wrap; }

/* 译文 */
.history-tgt{
  min-width:0;
  white-space:pre-wrap;
  color:#666;
  font-size:13px;
  line-height:1.65;
  word-break:break-word;
}

/* 语种胶囊：仅包裹内容，水平/垂直居中 */
.history-lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  align-self:center;

  width:fit-content;
  max-width:100%;
  padding:6px 12px;

  font-size:12px;
  color:#888;
  background:#f6f7f8;
  border:1px solid #eee;
  border-radius:999px;
  white-space:nowrap;
}

/* 删除按钮：浮动右上，不挤译文 */
.history-ops{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.history-ops button{
  width:32px;
  height:32px;
  border:none;
  background:transparent;
  color:#bbb;
  font-size:18px;
  cursor:pointer;
  transition:.15s;
}
.history-ops button:hover{ color:#ff4d4f; }

/* ===== 底部按钮居中 ===== */
.history-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

#history-page-info{
  min-width:50px;
  text-align:center;
  font-size:12px;
  color:#999;
}

.history-footer button{
  border:1px solid #e5e5e5;
  background:#fff;
  padding:6px 14px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  transition:.15s;
}
.history-footer button:hover{ background:#f2f2f2; }

/* =========================
   手机端适配（不改结构）
   ========================= */
@media (max-width: 768px) {

  .history-wrapper{
    margin:18px 10px 0;
  }

  #history-panel{
    padding:10px;
  }

  .history-header{
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
  }

  /* ✅ 单条记录：改成 2 列（内容 + 删除按钮） */
  .history-item{
    grid-template-columns: minmax(0, 1fr) 40px;
    gap:10px;
    padding:12px 10px;
    align-items:start;
  }

  /* ✅ 取消桌面端给删除按钮预留的右侧 padding（移动端不需要） */
  .history-item{
    padding-right:10px;
  }

  /* ✅ 让三块内容在同一列里纵向排列 */
  .history-src,
  .history-lang,
  .history-tgt{
    grid-column: 1 / 2;
  }

  /* 原文点击区更舒服 */
  .history-src{
    font-size:13px;
  }

  /* ✅ 语种胶囊：左对齐 + 不居中 + 不撑满 */
  .history-lang{
    justify-self:start;
    align-self:start;
    margin:6px 0 6px 0;
    padding:5px 10px;
    font-size:11px;
  }

  /* ✅ 译文分隔更清晰 */
  .history-tgt{
    border-top:1px dashed #d8d6d6;
    padding-top:10px;
  }

  /* ✅ 删除按钮：不要 absolute 覆盖文字，改为占第二列 */
  .history-ops{
    position:static;
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    justify-content:flex-end;
    align-items:flex-start;
    padding-top:2px;
  }

  .history-ops button{
    width:34px;
    height:34px;
    font-size:18px;
  }

  /* 底部按钮：居中 + 自动换行 */
  .history-footer{
    gap:8px;
    margin-top:10px;
  }

  .history-footer button{
    padding:7px 12px;
    font-size:12px;
  }

  #history-page-info{
    min-width:auto;
    padding:0 4px;
  }
}

/* 更小屏（iPhone SE 等）进一步紧凑 */
@media (max-width: 420px) {

  .history-item{
    gap:8px;
    padding:10px 8px;
  }

  .history-lang{
    font-size:10px;
    padding:4px 8px;
  }

  .history-footer button{
    padding:6px 10px;
    font-size:11px;
  }
}