/* ═══════════════════════════════════════════════════
   CU BUDDY v3 — Dark Luxury Widget
   ID: #cu-buddy  |  Classes: .cub-*
   Obsidian · Dignity Gold · Ember
   EMPOWER 2CU theme match
   ═══════════════════════════════════════════════════ */

#cu-buddy {
  /* Design tokens */
  --cb-ink0: #060606;
  --cb-ink1: #0F0F0F;
  --cb-ink2: #171717;
  --cb-ink3: #202020;
  --cb-ink4: #2A2A2A;
  --cb-gold:    #C9A84C;
  --cb-gold-hi: #E2C06A;
  --cb-gold-lo: #9A7A30;
  --cb-gold-a:  rgba(201,168,76,.14);
  --cb-gold-b:  rgba(201,168,76,.26);
  --cb-ember:   #B85C1E;
  --cb-ember-hi:#D4712A;
  --cb-cream:   #F2EDE4;
  --cb-c70:     rgba(242,237,228,.70);
  --cb-c45:     rgba(242,237,228,.45);
  --cb-c20:     rgba(242,237,228,.20);
  --cb-c08:     rgba(242,237,228,.08);
  --cb-c04:     rgba(242,237,228,.04);
  --cb-border:  rgba(201,168,76,.14);
  --cb-border-s:rgba(242,237,228,.06);
  --cb-font-d: "Cormorant Garamond","Palatino Linotype",Georgia,serif;
  --cb-font-b: "DM Sans","Helvetica Neue",Arial,sans-serif;
  --cb-font-m: "DM Mono","SF Mono","Courier New",monospace;
  --cb-ease:   cubic-bezier(.16,1,.3,1);
  --cb-w: 360px;
  --cb-h: 520px;

  /* Positioning */
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9990;
  font-family: var(--cb-font-b);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#cu-buddy[data-position="bottom-left"] {
  right: auto;
  left: 28px;
}

/* ─── TOGGLE PILL ────────────────────────────────── */
.cub-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--cb-ink1);
  border: 1px solid var(--cb-border);
  border-radius: 40px;
  padding: 7px 14px 7px 8px;
  cursor: pointer;
  color: var(--cb-cream);
  box-shadow: 0 4px 24px rgba(0,0,0,.65), 0 0 0 0 rgba(201,168,76,0);
  transition: all 260ms var(--cb-ease);
  white-space: nowrap;
  min-width: 0;
}
.cub-toggle:hover {
  border-color: var(--cb-gold-b);
  box-shadow: 0 8px 36px rgba(0,0,0,.75), 0 0 0 3px rgba(201,168,76,.08);
  transform: translateY(-2px);
}
#cu-buddy:not(.cub-closed) .cub-toggle {
  border-radius: 12px 12px 0 0;
  border-bottom-color: var(--cb-ink2);
}

/* Avatar */
.cub-av {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cub-av svg { width: 30px; height: 30px; }

/* Title */
.cub-title {
  font-family: var(--cb-font-d);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: var(--cb-cream);
}
.cub-tm {
  font-family: var(--cb-font-m);
  font-size: 7px; font-weight: 400; font-style: normal;
  vertical-align: super; color: var(--cb-gold-lo); margin-left: 1px;
}

/* Online dot */
.cub-online {
  font-size: 8px; color: #3D9970; line-height: 1;
  animation: cub-pulse 2.4s ease-in-out infinite;
}
@keyframes cub-pulse { 0%,100%{opacity:1}50%{opacity:.25} }

/* Chevron */
.cub-chev {
  margin-left: 2px; color: var(--cb-c45);
  transition: transform 260ms var(--cb-ease);
  display: flex; align-items: center;
}
#cu-buddy:not(.cub-closed) .cub-chev { transform: rotate(180deg); }

/* ─── PANEL ──────────────────────────────────────── */
.cub-panel {
  position: absolute;
  bottom: calc(100% - 1px);
  right: 0;
  width: var(--cb-w);
  max-height: var(--cb-h);
  background: var(--cb-ink1);
  border: 1px solid var(--cb-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 48px rgba(0,0,0,.75), 0 -2px 16px rgba(0,0,0,.4);
  transform-origin: bottom right;
  animation: cub-open 280ms var(--cb-ease) both;
}
#cu-buddy[data-position="bottom-left"] .cub-panel {
  right: auto; left: 0;
  transform-origin: bottom left;
}
@keyframes cub-open {
  from { opacity:0; transform:scale(.92) translateY(12px); }
  to   { opacity:1; transform:scale(1)  translateY(0); }
}

/* Panel header accent line */
.cub-panel::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--cb-gold) 0%, var(--cb-ember) 100%);
  flex-shrink: 0;
}

