/*
 * ssbski skin — a Bluesky-faithful reskin of the Decent web client.
 *
 * Loaded INSTEAD OF Decent's style.css (the ssbski UI server rewrites the
 * /style.css link to /ssbski-style.css). The only other stylesheets present
 * are Twitter Bootstrap 2.3.2 and the Material Symbols font, so this file owns
 * the entire layout — it builds Bluesky's three-zone shell (left nav rail,
 * centered feed, right column) on top of Decent's existing DOM with no JS
 * changes. The filename intentionally contains "style.css" so Decent's
 * browser-side fallback stylesheet check recognizes it as external.
 */

/*
 * Palette below is harvested directly from Bluesky's ALF design system
 * (@bsky.app/alf DEFAULT_PALETTE, BLUE_HUE 211). Roles follow ALF's own
 * contrast mapping: light uses the scale as-is, dark uses the inverted scale.
 *   border  = contrast_100   muted   = text_contrast_medium (contrast_700/300)
 *   surface-soft = contrast_50   muted-soft = text_contrast_low (contrast_400/600)
 */
/* Bluesky's UI font is Inter (ALF "theme" font = InterVariable). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --sky-bg: #ffffff;            /* contrast_0  */
  --sky-surface: #ffffff;
  --sky-surface-soft: #eff2f6;  /* contrast_50 */
  --sky-hover: #eff2f6;
  --sky-border: #dce2ea;        /* contrast_100 */
  --sky-border-strong: #c0cad8; /* contrast_200 */
  --sky-text: #0b0f14;          /* ~contrast_1000 */
  --sky-muted: #42576e;         /* ~contrast_700 */
  --sky-muted-soft: #8798b0;    /* contrast_400 */
  --sky-blue: #1085fe;          /* brand blue — ALF primary (tokens.ts) */
  --sky-blue-hover: #0a7aff;
  --sky-blue-soft: rgba(16, 133, 254, 0.12);
  --sky-green: #09b35e;         /* positive_500 */
  --sky-green-soft: rgba(9, 179, 94, 0.12);
  --sky-pink: #ec4899;          /* alf pink */
  --sky-pink-soft: rgba(236, 72, 153, 0.12);
  /* Forge semantics — diff/state colours mapped onto ALF-ish hues so the git
   * screens read in the same palette as the rest of the skin (see git section). */
  --sky-red: #e5484d;           /* negative_500 */
  --sky-red-soft: rgba(229, 72, 77, 0.12);
  --sky-warn: #9a6700;          /* closed / caution text */
  --sky-warn-soft: #fff5d6;
  --sky-purple: #8250df;        /* merged */
  --sky-purple-soft: rgba(130, 80, 223, 0.12);
  --sky-mark: #fff8c5;          /* line-highlight background */
  --sky-mark-strong: #fae17d;
  --sky-shadow: 0 10px 28px rgba(15, 20, 25, 0.12);

  /* Layout */
  --sky-rail-width: 240px;
  --sky-right-width: 320px;
  --sky-feed-width: 600px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky-bg: #000000;            /* contrast_0 inverted */
    --sky-surface: #000000;
    --sky-surface-soft: #19222e;  /* contrast_950 */
    --sky-hover: #111822;         /* contrast_975 */
    --sky-border: #232e3e;        /* contrast_900 */
    --sky-border-strong: #313f54; /* contrast_800 */
    --sky-text: #eef3f8;          /* ~contrast_0 inverted */
    --sky-muted: #a5b2c5;         /* contrast_300 */
    --sky-muted-soft: #667b99;    /* contrast_500 */
    --sky-blue: #1085fe;          /* same brand blue in dark — Bluesky doesn't lighten it */
    --sky-blue-hover: #4a9eff;
    --sky-blue-soft: rgba(16, 133, 254, 0.20);
    --sky-green: #0dd370;         /* positive_400 */
    --sky-green-soft: rgba(13, 211, 112, 0.16);
    --sky-pink: #f472b6;
    --sky-pink-soft: rgba(244, 114, 182, 0.16);
    --sky-red: #ff6369;
    --sky-red-soft: rgba(255, 99, 105, 0.16);
    --sky-warn: #d4a72c;
    --sky-warn-soft: rgba(212, 167, 44, 0.18);
    --sky-purple: #b392f0;
    --sky-purple-soft: rgba(179, 146, 240, 0.18);
    --sky-mark: rgba(212, 167, 44, 0.22);
    --sky-mark-strong: rgba(212, 167, 44, 0.42);
    --sky-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  }
}

/* Reset — ssbski no longer loads Bootstrap, so re-establish the few base
 * rules it used to provide (box model, body margin, list chrome). */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--sky-bg);
  color: var(--sky-text);
  /* Inter + ALF's exact web fallback stack */
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 15px;        /* ALF text_md */
  line-height: 1.3;       /* ALF lineHeight.snug */
  /* ALF disables Inter's contextual alternates */
  font-variant-ligatures: no-contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nav lists must not show browser default bullets/indent without Bootstrap */
.navbar .nav,
.navbar .nav li,
.menu,
.menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

button { cursor: pointer; }

/* Bluesky doesn't underline links by default (mentions, timestamps, post URLs
 * are colour-only); post-body links underline on hover via the rule below. */
a { color: var(--sky-blue); text-decoration: none; }
a:hover { color: var(--sky-blue-hover); }

textarea, input, button { font-family: inherit; }

button { border-radius: 999px; }

/* Bootstrap used to supply the base button look; re-establish it for ssbski */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-surface);
  color: var(--sky-text);
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.btn:hover {
  background: var(--sky-hover);
  border-color: var(--sky-border-strong);
}

/* ============================================================
 * Layout shell
 *   .screen.column
 *     .navbar              -> fixed LEFT nav rail
 *     .screen__content     -> centered feed, room reserved for rail + right col
 * The right-side search lives in .navbar .pull-right, which we pull out of the
 * rail and fix to the right edge to form Bluesky's right column.
 * ============================================================ */

/* The centre column owns the scroll (like decent / Bluesky) instead of letting
 * the whole page scroll. This is what the pull-stream Scroller needs: it binds
 * its scroll listener to .column.scroller and decides when to load more via
 * that element's scrollTop. If the element grows to fit all content (page-level
 * scroll), scrollTop stays 0, isBottom() is always true, and the entire batch
 * is dumped on load. So we lock .screen to the viewport and make the feed
 * column the actual scroll container. */
.screen,
.screen.column {
  display: block;
  height: 100vh;
  overflow: hidden;
  background: var(--sky-bg);
}

/* Flex column: the sticky feed-header keeps its natural height and the
 * feed-host below it takes the remaining viewport space (min-height:0 lets it
 * shrink so its child can scroll rather than overflow). */
.screen__content,
.screen__content.column {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  margin-left: var(--sky-rail-width);
  margin-right: var(--sky-right-width);
  background: var(--sky-bg);
}

/* The route view renders into .feed-host. When that view is a scroller it
 * fills the host and scrolls internally (rule below); for non-scroller routes
 * (profile, thread, unknown) the host itself scrolls so long pages aren't
 * clipped by .screen's overflow:hidden. */
