/* GENERATED from mockup/{tokens,app,page}.css by scripts/gen-embed.mjs.
 * Scoped to .ano-embed so the live Ano app can be embedded on the
 * marketing page without its base styles leaking into the site.
 * Do not edit by hand; re-generate from the mockup. */

/* ============================================================================
 * Ano — Design tokens (theme: "matcha2", the shipped default)
 * ----------------------------------------------------------------------------
 * These are the EXACT semantic tokens the real Electron app uses, lifted from
 * apps/desktop/src/styles/themes/matcha2.css. Colours are stored as raw HSL
 * triplets ("H S% L%") and consumed with hsl(var(--token)) — identical to the
 * app — so you can drop these straight into a Tailwind v4 @theme bridge or any
 * CSS pipeline on the website.
 *
 * To reskin the whole mockup, change values here only.
 * ========================================================================== */

.ano-embed {
  /* ── Geist primitive scales (grays + brand green, hue 82) ──────────────── */
  --ds-background-100: 100 8% 5%;
  --ds-background-200: 100 8% 5%;

  --ds-gray-100: 100 14% 9%;
  --ds-gray-200: 100 14% 10%;
  --ds-gray-300: 100 12% 12%;
  --ds-gray-400: 100 12% 14%;
  --ds-gray-500: 100 10% 18%;
  --ds-gray-600: 88 12% 40%;
  --ds-gray-700: 88 12% 42%;
  --ds-gray-800: 88 10% 50%;
  --ds-gray-900: 90 24% 73%;
  --ds-gray-1000: 100 38% 87%;

  /* ── Semantic surfaces ────────────────────────────────────────────────── */
  --background: var(--ds-background-100);
  --background-secondary: var(--ds-background-200);
  --foreground: var(--ds-gray-1000);

  --card: var(--ds-gray-100);
  --card-foreground: var(--ds-gray-1000);
  --popover: var(--ds-gray-200);
  --popover-foreground: var(--ds-gray-1000);

  /* Desktop runtime uses ds-background-200 for the sidebar (identical here). */
  --sidebar: var(--ds-background-200);
  --sidebar-foreground: var(--ds-gray-700);
  --sidebar-unread-foreground: 0 0% 100%;
  --message-author-fg: 0 0% 100%;
  --sidebar-active: var(--ds-gray-100);

  /* ── Brand / status ───────────────────────────────────────────────────── */
  --primary: 82 70% 56%;
  --primary-foreground: 100 20% 5%;

  --secondary: 100 12% 13%;
  --secondary-foreground: var(--ds-gray-900);
  --muted: 100 12% 11%;
  --muted-foreground: var(--ds-gray-600);
  --accent: var(--muted);
  --accent-foreground: var(--muted-foreground);

  --destructive: 6 100% 63%;
  --destructive-foreground: 0 0% 100%;
  --success: 82 70% 56%;
  --success-foreground: 82 28% 8%;
  --warning: 38 100% 50%;
  --warning-foreground: 36 42% 8%;
  --info: 184 100% 50%;
  --info-foreground: 184 100% 8%;

  --destructive-muted: 6 28% 15%;
  --success-muted: 82 28% 13%;
  --warning-muted: 38 28% 13%;
  --info-muted: 184 30% 14%;

  /* ── Borders / rings ──────────────────────────────────────────────────── */
  --border: 100 12% 19%;
  --input: var(--border);
  --ring: 82 42% 48%;

  --online: 82 42% 48%;
  --mention-badge: 6 52% 53%;

  --radius: 8px;

  /* ── Derived strokes (color-mix, exactly as the app computes them) ─────── */
  --stroke-on-background: color-mix(
    in srgb,
    hsl(var(--foreground)) 6%,
    hsl(var(--background)) 94%
  );
  --stroke-on-panel: hsl(var(--foreground) / 0.06);
  --stroke-on-card: hsl(var(--foreground) / 0.06);

  /* ── Component tokens ─────────────────────────────────────────────────── */
  /* Buttons: tinted (not solid) on the dark theme. */
  --btn-default-bg:
    linear-gradient(hsl(var(--primary) / 0.15), hsl(var(--primary) / 0.15)),
    hsl(var(--background));
  --btn-default-fg: hsl(var(--primary));
  --btn-default-border: color-mix(
    in srgb,
    hsl(var(--primary)) 50%,
    hsl(var(--background)) 50%
  );
  --btn-default-hover:
    linear-gradient(hsl(var(--primary) / 0.25), hsl(var(--primary) / 0.25)),
    hsl(var(--background));

  --btn-destructive-bg:
    linear-gradient(
      hsl(var(--destructive) / 0.15),
      hsl(var(--destructive) / 0.15)
    ),
    hsl(var(--background));
  --btn-destructive-fg: hsl(var(--destructive));
  --btn-destructive-border: color-mix(
    in srgb,
    hsl(var(--destructive)) 50%,
    hsl(var(--destructive-muted)) 50%
  );
  --btn-destructive-hover:
    linear-gradient(
      hsl(var(--destructive) / 0.25),
      hsl(var(--destructive) / 0.25)
    ),
    hsl(var(--background));

  /* Inputs + composer */
  --input-surface: hsl(var(--background));
  --input-border: hsl(var(--foreground) / 0.16);
  --input-border-focus: hsl(var(--primary) / 0.85);

  --message-input-bg: hsl(100 8% 4%);
  --message-input-border: hsl(100 14% 15%);
  --message-input-inner-bg: hsl(100 8% 4%);

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.28);
  --ds-shadow-medium:
    0px 1px 3px rgba(0, 0, 0, 0.3), 0px 8px 24px rgba(10, 12, 9, 0.22);
  --ds-shadow-large:
    0px 1px 3px rgba(0, 0, 0, 0.3), 0px 12px 40px rgba(10, 12, 9, 0.28);
  --ds-shadow-modal: 0px 18px 48px rgba(6, 8, 4, 0.6);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 300ms;
  --ease-default: ease;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Typography (Inter capped at weight 500; Geist Mono for code) ─────── */
  --app-font-sans:
    "InterVariable", "Inter Variable", Inter, -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "system-ui", "Segoe UI", Roboto, sans-serif;
  --app-font-mono:
    "Geist Mono", "Berkeley Mono", "SFMono Regular", Consolas,
    "Liberation Mono", Menlo, Courier, monospace;
}


