/* ========================================================================
   Tempo Floating Widget — Cadence Advisers
   Task 016 (visual layer only; Task 017 wires real backend)
   ======================================================================== */

/* Base palette — match home page V2 palette */
.tempo-widget-root {
  --tw-ink: #0a1628;
  --tw-ink-deep: #050b14;
  --tw-ink-elev: #122139;
  --tw-ink-soft: #1a2c47;
  --tw-cream: #f5f2ea;
  --tw-cream-soft: #d6d2c5;
  --tw-quiet: #9ca3af;
  --tw-gold: #c8b88a;
  --tw-gold-warm: #b8a574;
  --tw-rule: #2a3f5f;
  --tw-success: #4ade80;

  /* Layout */
  --tw-z: 9999;
  --tw-bottom: 24px;
  --tw-right: 24px;
  --tw-collapsed-size: 80px;
  --tw-expanded-width: 380px;
  --tw-expanded-height: 600px;
}

/* Container — sticky bottom-right */
.tempo-widget-root {
  position: fixed;
  bottom: var(--tw-bottom);
  right: var(--tw-right);
  z-index: var(--tw-z);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  pointer-events: none; /* children re-enable */
}

.tempo-widget-root.tw-hidden { display: none; }

/* ========================================================================
   COLLAPSED STATE — 64px circle
   ======================================================================== */
.tw-collapsed {
  width: var(--tw-collapsed-size);
  height: var(--tw-collapsed-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tw-ink-elev) 0%, var(--tw-ink) 100%);
  border: 2px solid var(--tw-gold);
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.28),
              0 4px 10px rgba(10, 22, 40, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}

.tw-collapsed:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(10, 22, 40, 0.32),
              0 6px 14px rgba(10, 22, 40, 0.18);
}

.tw-collapsed-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tw-ink-soft) 0%, var(--tw-ink-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--tw-quiet);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-collapsed-pulse {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tw-success);
  border: 2px solid var(--tw-ink);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: tw-pulse 2s infinite;
}

@keyframes tw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Attention bounce — fires once when triggered */
@keyframes tw-bounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-12px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-6px); }
  80% { transform: translateY(0); }
}

.tw-collapsed.tw-bouncing {
  animation: tw-bounce 1.1s ease-out 1;
}

/* ========================================================================
   EXPANDED STATE — chat panel
   ======================================================================== */
.tw-expanded {
  width: var(--tw-expanded-width);
  height: var(--tw-expanded-height);
  max-height: calc(100vh - 48px);
  background: var(--tw-ink-elev);
  border: 1px solid var(--tw-rule);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
              0 8px 18px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
  transform-origin: bottom right;
  animation: tw-expand 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tw-expand {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Header bar */
.tw-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tw-rule);
  background: var(--tw-ink-deep);
  flex-shrink: 0;
}

.tw-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tw-ink-soft) 0%, var(--tw-ink-deep) 100%);
  border: 2px solid var(--tw-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--tw-quiet);
  letter-spacing: 0.08em;
}

.tw-header-avatar-pulse {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tw-success);
  border: 2px solid var(--tw-ink-deep);
}

.tw-header-info { flex: 1; min-width: 0; }

.tw-header-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--tw-cream);
  margin: 0 0 2px;
}

.tw-header-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--tw-success);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tw-close {
  background: transparent;
  border: none;
  color: var(--tw-cream-soft);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: background 0.12s;
}

.tw-close:hover { background: var(--tw-ink-soft); }

/* Conversation area — scrollable */
.tw-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.tw-conversation::-webkit-scrollbar { width: 6px; }
.tw-conversation::-webkit-scrollbar-track { background: transparent; }
.tw-conversation::-webkit-scrollbar-thumb {
  background: var(--tw-rule);
  border-radius: 3px;
}

.tw-msg { display: flex; gap: 8px; align-items: flex-start; }

.tw-msg-tempo .tw-msg-bubble {
  background: var(--tw-ink-soft);
  color: var(--tw-cream);
  padding: 10px 14px;
  border-radius: 12px 12px 12px 2px;
  max-width: 85%;
  font-size: 13px;
  line-height: 1.55;
}

.tw-msg-user { justify-content: flex-end; }
.tw-msg-user .tw-msg-bubble {
  background: var(--tw-gold);
  color: var(--tw-ink);
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  max-width: 85%;
  font-size: 13px;
  line-height: 1.55;
}

.tw-msg-ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--tw-quiet);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
  display: block;
}

.tw-typing { display: inline-flex; gap: 3px; padding: 3px 0; }
.tw-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--tw-quiet);
  animation: tw-typing 1.4s infinite;
}
.tw-typing span:nth-child(2) { animation-delay: 0.2s; }
.tw-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes tw-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Input row */
.tw-input-row {
  background: var(--tw-ink-deep);
  border-top: 1px solid var(--tw-rule);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tw-input {
  flex: 1;
  background: var(--tw-ink-elev);
  border: 1px solid var(--tw-rule);
  color: var(--tw-cream);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 6px;
  outline: none;
  min-width: 0;
}
.tw-input::placeholder { color: var(--tw-quiet); }
.tw-input:focus { border-color: var(--tw-gold); }

.tw-send {
  background: var(--tw-gold);
  color: var(--tw-ink);
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.tw-send:hover { background: var(--tw-gold-warm); }
.tw-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Footer meta */
.tw-meta {
  padding: 8px 16px 12px;
  background: var(--tw-ink-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--tw-quiet);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--tw-rule);
  flex-shrink: 0;
}

/* ========================================================================
   MOBILE — full-width on narrow viewports
   ======================================================================== */
@media (max-width: 600px) {
  .tempo-widget-root {
    --tw-bottom: 16px;
    --tw-right: 16px;
    --tw-expanded-width: calc(100vw - 32px);
    --tw-expanded-height: calc(100vh - 100px);
  }
  .tw-expanded {
    border-radius: 12px;
  }
}