/* Brad AI Chat Widget — Light, minimal */
#brad-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 9990;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(145deg, #E8720C, #d96508);
  border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(232,114,12,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
#brad-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(232,114,12,0.5); }
#brad-fab svg { width: 24px; height: 24px; fill: #fff; }

#brad-panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9991;
  width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0;
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-bottom: none;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12); display: none; flex-direction: column; overflow: hidden;
}
#brad-panel.open { display: flex; animation: bradSlide 0.3s ease-out; }
@keyframes bradSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.brad-head {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: var(--bg2, #f8f9fa); border-bottom: 1px solid rgba(0,0,0,0.06);
}
.brad-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #E8720C, #d96508); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.brad-info { flex: 1; }
.brad-name { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.brad-status { font-size: 12px; color: #22c55e; margin-top: 2px; }
.brad-close { background: none; border: none; color: #6b7280; font-size: 20px; cursor: pointer; padding: 4px; line-height: 1; }
.brad-close:hover { color: #1a1a2e; }

.brad-visitor-row { padding: 8px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fafafa; }
.brad-visitor-row label { display: block; font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.brad-visitor-row input { width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); font-size: 13px; box-sizing: border-box; }
.brad-visitor-row input:focus { outline: none; border-color: #E8720C; }

.brad-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; max-height: 50vh; }
.brad-msg { max-width: 88%; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.brad-msg.ai { background: #f1f3f5; color: #1a1a2e; align-self: flex-start; border-bottom-left-radius: 4px; }
.brad-msg.user { background: #E8720C; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.brad-msg-body { word-break: break-word; }
.brad-msg-body .brad-msg-link { color: #E8720C; text-decoration: underline; }
.brad-msg.user .brad-msg-link { color: rgba(255,255,255,0.95); }
.brad-msg-list { margin: 8px 0 0; padding-left: 1.2em; list-style: none; }
.brad-msg-list li { position: relative; padding-left: 8px; margin-bottom: 6px; }
.brad-msg-list li::before { content: '☐'; position: absolute; left: -1.1em; font-size: 0.95em; color: var(--accent, #E8720C); }
.brad-typing { display: flex; gap: 4px; padding: 12px 16px; align-self: flex-start; }
.brad-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: bradDot 1.4s ease-in-out infinite; }
.brad-typing span:nth-child(2) { animation-delay: 0.2s; }
.brad-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bradDot { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

.brad-quick { padding: 10px 16px; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid rgba(0,0,0,0.06); }
.brad-qbtn { padding: 6px 12px; border-radius: 8px; background: #f1f3f5; border: 1px solid rgba(0,0,0,0.06); color: #4a4a5a; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.brad-qbtn:hover { background: rgba(232,114,12,0.08); border-color: rgba(232,114,12,0.2); color: #E8720C; }

.brad-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.06); background: #f8f9fa; }
.brad-input { flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); background: #fff; color: #1a1a2e; font-size: 14px; font-family: inherit; outline: none; resize: none; }
.brad-input:focus { border-color: #E8720C; box-shadow: 0 0 0 2px rgba(232,114,12,0.15); }
.brad-send { width: 40px; height: 40px; border-radius: 10px; background: #E8720C; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.brad-send:hover { background: #d96508; }
.brad-send svg { width: 18px; height: 18px; fill: #fff; }

@media (max-width: 480px) {
  #brad-panel { max-height: 90vh; }
  #brad-fab { bottom: 16px; right: 16px; }
}