/* ============================================================================
 * Ano — Component styles
 * ----------------------------------------------------------------------------
 * Faithful CSS port of the real Electron app's Tailwind markup. Class names
 * are namespaced `ano-*` and map 1:1 to components in apps/desktop/src.
 * Every colour goes through the semantic tokens in tokens.css.
 * ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────
 * The real app's exact variable fonts, copied from the repo (public/fonts).
 * Bundled locally so typography is identical and works offline. The app caps
 * UI weight at 500 (see `.ano` weight rules below).                            */
@font-face {
  font-family: "InterVariable";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.ano-embed,
.ano-embed *,
.ano-embed *::before,
.ano-embed *::after {
  box-sizing: border-box;
}

.ano-embed {
  /* Matches the app's runtime hooks: data-runtime="desktop" data-theme="matcha2" */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ano-embed {
  margin: 0;
  font-family: var(--app-font-sans);
  font-feature-settings: "cv01", "cv03", "cv04", "cv06", "cv11", "ss03";
  font-synthesis-weight: none;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

/* The app never renders text heavier than 500. */
.ano,
.ano * {
  font-weight: 400;
}
.ano b,
.ano strong,
.ano .fw-500 {
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════
 * APP SHELL — the floating Electron window (rounded-[10px] + 0.5px ring)
 * ════════════════════════════════════════════════════════════════════════ */
.ano-shell {
  display: flex;
  height: 760px;
  width: 100%;
  max-width: 1240px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  box-shadow:
    0 0 0 0.5px var(--stroke-on-panel),
    var(--ds-shadow-large),
    0 40px 120px rgba(0, 0, 0, 0.55);
}

/* Connection pill (top-right, sync status). */
.ano-shell__status {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.ano-shell__status .dot {
  height: 6px;
  width: 6px;
  border-radius: 9999px;
  background: hsl(var(--success));
}

/* ════════════════════════════════════════════════════════════════════════
 * SIDEBAR  (apps/desktop/src/components/layout/Sidebar.tsx — w-60 / 240px)
 * ════════════════════════════════════════════════════════════════════════ */
.ano-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 240px;
  position: relative;
  background: hsl(var(--sidebar));
  border-right: 1px solid hsl(var(--foreground) / 0.06);
  border-bottom-left-radius: 10px;
}

/* In the real app the sidebar promotes muted text to full foreground. */
.ano-sidebar .t-muted {
  color: hsl(var(--foreground));
}

/* Titlebar drag region (Electron spacer). */
.ano-sidebar__titlebar {
  height: 28px;
  flex-shrink: 0;
}

/* Header row: workspace switcher + actions, h-12 with bottom divider. */
.ano-sidebar__header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 8px;
  border-bottom: 1px solid hsl(var(--foreground) / 0.06);
}
.ano-sidebar__header-actions {
  display: flex;
  align-items: center;
}

/* Workspace switcher trigger (logo + name + caret). */
.ano-ws {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
}
.ano-ws:hover {
  background: hsl(var(--foreground) / 0.1);
}
.ano-ws__logo {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
  font-size: 13px;
  font-weight: 500;
}
.ano-ws__name {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ano-ws__caret {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

/* Search bar (TopSearchBar) — pill button, h-[26px]. */
.ano-search {
  padding: 6px 12px 8px;
}
.ano-search__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 26px;
  padding: 0 3px 0 12px;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--foreground) / 0.04);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--ds-shadow-small);
}
.ano-search__btn:hover {
  background: hsl(var(--foreground) / 0.1);
  color: hsl(var(--foreground));
}
.ano-search__btn .label {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.ano-search__kbd {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.08);
  font-family: var(--app-font-mono);
  font-size: 10px;
  line-height: 1;
  color: hsl(var(--muted-foreground) / 0.8);
}

/* Scrollable content. */
.ano-sidebar__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.ano-sidebar__scroll::-webkit-scrollbar {
  width: 0;
}

.ano-sidebar__group {
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Nav rows (NavRow / NavItem / ChannelItem / DM row) ─────────────────── */
.ano-navrow {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: inherit;
  transition: background-color var(--duration-normal) var(--ease-default);
}
.ano-navrow:hover {
  background: hsl(var(--foreground) / 0.1);
}
.ano-navrow.is-selected {
  background: hsl(var(--foreground) / 0.07);
}
.ano-navrow .icon {
  flex-shrink: 0;
  color: hsl(var(--foreground));
}
.ano-navrow .name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ano-navrow .name.is-unread {
  font-weight: 500;
  color: hsl(var(--sidebar-unread-foreground));
}
/* matcha2 promotes sidebar muted text toward foreground; keep a slight
   hierarchy on the # glyph. */
.ano-channel .icon {
  color: hsl(var(--foreground) / 0.7);
}

/* Count badge (Inbox) — bg-primary pill. */
.ano-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 10px;
  font-weight: 500;
}
/* Mention badge — bg-destructive @n pill. */
.ano-badge-mention {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: hsl(var(--destructive));
  color: hsl(var(--primary-foreground));
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}
/* Small unread dot on DM rows. */
.ano-unread-dot {
  margin-left: auto;
  height: 8px;
  width: 8px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: hsl(var(--foreground));
}

/* Section header (Channels / Direct Messages) — collapsible. */
.ano-section {
  padding: 12px 8px 0;
}
.ano-section__head {
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 4px;
}
.ano-section__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.ano-section__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
}
.ano-section__toggle .caret {
  color: hsl(var(--muted-foreground) / 0.5);
  transition: transform var(--duration-normal) var(--ease-default);
}
.ano-section__toggle .caret.open {
  transform: rotate(90deg);
}
.ano-section__pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.ano-section:hover .ano-section__pill {
  opacity: 1;
}
.ano-section__pill button {
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
}
.ano-section__pill button:hover {
  background: hsl(var(--foreground) / 0.1);
}
.ano-section__pill .divider {
  width: 1px;
  height: 12px;
  background: hsl(var(--border) / 0.5);
}
.ano-section__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* DM avatar (20px) with presence dot. */
.ano-dm-avatar {
  position: relative;
  flex-shrink: 0;
}
.ano-dm-avatar .av {
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 9px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.ano-dm-avatar .presence {
  position: absolute;
  bottom: -2px;
  right: -2px;
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  border: 1.5px solid hsl(var(--sidebar));
}
.presence-online {
  background: hsl(var(--online));
}
.presence-idle {
  background: hsl(var(--warning));
}
.presence-offline {
  background: hsl(var(--muted-foreground) / 0.5);
}

.ano-divider {
  height: 1px;
  background: hsl(var(--foreground) / 0.06);
  margin: 12px 0 0;
}

/* User profile footer. */
.ano-userfooter {
  position: relative;
  flex-shrink: 0;
  padding: 18px 12px;
  border-top: 1px solid hsl(var(--foreground) / 0.06);
}
.ano-userfooter__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ano-userfooter__avatar {
  position: relative;
  flex-shrink: 0;
}
.ano-userfooter__avatar .av {
  height: 32px;
  width: 32px;
  border-radius: 9999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
}
.ano-userfooter__avatar .presence {
  position: absolute;
  bottom: -2px;
  right: -2px;
  height: 10px;
  width: 10px;
  border-radius: 9999px;
  background: hsl(var(--success));
  border: 2px solid hsl(var(--sidebar));
}
.ano-userfooter__text {
  min-width: 0;
  flex: 1;
}
.ano-userfooter__name {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ano-userfooter__status {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ano-iconbtn {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.ano-iconbtn:hover {
  background: hsl(var(--foreground) / 0.1);
  color: hsl(var(--foreground));
}

/* ════════════════════════════════════════════════════════════════════════
 * MESSAGE AREA  (center pane)
 * ════════════════════════════════════════════════════════════════════════ */
.ano-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
}
.ano-main__titlebar {
  height: 28px;
  flex-shrink: 0;
}

/* Channel header — h-12, border-b. */
.ano-chanhead {
  position: relative;
  z-index: 20;
  display: flex;
  height: 48px;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--stroke-on-card);
}
.ano-chanhead__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.ano-chanhead__hash {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
.ano-chanhead__name {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
}
.ano-chanhead__topic {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 1px solid hsl(var(--border));
  padding-left: 8px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.ano-chanhead__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}
.ano-headbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--foreground) / 0.8);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.ano-headbtn:hover {
  background: hsl(var(--foreground) / 0.1);
}

/* Message list. */
.ano-msglist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 8px 4px;
}

