/* ============================================================
   NextGen Tutors — Floating Dock, RTM Chat, Onboarding Widget
   ============================================================ */

/* ===================== FLOATING DOCK ===================== */
.float-dock {
  position: fixed; right: 24px; bottom: 28px; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.fdock-btn {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22); transition: transform .3s var(--ease-spring), box-shadow .3s;
  cursor: pointer;
}
.fdock-btn:hover { transform: scale(1.12) translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.fdock-btn svg { width: 22px; height: 22px; }
.fdock-btn--top { background: var(--navy); color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease-spring), box-shadow .3s; }
.fdock-btn--top.is-visible { opacity: 1; pointer-events: auto; }
.fdock-btn--wa { background: #25D366; color: #fff; }
.fdock-btn--livechat { background: var(--blue); color: #fff; }
.fdock-btn--livechat.has-unread::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; animation: livePulse 1.8s infinite; }
.fdock-btn--support { background: var(--navy); color: var(--lime); }
.fdock-tooltip {
  position: absolute; right: 62px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 12px; border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.fdock-tooltip::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--ink); border-right: 0; }
.fdock-btn:hover .fdock-tooltip { opacity: 1; }
@media (max-width: 600px) { .float-dock { right: 14px; bottom: 16px; } .fdock-btn { width: 46px; height: 46px; } }

/* ===================== RTM CHAT PANEL ===================== */
.chat-panel {
  position: fixed; right: 88px; bottom: 28px; z-index: 2001;
  width: 380px; height: 560px; background: #fff;
  border: 2px solid var(--slate-200); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl); overflow: hidden; display: flex; flex-direction: column;
  transform: scale(0.85) translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease-spring), opacity .3s;
  transform-origin: bottom right;
}
.chat-panel.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
@media (max-width: 540px) { .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 75vh; border-radius: var(--r-xl) var(--r-xl) 0 0; } }

.chat-panel__head { background: var(--navy); color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.chat-panel__title { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; font-size: 15px; }
.chat-panel__sub { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.65); margin-top: 3px; }
.chat-head-actions { display: flex; gap: 8px; }
.chat-icon-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff; transition: background .2s, transform .2s; }
.chat-icon-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.08); }
.chat-icon-btn svg { width: 16px; height: 16px; }
.chat-icon-btn--call { background: rgba(174,206,97,.18); }
.chat-icon-btn--call:hover { background: rgba(174,206,97,.35); }
.chat-icon-btn--video { background: rgba(26,85,148,.35); }
.chat-icon-btn--close:hover { background: rgba(239,68,68,.4); }

.chat-tabs { display: flex; border-bottom: 1px solid var(--slate-100); flex-shrink: 0; }
.chat-tab { flex: 1; padding: 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-400); text-align: center; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.chat-tab.is-active { color: var(--navy); border-bottom-color: var(--lime); }