.feed-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.column.scroller {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.scroll-y { scrollbar-color: var(--sky-border-strong) transparent; }

.scroller__wrapper {
  max-width: var(--sky-feed-width);
  margin: 0 auto;
  padding: 0;
  min-height: 100%;
  border-left: 1px solid var(--sky-border);
  border-right: 1px solid var(--sky-border);
  background: var(--sky-surface);
}

/* ============================================================
 * Sticky centre-column header (Bluesky feed tabs / section title)
 * ============================================================ */

.feed-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  /* width:100% gives this a definite cross-size now that .screen__content is a
   * flex column — without it, the `margin: 0 auto` collapses the bar to its
   * content width instead of spanning (and centering at) the feed column. */
  width: 100%;
  max-width: var(--sky-feed-width);
  height: 53px;
  margin: 0 auto;
  flex: none;
  background: color-mix(in srgb, var(--sky-surface) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid var(--sky-border);
  border-right: 1px solid var(--sky-border);
  border-bottom: 1px solid var(--sky-border);
}

.feed-header__tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sky-muted);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.feed-header__tab:hover {
  background: var(--sky-hover);
  color: var(--sky-text);
}

.feed-header__tab--active {
  color: var(--sky-text);
  font-weight: 700;
}

.feed-header__tab--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--sky-blue);
}

.feed-header__title {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sky-text);
}

/* ============================================================
 * Left nav rail
 * ============================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sky-rail-width);
  margin: 0;
  background: var(--sky-bg);
  border: 0;
  border-right: 1px solid var(--sky-border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 50;
}

.navbar-inner {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.navbar .container-fluid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 12px;
  gap: 2px;
}

/* Wordmark at the top of the rail */
.navbar .container-fluid::before {
  content: 'ssbski';
  display: block;
  padding: 4px 14px 16px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sky-blue);
}

/* Vertical nav list */
.navbar .nav.pull-left {
  display: flex;
  flex-direction: column;
  float: none;
  width: 100%;
  margin: 0;
  gap: 2px;
}

.navbar .nav.pull-left li {
  float: none;
  width: 100%;
  align-self: stretch;
}

.navbar .nav.pull-left li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 50px;
  min-width: 0;
  gap: 16px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--sky-text);
  font-weight: 500;
  text-decoration: none;
  text-shadow: none;
}

.navbar .nav.pull-left li a:hover {
  background: var(--sky-hover);
  color: var(--sky-text);
}

.navbar .nav.pull-left li.active a {
  background: transparent;
  color: var(--sky-text);
  font-weight: 700;
}

.navbar .nav.pull-left li.active a:hover {
  background: var(--sky-hover);
}

.nav__icon {
  color: currentColor;
  font-size: 1.65rem;
}

.navbar .nav.pull-left li.active .nav__icon {
  font-variation-settings: 'FILL' 1;
}

.nav__label {
  font-size: 1.2rem;
  line-height: 1;
}

/* Profile avatar pinned to the bottom of the rail */
.navbar-avatar {
  order: 99;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 999px;
}

.navbar-avatar:hover { background: var(--sky-hover); }

.navbar-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sky-border);
}

/* ============================================================
 * "New Post" composer button — Decent's floating compose trigger,
 * relocated into the rail as Bluesky's prominent New Post pill.
 * The inline "What is happening?" prompt is hidden for fidelity.
 * ============================================================ */

.compose-prompt { display: none; }

.compose-trigger {
  position: fixed;
  left: 16px;
  bottom: 74px;
  width: calc(var(--sky-rail-width) - 32px);
  margin: 0;
  text-align: center;
  z-index: 60;
}

.compose-trigger__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--sky-blue);
  border-color: var(--sky-blue);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: var(--sky-shadow);
  text-shadow: none;
}

.compose-trigger__button::after {
  content: 'New Post';
  font-size: 1.05rem;
  font-weight: 700;
}

.compose-trigger__button:hover {
  background: var(--sky-blue-hover);
  border-color: var(--sky-blue-hover);
  color: #fff;
}

/* ============================================================
 * Right column (search)
 * ============================================================ */

.navbar .pull-right {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sky-right-width);
  height: 100vh;
  float: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: var(--sky-bg);
  border-left: 1px solid var(--sky-border);
  z-index: 40;
}

.nav-search {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  box-shadow: none;
}

.nav-search:focus {
  border-color: var(--sky-blue);
  background: var(--sky-surface);
  box-shadow: 0 0 0 3px var(--sky-blue-soft);
  outline: none;
}

.pull-right .menu {
  align-self: flex-start;
}

/* Right-column "Trending" card */
.trending-card {
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  background: var(--sky-surface-soft);
}

.trending-card__head {
  margin-bottom: 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sky-text);
}

.trending__list { display: flex; flex-direction: column; }

.trending__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
  text-decoration: none;
}

.trending__item--person {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.trending__item--person img,
.trending__item--person canvas,
.trending__item--person svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--sky-border);
}

.trending__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.trending__item:hover .trending__topic { text-decoration: underline; }

.trending__topic {
  color: var(--sky-text);
  font-weight: 700;
  font-size: 0.95em;
  word-break: break-all;
}

.trending__count {
  color: var(--sky-muted-soft);
  font-size: 0.82em;
}

.trending__empty {
  padding: 6px 0;
  color: var(--sky-muted);
  font-size: 0.92em;
}

/* Right-column footer links (Bluesky has a links footer in this column) */
.right-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 14px 4px 4px;
  font-size: 0.85em;
}

.right-footer__link {
  color: var(--sky-muted-soft);
  text-decoration: none;
}

.right-footer__link:hover {
  color: var(--sky-blue);
  text-decoration: underline;
}

.right-footer__tag {
  flex-basis: 100%;
  color: var(--sky-muted-soft);
  opacity: 0.7;
}

/* ============================================================
 * Post cards
 * ============================================================ */

.message-card {
  margin: 0;
  padding: 12px 16px;
  background: var(--sky-surface);
  border: 0;
  border-bottom: 1px solid var(--sky-border);
  border-radius: 0;
  color: var(--sky-text);
  transition: background 0.12s ease;
}

.message-card:hover {
  background: color-mix(in srgb, var(--sky-surface) 96%, var(--sky-blue) 4%);
}

/* Mini one-liners (git push / follow rows) flow as a single baseline row.
 * Decent's markup has no whitespace between the avatar, the content, and the
 * meta, so as inline boxes they rendered glued together ("@namefollows
 * @other5 days ago"). A baseline flex row with a gap restores the seams. */
.message--mini.message-card {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  color: var(--sky-muted);
}

/* Bluesky-style "… · time" separator before the timestamp, matching full posts. */
.message--mini.message-card .message_meta.row::before {
  content: '·';
  margin-right: 6px;
  color: var(--sky-muted-soft);
}

/* Bluesky avatar gutter. The avatar image (nested with the name in Decent's
 * markup) is lifted into a fixed left column so the name, timestamp, body and
 * actions all line up in the content column. Scoped to full post cards — git
 * one-liner ".message--mini" rows stay inline. */
.message-card:not(.message--mini):not(.compose) {
  position: relative;
  padding-left: 70px;
}

.message-card:not(.message--mini):not(.compose) > .title .avatar img,
.message-card:not(.message--mini):not(.compose) > .title .avatar canvas,
.message-card:not(.message--mini):not(.compose) > .title .avatar svg {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

/* Header row now holds just name + timestamp, in the content column */
.message-card .title.row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-right: 0;
}

.message-card .avatar,
.message-card .avatar a.avatar {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
}

