/* ================================================================
   EMBED CODE GENERATOR — animeoshi-web Embed/EmbedCodeGenerator.
   Shared: AO mounts the same component on the anime detail page (Card /
   Badge tabs) and the episode page (Inline / Compact / Full), so the CSS is
   its own asset rather than one page's stylesheet. Consumes the page's
   scoped token map.
   ================================================================ */
.aoe-embed { position: relative; width: 100%; }
.aoe-embed-trigger { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: 100%; padding: 10px var(--spacing-md); border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-body); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.aoe-embed-trigger:hover { border-color: var(--color-accent); color: var(--color-text-primary); }
/* Collapsed by default (display:none, not the fragile [hidden] attr); the
   script adds .aoe-embed-open on click to reveal the tabs / code. */
.aoe-embed-popover { margin-top: var(--spacing-sm); padding: var(--spacing-smd); border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-md); background: var(--color-bg); display: none; flex-direction: column; gap: 10px; }
.aoe-embed-popover.aoe-embed-open { display: flex; }
.aoe-embed-tabs { display: flex; gap: var(--spacing-xs); }
.aoe-embed-tab { flex: 1; padding: 6px var(--spacing-smd); border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-md); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); font-family: var(--font-body); cursor: pointer; transition: all 0.15s ease; }
.aoe-embed-tab:hover { color: var(--color-text-secondary); }
.aoe-embed-tab-active { background: rgba(237, 237, 237, 0.1); color: var(--color-text-primary); border-color: var(--color-accent); }
.aoe-embed-theme { display: flex; align-items: center; gap: 6px; }
.aoe-embed-theme-label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-right: 2px; }
.aoe-embed-theme-btn { padding: 3px 10px; border: var(--border-normal) solid rgba(237, 237, 237, 0.15); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-family: var(--font-body); cursor: pointer; transition: all 0.15s ease; }
.aoe-embed-theme-btn:hover { color: var(--color-text-secondary); }
.aoe-embed-theme-active { background: rgba(237, 237, 237, 0.1); color: var(--color-text-primary); border-color: var(--color-accent); }
.aoe-embed-code-block { padding: var(--spacing-sm); border-radius: var(--radius-md); background: var(--color-surface); overflow-x: auto; }
.aoe-embed-code { font-size: 10px; line-height: 1.5; color: var(--color-text-secondary); word-break: break-all; white-space: pre-wrap; font-family: monospace; }
.aoe-embed-copy { padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--radius-md); background: var(--pebble); color: var(--color-button-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-family: var(--font-body); cursor: pointer; transition: opacity 0.15s ease; }
.aoe-embed-copy:hover { opacity: 0.9; }