.chat-contacts { flex: 1; overflow-y: auto; }
.chat-contact { display: flex; align-items: center; gap: 12px; padding: 12px 16px; transition: background .18s; cursor: pointer; }
.chat-contact:hover { background: var(--slate-50); }
.chat-contact.is-active { background: var(--lime-soft); }
.chat-contact__av { position: relative; flex-shrink: 0; }
.chat-contact__av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.chat-contact__online { position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.chat-contact__online.away { background: var(--amber); }
.chat-contact__name { font-weight: 900; font-size: 13.5px; color: var(--navy); }
.chat-contact__role { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-400); }
.chat-contact__last { font-size: 11.5px; color: var(--slate-500); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.chat-contact__time { font-size: 10px; color: var(--slate-400); font-weight: 700; margin-left: auto; align-self: flex-start; padding-top: 2px; }
.chat-badge { background: var(--navy); color: #fff; border-radius: 999px; font-size: 9px; font-weight: 900; padding: 2px 6px; margin-left: auto; }

.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--slate-50); }
.chat-msg { max-width: 72%; }
.chat-msg__bubble { padding: 10px 14px; border-radius: 18px; font-size: 13px; line-height: 1.5; font-weight: 500; }
.chat-msg__time { font-size: 9.5px; font-weight: 700; color: var(--slate-400); margin-top: 4px; }
.chat-msg--in .chat-msg__bubble { background: #fff; border: 1px solid var(--slate-200); color: var(--slate-700); border-bottom-left-radius: 4px; }
.chat-msg--out { align-self: flex-end; }
.chat-msg--out .chat-msg__bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--out .chat-msg__time { text-align: right; }

.chat-compose { padding: 12px 16px; border-top: 1px solid var(--slate-100); display: flex; gap: 10px; align-items: center; flex-shrink: 0; background: #fff; }
.chat-compose input { flex: 1; background: var(--slate-50); border: 1.5px solid var(--slate-200); border-radius: 22px; padding: 10px 16px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--slate-800); transition: border-color .2s; }
.chat-compose input:focus { outline: none; border-color: var(--lime); background: #fff; }
.chat-compose button { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .2s; }
.chat-compose button:hover { background: var(--blue); transform: scale(1.06); }
.chat-compose button svg { width: 18px; height: 18px; }

/* Video call overlay */
.video-overlay {
  position: fixed; inset: 0; z-index: 3000; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.video-overlay.is-active { opacity: 1; pointer-events: auto; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(900px,95vw); }
.video-tile { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/9; background: #1a1a2e; position: relative; }
.video-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.video-tile__label { position: absolute; bottom: 12px; left: 14px; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.video-tile__label svg { width: 14px; height: 14px; color: var(--lime); }
.video-controls { display: flex; gap: 14px; margin-top: 22px; }
.vc-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform .25s var(--ease-spring); }
.vc-btn:hover { transform: scale(1.12); }
.vc-btn--end { background: #ef4444; color: #fff; }
.vc-btn--mute { background: rgba(255,255,255,.15); color: #fff; }
.vc-btn--video { background: rgba(255,255,255,.15); color: #fff; }
.vc-btn--screen { background: rgba(255,255,255,.15); color: #fff; }
.vc-btn svg { width: 24px; height: 24px; }

/* ===================== ONBOARDING WIDGET (dashboards) ===================== */
.onb-widget { background: var(--navy); border-radius: var(--r-xl); border-bottom: 6px solid #04162c; padding: 22px; color: #fff; }
.onb-widget__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.onb-widget__title { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; font-size: 16px; color: #fff; }
.onb-widget__pct { font-family: var(--font-serif); font-weight: 900; font-style: italic; font-size: 26px; color: var(--lime); }
.onb-track { display: flex; flex-direction: column; gap: 10px; }
.onb-step { display: flex; align-items: center; gap: 12px; }
.onb-step__ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.onb-step--done .onb-step__ico { background: var(--lime); color: var(--navy); }
.onb-step--active .onb-step__ico { background: var(--amber); color: var(--navy); animation: livePulse 2s infinite; }
.onb-step--locked .onb-step__ico { background: rgba(255,255,255,.1); color: rgba(255,255,255,.35); }
.onb-step__ico svg { width: 16px; height: 16px; }
.onb-step__t { font-size: 12.5px; font-weight: 700; }
.onb-step--done .onb-step__t { color: rgba(255,255,255,.65); text-decoration: line-through; }
.onb-step--active .onb-step__t { color: #fff; font-weight: 900; }
.onb-step--locked .onb-step__t { color: rgba(255,255,255,.35); }
.onb-prog-bar { height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; margin: 14px 0; overflow: hidden; }
.onb-prog-bar__fill { height: 100%; background: linear-gradient(90deg, var(--lime), var(--lime-bright)); border-radius: 3px; transition: width 1s var(--ease-expo); }
.onb-points { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.onb-points .pts { color: var(--amber); font-family: var(--font-serif); font-style: italic; font-size: 16px; }

/* ===================== SUPPORT PANEL ===================== */
.support-panel {
  position: fixed; right: 88px; bottom: 28px; z-index: 2001;
  width: 340px; background: #fff;
  border: 2px solid var(--slate-200); border-bottom-width: 4px;
  border-radius: var(--r-xl); box-shadow: var(--sh-xl); overflow: hidden;
  transform: scale(0.88) translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease-spring), opacity .3s;
  transform-origin: bottom right;
}
.support-panel.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
@media (max-width: 540px) {
  .support-panel { right: 0; left: 0; width: 100%; bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
.support-panel__head {
  background: var(--navy); color: #fff; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.support-panel__title { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; font-size: 15px; }
.support-panel__sub { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.6); margin-top: 3px; }
.support-panel__body { padding: 8px; }

.support-action {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 13px 12px; border-radius: var(--r-md);
  text-align: left; text-decoration: none;
  transition: background .18s, transform .18s var(--ease-spring); cursor: pointer;
}
.support-action:hover { background: var(--slate-50); transform: translateX(3px); }
.support-action__ico {
  width: 42px; height: 42px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.support-action__ico svg { width: 20px; height: 20px; }
.support-action__title { font-weight: 900; font-size: 13.5px; color: var(--navy); }
.support-action__desc { font-size: 11px; font-weight: 600; color: var(--slate-400); margin-top: 2px; line-height: 1.35; }
.support-action__end { margin-left: auto; flex-shrink: 0; color: var(--slate-300); }
.support-action__end svg { width: 15px; height: 15px; }
.support-action-divider { height: 1px; background: var(--slate-100); margin: 4px 12px; }

/* Inline ticket form */
.sp-form-wrap { display: none; padding: 0 12px 14px; }
.sp-form-wrap.is-open { display: block; }
.sp-form-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 0; border-top: 1px solid var(--slate-100);
}
.sp-form-head__back {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--slate-100); display: flex; align-items: center; justify-content: center;
  color: var(--slate-600); transition: background .2s; flex-shrink: 0;
}
.sp-form-head__back:hover { background: var(--slate-200); }
.sp-form-head__back svg { width: 14px; height: 14px; }
.sp-form-head__t { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; font-size: 13px; color: var(--navy); }
.sp-field { margin-bottom: 10px; }
.sp-field label { display: block; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); margin-bottom: 5px; }
.sp-field input, .sp-field select, .sp-field textarea {
  width: 100%; font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--slate-200);
  background: var(--slate-50); color: var(--slate-800); transition: border-color .2s, background .2s;
}
.sp-field textarea { resize: none; height: 76px; }
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus { outline: none; border-color: var(--lime); background: #fff; }

.sp-success { display: none; text-align: center; padding: 22px 16px; }
.sp-success.show { display: block; }
.sp-success__ico { font-size: 38px; margin-bottom: 10px; }
.sp-success__t { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.sp-success__d { font-size: 12px; color: var(--slate-500); font-weight: 600; line-height: 1.5; }

.support-panel__foot {
  padding: 10px 14px; border-top: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--slate-50);
}
.support-panel__foot-link {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--blue); display: inline-flex; align-items: center; gap: 5px; transition: color .2s;
}
.support-panel__foot-link:hover { color: var(--navy); }
.support-panel__foot-link svg { width: 13px; height: 13px; }
.support-online { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #16a34a; }
.support-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: block; animation: livePulse 2s infinite; }

/* ===================== EXPORT BUTTONS ===================== */
.export-bar { display: flex; align-items: center; gap: 8px; }
.export-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; padding: 7px 13px; border-radius: var(--r-sm); border: 1.5px solid var(--slate-200); color: var(--slate-600); background: #fff; transition: all .2s; }
.export-btn:hover { border-color: var(--lime); color: var(--navy); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.export-btn svg { width: 14px; height: 14px; }
.export-btn--pdf { color: #b91c1c; }
.export-btn--csv { color: #15803d; }

/* ===================== NOTIFICATION BELL ===================== */
.notif-btn { position: relative; width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.notif-btn:hover { background: rgba(255,255,255,.18); }
.notif-btn svg { width: 20px; height: 20px; }
.notif-badge { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; font-size: 9px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; }
.notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; background: #fff; border: 2px solid var(--slate-200); border-radius: var(--r-lg); box-shadow: var(--sh-xl); z-index: 500; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.notif-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.notif-panel__head { padding: 16px 18px; border-bottom: 1px solid var(--slate-100); display: flex; align-items: center; justify-content: space-between; }
.notif-panel__h { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; font-size: 15px; color: var(--navy); }
.notif-item { padding: 14px 18px; border-bottom: 1px solid var(--slate-100); display: flex; gap: 12px; align-items: flex-start; transition: background .18s; cursor: pointer; }
.notif-item:hover { background: var(--slate-50); }
.notif-item.unread { background: rgba(174,206,97,.05); }
.notif-item__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); flex-shrink: 0; margin-top: 5px; }
.notif-item.unread .notif-item__dot { animation: livePulse 2s infinite; }
.notif-item__msg { font-size: 13px; font-weight: 600; color: var(--slate-700); line-height: 1.45; }
.notif-item__time { font-size: 10.5px; font-weight: 700; color: var(--slate-400); margin-top: 4px; }