/* ─── CHAT AREA ──────────────────────────────────── */
.cub-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-ink4) transparent;
}
.cub-chat::-webkit-scrollbar { width: 4px; }
.cub-chat::-webkit-scrollbar-thumb { background: var(--cb-ink4); border-radius: 2px; }

/* Messages */
.cub-msg { display: flex; gap: 8px; align-items: flex-end; }
.cub-bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.cub-bubble p { margin: 0; }
.cub-bubble p + p { margin-top: 6px; }
.cub-bubble strong { color: var(--cb-gold); }
.cub-bubble em { color: var(--cb-gold-hi); }
.cub-bubble a { color: var(--cb-ember-hi); text-decoration: underline; text-underline-offset: 2px; }

/* Bot messages */
.cub-bot .cub-bubble {
  background: var(--cb-ink2);
  border: 1px solid var(--cb-border-s);
  color: var(--cb-c70);
  border-bottom-left-radius: 3px;
}

/* User messages */
.cub-user { flex-direction: row-reverse; }
.cub-user .cub-bubble {
  background: linear-gradient(135deg, var(--cb-gold) 0%, var(--cb-gold-lo) 100%);
  color: var(--cb-ink0);
  font-weight: 500;
  border-bottom-right-radius: 3px;
}

/* Typing indicator */
.cub-typing .cub-bubble {
  background: var(--cb-ink2);
  border: 1px solid var(--cb-border-s);
  padding: 11px 14px;
}
.cub-dots { display: flex; gap: 4px; align-items: center; }
.cub-dots span {
  width: 5px; height: 5px; background: var(--cb-gold); border-radius: 50%;
  animation: cub-dot 1.2s ease-in-out infinite;
}
.cub-dots span:nth-child(2) { animation-delay: .2s; }
.cub-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cub-dot { 0%,80%,100%{transform:scale(.7);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* Admin notice */
.cub-notice {
  background: rgba(184,92,30,.12);
  border: 1px solid var(--cb-ember);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px; color: var(--cb-ember-hi);
}
.cub-notice a { color: var(--cb-ember-hi); text-decoration: underline; }

/* ─── SUGGESTION CHIPS ───────────────────────────── */
.cub-chips {
  padding: 0 12px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cub-chip {
  background: var(--cb-ink2);
  border: 1px solid var(--cb-border);
  border-radius: 20px;
  padding: 5px 11px;
  font-family: var(--cb-font-b);
  font-size: 11.5px; font-weight: 500;
  color: var(--cb-c70);
  cursor: pointer;
  transition: all 180ms var(--cb-ease);
  white-space: nowrap;
}
.cub-chip:hover {
  background: var(--cb-gold-a);
  border-color: var(--cb-gold-b);
  color: var(--cb-gold-hi);
  transform: translateY(-1px);
}
.cub-chip:active { transform: scale(.96); }

/* ─── INPUT ROW ──────────────────────────────────── */
.cub-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px;
  background: var(--cb-ink1);
}
.cub-input {
  flex: 1;
  background: var(--cb-ink2);
  border: 1px solid var(--cb-border-s);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--cb-font-b);
  font-size: 13.5px;
  color: var(--cb-cream);
  outline: none;
  transition: border-color 180ms;
  min-width: 0;
}
.cub-input::placeholder { color: var(--cb-c45); }
.cub-input:focus { border-color: var(--cb-gold-b); }

.cub-send {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--cb-gold);
  border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--cb-ink0);
  transition: all 180ms var(--cb-ease);
}
.cub-send:hover:not(:disabled) { background: var(--cb-gold-hi); transform: scale(1.06); }
.cub-send:disabled { background: var(--cb-ink3); color: var(--cb-c20); cursor: not-allowed; }
.cub-send svg { width: 16px; height: 16px; }

/* ─── FOOTER BAR ─────────────────────────────────── */
.cub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  border-top: 1px solid var(--cb-border-s);
  background: var(--cb-ink0);
}
.cub-popia {
  font-family: var(--cb-font-m);
  font-size: 10px; letter-spacing: .1em;
  color: rgba(61,153,112,.7); text-transform: uppercase;
}
.cub-pow {
  font-family: var(--cb-font-m);
  font-size: 10px; letter-spacing: .06em;
  color: var(--cb-c20);
}

/* ─── CLOSED STATE ───────────────────────────────── */
.cub-closed .cub-panel { display: none; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 480px) {
  #cu-buddy {
    bottom: 14px;
    right: 12px;
    --cb-w: calc(100vw - 24px);
  }
  #cu-buddy[data-position="bottom-left"] { right: auto; left: 12px; }
  .cub-panel { max-height: 72vh; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cub-panel { animation: none; }
  .cub-dots span { animation: none; }
  .cub-online { animation: none; }
}