import { globalStyle, style } from '@vanilla-extract/css';
import { color, config, DefaultReset, toRem } from 'folds';
import * as editorCss from '../../components/editor/Editor.css';

/** Left sidebar panels (reversed vs thread pane). */
const sidebarPanel = {
  backgroundColor: color.Background.Container,
  boxSizing: 'border-box' as const,
};

const muted = color.SurfaceVariant.OnContainer;
const borderSubtle = color.Background.ContainerLine;

/** matrixsso spacing (#topicLiveApp / #topicPostDetail / .blender-*) */
const forumSidebarPad = toRem(12.8);
const forumDetailPad = toRem(16);
const forumDetailPadRight = `calc(${forumDetailPad} + 0.25rem)`;

/** Thread rail + reply card geometry */
const threadLineWidth = '4px';
const threadLineRadius = '4px';
const threadLineGap = toRem(9.6);
const threadRailGap = '11px';
const threadLevelIndent = '11px';
const threadLineBase = color.Surface.ContainerLine;
const threadLineChild = color.SurfaceVariant.ContainerLine;
const threadLineNested = color.Background.ContainerLine;
const threadLineActive = color.Primary.Main;

const threadLineBefore = {
  borderRadius: threadLineRadius,
  bottom: 0,
  content: '""',
  left: 0,
  position: 'absolute' as const,
  top: 0,
  transition: 'background 0.15s ease',
  width: threadLineWidth,
};

export const ForumAppRoot = style([
  DefaultReset,
  {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    minHeight: 0,
    height: '100%',
    overflow: 'hidden',
    backgroundColor: color.Background.Container,
    color: color.Background.OnContainer,
    boxSizing: 'border-box',
  },
]);

export const ForumPageContent = style({
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  minHeight: 0,
  overflow: 'hidden',
  padding: 0,
});

export const ForumTopicLiveApp = style({
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  minHeight: 0,
  overflow: 'hidden',
  width: '100%',
});

export const ForumHasSelectedPost = style({});

export const ForumBlenderLayout = style({
  display: 'grid',
  flex: 1,
  minHeight: 0,
  overflow: 'hidden',
  gap: 0,
  gridTemplateColumns: 'minmax(280px, 360px) minmax(0, 1fr)',
  alignItems: 'stretch',
});

export const ForumLeftColumn = style([
  DefaultReset,
  sidebarPanel,
  {
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,
    minWidth: 0,
    overflow: 'hidden',
    borderRight: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  },
]);

/** Feed column inside Cinny space PageNav. */
export const ForumFeedSidebarRoot = style([
  DefaultReset,
  {
    display: 'flex',
    flex: '1 1 0',
    flexDirection: 'column',
    height: '100%',
    minHeight: 0,
    minWidth: 0,
    overflow: 'hidden',
  },
]);

export const ForumLeftHeader = style({
  flexShrink: 0,
  borderBottom: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
});

export const ForumNeoPanel = style([DefaultReset, sidebarPanel]);

export const ForumBlenderFeed = style({
  display: 'contents',
});

export const ForumFiltersCard = style({
  flexShrink: 0,
  padding: forumSidebarPad,
  minWidth: 0,
  borderBottom: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
});

export const ForumListCard = style({
  display: 'flex',
  flex: '1 1 0',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
  overflow: 'hidden',
  padding: forumSidebarPad,
});

export const ForumDetailPane = style({
  display: 'flex',
  flex: '1 1 0',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
  overflow: 'hidden',
  backgroundColor: color.Surface.Container,
});

export const ForumTopicTargetFields = style({
  display: 'grid',
  gap: config.space.S300,
  gridTemplateColumns: '1fr 1fr',
  minWidth: 0,
  width: '100%',
});

/** @deprecated use ForumDetailPane */
export const ForumDetailAside = ForumDetailPane;

/** Scroll slot for folds `Scroll` in forum panels (post list + thread detail). */
export const ForumPanelScroll = style({
  flex: '1 1 0',
  minHeight: 0,
  minWidth: 0,
});

export const ForumTopicPostDetailScroll = style([
  ForumPanelScroll,
  {
    backgroundColor: color.Surface.Container,
  },
]);

export const ForumTopicPostDetailInner = style({
  boxSizing: 'border-box',
  padding: `0 ${forumDetailPad} ${forumDetailPad}`,
  paddingRight: forumDetailPadRight,
});

/** @deprecated use ForumTopicPostDetailScroll + ForumTopicPostDetailInner */
export const ForumTopicPostDetail = style([
  ForumTopicPostDetailScroll,
  ForumTopicPostDetailInner,
]);