.avatar .avatar_name {
  color: var(--sky-text);
  font-weight: 600;      /* Bluesky display names are semibold */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-author-key {
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  color: var(--sky-muted-soft);
  font-size: 0.95em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Bluesky renders "Name · time"; add the middot before the timestamp */
.message-card:not(.message--mini):not(.compose) > .title .message_meta.row::before {
  content: '·';
  margin-right: 6px;
  color: var(--sky-muted-soft);
  font-weight: 400;
}

/* Mini (git one-liner) avatars: small inline thumbnail */
.message--mini.message-card .avatar img,
.message--mini.message-card .avatar canvas,
.message--mini.message-card .avatar svg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* Decent renders a utility <input> in the meta row; Bluesky has no equivalent. */
.message-card .message_meta.row input { display: none; }

.message-card .message_meta.row,
.embedded-post-message-meta.row {
  color: var(--sky-muted-soft);
  font-size: 0.9em;
}

.message-card .message_meta.row a,
.embedded-post-message-meta.row a,
.timestamp {
  color: var(--sky-muted-soft);
}

.message-card .message_meta.row a:hover,
.embedded-post-message-meta.row a:hover,
.timestamp:hover {
  color: var(--sky-blue);
}

.message-card .message_content {
  margin-top: 4px;
  color: var(--sky-text);
  font-size: 1rem;
}

/* Collapse long posts to a skeet-sized block with a "Show more" toggle. The
 * clamp is what lets message.js measure overflow (scrollHeight > clientHeight),
 * so short posts aren't clamped and never show the button. */
.message-card .message_content.collapsible {
  position: relative;
  max-height: 11.5rem;   /* ~8 lines — skeet-sized */
  overflow: hidden;
}

.message-card .message_content.collapsible--expanded {
  max-height: none;
  overflow: visible;
}

.message-card .message_content.collapsible.is-overflowing::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5em;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--sky-surface));
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .message-card .message_content.collapsible.is-overflowing::after {
    background: linear-gradient(rgba(0, 0, 0, 0), var(--sky-surface));
  }
}

.message-card .message_content.collapsible--expanded::after { display: none; }

.message_content p:last-child,
.markdown p:last-child { margin-bottom: 0; }

/* Hidden by default; message.js adds .is-overflowing only when the post is
 * actually taller than the clamp, so short posts never show the toggle. */
.message-expand {
  display: none;
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sky-blue);
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.2;
  cursor: pointer;
}

.message-expand:hover {
  background: none;
  text-decoration: underline;
}

.message_content.is-overflowing + .message-expand,
.message_content.collapsible--expanded + .message-expand {
  display: inline-flex;
}

/* ============================================================
 * Action row (reply / repost / react)
 * ============================================================ */

.message-card .message_actions.row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.message-card .actions {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  justify-content: space-between;
  gap: 8px;
}

.message-card .actions > * { flex: 0 0 auto; }

.message_actions_extra {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--sky-muted);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.action-btn .action-icon { font-size: 19px; line-height: 1; }

.action-btn:hover,
.reaction-picker-trigger:hover,
.action-btn--reply:hover,
.action-btn--quote:hover,
.action-btn--active,
.action-btn--active:hover {
  background: var(--sky-blue-soft);
  color: var(--sky-blue);
}

.action-btn--save:hover,
.action-btn--saved,
.action-btn--saved:hover,
.action-btn--share:hover,
.action-btn--more:hover {
  background: var(--sky-blue-soft);
  color: var(--sky-blue);
}

.action-btn--repost:hover,
.action-btn--reposted {
  background: var(--sky-green-soft);
  color: var(--sky-green);
}

.action-btn--react:hover,
.action-btn--reacted,
.action-btn--reacted:hover {
  background: var(--sky-pink-soft);
  color: var(--sky-pink);
}

.message-more-wrap {
  position: relative;
  display: inline-flex;
}

.message-more-menu {
  position: absolute;
  right: 0;
  bottom: 38px;
  z-index: 70;
  display: none;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface);
  box-shadow: var(--sky-shadow);
}

.message-more-menu--open {
  display: flex;
  flex-direction: column;
}

.message-more-menu__item {
  display: flex;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sky-text);
  font-size: 0.92em;
  font-weight: 600;
  text-align: left;
}

.message-more-menu__item:hover { background: var(--sky-hover); }

/* ============================================================
 * Reactions — layout/behavior ported from Decent's stylesheet (trays, picker,
 * popover, chips, animations), re-themed with the ALF tokens. ssbski doesn't
 * load Decent's style.css, so these structural rules have to live here.
 * ============================================================ */

/* Anchors so the floating tray/picker can position against the trigger */
.reaction-group,
.share-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Aggregated chips, pushed to the right of the action row */
.reaction-pill {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.git-message-action-group { display: inline-flex; align-items: center; }

/* Floating tray (quick reactions + share) — hidden until --open */
.reaction-tray,
.share-tray {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--sky-surface);
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  box-shadow: var(--sky-shadow);
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.82) translateY(6px);
  transform-origin: left bottom;
  transition: opacity 0.14s ease,
              transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-tray--open,
.share-tray--open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.reaction-tray .action-btn,
.share-tray .action-btn { padding: 4px 5px; }

.reaction-tray .reaction-emoji { font-size: 18px; }
.reaction-emoji { font-size: 15px; line-height: 1; }
.reaction-emoji-meta { font-size: 14px; line-height: 1; }

/* Picker trigger (···) at the end of the tray */
.reaction-picker-trigger {
  margin-left: 2px;
  padding: 4px 7px;
  color: var(--sky-muted-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-left: 1px solid var(--sky-border);
  border-radius: 0 999px 999px 0;
}

.reaction-picker-trigger:hover {
  color: var(--sky-blue);
  background: var(--sky-blue-soft);
}

/* Full emoji picker panel */
.reaction-picker {
  position: absolute;
  bottom: calc(100% + 56px);
  left: 0;
  width: 272px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--sky-surface);
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  box-shadow: var(--sky-shadow);
  color: var(--sky-text);
  z-index: 201;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9) translateY(8px);
  transform-origin: left bottom;
  transition: opacity 0.16s ease,
              transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-picker--open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.reaction-picker__search {
  flex-shrink: 0;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--sky-border);
  font-size: 0.85em;
  outline: none;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  border-radius: 12px 12px 0 0;
}

.reaction-picker__search:focus {
  background: var(--sky-surface);
  border-bottom-color: var(--sky-blue);
}

.reaction-picker__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px 6px;
}

.reaction-picker__body::-webkit-scrollbar { width: 4px; }
.reaction-picker__body::-webkit-scrollbar-thumb {
  background: var(--sky-border-strong);
  border-radius: 4px;
}

.reaction-picker__section { margin-bottom: 4px; }

.reaction-picker__label {
  font-size: 0.68em;
  font-weight: 700;
  color: var(--sky-muted-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 8px 2px;
}

.reaction-picker__empty {
  padding: 20px 12px;
  font-size: 0.84em;
  color: var(--sky-muted-soft);
  text-align: center;
}

.reaction-picker__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sky-border);
  background: var(--sky-surface-soft);
}

.reaction-picker__text {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--sky-text);
  font-size: 0.85em;
  outline: none;
  border-radius: 0 0 12px 12px;
}

.reaction-picker__text:focus { background: var(--sky-surface); }
.reaction-picker__text--invalid { animation: reaction-text-shake 0.3s ease; }

@keyframes reaction-text-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 2px 4px;
}

.emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.08s, transform 0.08s;
}

.emoji-btn:hover {
  background: var(--sky-hover);
  transform: scale(1.22);
}

.emoji-btn--active,
.emoji-btn--active:hover {
  background: var(--sky-blue-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky-blue) 45%, transparent);
}

/* Aggregated reaction chips */
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 7px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-surface-soft);
  color: var(--sky-muted);
  font-size: 0.88em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.1s;
}

.reaction-chip:hover {
  border-color: var(--sky-border-strong);
  background: var(--sky-hover);
  color: var(--sky-blue);
  transform: translateY(-1px);
}

.reaction-chip--active,
.reaction-chip--active:hover {
  border-color: var(--sky-blue);
  background: var(--sky-blue-soft);
  color: var(--sky-blue);
}

