import { style } from '@vanilla-extract/css';
import { DefaultReset, config, toRem } from 'folds';

export const MessageBase = style({
  position: 'relative',
});

// Bubble (1:1 DM) tap-rail holder: positioned at the tap point (fixed → viewport
// coords; no transformed ancestor sits above a message row, so `fixed` is truly
// viewport-relative). `left`/`top` are set inline from the clamped tap point so
// the bar appears just above the finger/cursor and never spills off-screen. It
// stays inside `[data-message-id]`, so the outside-tap close handler exempts it.
export const TapRail = style({
  position: 'fixed',
  zIndex: 10,
  display: 'flex',
});

export const MessageOptionsBase = style([
  DefaultReset,
  {
    position: 'absolute',
    // Hug the message's top-right corner with a small overlap instead of the old
    // -30px overhang that detached the rail from the row and clipped at the
    // timeline top. (Exact offset is easy to nudge.)
    top: toRem(-14),
    right: config.space.S200,
    // Above the message content/bubble (which sits at zIndex 2 in layout.css.ts)
    // so the rail never renders behind the bubble — was the "за баблом" bug on
    // native where the rail overlaps the bubble's top-right.
    zIndex: 5,
  },
]);

export const MessageOptionsBar = style([
  DefaultReset,
  {
    padding: config.space.S100,
    // Dawn: a flat hairline strip rather than the stock raised Menu card —
    // 1px hairline, tighter radius, a soft shadow instead of the heavy E-shadow.
    border: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
    borderRadius: config.radii.R300,
    boxShadow: '0 4px 14px rgba(0, 0, 0, 0.4)',
  },
]);

export const MessageQuickReaction = style({
  minWidth: toRem(32),
});

export const MessageMenuGroup = style({
  padding: config.space.S100,
});

export const MessageMenuItemText = style({
  flexGrow: 1,
});

export const ReactionsContainer = style({
  selectors: {
    '&:empty': {
      display: 'none',
    },
  },
});

export const ReactionsTooltipText = style({
  wordBreak: 'break-word',
});