export const ForumTopicPostDetailWithThread = style({});

export const ForumComposerBar = style({
  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  flexShrink: 0,
  padding: config.space.S300,
  backgroundColor: color.Surface.Container,
});

export const ForumFilters = style({
  display: 'grid',
  gap: config.space.S200,
  gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1.3fr) auto',
  alignItems: 'center',
  width: '100%',
});

export const ForumFiltersCompact = style({
  display: 'grid',
  gap: config.space.S200,
  gridTemplateColumns: 'auto',
  alignItems: 'center',
  width: '100%',
});

export const ForumSortCycleBtn = style({
  alignItems: 'center',
  background: 'transparent',
  border: 0,
  boxShadow: 'none',
  color: color.SurfaceVariant.OnContainer,
  cursor: 'pointer',
  display: 'inline-flex',
  flexShrink: 0,
  height: toRem(32),
  justifyContent: 'center',
  minWidth: toRem(36),
  padding: config.space.S100,
  selectors: {
    '&:hover': {
      background: 'transparent',
      boxShadow: 'none',
      color: color.Primary.Main,
    },
    '&:focus-visible': {
      outline: `2px solid ${color.Primary.Main}`,
      outlineOffset: 1,
    },
  },
});

export const ForumFilterSelect = style([
  DefaultReset,
  {
    appearance: 'none',
    background: color.SurfaceVariant.Container,
    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
    borderRadius: config.radii.R300,
    color: color.SurfaceVariant.OnContainer,
    fontFamily: 'inherit',
    fontSize: toRem(13),
    lineHeight: 1.3,
    height: toRem(32),
    minWidth: 0,
    padding: `0 ${config.space.S200}`,
    width: '100%',
    selectors: {
      '&:focus-visible': {
        outline: `2px solid ${color.Primary.Main}`,
        outlineOffset: 1,
      },
    },
  },
]);

export const ForumSearchField = style({
  gridColumn: '1 / -1',
  minWidth: 0,
  width: '100%',
});

export const ForumSearchRowAnchor = style({
  position: 'relative',
  zIndex: 40,
});

export const ForumSearchRow = style({
  display: 'grid',
  alignItems: 'center',
  gap: config.space.S100,
  gridTemplateColumns: 'minmax(0, 1fr) auto',
  borderBottom: `${config.borderWidth.B300} solid ${borderSubtle}`,
  paddingBottom: config.space.S100,
});

export const ForumSearchCaretMirror = style({
  fontSize: toRem(14),
  left: toRem(2),
  lineHeight: toRem(32),
  pointerEvents: 'none',
  position: 'absolute',
  top: toRem(3),
  visibility: 'hidden',
  whiteSpace: 'pre',
});

export const ForumSearchInput = style([
  DefaultReset,
  {
    background: 'transparent',
    border: 0,
    outline: 'none',
    minWidth: 0,
    width: '100%',
    height: toRem(32),
    fontSize: toRem(14),
    color: color.Background.OnContainer,
    padding: `${toRem(3)} ${toRem(2)}`,
  },
]);

export const ForumSearchPills = style({
  background: color.Surface.Container,
  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  borderRadius: config.radii.R400,
  boxShadow: '0 10px 28px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%)',
  left: 0,
  maxWidth: 'calc(100% - 2.5rem)',
  padding: `${toRem(5)} ${toRem(6)}`,
  pointerEvents: 'auto',
  position: 'absolute',
  top: 'calc(100% + 0.35rem)',
  zIndex: 50,
  selectors: {
    '&::before': {
      background: color.Surface.Container,
      borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
      borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
      content: '""',
      height: toRem(7),
      left: 'var(--forum-search-caret, 0.75rem)',
      position: 'absolute',
      top: toRem(-4),
      transform: 'rotate(45deg)',
      width: toRem(7),
    },
    '&[hidden]': {
      display: 'none',
    },
  },
});

export const ForumSearchPillsInner = style({
  display: 'flex',
  flexWrap: 'nowrap',
  gap: toRem(5),
  overflowX: 'auto',
  scrollbarWidth: 'thin',
});

export const ForumSearchPill = style([
  DefaultReset,
  {
    background: color.SurfaceVariant.Container,
    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
    borderRadius: config.radii.Pill,
    color: muted,
    cursor: 'pointer',
    flex: '0 0 auto',
    fontFamily: 'ui-monospace, monospace',
    fontSize: toRem(11),
    fontWeight: 600,
    lineHeight: 1,
    padding: `${toRem(3)} ${toRem(7)}`,
    whiteSpace: 'nowrap',
    selectors: {
      '&:hover': {
        background: color.Primary.Container,
        borderColor: color.Primary.Main,
        color: color.Primary.Main,
      },
      '&[hidden]': {
        display: 'none',
      },
    },
  },
]);