.reaction-chip__emoji { font-size: 16px; line-height: 1; }
.reaction-chip__count { font-size: 0.92em; font-weight: 700; }
.reaction-chip__avatars { display: inline-flex; align-items: center; }
.reaction-chip__avatars > *:not(:first-child) { margin-left: -5px; }

.avatar--micro {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--sky-surface-soft);
}
.reaction-chip:hover .avatar--micro { box-shadow: 0 0 0 1px var(--sky-hover); }
.reaction-chip--active .avatar--micro { box-shadow: 0 0 0 1px var(--sky-blue-soft); }

/* One-shot reaction pop + double-tap heart burst */
@keyframes reaction-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.reaction-pop-anim { animation: reaction-pop 150ms ease-out 1; }

.reaction-heart-burst {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  line-height: 1;
  animation: reaction-heart-burst 700ms ease-out 1 forwards;
}

@keyframes reaction-heart-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  60%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .reaction-pop-anim { animation: none; }
  .reaction-heart-burst { display: none; }
  .reaction-picker__text--invalid { animation: none; outline: 1px solid var(--sky-pink); }
}

/* Who-reacted popover */
.reaction-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  max-width: 240px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--sky-surface);
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  box-shadow: var(--sky-shadow);
  color: var(--sky-text);
  z-index: 202;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.92) translateY(6px);
  transform-origin: center bottom;
  transition: opacity 0.16s ease,
              transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-popover--open {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
  pointer-events: auto;
}

.reaction-popover__head {
  padding: 2px 12px 6px;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--sky-muted);
  border-bottom: 1px solid var(--sky-border);
  margin-bottom: 4px;
}

.reaction-popover__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 0.88em;
  white-space: nowrap;
}

.reaction-popover__row .avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reaction-popover__time {
  margin-left: auto;
  padding-left: 10px;
  color: var(--sky-muted-soft);
  font-size: 0.92em;
}

.avatar--tiny {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
}

/* ============================================================
 * Composer modal (the "New Post" dialog) — ssbski lacks Decent's
 * structural compose CSS, so build the dialog look here.
 * ============================================================ */

.lightbox__content {
  max-width: 600px;
  margin: 48px auto;
  padding: 0 16px;
}

.compose-modal {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  background: var(--sky-surface);
  border: 1px solid var(--sky-border);
  border-radius: 16px;
  box-shadow: var(--sky-shadow);
  color: var(--sky-text);
}

.compose-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.compose-modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.compose-modal__title .avatar,
.compose-modal__title .avatar a.avatar {
  display: inline-flex;
  align-items: center;
}

.compose-modal__title .avatar img,
.compose-modal__title .avatar canvas,
.compose-modal__title .avatar svg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.compose-modal__close { font-size: 0.9em; }

.compose-modal__hint,
.compose-modal__quote-hint {
  margin-bottom: 8px;
  color: var(--sky-muted);
  font-size: 0.9em;
}

/* The composer card itself — strip the feed-card chrome */
.message-card.compose {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.message-card.compose:hover { background: transparent; }

.compose .column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compose .row.compose__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.compose textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  box-shadow: none;
  font-size: 1.05rem;
  line-height: 1.4;
  resize: vertical;
}

.compose textarea:focus {
  border-color: var(--sky-blue);
  background: var(--sky-surface);
  box-shadow: 0 0 0 3px var(--sky-blue-soft);
  outline: none;
}

.compose textarea::placeholder,
.nav-search::placeholder { color: var(--sky-muted-soft); }

/* ============================================================
 * Quotes, embeds, git, media
 * ============================================================ */

.btn-primary {
  background: var(--sky-blue);
  border-color: var(--sky-blue);
  color: #fff;
  box-shadow: none;
  text-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--sky-blue-hover);
  border-color: var(--sky-blue-hover);
  color: #fff;
}

/* Post media — Bluesky rounds images with a hairline border */
.message img,
.message_content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--sky-border);
}

/* Markdown content inside posts */
.markdown a,
.message_content a { color: var(--sky-blue); }
.markdown a:hover,
.message_content a:hover { text-decoration: underline; }

.markdown code,
.message_content code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--sky-surface-soft);
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.markdown pre,
.message_content pre {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sky-surface-soft);
  border: 1px solid var(--sky-border);
  overflow-x: auto;
}

.markdown pre code,
.message_content pre code { padding: 0; background: none; }

.markdown blockquote,
.message_content blockquote {
  margin: 6px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--sky-border-strong);
  color: var(--sky-muted);
}

.markdown h1, .markdown h2, .markdown h3,
.markdown h4, .markdown h5, .markdown h6 {
  margin: 10px 0 6px;
  font-weight: 700;
  line-height: 1.25;
}

.markdown ul, .markdown ol { padding-left: 22px; }

.markdown hr {
  border: 0;
  border-top: 1px solid var(--sky-border);
  margin: 12px 0;
}

.quoted-post,
.repost-card,
.embedded-post,
.repost-inner,
.compose-quote-hint-inner {
  border-color: var(--sky-border);
  background: var(--sky-surface);
  color: var(--sky-text);
  border-radius: 12px;
}

.quoted-post:hover,
.repost-inner:hover {
  background: var(--sky-hover);
  border-color: var(--sky-border-strong);
}

.git-message-compose,
.git-message-compose__result {
  background: var(--sky-surface-soft);
  border-color: var(--sky-border);
  color: var(--sky-muted);
}

.git-sha {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--sky-surface-soft);
  color: var(--sky-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  user-select: all;
}

/* Repositories list — ssbski never loaded Decent's repos-card CSS, so cards
 * stacked full-width and long clone URLs overflowed. */
.repos-heading {
  margin: 16px 0 12px;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--sky-text);
}

.repos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 12px 16px 20px;
}

.repos-empty { padding: 20px 0; color: var(--sky-muted); font-size: 0.9em; }

.repos-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--sky-surface-soft);
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  transition: border-color 0.15s, background 0.15s;
}

.repos-card:hover {
  border-color: var(--sky-border-strong);
  background: var(--sky-hover);
}

.repos-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: var(--sky-muted);
}

.repos-card-name { margin: 0; font-size: 1.05em; font-weight: 700; }
.repos-card-name a { color: var(--sky-blue); text-decoration: none; }
.repos-card-name a:hover { text-decoration: underline; }

.repos-card-meta { font-size: 0.82em; color: var(--sky-muted-soft); }

.repos-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.repos-card-clone {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.75em;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.git-clone-url {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.git-label { font-size: 0.82em; color: var(--sky-muted); white-space: nowrap; }

.git-clone-input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--sky-border);
  border-radius: 8px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  white-space: nowrap;
  overflow-x: auto;
  user-select: all;
}

.git-clone-command { color: var(--sky-text); font-weight: 600; }

.lightbox { background: rgba(15, 20, 25, 0.62); }

/* Avatar size classes (used by repos, lists, embeds, etc.). ssbski never
 * loaded these from Decent, so unsized avatars rendered at natural size. */
