/* ovelis UI parts v1.0 · derived from Lucian UX/UI Prompt #076 · MIT License (c) 2026 Seokwoooo · see /assets/ui/LICENSE-THIRD-PARTY.txt */
.op-tooltip {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; min-width: 0;
  box-sizing: border-box; font-family: var(--op-jp); min-height: 320px;
  background: var(--op-surface); border: 1px solid var(--op-line); border-radius: var(--op-r);
}
.op-tooltip .op-tooltip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 8px 4px; }
.op-tooltip .op-tooltip-top { border-bottom: 1px solid var(--op-line); }
.op-tooltip .op-tooltip-bottom { margin-top: auto; border-top: 1px solid var(--op-line); }
.op-tooltip .op-tooltip-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--op-ink-2); touch-action: manipulation;
  -webkit-touch-callout: none; user-select: none;
  transition: background-color var(--op-t1) ease, color var(--op-t1) ease;
}
.op-tooltip .op-tooltip-button svg { width: 20px; height: 20px; flex: none; }
.op-tooltip .op-tooltip-button:hover, .op-tooltip .op-tooltip-button:focus-visible { background: var(--op-surface-2); }
.op-tooltip .op-tooltip-button[aria-pressed="true"] { color: var(--op-gold-text); }
.op-tooltip .op-tooltip-send { margin-left: auto; padding: 0 12px; background: var(--op-ink); border-color: var(--op-gold); color: var(--op-on-ink); font-size: 13px; font-weight: 500; }
.op-tooltip .op-tooltip-send:hover, .op-tooltip .op-tooltip-send:focus-visible { background: var(--op-ink); }
.op-tooltip .op-tooltip-message { flex: 1; min-width: 0; padding: 16px; color: var(--op-ink-2); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.op-tooltip .op-tooltip-message h3 { margin: 0 0 10px; color: var(--op-ink); font-size: 15px; font-weight: 500; }
.op-tooltip .op-tooltip-message p { margin: 0 0 8px; }
.op-tooltip .op-tooltip-tip {
  position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: calc(100% - 16px);
  padding: 7px 10px; border-radius: 8px; background: var(--op-ink); color: var(--op-on-ink);
  box-shadow: 0 1px 0 var(--op-line); font-size: 13px; font-weight: 400; line-height: 1.4;
  pointer-events: none; opacity: 0; visibility: hidden; overflow-wrap: anywhere;
  transition: opacity var(--op-t1) ease;
}
.op-tooltip .op-tooltip-tip.is-visible { opacity: 1; visibility: visible; }
.op-tooltip .op-tooltip-tip.is-gliding { transition: opacity var(--op-t1) ease, transform var(--op-t2) var(--op-ease); }
.op-tooltip .op-tooltip-tip.is-instant { transition: none; }
.op-tooltip .op-tooltip-tip kbd { display: none; margin-left: 8px; padding: 1px 4px; border: 1px solid var(--op-line-2); border-radius: 4px; font-family: var(--op-lat); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.op-tooltip .op-tooltip-arrow { position: absolute; width: 6px; height: 6px; left: var(--op-tooltip-arrow); background: var(--op-ink); transform: translateX(-50%) rotate(45deg); }
.op-tooltip .op-tooltip-tip.is-below .op-tooltip-arrow { top: -3px; }
.op-tooltip .op-tooltip-tip.is-above .op-tooltip-arrow { bottom: -3px; }
@media (pointer: fine) { .op-tooltip .op-tooltip-tip kbd:not(:empty) { display: inline-block; } }