/* milo_widget.css — Milo corner chat + tour overlay.
   Loaded on both /ops/* and /carrier/* pages. */

/* Milo palette — matches WeBookLoads portal branding.
   Primary accent: --wbl orange (#F87040). Both ops and carrier
   portals are dark themed on the same tokens. */
:root {
  --milo-bg:        #0e1116;   /* portal deepest bg */
  --milo-panel:     #161b22;   /* card bg */
  --milo-elev:      #1c232c;   /* elevated bubbles */
  --milo-line:      #2a313c;   /* portal border */
  --milo-line-hi:   #3a414c;   /* portal border-hi */
  --milo-fg:        #e6edf3;   /* portal text */
  --milo-fg-dim:    #9aa4ad;   /* portal text-dim */
  --milo-fg-faint:  #6b7480;   /* portal text-faint */
  --milo-accent:    #F87040;   /* WBL brand orange */
  --milo-accent-2:  #ff8458;   /* WBL orange-hi */
  --milo-accent-mute: #C8856B; /* WBL orange muted */
  --milo-user-bub:  #232732;   /* card-hi for user turns */
  --milo-milo-bub:  #1c232c;   /* elevated for Milo turns */
  --milo-warning:   #F59E0B;
  --milo-good:      #22c55e;
  --milo-bad:       #ef4444;
}

/* ── Floating launcher bubble ─────────────────────────────────── */
#milo-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(140deg, var(--milo-accent),
              var(--milo-accent-2));
  color: white;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,0.32),
              0 2px 6px rgba(0,0,0,0.18);
  z-index: 999900;
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s ease;
}
#milo-launcher:hover     { transform: scale(1.05); }
#milo-launcher:active    { transform: scale(0.96); }
#milo-launcher img,
#milo-launcher svg       { width: 100%; height: 100%;
                            display: block; }
#milo-launcher.milo-hidden { display: none; }

#milo-launcher-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--milo-accent);
  opacity: 0.75;
  pointer-events: none;
  animation: milo-pulse 2.4s ease-out infinite;
}
@keyframes milo-pulse {
  0%   { transform: scale(0.9);  opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0;   }
  100% { transform: scale(1.35); opacity: 0;   }
}
#milo-launcher.milo-opened #milo-launcher-pulse { display: none; }

/* Unread badge */
#milo-launcher-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e63946;
  color: white;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
#milo-launcher-badge.milo-shown { display: flex; }

/* ── Chat panel ───────────────────────────────────────────────── */
#milo-panel {
  position: fixed;
  bottom: 92px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - 120px);
  background: var(--milo-panel);
  color: var(--milo-fg);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  display: none;
  flex-direction: column;
  z-index: 999901;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Inter",
                "Segoe UI", Roboto, sans-serif;
  border: 1px solid var(--milo-line);
}
#milo-panel.milo-open { display: flex; }