.avatar--thumbnail {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar--large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar--fullsize {
  width: 50%;
  height: auto;
  border-radius: 12px;
}

/* ============================================================
 * Git forge — repo home, tree, blob, diff, log, commit, ref picker,
 * issue/PR lists, reviews, activity. ssbski loads INSTEAD OF Decent's
 * style.css, so the entire forge (~130 .git-* classes) was unstyled here.
 * Structure is ported from Decent's style.css and re-themed onto the ALF
 * (--sky-*) tokens so the forge reads as part of the Bluesky skin and follows
 * dark mode. GitHub greys/blues are mapped: borders -> --sky-border, soft
 * surfaces -> --sky-surface-soft, links -> --sky-blue, diff add/del -> green/red.
 * ============================================================ */

/* Widen the centre column for forge screens (Decent caps the feed narrow). */
.scroller__wrapper:has(> .git-forge-layout),
.scroller__wrapper:has(.git-browser) {
  max-width: 1120px;
}

.git-forge-layout {
  background: var(--sky-bg);
  min-height: 80vh;
}

/* ── Forge header: repo title + tab bar ─────────────────────────────────── */
.git-forge-header {
  background: var(--sky-surface);
  border-bottom: 1px solid var(--sky-border);
  padding: 16px 24px 0 24px;
  margin-bottom: 16px;
}

.git-forge-repo-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.git-forge-repo-title > a:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.git-forge-repo-title a {
  color: var(--sky-blue);
  text-decoration: none;
  font-weight: 700;
}

.git-forge-repo-title a:hover { text-decoration: underline; }

.git-forge-repo-title .git-forge-sep {
  color: var(--sky-muted-soft);
  font-weight: 400;
}

.git-forge-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: -1px;
}

.git-forge-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--sky-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  transition: background 0.15s, color 0.15s;
}

.git-forge-tab-label { white-space: nowrap; }

.git-forge-tab:hover {
  background: var(--sky-hover);
  color: var(--sky-text);
}

.git-forge-tab.active {
  background: var(--sky-bg);
  border-color: var(--sky-border);
  border-bottom-color: var(--sky-bg);
  color: var(--sky-text);
}

.git-forge-tab-icon {
  opacity: 0.8;
  font-size: 1.1em;
  vertical-align: -3px;
}

.git-forge-container { padding: 0 24px 32px 24px; }
.git-forge-main { display: block; }
.git-forge-content { min-width: 0; }

.git-forge-card {
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  background: var(--sky-surface);
  margin-bottom: 16px;
  overflow: hidden;
}

.git-forge-card-header {
  background: var(--sky-surface-soft);
  border-bottom: 1px solid var(--sky-border);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.85em;
}

.git-forge-card-body { padding: 14px; }

/* ── Repo code-home toolbar & clone popover ─────────────────────────────── */
.git-forge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.git-forge-toolbar-left,
.git-forge-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.git-clone-button { position: relative; }

.git-clone-button-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font: inherit;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.git-clone-button-trigger:hover { background: var(--sky-hover); }

.git-clone-button.is-open .git-clone-button-trigger {
  background: var(--sky-hover);
  border-color: var(--sky-border-strong);
}

.git-clone-button-icon { font-size: 1.05em; }
.git-clone-caret { font-size: 1.2em; margin-left: 2px; color: var(--sky-muted); }

.git-clone-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(420px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface);
  box-shadow: var(--sky-shadow);
  z-index: 20;
  display: none;
}

.git-clone-button.is-open .git-clone-popover { display: block; }

.git-clone-popover-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--sky-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.git-clone-popover-row { display: flex; gap: 6px; }

.git-clone-popover-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--sky-border);
  border-radius: 8px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
}

.git-clone-popover-copy {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sky-border);
  border-radius: 8px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  cursor: pointer;
}

.git-clone-popover-copy:hover { background: var(--sky-hover); }

/* Composite home card: latest-commit banner + tree table share one frame. */
.git-forge-home-card {
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--sky-surface);
}

.git-forge-home-card .git-tree-latest-commit {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--sky-border);
  margin: 0;
  background: var(--sky-surface-soft);
}

.git-forge-home-card .git-tree-table {
  border: none;
  border-radius: 0;
}

/* ── Tree table + latest-commit banner ──────────────────────────────────── */
.git-tree-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  font-size: 0.9em;
  overflow: hidden;
}

.git-tree-table tr {
  border-bottom: 1px solid var(--sky-border);
  transition: background-color 0.1s ease;
}

.git-tree-table tr:last-child,
.git-tree-table tr:last-child td { border-bottom: none; }

.git-tree-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--sky-border);
}

.git-tree-table tr:hover { background: var(--sky-hover); }

.git-tree-icon {
  width: 2.2em;
  text-align: center;
  color: var(--sky-muted);
}

.git-tree-icon .material-symbols-outlined {
  font-size: 18px;
  vertical-align: middle;
}

.git-tree-name a {
  color: var(--sky-blue);
  font-weight: 500;
  text-decoration: none;
}

.git-tree-name a:hover { text-decoration: underline; }

.git-tree-meta {
  color: var(--sky-muted);
  font-size: 0.85em;
  white-space: nowrap;
}

.git-tree-latest-commit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
  font-size: 0.88em;
  color: var(--sky-muted);
  white-space: nowrap;
  overflow: hidden;
}

.git-tree-latest-commit:empty { display: none; }
.git-tree-latest-sha { flex-shrink: 0; text-decoration: none; }

.git-tree-latest-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sky-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.git-tree-latest-title:hover { color: var(--sky-blue); text-decoration: underline; }

.git-tree-latest-author,
.git-tree-latest-time { flex-shrink: 0; color: var(--sky-muted); }

/* ── Breadcrumbs, subheader, section title, browser shell ───────────────── */
.git-browser { width: 100%; max-width: 1120px; padding: 12px 0; }

.git-browser-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.git-browse-link { font-size: 0.85em; margin-left: auto; }

.git-section-title {
  margin: 16px 0 6px 0;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--sky-text);
}

.git-breadcrumbs { font-size: 0.9em; margin-bottom: 0; color: var(--sky-muted); }
.git-bc-sep { color: var(--sky-muted-soft); }

.git-repo-subheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 14px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sky-border);
}

.git-repo-subheader-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.git-repo-subheader-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.git-repo-subheader-hint {
  font-size: 0.78em;
  color: var(--sky-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Ref picker ─────────────────────────────────────────────────────────── */
.git-ref-picker { position: relative; }

.git-ref-picker-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-surface);
  color: var(--sky-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  cursor: pointer;
}

.git-ref-picker-button:hover { background: var(--sky-hover); }

.git-ref-picker-button:disabled {
  cursor: default;
  color: var(--sky-muted);
  background: var(--sky-surface-soft);
}

.git-ref-picker.is-open .git-ref-picker-button {
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 3px var(--sky-blue-soft);
}

.git-ref-picker-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  padding: 12px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface);
  box-shadow: var(--sky-shadow);
  display: none;
  z-index: 20;
}

.git-ref-picker.is-open .git-ref-picker-popover { display: block; }

.git-ref-picker-tabs { display: flex; gap: 6px; margin-bottom: 10px; }

.git-ref-picker-tab {
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--sky-surface-soft);
  color: var(--sky-muted);
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
}

.git-ref-picker-tab.active { background: var(--sky-blue-soft); color: var(--sky-blue); }

.git-ref-picker-search {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--sky-border);
  border-radius: 8px;
  background: var(--sky-surface);
  color: var(--sky-text);
}

.git-ref-picker-list { max-height: 260px; overflow-y: auto; }

.git-ref-picker-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.git-ref-picker-item:hover,
.git-ref-picker-item.active { background: var(--sky-hover); }

.git-ref-picker-item-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--sky-text);
}

.git-ref-picker-item-meta {
  font-size: 0.76em;
  color: var(--sky-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.git-ref-picker-empty { padding: 10px; color: var(--sky-muted); font-size: 0.88em; }

/* ── Blob: action row, content, line numbers ────────────────────────────── */
.git-blob-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid var(--sky-border);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: var(--sky-surface-soft);
  font-size: 0.88em;
}

.git-blob-meta { color: var(--sky-muted); }

.git-blob-actions-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.git-blob-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-surface);
  color: var(--sky-text);
  font-size: 0.88em;
  text-decoration: none;
  cursor: pointer;
}

