/* receptionist.css — «نیلا»، منشی OnTime (web/js/receptionist.js). */
.ot-desk { position: fixed; bottom: 14px; inset-inline-end: 14px; z-index: 40; width: 236px; pointer-events: none;
  opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2); }
.ot-desk.rc-in, .ot-desk.rc-min-on { opacity: 1; transform: none; }
.ot-desk[hidden] { display: none; }
.ot-desk > * { pointer-events: auto; }

/* the character */
.rc-char { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 14px 22px rgba(15, 31, 58, .22)); }
.rc-char:focus-visible { outline: 3px solid var(--br, #3b82f6); outline-offset: 4px; border-radius: 18px; }
.rc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rc-svg text { font-family: inherit; }
.ot-desk.rc-min-on .rc-char, .ot-desk.rc-min-on .rc-min { display: none; }

/* minimise / reopen */
.rc-min { position: absolute; top: 18%; inset-inline-start: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ln, #e5e7eb);
  background: var(--sf, #fff); color: var(--mu, #64748b); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.ot-desk:hover .rc-min, .rc-min:focus-visible { opacity: 1; }
@media (hover: none) { .rc-min { opacity: .85; } }
.rc-open { position: absolute; bottom: 0; inset-inline-end: 0; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid var(--ln, #e5e7eb); background: var(--sf, #fff); color: var(--ink, #0f172a); font: inherit; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 31, 58, .2); }
.rc-open[hidden] { display: none; }
.rc-open-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--br, #3b82f6) 14%, #fff); display: block; }
.rc-open-face svg { width: 100%; height: 100%; }

/* speech bubble */
.rc-bubble { position: absolute; bottom: calc(100% - 36px); inset-inline-end: 52%; width: max-content; max-width: min(270px, calc(100vw - 40px));
  padding: 12px 14px 12px 30px; border-radius: 18px 18px 18px 18px; border-end-end-radius: 4px; background: var(--sf, #fff); color: var(--ink, #0f172a);
  border: 1px solid var(--ln, #e5e7eb); box-shadow: 0 14px 34px rgba(15, 31, 58, .18); font-size: 13.5px; line-height: 1.9; animation: rcPop .28s cubic-bezier(.2, .9, .3, 1.3); }
.rc-bubble[hidden] { display: none; }
.rc-bubble-tx { min-height: 1.9em; }
.rc-bubble-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-bubble-acts:not(:empty) { margin-top: 8px; }
.rc-act { padding: 6px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--br, #3b82f6) 35%, var(--ln, #e5e7eb));
  background: color-mix(in srgb, var(--br, #3b82f6) 8%, var(--sf, #fff)); color: var(--br, #2563eb); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.rc-act:hover { background: color-mix(in srgb, var(--br, #3b82f6) 16%, var(--sf, #fff)); }
.rc-bubble-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: none;
  color: var(--mu, #64748b); font-size: 16px; line-height: 1; cursor: pointer; }
@keyframes rcPop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- motion */
.rc-breathe { animation: rcBreathe 4.4s ease-in-out infinite; }
@keyframes rcBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
.rc-hairfront { transform-box: view-box; transform-origin: 180px 52px; animation: rcSway 6s ease-in-out infinite; }
@keyframes rcSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.9deg); } }
.rc-hairfront.rc-still { animation: none; } /* scarves, caps and short hair do not sway */
.rc-head { transform-box: view-box; transform-origin: 180px 132px; transition: transform .55s cubic-bezier(.3, .8, .3, 1); }
.rc-feat { transition: transform .4s ease; }
.rc-iris { transition: transform .14s ease-out; }
.rc-brows { transition: transform .25s ease; }
.rc-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .09s ease-in; }
.ot-desk[data-mode="note"] .rc-lid { transform: scaleY(.42); }
.ot-desk[data-mode="type"] .rc-lid { transform: scaleY(.18); }
.ot-desk.rc-blink .rc-lid { transform: scaleY(1); }
.ot-desk[data-mode="attend"] .rc-brows, .ot-desk.rc-perk .rc-brows { transform: translateY(-2.2px); }
.ot-desk.rc-perk .rc-head { transform: translateY(-2px) !important; }

/* mouth */
.rc-mouth .mo { display: none; }
.ot-desk[data-mouth="smile"] .mo.smile, .ot-desk[data-mouth="calm"] .mo.calm, .ot-desk[data-mouth="oh"] .mo.oh { display: inline; }
.ot-desk[data-mouth="talk"] .mo.talk { display: inline; animation: rcTalk .26s steps(2) infinite; }
.ot-desk[data-mouth="talk"] .mo.smile { display: inline; animation: rcTalk2 .26s steps(2) infinite; }
@keyframes rcTalk { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes rcTalk2 { 0% { opacity: 0; } 50% { opacity: 1; } }

/* typing: hands tap, the booking calendar fills in, a caret blinks */
.rc-hand { transform-box: fill-box; transform-origin: 50% 100%; }
.ot-desk.rc-typing .rc-armL .rc-hand { animation: rcTap .24s ease-in-out infinite alternate; }
.ot-desk.rc-typing .rc-armR .rc-hand { animation: rcTap .24s ease-in-out .12s infinite alternate; }
@keyframes rcTap { from { transform: translateY(0); } to { transform: translateY(-1.8px); } }
.rc-scr { fill: #F4F7FD; transition: fill .4s; }
.ot-desk.rc-typing .rc-scr { fill: #F8FBFF; }
.rc-ui-hd { fill: var(--br, #3b82f6); }
.rc-cell { fill: #E2E8F0; transition: fill .3s; }
.rc-cell.on { fill: var(--br, #3b82f6); opacity: .85; }
.rc-cell.on:nth-child(3n) { fill: #22C55E; }
.rc-caret { opacity: 0; }
.ot-desk.rc-typing .rc-caret { animation: rcCaret .8s steps(1) infinite; }
@keyframes rcCaret { 50% { opacity: 1; } }
.rc-done { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.2, .9, .3, 1.5); }
.ot-desk.rc-done-on.rc-typing .rc-done { opacity: 1; transform: none; }

/* writing: the right arm goes to the notebook, the pen moves, ink appears */
.rc-armR { transform-box: view-box; transform-origin: 213px 156px; transition: transform .6s cubic-bezier(.3, .8, .3, 1); }
.ot-desk.rc-writing .rc-armR { transform: rotate(-47deg); }
.rc-pen { opacity: 0; transition: opacity .2s; }
.ot-desk.rc-writing .rc-pen { opacity: 1; }
.ot-desk.rc-writing .rc-penrest { opacity: 0; }
.ot-desk.rc-writing .rc-armR .rc-hand { animation: rcWrite .5s ease-in-out .5s infinite; }
@keyframes rcWrite { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(1.4px, -.6px) rotate(-3deg); } 50% { transform: translate(2.6px, .4px) rotate(2deg); } 75% { transform: translate(1.2px, .2px); } }
.rc-ink path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.ot-desk.rc-writing .rc-ink path { animation: rcInk 3.6s linear .6s forwards; }
.ot-desk.rc-writing .rc-ink path:nth-child(2) { animation-delay: 1.8s; }
.ot-desk.rc-writing .rc-ink path:nth-child(3) { animation-delay: 3s; }
@keyframes rcInk { to { stroke-dashoffset: 0; } }

/* dark skins: soften the desk */
html[data-theme="dark"] .rc-char { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55)); }

@media (max-width: 720px) {
  .ot-desk { width: 150px; bottom: 10px; inset-inline-end: 8px; }
  .rc-bubble { font-size: 12.5px; padding: 10px 12px 10px 26px; inset-inline-end: 40%; max-width: min(240px, calc(100vw - 30px)); }
}
/* reduced motion: calmer, not frozen — no idle loops, quicker state changes */
@media (prefers-reduced-motion: reduce) {
  .rc-breathe, .rc-hairfront, .rc-bubble { animation: none !important; }
  .ot-desk { transition: opacity .3s ease; transform: none; }
  .rc-head, .rc-armR { transition-duration: .35s; }
}
@media print { .ot-desk { display: none !important; } }

/* ================================================================ guide mode
   In the booking and sign-up wizards she sits beside the steps; the bubble
   holds the current step's tip. Narrow screens: a small face + the bubble. */
.ot-desk.rc-guide { position: relative; bottom: auto; inset-inline-end: auto; z-index: auto; width: 100%; max-width: 270px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: stretch; pointer-events: auto; }
.ot-desk.rc-guide.rc-in { transform: none; }
.rc-guide .rc-min, .rc-guide .rc-open, .rc-guide .rc-open[hidden] { display: none !important; }
.rc-guide .rc-face { display: none; }
.rc-guide .rc-bubble { position: relative; inset: auto; bottom: auto; width: auto; max-width: none; margin: 0 0 10px; padding: 12px 14px 12px 30px;
  border-radius: 18px; border-end-end-radius: 18px; font-size: 13.5px; line-height: 1.95; }
.rc-guide .rc-bubble::after { content: ""; position: absolute; bottom: -8px; inset-inline-end: 46%; width: 16px; height: 16px; background: inherit;
  border: inherit; border-top: 0; border-inline-start: 0; transform: rotate(45deg); border-radius: 0 0 4px 0; }
[dir="rtl"] .rc-guide .rc-bubble::after { transform: rotate(45deg); }
.rc-bubble-who { display: block; font-size: 11.5px; font-weight: 800; color: var(--br, #2563eb); margin-bottom: 2px; letter-spacing: 0; }
.rc-guide .rc-char { filter: drop-shadow(0 10px 18px rgba(15, 31, 58, .16)); }
.rc-guide .rc-bubble-acts .rc-act { font-size: 12px; }

/* cheer: a hop, a wave and confetti */
.rc-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rc-confetti i { position: absolute; top: 34%; left: var(--x); width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  animation: rcConf 1.9s var(--d) cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes rcConf {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  30% { opacity: 1; transform: translate(0, -110px) rotate(calc(var(--r) * 1)) scale(1); }
  100% { opacity: 0; transform: translate(0, 120px) rotate(calc(var(--r) * 3)) scale(.9); }
}
.ot-desk.rc-cheer .rc-svg, .ot-desk.rc-cheer .rc-face svg { animation: rcHop .55s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes rcHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-9px); } }
.ot-desk.rc-cheer .rc-armR { animation: rcWave .42s ease-in-out 5 alternate; transform: rotate(-150deg); }
@keyframes rcWave { from { transform: rotate(-138deg); } to { transform: rotate(-164deg); } }
.ot-desk.rc-cheer .rc-brows { transform: translateY(-2.4px); }

/* worry: brows down, a small «oh» */
.ot-desk.rc-worry .rc-brows { transform: translateY(1.6px); }
.ot-desk.rc-worry .rc-bubble { border-color: color-mix(in srgb, #F59E0B 55%, var(--ln, #e5e7eb)); }

@media (max-width: 900px) {
  .ot-desk.rc-guide { max-width: none; flex-direction: row; align-items: flex-end; gap: 10px; }
  .rc-guide .rc-char { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
  .rc-guide .rc-face { display: block; flex: none; width: 58px; height: 58px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
    border: 2px solid var(--sf, #fff); background: color-mix(in srgb, var(--br, #3b82f6) 14%, var(--sf, #fff)); box-shadow: 0 6px 16px rgba(15, 31, 58, .18); }
  .rc-guide .rc-face svg { display: block; width: 100%; height: 100%; }
  .rc-guide .rc-bubble { flex: 1; margin: 0; padding: 9px 12px 9px 28px; font-size: 13px; line-height: 1.85; border-end-start-radius: 4px; }
  .rc-guide .rc-bubble::after { display: none; }
  .rc-guide .rc-confetti { inset: -20px 0 auto auto; width: 120px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-desk.rc-cheer .rc-svg, .ot-desk.rc-cheer .rc-face svg, .ot-desk.rc-cheer .rc-armR { animation: none; }
}