/* Optional feature hints: load only alongside an enabled campaign or the UI-kit demo. */
.coachmark {
  position: fixed; z-index: calc(var(--z-top) + 1); width: 336px; pointer-events: none;
  color: var(--ink); font: inherit; --coachmark-tip-x: 50%;
  transform: rotate(-1.2deg); transform-origin: 100% 0;
  animation: coachmark-enter 1040ms ease-in-out both;
  --coachmark-pull-x: -18px;
}
.coachmark, .coachmark *, .coachmark::after { box-sizing: border-box; }
.coachmark__card {
  position: relative; pointer-events: auto; padding: 20px 22px;
  background: var(--paper); color: var(--ink); border-radius: 24px 21px 26px 19px;
  box-shadow: var(--shadow-3);
}
.coachmark__card::before {
  content: ''; position: absolute; pointer-events: none; inset: -5px;
  border: 7px solid var(--brand-bg); border-width: 7px 8px 7px 9px;
  border-radius: 25px 20px 28px 18px / 21px 27px 20px 26px;
  transform: rotate(.55deg); corner-shape: round;
}
.coachmark::after {
  content: ''; position: absolute; left: var(--coachmark-tip-x); bottom: -16px;
  width: 30px; height: 30px; background: var(--paper);
  border-right: 7px solid var(--brand-bg); border-bottom: 7px solid var(--brand-bg);
  transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0;
}
.coachmark[data-side=bottom]::after { top: -16px; bottom: auto; transform: translateX(-50%) rotate(225deg); }

.coachmark .coachmark__text { color: #000; margin: 0; padding-right: 26px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.coachmark__close, .coachmark__ok {
  appearance: none; min-width: var(--tap-min); min-height: var(--tap-min); border: 0;
  font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.coachmark__close { position: absolute; top: 2px; right: 2px; background: transparent; font-size: 30px; line-height: 1; border-radius: 16px; }
.coachmark__ok { display: block; margin: 14px 0 0 auto; padding: 8px 20px; background: var(--brand-bg); border-radius: 14px; font-weight: 700; }
.coachmark :is(button):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.coachmark__ok:active { transform: scale(.96); }
/* Pull the left corner away from a fixed upper-right corner, then release. */
@keyframes coachmark-enter {
  0% { opacity: 0; transform: translateX(-6px) scale(.95, .98) rotate(-2deg); }
  22% { opacity: 1; transform: translateX(var(--coachmark-pull-x)) scale(1.015, .96) rotate(-4deg); }
  43% { transform: translateX(5px) scale(.99, 1.025) rotate(1.8deg); }
  62% { transform: translateX(-4px) scale(1.006, .99) rotate(-2.8deg); }
  78% { transform: translateX(2px) scale(1, 1.005) rotate(-.4deg); }
  90% { transform: translateX(-1px) scale(1) rotate(-1.6deg); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .coachmark { animation: none; transform: none; }
  .coachmark__ok:active { transform: none; }
}
@media (forced-colors: active) {
  .coachmark__card { background: Canvas; color: CanvasText; }
  .coachmark .coachmark__text { color: CanvasText; }
  .coachmark__card::before { border-color: CanvasText; }
  .coachmark::after { background: Canvas; border-color: CanvasText; }
  .coachmark__close, .coachmark__ok { color: ButtonText; background: ButtonFace; }
}

/* Reserved compact variant: toolbars, composers and native dialog surfaces. */
.coachmark--compact { transform:none; animation:none; color:var(--fg); }
.coachmark--compact .coachmark__card { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3); border-radius:var(--radius-lg); background:var(--elevated); color:var(--fg); box-shadow:var(--shadow-2); }
.coachmark--compact .coachmark__card::before { display:none; }
.coachmark--compact .coachmark__text { padding:0; color:var(--fg); font-size:var(--fs-14); line-height:1.4; }
.coachmark--compact .coachmark__ok { flex:0 0 auto; min-width:var(--tap-comfort,48px); min-height:var(--tap-comfort,48px); margin:0; padding:var(--s-2); border-radius:var(--radius); color:var(--brand-fg); }
.coachmark--compact::after { width:12px; height:12px; bottom:-6px; border:0; background:var(--elevated); }
.coachmark--compact[data-side=bottom]::after { top:-6px; bottom:auto; }
.coachmark--compact button:focus-visible { outline:var(--focus-outline); outline-offset:var(--focus-offset); }
@media(forced-colors:active){.coachmark--compact .coachmark__card{border:1px solid CanvasText;background:Canvas;color:CanvasText}.coachmark--compact .coachmark__text{color:CanvasText}.coachmark--compact::after{background:Canvas;border-bottom:1px solid CanvasText;border-right:1px solid CanvasText}.coachmark--compact .coachmark__ok{background:ButtonFace;color:ButtonText}}