:root{
  --np-chat-bg: rgba(255,255,255,.82);
  --np-chat-border: rgba(15,23,42,.10);
  --np-chat-shadow: rgba(0,0,0,.18);
  --np-chat-text: #0f172a;
  --np-chat-muted: #64748b;
  --np-chat-blue: #3b82f6;
}

.np-mirarchat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.np-mirarchat-fab{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.20);
  box-shadow: 0 18px 60px var(--np-chat-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.np-mirarchat-fab:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.np-mirarchat-fab:active{ transform: translateY(0px); }
.np-mirarchat-fab svg{ width: 22px; height: 22px; fill: currentColor; }

.np-mirarchat-panel{
  width: min(360px, calc(100vw - 28px));
  height: min(520px, calc(100vh - 130px));
  border-radius: 18px;
  border: 1px solid var(--np-chat-border);
  background: var(--np-chat-bg);
  box-shadow: 0 24px 80px var(--np-chat-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.np-mirarchat-panel[hidden]{display:none !important;}

.np-mirarchat-head{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.np-mirarchat-title{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.np-mirarchat-title strong{
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--np-chat-text);
}
.np-mirarchat-title span{
  font-size: 12px;
  color: var(--np-chat-muted);
}
.np-mirarchat-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  color: var(--np-chat-text);
}
.np-mirarchat-close:hover{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25); color: var(--np-chat-blue); }

.np-mirarchat-body{
  padding: 12px;
  overflow: auto;
  flex: 1;
}
.np-mirarchat-msg{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 16px;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid rgba(15,23,42,.08);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.np-mirarchat-msg--bot{
  background: rgba(255,255,255,.70);
  color: var(--np-chat-text);
}
.np-mirarchat-msg--me{
  margin-left: auto;
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.20);
  color: #0b1220;
}

.np-mirarchat-chips{
  padding: 8px 12px 6px;
  border-top: 1px dashed rgba(15,23,42,.12);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.np-mirarchat-chips:empty{
  display: none;
}
.np-mirarchat-chip{
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.78);
  color: var(--np-chat-text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.np-mirarchat-chip:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.np-mirarchat-chip--callback{
  background: rgba(37, 99, 235, .12);
  border-color: rgba(37, 99, 235, .28);
  color: #1e3a8a;
}
.np-mirarchat-chip--confirm{
  background: rgba(16, 185, 129, .14);
  border-color: rgba(16, 185, 129, .32);
  color: #065f46;
}
.np-mirarchat-chip--cancel{
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .28);
  color: #991b1b;
}

.np-mirarchat-foot{
  padding: 10px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.np-mirarchat-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
  background: rgba(255,255,255,.70);
  color: var(--np-chat-text);
}
.np-mirarchat-input:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.np-mirarchat-send{
  border-radius: 999px;
  border: 0;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  background: var(--np-chat-blue);
  color: #fff;
}
.np-mirarchat-send:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.np-mirarchat-hint{
  padding: 0 12px 10px;
  font-size: 11px;
  color: var(--np-chat-muted);
}

@media (prefers-reduced-motion: reduce){
  .np-mirarchat-fab{ transition: none; }
}