export const ForumSearchPillHighlighted = style({
  background: color.Primary.Container,
  borderColor: color.Primary.Main,
  color: color.Primary.Main,
});

export const ForumSearchPillInUse = style({
  borderColor: color.Primary.Main,
  color: color.Primary.Main,
});

export const ForumSearchPillValue = style({
  fontFamily: 'inherit',
  maxWidth: toRem(200),
  overflow: 'hidden',
  textOverflow: 'ellipsis',
});

export const ForumSearchSubmit = style({
  background: 'transparent',
  border: 0,
  boxShadow: 'none',
  color: muted,
  selectors: {
    '&:hover': {
      background: 'transparent',
      color: color.Primary.Main,
    },
  },
});

export const ForumNewPostBox = style({
  alignItems: 'center',
  display: 'flex',
  gap: config.space.S300,
  justifyContent: 'flex-end',
  marginBottom: forumSidebarPad,
  flexShrink: 0,
});

export const ForumPostCountMeta = style({
  color: muted,
  fontSize: toRem(13),
  lineHeight: 1.3,
  marginRight: 'auto',
  minWidth: 0,
});

export const ForumPostScroll = style([ForumPanelScroll]);

export const ForumPostList = style({
  display: 'grid',
  gap: 0,
  listStyle: 'none',
  margin: 0,
  padding: 0,
  alignContent: 'start',
});

export const ForumPostItem = style({
  borderTop: `${config.borderWidth.B300} solid ${borderSubtle}`,
  selectors: {
    '&:first-child': {
      borderTop: 0,
    },
  },
});

export const ForumPostLink = style([
  DefaultReset,
  {
    background: 'transparent',
    border: 0,
    borderRadius: config.radii.R300,
    boxSizing: 'border-box',
    color: 'inherit',
    cursor: 'pointer',
    display: 'grid',
    font: 'inherit',
    padding: `${toRem(11.2)} ${toRem(7.2)}`,
    rowGap: toRem(4.8),
    textAlign: 'left',
    width: '100%',
    selectors: {
      '&:hover': {
        background: color.Surface.ContainerHover,
      },
      '&[data-active="true"]': {
        background: color.Primary.Container,
        color: color.Primary.OnContainer,
      },
      '&[data-pinned="true"]': {
        background: color.Warning.Container,
      },
    },
  },
]);

export const ForumPostHead = style({
  alignItems: 'flex-start',
  display: 'flex',
  gap: config.space.S300,
  justifyContent: 'space-between',
  minWidth: 0,
});

export const ForumPostHeadMain = style({
  alignItems: 'flex-start',
  display: 'flex',
  flex: 1,
  gap: config.space.S200,
  minWidth: 0,
});

export const ForumPostTitle = style({
  flex: 1,
  fontSize: 'inherit',
  fontWeight: 600,
  lineHeight: 1.3,
  minWidth: 0,
  wordBreak: 'break-word',
  selectors: {
    [`${ForumPostLink}:hover &`]: {
      color: color.Primary.Main,
    },
    [`${ForumPostLink}[data-active="true"] &`]: {
      color: 'inherit',
    },
  },
});

export const ForumPostFoot = style({
  alignItems: 'center',
  display: 'flex',
  gap: config.space.S200,
  justifyContent: 'space-between',
  marginTop: config.space.S100,
  minWidth: 0,
});

export const ForumPostAuthor = style({
  alignItems: 'center',
  color: muted,
  display: 'flex',
  flex: 1,
  flexWrap: 'wrap',
  fontSize: '0.88rem',
  gap: config.space.S200,
  lineHeight: 1.3,
  minWidth: 0,
});

export const ForumAuthorName = style({
  fontWeight: 600,
  color: color.Background.OnContainer,
});

export const ForumPostListAuthorServer = style({
  color: muted,
  fontSize: '0.8rem',
});

export const ForumPostMeta = style({
  alignItems: 'center',
  color: muted,
  display: 'flex',
  flexShrink: 0,
  fontSize: '0.8rem',
  gap: config.space.S200,
  whiteSpace: 'nowrap',
});

export const ForumCategoryLabel = style({
  textTransform: 'lowercase',
});