/* Date separator. */
.ano-datesep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 8px;
}
.ano-datesep::before,
.ano-datesep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}
.ano-datesep span {
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

/* ── Message row (Message.tsx) ──────────────────────────────────────────── */
.ano-msg {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color var(--duration-normal) var(--ease-default);
}
.ano-msg:hover {
  background: hsl(var(--foreground) / 0.025);
}
.ano-msg.is-highlighted {
  background: hsl(var(--info-muted));
  box-shadow: inset 0 0 0 1px hsl(var(--info) / 0.4);
}
.ano-msg__avatar {
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.ano-msg__avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Real user photo — fills any avatar container (initials fallback otherwise). */
.ano-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Ano's branded agent avatar — the mark on a tinted disc. */
.ano-agentface {
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
}
/* Compact (consecutive) row: timeslot instead of avatar. */
.ano-msg__timeslot {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 10px;
  color: hsl(var(--muted-foreground) / 0.5);
  opacity: 0;
  padding-top: 2px;
}
.ano-msg:hover .ano-msg__timeslot {
  opacity: 1;
}
.ano-msg__main {
  flex: 1;
  min-width: 0;
}
.ano-msg__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.ano-msg__author {
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--message-author-fg));
  cursor: pointer;
}
.ano-msg__author:hover {
  text-decoration: underline;
}
.ano-msg__time {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}
.ano-msg__edited {
  font-size: 10px;
  color: hsl(var(--muted-foreground) / 0.5);
}
.ano-msg__pinned {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: hsl(var(--warning));
}
.ano-msg__body {
  font-size: 14px;
  line-height: 20px;
  color: hsl(var(--foreground));
  word-wrap: break-word;
}
.ano-msg__body p {
  margin: 0 0 4px;
}
.ano-msg__body p:last-child {
  margin-bottom: 0;
}
.ano-msg__body code {
  font-family: var(--app-font-mono);
  font-size: 12.5px;
  background: hsl(var(--foreground) / 0.08);
  border-radius: 4px;
  padding: 1px 5px;
}
.ano-msg__body a {
  color: hsl(var(--info));
  text-decoration: none;
}
.ano-msg__body a:hover {
  text-decoration: underline;
}
.ano-codeblock {
  margin: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--stroke-on-panel);
  background: hsl(var(--foreground) / 0.04);
  padding: 12px 14px;
  font-family: var(--app-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: hsl(var(--foreground) / 0.92);
  overflow-x: auto;
  white-space: pre;
}

