/* ═══════════════════════════════════════════════════════════════════════════
   NOTEBOOKLM CUSTOMER SUPPORT CHATBOT — Premium Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  --clr-bg:          #0d0f17;
  --clr-surface:     #13162080;
  --clr-surface-2:   #1c2033;
  --clr-surface-3:   #242840;
  --clr-border:      rgba(255,255,255,.08);
  --clr-border-2:    rgba(255,255,255,.14);

  --clr-primary:     #6c63ff;
  --clr-primary-2:   #8b83ff;
  --clr-primary-glow:rgba(108,99,255,.35);

  --clr-accent:      #00d4aa;
  --clr-accent-2:    #00f0c0;
  --clr-accent-glow: rgba(0,212,170,.25);

  --clr-danger:      #ff5b6b;
  --clr-warning:     #ffb347;
  --clr-success:     #4ade80;

  --clr-text-1:      #f0f2ff;
  --clr-text-2:      #a8adc8;
  --clr-text-3:      #606480;

  --font-main: 'Heebo', 'Inter', system-ui, sans-serif;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;

  --shadow-card: 0 4px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
  --shadow-glow: 0 0 40px var(--clr-primary-glow);

  --sidebar-w: 280px;
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-main);
  background: var(--clr-bg);
  color: var(--clr-text-1);
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { cursor:pointer; border:none; background:none; color:inherit; font:inherit; }
textarea { resize:none; font:inherit; }
svg { display:block; }

/* ── Animated Background Orbs ────────────────────────────────────────────── */
.bg-orbs {
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.orb {
  position:absolute; border-radius:50%; filter:blur(100px); opacity:.18;
  animation: float 18s ease-in-out infinite;
}
.orb-1 {
  width:600px; height:600px;
  background: radial-gradient(circle, #6c63ff, transparent 70%);
  top:-200px; left:-100px;
  animation-delay: 0s;
}
.orb-2 {
  width:500px; height:500px;
  background: radial-gradient(circle, #00d4aa, transparent 70%);
  bottom:-150px; right:-100px;
  animation-delay: -6s;
}
.orb-3 {
  width:400px; height:400px;
  background: radial-gradient(circle, #b26bff, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation-delay: -12s;
}
@keyframes float {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(40px,-30px) scale(1.05); }
  66%      { transform:translate(-30px,40px) scale(.95); }
}

/* ── App Shell ───────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

/* ═══ Sidebar ════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100dvh;
  background: rgba(13,15,23,.92);
  border-left: 1px solid var(--clr-border);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  transition: transform var(--transition);
  position: relative;
  z-index: 10;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 16px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 4px;
}

.logo { display:flex; align-items:center; gap:10px; }
.logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--clr-primary), #a855f7);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  box-shadow: 0 0 20px var(--clr-primary-glow);
}
.logo-icon svg { width:20px; height:20px; color:#fff; }
.logo-title { font-size:.95rem; font-weight:700; color:var(--clr-text-1); }
.logo-sub   { font-size:.68rem; color:var(--clr-text-3); margin-top:1px; }

.sidebar-toggle {
  width:32px; height:32px;
  border-radius:var(--radius-sm);
  display:grid; place-items:center;
  color:var(--clr-text-2);
  transition: background var(--transition);
}
.sidebar-toggle:hover { background:rgba(255,255,255,.08); }
.sidebar-toggle svg { width:18px; height:18px; }

.sidebar-section { padding: 4px 0; }
.sidebar-label {
  font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--clr-text-3);
  padding:0 8px 8px;
}

/* New Chat Button */
.new-chat-btn {
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  border-radius:var(--radius-md);
  background: linear-gradient(135deg, var(--clr-primary), #a855f7);
  color:#fff; font-size:.88rem; font-weight:600;
  box-shadow: 0 4px 20px var(--clr-primary-glow);
  transition: all var(--transition);
  margin-bottom:12px;
}
.new-chat-btn:hover {
  transform:translateY(-2px);
  box-shadow: 0 6px 28px var(--clr-primary-glow);
}
.new-chat-btn svg { width:18px; height:18px; }

/* Quick Questions */
.quick-questions { display:flex; flex-direction:column; gap:4px; }
.quick-q {
  padding:9px 12px;
  border-radius:var(--radius-sm);
  font-size:.82rem; color:var(--clr-text-2);
  border:1px solid var(--clr-border);
  cursor:pointer;
  transition: all var(--transition);
  line-height:1.4;
  text-align:right;
}
.quick-q:hover {
  background:rgba(108,99,255,.15);
  border-color:var(--clr-primary);
  color:var(--clr-text-1);
  transform:translateX(-2px);
}

/* Status Area */
.status-area { margin-top:auto; padding:8px 4px; }
.status-badge {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  background:var(--clr-surface-2);
  border:1px solid var(--clr-border);
  font-size:.78rem; color:var(--clr-text-2);
}
.status-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--clr-text-3);
  flex-shrink:0;
  transition:background var(--transition);
}
.status-dot.online  { background:var(--clr-success); box-shadow:0 0 8px var(--clr-success); }
.status-dot.offline { background:var(--clr-danger); }
.status-dot.checking { animation:pulse-dot 1.2s ease-in-out infinite; background:var(--clr-warning); }
@keyframes pulse-dot {
  0%,100% { opacity:1; }
  50%      { opacity:.3; }
}
.status-detail { font-size:.72rem; color:var(--clr-text-3); padding:4px 12px 0; }

.setup-link {
  display:flex; align-items:center; gap:6px;
  font-size:.75rem; color:var(--clr-text-3);
  padding:6px 12px; margin-top:4px;
  border-radius:var(--radius-sm);
  transition:all var(--transition);
  text-decoration:none;
}
.setup-link:hover { color:var(--clr-primary-2); background:rgba(108,99,255,.1); }

/* ═══ Chat Area ══════════════════════════════════════════════════════════════ */
.chat-area {
  flex:1;
  display:flex; flex-direction:column;
  height:100dvh;
  overflow:hidden;
  position:relative;
}

/* ── Header ── */
.chat-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px;
  background:rgba(13,15,23,.8);
  border-bottom:1px solid var(--clr-border);
  backdrop-filter:blur(20px);
  flex-shrink:0;
}
.menu-btn {
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  display:grid; place-items:center;
  color:var(--clr-text-2);
  transition:background var(--transition);
  display:none;
}
.menu-btn:hover { background:rgba(255,255,255,.08); }
.menu-btn svg { width:20px; height:20px; }
.header-info { flex:1; }
.header-title { font-size:1rem; font-weight:700; color:var(--clr-text-1); }
.header-sub   { font-size:.73rem; color:var(--clr-text-3); margin-top:2px; }

.header-actions { display:flex; gap:6px; }
.icon-btn {
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  display:grid; place-items:center;
  color:var(--clr-text-2);
  transition:all var(--transition);
}
.icon-btn:hover { background:rgba(255,255,255,.08); color:var(--clr-danger); }
.icon-btn svg { width:18px; height:18px; }

/* ── Messages ── */
.messages-container {
  flex:1;
  overflow-y:auto;
  padding:24px 20px 16px;
  display:flex; flex-direction:column; gap:20px;
  scroll-behavior:smooth;
}
.messages-container::-webkit-scrollbar { width:4px; }
.messages-container::-webkit-scrollbar-track { background:transparent; }
.messages-container::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.12);
  border-radius:99px;
}

