:root {
  --db-primary: #a60000; /* main red */
  --db-accent: #7a0000;  /* darker red (links etc.) */
  --db-text: #1a1a1a;
  --db-muted: #667085;
  --db-border: #e6e6e6;
  --db-panel: #fff;
}

/* Buttons: launcher + send in red */
#dogbot-launch,
.dogbot-send {
  background: #a60000 !important;
  color: #fff !important;
}
#dogbot-launch:hover,
.dogbot-send:hover {
  background: #cc0000 !important;
}

/* Root placement */
.dogbot {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  font-family: system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Launcher */
#dogbot-launch{
  display:flex; align-items:center; gap:.5rem;
  background:var(--db-primary); color:#fff; border:0; border-radius:999px;
  padding:.6rem .9rem; box-shadow:0 6px 18px rgba(0,0,0,.15); cursor:pointer;
}
#dogbot-launch:hover{ filter:brightness(1.07); }

/* Panel */
#dogbot-panel[hidden]{ display:none !important; }
#dogbot-panel {
  position: fixed; right: 0; left: 0; bottom: 0;
  background: #ededed !important;  /* light grey */
  color: var(--db-text);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
  max-height: 80vh; display:flex; flex-direction:column;
}

/* Desktop floating card */
@media (min-width: 900px){
  #dogbot-panel{
    width: 380px; max-height: 70vh; bottom: 82px; right: 16px; left: auto;
    border-radius: 12px;
  }
}

/* Header: keep brand on one line */
.dogbot-header{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:.75rem .9rem; border-bottom:1px solid var(--db-border);
  background:#ededed; /* matches panel */
}
.dogbot-brand{
  display:flex !important; align-items:center !important; gap:8px !important;
  flex:1 1 auto !important; min-width:0 !important;
}

/* LOGO sizing — keep the actual image size you want */
.dogbot-brand .dogbot-logo{
  height: 45px !important;     /* your chosen size */
  width: auto !important;
  display:block; object-fit:contain;
  border-radius: 6px;           /* optional: tidy corners; remove if you want square */
}

/* Fallback emoji avatar ONLY */
.dogbot-avatar{
  width:28px !important; height:28px !important;
  border-radius:50%; display:grid; place-items:center; background:#ffe8a3;
  flex:0 0 28px !important;
}

/* Title */
.dogbot-title{
  display:inline-block !important;
  font-weight:600; font-size:14px;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}

/* Close button */
.dogbot-close{ background:none; border:0; font-size:20px; line-height:1; cursor:pointer; color:#666; }
.dogbot-close:hover{ color:#000; }

/* Messages */
.dogbot-messages{
  padding:.75rem; overflow:auto; display:flex; flex-direction:column; gap:.5rem;
  background:#ededed; /* consistent background */
}
.dogbot-bubble{ max-width:85%; padding:.55rem .7rem; border-radius:12px; }
.dogbot-user{ margin-left:auto; background:#eaf1ff; }
.dogbot-bot{  margin-right:auto; background:#f6f7f9; }

/* Typing indicator */
.dogbot-typing{ display:inline-flex; gap:4px; padding:2px 4px; }
.dogbot-typing i{ width:6px; height:6px; background:#999; border-radius:50%;
  animation:dbblink 1.2s infinite ease-in-out; }
.dogbot-typing i:nth-child(2){ animation-delay:.15s }
.dogbot-typing i:nth-child(3){ animation-delay:.3s }
@keyframes dbblink { 0%,80%,100%{ opacity:.2 } 40%{ opacity:1 } }

/* Form */
.dogbot-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--db-border); }
.dogbot-input{
  flex:1; border:1px solid var(--db-border); border-radius:999px; padding:.55rem .9rem;
  background:#fff;  /* ensure white input on grey panel */
}
.dogbot-send{
  border:0; background:var(--db-primary); color:#fff; border-radius:999px; padding:.55rem .9rem; cursor:pointer;
}
.dogbot-send[aria-busy="true"]{ opacity:.7; cursor:wait; }
.dogbot-messages a{ color:var(--db-accent); text-decoration:underline; }
.dogbot-bubble p {
  margin: 0 0 12px 0;
}

.dogbot-bubble p:last-child {
  margin-bottom: 0;
}