/* Badges shown beside the author. */
.ano-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
}
.ano-pill--cli {
  background: hsl(var(--foreground) / 0.06);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ano-pill--deactivated,
.ano-pill--former {
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground) / 0.5);
}
/* Coworker / verified inline icons. */
.ano-ico-coworker {
  color: hsl(var(--info));
  flex-shrink: 0;
}
.ano-ico-verified {
  color: hsl(var(--primary));
  flex-shrink: 0;
}

/* Reactions row. */
.ano-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ano-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--foreground) / 0.04);
  font-size: 12px;
  color: hsl(var(--foreground));
  cursor: pointer;
}
.ano-reaction:hover {
  border-color: hsl(var(--foreground) / 0.25);
}
.ano-reaction.is-mine {
  border-color: hsl(var(--info) / 0.4);
  background: hsl(var(--info-muted));
  color: hsl(var(--foreground));
}
.ano-reaction .count {
  font-size: 11px;
  font-weight: 500;
}
.ano-reaction--add {
  width: 24px;
  padding: 0;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}

/* Thread reply preview. */
.ano-threadpreview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid hsl(var(--info) / 0.2);
  background: hsl(var(--info) / 0.06);
  color: hsl(var(--info));
  cursor: pointer;
  max-width: 100%;
}
.ano-threadpreview:hover {
  border-color: hsl(var(--info) / 0.3);
  background: hsl(var(--info) / 0.1);
}
.ano-threadpreview__avatars {
  display: flex;
}
.ano-threadpreview__avatars .av {
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 500;
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--background));
  margin-left: -6px;
}
.ano-threadpreview__avatars .av:first-child {
  margin-left: 0;
}
.ano-threadpreview__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--info));
}
.ano-threadpreview:hover .ano-threadpreview__count {
  text-decoration: underline;
}
.ano-threadpreview__time {
  font-size: 12px;
  color: hsl(var(--muted-foreground) / 0.8);
}