const forumThreadRailHitBase = {
  background: 'transparent',
  border: 0,
  bottom: 0,
  cursor: 'pointer',
  left: 0,
  margin: 0,
  padding: 0,
  position: 'absolute' as const,
  top: 0,
  width: toRem(20),
  zIndex: 10,
};

export const ForumThreadRailHitRoot = style({
  ...forumThreadRailHitBase,
  selectors: {
    '&::after': {
      ...threadLineBefore,
      background: threadLineBase,
      width: threadLineWidth,
    },
    '&:hover::after': {
      background: threadLineActive,
    },
  },
});

export const ForumThreadRailHitNested = style({
  ...forumThreadRailHitBase,
  selectors: {
    '&::after': {
      ...threadLineBefore,
      background: threadLineChild,
      width: threadLineWidth,
    },
    '&:hover::after': {
      background: threadLineActive,
    },
  },
});

const forumThreadCollapsedRowBase = {
  alignItems: 'stretch',
  background: 'transparent',
  border: 0,
  boxSizing: 'border-box' as const,
  cursor: 'pointer',
  display: 'flex',
  gap: threadRailGap,
  marginBottom: threadLineGap,
  marginTop: threadLineGap,
  minWidth: 0,
  padding: 0,
  textAlign: 'left' as const,
  width: '100%',
};

export const ForumThreadCollapsedRowRoot = style([DefaultReset, forumThreadCollapsedRowBase]);

export const ForumThreadCollapsedRowNested = style([
  DefaultReset,
  forumThreadCollapsedRowBase,
  {
    marginLeft: threadLevelIndent,
    width: `calc(100% - ${threadLevelIndent})`,
  },
]);

export const ForumThreadCollapsedRailRoot = style({
  alignSelf: 'stretch',
  background: threadLineBase,
  borderRadius: threadLineRadius,
  flexShrink: 0,
  minHeight: toRem(40),
  transition: 'background 0.15s ease',
  width: threadLineWidth,
  selectors: {
    [`${ForumThreadCollapsedRowRoot}:hover &`]: {
      background: threadLineActive,
    },
  },
});

export const ForumThreadCollapsedRailNested = style({
  alignSelf: 'stretch',
  background: threadLineChild,
  borderRadius: threadLineRadius,
  flexShrink: 0,
  minHeight: toRem(40),
  transition: 'background 0.15s ease',
  width: threadLineWidth,
  selectors: {
    [`${ForumThreadCollapsedRowNested}:hover &`]: {
      background: threadLineActive,
    },
  },
});

export const ForumThreadCollapsedMiniPost = style({
  background: color.Background.Container,
  border: `${config.borderWidth.B300} solid ${threadLineBase}`,
  borderRadius: toRem(6),
  boxSizing: 'border-box',
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  gap: toRem(6),
  justifyContent: 'center',
  minHeight: toRem(40),
  minWidth: 0,
  padding: `${toRem(9)} ${toRem(11)}`,
  transition: 'background 0.15s ease, border-color 0.15s ease',
  selectors: {
    [`${ForumThreadCollapsedRowRoot}:hover &, ${ForumThreadCollapsedRowNested}:hover &`]: {
      background: color.Surface.ContainerHover,
      borderColor: color.Primary.Main,
    },
  },
});

export const ForumThreadCollapsedMoreLabel = style({
  color: muted,
  fontSize: toRem(13),
  fontWeight: 600,
  lineHeight: 1.3,
  selectors: {
    [`${ForumThreadCollapsedRowRoot}:hover &, ${ForumThreadCollapsedRowNested}:hover &`]: {
      color: color.Primary.Main,
    },
  },
});

export const ForumThreadCollapsible = style({
  selectors: {
    '&::before': {
      opacity: 0,
      pointerEvents: 'none',
    },
  },
});

export const ForumReplyMeta = style({
  alignItems: 'center',
  display: 'inline-flex',
  flexShrink: 0,
  gap: config.space.S100,
});

export const ForumReplyCount = style({
  fontWeight: 600,
  fontSize: '0.82rem',
});

export const ForumListFooter = style({
  borderTop: `${config.borderWidth.B300} solid ${borderSubtle}`,
  flexShrink: 0,
  margin: `0 calc(-1 * ${forumSidebarPad})`,
  padding: `${toRem(10.4)} ${toRem(7.2)}`,
  textAlign: 'center',
});

export const ForumListLoading = style({
  color: muted,
  padding: config.space.S400,
  margin: 0,
});

