/* ──────────────────────────────────────────────────────────────
   Hari Demo widget — self-contained styles (scoped to .hari-demo).
   Mirrors the India × UAE portfolio card; safe inside any theme.
   ────────────────────────────────────────────────────────────── */
.hari-demo {
  --hd-bg: #1a1610;
  --hd-line: rgba(245, 235, 220, 0.10);
  --hd-line-strong: rgba(245, 235, 220, 0.18);
  --hd-fg: #f5ebdc;
  --hd-dim: #b8a98f;
  --hd-mute: #7a6e5a;
  --hd-accent: #ff9933;
  --hd-accent2: #ef3340;
  --hd-accent3: #138808;
  --hd-ok: #4ade80;
  --hd-danger: #ff5b7f;
  --hd-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--hd-mono);
  color: var(--hd-fg);
  max-width: 520px;
}
.hari-demo * { box-sizing: border-box; }

.hd-card {
  background: var(--hd-bg);
  border: 1px solid var(--hd-line-strong);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -20px rgba(0,0,0,0.6);
}
.hd-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 600px 200px at 50% 0%, rgba(255,153,51,0.10), transparent 70%);
}

/* head */
.hd-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hd-line); font-size: 11px; color: var(--hd-mute); position: relative; }
.hd-dots { display: flex; gap: 6px; }
.hd-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(245,235,220,0.12); }
.hd-title { flex: 1; }
.hd-title b { color: var(--hd-fg); font-weight: 500; }
.hd-status { display: flex; align-items: center; gap: 6px; }
.hd-status .hd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hd-ok); box-shadow: 0 0 6px var(--hd-ok); }

/* body */
.hd-body { padding: 22px; display: flex; flex-direction: column; position: relative; }
.hd-prompt { font-size: 12px; color: var(--hd-mute); margin: 0 0 14px; }
.hd-prompt b { color: var(--hd-accent); }
.hd-dim { color: var(--hd-dim); }
.hd-mute { color: var(--hd-mute); }

/* inputs */
.hd-input {
  width: 100%; resize: none; min-height: 78px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--hd-line); border-radius: 8px;
  padding: 12px 14px; font-family: var(--hd-mono); font-size: 13px; color: var(--hd-fg);
  transition: border-color .2s;
}
.hd-input:focus { outline: none; border-color: var(--hd-accent); }

.hd-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hd-chip { font-family: var(--hd-mono); font-size: 11px; padding: 5px 10px; border: 1px solid var(--hd-line); border-radius: 999px; color: var(--hd-dim); background: none; cursor: pointer; transition: all .2s; }
.hd-chip:hover { border-color: var(--hd-accent); color: var(--hd-fg); }
.hd-chip-accent { border-color: var(--hd-accent); color: var(--hd-fg); }

/* result */
.hd-result { margin-top: 18px; padding: 16px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid var(--hd-line); display: flex; flex-direction: column; gap: 12px; }
.hd-verdict { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.hd-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.hd-badge.spam { background: rgba(255,91,127,0.14); color: var(--hd-danger); border: 1px solid rgba(255,91,127,0.3); }
.hd-badge.ham  { background: rgba(74,222,128,0.14); color: var(--hd-ok); border: 1px solid rgba(74,222,128,0.3); }
.hd-badge.idle { background: rgba(245,235,220,0.06); color: var(--hd-mute); border: 1px solid var(--hd-line); }
.hd-bar { height: 6px; background: rgba(0,0,0,0.4); border-radius: 999px; overflow: hidden; }
.hd-bar > div { height: 100%; background: linear-gradient(90deg, var(--hd-accent), var(--hd-accent2), var(--hd-accent3)); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.hd-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--hd-mute); }
.hd-features { display: grid; gap: 6px; }
.hd-frow { display: flex; justify-content: space-between; font-size: 11px; color: var(--hd-dim); padding: 4px 0; border-bottom: 1px dashed var(--hd-line); }
.hd-frow:last-child { border-bottom: 0; }
.hd-frow b { color: var(--hd-accent); font-weight: 500; }

/* chat */
.hd-stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; max-height: 280px; scrollbar-width: thin; scrollbar-color: var(--hd-line-strong) transparent; }
.hd-msg { font-size: 12px; line-height: 1.55; padding: 10px 12px; border-radius: 8px; max-width: 90%; border: 1px solid var(--hd-line); }
.hd-msg.user { background: rgba(255,153,51,0.10); border-color: rgba(255,153,51,0.25); color: var(--hd-fg); align-self: flex-end; }
.hd-msg.bot { background: rgba(0,0,0,0.22); color: var(--hd-dim); align-self: flex-start; }
.hd-msg.hd-thinking { opacity: 0.6; }
.hd-msg.hd-err { color: var(--hd-danger); border-color: rgba(255,91,127,0.3); }
.hd-who { color: var(--hd-accent); display: block; font-size: 10px; margin-bottom: 4px; letter-spacing: 0.1em; text-transform: uppercase; }
.hd-form { display: flex; gap: 8px; margin-top: 12px; }
.hd-form input { flex: 1; background: rgba(0,0,0,0.25); border: 1px solid var(--hd-line); border-radius: 8px; padding: 10px 12px; font-family: var(--hd-mono); font-size: 12px; color: var(--hd-fg); }
.hd-form input:focus { outline: none; border-color: var(--hd-accent); }
.hd-form input:disabled { opacity: 0.6; }
.hd-form button { padding: 10px 14px; border-radius: 8px; background: var(--hd-fg); color: #0e0c08; font-family: var(--hd-mono); font-size: 12px; font-weight: 500; border: 0; cursor: pointer; }
.hd-form button:disabled { opacity: 0.4; cursor: not-allowed; }

/* calculator */
.hd-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hd-cfield { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--hd-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.hd-cfield-wide { grid-column: 1 / -1; }
.hd-num, .hd-select {
  background: rgba(0,0,0,0.25); border: 1px solid var(--hd-line); border-radius: 8px;
  padding: 10px 12px; font-family: var(--hd-mono); font-size: 13px; color: var(--hd-fg); width: 100%;
}
.hd-num:focus, .hd-select:focus { outline: none; border-color: var(--hd-accent); }
.hd-select { cursor: pointer; }
.hd-cresult { margin-top: 16px; padding: 16px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid var(--hd-line); display: flex; flex-direction: column; gap: 12px; }
.hd-ctotal { display: flex; align-items: baseline; justify-content: space-between; }
.hd-ctotal .hd-mute { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.hd-cbig { font-size: 26px; font-weight: 600; color: var(--hd-fg); letter-spacing: -0.02em; }
.hd-cbreak { display: grid; gap: 6px; }
.hd-cnote { font-size: 10px; color: var(--hd-mute); line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--hd-line); }

/* tabs */
.hd-tabs { display: flex; border-top: 1px solid var(--hd-line); font-size: 11px; }
.hd-tab { flex: 1; padding: 10px; color: var(--hd-mute); background: none; border: 0; cursor: pointer; transition: all .2s; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--hd-mono); }
.hd-tab:not(:last-child) { border-right: 1px solid var(--hd-line); }
.hd-tab.active { color: var(--hd-accent); background: rgba(255,153,51,0.06); }
.hd-tab:hover:not(.active) { color: var(--hd-dim); }

@media (max-width: 520px) {
  .hd-calc { grid-template-columns: 1fr; }
}