/* Welcome Screen */
.welcome-screen {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  flex:1; gap:16px;
  padding:40px 20px;
  animation: fadeInUp .6s ease both;
}
.welcome-avatar {
  width:80px; height:80px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--clr-primary), #a855f7);
  display:grid; place-items:center;
  box-shadow: 0 0 40px var(--clr-primary-glow);
  animation: avatarPulse 3s ease-in-out infinite;
}
.welcome-avatar svg { width:40px; height:40px; color:#fff; }
@keyframes avatarPulse {
  0%,100% { box-shadow:0 0 40px var(--clr-primary-glow); }
  50%      { box-shadow:0 0 70px var(--clr-primary-glow); }
}
.welcome-title { font-size:1.5rem; font-weight:700; color:var(--clr-text-1); }
.welcome-sub   { font-size:.9rem; color:var(--clr-text-2); max-width:380px; line-height:1.6; }

.welcome-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
.chip {
  padding:8px 16px;
  border-radius:99px;
  border:1px solid var(--clr-border-2);
  background:rgba(255,255,255,.04);
  font-size:.82rem; color:var(--clr-text-2);
  cursor:pointer;
  transition:all var(--transition);
}
.chip:hover {
  background:rgba(108,99,255,.2);
  border-color:var(--clr-primary);
  color:var(--clr-text-1);
  transform:translateY(-2px);
}

/* ── Message Bubbles ── */
.message {
  display:flex; align-items:flex-end; gap:10px;
  animation: fadeInUp .35s ease both;
  max-width:100%;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* User messages */
.message-user {
  flex-direction:column; align-items:flex-end;
}
.message-user .msg-bubble {
  background:linear-gradient(135deg, var(--clr-primary), #a855f7);
  color:#fff;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  padding:13px 17px;
  max-width:72%;
  box-shadow: 0 4px 20px var(--clr-primary-glow);
  position:relative;
}
.message-user .msg-meta {
  padding-left:4px; padding-right:4px;
  font-size:.71rem; color:var(--clr-text-3);
}

/* Bot messages */
.message-bot {
  flex-direction:row; align-items:flex-start;
}
.msg-avatar {
  width:34px; height:34px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface-2));
  border:1px solid var(--clr-border-2);
  display:grid; place-items:center;
}
.msg-avatar svg { width:18px; height:18px; color:var(--clr-primary-2); }
.msg-content { display:flex; flex-direction:column; gap:4px; max-width:78%; }
.message-bot .msg-bubble {
  background: var(--clr-surface-2);
  border:1px solid var(--clr-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  padding:13px 17px;
  box-shadow: var(--shadow-card);
}
.message-bot .msg-meta {
  display:flex; align-items:center; gap:10px;
  font-size:.71rem; color:var(--clr-text-3);
  padding:0 4px;
}

/* Shared bubble text */
.msg-text {
  font-size:.91rem; line-height:1.65;
  white-space:pre-wrap; word-break:break-word;
}

/* Sources */
.msg-sources {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:6px 4px 2px;
}
.source-tag {
  font-size:.72rem; padding:3px 10px;
  border-radius:99px;
  background:rgba(0,212,170,.12);
  border:1px solid rgba(0,212,170,.3);
  color:var(--clr-accent-2);
}

/* Copy button */
.msg-copy {
  opacity:.4; transition:opacity var(--transition);
  padding:2px;
}
.msg-copy:hover { opacity:1; }
.msg-copy svg { width:14px; height:14px; }
.msg-copy.copied { color:var(--clr-success); opacity:1; }

/* Error message */
.message-error .msg-bubble {
  background:rgba(255,91,107,.12);
  border:1px solid rgba(255,91,107,.3);
  border-radius:var(--radius-md);
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  color:var(--clr-danger);
}
.message-error svg { width:18px; height:18px; flex-shrink:0; }

/* ── Typing Indicator ── */
.typing-indicator {
  display:none; align-items:center; gap:10px;
  padding:0 20px 8px;
  animation:fadeInUp .3s ease both;
}
.typing-indicator.visible { display:flex; }
.typing-avatar {
  width:34px; height:34px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface-2));
  border:1px solid var(--clr-border-2);
  display:grid; place-items:center;
}
.typing-avatar svg { width:18px; height:18px; color:var(--clr-primary-2); }
.typing-dots {
  display:flex; align-items:center; gap:5px;
  padding:12px 16px;
  background:var(--clr-surface-2);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}