export const ForumDetailTitle = style({
  fontSize: toRem(22),
  fontWeight: 700,
  lineHeight: 1.2,
  margin: `0 0 ${toRem(5.6)}`,
  wordBreak: 'break-word',
  color: color.Surface.OnContainer,
});

export const ForumEmptyDetail = style({
  alignItems: 'center',
  color: muted,
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  gap: config.space.S300,
  justifyContent: 'center',
  minHeight: '200px',
});

export const ForumTopicDetailRoot = style({
  display: 'flex',
  flex: '1 1 0',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
  width: '100%',
});

export const ForumTopicDetailBodyScroll = style([
  ForumPanelScroll,
  {
    flex: '1 1 0',
    minHeight: 0,
  },
]);

export const ForumTopicDetailBody = style({
  boxSizing: 'border-box',
  padding: `0 ${forumDetailPad} ${forumDetailPad}`,
  paddingRight: forumDetailPadRight,
});

export const ForumTopicPostDetailThreadLayout = style([
  ForumPanelScroll,
  {
    backgroundColor: color.Surface.Container,
    boxSizing: 'border-box',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,
  },
]);

export const ForumTopicDetailHead = style({
  alignItems: 'flex-start',
  background: color.Surface.Container,
  borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  display: 'flex',
  gap: toRem(10.4),
  justifyContent: 'space-between',
  margin: `0 calc(-1 * ${forumDetailPad}) ${toRem(8)}`,
  padding: `${forumDetailPad} ${forumDetailPadRight} ${toRem(8)} ${forumDetailPad}`,
  position: 'sticky',
  top: 0,
  zIndex: 12,
});

export const ForumTopicDetailHeadMain = style({
  minWidth: 0,
});

export const ForumTopicDetailAuthor = style({
  alignItems: 'center',
  color: muted,
  display: 'flex',
  flexWrap: 'wrap',
  fontSize: '0.88rem',
  gap: config.space.S200,
});

export const ForumTopicDetailOp = style({
  marginRight: 0,
  maxWidth: '100%',
  minWidth: 0,
  paddingBottom: toRem(12),
  position: 'relative',
});

export const ForumThreadFooterComposer = style({
  backgroundColor: color.Surface.Container,
  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  boxSizing: 'border-box',
  flexShrink: 0,
  padding: `${toRem(12)} ${forumDetailPadRight} ${toRem(8)} ${forumDetailPad}`,
  position: 'relative',
});

export const ForumMessageBody = style({
  lineHeight: 1.55,
  margin: `${toRem(5.6)} 0 ${toRem(12)}`,
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  color: color.Surface.OnContainer,
});

export const ForumMessageBodyRich = style({
  color: color.Surface.OnContainer,
  lineHeight: 1.55,
  margin: `${toRem(6)} 0 ${toRem(12)}`,
  whiteSpace: 'normal',
  wordBreak: 'break-word',
});

export const ForumEventContentRoot = style({
  minWidth: 0,
  width: '100%',
});

globalStyle(`${ForumMessageBodyRich} p`, {
  margin: '0 0 0.65em',
});

globalStyle(`${ForumMessageBodyRich} p:last-child`, {
  marginBottom: 0,
});

globalStyle(`${ForumMessageBodyRich} blockquote`, {
  borderLeft: `3px solid ${color.SurfaceVariant.ContainerLine}`,
  margin: '0.5em 0',
  paddingLeft: config.space.S300,
  color: muted,
});

const forumNativeScroll = `${ForumTopicPostDetailInner} pre, ${ForumMessageBodyRich} pre`;

globalStyle(`${ForumMessageBodyRich} pre`, {
  background: color.SurfaceVariant.Container,
  borderRadius: config.radii.R300,
  overflow: 'auto',
  padding: config.space.S300,
  scrollbarWidth: 'thin',
  scrollbarColor: `${color.Surface.ContainerLine} transparent`,
});

globalStyle(`${forumNativeScroll}::-webkit-scrollbar`, {
  height: toRem(6),
  width: toRem(6),
});

globalStyle(`${forumNativeScroll}::-webkit-scrollbar-track`, {
  background: 'transparent',
});

globalStyle(`${forumNativeScroll}::-webkit-scrollbar-thumb`, {
  backgroundColor: color.Surface.ContainerLine,
  border: '2px solid transparent',
  backgroundClip: 'padding-box',
  borderRadius: config.radii.Pill,
});

globalStyle(`${forumNativeScroll}::-webkit-scrollbar-thumb:hover`, {
  backgroundColor: color.SurfaceVariant.ContainerLine,
});

