/* Hints in place, first steps, chat starters. All quiet: a tip is an aside, never a modal. */

.tip {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 13px 13px 14px;
  background: var(--plum-tint); border-radius: 16px; position: relative;
}
.tip-i { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.tip-t { display: block; font-size: 14px; font-weight: 600; }
.tip-d { display: block; font-size: 13px; line-height: 1.45; color: #4a4256; margin-top: 2px; }
.tip-a { display: inline-block; margin-top: 7px; font-size: 13px; font-weight: 600; }
.tip-x { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; position: relative; transform: rotate(45deg); }
.tip-x::after { content: ''; position: absolute; inset: -10px; }

.steps-card { background: var(--card); border: 1px solid #d8c9ec; }
.steps-bar { margin: 10px 0 4px; overflow: hidden; }
.steps-bar .bar-fill { transition: width 0.4s var(--ease-out); }
.step { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink); }
.step + .step { border-top: 1px solid var(--line-2); }
.step .radio { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #c3bad3; flex-shrink: 0; }
.step.done { color: var(--ink-3); }

.starters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.starter {
  text-align: left; font-size: 14px; line-height: 1.35; color: var(--plum); min-height: 44px;
  background: #fff; border: 1px solid var(--plum-tint-2); border-radius: 14px; padding: 10px 13px;
  transition: transform 0.16s, background-color 0.2s;
}
.starter:active { transform: scale(0.97); }

.tour-play { width: 30px; height: 30px; border-radius: 50%; background: var(--plum); display: grid; place-items: center; flex-shrink: 0; }
.tour-link { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border: 1px solid #d8c9ec; border-radius: 16px; color: inherit; }
.tip-row { align-items: flex-start; }

.mk-play { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.mk-play .tour-play { width: 26px; height: 26px; animation: t-breathe 2.6s ease-in-out infinite; }
@keyframes t-breathe { 50% { box-shadow: 0 0 0 7px rgba(76, 42, 133, 0.12); } }