#milo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--milo-line);
  background: linear-gradient(180deg,
              rgba(248,112,64,0.08), transparent);
}
#milo-avatar-header {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--milo-accent),
              var(--milo-accent-2));
  overflow: hidden;
  flex: 0 0 auto;
}
#milo-avatar-header img,
#milo-avatar-header svg { width: 100%; height: 100%; }
#milo-header-title {
  flex: 1 1 auto;
  min-width: 0;
}
#milo-header-title .milo-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--milo-fg);
}
#milo-header-title .milo-sub {
  font-size: 11px;
  color: var(--milo-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#milo-header-actions {
  display: flex; gap: 6px;
}
.milo-icon-btn {
  background: transparent;
  border: none;
  color: var(--milo-fg-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
}
.milo-icon-btn:hover {
  background: var(--milo-line);
  color: var(--milo-fg);
}

/* ── Message list ─────────────────────────────────────────────── */
#milo-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.milo-msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
}
.milo-msg.user  { flex-direction: row-reverse; }
.milo-msg .milo-msg-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--milo-accent),
              var(--milo-accent-2));
  flex: 0 0 auto;
  overflow: hidden;
}
.milo-msg .milo-msg-avatar img,
.milo-msg .milo-msg-avatar svg { width: 100%; height: 100%; }
.milo-msg.user .milo-msg-avatar {
  background: var(--milo-user-bub);
  color: var(--milo-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  font-family: -apple-system, sans-serif;
}
.milo-bubble {
  background: #242d3a;
  padding: 12px 14px;
  border-radius: 12px;
  border-top-left-radius: 4px;
  border: 1px solid #37414f;
  max-width: 82%;
  font-size: 14px;
  line-height: 1.55;
  color: #f2f5f9;
  word-wrap: break-word;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.milo-msg.user .milo-bubble {
  background: rgba(248, 112, 64, 0.15);
  border-color: rgba(248, 112, 64, 0.45);
  border-top-left-radius: 12px;
  border-top-right-radius: 4px;
  color: #ffe8dc;
}
.milo-bubble p    { margin: 0 0 6px 0; }
.milo-bubble p:last-child { margin-bottom: 0; }
.milo-bubble ul,
.milo-bubble ol   { margin: 6px 0; padding-left: 20px; }
.milo-bubble li   { margin-bottom: 2px; }
.milo-bubble code {
  background: rgba(0,0,0,0.28);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.milo-bubble a    { color: var(--milo-accent); }

/* Tutorial launch chip embedded in Milo's bubble */
.milo-tutorial-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--milo-accent);
  color: white;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.milo-tutorial-chip:hover { filter: brightness(1.1); }
.milo-tutorial-chip::before { content: "▶"; font-size: 10px; }

/* Typing indicator */
.milo-typing {
  display: inline-flex; gap: 3px;
  padding: 8px 10px;
}
.milo-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--milo-fg-dim);
  animation: milo-blink 1.2s infinite ease-in-out;
}
.milo-typing span:nth-child(2) { animation-delay: 0.15s; }
.milo-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes milo-blink {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

/* ── Suggestions strip ────────────────────────────────────────── */
#milo-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0 12px;
}
.milo-suggest-chip {
  background: transparent;
  border: 1px solid var(--milo-line);
  color: var(--milo-fg-dim);
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.milo-suggest-chip:hover {
  background: var(--milo-line);
  color: var(--milo-fg);
  border-color: var(--milo-accent);
}

/* ── Composer ─────────────────────────────────────────────────── */
#milo-composer {
  border-top: 1px solid var(--milo-line);
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
#milo-input {
  flex: 1 1 auto;
  background: var(--milo-bg);
  color: var(--milo-fg);
  border: 1px solid var(--milo-line);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  outline: none;
}
#milo-input:focus { border-color: var(--milo-accent); }
#milo-send {
  background: var(--milo-accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#milo-send:disabled { opacity: 0.5; cursor: default; }

#milo-footer {
  padding: 6px 12px 10px 12px;
  font-size: 10.5px;
  color: var(--milo-fg-dim);
  text-align: center;
}
#milo-footer a {
  color: var(--milo-fg-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--milo-line);
}

/* ── Tutorials view (opens over chat) ─────────────────────────── */
#milo-tutorials-view {
  position: absolute;
  inset: 0;
  background: var(--milo-panel);
  display: none;
  flex-direction: column;
  z-index: 2;
}
#milo-tutorials-view.milo-open { display: flex; }
#milo-tutorials-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.milo-tut-card {
  background: var(--milo-milo-bub);
  border: 1px solid var(--milo-line);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.milo-tut-card:hover {
  border-color: var(--milo-accent);
  transform: translateY(-1px);
}
.milo-tut-card .milo-tut-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--milo-fg);
  margin-bottom: 4px;
}
.milo-tut-card .milo-tut-summary {
  font-size: 12px;
  color: var(--milo-fg-dim);
  line-height: 1.4;
}
.milo-tut-card .milo-tut-meta {
  font-size: 10.5px;
  color: var(--milo-fg-dim);
  margin-top: 6px;
}

