:root{ --chat-primary:#d71635; --chat-accent:#4a79b6; --chat-white:#ffffff; }
#chat, #chat *{ font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* root container anchors everything at bottom-right */
#chat{ position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); z-index:2147483646; }

/* launcher is above panel and always clickable */
#chat-launcher{
  position:absolute; right:0; bottom:0; width:56px; height:56px; border-radius:50%;
  border:0; background:var(--chat-primary); color:#fff; font-size:22px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:2147483647;
}
#chat-launcher .icon{ display:inline-block; transition:transform .2s ease; }

/* panel */
#chat-panel{
  position:absolute; right:0; bottom:68px; width:380px; max-height:72vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:#0e1525; color:#e5e7eb; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; transform:translateY(8px) scale(.98); visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:2147483646;
}
#chat[data-open="true"] #chat-panel{
  opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s;
}
#chat[data-open="true"] #chat-launcher .icon{ transform:rotate(180deg); }

/* header */
.chat-header{
  background:var(--chat-primary); border-bottom:4px solid var(--chat-accent);
  display:flex; align-items:center; justify-content:center; padding:10px 14px; min-height:56px;
}
.chat-brand{ display:flex; align-items:center; gap:12px; margin:2px auto; }
.chat-logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:8px 12px; background:#fff; border-radius:10px; box-shadow:0 1px 0 rgba(0,0,0,.08);
  position:relative;
}
.chat-logo img{ 
  height:100%; 
  display:block; 
  /* CSS filter fallback to change white to #d71635 - works even if JS fails */
  filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(5000%) hue-rotate(340deg) brightness(0.85);
}
/* Remove filter when SVG is successfully modified by JS */
.chat-logo img[src*="data:image/svg"]{ filter: none; }
.chat-title{ color:#fff; font-weight:600; font-size:16px; line-height:1.1; }
.chat-subtitle{ color:rgba(255,255,255,.9); font-size:12px; margin-top:2px; letter-spacing:.2px; }

/* conversation */
.chat-body{ background:#0b1220; padding:14px 14px 18px; display:flex; flex-direction:column; gap:12px; overflow:auto; -webkit-overflow-scrolling:touch; }
.chat-msg{ max-width:78%; padding:10px 12px; background:#fff; color:#0b1220; border-radius:14px 14px 14px 6px; }
.chat-msg.user{ margin-left:auto; background:var(--chat-accent); color:#fff; border-radius:14px 14px 6px 14px; }
.chat-typing{ opacity:.7; }

/* input */
.chat-input{ display:flex; align-items:center; gap:12px; padding:8px 12px; background:#0f172a; border-top:1px solid rgba(255,255,255,.08); box-sizing:border-box; }
.chat-input input{
  flex:1 1 auto; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:#0e1626; color:#fff; outline:none; font-size:16px; min-height:44px;
  box-sizing:border-box; min-width:0; /* allow input to shrink so button spacing works */
}
.chat-input input::placeholder{ color:#9aa4b2; }
.chat-input button{
  background:var(--chat-primary); color:#fff; border:0; border-radius:12px; cursor:pointer;
  height:44px; width:44px; padding:0; margin-right:0; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}

/* disabled send button */
.chat-input button[disabled]{ background:#6b7280; color:#cbd5e1; opacity:.6; cursor:not-allowed; box-shadow:none; }
.chat-input button:active{ transform:scale(0.98); }

/* neutral gray theme (replaces the dark blue) */
#chat-panel{ background:#1f1f23; }
.chat-body{ background:#131316; }
.chat-input{ background:#17171a; border-top:1px solid rgba(255,255,255,.06); }
.chat-input input{ background:#141416; border-color:rgba(255,255,255,.12); color:#fff; }

/* light gray theme */
#chat-panel{ background:#f3f4f6; color:#111827; }
.chat-body{ background:#f7f7f8; }
.chat-input{ background:#eef0f3; border-top:1px solid #e5e7eb; }
.chat-input input{ background:#ffffff; color:#111827; border-color:#d1d5db; }

/* centered light-blue welcome card */
.chat-msg.welcome{
  background:#e8f3ff; color:#0b2e54; border:1px solid #cde7ff; box-shadow:0 2px 8px rgba(0,0,0,.06);
  border-radius:16px; max-width:95%; padding:12px 14px; text-align:center; align-self:center;
}

/* animated typing dots (brand red) */
.chat-msg.chat-typing{ background:#f6f7fb; color:#1f2937; }
.chat-typing .dots{ display:inline-flex; gap:6px; align-items:center; }
.chat-typing .dot{ width:6px; height:6px; border-radius:50%; background:var(--chat-primary); opacity:.35; animation:chat-bounce 1s infinite ease-in-out; }
.chat-typing .dot:nth-child(2){ animation-delay:.15s; }
.chat-typing .dot:nth-child(3){ animation-delay:.30s; }
@keyframes chat-bounce{ 0%,80%,100%{transform:translateY(0);opacity:.25} 40%{transform:translateY(-3px);opacity:1} }

/* preserve \n and \n\n as real line breaks in bubbles */
.chat-msg{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* link button styling */
.chat-link-btn{
  display:inline-block; margin:2px 0; padding:6px 12px; background:var(--chat-primary);
  color:#fff!important; text-decoration:none; border-radius:5px; font-weight:500; font-size:12px;
  transition:all .2s ease; box-shadow:0 1px 4px rgba(0,0,0,.1); line-height:1.3;
}
.chat-link-btn:hover{ background:#b82424; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.chat-link-btn:active{ transform:translateY(0); }

@media (max-width:520px){
  #chat-panel{ right:0; left:auto; width:320px; max-width:calc(100vw - 24px); max-height:85vh; }
  .chat-logo{ height:38px; padding:6px 10px; }
  .chat-title{ font-size:15px; }
}