.git-blob-action:hover { background: var(--sky-hover); color: var(--sky-blue); }

.git-blob-action.is-disabled,
.git-blob-action:disabled {
  color: var(--sky-muted-soft);
  background: var(--sky-surface-soft);
  cursor: default;
}

.git-blob-action .material-symbols-outlined { font-size: 1.1em; }

.git-blob-content {
  margin: 0 0 12px 0;
  padding: 12px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}

.git-blob-pane {
  margin-top: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.git-blob-readme { margin-top: 0; }

.git-highlighted {
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  border: 1px solid var(--sky-border);
  padding: 0;
  margin: 0;
}

.git-blob-line {
  display: flex;
  align-items: flex-start;
  min-height: 1.45em;
  padding: 0 12px 0 0;
}

.git-blob-line-no {
  flex: 0 0 auto;
  min-width: 3.2em;
  padding: 0 12px 0 8px;
  text-align: right;
  color: var(--sky-muted-soft);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.git-blob-line-no:hover { color: var(--sky-blue); }

.git-blob-line-code {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre;
  font-family: inherit;
}

.git-blob-line.is-highlighted,
.git-blob-line:target { background: var(--sky-mark); }

.git-blob-line.is-highlighted .git-blob-line-no {
  color: var(--sky-text);
  background: var(--sky-mark-strong);
}

/* ── README / markdown blob ─────────────────────────────────────────────── */
.git-readme {
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0 12px 0;
  background: var(--sky-surface);
}

.git-readme-content { line-height: 1.6; }

.git-readme-content h1,
.git-readme-content h2,
.git-readme-content h3 { margin-top: 1em; margin-bottom: 0.4em; }

.git-md-heading { scroll-margin-top: 80px; }

.git-md-heading-anchor {
  display: inline-block;
  margin-right: 0.35em;
  color: var(--sky-muted-soft);
  text-decoration: none;
  opacity: 0;
  transition: opacity 80ms ease-in;
  font-weight: normal;
}

.git-md-heading:hover .git-md-heading-anchor,
.git-md-heading-anchor:focus { opacity: 1; }
.git-md-heading-anchor:hover { text-decoration: underline; }

.git-readme-content pre,
.git-readme-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--sky-surface-soft);
  border-radius: 5px;
  padding: 1px 4px;
}

.git-readme-content pre { padding: 8px; overflow-x: auto; }

/* ── Image viewer ───────────────────────────────────────────────────────── */
.git-image-view {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  background: repeating-conic-gradient(var(--sky-surface-soft) 0% 25%, var(--sky-surface) 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  min-height: 100px;
}

.git-blob-image {
  max-width: 100%;
  max-height: 60vh;
  display: block;
  box-shadow: var(--sky-shadow);
}

/* ── Inline diff view ───────────────────────────────────────────────────── */
.git-diff { margin: 6px 0 16px 0; }

.git-diff-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: var(--sky-muted);
}

.git-diff-stat-files { font-weight: 500; }
.git-diff-stat-add { color: var(--sky-green); font-weight: 600; }
.git-diff-stat-del { color: var(--sky-red); font-weight: 600; }

.git-diff-file {
  margin-bottom: 10px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.85em;
}

.git-diff-file summary { list-style: none; cursor: pointer; }
.git-diff-file summary::-webkit-details-marker { display: none; }

.git-diff-file-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--sky-surface-soft);
  border-bottom: 1px solid var(--sky-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.git-diff-status { font-weight: 700; width: 1.4em; text-align: center; flex-shrink: 0; }
.git-diff-status-added    { color: var(--sky-green); }
.git-diff-status-deleted  { color: var(--sky-red); }
.git-diff-status-modified { color: var(--sky-warn); }
.git-diff-status-renamed  { color: var(--sky-blue); }

.git-diff-path { font-size: 0.95em; word-break: break-all; }
.git-diff-truncated { font-size: 0.8em; color: var(--sky-muted-soft); font-style: italic; }

.git-diff-binary,
.git-diff-empty {
  padding: 8px 12px;
  color: var(--sky-muted-soft);
  font-style: italic;
  font-size: 0.85em;
}

.git-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  line-height: 1.5;
}

.git-diff-hunk-header td {
  padding: 2px 8px;
  background: var(--sky-blue-soft);
  color: var(--sky-blue);
  font-style: italic;
  font-size: 0.85em;
}

.git-diff-line td { padding: 1px 4px; vertical-align: top; white-space: pre; }
.git-diff-line-add { background: var(--sky-green-soft); }
.git-diff-line-del { background: var(--sky-red-soft); }
.git-diff-line-equal { background: var(--sky-surface); }
.git-diff-line-add .git-diff-code { color: var(--sky-green); }
.git-diff-line-del .git-diff-code { color: var(--sky-red); }

.git-diff-ln {
  min-width: 2.5em;
  padding-right: 8px !important;
  text-align: right;
  color: var(--sky-muted-soft);
  user-select: none;
  border-right: 1px solid var(--sky-border);
}

.git-diff-prefix {
  width: 1em;
  padding: 0 4px !important;
  color: var(--sky-muted-soft);
  user-select: none;
}

.git-diff-line-add .git-diff-prefix { color: var(--sky-green); }
.git-diff-line-del .git-diff-prefix { color: var(--sky-red); }

/* ── Commit / log message rows ──────────────────────────────────────────── */
.git-branch-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-blue-soft);
  color: var(--sky-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
}

.git-branch-badge::before { content: '\238B\00a0'; }

.git-repo-name { margin: 0 0 8px 0; font-size: 1.1em; font-weight: 600; }

.git-refs { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px 0; }
.git-ref { display: flex; align-items: center; gap: 6px; }
.git-ref-deleted { color: var(--sky-red); font-style: italic; }

.git-commit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0 0;
}

.git-commit-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sky-muted);
  font-size: 0.9em;
}

.git-log-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--sky-border);
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
}

.git-log-row:last-child { border-bottom: none; }

.git-log-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sky-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.git-log-title:hover { color: var(--sky-blue); text-decoration: underline; }

.git-log-authors,
.git-log-time { flex-shrink: 0; font-size: 0.85em; color: var(--sky-muted); }
.git-log-authors { max-width: 30%; overflow: hidden; text-overflow: ellipsis; }

.git-commit-meta { margin: 4px 0 8px 0; font-size: 0.82em; color: var(--sky-muted); }

.git-commit-body {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
  font-size: 0.85em;
  white-space: pre-wrap;
}

.git-commit-files { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; font-size: 0.85em; }
.git-commit-files-count { font-size: 0.8em; color: var(--sky-muted-soft); }
.git-commit-stats { color: var(--sky-muted-soft); }
.git-stat-add { color: var(--sky-green); font-weight: 600; }
.git-stat-del { color: var(--sky-red); font-weight: 600; }
.git-commit-body-preview { margin: 2px 0 0 0; line-height: 1.4; white-space: pre-wrap; }
.git-commits-more { color: var(--sky-muted-soft); font-style: italic; }

/* ── State badges (issue/PR open/closed/merged) ─────────────────────────── */
.git-state-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  border: 1px solid var(--sky-border);
  background: var(--sky-surface-soft);
  color: var(--sky-muted);
}

.git-state-open { background: var(--sky-green-soft); color: var(--sky-green); border-color: transparent; }
.git-state-closed { background: var(--sky-warn-soft); color: var(--sky-warn); border-color: transparent; }
.git-state-merged { background: var(--sky-purple-soft); color: var(--sky-purple); border-color: transparent; }

