/* =========================================================
   DarkGuard demo widget
   Drop a <div class="darkguard-demo"></div> in your page and
   include this CSS + darkguard-demo.js.
   All classes are namespaced under .dg-* to avoid collisions.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

.darkguard-demo,
.darkguard-demo * {
  box-sizing: border-box;
}

/* ------- design tokens (mirror render.cpp) ------- */
.darkguard-demo {
  --dg-card-bg: rgba(28, 28, 32, 0.92);
  --dg-panel-bg: rgba(14, 14, 16, 0.65);
  --dg-border-inner: rgba(255, 255, 255, 0.10);
  --dg-border-panel: rgba(255, 255, 255, 0.06);
  --dg-text: #f5f5f7;
  --dg-muted: #9e9ea8;
  --dg-blue: #0a84ff;
  --dg-red:  #ff453a;

  --dg-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dg-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --dg-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dg-ease-in:  cubic-bezier(0.55, 0.085, 0.68, 0.53);

  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  font-family: var(--dg-font-ui);
  color: var(--dg-text);
  -webkit-font-smoothing: antialiased;
}

/* ------- Chat window fills the host ------- */
.darkguard-demo .dg-chat {
  position: absolute;
  inset: 0;
  background: #121216;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 12px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.darkguard-demo .dg-chat-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  flex: 0 0 auto;
}

.darkguard-demo .dg-traffic { display: flex; gap: 8px; }
.darkguard-demo .dg-traffic span {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.darkguard-demo .dg-traffic .c { background: #ff5f56; }
.darkguard-demo .dg-traffic .m { background: #ffbd2e; }
.darkguard-demo .dg-traffic .x { background: #27c93f; }

.darkguard-demo .dg-chat-title {
  flex: 1;
  text-align: center;
  color: #cfcfd6;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.darkguard-demo .dg-chat-title .dg-session {
  color: #76767f;
  font-weight: 400;
  margin-left: 8px;
  font-family: var(--dg-font-mono);
  font-size: 11.5px;
}

.darkguard-demo .dg-chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #ff9d97;
  background: rgba(255, 69, 58, 0.10);
  border: 1px solid rgba(255, 69, 58, 0.30);
  padding: 3px 9px;
  border-radius: 999px;
}
.darkguard-demo .dg-chat-pill .dg-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dg-red);
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.7);
  animation: dg-pulse 1.6s infinite;
}
@keyframes dg-pulse { 0%,100%{ opacity: 0.7; } 50%{ opacity: 1; } }

/* ------- Conversation body ------- */
.darkguard-demo .dg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px 24px 8px;
  scroll-behavior: smooth;
}
/* keep the first message at the bottom of the body so the toast
   landing at the top doesn't bury it. */
