/* styles.css — Hy 翻译 · 浏览器插件 offline demo
 * Tokens + sidepanel classes reproduced from the real source
 * (entrypoints/content/styles.ts + entrypoints/sidepanel/style.css).
 * Self-contained; system font stack only (no web fonts, no CDN). */

:root {
  --hy-brand: #2d68ff;
  --hy-brand-bg: #f0f8ff;
  --hy-brand-ball: #4171ff;
  --hy-bg: #ffffff;
  --hy-bg-primary: #f9f9f9;
  --hy-card-label: #f3f3f3;
  --hy-hover-surface: #ececec;
  --hy-divider: #e6e6e6;
  --hy-ink: #1a1a1a;
  --hy-ink-hover: #333333;
  --hy-font-1: rgba(0, 0, 0, 0.9);
  --hy-font-2: rgba(0, 0, 0, 0.6);
  --hy-font-3: rgba(0, 0, 0, 0.4);
  --hy-font-4: rgba(0, 0, 0, 0.26);
  --hy-success: #00a870;
  --hy-error: #ff4a3d;
  --hy-shadow-top: 0px 8px 24px rgba(0, 0, 0, 0.1);
  --hy-font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: var(--hy-font);
  color: var(--hy-font-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 700px at 20% 10%, #eaf0ff 0%, rgba(234, 240, 255, 0) 60%),
    radial-gradient(1100px 680px at 85% 90%, #e9fbf3 0%, rgba(233, 251, 243, 0) 55%),
    linear-gradient(135deg, #f4f6fb 0%, #eef1f7 100%);
  overflow: hidden;
}

/* Logical 1600x1000 canvas; JS scales this to fit the iframe. */
.viewport {
  position: relative; flex: none;
  width: 1600px; height: 1000px;
  transform-origin: center center;
}

/* ---------------- Simulated browser window ---------------- */
.browser {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--hy-bg);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(20, 30, 60, 0.28), 0 8px 28px rgba(20, 30, 60, 0.14);
}
.chrome { flex: none; background: #dee1e6; user-select: none; }
.tabstrip { display: flex; align-items: flex-end; height: 44px; padding: 0 10px; gap: 8px; }
.traffic { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; height: 44px; }
.traffic span { width: 12px; height: 12px; border-radius: 50%; }
.traffic .r { background: #ff5f57; } .traffic .y { background: #febc2e; } .traffic .g { background: #28c840; }
.tab {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  min-width: 240px; max-width: 280px; background: var(--hy-bg);
  border-radius: 10px 10px 0 0; font-size: 13px; color: var(--hy-font-1);
}
.tab .favicon { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.tab .tab-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab .tab-close { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--hy-font-3); font-size: 14px; flex: none; }
.tab .tab-close:hover { background: var(--hy-hover-surface); }
.tab-new { width: 28px; height: 28px; margin-bottom: 3px; display: grid; place-items: center; border-radius: 50%; color: var(--hy-font-2); font-size: 18px; }
.tab-new:hover { background: rgba(0, 0, 0, 0.06); }
.toolbar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; background: var(--hy-bg); border-bottom: 1px solid var(--hy-divider); }
.nav-btns { display: flex; align-items: center; gap: 2px; }
.nav-btn { width: 32px; height: 32px; border: none; background: transparent; border-radius: 50%; color: var(--hy-font-2); display: grid; place-items: center; cursor: pointer; }
.nav-btn:hover { background: var(--hy-hover-surface); color: var(--hy-font-1); }
.nav-btn:disabled { color: rgba(0, 0, 0, 0.2); cursor: default; background: transparent; }
.omnibox { flex: 1; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; background: var(--hy-bg-primary); border: 1px solid transparent; border-radius: 9999px; font-size: 13.5px; color: var(--hy-font-1); cursor: text; }
.omnibox:hover { background: #f1f2f5; }
.omnibox .lock { color: var(--hy-font-3); display: inline-flex; }
.omnibox .url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omnibox .url .scheme { color: var(--hy-font-3); }
.omnibox .star { color: var(--hy-font-3); }
.toolbar-actions { display: flex; align-items: center; gap: 4px; }
.ext-pin { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; display: grid; place-items: center; cursor: pointer; position: relative; }
.ext-pin:hover { background: var(--hy-hover-surface); }
.ext-pin img { width: 22px; height: 22px; display: block; border-radius: 5px; }
.ext-pin.puzzle { color: var(--hy-font-2); }
.ext-pin .ext-dot { position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--hy-brand); border: 1.5px solid #fff; opacity: 0; transform: scale(0.4); transition: opacity .2s, transform .2s; }
.ext-pin.active .ext-dot { opacity: 1; transform: scale(1); }
.avatar { width: 28px; height: 28px; border-radius: 50%; margin-left: 4px; background: linear-gradient(135deg, #7aa2ff, #4171ff); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; }

/* Content region: page (left) + sidepanel (right) */
.content-region { flex: 1; min-height: 0; display: flex; position: relative; }

/* ---------------- Page area (scrollable web page) ---------------- */
.page-area { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #eef0f3; }
.page-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.page-scroll::-webkit-scrollbar { width: 12px; }
.page-scroll::-webkit-scrollbar-thumb { background: #c7ccd4; border-radius: 8px; border: 3px solid #eef0f3; }
.page-scroll::-webkit-scrollbar-track { background: transparent; }
.webpage { max-width: 820px; margin: 0 auto; padding: 56px 64px 140px; background: var(--hy-bg); min-height: 100%; }
.site-kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--hy-brand); font-weight: 600; margin-bottom: 18px; }
.webpage h1 { font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 18px; color: #14171f; }
.webpage .meta { color: var(--hy-font-3); font-size: 15px; margin: 0 0 30px; }
.webpage h2 { font-size: 26px; line-height: 1.3; font-weight: 700; margin: 40px 0 16px; color: #1a1f29; }
.webpage p { font-size: 18px; line-height: 1.75; margin: 0 0 22px; color: #2b3038; }
.webpage ul { margin: 0 0 24px; padding-left: 26px; }
.webpage li { font-size: 18px; line-height: 1.7; margin-bottom: 10px; color: #2b3038; }
.webpage .hero { width: 100%; height: 260px; border-radius: 14px; margin: 4px 0 34px; background: linear-gradient(120deg, #dbe4ff 0%, #eaf1ff 45%, #e6fbf2 100%); display: grid; place-items: center; color: #98a7c4; font-size: 14px; border: 1px solid #eef1f7; }
.webpage ::selection { background: rgba(45, 104, 255, 0.22); }

/* Full-page bilingual translation (page-translate.ts: original kept, translation below). */
.hy-mt-translation {
  display: block; margin: 4px 0; padding: 1px 0;
  line-height: 1.6; color: inherit; opacity: 0.82;
  animation: hy-mt-fade .3s ease both;
}
@keyframes hy-mt-fade { from { opacity: 0; } to { opacity: 0.82; } }
.hy-mt-ph { display: block; margin: 4px 0; padding: 1px 0; }
.hy-mt-ph > i { display: inline-block; height: .72em; width: 42%; border-radius: .35em; background: currentColor; opacity: .22; vertical-align: middle; animation: hy-mt-shimmer 1.1s ease-in-out infinite; }
@keyframes hy-mt-shimmer { 0% { opacity: .12; } 50% { opacity: .32; } 100% { opacity: .12; } }
/* Reading modes (pure DOM show/hide). */
.hy-mode-translation .hy-orig { display: none; }
.hy-mode-original .hy-mt-translation, .hy-mode-original .hy-mt-ph { display: none; }

/* ============================================================
 * FLOATING BALL (entrypoints/content/FloatingBall.tsx)
 * ============================================================ */
.hy-fb-root { position: absolute; right: 0; z-index: 40; width: 42px; }
.hy-fb-root .hy-fb-container {
  position: absolute; top: 0; right: -19px; /* MARGIN(10) - EDGE_HIDE(29) */
  transition: right .18s ease;
}
.hy-fb-root.hovering .hy-fb-container { right: 10px; }
.hy-fb-ball { position: relative; width: 42px; height: 42px; cursor: pointer; touch-action: none; user-select: none;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 9999px; }
.hy-fb-ball.is-open { transform: rotate(45deg); }
.hy-fb-ball img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; transform: rotate(-45deg); filter: drop-shadow(0 6px 16px rgba(0,0,0,0.08)); pointer-events: none; }
.hy-fb-ball.is-translating img { animation: hy-fb-glow-breathe 1.8s ease-in-out infinite; }
@keyframes hy-fb-glow-breathe {
  0%,100% { filter: drop-shadow(0 0 2px rgba(65,113,255,0.18)) drop-shadow(0 0 4px rgba(65,113,255,0.12)) drop-shadow(0 0 6px rgba(65,113,255,0.07)); }
  50% { filter: drop-shadow(0 0 3px rgba(65,113,255,0.4)) drop-shadow(0 0 6px rgba(65,113,255,0.26)) drop-shadow(0 0 9px rgba(65,113,255,0.18)); }
}
.hy-fb-bubble {
  position: absolute; top: 50%; right: 52px; /* left of the right-pinned ball */
  width: max-content; max-width: 240px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.72); color: #fff; display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap;
  pointer-events: none; user-select: none; z-index: 2;
  opacity: 0; transform: translateY(-50%) translateX(4px);
  transition: opacity .12s ease .06s, transform .12s ease .06s;
}
.hy-fb-root.show-bubble .hy-fb-bubble { opacity: 1; transform: translateY(-50%) translateX(0); }
.hy-fb-sub {
  position: absolute; left: 0; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hy-divider); background: var(--hy-bg); color: var(--hy-font-1);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 0;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, background-color .15s ease, color .15s ease;
}
.hy-fb-sub.sidebar { top: 50px; }   /* BALL+8 */
.hy-fb-sub.summary { top: 100px; }  /* BALL*2+16 */
.hy-fb-sub.shot { top: 150px; }     /* BALL*3+24 */
.hy-fb-root.hovering .hy-fb-sub { opacity: .5; transform: translateY(0); pointer-events: auto; }
.hy-fb-sub:hover { opacity: 1; background: var(--hy-hover-surface); color: var(--hy-font-2); }
.hy-fb-sub::after {
  content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12px; line-height: 18px;
  border-radius: 6px; padding: 2px 8px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .12s ease .06s, transform .12s ease .06s;
}
.hy-fb-sub:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.hy-fb-close {
  position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--hy-divider); background: var(--hy-bg); color: var(--hy-font-2);
  font-size: 13px; line-height: 16px; text-align: center; padding: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14); opacity: 0; z-index: 3; transition: opacity .18s ease, background-color .15s ease;
}
.hy-fb-root.hovering .hy-fb-close { opacity: .6; }
.hy-fb-close:hover { opacity: 1; background: var(--hy-hover-surface); }
.hy-fb-close-menu {
  position: absolute; top: 6px; right: 52px; min-width: 188px;
  background: var(--hy-bg); border: 1px solid var(--hy-divider); border-radius: 12px;
  box-shadow: var(--hy-shadow-top); padding: 8px; z-index: 4;
  display: none; flex-direction: column; gap: 2px;
}
.hy-fb-close-menu.open { display: flex; }
.hy-fb-close-menu-item {
  width: 100%; border: none; background: transparent; color: var(--hy-font-1);
  text-align: left; font-family: var(--hy-font); font-size: 14px; line-height: 22px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background-color .15s ease;
}
.hy-fb-close-menu-item:hover { background: var(--hy-hover-surface); }
/* Reveal tab after ball hidden */
.fb-reveal { position: absolute; right: 0; top: 62%; transform: translateY(-50%); background: var(--hy-brand-ball); color: #fff; border: none; border-radius: 8px 0 0 8px; cursor: pointer; padding: 10px 4px; writing-mode: vertical-rl; letter-spacing: 2px; font-size: 11px; font-family: var(--hy-font); z-index: 40; box-shadow: -2px 2px 10px rgba(20,40,120,0.2); display: none; }
.fb-reveal.show { display: block; }

/* ============================================================
 * SELECTION dot + rich bubble (SelectionBubble.tsx)
 * ============================================================ */
.sel-dot {
  position: absolute; z-index: 45; width: 20px; height: 20px; border-radius: 50%;
  background: var(--hy-brand-ball); box-shadow: 0 3px 10px rgba(65,113,255,0.45);
  display: none; place-items: center; cursor: pointer; transform: translate(-50%, 4px);
  animation: dot-pop .18s ease both;
}
.sel-dot.show { display: grid; }
.sel-dot svg { width: 12px; height: 12px; }
@keyframes dot-pop { from { opacity: 0; transform: translate(-50%, 4px) scale(0.4); } to { opacity: 1; transform: translate(-50%, 4px) scale(1); } }

.hy-selection-bubble {
  position: absolute; z-index: 46; width: 540px; max-width: calc(100% - 16px);
  background: var(--hy-bg); color: var(--hy-font-1);
  border-radius: 16px; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--hy-divider); font-size: 15px; line-height: 24px; overflow: hidden;
  display: none; animation: bub-pop .16s ease both;
}
.hy-selection-bubble.show { display: block; }
@keyframes bub-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--hy-divider); }
.sb-brand { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sb-brand img { width: 16px; height: 16px; border-radius: 4px; display: block; }
.sb-name { font-weight: 600; font-size: 14px; color: var(--hy-font-1); white-space: nowrap; }
.sb-target { color: var(--hy-font-3); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sb-btn { cursor: pointer; border: none; background: transparent; color: var(--hy-font-2); font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: 8px; font-family: var(--hy-font); white-space: nowrap; transition: background-color .15s, color .15s; display: inline-flex; align-items: center; }
.sb-btn:hover { background: var(--hy-hover-surface); color: var(--hy-font-2); }
.sb-body { padding: 12px; max-height: 320px; overflow-y: auto; }
.sb-primary { cursor: pointer; border: none; background: var(--hy-ink); color: #fff; font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: 9999px; width: 100%; font-family: var(--hy-font); transition: background-color .15s; }
.sb-primary:hover { background: var(--hy-ink-hover); }
.sb-loading { color: var(--hy-font-3); }
.sb-trans-wrap { position: relative; padding-bottom: 30px; }
.sb-trans { white-space: pre-wrap; }
.sb-cursor { display: inline-block; width: 7px; height: 15px; background: var(--hy-brand); margin-left: 1px; vertical-align: text-bottom; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sb-ctx-tag { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--hy-brand); background: var(--hy-brand-bg); padding: 1px 8px; border-radius: 9999px; pointer-events: none; }
.sb-dict { margin-top: 12px; position: relative; padding-bottom: 22px; }
.sb-dict-divider { height: 1px; background: var(--hy-divider); margin: 0 0 12px; }
.sb-dict-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sb-dict-word { font-weight: 600; font-size: 16px; color: var(--hy-font-1); }
.sb-dict-phon { color: var(--hy-font-3); font-size: 13px; }
.sb-dict-defs { white-space: pre-wrap; color: var(--hy-font-1); }
.sb-dict-ex-label { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--hy-font-3); margin: 8px 0 4px; }
.sb-dict-ex { margin: 0; padding-left: 18px; color: var(--hy-font-1); font-size: 14px; line-height: 22px; }
.sb-dict-ex li { margin-bottom: 4px; }
.sb-dict-ex b { color: var(--hy-brand); font-weight: 600; }
.sb-dict-tag { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--hy-font-3); pointer-events: none; }
/* edit (加入记忆库) state */
.sb-edit { display: flex; flex-direction: column; gap: 12px; }
.sb-edit-field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sb-edit-label { font-size: 12px; line-height: 18px; color: var(--hy-font-2); }
.sb-edit-count { font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; color: var(--hy-font-3); }
.sb-edit-count.over { color: var(--hy-error); }
.sb-edit-area { width: 100%; box-sizing: border-box; border: 1px solid var(--hy-divider); border-radius: 8px; padding: 8px 10px; font-size: 14px; line-height: 20px; font-family: var(--hy-font); color: var(--hy-font-1); background: var(--hy-bg); resize: vertical; outline: none; }
.sb-edit-area:focus { border-color: var(--hy-brand); }
.sb-edit-btns { display: flex; gap: 8px; }
.sb-edit-cancel { cursor: pointer; border: none; background: var(--hy-card-label); color: var(--hy-font-1); font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: 9999px; font-family: var(--hy-font); }
.sb-edit-cancel:hover { background: var(--hy-hover-surface); }
.sb-edit-save { flex: 1; cursor: pointer; border: none; background: var(--hy-ink); color: #fff; font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: 9999px; font-family: var(--hy-font); }
.sb-edit-save:disabled { opacity: .5; cursor: default; }

/* ============================================================
 * SUMMARY floating card (SummaryCard.tsx) — anchored bottom-right of page
 * ============================================================ */
.hy-summary-card {
  position: absolute; bottom: 24px; right: 24px; z-index: 44; width: 360px; max-width: calc(100% - 48px);
  background: var(--hy-bg); color: var(--hy-font-1); border-radius: 16px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.18); border: 1px solid var(--hy-divider);
  font-size: 14px; line-height: 22px; overflow: hidden; display: none;
  animation: bub-pop .18s ease both;
}
.hy-summary-card.show { display: block; }
.hy-sc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--hy-divider); }
.hy-sc-head img { width: 16px; height: 16px; border-radius: 4px; }
.hy-sc-title { font-weight: 600; font-size: 14px; }
.hy-sc-loading { color: var(--hy-brand); font-size: 12px; }
.hy-sc-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hy-sc-body { padding: 12px; max-height: 360px; overflow-y: auto; }
.hy-sc-overview { color: var(--hy-font-1); font-weight: 500; margin-bottom: 10px; }
.hy-sc-points { margin: 0; padding-left: 18px; color: var(--hy-font-1); font-size: 14px; line-height: 22px; }
.hy-sc-points li { margin-bottom: 6px; }
.hy-sc-placeholder { color: var(--hy-font-3); }

/* ============================================================
 * SCREENSHOT overlay + result (ScreenshotOverlay.tsx / ScreenshotBubble.tsx)
 * ============================================================ */
.shot-overlay { position: absolute; inset: 0; z-index: 47; cursor: crosshair; user-select: none; display: none; }
.shot-overlay.show { display: block; }
.shot-dim { position: absolute; inset: 0; background: rgba(0,0,0,0.28); }
.shot-hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.72); color: #fff; font-size: 13px; line-height: 20px; padding: 6px 14px; border-radius: 9999px; pointer-events: none; white-space: nowrap; }
.shot-mask { position: absolute; background: rgba(0,0,0,0.28); pointer-events: none; }
.shot-rect { position: absolute; border: 1.5px solid var(--hy-brand); box-shadow: 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }
.shot-badge { position: absolute; top: -22px; left: 0; background: var(--hy-brand); color: #fff; font-size: 11px; line-height: 16px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.hy-shot-bubble {
  position: absolute; z-index: 48; width: 460px; max-width: calc(100% - 16px);
  background: var(--hy-bg); color: var(--hy-font-1); border-radius: 16px;
  box-shadow: 0px 8px 24px rgba(0,0,0,0.18); border: 1px solid var(--hy-divider);
  font-size: 15px; line-height: 24px; overflow: hidden; display: none; animation: bub-pop .16s ease both;
}
.hy-shot-bubble.show { display: block; }
.shot-orig { margin-bottom: 10px; padding: 8px 10px; background: var(--hy-card-label); border-radius: 8px; color: var(--hy-font-2); font-size: 13px; line-height: 20px; white-space: pre-wrap; }
.shot-out { white-space: pre-wrap; }

/* ============================================================
 * TOAST
 * ============================================================ */
.toast-wrap { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(26, 26, 26, 0.92); color: #fff; font-size: 14px; padding: 10px 18px; border-radius: 9999px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 8px; animation: toast-in .2s ease both; }
.toast svg { width: 15px; height: 15px; color: #4ade80; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Shortcut hint chip */
.shortcut-hint { position: absolute; left: 16px; bottom: 14px; z-index: 30; display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); border: 1px solid var(--hy-divider); border-radius: 9999px; padding: 6px 12px; font-size: 12px; color: var(--hy-font-2); box-shadow: 0 4px 14px rgba(20, 30, 60, 0.08); }
.shortcut-hint kbd { font-family: var(--hy-font); background: var(--hy-card-label); color: var(--hy-font-1); border-radius: 5px; padding: 1px 6px; font-size: 11px; border: 1px solid var(--hy-divider); }
.shortcut-hint .sep { width: 1px; height: 14px; background: var(--hy-divider); }

/* ============================================================
 * SIDEPANEL — reproduced from entrypoints/sidepanel/style.css
 * ============================================================ */
.sidepanel {
  flex: none; width: 0; overflow: hidden;
  background: var(--hy-bg-primary); border-left: 1px solid var(--hy-divider);
  display: flex; flex-direction: column;
  transition: width .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.sidepanel.open { width: 400px; }
.sp-inner { width: 400px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.hy-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--hy-divider); background: var(--hy-bg); flex: none; }
.hy-header img { width: 22px; height: 22px; border-radius: 5px; }
.hy-title { font-weight: 600; color: var(--hy-font-1); font-size: 16px; line-height: 24px; flex: 1; }
.hy-header-close { width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; border-radius: 8px; color: var(--hy-font-2); display: grid; place-items: center; font-size: 18px; }
.hy-header-close:hover { background: var(--hy-hover-surface); }
.hy-body { flex: 1; padding: 16px 16px 20px; overflow-y: auto; scrollbar-width: none; min-height: 0; }
.hy-body::-webkit-scrollbar { width: 0; height: 0; }
.hy-row { display: flex; gap: 8px; align-items: center; margin: 0; }
.hy-section-divider { height: 1px; background: var(--hy-divider); margin: 14px 0 12px; }
.hy-section-toggle { border: none; background: transparent; color: var(--hy-font-1); font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 8px; cursor: pointer; transition: background-color .15s ease; }
.hy-section-toggle:hover { background: var(--hy-hover-surface); }
.hy-section-toggle-row { justify-content: flex-start; margin: 0 0 12px; }
.hy-section-toggle-arrow { display: inline-flex; width: 10px; height: 10px; align-items: center; justify-content: center; transform: rotate(-90deg); transition: transform .16s ease; }
.hy-section-toggle-arrow.open { transform: rotate(0deg); }
.hy-section-toggle-arrow img { width: 10px; height: 10px; display: block; }
.hy-text-panel-wrap { margin-bottom: 4px; }

/* doc entry (cosmetic) */
.hy-doc-entry { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; padding: 12px 14px; border: 1px solid #dedede; border-radius: 16px; background: #f2f2f2; box-shadow: 0 4px 8px rgba(0,0,0,0.02); color: var(--hy-font-1); font-family: inherit; cursor: pointer; text-align: left; transition: background-color .15s, border-color .15s; }
.hy-doc-entry:hover { background: var(--hy-hover-surface); border-color: #d4d4d4; }
.hy-doc-entry-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hy-doc-entry-icon { display: inline-flex; color: var(--hy-font-2); flex-shrink: 0; }
.hy-doc-entry:hover .hy-doc-entry-icon { color: var(--hy-brand); }
.hy-doc-entry-title { font-size: 14px; line-height: 22px; font-weight: 600; }
.hy-doc-entry-arrow { display: inline-flex; width: 10px; height: 10px; align-items: center; justify-content: center; transform: rotate(-90deg); flex-shrink: 0; opacity: 0.4; }
.hy-doc-entry-arrow img { width: 10px; height: 10px; display: block; }

.hy-settings-panel { margin-top: 4px; }
.hy-subsection-toggle { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--hy-font-1); padding: 2px 10px; margin: 0; border-radius: 8px; cursor: pointer; font: inherit; transition: background-color .15s; }
.hy-subsection-toggle:hover { background: var(--hy-hover-surface); }
.hy-subsection-toggle.hy-subsection-inline { color: var(--hy-font-1); font-size: 14px; line-height: 22px; max-width: calc(100% - 8px); padding-left: 2px; padding-right: 8px; }

/* text module */
.hy-text-module { border: 1px solid #dedede; border-radius: 16px; background: #f2f2f2; box-shadow: 0 4px 8px rgba(0,0,0,0.02); overflow: hidden; }
.hy-text-langbar { display: flex; align-items: center; gap: 0; padding: 12px 14px 13px; border-bottom: 1px solid rgba(230, 230, 230, 0.82); }
.hy-text-lang-select { flex: 1; min-width: 0; }
.hy-text-swap-btn { width: 32px; height: 32px; border-radius: 9999px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color .15s; }
.hy-text-swap-btn:hover:not(:disabled) { background: var(--hy-hover-surface); }
.hy-text-swap-btn img { width: 20px; height: 20px; display: block; }
.hy-text-swap-btn:disabled { opacity: 0.45; background: transparent; cursor: default; }
.hy-text-input-wrap { position: relative; background: transparent; border-bottom: 1px solid var(--hy-divider); padding: 14px 14px 47px; }
.hy-text-input { width: 100%; min-height: 66px; border: none; background: transparent; border-radius: 0; padding: 0; font-size: 16px; line-height: 24px; font-weight: 400; resize: none; overflow-y: hidden; outline: none; font-family: var(--hy-font); color: var(--hy-font-1); }
.hy-text-input::placeholder { color: rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 24px; }
.hy-text-input-tools { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.hy-text-input-tools-gap { flex: 1; }
.hy-text-icon-btn { width: 30px; height: 30px; border: 1px solid rgba(230, 230, 230, 0.5); border-radius: 9999px; background: #fff; color: var(--hy-font-1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s; padding: 0; }
.hy-text-icon-btn:hover:not(:disabled) { background: var(--hy-hover-surface); border-color: var(--hy-divider); }
.hy-text-icon-btn img { width: 15px; height: 15px; display: block; }
.hy-text-icon-btn:disabled { opacity: 0.45; cursor: default; }
.hy-text-divider { height: 1px; background: var(--hy-divider); }
.hy-text-result { background: transparent; padding: 15px 14px 10px; }
.hy-text-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hy-text-result-lang { font-size: 11px; line-height: 18px; color: #333; }
.hy-text-result-content { font-size: 16px; line-height: 24px; color: #333; margin: 8px 0 9px; word-break: break-word; white-space: pre-wrap; min-height: 24px; }
.hy-text-result-content.is-error { font-size: 14px; line-height: 22px; color: var(--hy-error); }
.hy-text-loading { font-size: 11px; line-height: 18px; color: var(--hy-font-2); }
.hy-text-loading-skeleton { display: block; width: 160px; height: 20px; border-radius: 8px; background: linear-gradient(90deg, #ececec 0%, #f7f7f7 45%, #ececec 100%); background-size: 260% 100%; animation: hy-text-loading-shimmer 1.15s linear infinite; }
@keyframes hy-text-loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.hy-text-result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* custom language/style dropdown (SelectDropdown.tsx) */
.hy-lang-select { position: relative; flex: 1; min-width: 0; }
.hy-lang-trigger { width: 100%; height: 36px; padding: 7px 30px 7px 12px; border-radius: 8px; border: 1px solid var(--hy-divider); background: var(--hy-bg); color: var(--hy-font-1); font: inherit; font-family: var(--hy-font); cursor: pointer; text-align: center; position: relative; transition: border-color .15s, background-color .15s; }
.hy-lang-trigger.no-caret { padding-right: 12px; }
.hy-lang-trigger:hover { background: var(--hy-hover-surface); }
.hy-lang-trigger-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hy-lang-select.is-text-window .hy-lang-trigger { height: 38px; border-radius: 40px; border-color: #e6e6e6; background: #fff; }
.hy-lang-select.is-text-window .hy-lang-trigger:hover { border-color: #e6e6e6; background: var(--hy-hover-surface); }
.hy-lang-select.is-text-window .hy-lang-trigger-label { font-size: 12px; line-height: 20px; }
.hy-lang-trigger-static { cursor: default; pointer-events: none; }
.hy-lang-caret { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.hy-lang-caret img { width: 24px; height: 24px; display: block; }
.hy-lang-menu { position: fixed; z-index: 9999; background: var(--hy-bg); border: 1px solid var(--hy-divider); border-radius: 8px; box-shadow: var(--hy-shadow-top); overflow: hidden; display: flex; flex-direction: column; }
.hy-lang-search-wrap { padding: 8px; border-bottom: 1px solid var(--hy-divider); }
.hy-lang-search { width: 100%; height: 32px; border: 1px solid var(--hy-divider); border-radius: 8px; padding: 6px 10px; font: inherit; font-family: var(--hy-font); color: var(--hy-font-1); background: var(--hy-bg); outline: none; }
.hy-lang-search:focus { border-color: var(--hy-brand); }
.hy-lang-options { overflow-y: auto; padding: 6px 0; scrollbar-width: none; max-height: 320px; }
.hy-lang-options::-webkit-scrollbar { width: 0; height: 0; }
.hy-lang-option { width: 100%; border: none; background: transparent; color: var(--hy-font-1); font: inherit; font-family: var(--hy-font); line-height: 22px; text-align: left; display: flex; align-items: center; padding: 7px 12px; cursor: pointer; }
.hy-lang-option:hover { background: var(--hy-hover-surface); }
.hy-lang-option.selected { font-weight: 500; }
.hy-lang-option-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hy-lang-option-check { margin-left: 8px; font-size: 14px; color: var(--hy-font-1); flex: none; }
.hy-lang-empty { color: var(--hy-font-2); font-size: 12px; line-height: 20px; padding: 8px 12px; }

/* buttons */
.hy-btn { cursor: pointer; border: none; border-radius: 9999px; height: 36px; padding: 7px 16px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 22px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
.hy-btn.primary { background: var(--hy-ink); color: #fff; flex: 1; }
.hy-btn.primary:hover:not(:disabled) { background: var(--hy-ink-hover); }
.hy-btn:disabled { background: var(--hy-card-label); color: var(--hy-font-2); cursor: default; }

/* switch */
.hy-switch { position: relative; width: 40px; height: 24px; border: none; border-radius: 9999px; background: var(--hy-card-label); cursor: pointer; transition: background-color .15s; padding: 0; flex: none; }
.hy-switch:hover { background: var(--hy-divider); }
.hy-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--hy-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); transition: transform .15s; }
.hy-switch.on { background: var(--hy-ink); }
.hy-switch.on:hover { background: var(--hy-ink-hover); }
.hy-switch.on::after { transform: translateX(16px); }

/* section title / setting / muted */
.hy-section-title { font-size: 12px; line-height: 20px; color: var(--hy-font-2); margin: 16px 0 10px; display: flex; align-items: center; gap: 6px; user-select: none; }
.hy-memory-header { margin: 0; padding: 10px 0; }
.hy-setting { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.hy-setting label { color: var(--hy-font-1); font-size: 14px; }
.hy-muted { color: var(--hy-font-2); font-size: 12px; line-height: 20px; }

/* page card */
.hy-page-title-row { display: flex; align-items: center; margin: 0 0 10px; }
.hy-page-title { font-weight: 600; font-size: 14px; line-height: 22px; color: var(--hy-font-1); }
.hy-page-card { border: 1px solid #dedede; border-radius: 16px; padding: 14px; margin-bottom: 0; background: #f2f2f2; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02); overflow: hidden; }
.hy-page-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.hy-page-head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hy-page-pct { font-size: 12px; color: var(--hy-font-2); }
.hy-page-pct.error { color: var(--hy-error); }
.hy-page-lang-row { margin-top: 2px; gap: 0; }
.hy-page-source-fixed-wrap { flex: 1; min-width: 0; }
.hy-page-source-fixed-wrap .hy-lang-trigger-static .hy-lang-trigger-label { color: var(--hy-font-2); }
.hy-page-swap-static { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hy-page-swap-static img { width: 20px; height: 20px; display: block; }
.hy-page-mode-toggle { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(230, 230, 230, 0.82); display: flex; align-items: center; justify-content: space-between; }
.hy-page-mode-toggle-label { color: var(--hy-font-1); font-size: 14px; line-height: 22px; font-weight: 400; }
.hy-page-action-row { margin-top: 12px; align-items: stretch; }
.hy-page-style-wrap { position: relative; flex: 0 0 84px; width: 84px; display: flex; align-items: stretch; }
.hy-page-style-wrap .hy-lang-select { position: relative; z-index: 1; width: 100%; display: flex; }
.hy-page-style-wrap .hy-lang-select.is-text-window .hy-lang-trigger { height: 36px; padding: 7px 10px 7px 26px; border-radius: 8px; border-color: #e6e6e6; background: #fff; text-align: center; }
.hy-page-style-wrap .hy-lang-select.is-text-window .hy-lang-trigger-label { font-size: 12px; line-height: 20px; }
.hy-page-style-wrap.is-active .hy-lang-select.is-text-window .hy-lang-trigger { background: #f0f6ff; border-color: #c9ddff; color: #006afa; }
.hy-page-style-wrap.is-active .hy-lang-select.is-text-window .hy-lang-trigger-label { color: #006afa; font-weight: 500; }
.hy-page-style-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.hy-page-style-icon svg { width: 13px; height: 13px; display: block; }
.hy-page-style-wrap.is-active .hy-page-style-icon path { fill: #006afa; }
.hy-page-action-row .hy-btn.primary { border-radius: 8px; height: 36px; box-sizing: border-box; }
.hy-page-action-row .hy-btn.primary.is-loading-shimmer { position: relative; overflow: hidden; }
.hy-page-action-row .hy-btn.primary.is-loading-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,0) 18%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0) 78%); transform: translateX(-125%); animation: hy-page-loading-sweep 1.2s linear infinite; pointer-events: none; }
@keyframes hy-page-loading-sweep { 100% { transform: translateX(125%); } }

/* summary panel (sidepanel) */
.hy-summary-refresh { border: none; background: transparent; color: var(--hy-brand); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.hy-summary-refresh:disabled { color: var(--hy-font-3); cursor: default; }
.hy-summary-panel { margin-top: 8px; padding: 12px; background: var(--hy-bg); border: 1px solid var(--hy-divider); border-radius: 12px; }
.hy-summary-overview { color: var(--hy-font-1); font-weight: 500; line-height: 22px; margin-bottom: 8px; }
.hy-summary-points { margin: 0; padding-left: 18px; color: var(--hy-font-1); line-height: 22px; }
.hy-summary-points li { margin-bottom: 6px; }

/* memory */
.hy-mem-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin-top: 8px; scrollbar-width: none; }
.hy-mem-list::-webkit-scrollbar { width: 0; height: 0; }
.hy-mem-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hy-divider); border-radius: 8px; background: var(--hy-bg); }
.hy-mem-texts { flex: 1; min-width: 0; }
.hy-mem-pair { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--hy-font-1); }
.hy-mem-src, .hy-mem-tgt { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hy-mem-tgt { color: var(--hy-brand); }
.hy-mem-arrow { color: var(--hy-font-3); flex: none; }
.hy-mem-meta { font-size: 12px; line-height: 18px; color: var(--hy-font-3); margin-top: 2px; }
.hy-mem-del { flex: none; cursor: pointer; border: none; background: transparent; color: var(--hy-font-3); font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 8px; transition: background-color .15s, color .15s; }
.hy-mem-del:hover { background: var(--hy-hover-surface); color: var(--hy-font-2); }