/* ── Issue / PR lists ───────────────────────────────────────────────────── */
.git-forge-list {
  background: var(--sky-surface);
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  overflow: hidden;
}

.git-forge-list-header {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--sky-surface-soft);
  border-bottom: 1px solid var(--sky-border);
  font-weight: 600;
  font-size: 0.9em;
}

.git-forge-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sky-border);
}

.git-forge-list-item:last-child { border-bottom: none; }
.git-forge-list-item:hover { background: var(--sky-hover); }
.git-forge-list-item-main { flex: 1; min-width: 0; }

.git-forge-list-item-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 1em;
  color: var(--sky-text);
  text-decoration: none;
}

.git-forge-list-item-title:hover { color: var(--sky-blue); }
.git-forge-list-item-meta { font-size: 0.8em; color: var(--sky-muted); }
.git-forge-list-empty { padding: 32px; text-align: center; color: var(--sky-muted); }

.git-forge-list-actions { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.git-forge-btn-primary {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sky-blue);
  color: #fff;
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.git-forge-btn-primary:hover { background: var(--sky-blue-hover); }

/* ── Inline diff reviews ────────────────────────────────────────────────── */
.git-diff-inline-comment-row td { padding: 0 !important; background: var(--sky-surface); }

.git-diff-inline-comment {
  margin: 8px 16px 8px 48px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface);
}

.git-diff-inline-comment-header {
  padding: 4px 12px;
  background: var(--sky-surface-soft);
  border-bottom: 1px solid var(--sky-border);
  font-size: 0.8em;
  color: var(--sky-muted);
}

.git-diff-inline-comment-body { padding: 8px 12px; font-size: 0.9em; }

.git-diff-ln:hover::after { content: " +"; color: var(--sky-blue); cursor: pointer; }

.git-diff-add-comment-btn {
  opacity: 0;
  padding: 0 4px;
  color: var(--sky-blue);
  font-weight: bold;
  cursor: pointer;
}

tr:hover .git-diff-add-comment-btn { opacity: 1; }

.git-diff-inline-compose {
  margin: 8px 16px 8px 48px;
  padding: 8px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
}

.git-review-comments { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }

.git-review-comment {
  padding: 8px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
  font-size: 0.9em;
}

.git-review-comment-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.82em;
  color: var(--sky-muted);
}

.git-review-comment-body { white-space: pre-wrap; line-height: 1.5; }
.git-review-compose { margin: 8px 0; }
.git-review-add-comment { font-size: 0.85em; color: var(--sky-blue); }

/* ── Activity timeline & fork cards ─────────────────────────────────────── */
.git-forge-activity-item {
  position: relative;
  margin-left: 20px;
  padding-left: 24px;
  padding-bottom: 20px;
  border-left: 2px solid var(--sky-border);
  font-size: 0.95em;
  line-height: 1.6;
}

.git-forge-activity-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sky-surface);
  border: 2px solid var(--sky-border);
}

.git-forge-activity-item.push::before { border-color: var(--sky-green); background: var(--sky-green-soft); }
.git-forge-activity-item.comment::before { border-color: var(--sky-blue); background: var(--sky-blue-soft); }
.git-forge-activity-item.issue::before { border-color: var(--sky-warn); background: var(--sky-warn-soft); }

.git-network-forks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.git-fork-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface);
  font-size: 0.88em;
}