.typing-dots span {
  width:7px; height:7px; border-radius:50%;
  background:var(--clr-text-3);
  animation:typingBounce 1.3s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:.18s; }
.typing-dots span:nth-child(3) { animation-delay:.36s; }
@keyframes typingBounce {
  0%,60%,100% { transform:translateY(0); background:var(--clr-text-3); }
  30%          { transform:translateY(-8px); background:var(--clr-primary-2); }
}

/* ── Input Area ── */
.input-wrapper {
  padding:12px 20px 16px;
  background:rgba(13,15,23,.85);
  border-top:1px solid var(--clr-border);
  backdrop-filter:blur(20px);
  flex-shrink:0;
}
.input-container {
  display:flex; align-items:flex-end; gap:10px;
  background:var(--clr-surface-2);
  border:1.5px solid var(--clr-border);
  border-radius:var(--radius-xl);
  padding:10px 10px 10px 16px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.input-container:focus-within {
  border-color:var(--clr-primary);
  box-shadow:0 0 0 3px var(--clr-primary-glow);
}
.message-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--clr-text-1);
  font-size:.92rem; line-height:1.55;
  max-height:160px; overflow-y:auto;
  direction:rtl;
}
.message-input::placeholder { color:var(--clr-text-3); }
.message-input::-webkit-scrollbar { width:3px; }
.message-input::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:99px; }

