/* Damon Dynamics site assistant widget.
   Uses the theme's own language: cut corners, mono labels, blue gradient
   controls and the faint grid ground. */

.dd-chat-launch, .dd-chat-panel, .dd-chat-panel * { box-sizing: border-box; }

/* ---------- launcher ---------- */
.dd-chat-launch {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border: 1px solid var(--signal-dim);
  background: linear-gradient(180deg, rgba(22, 166, 240, .22), rgba(22, 166, 240, .06)), var(--panel-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  filter: drop-shadow(0 16px 32px rgba(2, 7, 13, .6));
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.dd-chat-launch:hover {
  transform: translateY(-2px);
  border-color: var(--signal);
  background: linear-gradient(180deg, rgba(22, 166, 240, .32), rgba(22, 166, 240, .1)), var(--panel-2);
}
.dd-chat-launch:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.dd-chat-launch svg { width: 18px; height: 18px; display: block; color: var(--signal); }
.dd-chat-launch[hidden] { display: none; }

/* ---------- panel ---------- */
.dd-chat-panel {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 110px));
  border: 1px solid var(--line-strong);
  background: linear-gradient(170deg, var(--panel-2), var(--paper) 42%);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  filter: drop-shadow(0 28px 64px rgba(2, 7, 13, .78));
  animation: dd-chat-in .28s var(--ease) both;
}
.dd-chat-panel[hidden] { display: none; }
@keyframes dd-chat-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- head ---------- */
.dd-chat-head {
  position: relative;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 9, 15, .45);
}
.dd-chat-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
}
.dd-chat-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(55, 201, 138, .15);
}
.dd-chat-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  padding-right: 44px;
}
.dd-chat-head p { margin: 5px 0 0; font-size: .78rem; color: var(--muted); padding-right: 44px; }
.dd-chat-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.dd-chat-close:hover { color: var(--ink); border-color: var(--signal-dim); }

/* ---------- log ---------- */
.dd-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-image:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(26, 43, 61, .22) 100%),
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(26, 43, 61, .22) 100%);
  background-size: 56px 56px, 56px 56px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.dd-chat-log::-webkit-scrollbar { width: 8px; }
.dd-chat-log::-webkit-scrollbar-thumb { background: var(--line-strong); }
.dd-chat-log::-webkit-scrollbar-track { background: transparent; }

.dd-chat-msg {
  position: relative;
  max-width: 88%;
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.6;
}
.dd-chat-msg.is-bot {
  background: linear-gradient(170deg, var(--panel-2), var(--mist));
  border: 1px solid var(--line);
  color: var(--text);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.dd-chat-msg.is-user {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(22, 166, 240, .16), rgba(22, 166, 240, .05));
  border: 1px solid var(--signal-dim);
  color: var(--ink);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.dd-chat-msg p { margin: 0 0 9px; }
.dd-chat-msg p:last-child { margin-bottom: 0; }

/* ---------- sources ---------- */
.dd-chat-sources { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dd-chat-sources-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.dd-chat-sources-list { display: flex; flex-direction: column; gap: 5px; }
.dd-chat-sources a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-chat-sources a::before {
  content: "";
  flex: none;
  position: relative;
  top: -2px;
  width: 5px; height: 5px;
  background: var(--signal-dim);
  transform: rotate(45deg);
}
.dd-chat-sources a:hover { color: var(--ink); border-bottom-color: var(--signal-dim); }

/* ---------- suggestions ---------- */
.dd-chat-chips { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.dd-chat-chip {
  max-width: 100%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  padding: 9px 13px;
  font-size: .82rem;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.dd-chat-chip:hover { border-color: var(--signal-dim); color: var(--ink); background: rgba(22, 166, 240, .06); }

/* ---------- typing ---------- */
.dd-chat-typing { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.dd-chat-typing span {
  width: 5px; height: 5px; background: var(--signal-dim); transform: rotate(45deg);
  animation: dd-chat-pulse 1.2s infinite ease-in-out;
}
.dd-chat-typing span:nth-child(2) { animation-delay: .16s; }
.dd-chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes dd-chat-pulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; background: var(--signal); } }

/* ---------- composer ---------- */
.dd-chat-form { border-top: 1px solid var(--line); padding: 12px 14px 14px; background: rgba(5, 9, 15, .55); }
.dd-chat-row { display: flex; gap: 9px; align-items: flex-end; }
.dd-chat-input {
  flex: 1 1 auto;
  resize: none;
  height: 44px;          /* the script grows this as someone types */
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  padding: 12px 13px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dd-chat-input::placeholder { color: var(--muted); }
.dd-chat-input:focus { outline: none; border-color: var(--signal-dim); box-shadow: 0 0 0 3px var(--signal-soft); }
.dd-chat-send {
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--signal-dim);
  background: linear-gradient(180deg, rgba(22, 166, 240, .22), rgba(22, 166, 240, .06));
  color: var(--signal);
  cursor: pointer;
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.dd-chat-send:hover:not(:disabled) {
  border-color: var(--signal);
  background: linear-gradient(180deg, rgba(22, 166, 240, .34), rgba(22, 166, 240, .1));
  color: var(--ink);
}
.dd-chat-send:disabled { opacity: .4; cursor: not-allowed; }
.dd-chat-send svg { width: 17px; height: 17px; }
.dd-chat-note {
  margin: 10px 2px 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--muted);
}
.dd-chat-note a { color: var(--muted); }
.dd-chat-note a:hover { color: var(--signal); }

/* ---------- lead form ---------- */
.dd-chat-lead {
  position: relative;
  border: 1px solid var(--signal-dim);
  padding: 16px 15px;
  background: linear-gradient(170deg, var(--panel-2), var(--mist));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.dd-chat-lead h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.dd-chat-lead p.dd-chat-lead-intro { margin: 0 0 12px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.dd-chat-lead label {
  display: block;
  margin: 11px 0 5px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.dd-chat-lead input, .dd-chat-lead textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .85rem;
}
.dd-chat-lead textarea { resize: vertical; min-height: 66px; line-height: 1.5; }
.dd-chat-lead input:focus, .dd-chat-lead textarea:focus { outline: none; border-color: var(--signal-dim); box-shadow: 0 0 0 3px var(--signal-soft); }
.dd-chat-lead .dd-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dd-chat-lead-actions { display: flex; gap: 9px; margin-top: 15px; }
.dd-chat-lead-send {
  border: 1px solid var(--signal-dim);
  background: linear-gradient(180deg, rgba(22, 166, 240, .22), rgba(22, 166, 240, .06));
  color: var(--ink);
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dd-chat-lead-send:hover:not(:disabled) {
  border-color: var(--signal);
  background: linear-gradient(180deg, rgba(22, 166, 240, .34), rgba(22, 166, 240, .1));
}
.dd-chat-lead-send:disabled { opacity: .5; cursor: not-allowed; }
.dd-chat-lead-skip {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.dd-chat-lead-skip:hover { color: var(--ink); border-color: var(--signal-dim); }
.dd-chat-error { color: var(--err); font-size: .78rem; margin: 10px 0 0; }

/* ---------- mobile ---------- */
@media (max-width: 520px) {
  .dd-chat-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    height: min(88vh, 100vh - 20px);
    clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .dd-chat-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-chat-launch, .dd-chat-panel, .dd-chat-typing span, .dd-chat-chip { transition: none; animation: none; }
}