globalStyle(`${ForumMessageBodyRich} code`, {
  fontFamily: 'monospace',
  fontSize: '0.9em',
});

globalStyle(`${ForumMessageBodyRich} ul, ${ForumMessageBodyRich} ol`, {
  margin: '0.35em 0',
  paddingLeft: '1.25em',
});

globalStyle(`${ForumMessageBodyRich} a`, {
  color: color.Primary.Main,
});

globalStyle(`${ForumMessageBodyRich} img`, {
  maxWidth: '100%',
  height: 'auto',
  borderRadius: config.radii.R300,
});

export const ForumMessageOptionsBase = style([
  DefaultReset,
  {
    position: 'absolute',
    top: toRem(6),
    right: toRem(6),
    zIndex: 3,
    // Extend hitbox for easier hover targeting (matches room messages).
    paddingLeft: toRem(80),
    marginLeft: toRem(-80),
    pointerEvents: 'none',
  },
]);

export const ForumMessageOptionsBar = style([
  DefaultReset,
  {
    padding: config.space.S100,
    opacity: 0,
    pointerEvents: 'none',
    transition: 'opacity 0.12s ease',
  },
]);

export const ForumMessageActionBtn = style({
  alignItems: 'center',
  background: color.SurfaceVariant.Container,
  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
  borderRadius: config.radii.R300,
  color: muted,
  cursor: 'pointer',
  display: 'inline-flex',
  height: toRem(28),
  justifyContent: 'center',
  padding: 0,
  width: toRem(28),
  selectors: {
    '&:hover': {
      background: color.SurfaceVariant.ContainerHover,
      color: color.Primary.Main,
    },
  },
});

export const ForumMessageActionBtnActive = style({
  background: color.Primary.Container,
  borderColor: color.Primary.Main,
  color: color.Primary.Main,
});

export const ForumMessageActionIcon = style({
  display: 'block',
});

export const ForumMessageActionPanels = style({
  marginTop: toRem(9),
});

export const ForumMessageActionPanel = style({
  marginTop: toRem(7),
});

export const ForumVisuallyHidden = style({
  border: 0,
  clip: 'rect(0 0 0 0)',
  height: '1px',
  margin: '-1px',
  overflow: 'hidden',
  padding: 0,
  position: 'absolute',
  whiteSpace: 'nowrap',
  width: '1px',
});

export const ForumFeedReplyForm = style({
  display: 'grid',
  gap: toRem(7),
  marginTop: 0,
});

export const ForumThreadReplyTarget = style({
  borderLeft: `3px solid ${color.Primary.Main}`,
});

export const ForumReplyToDeleted = style({
  borderLeft: `4px solid ${color.SurfaceVariant.ContainerLine}`,
  color: muted,
  fontSize: toRem(14),
  fontStyle: 'italic',
  margin: `0 0 ${toRem(8)}`,
  padding: `${toRem(2)} 0 ${toRem(2)} ${toRem(10)}`,
});

export const ForumThread = style({
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
  gap: threadLineGap,
  marginLeft: 0,
  marginTop: threadLineGap,
  minWidth: 0,
  paddingLeft: 0,
  position: 'relative',
  width: '100%',
  maxWidth: '100%',
  selectors: {
    '&::before': {
      ...threadLineBefore,
      background: threadLineBase,
      left: 0,
    },
  },
});

export const ForumThreadReply = style({
  alignSelf: 'stretch',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
  gap: 0,
  margin: 0,
  maxWidth: 'none',
  minWidth: 0,
  padding: 0,
  position: 'relative',
  width: '100%',
});

export const ForumThreadReplyInner = style({
  background: color.Background.Container,
  border: `${config.borderWidth.B300} solid ${threadLineBase}`,
  borderRadius: toRem(6),
  boxSizing: 'border-box',
  marginLeft: threadRailGap,
  marginRight: 0,
  maxWidth: '100%',
  minWidth: 0,
  overflow: 'hidden',
  padding: `${toRem(12)} ${toRem(13.6)}`,
  position: 'relative',
  width: `calc(100% - ${threadRailGap})`,
});

export const ForumPostHeader = style({
  alignItems: 'flex-start',
  display: 'flex',
  justifyContent: 'space-between',
});

export const ForumPostHeaderMain = style({
  alignItems: 'center',
  display: 'flex',
  flex: 1,
  flexWrap: 'wrap',
  gap: toRem(10),
  minWidth: 0,
  paddingRight: toRem(40),
});

export const ForumPostTime = style({
  color: muted,
  fontSize: toRem(13),
});

