/**
 * Automation Nation — Integration Styles
 * Auth modal, Pipeline chat widget, floating trigger
 */

/* ═══════════════════════════════
   AUTH MODAL
   ═══════════════════════════════ */
#auth-modal { display:none; position:fixed; inset:0; z-index:9999; }
#auth-modal.open { display:flex; align-items:center; justify-content:center; }
.auth-overlay { position:absolute; inset:0; background:rgba(6,15,31,.7); backdrop-filter:blur(8px); }
.auth-card {
  position:relative; z-index:1; width:100%; max-width:420px; margin:24px;
  padding:40px 32px; border-radius:24px;
  background:#0B1D3A; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.auth-close {
  position:absolute; top:16px; right:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; width:32px; height:32px; color:#8A94A8; font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-tabs { display:flex; gap:4px; margin-bottom:24px; background:rgba(255,255,255,.04); border-radius:10px; padding:3px; }
.auth-tab {
  flex:1; padding:10px; border:none; border-radius:8px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  color:#8A94A8; background:transparent; transition:all .25s;
}
.auth-tab.active { background:#C8102E; color:white; box-shadow:0 2px 10px rgba(200,16,46,.3); }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.auth-input {
  padding:12px 16px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);
  color:white; font-family:'DM Sans',sans-serif; font-size:.9rem; outline:none;
  transition:border-color .2s;
}
.auth-input:focus { border-color:rgba(200,16,46,.4); }
.auth-input::placeholder { color:rgba(255,255,255,.3); }
.auth-submit {
  padding:14px; border-radius:10px; border:none; cursor:pointer;
  background:#C8102E; color:white; font-family:'DM Sans',sans-serif;
  font-size:.92rem; font-weight:700; box-shadow:0 2px 12px rgba(200,16,46,.3);
  transition:all .25s;
}
.auth-submit:hover { background:#E01535; transform:translateY(-1px); }
.auth-magic {
  padding:12px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08); background:transparent;
  color:#5B8CF5; font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:600;
  transition:all .25s;
}
.auth-magic:hover { background:rgba(59,111,224,.08); }
.auth-message { text-align:center; font-size:.85rem; min-height:20px; margin-top:8px; font-weight:600; }
.auth-divider {
  display:flex; align-items:center; gap:12px; margin:20px 0;
  color:#8A94A8; font-size:.78rem;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,.06);
}
.auth-google {
  width:100%; padding:12px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);
  color:white; font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .25s;
}
.auth-google:hover { background:rgba(255,255,255,.08); }

/* ═══════════════════════════════
   PIPELINE CHAT WIDGET
   ═══════════════════════════════ */
