/* ============================================================
   Darra 翻译 UI (darra-translate.css)
   2026-08-11 · git.darra.xyz 工业仓储 · 顶栏翻译按钮官方化改造
   按钮视觉 100% 走 GitLab 官方 gl-button 类 (btn gl-button btn-default
   btn-sm btn-default-tertiary), 本 CSS 零自定义按钮视觉 (无背景/渐变/边框/阴影);
   仅保留无官方类可复用的部分: 定位容器 / 下拉浮层 / 菜单项 (视觉对齐
   GitLab 官方 gl-dropdown / gl-dropdown-item)。
   约束: 浅色主题; class 全部 darra-translate-* 前缀;
         由 darra-translate.js ensureCss() 运行时注入 <head>。
   ============================================================ */

/* ---------- 1. 定位容器 (按钮本体视觉由 GitLab 官方 gl-button 接管) ---------- */
/* Google 横幅藏掉，只留我们的 Language 按钮同时驱动 GitLab + googtrans */
iframe.goog-te-banner-frame, .goog-te-banner-frame, .skiptranslate iframe {
  display: none !important;
}
body { top: 0 !important; }

.darra-translate-holder {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
}

/* Language 固定文案防换行 */
.darra-translate-btn .darra-translate-label {
  white-space: nowrap;
}

/* ---------- 2. 下拉面板: 白底 + #d0d7de 边框 + 阴影 + 圆角 8px ---------- */
/* 视觉对齐 GitLab 官方 gl-new-dropdown (交互必需, 无官方类可复用) */
.darra-translate-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2147483000;
  display: none;
  width: 232px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(31, 35, 40, 0.16),
              0 3px 8px rgba(31, 35, 40, 0.08);
}
.darra-translate-menu::-webkit-scrollbar { width: 8px; }
.darra-translate-menu::-webkit-scrollbar-thumb {
  background: #d0d7de;
  border-radius: 4px;
}
.darra-translate-menu::-webkit-scrollbar-track { background: transparent; }

/* 菜单项: 视觉对齐 GitLab 官方 gl-dropdown-item (hover 灰底 rgba(31,35,40,.08) + 圆角 4px) */
.darra-translate-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #1f2328;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.darra-translate-item:hover { background: rgba(31, 35, 40, 0.08); }
.darra-translate-item .darra-translate-item-flag {
  flex: none;
  width: 20px;
  text-align: center;
  font-size: 14px;
}
.darra-translate-item .darra-translate-item-name { flex: 1; }
.darra-translate-item.darra-translate-active {
  background: rgba(31, 35, 40, 0.08);
  color: #1f75cb;
  font-weight: 700;
}
.darra-translate-item .darra-translate-check {
  color: #1f75cb;
  font-weight: 700;
}