export const ForumThreadChildren = style({
  alignSelf: 'stretch',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
  gap: threadLineGap,
  marginLeft: threadLevelIndent,
  marginRight: 0,
  marginTop: threadLineGap,
  minWidth: 0,
  paddingLeft: 0,
  position: 'relative',
  width: `calc(100% - ${threadLevelIndent})`,
  selectors: {
    '&::before': {
      ...threadLineBefore,
      background: threadLineChild,
      left: 0,
    },
  },
});

/** @deprecated nested lines use ForumThreadChildren + globalStyle below */
export const ForumThreadChildrenNested = ForumThreadChildren;

export const ForumAuthorIdentity = style({
  alignItems: 'center',
  display: 'inline-flex',
  gap: toRem(7),
  minWidth: 0,
});

export const ForumAuthorIdentityCompact = style({
  gap: toRem(6),
});

export const ForumAuthorAvatar = style({
  alignItems: 'center',
  display: 'inline-flex',
  flexShrink: 0,
  height: toRem(24),
  justifyContent: 'center',
  overflow: 'hidden',
  width: toRem(24),
});

export const ForumAuthorAvatarCompact = style([
  ForumAuthorAvatar,
  {
    height: toRem(18),
    width: toRem(18),
  },
]);

export const ForumAuthorMeta = style({
  alignItems: 'center',
  display: 'inline-flex',
  flexWrap: 'wrap',
  gap: toRem(6),
  minWidth: 0,
});

export const ForumSenderLabel = style({
  borderBottom: `1px dotted ${color.SurfaceVariant.ContainerLine}`,
  color: color.Surface.OnContainer,
  cursor: 'help',
  fontWeight: 600,
  textDecoration: 'none',
});

export const ForumAuthorServer = style({
  background: color.SurfaceVariant.Container,
  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
  borderRadius: config.radii.R200,
  color: muted,
  fontSize: toRem(12),
  fontWeight: 600,
  lineHeight: 1.2,
  padding: `${toRem(2)} ${toRem(6)}`,
});

export const ForumReplyForm = style({
  display: 'grid',
  gap: config.space.S200,
});

export const ForumReplyFormActions = style({
  alignItems: 'center',
  display: 'flex',
  flexWrap: 'wrap',
  gap: config.space.S200,
  justifyContent: 'flex-end',
});

export const ForumReplySubmitBtn = style({
  fontWeight: 700,
});

export const ForumReplyInput = style([
  DefaultReset,
  {
    background: color.SurfaceVariant.Container,
    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
    borderRadius: config.radii.R300,
    color: color.SurfaceVariant.OnContainer,
    font: 'inherit',
    minHeight: toRem(72),
    padding: config.space.S300,
    resize: 'vertical',
    width: '100%',
    selectors: {
      '&:focus-visible': {
        outline: `2px solid ${color.Primary.Main}`,
        outlineOffset: 1,
      },
    },
  },
]);

export const ForumReplyActions = style({
  display: 'flex',
  justifyContent: 'flex-end',
});

export const ForumPostModalForm = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S400,
  height: '100%',
  minHeight: '100%',
  minWidth: 0,
});

export const ForumPostModalField = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S200,
  minWidth: 0,
});

export const ForumPostModalFieldLabel = style({
  color: color.Background.OnContainer,
  fontSize: toRem(14),
  fontWeight: 600,
});

export const ForumInlineReplyEditorWrap = style({
  minWidth: 0,
  width: '100%',
});

/** Full-width inline reply editor. */
globalStyle(`${ForumInlineReplyEditorWrap} .${editorCss.Editor}`, {
  width: '100%',
});

globalStyle(`${ForumInlineReplyEditorWrap} .${editorCss.Editor} > *:first-child`, {
  width: '100%',
});

globalStyle(`${ForumInlineReplyEditorWrap} .${editorCss.EditorTextareaScroll}`, {
  minHeight: toRem(120),
  width: '100%',
});

globalStyle(`${ForumInlineReplyEditorWrap} .${editorCss.EditorTextarea}`, {
  minHeight: toRem(100),
});

export const ForumPostModalBodyField = style({
  display: 'flex',
  flex: '1 1 auto',
  flexDirection: 'column',
  gap: config.space.S200,
  minHeight: toRem(280),
  minWidth: 0,
});

export const ForumPostModalEditorWrap = style({
  display: 'flex',
  flex: '1 1 auto',
  flexDirection: 'column',
  minHeight: toRem(220),
  minWidth: 0,
  width: '100%',
});

