/* ==========================================================================
   i18n.css — 语言切换器 + RTL（从右到左）排版适配
   ---------------------------------------------------------------------------
   布局本身用 CSS 逻辑属性（margin-inline-* 等）写成，方向由 <html dir> 驱动，
   所以 RTL 大体是「自动的」。这里只处理三件逻辑属性覆盖不了的事：
     1) 语言切换器的下拉面板样式；
     2) RTL 下需要镜像或重置的细节（图标方向、强制 LTR 的数字/代码块）；
     3) 混排隔离：昵称文本是任意方向的 Unicode，用 dir=auto + 隔离包裹。
   ========================================================================== */

/* ---------- 1. 语言切换器 ---------- */
.lang {
  position: relative;
  display: flex;
  align-items: center;
}
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang__code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--brand);
  font-family: var(--font-mono);
}

.lang__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 218px;
  max-height: min(64vh, 420px);
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: var(--z-header, 50);
}
.lang.is-open .lang__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'flag name' 'flag en';
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.lang__item:hover { background: var(--surface-2); }
.lang__item[aria-selected='true'] { background: var(--brand-soft); }

.lang__flag {
  grid-area: flag;
  font-size: 18px;
  line-height: 1;
}
.lang__name {
  grid-area: name;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.lang__en {
  grid-area: en;
  font-size: 11px;
  color: var(--text-mute);
}

/* ---------- 2. RTL 细节 ---------- */
/* 页头动作区图标语义（“前进箭头”在 RTL 里应指向左） */
[dir='rtl'] .tool__go svg { transform: scaleX(-1); }

/* 数字、统计、字符计数保持 LTR，避免阿拉伯-印度数字与拉丁数字混排时乱序 */
[dir='rtl'] .stat__num,
[dir='rtl'] .badge,
[dir='rtl'] .chip__count,
[dir='rtl'] .voteCount,
[dir='rtl'] .result__meta,
[dir='rtl'] .idea__side { direction: ltr; }

/* Toast 堆叠贴边方向跟随书写方向（用逻辑属性即可，无需覆盖）。
   但预览里的昵称文本是任意方向的，显式交给 dir=auto 判定 */
[dir='rtl'] .toast__preview { direction: ltr; unicode-bidi: isolate; }

/* 阿拉伯语等连笔文字行高更紧，标题与正文松一档 */
[data-locale='ar'] .hero__lead,
[data-locale='ar'] .section__desc,
[data-locale='ar'] .ename__meaning,
[data-locale='ar'] .acc__a,
[data-locale='ar'] .prose p {
  line-height: 1.9;
}

/* ---------- 3. 混排隔离（任意书写方向的昵称文本） ---------- */
.result__text,
.idea__text,
.nick__text,
.toast__preview,
.copysheet__ta {
  unicode-bidi: plaintext; /* 让浏览器按首字符判定方向，避免装饰符号翻转 */
}

/* 减少动效偏好：面板直接显示，不做位移动画 */
@media (prefers-reduced-motion: reduce) {
  .lang__panel { transition: none; }
  .copysheet, .copysheet__box { transition: none; }
}