/* nim-widget.css — modern chat UI (stable, refined, responsive) */
:root{
  --nim-bg:#ffffff;
  --nim-bg-soft:#f7f8fb;
  --nim-border:#e6e8ef;
  --nim-text:#0f172a;
  --nim-muted:#64748b;
  --nim-brand:#111827;
  --nim-brand-2:#0ea5e9;
  --nim-accent:#7c3aed;
  --nim-user-bg:#111827;
  --nim-user-fg:#ffffff;
  --nim-assist-bg:#ffffff;
  --nim-assist-fg:#0f172a;
  --nim-shadow:0 10px 30px rgba(2,6,23,.08);
}

/* predictable box model & smoothing */
.nim-card, .nim-card * { box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* --- Card --------------------------------------------------------------- */
.nim-card{
  max-width:100%;
  width:100%;
  border-radius:18px;
  padding:1px;
  background:
    linear-gradient(var(--nim-bg),var(--nim-bg)) padding-box,
    linear-gradient(90deg,var(--nim-accent),var(--nim-brand-2)) border-box;
  border:1px solid transparent;
  box-shadow:var(--nim-shadow);

  /* NEW: app-like vertical layout */
  display:flex;
  flex-direction:column;
  min-height:480px;
  max-height:760px;
  overflow:hidden; /* prevent child overflow on small screens */
}

/* --- Header ------------------------------------------------------------- */
.nim-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 12px 16px;
  font-size:20px;font-weight:700;color:var(--nim-text);
}
.nim-clear{
  background:transparent;border:1px solid var(--nim-border);
  padding:6px 10px;border-radius:10px;color:var(--nim-muted);
  cursor:pointer;transition:.2s; font:inherit;
}
.nim-clear:hover{border-color:#c7cbd6;color:#334155}
.nim-clear:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}