export const ForumPostModalActions = style({
  display: 'flex',
  flexShrink: 0,
  justifyContent: 'flex-end',
  gap: config.space.S300,
  flexWrap: 'wrap',
});

/** Full-width post body editor (matrixsso .post-quill-mount min-height ~220px). */
globalStyle(`${ForumPostModalEditorWrap} .${editorCss.Editor}`, {
  flex: '1 1 auto',
  height: '100%',
  minHeight: 0,
  width: '100%',
});

globalStyle(`${ForumPostModalEditorWrap} .${editorCss.EditorTextareaScroll}`, {
  height: '100%',
  width: '100%',
});

globalStyle(`${ForumPostModalEditorWrap} .${editorCss.EditorTextarea}`, {
  height: '100%',
  minHeight: toRem(180),
});

const forumMessageOptionsVisible = `${ForumMessageOptionsBase}:hover ${ForumMessageOptionsBar}, ${ForumMessageOptionsBase}:focus-within ${ForumMessageOptionsBar}`;

globalStyle(
  `${ForumThreadReplyInner}:hover ${ForumMessageOptionsBase}, ${ForumThreadReplyInner}:focus-within ${ForumMessageOptionsBase}`,
  {
    pointerEvents: 'auto',
  }
);

globalStyle(
  `${ForumThreadReplyInner}:hover ${ForumMessageOptionsBar}, ${ForumThreadReplyInner}:focus-within ${ForumMessageOptionsBar}, ${forumMessageOptionsVisible}`,
  {
    opacity: 1,
    pointerEvents: 'auto',
  }
);

globalStyle(`${ForumThreadReplyInner}:has(${ForumMessageActionPanels}) ${ForumMessageOptionsBase}`, {
  display: 'none',
});

globalStyle(`${ForumTopicDetailOp}:has(${ForumMessageActionPanels}) ${ForumMessageOptionsBase}`, {
  display: 'none',
});

globalStyle(
  `${ForumTopicDetailOp}:hover ${ForumMessageOptionsBase}, ${ForumTopicDetailOp}:focus-within ${ForumMessageOptionsBase}`,
  {
    pointerEvents: 'auto',
  }
);

globalStyle(
  `${ForumTopicDetailOp}:hover ${ForumMessageOptionsBar}, ${ForumTopicDetailOp}:focus-within ${ForumMessageOptionsBar}, ${ForumTopicDetailOp} ${forumMessageOptionsVisible}`,
  {
    opacity: 1,
    pointerEvents: 'auto',
  }
);

globalStyle(
  `${ForumThread}:has(> ${ForumThreadReply} > ${ForumThreadReplyInner}:hover)::before, ${ForumThread}:has(> ${ForumThreadReply} > ${ForumThreadReplyInner}:focus-within)::before`,
  {
    background: threadLineActive,
  }
);

globalStyle(
  `${ForumThreadChildren}:has(> ${ForumThreadReply} > ${ForumThreadReplyInner}:hover)::before, ${ForumThreadChildren}:has(> ${ForumThreadReply} > ${ForumThreadReplyInner}:focus-within)::before`,
  {
    background: threadLineActive,
  }
);

globalStyle(`${ForumThreadChildren} ${ForumThreadChildren}::before`, {
  background: threadLineNested,
});

globalStyle(`${ForumAuthorAvatar} > *`, {
  height: '100%',
  width: '100%',
});

globalStyle(`${ForumThreadReplyInner} ${ForumMessageBody}, ${ForumThreadReplyInner} ${ForumMessageBodyRich}`, {
  marginLeft: 0,
  marginRight: 0,
});

globalStyle(`${ForumTopicDetailRoot} ${ForumMessageBody}, ${ForumTopicDetailRoot} ${ForumMessageBodyRich}`, {
  marginTop: toRem(5.6),
});

globalStyle(`${ForumTopicDetailOp} ${ForumMessageBody}, ${ForumTopicDetailOp} ${ForumMessageBodyRich}`, {
  marginTop: toRem(5.6),
});

// Legacy aliases
export const ForumApp = ForumTopicLiveApp;
export const ForumDetailScroll = ForumTopicPostDetailScroll;
export const ForumDetailComposerBar = ForumComposerBar;
export const ForumChrome = style({ display: 'none' });
export const ForumBrand = style({ display: 'none' });
export const ForumSpaceTitle = style({ display: 'none' });
export const ForumNewPostBtn = style({ display: 'none' });
export const ForumLoadMoreBtn = style({ display: 'none' });
export const ForumReplySubmit = style({ display: 'none' });
export const ForumDetailTitleText = style({});