#pipeline-widget { display:none; position:fixed; inset:0; z-index:9998; }
#pipeline-widget.open { display:flex; align-items:center; justify-content:center; }
@media(max-width:520px) {
  #pipeline-widget.open { align-items:flex-end; }
  .pw-chat { border-radius:20px 20px 0 0 !important; max-height:92vh !important; }
}
.pw-overlay { position:absolute; inset:0; background:rgba(6,15,31,.6); backdrop-filter:blur(6px); }
.pw-chat {
  position:relative; z-index:1; width:100%; max-width:460px; margin:24px;
  height:min(700px,88vh); border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column;
  background:#0B1D3A; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 120px rgba(200,16,46,.06);
}
.pw-header {
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#0E2444,#132B52);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pw-header-left { display:flex; align-items:center; gap:12px; }
.pw-avatar {
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,#C8102E,#E83050);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:900; color:white;
  box-shadow:0 2px 10px rgba(200,16,46,.3);
}
.pw-header-title { font-size:.9rem; font-weight:700; color:white; }
.pw-header-status { display:flex; align-items:center; gap:5px; font-size:.7rem; color:#4ADE80; font-weight:600; }
.pw-status-dot {
  width:6px; height:6px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 6px rgba(74,222,128,.5); animation:pulse-dot 2s infinite;
}
.pw-close {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; width:32px; height:32px; color:#8A94A8; font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.pw-progress { height:3px; background:rgba(255,255,255,.04); }
.pw-progress-fill {
  height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,#C8102E,#C9A84C);
  transition:width .8s cubic-bezier(.16,1,.3,1);
}
.pw-messages {
  flex:1; overflow-y:auto; padding:20px 16px;
  display:flex; flex-direction:column; gap:10px;
}

/* Welcome state */
.pw-welcome {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:14px; padding:20px;
}
.pw-welcome-icon {
  width:64px; height:64px; border-radius:20px;
  background:linear-gradient(135deg,#C8102E,#E83050);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 4px 24px rgba(200,16,46,.3);
}
.pw-welcome-title { font-size:1rem; font-weight:700; color:white; }
.pw-welcome-text { font-size:.85rem; color:#8A94A8; line-height:1.5; max-width:300px; }
.pw-start-btn {
  margin-top:8px; padding:12px 32px; border-radius:10px; border:none; cursor:pointer;
  background:#C8102E; color:white; font-family:'DM Sans',sans-serif;
  font-size:.9rem; font-weight:700; box-shadow:0 2px 16px rgba(200,16,46,.3);
  transition:all .25s;
}
.pw-start-btn:hover { background:#E01535; transform:translateY(-2px); }

/* Messages */
.pw-msg { display:flex; animation:msgSlide .3s ease-out; }
.pw-msg-user { justify-content:flex-end; }
.pw-msg-bot { justify-content:flex-start; }
.pw-bubble {
  max-width:82%; padding:12px 16px; font-size:.88rem;
  line-height:1.55; white-space:pre-wrap; word-wrap:break-word;
}
.pw-bubble-user {
  background:linear-gradient(135deg,#C8102E,#D42040); color:white;
  border-radius:16px 16px 4px 16px;
}
.pw-bubble-bot {
  background:rgba(255,255,255,.06); color:white;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px 16px 16px 4px;
}

/* Typing dots */
.pw-typing-dots { display:flex; gap:4px; padding:14px 18px; }
.pw-typing-dots span {
  width:7px; height:7px; border-radius:50%; background:#8A94A8;
  animation:typingBounce 1.2s ease-in-out infinite;
}
.pw-typing-dots span:nth-child(2) { animation-delay:.2s; }
.pw-typing-dots span:nth-child(3) { animation-delay:.4s; }

/* Action state */
.pw-action-state {
  padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid;
  display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:600;
}
.pw-spinner {
  width:18px; height:18px; border:2px solid; border-top-color:transparent;
  border-radius:50%; animation:spin .8s linear infinite;
}

/* Input area */
.pw-input-area {
  padding:12px 16px; border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.2);
}
.pw-input-row { display:flex; gap:8px; }
.pw-input {
  flex:1; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);
  color:white; font-family:'DM Sans',sans-serif; font-size:.88rem; outline:none;
}
.pw-input::placeholder { color:rgba(255,255,255,.3); }
.pw-send {
  width:44px; height:44px; border-radius:12px; border:none; cursor:pointer;
  background:#C8102E; color:white; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(200,16,46,.3); transition:all .2s;
}
.pw-send:hover { background:#E01535; }
.pw-powered {
  text-align:center; font-size:.65rem; color:rgba(255,255,255,.2); margin-top:8px;
}

/* ═══════════════════════════════
   FLOATING TRIGGER BUTTON
   ═══════════════════════════════ */
#pw-trigger {
  position:fixed; bottom:24px; right:24px; z-index:9990;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,#C8102E,#E83050); color:white;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(200,16,46,.4), 0 0 60px rgba(200,16,46,.1);
  transition:all .3s; animation:triggerPulse 3s ease-in-out infinite;
}
#pw-trigger:hover { transform:scale(1.1); box-shadow:0 8px 32px rgba(200,16,46,.5); }

/* ═══════════════════════════════
   ANIMATIONS
   ═══════════════════════════════ */
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes typingBounce { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }
@keyframes msgSlide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes triggerPulse { 0%,100%{box-shadow:0 4px 24px rgba(200,16,46,.4)} 50%{box-shadow:0 4px 40px rgba(200,16,46,.6)} }