.input-actions { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.char-count { font-size:.67rem; color:var(--clr-text-3); white-space:nowrap; }

.send-btn {
  width:40px; height:40px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--clr-primary), #a855f7);
  display:grid; place-items:center;
  box-shadow:0 4px 16px var(--clr-primary-glow);
  transition:all var(--transition);
  flex-shrink:0;
}
.send-btn:not(:disabled):hover {
  transform:scale(1.1);
  box-shadow:0 6px 24px var(--clr-primary-glow);
}
.send-btn:disabled {
  background:var(--clr-surface-3);
  box-shadow:none;
  opacity:.5;
  cursor:not-allowed;
}
.send-btn svg { width:20px; height:20px; color:#fff; }

.input-disclaimer {
  font-size:.7rem; color:var(--clr-text-3);
  text-align:center; margin-top:8px;
}

/* ═══ Mobile ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    position:fixed; top:0; right:0; bottom:0;
    transform:translateX(100%);
    z-index:100;
    box-shadow:-4px 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open { transform:translateX(0); }
  .menu-btn { display:grid; }
  .sidebar-toggle { display:grid; }

  .message-user .msg-bubble,
  .msg-content { max-width:90%; }

  .welcome-title { font-size:1.2rem; }
  .input-wrapper { padding:10px 12px 14px; }
}
@media (min-width: 769px) {
  .sidebar-toggle { display:none; }
  .menu-btn { display:none; }
}

/* ═══ Utilities ═══════════════════════════════════════════════════════════ */
.hidden { display:none !important; }
.fade-in { animation:fadeInUp .4s ease both; }

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK BUTTONS (👍/👎)
   ═══════════════════════════════════════════════════════════════════════════ */
.msg-feedback {
  display: inline-flex;
  gap: 4px;
  margin-inline-start: auto;
  margin-inline-end: 8px;
}

.fb-btn {
  background: transparent;
  border: 1px solid var(--clr-border);
  color: var(--clr-text-3);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
  padding: 0;
}
.fb-btn svg { width: 14px; height: 14px; }

.fb-btn:hover {
  border-color: var(--clr-border-2);
  color: var(--clr-text-1);
  transform: translateY(-1px);
}
.fb-up:hover    { color: var(--clr-success); border-color: var(--clr-success); }
.fb-down:hover  { color: var(--clr-danger);  border-color: var(--clr-danger);  }

.msg-feedback.thanked-up .fb-up,
.msg-feedback.thanked-down .fb-down {
  pointer-events: none;
  cursor: default;
}
.msg-feedback.thanked-up .fb-up {
  background: rgba(74, 222, 128, .14);
  border-color: var(--clr-success);
  color: var(--clr-success);
}
.msg-feedback.thanked-down .fb-down {
  background: rgba(255, 91, 107, .12);
  border-color: var(--clr-danger);
  color: var(--clr-danger);
}

/* Contributor tags (which NB answered) — slightly different from citation tags */
.source-tag.contrib-tag {
  background: rgba(108, 99, 255, .12);
  border-color: rgba(108, 99, 255, .35);
  color: var(--clr-primary-2);
  font-size: 0.75rem;
}