/* ── Guided tour overlay ──────────────────────────────────────── */
#milo-tour-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 999950;
  display: none;
}
#milo-tour-backdrop.milo-active { display: block; }

#milo-tour-spotlight {
  position: fixed;
  z-index: 999951;
  border: 3px solid var(--milo-accent);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55),
              0 0 22px rgba(248,112,64,0.55);
  pointer-events: none;
  transition: all 0.28s ease;
  display: none;
}
#milo-tour-spotlight.milo-active { display: block; }

#milo-tour-tooltip {
  position: fixed;
  z-index: 999952;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--milo-panel);
  color: var(--milo-fg);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  border: 1px solid var(--milo-accent);
  padding: 14px 16px;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Inter",
                "Segoe UI", Roboto, sans-serif;
}
#milo-tour-tooltip.milo-active { display: block; }
#milo-tour-tooltip .milo-tour-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#milo-tour-tooltip .milo-tour-title .milo-tour-mini-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--milo-accent),
              var(--milo-accent-2));
  overflow: hidden;
  flex: 0 0 auto;
}
#milo-tour-tooltip .milo-tour-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--milo-fg);
  margin-bottom: 12px;
}
#milo-tour-tooltip .milo-tour-body p { margin: 0 0 6px 0; }
#milo-tour-tooltip .milo-tour-body p:last-child { margin-bottom: 0; }
#milo-tour-tooltip .milo-tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#milo-tour-tooltip .milo-tour-step {
  font-size: 11px;
  color: var(--milo-fg-dim);
}
#milo-tour-tooltip .milo-tour-buttons { display: flex; gap: 6px; }
#milo-tour-tooltip button {
  background: transparent;
  border: 1px solid var(--milo-line);
  color: var(--milo-fg);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
#milo-tour-tooltip button.milo-tour-primary {
  background: var(--milo-accent);
  border-color: var(--milo-accent);
  color: white;
}
#milo-tour-tooltip button:hover:not(:disabled) {
  filter: brightness(1.15);
}
#milo-tour-tooltip button:disabled { opacity: 0.4; cursor: default; }

/* Mobile-ish */
@media (max-width: 480px) {
  #milo-panel {
    right: 6px;
    left: 6px;
    width: auto;
    bottom: 82px;
    height: calc(100vh - 100px);
    max-height: none;
    border-radius: 12px;
  }
  /* 2026-10-02 default launcher spot lifted so it doesn't
     overlap sticky bottom composers on mobile. The user can
     drag to any corner from here. */
  #milo-launcher { bottom: 72px; right: 12px;
                    width: 48px; height: 48px; }
  #milo-pending  { width: calc(100vw - 24px); }
}

/* 2026-10-02 corner anchoring — JS sets body.milo-corner-<pos>
   based on where the user dropped the launcher (bl/br/tl/tr).
   Transitions re-dock the pending stack to match. */
body.milo-corner-bl #milo-launcher { right: auto; left: 20px; }
body.milo-corner-tr #milo-launcher { bottom: auto; top: 20px; }
body.milo-corner-tl #milo-launcher {
  bottom: auto; top: 20px; right: auto; left: 20px;
}
body.milo-corner-bl #milo-pending {
  right: auto; left: 24px;
}
body.milo-corner-tr #milo-pending {
  bottom: auto; top: 96px;
}
body.milo-corner-tl #milo-pending {
  bottom: auto; top: 96px; right: auto; left: 24px;
}
/* While dragging, suppress transitions + hide pointer stuff. */
#milo-launcher.milo-dragging {
  transition: none !important;
  cursor: grabbing;
  opacity: 0.85;
}
#milo-launcher { touch-action: none; }

