/* ============================================================
   RLGL Flow Tempo — FAB + Slideout for multi-step flows
   Standalone variant of the dashboard Tempo panel.
   Used by: instructor-application, instructor-onboarding,
            student-onboarding (future)
   ============================================================ */

/* ── FAB ── */
.flow-tempo-fab {
  position:fixed; bottom:24px; right:24px; z-index:200;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer;
  background:var(--bg-white, #fff); border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 2px 12px rgba(0,0,0,0.1);
  transition:transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease, background 150ms ease;
}
.flow-tempo-fab:hover {
  transform:scale(1.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  background:var(--bg-light, #f8f8f8);
}
.flow-tempo-fab:active { transform:scale(0.96); }
.flow-tempo-fab .tempo-pivot { animation:none; }
.flow-tempo-fab.has-notification .tempo-pivot {
  animation:ftPivotPulse 1.2s ease-in-out infinite;
}
@keyframes ftPivotPulse {
  0%, 100% { r:3; filter:brightness(1); }
  50%      { r:4; filter:brightness(1.5) drop-shadow(0 0 4px rgba(57,211,83,0.6)); }
}

/* Intro pulse ring on first appearance */
.flow-tempo-fab.intro::after {
  content:''; position:absolute; inset:-6px;
  border-radius:50%; border:2px solid var(--rlgl-green, #5EC269);
  animation:ftIntroPulse 2s ease-out 0.5s 3;
  opacity:0; pointer-events:none;
}
@keyframes ftIntroPulse {
  0%   { transform:scale(0.9); opacity:0.6; }
  100% { transform:scale(1.4); opacity:0; }
}

/* ── Overlay ── */
.flow-tempo-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.18); z-index:300;
  opacity:0; transition:opacity 200ms ease;
  pointer-events:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.flow-tempo-overlay.open { opacity:1; pointer-events:auto; }

/* ── Slideout Panel ── */
.flow-tempo-slideout {
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:90vw;
  background:var(--bg-white, #fff); z-index:310;
  display:flex; flex-direction:column;
  box-shadow:-4px 0 24px rgba(0,0,0,0.12);
  transform:translateX(100%);
  transition:transform 450ms cubic-bezier(.4, 0, .2, 1);
}
.flow-tempo-slideout.open { transform:translateX(0); }

/* ── Header ── */
.flow-tempo-slideout .ft-header {
  padding:20px 20px 16px; border-bottom:none;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(160deg, #353840 0%, #2D3033 100%);
  flex-shrink:0; position:relative;
}
.flow-tempo-slideout .ft-header-icon {
  width:40px; height:40px; flex-shrink:0;
  transition:transform 0.15s ease, filter 0.15s ease;
}
.flow-tempo-slideout .ft-header-icon:hover {
  transform:scale(1.08); filter:brightness(1.2);
}
.flow-tempo-slideout .ft-header-info h3 {
  margin:0; font-size:15px; font-weight:700; color:#fff;
  letter-spacing:0.2px; font-family:var(--ui-font, 'Barlow', sans-serif);
}
.flow-tempo-slideout .ft-header-info .ft-status {
  font-size:11px; color:rgba(255,255,255,0.55); margin-top:1px;
}
.flow-tempo-slideout .ft-header-info .ft-capabilities {
  font-size:11px; color:rgba(255,255,255,0.35); margin-top:1px;
}
.flow-tempo-slideout .ft-close {
  margin-left:auto; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:rgba(255,255,255,0.5);
  cursor:pointer; transition:all 0.15s ease;
  border:none; background:none;
}
.flow-tempo-slideout .ft-close:hover {
  background:rgba(255,255,255,0.1); color:#fff;
}

/* ── Messages Area ── */
.flow-tempo-slideout .ft-messages {
  flex:1; overflow-y:auto; padding:16px 16px 24px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:inset 0 3px 8px rgba(45,48,51,0.05);
}

.flow-tempo-slideout .ft-msg {
  max-width:88%; padding:12px 16px; border-radius:12px;
  font-size:13px; line-height:1.6;
  animation:ftMsgUp 0.3s ease;
}
@keyframes ftMsgUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.flow-tempo-slideout .ft-msg.ai {
  background:var(--bg-muted, #F2F4F5); align-self:flex-start;
  border-bottom-left-radius:4px; color:var(--text-primary, #333);
}
.flow-tempo-slideout .ft-msg.user {
  background:var(--rlgl-green, #5EC269); color:#fff; align-self:flex-end;
  border-bottom-right-radius:4px;
}
.flow-tempo-slideout .ft-msg .msg-line { margin-bottom:4px; }
.flow-tempo-slideout .ft-msg .msg-line:last-child { margin-bottom:0; }

/* Typing indicator (RLGL branded glow dots) */
.flow-tempo-slideout .ft-typing {
  display:flex; gap:8px; padding:12px 16px; align-self:flex-start;
}
.flow-tempo-slideout .ft-typing .dot {
  width:8px; height:8px; border-radius:50%;
}
.flow-tempo-slideout .ft-typing .dot.d1 {
  background:#92D374; animation:ftDotGreen 1.4s ease-in-out infinite 0s;
}
.flow-tempo-slideout .ft-typing .dot.d2 {
  background:#853838; animation:ftDotBrown 1.4s ease-in-out infinite 0.18s;
}
.flow-tempo-slideout .ft-typing .dot.d3 {
  background:#FF666E; animation:ftDotCoral 1.4s ease-in-out infinite 0.36s;
}
@keyframes ftDotGreen {
  0%, 60%, 100% { transform:scale(0.55); opacity:0.25; box-shadow:0 0 0 0 rgba(94,194,105,0); }
  30%           { transform:scale(1.15); opacity:1;    box-shadow:0 0 10px 3px rgba(94,194,105,0.4); }
}
@keyframes ftDotBrown {
  0%, 60%, 100% { transform:scale(0.55); opacity:0.25; box-shadow:0 0 0 0 rgba(133,56,56,0); }
  30%           { transform:scale(1.15); opacity:1;    box-shadow:0 0 10px 3px rgba(133,56,56,0.4); }
}
@keyframes ftDotCoral {
  0%, 60%, 100% { transform:scale(0.55); opacity:0.25; box-shadow:0 0 0 0 rgba(255,102,110,0); }
  30%           { transform:scale(1.15); opacity:1;    box-shadow:0 0 10px 3px rgba(255,102,110,0.4); }
}

/* ── Quick Actions ── */
.flow-tempo-slideout .ft-actions {
  display:flex; flex-wrap:wrap; gap:8px;
  padding:10px 16px 12px; border-top:1px solid var(--border-light, #eee);
}
.flow-tempo-slideout .ft-action {
  padding:8px 16px; border:1.5px solid var(--border, #ddd); border-radius:999px;
  font-size:12px; font-weight:500; color:var(--text-secondary, #666);
  background:var(--bg-white, #fff); cursor:pointer;
  transition:all 0.18s ease; font-family:var(--ui-font, 'Barlow', sans-serif);
}
.flow-tempo-slideout .ft-action:hover {
  border-color:var(--rlgl-green, #5EC269); color:var(--rlgl-green, #5EC269);
  background:var(--rlgl-green-light, #E8F5E0); transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(94,194,105,0.12);
}
.flow-tempo-slideout .ft-action.hot {
  border-color:#FF666E; color:#FF666E;
  font-weight:600; background:rgba(255,102,110,0.06);
}
.flow-tempo-slideout .ft-action.hot:hover {
  background:#FF666E; color:#fff; border-color:#FF666E;
  box-shadow:0 2px 8px rgba(255,102,110,0.25);
}

/* ── Input Bar ── */
.flow-tempo-slideout .ft-input-bar {
  padding:12px 16px; border-top:1px solid var(--border-light, #eee);
  display:flex; gap:8px;
}
.flow-tempo-slideout .ft-input {
  flex:1; padding:8px 16px; border:1px solid var(--border, #ddd); border-radius:999px;
  font-size:13px; outline:none; font-family:var(--ui-font, 'Barlow', sans-serif);
  color:var(--text-primary, #333);
}
.flow-tempo-slideout .ft-input:focus {
  border-color:var(--rlgl-green, #5EC269);
}
.flow-tempo-slideout .ft-send {
  width:36px; height:36px; border-radius:50%; background:#2D3033;
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, transform 0.15s ease;
  border:none; cursor:pointer;
}
.flow-tempo-slideout .ft-send:hover { background:#3A3F44; }
.flow-tempo-slideout .ft-send.active { background:var(--rlgl-green, #5EC269); }
.flow-tempo-slideout .ft-send.active:hover {
  background:var(--rlgl-green-hover, #4CAF58); transform:scale(1.05);
}

/* ── Polish Result (inline in chat) ── */
.ft-polish-result {
  background:var(--bg-white, #fff); border:1px solid var(--border-light, #eee);
  border-radius:12px; padding:14px 16px; margin-top:4px;
  font-size:13px; line-height:1.6; color:var(--text-primary, #333);
}
.ft-polish-result-label {
  font-size:11px; font-weight:600; color:var(--rlgl-green, #5EC269);
  margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.ft-polish-result-text {
  padding:10px 14px; background:var(--bg-muted, #F2F4F5);
  border-radius:8px; margin-bottom:10px; line-height:1.7;
}
.ft-polish-actions {
  display:flex; gap:8px;
}
.ft-polish-actions button {
  padding:6px 16px; border-radius:999px; font-size:12px; font-weight:600;
  font-family:var(--ui-font, 'Barlow', sans-serif); cursor:pointer;
  transition:all 0.15s ease; border:none;
}
.ft-polish-accept {
  background:var(--rlgl-green, #5EC269); color:#fff;
}
.ft-polish-accept:hover { background:var(--rlgl-green-hover, #4CAF58); }
.ft-polish-keep {
  background:var(--bg-muted, #F2F4F5); color:var(--text-secondary, #666);
  border:1px solid var(--border-light, #eee) !important;
}
.ft-polish-keep:hover { background:var(--bg-secondary, #E8EAEB); }

/* ── Responsive ── */
@media (max-width:768px) {
  .flow-tempo-fab { bottom:16px; right:16px; width:48px; height:48px; }
  .flow-tempo-slideout { width:100%; max-width:100%; }
}