/*
 * GAIANEWS (gaianews.com) comment theme — v2.
 * Central source: comment_system_a/public/comments/themes/gaianews/v2.css
 * Public URL: https://chimatter.com/comments/themes/gaianews/v2.css
 *
 * Why v2: the site was rebuilt on 2026-08-22 from the "GAIA CONTROL" dashboard into
 * "GAIA NEWS" — a tuner for the world's official news livestreams. The design language
 * changed completely, so v1's tokens no longer match the page.
 *
 * Site tokens (from gaianews_com/docs/DESIGN.md v3 and assets/css/gaia.css):
 *   bg #08090B / surface #0E1013 / surface-2 #14171B
 *   line rgba(255,255,255,.09) / line-strong rgba(255,255,255,.16)
 *   fg #E9EBEE / muted #8E959E / dim #596069
 *   accent = TALLY RED #F5442F (v1 used a green #3DDC97 that no longer exists on the site)
 *   Fonts: "IBM Plex Sans" (body) / "Barlow Condensed" (numerals)
 *   Radius: 2px everywhere (v1 used 12px). No shadows — depth comes from hairlines.
 *
 * The site is DARK-FIXED: no theme toggle, no data-theme attribute, and it does not read
 * prefers-color-scheme. This release ships dark tokens unconditionally and intentionally
 * NO prefers-color-scheme override.
 *
 * Layout note: the site's console places a 324px channel guide against the right edge and
 * the drawer tab was overlapping it, covering channel rows. v2 moves the tab to the bottom
 * of the viewport so it never sits over the guide.
 */

.cmt-root {
  --cmt-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
              "Noto Sans JP", sans-serif;
  --cmt-gap: 1rem;
  --cmt-max-width: 42.5rem;
  --cmt-fg: #e9ebee;
  --cmt-muted: #8e959e;
  --cmt-border: rgba(255, 255, 255, 0.09);
  --cmt-anchor-color: #f5442f;
  --cmt-highlight: rgba(245, 68, 47, 0.14);
}

.cmt-drawer {
  --cmt-drawer-accent: #f5442f;
  --cmt-drawer-tab-bg: #0e1013;
  --cmt-drawer-tab-fg: #e9ebee;
  --cmt-drawer-sheet-bg: #0e1013;
  --cmt-drawer-fg: #e9ebee;
  --cmt-drawer-scrim: rgba(8, 9, 11, 0.72);
  --cmt-drawer-radius: 2px;
  --cmt-drawer-shadow: none;
}

/* The tab is instrument-like, not a candy pill: hairline border, square corners,
   uppercase micro-label — matching the site's .chip component.
   The default "fusen" affordance is a vertical pill hugging the right edge at 40% height,
   which on this site sits directly on top of the 324px channel guide and covers rows.
   v2 lays it down horizontally into the bottom-right corner; the site reserves that
   corner (gaia.css: .guide__legend padding-bottom / body.has-dock padding-bottom),
   so it covers nothing. */
.cmt-drawer[data-affordance="fusen"] .cmt-drawer-tab {
  top: auto;
  bottom: 0;
  right: 0;
  left: auto;
  transform: none;
  flex-direction: row;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  padding: 0.55rem 0.85rem;
  padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 0;
  border-bottom: 0;
  border-radius: 2px 0 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  min-height: 40px;
  box-shadow: none;
}

.cmt-drawer[data-affordance="fusen"] .cmt-drawer-tab-icon,
.cmt-drawer[data-affordance="fusen"] .cmt-drawer-tab-label {
  writing-mode: horizontal-tb;
}

/* Phones: this site already has its own fixed bottom dock, and a floating tab would
   sit permanently on top of the scrolling channel guide. The site puts the comment
   entry into its dock instead (gaia.css .dock + app.js wires it to this button),
   so the SDK's own tab is hidden rather than stacked on top of the dock.
   The button still exists in the DOM — the dock triggers it. */
@media (max-width: 719px) {
  .cmt-drawer[data-affordance="fusen"] .cmt-drawer-tab {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* The sheet itself: square corners, hairline top edge, no drop shadow. */
.cmt-drawer-sheet {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.cmt-root a:hover,
.cmt-root a:focus-visible {
  color: #f5442f;
}

.cmt-root :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.16);
  outline-offset: 2px;
}