/* Hover action pill (MessageActions). */
.ano-msg__actions {
  position: absolute;
  top: -14px;
  right: 12px;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--stroke-on-card);
  background: hsl(var(--popover));
  box-shadow: var(--ds-shadow-medium);
}
.ano-msg:hover .ano-msg__actions {
  display: flex;
}
.ano-msg__actions button {
  height: 28px;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.ano-msg__actions button:hover {
  background: hsl(var(--foreground) / 0.1);
  color: hsl(var(--foreground));
}

/* System message (joined / created). */
.ano-sysmsg {
  display: flex;
  justify-content: center;
  padding: 6px 8px;
}
.ano-sysmsg span {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* Typing indicator. */
.ano-typing {
  height: 22px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.ano-typing .dots {
  display: inline-flex;
  gap: 3px;
}
.ano-typing .dots i {
  height: 4px;
  width: 4px;
  border-radius: 9999px;
  background: hsl(var(--muted-foreground));
  animation: ano-typing 1.2s infinite ease-in-out;
}
.ano-typing .dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.ano-typing .dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ano-typing {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ── Composer (MessageInput.tsx) ────────────────────────────────────────── */
.ano-composer {
  padding: 4px 16px 16px 12px;
}
.ano-composer__box {
  position: relative;
  border-radius: var(--radius);
  padding: 1px;
  border: 1px solid var(--message-input-border);
  background: var(--message-input-bg);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.ano-composer__box:focus-within {
  border-color: hsl(var(--foreground) / 0.25);
  box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.1);
}
.ano-composer__inner {
  border-radius: 7px;
  background: var(--message-input-inner-bg);
  overflow: hidden;
}
.ano-composer__fmt {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-bottom: 2px solid hsl(var(--border) / 0.5);
}
.ano-composer__fmt button {
  height: 26px;
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
}
.ano-composer__fmt button:hover {
  background: hsl(var(--foreground) / 0.08);
}
.ano-composer__fmt .sep {
  width: 1px;
  height: 16px;
  background: hsl(var(--border) / 0.6);
  margin: 0 4px;
}
.ano-composer__editor {
  padding: 8px 12px 2px;
  font-size: 14px;
  line-height: 20px;
  min-height: 24px;
  color: hsl(var(--muted-foreground));
}
.ano-composer__editor.has-text {
  color: hsl(var(--foreground));
}
.ano-composer__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 6px;
}
.ano-composer__toolbar .left {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ano-composer__toolbar .spacer {
  flex: 1;
}
.ano-composer__toolbar button.tool {
  height: 28px;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.ano-composer__toolbar button.tool:hover {
  background: hsl(var(--foreground) / 0.08);
  color: hsl(var(--foreground));
}

/* Reply-to pill above composer. */
.ano-replypill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 4px;
  padding: 6px 8px 6px 10px;
  border-radius: 6px;
  border-left: 2px solid hsl(var(--primary) / 0.6);
  background: hsl(var(--foreground) / 0.04);
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.ano-replypill b {
  color: hsl(var(--foreground));
}
.ano-replypill .x {
  margin-left: auto;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
}

/* ════════════════════════════════════════════════════════════════════════
 * BUTTONS (button.tsx variants) — for the specimen gallery
 * ════════════════════════════════════════════════════════════════════════ */
.ano-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 400;
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--duration-normal) var(--ease-default);
}
.ano-btn--default {
  background: var(--btn-default-bg);
  color: var(--btn-default-fg);
  border-color: var(--btn-default-border);
}
.ano-btn--default:hover {
  background: var(--btn-default-hover);
}
.ano-btn--destructive {
  background: var(--btn-destructive-bg);
  color: var(--btn-destructive-fg);
  border-color: var(--btn-destructive-border);
}
.ano-btn--destructive:hover {
  background: var(--btn-destructive-hover);
}
.ano-btn--outline {
  border-color: hsl(var(--border) / 0.6);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: var(--ds-shadow-small);
}
.ano-btn--outline:hover {
  background: hsl(var(--foreground) / 0.1);
}
.ano-btn--secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  box-shadow: var(--ds-shadow-small);
}
.ano-btn--secondary:hover {
  background: hsl(var(--secondary) / 0.8);
}
.ano-btn--ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
.ano-btn--ghost:hover {
  background: hsl(var(--foreground) / 0.1);
}
.ano-btn--link {
  background: transparent;
  color: hsl(var(--primary));
  padding: 0;
  height: auto;
}
.ano-btn--link:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
 * RIGHT PANEL (member list) — used as a specimen
 * ════════════════════════════════════════════════════════════════════════ */
.ano-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}
.ano-panel__head {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--stroke-on-card);
  font-size: 14px;
  font-weight: 500;
}
.ano-panel__head .count {
  color: hsl(var(--muted-foreground));
}
.ano-panel__body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ano-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
}
.ano-member:hover {
  background: hsl(var(--foreground) / 0.05);
}
.ano-member__avatar {
  position: relative;
}
.ano-member__avatar .av {
  height: 28px;
  width: 28px;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.ano-member__avatar .presence {
  position: absolute;
  bottom: -1px;
  right: -1px;
  height: 9px;
  width: 9px;
  border-radius: 9999px;
  border: 2px solid hsl(var(--background));
}
.ano-member__name {
  font-size: 14px;
  color: hsl(var(--foreground));
}
.ano-member__role {
  margin-left: auto;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

/* ════════════════════════════════════════════════════════════════════════
 * SHELL TERMINAL  (terminal-v2 + ShellTerminal) — Claude Code runs inside
 * ════════════════════════════════════════════════════════════════════════ */
.ano-term {
  --terminal-bg: hsl(100 8% 3%);
  --terminal-fg: 0 0% 88%;
  --terminal-border: hsl(100 12% 14%);
  width: 360px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--terminal-bg);
  border-left: 1px solid hsl(var(--foreground) / 0.06);
}
.ano-term__titlebar {
  height: 28px;
  flex-shrink: 0;
}
/* Header (TerminalV2Header) — h-12, Shell tab + actions, bottom divider. */
.ano-term__header {
  position: relative;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid hsl(var(--foreground) / 0.06);
}
.ano-term__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ano-term__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: hsl(var(--foreground) / 0.1);
  color: hsl(var(--foreground));
}
.ano-term__newtab,
.ano-term__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground) / 0.8);
  cursor: pointer;
}
.ano-term__newtab:hover,
.ano-term__act:hover {
  background: hsl(var(--foreground) / 0.06);
  color: hsl(var(--foreground));
}
.ano-term__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* xterm viewport — the Claude Code TUI lives here. */
.ano-term__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  font-family: var(--app-font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: hsl(var(--terminal-fg));
  white-space: pre-wrap;
  word-break: break-word;
}
.ano-term__body::-webkit-scrollbar {
  width: 8px;
}
.ano-term__body::-webkit-scrollbar-thumb {
  background: hsl(var(--foreground) / 0.12);
  border-radius: 9999px;
}

