/* chat-widget.css — Daniel Echo */

.de-widget {
  --de-bg:          #0f0f0f;
  --de-surface:     #1a1a1a;
  --de-border:      #2a2a2a;
  --de-user-bg:     #1e3a5f;
  --de-reply-bg:    #1a1a1a;
  --de-text:        #e8e8e8;
  --de-muted:       #6b6b6b;
  --de-accent:      #3b82f6;
  --de-error-bg:    #3b1a1a;
  --de-radius:      10px;
  --de-font:        system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-family:      var(--de-font);
  font-size:        15px;
  line-height:      1.5;
  color:            var(--de-text);
  background:       var(--de-bg);
  border:           1px solid var(--de-border);
  border-radius:    var(--de-radius);
  overflow:         hidden;
  max-width:        640px;
  margin:           0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.de-header {
  display:          flex;
  align-items:      center;
  gap:              10px;
  padding:          12px 16px;
  border-bottom:    1px solid var(--de-border);
  background:       var(--de-surface);
}

.de-avatar {
  font-size:        18px;
  color:            var(--de-accent);
  line-height:      1;
}

.de-title {
  flex:             1;
  font-weight:      500;
  color:            var(--de-text);
  font-size:        14px;
  letter-spacing:   0.02em;
}

.de-mode-badge {
  font-size:        11px;
  font-weight:      500;
  color:            var(--de-muted);
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  padding:          2px 7px;
  border:           1px solid var(--de-border);
  border-radius:    4px;
}

[data-mode="friend"] .de-mode-badge {
  color:            var(--de-accent);
  border-color:     var(--de-accent);
}

/* ── Conversation Log ───────────────────────────────────────────────── */

.de-log {
  padding:          16px;
  min-height:       200px;
  max-height:       420px;
  overflow-y:       auto;
  display:          flex;
  flex-direction:   column;
  gap:              12px;
  scroll-behavior:  smooth;
}

.de-log:empty::before {
  content:          attr(aria-label);
  color:            var(--de-muted);
  font-size:        13px;
  align-self:       center;
  margin-top:       60px;
}

/* ── Messages ───────────────────────────────────────────────────────── */

.de-msg {
  display:          flex;
  align-items:      flex-end;
  gap:              8px;
  max-width:        88%;
  animation:        de-fadein 0.15s ease-out;
}

.de-msg--user {
  align-self:       flex-end;
  flex-direction:   row-reverse;
}

.de-msg--assistant,
.de-msg--error {
  align-self:       flex-start;
}

.de-avatar-sm {
  font-size:        14px;
  color:            var(--de-accent);
  line-height:      1;
  flex-shrink:      0;
  margin-bottom:    4px;
}

.de-msg__bubble {
  padding:          9px 14px;
  border-radius:    var(--de-radius);
  word-break:       break-word;
  white-space:      pre-wrap;
}

.de-msg--user .de-msg__bubble {
  background:       var(--de-user-bg);
  border-bottom-right-radius: 3px;
}

.de-msg--assistant .de-msg__bubble {
  background:       var(--de-reply-bg);
  border:           1px solid var(--de-border);
  border-bottom-left-radius: 3px;
}

.de-msg__bubble--error {
  background:       var(--de-error-bg);
  border:           1px solid #5a2020;
  color:            #f87171;
}

/* ── Typing Indicator ───────────────────────────────────────────────── */

.de-msg--typing .de-msg__bubble {
  display:          flex;
  align-items:      center;
  gap:              5px;
  padding:          12px 14px;
}

.de-dot {
  display:          inline-block;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background:       var(--de-muted);
  animation:        de-bounce 1.2s infinite ease-in-out;
}
.de-dot:nth-child(2) { animation-delay: 0.2s; }
.de-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes de-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Consent Banner ─────────────────────────────────────────────────── */

.de-consent {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              10px;
  padding:          8px 14px;
  border-top:       1px solid var(--de-border);
  background:       var(--de-surface);
  font-size:        12px;
  color:            var(--de-muted);
}

.de-consent[hidden] {
  display:          none;
}

.de-consent__text {
  flex:             1;
  line-height:      1.4;
}

.de-consent__btn {
  background:       transparent;
  border:           1px solid var(--de-border);
  border-radius:    4px;
  color:            var(--de-text);
  cursor:           pointer;
  font-family:      inherit;
  font-size:        12px;
  padding:          3px 10px;
  white-space:      nowrap;
  transition:       border-color 0.15s, color 0.15s;
  flex-shrink:      0;
}

.de-consent__btn:hover {
  border-color:     var(--de-accent);
  color:            var(--de-accent);
}

/* ── Input Form ─────────────────────────────────────────────────────── */

.de-form {
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          10px 12px;
  border-top:       1px solid var(--de-border);
  background:       var(--de-surface);
}

.de-input {
  flex:             1;
  background:       var(--de-bg);
  border:           1px solid var(--de-border);
  border-radius:    6px;
  color:            var(--de-text);
  font-family:      inherit;
  font-size:        14px;
  padding:          8px 12px;
  outline:          none;
  transition:       border-color 0.15s;
}

.de-input:focus {
  border-color:     var(--de-accent);
}

.de-input::placeholder {
  color:            var(--de-muted);
}

.de-input:disabled {
  opacity:          0.5;
  cursor:           not-allowed;
}

.de-send {
  background:       var(--de-accent);
  border:           none;
  border-radius:    6px;
  color:            #fff;
  cursor:           pointer;
  padding:          8px 10px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background 0.15s, opacity 0.15s;
  flex-shrink:      0;
}

.de-send:hover  { background: #2563eb; }
.de-send:active { opacity: 0.8; }

/* ── Accessibility ───────────────────────────────────────────────────── */

.de-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* ── Fade-in animation ───────────────────────────────────────────────── */

@keyframes de-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */

.de-log::-webkit-scrollbar       { width: 4px; }
.de-log::-webkit-scrollbar-track { background: transparent; }
.de-log::-webkit-scrollbar-thumb { background: var(--de-border); border-radius: 2px; }