:root {
  --bg: #0B0C0E;
  --bg-2: #0F1012;
  --bg-3: #151618;
  --accent: #8E7AEF;
  --text: #E5E7EB;
}
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--bg); }

h1,h2,h3 { font-family: 'Poppins', sans-serif; }
.input-dark { width:100%; padding:.75rem; border-radius:.75rem; background:#0F1012; border:1px solid rgba(255,255,255,0.1); color:#E5E7EB; margin-bottom:.5rem; }
.input-dark:focus { outline:none; border-color:var(--accent); }

.chat-messages { max-height: 22rem; overflow-y: auto; scroll-behavior: smooth; }
.chat-messages::-webkit-scrollbar { width:6px; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:6px; }

.gen-shimmer { position:absolute; inset:0; border-radius:1.5rem; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); transform:translateX(-100%); opacity:0; }
.generating .gen-shimmer { animation: shimmer 1.8s ease-in-out infinite; opacity:1; }
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

.typing { display:inline-flex; gap:6px; background:#151618; padding:.6rem .8rem; border-radius:1rem; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.dot { width:6px;height:6px;border-radius:9999px;background:#d1d5db;opacity:.4; }
.dot:nth-child(1){animation:pulse 1s infinite 0s}
.dot:nth-child(2){animation:pulse 1s infinite .15s}
.dot:nth-child(3){animation:pulse 1s infinite .3s}
@keyframes pulse{0%,80%,100%{transform:scale(1);opacity:.4;}40%{transform:scale(1.35);opacity:1;}}
.spin { width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}
/* Ensure dropdowns stay visible on hover */
.group:hover .group-hover\:block {
  display: block;
}

nav .group .group-hover\:block {
  pointer-events: auto;
}
/* ======= Dark Monochrome Theme (baseline-inspired) ======= */
:root{
  --bg:#0B0C0E; --bg2:#0F1012; --card:#151618; --ink:#E7E7EA;
  --muted:#9CA3AF; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --shadow:0 16px 40px rgba(0,0,0,.45);

  /* Gold palette for premium */
  --gold:#D4B359;
  --gold-2:#B7902E;
  --gold-glow:rgba(212,179,89,.25);
}

html,body{background:var(--bg);color:var(--ink);scroll-behavior:smooth;}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial}

/* ======= Reusable chips (filters) ======= */
.chip{
  padding:.48rem .8rem; border-radius:9999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font-size:.92rem; line-height:1; color:#E5E7EB; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem;
}
.chip i{opacity:.8}

/* ======= Catalog Grid ======= */
.connector-catalog{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1.2rem; padding-bottom:3rem;
}

/* ======= Cards ======= */
.connector-card{
  background:var(--card);
  border-radius:1rem;
  box-shadow:var(--shadow);
  padding:1.4rem 1rem;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.connector-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 18px 48px rgba(0,0,0,.55); }

.connector-card img{
  width:110px; height:70px; object-fit:contain; margin-bottom:.85rem;
  filter: grayscale(0%) contrast(100%);
}
.connector-card strong{
  font-size:1.05rem; color:#E5E7EB; font-weight:600; line-height:1.25;
}

/* ======= Premium styling (subtle gold, dark-friendly) ======= */
.connector-card.premium{ border-color:rgba(212,179,89,.65); box-shadow:0 10px 28px var(--gold-glow); }
.connector-card.premium::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120px 120px at 85% 10%, rgba(212,179,89,.18), transparent 60%);
}
.premium-badge{
  position:absolute; top:10px; right:10px;
  background:linear-gradient(180deg, rgba(212,179,89,.22), rgba(212,179,89,.10));
  border:1px solid rgba(212,179,89,.45);
  color:#F5EAD0; padding:4px 10px; border-radius:9999px;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  box-shadow:0 2px 8px var(--gold-glow);
}

/* ======= Use cases view ======= */
.use-cases-display{
  margin-top:2rem; background:var(--card);
  padding:2rem; border-radius:1rem;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.use-cases-display h2{
  color:#fff; font-size:1.6rem; margin-bottom:1.25rem; text-align:center; font-weight:700;
}
.use-cases-display ul{ list-style:none; padding:0; margin-bottom:1.5rem; }
.use-cases-display li{
  background:#111316; padding:1rem 1.2rem; margin-bottom:.85rem; border-radius:.75rem;
  border-left:5px solid rgba(212,179,89,.55);
  font-size:1rem; color:#E5E7EB; display:flex; align-items:flex-start; line-height:1.5;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.use-cases-display li::before{
  content:'\f058'; font-family:"Font Awesome 5 Free"; font-weight:900;
  color:rgba(212,179,89,.85); margin-right:1rem; font-size:1.05rem; line-height:1.5;
}
.back-to-connectors{ display:block; margin:1.25rem auto 0; width:fit-content; }

/* ======= Instruction text ======= */
.instruction{ text-align:center; font-size:1.02rem; color:#A1A1AA; margin:1.25rem auto; max-width:900px; }

/* ======= View switching ======= */
.view-active{ opacity:1; visibility:visible; max-height:2500px; pointer-events:auto;
  transition:opacity .35s ease, max-height .45s ease, visibility .45s ease; }
.view-inactive{ opacity:0; visibility:hidden; max-height:0; pointer-events:none; padding-bottom:0;
  transition:opacity .35s ease, max-height .45s ease, visibility .45s ease; overflow:hidden; }

/* ======= Responsive ======= */
@media (max-width: 768px){
  .connector-catalog{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
  .connector-card{ padding:1.1rem .8rem; }
  .connector-card img{ width:90px; height:56px; margin-bottom:.55rem; }
  .connector-card strong{ font-size:.98rem; }
  .premium-badge{ padding:3px 8px; font-size:.72rem; }
}
@media (max-width: 480px){
  .connector-catalog{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:.8rem; }
  .connector-card{ padding:.9rem .6rem; }
  .connector-card img{ width:72px; height:45px; margin-bottom:.5rem; }
  .connector-card strong{ font-size:.9rem; }
}