/* =========================================================
   提瓦特一言（kokuu-quote）· 样式 v4
   融入 KokuuSkin 的 Apple 扁平体系。
   形态：.kq-item — 后台顶栏右侧胶囊（单行，超长截断；首页不显示）
   ========================================================= */

/* ============ 共用 ============ */
.kq-item { --kq-el: #8B7FD4; }

.kq-text { margin: 0; }

.kq-refresh {
  flex: none;
  font-size: 12px; line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 3px 4px;
  cursor: pointer;
  opacity: .4;
  transition: opacity .2s, transform .35s cubic-bezier(.16,1,.3,1);
}
.kq-refresh:hover { opacity: .9; }
.kq-refresh:active { transform: rotate(180deg); }

/* 换一句时的淡入 */
@keyframes kqSwap {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.kq-swap .kq-text,
.kq-swap .kq-by { animation: kqSwap .45s cubic-bezier(.16,1,.3,1) both; }
.kq-swap .kq-by { animation-delay: .05s; }

/* =========================================================
   顶栏右侧：单行胶囊
   —— 出处 .kq-by 置于胶囊内部（.kq-body 内），随胶囊一起截断
   ========================================================= */
.kq-item .kq-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 380px;
  padding: 6px 11px 6px 12px;
  border-radius: 999px;
  color: var(--a-text-2, #6E6E73) !important;
  background: rgba(0, 0, 0, .022);
  border: 1px solid var(--a-sep, rgba(60,60,67,.11));
  cursor: pointer;
  overflow: hidden;                 /* 关键：统一裁剪内部所有内容 */
  transition: background .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s,
              border-color .22s;
}
.kq-item .kq-top:hover {
  background: rgba(0, 0, 0, .05);
  border-color: color-mix(in srgb, var(--kq-el) 40%, transparent);
  box-shadow: 0 2px 10px rgba(43, 31, 82, .08);
}

/* 元素色小方块（呼应七元素） */
.kq-item .kq-top::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--kq-el);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kq-el) 22%, transparent);
  transition: background .3s;
}

/* 台词 + 出处 合并容器：作为一个整体被截断 */
.kq-body {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;                    /* 允许在 flex 中收缩 */
  overflow: hidden;
}
.kq-item .kq-text {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 出处：始终在胶囊内，贴右显示，不可溢出 */
.kq-item .kq-by {
  flex: none;
  font-size: 11.5px;
  color: var(--a-text-3, #A1A1A6);
  white-space: nowrap;
  padding-left: 7px;
  border-left: 1px solid var(--a-sep, rgba(60,60,67,.13));
}

/* =========================================================
   夜间态（Apple Dark）
   ========================================================= */
body.dark-mode .kq-item .kq-top {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(84, 84, 88, .5);
  color: var(--a-text-2, #AEAEB2) !important;
}
body.dark-mode .kq-item .kq-top:hover { background: rgba(255, 255, 255, .1); }
body.dark-mode .kq-item .kq-by {
  color: var(--a-text-3, #7C7C80);
  border-left-color: rgba(84, 84, 88, .5);
}

/* =========================================================
   响应式 / 无障碍
   ========================================================= */
@media (max-width: 1100px) {
  .kq-item .kq-top { max-width: 260px; }
  .kq-item .kq-by { display: none; }   /* 中屏隐藏出处，只留台词 */
}
@media (max-width: 640px) {
  /* 小屏只留元素点 + 刷新，避免挤占顶栏 */
  .kq-item .kq-body { display: none; }
  .kq-item .kq-top { padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .kq-swap .kq-text,
  .kq-swap .kq-by { animation: none; }
  .kq-item .kq-top,
  .kq-refresh { transition: none; }
}