/* ============================================================
   Cogentia NOVA Widget — Stylesheet v1.2 (text-only edition)
   Brand: bg #080c12 · accent #4a9eff · font DM Sans
   All class names prefixed with cg- to avoid host-page conflicts
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --cg-bg:           #080c12;
  --cg-surface:      #0e1620;
  --cg-surface2:     #162130;
  --cg-accent:       #4a9eff;
  --cg-accent-2:     #6ab4ff;
  --cg-accent-glow:  rgba(74, 158, 255, 0.35);
  --cg-accent-dim:   rgba(74, 158, 255, 0.12);
  --cg-text:         #f0f4f8;
  --cg-text-2:       #6a84a0;
  --cg-border:       rgba(255, 255, 255, 0.07);
  --cg-radius:       18px;
  --cg-panel-w:      370px;
  --cg-panel-h:      600px;
  --cg-hero-h:       140px;
  --cg-z:            2147483647;
}

/* ── Floating Trigger Button ───────────────────────────────── */
#cogentia-widget-btn {
  position:    fixed;
  bottom:      24px;
  right:       24px;
  z-index:     var(--cg-z);
  cursor:      pointer;
  user-select: none;
  outline:     none;
}

.cg-btn-inner {
  display:       flex;
  align-items:   center;
  gap:           9px;
  padding:       11px 20px;
  background:    var(--cg-accent);
  border-radius: 50px;
  color:         #fff;
  font-family:   'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:     13.5px;
  font-weight:   600;
  letter-spacing: 0.015em;
  box-shadow:    0 4px 20px var(--cg-accent-glow);
  transition:    transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space:   nowrap;
}

#cogentia-widget-btn:hover .cg-btn-inner,
#cogentia-widget-btn:focus-visible .cg-btn-inner {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px var(--cg-accent-glow);
}

#cogentia-widget-btn.cg-btn-open .cg-btn-inner {
  background: var(--cg-surface2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.cg-notif-dot {
  position:      absolute;
  top:           2px;
  right:         2px;
  width:         10px;
  height:        10px;
  background:    #f43f5e;
  border-radius: 50%;
  border:        2px solid #fff;
  display:       none;
}

/* ── Panel ─────────────────────────────────────────────────── */
#cogentia-widget-panel {
  position:       fixed;
  bottom:         84px;
  right:          24px;
  width:          var(--cg-panel-w);
  height:         var(--cg-panel-h);
  display:        flex;
  flex-direction: column;
  background:     var(--cg-bg);
  border-radius:  var(--cg-radius);
  overflow:       hidden;
  z-index:        var(--cg-z);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.65),
    0 0 0 1px var(--cg-border);
  transform:      scale(0.94) translateY(16px);
  opacity:        0;
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.2s  ease;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

#cogentia-widget-panel.cg-panel-open {
  transform:      scale(1) translateY(0);
  opacity:        1;
  pointer-events: all;
}

/* ── Header ────────────────────────────────────────────────── */
.cg-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         13px 15px;
  background:      var(--cg-surface);
  border-bottom:   1px solid var(--cg-border);
  flex-shrink:     0;
}

.cg-header-left {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.cg-header-name {
  font-size:   14px;
  font-weight: 700;
  color:       var(--cg-text);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.cg-header-sub {
  font-size:  10.5px;
  color:      var(--cg-text-2);
  margin-top: 1px;
}

/* Status indicator dot */
.cg-status-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--cg-text-2);
  flex-shrink:   0;
  transition:    background 0.3s ease, box-shadow 0.3s ease;
}

.cg-status-dot.cg-status-online {
  background:  #22c55e;
  box-shadow:  0 0 6px rgba(34,197,94,0.6);
  animation:   cg-online-pulse 2.5s ease-in-out infinite;
}

@keyframes cg-online-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.5); }
  50%       { box-shadow: 0 0 10px rgba(34,197,94,0.9); }
}

.cg-close-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         7px;
  border:          none;
  border-radius:   8px;
  background:      none;
  color:           var(--cg-text-2);
  cursor:          pointer;
  transition:      background 0.15s ease, color 0.15s ease;
  flex-shrink:     0;
}

.cg-close-btn:hover {
  background: var(--cg-border);
  color:      var(--cg-text);
}

/* ── Hero Section (replaces video area) ────────────────────── */
.cg-hero {
  position:    relative;
  width:       100%;
  height:      var(--cg-hero-h);
  flex-shrink: 0;
  overflow:    hidden;
  display:     flex;
  align-items: center;
  justify-content: center;
}

/* Animated gradient background */
.cg-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(74,158,255,0.25), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(106,180,255,0.18), transparent 50%),
    linear-gradient(135deg, #0e1620 0%, #162130 100%);
  animation: cg-hero-drift 12s ease-in-out infinite alternate;
}

@keyframes cg-hero-drift {
  0%   { background-position: 0% 50%, 100% 50%, 0 0; }
  100% { background-position: 30% 70%, 70% 30%, 0 0; }
}

/* Subtle grid overlay for texture */
.cg-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.cg-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cg-hero-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cg-accent) 0%, var(--cg-accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 6px 22px var(--cg-accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.25);
  margin-bottom: 2px;
  animation: cg-avatar-breathe 3.5s ease-in-out infinite;
}