/* Claude Code colour roles (ANSI-ish, independent of the app theme). */
.tc-accent {
  color: #d9a066;
} /* ✻ welcome + ⏺ bullets */
.tc-dim {
  color: hsl(var(--terminal-fg) / 0.45);
}
.tc-fg {
  color: hsl(var(--terminal-fg));
}
.tc-user {
  color: hsl(var(--terminal-fg) / 0.92);
}
.tc-tool {
  color: #7fb2e8;
} /* tool names (Read/Update/Bash) */
.tc-add {
  color: hsl(82 60% 60%);
} /* diff additions */
.tc-del {
  color: hsl(6 80% 66%);
} /* diff removals */
.tc-muted {
  color: hsl(var(--terminal-fg) / 0.55);
}
.ano-term__body b {
  color: #fff;
  font-weight: 500;
}

/* The rounded prompt box at the bottom of the Claude Code TUI. */
.tc-box {
  border: 1px solid hsl(var(--terminal-fg) / 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 10px 0 6px;
  color: hsl(var(--terminal-fg) / 0.55);
}
.tc-box .caret {
  color: hsl(82 70% 56%);
}
.tc-status {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: hsl(var(--terminal-fg) / 0.4);
}
.tc-rule {
  border: 0;
  border-top: 1px solid hsl(var(--terminal-fg) / 0.12);
  margin: 8px 0;
}

/* Bottom status bar (TerminalStatusBar) — cwd / branch / process. */
.ano-term__status {
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-top: 1px solid hsl(var(--border) / 0.5);
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}
.ano-term__status .left,
.ano-term__status .right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ano-term__status .left .cwd {
  opacity: 0.7;
}
.ano-term__status .right {
  opacity: 0.7;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════════════════════
 * DIALOGS, PAGES & FORM PRIMITIVES
 * Used by the gallery surfaces: Invite an Agent, Automations, Team,
 * Slack Bridge settings, Public-workspace settings. All design-system tokens.
 * ════════════════════════════════════════════════════════════════════════ */

/* Small button size (toolbars / dialog headers). */
.ano-btn--sm {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  gap: 6px;
}

/* ── Dialog surface ─────────────────────────────────────────────────────── */
.ano-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* modal-opaque == --background in matcha2 (darkest), not --popover. */
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid var(--stroke-on-card);
  border-radius: 12px;
  box-shadow: var(--ds-shadow-modal);
  overflow: hidden;
}
.ano-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 16px;
}
.ano-dialog__headmain {
  flex: 1;
  min-width: 0;
}
.ano-dialog__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ano-dialog__desc {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}
.ano-dialog__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.ano-dialog__close:hover {
  background: hsl(var(--foreground) / 0.06);
  color: hsl(var(--foreground));
}
.ano-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 20px 20px;
}
.ano-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--stroke-on-card);
}
.ano-dialog__foothint {
  margin-right: auto;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.ano-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ano-field__label {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.ano-field__hint {
  font-size: 11px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}
.ano-input,
.ano-textarea,
.ano-select {
  width: 100%;
  background: var(--input-surface);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: hsl(var(--foreground));
}
.ano-input::placeholder,
.ano-textarea::placeholder {
  color: hsl(var(--muted-foreground) / 0.7);
}
.ano-input:focus,
.ano-textarea:focus,
.ano-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
}
.ano-textarea {
  min-height: 88px;
  resize: none;
  line-height: 1.5;
}
.ano-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.ano-select .caret {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
.ano-inputrow {
  display: flex;
  gap: 8px;
}
.ano-inputrow .ano-input {
  flex: 1;
}

/* Toggle switch */
.ano-toggle {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.18);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
}
.ano-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  transition: transform var(--duration-normal) var(--ease-default);
}
.ano-toggle.is-on {
  background: hsl(var(--primary));
}
.ano-toggle.is-on::after {
  transform: translateX(16px);
}
.ano-switchrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ano-switchrow__text {
  min-width: 0;
}
.ano-switchrow__title {
  font-size: 13px;
  font-weight: 500;
}
.ano-switchrow__desc {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

/* Selectable pills (channels / skills / featured channels) */
.ano-pillset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ano-pilltoggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ano-pilltoggle.is-on {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}
.ano-pilltoggle .hash {
  opacity: 0.6;
}

/* Assist chips (Invite Agent prompt helpers) */
.ano-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ano-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--stroke-on-card);
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.03);
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ano-chip:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* Inner settings card */
.ano-card2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--stroke-on-card);
  border-radius: 10px;
  background: hsl(var(--foreground) / 0.015);
}
.ano-card2__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ano-card2__title {
  font-size: 13px;
  font-weight: 500;
}
.ano-card2__desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