.darkguard-demo .dg-body > .dg-msg:first-child { margin-top: auto; }
.darkguard-demo .dg-body::-webkit-scrollbar { width: 8px; }
.darkguard-demo .dg-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.darkguard-demo .dg-msg {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  /* Smooth slide-in matching the toast's enter easing, so when the
     toast leaves and the next AI reply appears, the motion feels
     continuous instead of harsh. */
  animation: dg-msg-in 560ms var(--dg-ease-out) both;
}
@keyframes dg-msg-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.darkguard-demo .dg-avatar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
}
.darkguard-demo .dg-avatar.user {
  background: linear-gradient(135deg, #3a3a48, #1f1f28);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #e8e8ee;
}
.darkguard-demo .dg-avatar.agent {
  background: linear-gradient(135deg, #2a2a36, #15151c);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #e8e8ee;
}
.darkguard-demo .dg-avatar svg { display: block; }

.darkguard-demo .dg-msg-content { flex: 1; min-width: 0; }
.darkguard-demo .dg-msg-meta {
  font-size: 11.5px;
  color: #76767f;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.darkguard-demo .dg-msg-meta b { color: #e8e8ee; font-weight: 600; }
.darkguard-demo .dg-msg-meta .dg-time {
  font-family: var(--dg-font-mono);
  font-size: 10.5px;
}
.darkguard-demo .dg-msg-text {
  color: #e2e2e8;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.darkguard-demo .dg-msg-text code {
  font-family: var(--dg-font-mono);
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: #c5d6ff;
}

.darkguard-demo .dg-msg.blocked .dg-msg-text { color: #ffd9d6; }
.darkguard-demo .dg-msg.blocked .dg-msg-text b { color: #fff; }
.darkguard-demo .dg-msg.blocked .dg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #ff7a72;
  background: rgba(255, 69, 58, 0.10);
  border: 1px solid rgba(255, 69, 58, 0.30);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 1px;
}
.darkguard-demo .dg-msg.blocked .dg-tag .dg-pulse-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dg-red);
  box-shadow: 0 0 5px rgba(255, 69, 58, 0.8);
}

/* "agent is thinking" indicator */
.darkguard-demo .dg-typing {
  color: #9e9ea8;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.darkguard-demo .dg-dots {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.darkguard-demo .dg-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: dg-blink 1.2s infinite ease-in-out;
  opacity: 0.6;
}
.darkguard-demo .dg-dots span:nth-child(2) { animation-delay: 0.15s; }
.darkguard-demo .dg-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes dg-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Composer footer */
.darkguard-demo .dg-composer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 14px 14px;
  background: rgba(0, 0, 0, 0.20);
  flex: 0 0 auto;
}
.darkguard-demo .dg-composer-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.darkguard-demo .dg-typed {
  flex: 1;
  min-width: 0;
  color: #e8e8ee;
  font-size: 14px;
  letter-spacing: -0.005em;
  height: 22px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
}
.darkguard-demo .dg-typed.placeholder { color: #6a6a73; }
.darkguard-demo .dg-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: var(--dg-blue);
  margin-left: 1px;
  vertical-align: -3px;
  animation: dg-blink-caret 1s steps(2) infinite;
}
@keyframes dg-blink-caret { 50% { opacity: 0; } }
.darkguard-demo .dg-send {
  background: var(--dg-blue);
  color: white;
  border: 0;
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  opacity: 0.55;
  pointer-events: none;
}

/* ============================================================
   DARKGUARD TOAST — slides down from above the chat surface
   into a rest position over the top of the chat, then slides
   back up. Animation timing mirrors the native render.cpp:
     enter  240ms ease-out-cubic
     exit   450ms ease-in
   ============================================================ */
.darkguard-demo .dg-stack {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Lands OVER the titlebar (very top of the widget). The toast is
     narrower than the widget so the traffic lights and the DarkGuard
     pill at the corners of the titlebar stay visible. */
  padding-top: 14px;
  gap: 10px;
}
.darkguard-demo .dg-card {
  pointer-events: auto;
  width: min(520px, calc(100% - 36px));
  background: var(--dg-card-bg);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 40px 100px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  padding: 14px 16px;
  transform: translateY(calc(-100% - 32px));
  opacity: 0;
  transition:
    transform 450ms var(--dg-ease-in),
    opacity 350ms ease;
  will-change: transform, opacity;
}
.darkguard-demo .dg-card.in {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 240ms var(--dg-ease-out),
    opacity 200ms var(--dg-ease-out);
}

.darkguard-demo .dg-card-header {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
}
.darkguard-demo .dg-card-logo { width: 28px; height: 28px; display: block; }
.darkguard-demo .dg-card-text { min-width: 0; }
.darkguard-demo .dg-card-title {
  color: var(--dg-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.darkguard-demo .dg-card-subtitle {
  color: var(--dg-muted);
  font-size: 12.5px;
  margin-top: 4px;
  line-height: 1.1;
}
.darkguard-demo .dg-card-panel {
  position: relative;
  margin-top: 12px;
  background: var(--dg-panel-bg);
  border-radius: 8px;
  border: 1px solid var(--dg-border-panel);
  padding: 10px 12px;
  font-family: var(--dg-font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dg-muted);
  word-break: break-all;
  white-space: pre-wrap;
  /* Truncate long commands to ~2 lines with a fade mask. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.55em * 2 + 20px);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}