@keyframes cg-avatar-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 22px var(--cg-accent-glow); }
  50%       { transform: scale(1.04); box-shadow: 0 10px 30px var(--cg-accent-glow); }
}

.cg-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cg-text);
  letter-spacing: 0.15em;
}

.cg-hero-tagline {
  font-size: 11px;
  color: var(--cg-text-2);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ── Chat History ──────────────────────────────────────────── */
.cg-chat {
  flex:        1;
  overflow-y:  auto;
  padding:     14px 13px;
  display:     flex;
  flex-direction: column;
  gap:         8px;
  min-height:  0;
  scrollbar-width: thin;
  scrollbar-color: var(--cg-border) transparent;
}

.cg-chat::-webkit-scrollbar         { width: 3px; }
.cg-chat::-webkit-scrollbar-track   { background: transparent; }
.cg-chat::-webkit-scrollbar-thumb   { background: var(--cg-border); border-radius: 3px; }

.cg-msg {
  display:   flex;
  flex-direction: column;
  gap:       3px;
  max-width: 92%;
  animation: cg-msg-in 0.22s ease;
}

@keyframes cg-msg-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cg-msg-body {
  font-size:   13px;
  line-height: 1.55;
  padding:     9px 13px;
  border-radius: 13px;
  word-break:  break-word;
}

/* NOVA messages — left aligned */
.cg-msg-assistant { align-self: flex-start; }

.cg-msg-assistant .cg-msg-body {
  background:                 var(--cg-surface2);
  color:                      var(--cg-text);
  border-bottom-left-radius:  4px;
}

.cg-msg-label {
  font-size:      9.5px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--cg-accent);
  padding-left:   4px;
}

/* User messages — right aligned */
.cg-msg-user { align-self: flex-end; }

.cg-msg-user .cg-msg-body {
  background:                  var(--cg-accent-dim);
  color:                       var(--cg-text);
  border:                      1px solid rgba(74,158,255,0.18);
  border-bottom-right-radius:  4px;
}

/* System messages — centered */
.cg-msg-system { align-self: center; }

.cg-msg-system .cg-msg-body {
  background: none;
  font-size:  11px;
  color:      var(--cg-text-2);
  text-align: center;
  padding:    2px 0;
}

/* Typing indicator — three animated dots */
.cg-typing .cg-msg-body {
  padding: 12px 14px;
}

.cg-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cg-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cg-text-2);
  animation: cg-typing-bounce 1.2s infinite ease-in-out;
}

.cg-typing-dots span:nth-child(1) { animation-delay: 0s; }
.cg-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.cg-typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes cg-typing-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Calendly CTA ──────────────────────────────────────────── */
.cg-calendly-wrap {
  padding:     8px 12px 0;
  flex-shrink: 0;
}

.cg-calendly-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  width:           100%;
  padding:         10px 16px;
  background:      linear-gradient(135deg, var(--cg-accent) 0%, var(--cg-accent-2) 100%);
  color:           #fff;
  font-family:     'DM Sans', sans-serif;
  font-size:       13px;
  font-weight:     600;
  border-radius:   10px;
  text-decoration: none;
  letter-spacing:  0.01em;
  transition:      opacity 0.15s ease, transform 0.15s ease;
  box-shadow:      0 4px 16px var(--cg-accent-glow);
}

.cg-calendly-btn:hover {
  opacity:   0.9;
  transform: translateY(-1px);
}

/* ── Input Row ─────────────────────────────────────────────── */
.cg-input-row {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       9px 10px;
  background:    var(--cg-surface);
  border-top:    1px solid var(--cg-border);
  flex-shrink:   0;
}

.cg-input {
  flex:          1;
  min-width:     0;
  padding:       8px 11px;
  background:    var(--cg-bg);
  border:        1px solid var(--cg-border);
  border-radius: 9px;
  color:         var(--cg-text);
  font-family:   'DM Sans', sans-serif;
  font-size:     13px;
  outline:       none;
  transition:    border-color 0.15s ease;
}

.cg-input::placeholder { color: var(--cg-text-2); }

.cg-input:focus {
  border-color: rgba(74,158,255,0.45);
}

.cg-input:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}

.cg-icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  padding:         7px;
  border:          none;
  border-radius:   8px;
  background:      none;
  color:           var(--cg-text-2);
  cursor:          pointer;
  transition:      background 0.15s ease, color 0.15s ease;
}

.cg-icon-btn:hover:not(:disabled) {
  background: var(--cg-border);
  color:      var(--cg-text);
}

.cg-icon-btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

.cg-send-btn {
  background: var(--cg-accent);
  color:      #fff;
  padding:    8px 10px;
  border-radius: 9px;
}

.cg-send-btn:hover:not(:disabled) {
  background: var(--cg-accent-2);
}

.cg-send-btn:disabled {
  background: var(--cg-surface2);
  color:      var(--cg-text-2);
}

.cg-mic-on {
  color:      #f43f5e !important;
  background: rgba(244,63,94,0.1) !important;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --cg-panel-w: calc(100vw - 20px);
    --cg-panel-h: 78vh;
    --cg-hero-h:  120px;
  }

  #cogentia-widget-panel {
    bottom: 78px;
    right:  10px;
    left:   10px;
  }

  #cogentia-widget-btn {
    bottom: 16px;
    right:  16px;
  }

  .cg-btn-inner span { display: none; }
  .cg-btn-inner { padding: 12px; border-radius: 50%; }
}