/* Tiny contextual icon strip. Every target stays 44px even on narrow viewports. */
.verse-context-actions {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  width: 288px; height:58px; min-width: 0; min-height: 0; max-width: none; max-height: none;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-x;
  padding: 6px; border: 1px solid var(--line, #d8cbb2); border-radius: 14px;
  background: var(--paper, #f7f1e3); color: var(--ink, #66523b);
  font-family: UI, sans-serif; font-size: calc(13px * var(--ui-text-scale,1)); line-height: 1;
  box-shadow: 0 4px 18px #66523b26; direction: rtl;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.verse-context-actions::backdrop { background: transparent; }
.verse-context-actions::-webkit-scrollbar{width:0;height:0}
.verse-context-actions__buttons { display:flex; flex-wrap:nowrap; width:max-content; min-width:100%; justify-content:center; gap:2px; }
.verse-context-actions button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
  box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  margin: 0; padding: 10px; border: 1px solid transparent; border-radius: 9px;
  color: inherit; background: transparent; font: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.verse-context-actions button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.verse-context-actions button[aria-pressed="true"] { background: var(--soft, #eee5d3); }
.verse-context-actions button[aria-pressed="true"] svg { fill: var(--soft, #eee5d3); stroke-width: 2.2; }
.verse-context-actions button:focus-visible { outline: 2px solid var(--ink, #66523b); outline-offset: -3px; }
.verse-context-actions button:active:not(:disabled) { background: var(--soft, #eee5d3); }
.verse-context-actions button:disabled { opacity: .38; cursor: default; }
@media (hover: hover) { .verse-context-actions button:hover:not(:disabled) { background: var(--soft, #eee5d3); } }
.verse-context-actions__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.verse-context-safe-insets {
  position: fixed; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
@media (forced-colors: active) {
  .verse-context-actions { border-color: CanvasText; }
  .verse-context-actions button:disabled { color: GrayText; opacity: 1; }
  .verse-context-actions button[aria-pressed="true"] { border-color: Highlight; }
  .verse-context-actions button:focus-visible { outline-color: Highlight; }
}
/* Brief entrance stays inside the existing viewport-safe placement margins. */
.verse-context-actions[open]{animation:verse-actions-enter 160ms ease-out both;transform-origin:center center}
@keyframes verse-actions-enter{from{opacity:0;transform:translateY(3px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.verse-context-actions[open]{animation:none}}

.verse-context-actions.has-range-actions{height:auto;overflow-y:auto}.verse-context-range{display:flex;gap:6px;margin-top:5px;border-top:1px solid var(--line,#d8cbb2);padding-top:5px}.verse-context-range button{flex:1;width:auto;padding:6px;white-space:nowrap;font-size:17px;min-height:40px;background:var(--soft,#eee5d3)}