/* Tabs */
.ano-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--stroke-on-card);
}
.ano-tab {
  padding: 10px 8px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ano-tab:hover {
  color: hsl(var(--foreground));
}
.ano-tab.is-active {
  color: hsl(var(--foreground));
  border-bottom-color: hsl(var(--primary));
}

/* Status + role badges */
.ano-badge2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}
.ano-badge2--active,
.ano-badge2--connected {
  color: hsl(var(--success));
  background: hsl(var(--success-muted) / 0.6);
  border-color: hsl(var(--success) / 0.3);
}
.ano-badge2--paused {
  color: hsl(var(--warning));
  background: hsl(var(--warning-muted));
  border-color: hsl(var(--warning) / 0.3);
}
.ano-badge2--error {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive-muted));
  border-color: hsl(var(--destructive) / 0.4);
}
.ano-role {
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.ano-role--owner {
  color: hsl(var(--success));
  background: hsl(var(--success-muted) / 0.6);
  border-color: hsl(var(--success) / 0.4);
}
.ano-role--admin {
  color: hsl(var(--primary));
  background: transparent;
  border-color: hsl(var(--primary) / 0.3);
}
.ano-role--member {
  color: hsl(var(--muted-foreground));
  background: transparent;
  border-color: hsl(var(--border));
}

/* ── Page chrome (Automations / Team) ───────────────────────────────────── */
.ano-page {
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.ano-page__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 0;
}
.ano-page__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ano-page__title svg {
  color: hsl(var(--muted-foreground));
}
.ano-page__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
.ano-toolsearch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-surface);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}
.ano-page__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
}

