.turn-navigation {
  position: absolute; z-index: 6; right: 3px; top: 50%; transform: translateY(-50%);
  width: 44px; max-height: calc(100% - 40px); opacity: .28; transition: opacity 140ms ease;
}
.turn-navigation[data-active], .turn-navigation:focus-within { opacity: 1; }
.turn-navigation-gesture {
  position: relative; width: 44px; height: 100%; min-height: 44px;
  display: grid; justify-items: center; border-radius: 22px;
  cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none;
  outline-offset: -4px;
}
.turn-navigation-gesture::before {
  content: ''; position: absolute; inset: 3px 12px; border-radius: 12px;
  background: var(--surface-3); box-shadow: var(--shadow-soft);
}
.turn-navigation-gesture:focus-visible { outline: 2px solid var(--focus-ring); }
.turn-navigation-markers { position: absolute; top: 12px; bottom: 12px; width: 4px; pointer-events: none; }
.turn-navigation-markers i { position: absolute; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--muted); opacity: .45; }
.turn-navigation-markers i[data-current] { background: var(--accent); opacity: 1; }
.turn-navigation-preview {
  position: absolute; right: 45px; top: 50%; transform: translateY(-50%);
  width: max-content; max-width: min(280px, calc(100vw - 88px));
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-soft);
  font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none; visibility: hidden;
}
.turn-navigation[data-preview] .turn-navigation-preview { visibility: visible; }
@media (max-width: 680px) {
  /* Keep the 44 px gesture strip clear of message text and edit controls. */
  .assistant-workspace .messages-region:has(> .turn-navigation:not([hidden])) > .messages { padding-right: 52px; }
}
@media (prefers-reduced-motion: reduce) { .turn-navigation { transition: none; } }