/* ─── Bot-send holdback pending pane (2026-09-27) ──────────────── */
#milo-pending {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 380px;
  max-width: calc(100vw - 48px);
  max-height: 70vh;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(249,115,22,0.45);
  border-radius: 12px;
  background: rgba(15,23,42,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55),
              0 0 0 1px rgba(249,115,22,0.10);
  z-index: 2147483000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--milo-text);
}
#milo-pending.open { display: flex; }
#milo-pending .milo-pending-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg,
    rgba(249,115,22,0.18) 0%,
    rgba(249,115,22,0.06) 100%);
  cursor: default;
  user-select: none;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #F97316;
  font-weight: 700;
}
#milo-pending .milo-pending-title {
  flex: 1 1 auto;
}
#milo-pending .milo-pending-min {
  background: transparent;
  color: var(--milo-text-mute);
  border: 0;
  padding: 0 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0;
  line-height: 1;
}
#milo-pending .milo-pending-min::before {
  content: "▾";
  font-size: 14px;
}
#milo-pending .milo-pending-min:hover {
  color: var(--milo-text);
  background: rgba(255,255,255,0.06);
}
#milo-pending .milo-pending-list {
  overflow-y: auto;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#milo-pending.collapsed {
  width: auto;
  max-height: none;
  cursor: pointer;
}
#milo-pending.collapsed .milo-pending-list { display: none; }
#milo-pending.collapsed .milo-pending-header { border-bottom: 0; }
#milo-pending.collapsed .milo-pending-min::before { content: "▴"; }
.milo-pending-count {
  background: #F97316;
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.milo-pending-count:empty { display: none; }
.milo-pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.milo-pending-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(249,115,22,0.35);
  border-radius: 8px;
  padding: 9px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--milo-text);
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.milo-pending-card.status-sent {
  border-color: rgba(34,197,94,0.5);
  background: rgba(34,197,94,0.08);
  opacity: 0.85;
}
.milo-pending-card.status-canceled {
  border-color: rgba(148,163,184,0.4);
  background: rgba(100,116,139,0.10);
  opacity: 0.7;
}
.milo-pending-card.status-failed {
  border-color: rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.08);
}
.milo-pending-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 11.5px;
}
.milo-pending-kind {
  background: #F97316;
  color: #fff;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.milo-pending-load {
  font-weight: 700;
  color: var(--milo-text);
}
.milo-pending-broker {
  color: var(--milo-text-mute);
  font-size: 11.5px;
}
.milo-pending-more {
  color: #F97316;
  font-weight: 600;
}
.milo-pending-drafted {
  color: var(--milo-text-mute);
  font-size: 10.5px;
  margin-left: auto;
  opacity: 0.75;
}
.milo-pending-preview {
  color: var(--milo-text-mute);
  font-size: 11.5px;
  line-height: 1.35;
  max-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 2px 0;
}
.milo-pending-bar {
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  overflow: hidden;
}
.milo-pending-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316, #FBBF24);
  border-radius: 3px;
  transition: width 0.9s linear;
}
.milo-pending-card.status-sent .milo-pending-bar-fill    { background: #22C55E; }
.milo-pending-card.status-canceled .milo-pending-bar-fill { background: #94A3B8; }
.milo-pending-card.status-failed .milo-pending-bar-fill  { background: #EF4444; }
.milo-pending-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.milo-pending-countdown {
  color: #F97316;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.milo-pending-cancel {
  background: transparent;
  color: #F97316;
  border: 1px solid rgba(249,115,22,0.55);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.milo-pending-cancel:hover {
  background: #F97316;
  color: #fff;
}
.milo-pending-cancel:disabled {
  opacity: 0.6;
  cursor: default;
}
.milo-pending-actions.sent     { color: #22C55E; font-weight: 700; }
.milo-pending-actions.canceled { color: #94A3B8; font-weight: 700; }
.milo-pending-actions.failed   { color: #EF4444; font-weight: 700; }