/* Automation rows */
.ano-autorow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
  padding: 11px 12px 11px 18px;
  border: 1px solid var(--stroke-on-card);
  border-radius: 10px;
  background: hsl(var(--foreground) / 0.015);
  cursor: pointer;
}
.ano-autorow:hover {
  border-color: hsl(var(--border));
  background: hsl(var(--foreground) / 0.03);
}
.ano-autorow::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2.5px;
  border-radius: 9999px;
  background: hsl(var(--success));
}
.ano-autorow--paused::before {
  background: hsl(var(--muted-foreground) / 0.5);
}
.ano-autorow--error::before {
  background: hsl(var(--destructive));
}
.ano-autorow__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ano-autorow__name {
  font-size: 13.5px;
  font-weight: 500;
}
.ano-autorow__top .ano-badge2 {
  margin-left: auto;
}
.ano-autorow__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.ano-autorow__meta .item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ano-autorow__meta .when {
  margin-left: auto;
  color: hsl(var(--muted-foreground) / 0.8);
}
.ano-autorow__shell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: hsl(var(--info));
}

/* Team rows */
.ano-teamsec {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.ano-teamsec .count {
  color: hsl(var(--muted-foreground) / 0.6);
}
.ano-teamrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}
.ano-teamrow:hover {
  background: hsl(var(--foreground) / 0.02);
}
.ano-teamrow__av {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--foreground) / 0.2);
  color: hsl(var(--foreground));
  font-size: 10px;
  font-weight: 600;
}
.ano-teamrow__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.ano-teamrow__you {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
}
.ano-teamrow__email {
  font-size: 12px;
  color: hsl(var(--muted-foreground) / 0.7);
}
.ano-teamrow__role {
  margin-left: auto;
}
.ano-teamrow__menu {
  display: inline-flex;
  color: hsl(var(--muted-foreground));
}

/* Slack connection row */
.ano-connrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--stroke-on-card);
  border-radius: 10px;
}
.ano-connrow__logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4a154b;
  color: #fff;
}
.ano-connrow__text {
  flex: 1;
  min-width: 0;
}
.ano-connrow__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
}
.ano-connrow__meta {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.ano-connhint {
  font-size: 11.5px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

/* Inline banner (e.g. the copy-the-key warning on the external-agent invite). */
.ano-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.ano-banner--warning {
  border-color: hsl(var(--warning) / 0.3);
  background: hsl(var(--warning-muted));
  color: hsl(var(--warning));
}

/* Monospace payload / invite-prompt block. */
.ano-codeblock {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--stroke-on-card);
  border-radius: 8px;
  background: hsl(100 8% 4%);
  font-family: var(--app-font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: hsl(var(--foreground) / 0.78);
  white-space: pre;
}
.ano-codeblock .head {
  color: hsl(var(--muted-foreground) / 0.7);
}
.ano-codeblock .hl {
  color: hsl(var(--primary));
}
.ano-codeblock .key {
  color: hsl(var(--info));
}

/* Segmented control (e.g. agent tool-access scope). */
.ano-segment {
  display: flex;
  width: 100%;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-surface);
}
.ano-segment button {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.ano-segment button.is-active {
  background: hsl(var(--foreground) / 0.08);
  color: hsl(var(--foreground));
}

/* Static runtime-capability badges. */
.ano-capbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ano-capchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--stroke-on-card);
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.03);
  color: hsl(var(--muted-foreground));
  font-size: 11px;
}
.ano-capchip svg {
  color: hsl(var(--primary));
}

/* Capability list (bordered, divided, scrollable). */
.ano-caplist {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--stroke-on-card);
  border-radius: 10px;
}
.ano-caplist .ano-switchrow {
  padding: 11px 12px;
  gap: 16px;
}
.ano-caplist .ano-switchrow + .ano-switchrow {
  border-top: 1px solid var(--stroke-on-card);
}
.ano-count {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: hsl(var(--foreground) / 0.08);
  color: hsl(var(--muted-foreground));
  font-size: 10px;
  font-weight: 500;
}


/* ---- macOS window frame (from page.css) ---- */
.macframe {
  position: relative;
  width: 100%;
  max-width: 1320px;
  border-radius: 12px;
  background: hsl(var(--background));
  
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 30px 60px -12px rgba(0, 0, 0, 0.7),
    0 60px 140px -40px rgba(0, 0, 0, 0.85);
}
.macframe .ano-shell {
  height: 808px;
  max-width: none;
  border-radius: 12px;
  box-shadow: none;
}
.macframe--sm .ano-shell {
  height: 620px;
}
.macframe .ano-traffic {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 60;
  display: flex;
  gap: 8px;
}
.macframe .ano-traffic i {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  display: block;
}
.ano-traffic .tl-close {
  background: #ff5f57;
}
.ano-traffic .tl-min {
  background: #febc2e;
}
.ano-traffic .tl-max {
  background: #28c840;
}
.macframe .ano-sidebar__titlebar {
  padding-left: 72px;
}