/* ============================================================
   Sovereign IT Systems — ITAD Desk chat widget skin.
   Matches the site's documentary aesthetic: warm dark, amber
   phosphor accent, Fraunces / Inter / JetBrains Mono.
   Class names mirror the Desk widget (sd-*).
   ============================================================ */

.sd-root {
  --sdbg: #100e0b;
  --sdbg2: #161310;
  --sdline: #2a2520;
  --sdtext: #f0e9dd;
  --sdsoft: #c8bba8;
  --sdmuted: #877a6a;
  --sdaccent: #e8a24a;
  --sdaccent-deep: #b87a2a;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- launcher bubble ---- */
.sd-bubble {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(180deg, var(--sdbg2), var(--sdbg));
  color: var(--sdtext);
  border: 1px solid rgba(232, 162, 74, 0.35);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 44px -14px rgba(0,0,0,0.75), 0 6px 22px -8px rgba(232,162,74,0.25);
  transition: transform 150ms cubic-bezier(0.4,0,0.2,1), border-color 150ms;
}
.sd-bubble:hover { transform: translateY(-2px); border-color: rgba(232, 162, 74, 0.6); }
.sd-bubble .sd-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1d1916, #100e0b);
  border: 1px solid var(--sdline);
  border-radius: 5px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 0.85rem;
  color: var(--sdaccent);
}
.sd-bubble span { display: flex; flex-direction: column; text-align: left; }
.sd-b1 { font-weight: 600; font-size: 0.9rem; }
.sd-b2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sdmuted); margin-top: 3px;
}

/* ---- panel ---- */
.sd-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9001;
  width: min(94vw, 390px);
  height: min(78vh, 600px);
  display: none;
  flex-direction: column;
  background: var(--sdbg);
  color: var(--sdtext);
  border: 1px solid var(--sdline);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 32px 80px -20px rgba(0,0,0,0.85);
}
.sd-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--sdaccent-deep), var(--sdaccent), var(--sdaccent-deep));
  z-index: 2;
}
.sd-panel.sd-open { display: flex; }

.sd-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--sdbg2);
  border-bottom: 1px solid var(--sdline);
}
.sd-head .sd-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1d1916, #100e0b);
  border: 1px solid var(--sdline); border-radius: 5px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; color: var(--sdaccent);
}
.sd-t { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1rem; }
.sd-s {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sdaccent); margin-top: 3px;
}
.sd-x {
  margin-left: auto;
  background: none; border: 1px solid var(--sdline); border-radius: 5px;
  color: var(--sdsoft); font-size: 1.1rem; line-height: 1;
  width: 30px; height: 30px; cursor: pointer;
}
.sd-x:hover { color: var(--sdaccent); border-color: var(--sdaccent-deep); }

/* ---- quick ramps ---- */
.sd-ramps {
  display: flex; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sdline);
  background: var(--sdbg);
}
.sd-ramp {
  flex: 1;
  text-align: center;
  font-size: 0.78rem; font-weight: 600;
  color: var(--sdsoft);
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid var(--sdline);
  border-radius: 5px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.sd-ramp:hover { color: var(--sdaccent); border-color: var(--sdaccent-deep); }

/* ---- messages ---- */
.sd-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--sdline) transparent;
}
.sd-m {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sd-bot {
  align-self: flex-start;
  background: var(--sdbg2);
  border: 1px solid var(--sdline);
  color: var(--sdtext);
}
.sd-user {
  align-self: flex-end;
  background: rgba(232, 162, 74, 0.14);
  border: 1px solid rgba(232, 162, 74, 0.3);
  color: var(--sdtext);
}
.sd-m a { color: var(--sdaccent); text-decoration: underline; }
.sd-typing {
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--sdmuted);
  padding: 6px 2px;
}
.sd-typing i { animation: sdblink 1.2s infinite; font-style: normal; }
.sd-typing i:nth-child(2) { animation-delay: 0.2s; }
.sd-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes sdblink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }

/* ---- chips — big tap targets, one per row ---- */
.sd-chips { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 14px; }
.sd-chip {
  width: 100%;
  background: var(--sdbg2);
  border: 1px solid rgba(232, 162, 74, 0.4);
  border-radius: 8px;
  color: var(--sdtext);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, transform 100ms;
}
.sd-chip::after { content: ' →'; color: var(--sdaccent); }
.sd-chip:hover { background: rgba(232, 162, 74, 0.12); border-color: var(--sdaccent); }
.sd-chip:active { transform: scale(0.98); }

/* ---- input row — impossible to miss ---- */
.sd-inrow {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 14px;
  border-top: 2px solid var(--sdaccent-deep);
  background: var(--sdbg2);
}
.sd-clip {
  background: none;
  border: 1px solid var(--sdline);
  border-radius: 5px;
  font-size: 1rem;
  width: 38px; height: 38px;
  cursor: pointer;
  color: var(--sdsoft);
  flex-shrink: 0;
}
.sd-clip:hover { border-color: var(--sdaccent-deep); }
.sd-in {
  flex: 1;
  resize: none;
  background: var(--sdbg);
  border: 1px solid rgba(232, 162, 74, 0.45);
  border-radius: 8px;
  color: var(--sdtext);
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  min-height: 48px; max-height: 110px;
}
.sd-in::placeholder { color: var(--sdmuted); }
.sd-in:focus { outline: none; border-color: var(--sdaccent); box-shadow: 0 0 0 3px rgba(232,162,74,0.16); }
.sd-send {
  background: var(--sdaccent);
  color: #1a1208;
  border: 1px solid var(--sdaccent-deep);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.sd-send:hover { background: #f5c688; }
.sd-send:disabled { opacity: 0.5; cursor: default; }

/* ---- footer ---- */
.sd-foot {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sdmuted);
  text-align: center;
  padding: 8px 14px 10px;
  background: var(--sdbg2);
}

/* ---- fallback panel ---- */
.sd-fall { padding: 10px 4px; display: flex; flex-direction: column; gap: 10px; }
.sd-fall p { color: var(--sdsoft); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.sd-fall a {
  display: block; text-align: center;
  padding: 11px 14px;
  border: 1px solid var(--sdline);
  border-radius: 6px;
  color: var(--sdtext);
  font-weight: 600; font-size: 0.88rem;
  text-decoration: none;
}
.sd-fall a:hover { color: var(--sdaccent); border-color: var(--sdaccent-deep); }

/* ---- form success card (enquiry form wiring) ---- */
.inquiry-done {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 4px;
  text-align: center;
}
.inquiry-done .done-mark { font-size: 2rem; }
.inquiry-done h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; margin: 0; }
.inquiry-done p { color: var(--sdsoft, #c8bba8); margin: 0; line-height: 1.6; }
.inquiry-done .done-ref {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sdaccent, #e8a24a);
}

/* ---- photo attach on the enquiry form ---- */
.form-photo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(232, 162, 74, 0.06);
  border: 1px solid rgba(232, 162, 74, 0.3);
  border-radius: 8px;
}
.form-photo-btn {
  background: transparent;
  border: 1px solid rgba(232, 162, 74, 0.5);
  border-radius: 6px;
  color: #f0e9dd;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.form-photo-btn:hover { background: rgba(232, 162, 74, 0.14); border-color: #e8a24a; }
.form-photo-note { font-size: 0.8rem; color: #a89884; line-height: 1.45; }
.form-photo-list { font-size: 0.82rem; color: #e8a24a; font-weight: 600; }

/* honeypot — visually gone, present for bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* clear the fixed mobile tap-to-call bar (shown at <=720px) */
@media (max-width: 720px) {
  .sd-bubble { bottom: 74px; }
  .sd-panel { bottom: 74px; }
}

@media (max-width: 560px) {
  .sd-panel { right: 8px; width: calc(100vw - 16px); height: min(80vh, 620px); }
  .sd-bubble { right: 12px; }
}