/* ── Syntax highlighting (Prism, GitHub-ish light palette) ──────────────── */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a737d; }
.token.punctuation { color: #24292e; }
.token.namespace { opacity: 0.7; }
.token.property, .token.tag, .token.boolean, .token.number,
.token.constant, .token.symbol, .token.deleted { color: #005cc5; }
.token.selector, .token.attr-name, .token.string, .token.char,
.token.builtin, .token.inserted { color: #032f62; }
.token.operator, .token.entity, .token.url,
.language-css .token.string, .style .token.string { color: #d73a49; }
.token.atrule, .token.attr-value, .token.keyword { color: #d73a49; }
.token.function, .token.class-name { color: #6f42c1; }
.token.regex, .token.important, .token.variable { color: #e36209; }
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Dark-mode syntax palette (GitHub dark) so code stays readable on the
 * dark blob surface — ssbski follows the OS via prefers-color-scheme. */
@media (prefers-color-scheme: dark) {
  .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8b949e; }
  .token.punctuation { color: #c9d1d9; }
  .token.property, .token.tag, .token.boolean, .token.number,
  .token.constant, .token.symbol, .token.deleted { color: #79c0ff; }
  .token.selector, .token.attr-name, .token.string, .token.char,
  .token.builtin, .token.inserted { color: #a5d6ff; }
  .token.operator, .token.entity, .token.url,
  .language-css .token.string, .style .token.string { color: #ff7b72; }
  .token.atrule, .token.attr-value, .token.keyword { color: #ff7b72; }
  .token.function, .token.class-name { color: #d2a8ff; }
  .token.regex, .token.important, .token.variable { color: #ffa657; }
}

/* ── Forge responsive ───────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .git-forge-container { padding: 0 16px 24px 16px; }
  .git-forge-header { padding: 16px 16px 0 16px; }
  .git-repo-subheader { flex-direction: column; align-items: stretch; }
  .git-repo-subheader-right { align-items: flex-start; }
  .git-ref-picker-popover { width: min(320px, calc(100vw - 48px)); }
}

@media (max-width: 640px) {
  .git-forge-tabs { gap: 4px; }
  .git-forge-tab { justify-content: center; padding: 8px 10px; }
  .git-forge-tab-label { display: none; }
  .git-forge-tab-icon { margin: 0; opacity: 0.9; }
}

/* ============================================================
 * Profile page — structure ported from Decent, themed with ALF tokens
 * ============================================================ */

.profile-card {
  margin: 0;
  background: var(--sky-surface);
  border-bottom: 1px solid var(--sky-border);
  overflow: hidden;
}

.profile-banner {
  position: relative;
  width: 100%;
  height: 150px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sky-blue) 32%, var(--sky-surface)) 0%,
    color-mix(in srgb, var(--sky-blue) 14%, var(--sky-surface)) 100%);
  background-size: cover;
  background-position: center;
}

.profile-banner--editable { cursor: pointer; }

.profile-banner-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font-size: 0.88em;
  font-weight: 500;
  pointer-events: none;
}

.profile-body { padding: 0 16px 16px; }

.profile-body-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.profile-avatar-wrap {
  position: relative;
  margin-top: -42px;
  flex-shrink: 0;
}

.profile-avatar-wrap img,
.profile-avatar-wrap canvas,
.profile-avatar-wrap svg,
.avatar--profile {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid var(--sky-surface);
  background: var(--sky-surface);
  object-fit: cover;
}

.profile-avatar--editable { cursor: pointer; }

.profile-avatar--editable::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.profile-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.profile-edit-btn {
  padding: 7px 18px;
  border: 1px solid var(--sky-border-strong);
  border-radius: 999px;
  background: var(--sky-surface);
  color: var(--sky-text);
  font-weight: 700;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.12s;
}

.profile-edit-btn:hover { background: var(--sky-hover); }

.profile-card-actions div,
.profile-card-actions a { font-size: 0.9em; }

.profile-name {
  margin-bottom: 2px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sky-text);
}

.profile-handle {
  margin-bottom: 10px;
  font-size: 0.9em;
  color: var(--sky-muted);
  word-break: break-all;
}

.profile-bio {
  margin-bottom: 12px;
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--sky-text);
  white-space: pre-wrap;
}

.profile-stats {
  display: flex;
  gap: 18px;
  margin-bottom: 4px;
}

.profile-stat {
  font-size: 0.9em;
  color: var(--sky-muted);
  cursor: pointer;
  user-select: none;
}

.profile-stat:hover {
  color: var(--sky-text);
  text-decoration: underline;
}

.profile-stat strong { color: var(--sky-text); font-weight: 700; }

.profile-list-expand {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sky-border);
}

.profile-list-title {
  margin-bottom: 8px;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--sky-muted-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-list-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.profile-list-grid a img,
.profile-list-grid a canvas {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-edit-form { margin-bottom: 12px; }

.profile-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.profile-edit-label {
  margin-top: 6px;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--sky-muted);
}

.profile-name-input,
.profile-bio-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 10px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-size: 0.95em;
  font-family: inherit;
  resize: vertical;
}

.profile-name-input:focus,
.profile-bio-input:focus {
  outline: none;
  border-color: var(--sky-blue);
  background: var(--sky-surface);
  box-shadow: 0 0 0 3px var(--sky-blue-soft);
}

.profile-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Copy-pubkey button — small ghost icon beside the handle, not a boxed button.
 * (ssbski never loaded a .profile-copy-btn rule, so it fell back to the bare
 * <button> chrome.) */
.profile-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sky-muted-soft);
  vertical-align: -6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.profile-copy-btn:hover { background: var(--sky-hover); color: var(--sky-blue); }

/* Follow / unfollow action (api.avatar_action) — a classless
 * <div><label/><a>follow</a></div>. Promote the link to a Bluesky-style pill
 * and demote the relationship label to a small muted hint. */
.profile-card-actions > div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.profile-card-actions > div > label {
  font-size: 0.82em;
  color: var(--sky-muted);
  cursor: default;
}

.profile-card-actions > div > label:empty { display: none; }

.profile-card-actions a {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--sky-blue);
  color: #fff;
  font-weight: 700;
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
}

.profile-card-actions a:hover { background: var(--sky-blue-hover); color: #fff; }

/* The link wraps its label after a <br>; the pill wants it on one line. */
.profile-card-actions a br { display: none; }

/* ── Petname control (your name for another feed) ───────────────────────── */
/* Unstyled in ssbski before; the input also rendered unconditionally. Hide it
 * until the add/edit affordance is engaged (JS toggles .petname--adding /
 * .petname--editing on the container). */
.profile-petname {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
  font-size: 0.9em;
  color: var(--sky-muted);
}

/* Collapsed trigger: ghost pill — "＋ Add nickname" / "✎ Edit nickname". */
.petname-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  background: var(--sky-surface);
  color: var(--sky-muted);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.petname-trigger:hover {
  background: var(--sky-hover);
  color: var(--sky-blue);
  border-color: var(--sky-border-strong);
}

/* Editing row: [input] [Save] [Cancel]. Save/Cancel reuse .btn/.btn-primary. */
.petname-input {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 280px;
  padding: 7px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 10px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-family: inherit;
  font-size: 0.95em;
}

.petname-input:focus {
  outline: none;
  border-color: var(--sky-blue);
  background: var(--sky-surface);
  box-shadow: 0 0 0 3px var(--sky-blue-soft);
}

.petname-save,
.petname-cancel { padding: 7px 14px; font-size: 0.9em; }
.petname-save:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
 * Key page — the secret-key dump is a bare <pre> with no wrapping, so the
 * long private-key line ran off the column; the import field was an unstyled
 * 172px textarea. Scoped to the key screen's bare <pre>/<form> children
 * (feed posts nest theirs inside .message_content, so these don't collide).
 * ============================================================ */
.message-card > pre,
.message-card > p > pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--sky-border);
  border-radius: 12px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

.message-card > pre code,
.message-card > p > pre code { padding: 0; background: none; }

.message-card > form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 520px;
  margin-top: 14px;
}

.message-card > form textarea {
  width: 100%;
  min-height: 64px;
  padding: 9px 12px;
  border: 1px solid var(--sky-border);
  border-radius: 10px;
  background: var(--sky-surface-soft);
  color: var(--sky-text);
  font-family: inherit;
  font-size: 0.92em;
  resize: vertical;
}

.message-card > form textarea:focus {
  outline: none;
  border-color: var(--sky-blue);
  background: var(--sky-surface);
  box-shadow: 0 0 0 3px var(--sky-blue-soft);
}

/* Empty-state placeholder (profile with no posts, no notifications, no DMs). */
.feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
  color: var(--sky-muted);
}

.feed-empty__icon { font-size: 40px; color: var(--sky-muted-soft); }

.feed-empty__title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--sky-text);
}

.feed-empty__body { max-width: 320px; font-size: 0.92em; line-height: 1.4; }

/* ============================================================
 * Responsive
 * ============================================================ */

/* Bluesky breakpoints: right column hides below 1100, the left rail collapses
 * to an icon strip below 1300 (ALF useLayoutBreakpoints). */

/* Collapse the rail to an icon-only strip */
@media (max-width: 1300px) {
  :root { --sky-rail-width: 80px; }

  .navbar .container-fluid { padding: 14px 10px; }

  .navbar .container-fluid::before {
    content: 'ss';
    padding: 4px 0 16px;
    text-align: center;
  }

  .navbar .nav.pull-left li a {
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  .nav__label { display: none; }

  .navbar-avatar { justify-content: center; padding: 8px 0; }

  .compose-trigger {
    left: 14px;
    width: 52px;
  }

  .compose-trigger__button { padding: 0; }
  .compose-trigger__button::after { display: none; }
}

/* Drop the right column */
@media (max-width: 1100px) {
  .navbar .pull-right { display: none; }
  .screen__content,
  .screen__content.column { margin-right: 0; }
}

/* Mobile: the left rail becomes a bottom tab bar (Bluesky mobile layout) */
@media (max-width: 600px) {
  .navbar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 56px;
    border-right: 0;
    border-top: 1px solid var(--sky-border);
    background: color-mix(in srgb, var(--sky-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .navbar .container-fluid {
    flex-direction: row;
    align-items: center;
    height: 100%;
    padding: 0 4px;
    gap: 0;
  }

  .navbar .container-fluid::before { display: none; }

  .navbar .nav.pull-left {
    flex-direction: row;
    flex: 1;
    justify-content: space-around;
    gap: 0;
  }

  .navbar .nav.pull-left li { width: auto; }

  .navbar .nav.pull-left li a {
    width: 48px;
    height: 48px;
    min-height: 0;
    justify-content: center;
    padding: 0;
  }

  .nav__icon { font-size: 1.6rem; }

  .navbar-avatar {
    order: 0;
    margin-top: 0;
    padding: 0 6px;
  }
  .navbar-avatar img { width: 32px; height: 32px; }

  /* content clears the bottom bar and goes full-width. The feed scrolls
   * internally now, so reserve the bar's height by shrinking the column
   * rather than with margin-bottom (which .screen's overflow:hidden clips). */
  .screen__content,
  .screen__content.column {
    margin-left: 0;
    margin-right: 0;
    height: calc(100vh - 56px);
  }

  .scroller__wrapper,
  .feed-header { border-left: 0; border-right: 0; }

  /* New Post becomes a floating action button above the tab bar */
  .compose-trigger {
    left: auto;
    right: 16px;
    bottom: 72px;
    width: 52px;
  }
  .compose-trigger__button { padding: 0; }
  .compose-trigger__button::after { display: none; }

  .message-card:not(.message--mini):not(.compose) { padding-left: 60px; }
  .message-card:not(.message--mini):not(.compose) > .title .avatar img,
  .message-card:not(.message--mini):not(.compose) > .title .avatar canvas,
  .message-card:not(.message--mini):not(.compose) > .title .avatar svg { left: 12px; }

  .lightbox__content { margin: 16px auto; }
}