/* v13 sidebar: Pinned/section order and the activity slot (Marina's SIDEBAR-PRESENTATION and
   agent-activity specifications). Row height, type and the icon/name column stay as they are; each
   reorderable row reserves one fixed right region (grip, then options), so nothing jumps on hover. */
.compact-rail .chat-row { position: relative; }
.compact-rail .chat-row.is-movable { grid-template-columns: minmax(0, 1fr) 16px 28px; }
/* icon, name, activity mark, count */
.daily-rail.compact-rail .chat-row > .chat-label { grid-template-columns: 20px minmax(0, 1fr) auto auto; }

.compact-rail .chat-grip { display: grid; place-items: center; width: 16px; height: var(--rail-row); cursor: grab; color: inherit; opacity: .4; }
.compact-rail .chat-row:hover .chat-grip,
.compact-rail .chat-row:focus-within .chat-grip,
.rail-section:hover > .section-controls .chat-grip { opacity: .9; }
.compact-rail .chat-grip:active { cursor: grabbing; }
.compact-rail .chat-grip svg { width: 12px; height: 16px; fill: currentColor; }
.compact-rail .chat-row.is-dragging { opacity: .45; }

/* Where a dragged chat would land: a 2px line across the list with small end marks, in the
   office's readable focus color. Position and shape say it, not color alone. */
.compact-rail .chat-row.drop-before::before,
.compact-rail .chat-row.drop-after::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 6px;
  color: var(--rail-focus, var(--focus, currentColor));
  border-inline: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  pointer-events: none;
}
.compact-rail .chat-row.drop-before::before { top: -3px; }
.compact-rail .chat-row.drop-after::after { bottom: -3px; }

/* Team and Channels: grip and options beside the heading, never inside it. */
.rail-section { position: relative; }
.rail-section > .section-controls { position: absolute; top: 0; right: 0; z-index: 1; display: flex; align-items: center; height: 24px; }
.rail-section > .section-controls .chat-grip { height: 24px; }
.rail-section > .section-controls .chat-actions-toggle { width: 28px; min-width: 28px; height: 24px; min-height: 24px; padding: 0; opacity: 0; }
.rail-section:hover > .section-controls .chat-actions-toggle,
.rail-section > .section-controls:focus-within .chat-actions-toggle,
.rail-section > .section-controls .chat-actions-toggle[aria-expanded='true'] { opacity: 1; }
.rail-section > .section-controls .chat-actions { position: absolute; top: 24px; right: 0; }
.rail-section.drop-target { outline: 2px solid var(--rail-focus, var(--focus, currentColor)); outline-offset: -2px; border-radius: 6px; }

.conversation-head .activity-line { margin: 0; }

/* Phones: no precise dragging; the options menu has every pin and order action at full size. */
@media (max-width: 760px) {
  .compact-rail .chat-row.is-movable { grid-template-columns: minmax(0, 1fr) 44px; }
  .compact-rail .chat-grip { display: none; }
  .rail-section > .section-controls { height: 44px; }
  .rail-section > .section-controls .chat-actions-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; opacity: 1; }
  .rail-section > .section-controls .chat-actions { top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .compact-rail .chat-row.is-dragging { transition: none; }
}

/* The Staffmor row's link sits inside its row, not directly in .nav, so the base current-page color
   reached it under an office palette; it takes the row's selected colors like every other row. */
:root[data-company-appearance] .rail .nav .chat-row.is-selected > a[aria-current="page"] { background: transparent; color: var(--rail-selected-ink); }