/* Desktop framing.
   The rails were 415px and 340px, which reads as a mistake rather than a
   choice. Matching them and lifting both off the map turns three competing
   surfaces into a centre panel with a shelf either side. */
@media (min-width: 1100px) {
  .rail, .chatcol { width: 380px !important; flex: 0 0 380px !important; }
  .rail, .chatcol {
    position: relative; z-index: 2;
    background: rgba(9, 12, 20, .96);
    box-shadow: 0 0 40px rgba(0, 0, 0, .55);
  }
  .rail { border-right: 1px solid rgba(255, 255, 255, .07); }
  .chatcol { border-left: 1px solid rgba(255, 255, 255, .07); }
  #viewport { position: relative; }
  #viewport:after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; z-index: 400;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),
      inset 22px 0 34px -26px rgba(0,0,0,.9),
      inset -22px 0 34px -26px rgba(0,0,0,.9),
      inset 0 26px 36px -30px rgba(0,0,0,.85),
      inset 0 -26px 36px -30px rgba(0,0,0,.85);
  }
}

/* ---- say there is more ----
   A still arrow looks like decoration. A small, slow drift reads as an
   invitation without becoming a distraction, and it rests between nudges so
   it never turns into a tic. */
@keyframes dmNudgeX {
  0%, 62%, 100% { transform: translateX(0); }
  72% { transform: translateX(4px); }
  84% { transform: translateX(1px); }
}
@keyframes dmNudgeY {
  0%, 62%, 100% { transform: translateY(0); }
  72% { transform: translateY(4px); }
  84% { transform: translateY(1px); }
}
.sx-btn.sx-next { animation: dmNudgeX 3.4s ease-in-out infinite; }
.sx-btn.sx-prev { animation: dmNudgeX 3.4s ease-in-out infinite reverse; }
/* a hand on it means they already know: stop talking */
.sx-btn:hover, .sx-btn:active { animation: none; }

/* the same hint at the foot of a scrolling rail */
.dm-more {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: center;
  height: 46px; margin-top: -46px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9,12,20,0), rgba(9,12,20,.92));
}
.dm-more i {
  display: block; width: 9px; height: 9px;
  border-right: 2px solid rgba(255,255,255,.5);
  border-bottom: 2px solid rgba(255,255,255,.5);
  transform: rotate(45deg);
  margin-bottom: 10px;
  animation: dmNudgeY 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sx-btn.sx-next, .sx-btn.sx-prev, .dm-more i { animation: none; }
}

/* ---- two across, not one and a gap ----
   Cards live in .scroll-x inside the rail. At a fixed 210px a 345px row
   showed one card and dead space. Half the row each, minus the gap, fits two
   events or two hotels whole, which is what the column is for. */
@media (min-width: 1100px) {
  .rail .scroll-x { gap: 10px !important; }
  .rail .fev-card, .rail .hot-card {
    width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ---- venue rows were stacking ----
   A 351px row spent 32px on padding, 28px on gaps, 84px on the logo and 76px
   on the right column, leaving 131px for the name. Long venues wrapped into a
   narrow tower. Trim the furniture and the name gets 169px, so it reads
   across instead of down. */
@media (min-width: 1100px) {
  .rail .vrow { padding: 10px 12px !important; gap: 12px !important; }
  .rail .vrow > [class*=mono] { width: 72px !important; height: 72px !important; flex: 0 0 72px !important; }
  .rail .vrow > .right { flex: 0 0 auto !important; max-width: 64px !important; }
}

/* ---- the chat rail spent 300px on furniture ----
   Header, room chips, presence strip, typing line, composer and the house
   note took 300px before a single message showed. Tightening them without
   removing anything gives the conversation 55px more room, and smaller
   bubbles and avatars fit noticeably more on screen. */
@media (min-width: 1100px) {
  .chatcol .msg { margin-bottom: 4px !important; }
  .chatcol .msg .b {
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .chatcol .msg .av { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
  .chatcol .chat-hd { padding-top: 8px !important; padding-bottom: 6px !important; }
  .chatcol .rooms, .chatcol .presence { padding: 4px 12px !important; }
  .chatcol .chat-note { font-size: 10px !important; line-height: 1.3 !important; padding: 6px 12px !important; opacity: .6; }
  /* the typing line only matters while someone is typing */
  .chatcol .typing:empty { height: 0 !important; overflow: hidden !important; }
}