/* Embedded chat view on the landing SPA. Keep these rules scoped so the landing
   page and the standalone chat application cannot affect one another. */
#spa-chat-view {
  color: #e4e4e7;
  font-family: "Inter", system-ui, sans-serif;
}

#spa-chat-view > #sidebar {
  position: fixed;
  inset: 80px auto 0 0;
  z-index: 30;
  width: 280px;
  padding: 22px 16px;
  margin: 0;
  background: #0d0d10;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
}

#spa-chat-view #sidebar-header,
#spa-chat-view #sidebar-logo,
#spa-chat-view #header,
#spa-chat-view #header-left,
#spa-chat-view #header-right,
#spa-chat-view #input-wrapper {
  display: flex;
  align-items: center;
}

#spa-chat-view #sidebar-header { gap: 12px; margin-bottom: 22px; }
#spa-chat-view #sidebar-logo {
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #00ff66;
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.2);
  border-radius: 10px;
}
#spa-chat-view #sidebar-logo svg { width: 20px; height: 20px; }
#spa-chat-view #sidebar-brand { font-weight: 800; font-size: 14px; }
#spa-chat-view #sidebar-brand span { color: #00ff66; }
#spa-chat-view #sidebar-brand small { display: block; margin-top: 2px; color: #71717a; font-size: 9px; font-weight: 500; }
#spa-chat-view #new-chat-btn,
#spa-chat-view .dev-panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
}
#spa-chat-view #sidebar-footer { margin-top: 24px; }
#spa-chat-view #dev-panel-content { display: none; }

#spa-chat-view > #main-area {
  min-height: calc(100vh - 80px);
  margin: 0 0 0 280px;
  padding: 0;
  background: radial-gradient(circle at 50% 20%, rgba(0, 255, 102, 0.035), transparent 36%), #08080a;
}
#spa-chat-view #header {
  justify-content: space-between;
  min-height: 58px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#spa-chat-view #header-left,
#spa-chat-view #header-right { gap: 16px; }
#spa-chat-view #hamburger { display: none; color: #a1a1aa; background: none; border: 0; }
#spa-chat-view #header-nav { display: flex; gap: 18px; }
#spa-chat-view #header-nav a { color: #a1a1aa; font-size: 13px; text-decoration: none; }
#spa-chat-view #status-dot { width: 7px; height: 7px; border-radius: 50%; background: #00ff66; box-shadow: 0 0 10px rgba(0,255,102,.7); }
#spa-chat-view #status-text { color: #a1a1aa; font-size: 12px; }
#spa-chat-view #chat-container { display: flex; flex-direction: column; min-height: calc(100vh - 138px); }
#spa-chat-view #message-container { flex: 1; display: grid; place-items: center; width: 100%; padding: 42px 24px 24px; }
#spa-chat-view #welcome-view { width: min(100%, 680px); text-align: center; }
#spa-chat-view #welcome-logo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 28px;
  color: #00ff66;
  border: 1px solid rgba(0, 255, 102, 0.2);
  border-radius: 24px;
  background: rgba(0, 255, 102, 0.05);
}
#spa-chat-view #welcome-logo svg { width: 42px; height: 42px; }
#spa-chat-view #welcome-view h1 { margin: 0; color: #f4f4f5; font-size: clamp(26px, 5vw, 40px); }
#spa-chat-view #welcome-view .subtitle { margin: 10px 0 28px; color: #71717a; }
#spa-chat-view #starter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
#spa-chat-view #starter-pills button {
  padding: 10px 14px;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
#spa-chat-view #input-area { width: min(calc(100% - 40px), 760px); margin: 0 auto 24px; }
#spa-chat-view #input-wrapper { gap: 8px; padding: 8px 9px 8px 16px; background: #111114; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
#spa-chat-view #chat-input { flex: 1; min-height: 28px; padding: 4px 0; color: #f4f4f5; background: transparent; border: 0; outline: 0; resize: none; }
#spa-chat-view #send-btn,
#spa-chat-view #stop-btn { display: grid; place-items: center; width: 36px; height: 36px; color: #050505; background: #00ff66; border: 0; border-radius: 10px; }
#spa-chat-view #stop-btn { display: none; }
#spa-chat-view #input-footer { margin-top: 8px; color: #52525b; font-size: 11px; text-align: center; }

@media (max-width: 760px) {
  #spa-chat-view > #sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  #spa-chat-view > #sidebar.open { transform: translateX(0); }
  #spa-chat-view > #main-area { margin-left: 0; }
  #spa-chat-view #hamburger { display: grid; place-items: center; }
  #spa-chat-view #header { padding: 0 18px; }
  #spa-chat-view #message-container { padding-inline: 18px; }
  #spa-chat-view #starter-pills { align-items: stretch; flex-direction: column; }
  #spa-chat-view #input-area { width: calc(100% - 28px); }
}