/* --- Thread ------------------------------------------------------------- */
.nim-thread{
  flex:1 1 auto;
  min-height:220px;
  overflow:auto;
  background:var(--nim-bg-soft);
  border-top:1px solid var(--nim-border);
  border-bottom:1px solid var(--nim-border);
  padding:14px;
  display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* --- Messages ----------------------------------------------------------- */
.nim-msg{display:flex;gap:10px}
.nim-msg--user{justify-content:flex-end}
.nim-msg__bubble{
  max-width:min(800px,90%);
  border-radius:14px;padding:12px 14px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  font-size:16px;line-height:1.55;
}
.nim-msg--user .nim-msg__bubble{background:var(--nim-user-bg);color:var(--nim-user-fg)}
.nim-msg--assistant .nim-msg__bubble{
  background:var(--nim-assist-bg);color:var(--nim-assist-fg);border:1px solid var(--nim-border)
}

/* Links & code inside answers */
.nim-msg__bubble a{color:#0ea5e9;text-decoration:underline}
.nim-msg__bubble a:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:4px}
.nim-msg__bubble code{background:#f2f4f8;border:1px solid #e5e7eb;padding:0 4px;border-radius:6px}
.nim-msg__bubble pre{
  margin:8px 0;padding:10px;border-radius:10px;
  background:#0b1220;color:#e5e7eb;border:1px solid #111827;overflow:auto;
}
.nim-msg__bubble pre code{background:transparent;border:none;padding:0}

/* Copy button */
.nim-copy{
  margin-top:6px;font-size:12px;color:var(--nim-muted);
  background:transparent;border:none;cursor:pointer;padding:0;font:inherit;
}
.nim-copy:hover{color:#0f172a;text-decoration:underline}
.nim-copy:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}

/* --- Composer ----------------------------------------------------------- */
.nim-form{
  flex:0 0 auto;
  padding:12px;
  background:var(--nim-bg);
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
}
.nim-input{
  display:flex;align-items:center;gap:12px;
  background:var(--nim-bg);border:1px solid var(--nim-border);
  border-radius:14px;padding:10px 12px;
  width:100%; overflow:hidden; flex-wrap:nowrap;
}
.nim-input > *{ min-width:0; }

/* Fixed-height textarea */
.nim-input textarea{
  flex:1 1 auto;
  width:100%; min-width:0;
  height:64px; min-height:64px; max-height:64px;
  overflow:auto; resize:none;
  border:none;outline:none;font-size:16px;line-height:1.5;
  color:var(--nim-text);background:transparent;
}
.nim-input textarea::placeholder{color:#94a3b8}

/* Actions */
.nim-actions{ display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto; }
.nim-hint{font-size:12px;color:var(--nim-muted);white-space:nowrap}

/* ASK button */
.nim-send{
  -webkit-appearance:none; appearance:none;
  height:42px; min-width:92px; padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--nim-brand);color:#fff !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 18px rgba(2,6,23,.15);
  cursor:pointer;transition:filter .2s ease,box-shadow .2s ease,transform .06s ease;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
  letter-spacing:.04em; white-space:nowrap;
}
.nim-send:hover{filter:brightness(1.05)}
.nim-send:active{transform:translateY(1px)}
.nim-send:disabled{opacity:.6;cursor:not-allowed}
.nim-send:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.nim-send svg,.nim-send i,.nim-send .nim-loading{display:none !important}
.nim-send::before{content:none !important}
.nim-send::after{content:'ASK'; color:#fff !important}

/* Status */
.nim-status{margin-top:8px;font-size:13px;color:var(--nim-muted)}

/* --- Inline Thinking ---------------------------------------------------- */
.nim-trace--inline{
  --t-bg: var(--nim-bg);
  --t-br: var(--nim-border);
  --t-muted: var(--nim-muted);
  --t-accent: #38bdf8;
  --t-good: #10b981;

  position: relative;
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding:10px 12px;
  border-radius:12px;
  background:
    linear-gradient(var(--t-bg), var(--t-bg)) padding-box,
    linear-gradient(90deg, rgba(124,58,237,.25), rgba(14,165,233,.25)) border-box;
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(2,6,23,.06);
  backdrop-filter:saturate(1.2);
}
.nim-trace__spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(148,163,184,.45);
  border-top-color:var(--t-accent);
  animation:nimspin .85s linear infinite;flex:0 0 auto
}
@keyframes nimspin{to{transform:rotate(360deg)}}
.nim-trace__check{
  display:none;width:16px;height:16px;border-radius:50%;
  background:var(--t-good);color:#fff;font-size:12px;line-height:16px;text-align:center;
  box-shadow:0 0 0 3px rgba(16,185,129,.15) inset;
}
.nim-trace__text{
  font-size:13px;color:var(--t-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
}
.nim-trace--busy .nim-trace__text::after{
  content:'';display:inline-block;width:1.4em;text-align:left;
  animation:nimdots 1.1s steps(4,end) infinite;
}
@keyframes nimdots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}
.nim-trace--done .nim-trace__spinner{display:none}
.nim-trace--done .nim-trace__check{display:inline-grid;place-items:center}
.nim-trace__bar{
  position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:999px;
  background:linear-gradient(to right, rgba(14,165,233,.2), rgba(124,58,237,.2));overflow:hidden;
}
.nim-trace__fill{
  width:0%;height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--t-accent), #7c3aed);
  transition: width .35s ease;
}

/* --- Responsive tweaks --------------------------------------------------- */
@media (max-width:640px){
  .nim-card{min-height:420px;max-height:80vh}
  .nim-title{font-size:18px;padding:12px 12px 10px 12px}
  .nim-thread{padding:10px}
  .nim-form{padding:10px}
  .nim-input{gap:8px;padding:8px 10px}
  .nim-input textarea{height:56px;min-height:56px;max-height:56px;font-size:15px}
  .nim-send{height:40px;min-width:84px;padding:0 14px}
  .nim-hint{display:none}
  .nim-form{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){ .nim-send{transition:none} }

/* Dark mode polish */
@media (prefers-color-scheme: dark){
  :root{
    --nim-bg:#0b1220;
    --nim-bg-soft:#0f172a;
    --nim-border:#1f2a44;
    --nim-text:#e5e7eb;
    --nim-muted:#93a3b8;
    --nim-assist-bg:#0f172a;
    --nim-assist-fg:#e5e7eb;
  }
  .nim-msg__bubble code{background:#0f172a;border-color:#1f2a44}
  .nim-msg--assistant .nim-msg__bubble{border-color:#1f2a44}
}

/* ---------- Feedback UI (theme-proof) ----------------------------------- */
.nim-msg__bubble .nim-feedback{margin-top:10px}

.nim-msg__bubble .nim-feedback__textarea{
  display:block;width:100%;min-height:96px;
  padding:10px 12px;
  border:1px solid var(--nim-border) !important;
  border-radius:10px;
  background:var(--nim-bg-soft) !important;
  color:var(--nim-text) !important;
  font-size:14px;line-height:1.4;
  resize:vertical;box-sizing:border-box;
}
.nim-msg__bubble .nim-feedback__textarea::placeholder{color:var(--nim-muted)}

.nim-msg__bubble .nim-feedback__send{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  gap:8px;margin-top:10px;
  padding:8px 14px !important;min-width:140px;
  border-radius:10px !important;
  border:1px solid var(--nim-border) !important;
  background:var(--nim-brand) !important;
  color:#fff !important;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
  box-shadow:0 6px 16px rgba(2,6,23,.12);
  cursor:pointer;
  transition:filter .2s ease,transform .06s ease,box-shadow .2s ease;
}
.nim-msg__bubble .nim-feedback__send:hover{filter:brightness(1.05);box-shadow:0 8px 20px rgba(2,6,23,.16)}
.nim-msg__bubble .nim-feedback__send:active{transform:translateY(1px)}
.nim-msg__bubble .nim-feedback__send:disabled{opacity:.6;cursor:not-allowed}
.nim-msg__bubble .nim-feedback__send::before{content:'✉️';font-size:16px;line-height:1}

@media (max-width:640px){
  .nim-msg__bubble .nim-feedback__send{
    padding:8px 12px !important;
    min-width:120px;
    font-size:13px !important;
  }
}