/*
 * chat-widget.css
 * Frontend chat widget — dark, minimal, editorial.
 *
 * Goals:
 * - Better readability for long conversations
 * - Clear role separation (user vs assistant) without social-messaging bubbles
 * - Responsive width (feels “wide” on modern screens)
 * - Tokenized palette for future accent / density / light-mode overrides
 *
 * Non-goals:
 * - No logic changes (AJAX/guardrails/providers)
 * - No external dependencies
 */

/*
 * Tokens
 * Override these from the theme if desired:
 *   .cllg-chat-widget { --cllg-accent: #00d3a7; }
 */
.cllg-chat-widget{
  --cllg-surface:#0b0f14;
  --cllg-panel:#0f1620;
  --cllg-panel-2:#0c121a;

  --cllg-text:#e8eef6;
  --cllg-text-muted:#a6b3c2;
  --cllg-border:rgba(232,238,246,.12);
  --cllg-border-strong:rgba(232,238,246,.18);

  --cllg-accent:#00d3a7;
  --cllg-danger:#ff6b6b;
  --cllg-warn:#ffcc66;

  --cllg-radius-lg:14px;
  --cllg-radius-md:10px;
  --cllg-shadow:0 10px 30px rgba(0,0,0,.35);

  --cllg-space-1:8px;
  --cllg-space-2:12px;
  --cllg-space-3:16px;
  --cllg-space-4:20px;

  --cllg-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cllg-font-size:14px;
  --cllg-line:1.6;
}

/* Container */
.cllg-chat-widget{
  font-family:var(--cllg-font);
  font-size:var(--cllg-font-size);
  line-height:var(--cllg-line);
  color:var(--cllg-text);

  background:linear-gradient(180deg,var(--cllg-surface),var(--cllg-panel-2));
  border:1px solid var(--cllg-border);
  border-radius:var(--cllg-radius-lg);
  box-shadow:var(--cllg-shadow);

  /* “Wider” feel on desktop while staying safe in embeds */
  width:min(92vw, 960px);
  padding:var(--cllg-space-3);
}

/* Messages panel */
.cllg-chat-messages{
  background:rgba(255,255,255,.02);
  border:1px solid var(--cllg-border);
  border-radius:var(--cllg-radius-md);
  padding:var(--cllg-space-3);
  margin-bottom:var(--cllg-space-2);

  height:clamp(260px, 46vh, 540px);
  overflow:auto;
}

/* Message wrapper */
.cllg-msg{
  margin:0 0 var(--cllg-space-2) 0;
  display:flex;
}

/* Role alignment */
.cllg-msg-user{ justify-content:flex-end; }
.cllg-msg-assistant,
.cllg-msg-system{ justify-content:flex-start; }

/*
 * The widget JS renders .cllg-msg-bubble.
 * Keep compatibility with older markup (.cllg-msg-content).
 */
.cllg-msg-bubble,
.cllg-msg-content{
  display:block;
  max-width:92%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--cllg-border);
  background:rgba(255,255,255,.03);
  color:var(--cllg-text);
  word-wrap:break-word;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

/* Assistant (agent) style: editorial card + accent rail */
.cllg-msg-assistant .cllg-msg-bubble,
.cllg-msg-system .cllg-msg-bubble,
.cllg-msg-system .cllg-msg-content{
  background:rgba(255,255,255,.04);
  border-color:var(--cllg-border-strong);
  position:relative;
}
.cllg-msg-assistant .cllg-msg-bubble:before,
.cllg-msg-system .cllg-msg-bubble:before,
.cllg-msg-system .cllg-msg-content:before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-1px;
  width:3px;
  background:var(--cllg-accent);
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}

/* User style: subtle neutral panel (no “bubble” vibe) */
.cllg-msg-user .cllg-msg-bubble,
.cllg-msg-user .cllg-msg-content{
  background:rgba(0,0,0,.18);
  border-color:var(--cllg-border);
}

/* Form */
.cllg-chat-form{ display:flex; gap:var(--cllg-space-2); }

.cllg-chat-input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--cllg-border);
  background:rgba(255,255,255,.02);
  color:var(--cllg-text);
  outline:none;
}
.cllg-chat-input::placeholder{ color:var(--cllg-text-muted); opacity:.85; }
.cllg-chat-input:focus{
  border-color:rgba(0,211,167,.55);
  box-shadow:0 0 0 3px rgba(0,211,167,.16);
}

.cllg-chat-send{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,211,167,.38);
  background:rgba(0,211,167,.10);
  color:var(--cllg-text);
  cursor:pointer;
  white-space:nowrap;
}
.cllg-chat-send:hover{ background:rgba(0,211,167,.14); border-color:rgba(0,211,167,.55); }
.cllg-chat-send:active{ transform:translateY(1px); }

/* Status */
.cllg-chat-status{
  margin-top:var(--cllg-space-1);
  font-size:12px;
  color:var(--cllg-text-muted);
  opacity:.95;
}

/* Small screens: keep padding reasonable */
@media (max-width: 420px){
  .cllg-chat-widget{ padding:var(--cllg-space-2); width:min(96vw, 960px); }
  .cllg-chat-messages{ padding:var(--cllg-space-2); }
  .cllg-msg-bubble,.cllg-msg-content{ max-width:100%; }
}