/* ============================
   ACS Chatbot Theme (Dark Only)
   ============================ */

/* Brand colors for Analog Compute Systems */
:root {
  --acs-bg: #020617;          /* main background (deep navy) */
  --acs-bg-alt: #02091f;      /* slightly lighter background */
  --acs-panel: #050b19;       /* input area / panels */
  --acs-accent: #0ea5e9;      /* neon / electric blue */
  --acs-accent-soft: #38bdf8; /* softer blue */
  --acs-border: #1d4ed8;      /* border blue */
  --acs-text: #e5e7eb;        /* primary text */
  --acs-muted: #9ca3af;       /* muted text */
}

/* @font-face {
  font-family: 'PPNeueMachina';
  src: url('https://corr.si/wp-content/uploads/2024/04/PPNeueMachina-InktrapRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
} */
.acs-chatbot {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

/* ============================
   Notification + Launcher
   ============================ */

/* “New messages” badge */
.sc-new-messsages-count {
  background: var(--acs-accent) !important;
}

/* Open / closed icons (use your round ACS bot icon in the widget config) */
.sc-open-icon,
.sc-closed-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 999px !important;
}

/* Launcher bubble */
.sc-launcher {
  background: radial-gradient(circle at 30% 0,
              rgba(56, 189, 248, 0.6) 0,
              #020617 65%) !important;
  border: 1px solid var(--acs-accent) !important;
  box-shadow: 0 0 24px rgba(15, 23, 42, 0.85);
  transition: transform 0.18s ease-out,
              box-shadow 0.18s ease-out,
              border-color 0.18s ease-out;
}

.sc-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.8);
  border-color: var(--acs-accent-soft) !important;
}

/* Desktop positioning */
@media screen and (min-width: 768px) {
  .sc-launcher {
    margin-bottom: 10px;
    margin-right: 10px;
  }

  .talk-bubble-right {
    margin-bottom: -23px;
    margin-right: 10px;
    border-radius: 15px;
    background: #020617 !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    color: var(--acs-text) !important;
  }
}

/* Mobile positioning */
@media screen and (max-width: 767px) {
  .sc-launcher {
    margin-bottom: 80px;
    margin-right: 16px;
  }

  .talk-bubble-right {
    margin-bottom: 50px;
    margin-right: 30px;
    border-radius: 15px;
    background: #020617 !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    color: var(--acs-text) !important;
  }
}

/* Talk bubble text (the little “Need help?” speech) */
.talktext {
  color: #fff !important;
}

/* ============================
   Chat Window Shell
   ============================ */

.sc-chat-window {
  background: radial-gradient(
      circle at top,
      rgba(51, 65, 85, 0.55),   /* lighter slate/navy mix */
      rgba(15, 23, 42, 0.92)    /* medium-deep ACS navy */
    ) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 0 30px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

/* ============================
   Header
   ============================ */

.sc-header {
  background: radial-gradient(circle at 10% 0,
              rgba(56, 189, 248, 0.35) 0,
              #020617 45%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

/* Hide default header image if you don’t need it */
.sc-header--img {
  display: none;
}

/* Title text “Analog Compute Assistant” etc. */
.sc-header--title {
  color: var(--acs-text);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-family: "Neue_Machina", system-ui, -apple-system,
               BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

/* Reset / close buttons */
.sc-header--reset-button,
.sc-header--close-button {
  background: transparent !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.sc-header--reset-button svg,
.sc-header--close-button svg {
  color: var(--acs-accent-soft) !important;
}

/* ============================
   Message List + Messages
   ============================ */

.sc-message-list {
  background: radial-gradient(circle at top,
              rgba(15, 23, 42, 0.9),
              #020617 55%) !important;
}

/* Bot + user avatar */
.sc-message--avatar {
  background-image: url('/assets/acs-chatbot-icon-64.png') !important; /* update path */
  background-size: cover !important;
  background-position: center !important;
  border-radius: 999px !important;
}

/* Bot messages */
.received .sc-message--text {
  background: rgba(15, 23, 42, 0.9) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

.received .sc-message--text p,
.received .sc-message--text-content {
  color: var(--acs-text) !important;
}

/* User messages */
.sent .sc-message--text {
  background: #020617 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(51, 65, 85, 0.9) !important;
}

.sent .sc-message--text-content {
  color: var(--acs-text) !important;
}

/* Suggestions / quick replies */
.sc-suggestions-row {
  background: transparent !important;
  padding: 10px 0;
}

.sc-suggestions-element {
  border-color: var(--acs-accent) !important;
  color: var(--acs-accent-soft) !important;
}

/* Typing indicator bubble */
.sc-typing-indicator {
  background: transparent !important;
}

/* ============================
   Input Area
   ============================ */

form.sc-user-input {
  background: rgba(15, 23, 42, 0.75) !important;  /* softer */
  border-top: 1px solid rgba(56, 189, 248, 0.25) !important;
  backdrop-filter: blur(8px); /* slight glass look */
}

.sc-user-input--text {
  color: var(--acs-text) !important;
}

.sc-user-input--text::placeholder {
  color: var(--acs-muted) !important;
}

.sc-user-input--button svg {
  color: var(--acs-accent-soft) !important;
}

/* ============================
   Powered By ACS
   ============================ */

div#poweredBy {
  padding: 4px 0 6px;
  background: transparent;
  text-align: center;
}

/* Use:
   <div id="poweredBy">
     <img src="/assets/powered-by-acs-339x35.png" alt="Powered by ACS">
   </div>
*/
div#poweredBy img {
  max-height: 34px;
  width: auto;
  display: inline-block;
}

/* ============================
   Scrollbar Styling
   ============================ */

.sc-message-list::-webkit-scrollbar {
  width: 8px;
}

.sc-message-list::-webkit-scrollbar-track {
  background: #020617 !important;
}

.sc-message-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 999px;
}

.sc-message-list::-webkit-scrollbar-thumb:hover {
  background: var(--acs-accent-soft);
}