/* NanoApart AI modules — UI styles. Premium, brand-aligned (gold #B59B5C, ink #0A0A0A). */

/* ---------- Chat FAB + modal ---------- */
.na-chat-fab{
  position:fixed; right:16px; bottom:96px; z-index:9990;
  width:56px; height:56px; border-radius:50%;
  background:#0A0A0A; color:#fff; border:1px solid #B59B5C;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.2);
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.na-chat-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.4); }
.na-chat-fab:focus-visible{ outline:2px solid #B59B5C; outline-offset:3px; }
.na-chat-fab svg{ display:block; }
.na-chat-fab-dot{
  position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:50%;
  background:#19c37d; border:2px solid #0A0A0A;
}

.na-chat-modal{
  position:fixed; inset:0; z-index:10001;
  display:flex; align-items:flex-end; justify-content:flex-end;
  background:rgba(8,8,12,.55); backdrop-filter:blur(2px);
  animation:naFade .2s ease both;
}
.na-chat-modal[hidden]{ display:none; }
@keyframes naFade { from{opacity:0} to{opacity:1} }

.na-chat-card{
  width:min(420px, 100vw - 24px); height:min(620px, 92vh);
  margin:12px; background:#fff; color:#0A0A0A;
  border-radius:16px; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
  animation:naSlide .25s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes naSlide { from{transform:translateY(20px); opacity:0} to{transform:translateY(0); opacity:1} }

.na-chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #ececec;
  background:linear-gradient(180deg, #0A0A0A 0%, #1a1a1a 100%); color:#fff;
}
.na-chat-title-wrap{ display:flex; gap:10px; align-items:center; }
.na-chat-avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, #B59B5C, #d4b773);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#0A0A0A;
}
.na-chat-title{ font-weight:600; font-size:15px; }
.na-chat-sub{ font-size:11px; opacity:.75; display:flex; align-items:center; gap:6px; }
.na-chat-status-dot{ width:7px; height:7px; border-radius:50%; background:#19c37d; box-shadow:0 0 6px #19c37d; }
.na-chat-close{
  background:transparent; color:#fff; border:0; font-size:24px; line-height:1;
  width:32px; height:32px; border-radius:8px; cursor:pointer;
}
.na-chat-close:hover{ background:rgba(255,255,255,.08); }

.na-chat-body{
  flex:1; overflow-y:auto; padding:16px; background:#fafafa;
  display:flex; flex-direction:column; gap:10px;
}
.na-chat-msg{ display:flex; }
.na-chat-msg.user{ justify-content:flex-end; }
.na-chat-msg.ai  { justify-content:flex-start; }
.na-chat-bubble{
  max-width:80%; padding:10px 14px; border-radius:14px;
  font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word;
}
.na-chat-msg.ai  .na-chat-bubble{ background:#fff; color:#0A0A0A; border:1px solid #ececec; border-bottom-left-radius:4px; }
.na-chat-msg.user .na-chat-bubble{ background:#0A0A0A; color:#fff; border-bottom-right-radius:4px; }

.na-chat-typing{ display:inline-flex; gap:4px; padding:2px 0; }
.na-chat-typing i{
  width:6px; height:6px; border-radius:50%; background:#999;
  animation:naDot 1.2s infinite ease-in-out;
}
.na-chat-typing i:nth-child(2){ animation-delay:.15s; }
.na-chat-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes naDot { 0%,80%,100%{transform:scale(.6); opacity:.4} 40%{transform:scale(1); opacity:1} }

.na-chat-suggest{
  padding:10px 16px; background:#fff8eb; border-top:1px solid #f1e5c4;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.na-chat-suggest-text{ font-size:13px; color:#5a4a1d; }
.na-chat-suggest-btn{
  padding:8px 14px; background:#B59B5C; color:#0A0A0A; text-decoration:none;
  border-radius:8px; font-weight:600; font-size:13px; white-space:nowrap;
}

.na-chat-input{
  display:flex; gap:8px; padding:12px; border-top:1px solid #ececec; background:#fff;
}
.na-chat-input input{
  flex:1; padding:10px 14px; border:1px solid #ddd; border-radius:10px;
  font-size:14px; outline:none; background:#fafafa;
}
.na-chat-input input:focus{ border-color:#B59B5C; background:#fff; }
.na-chat-input button{
  width:42px; height:42px; border:0; border-radius:10px;
  background:#0A0A0A; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.na-chat-input button:hover{ background:#B59B5C; color:#0A0A0A; }
.na-chat-foot{ padding:6px 16px 10px; font-size:11px; color:#7a7a7a; text-align:center; }

@media (max-width: 520px) {
  .na-chat-card{ width:100vw; height:100vh; margin:0; border-radius:0; }
  .na-chat-fab{ bottom:80px; right:12px; }
}

/* ---------- Exit-intent modal ---------- */
.na-exit-modal{ position:fixed; inset:0; z-index:10002; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease; }
.na-exit-modal.is-on{ opacity:1; }
.na-exit-backdrop{ position:absolute; inset:0; background:rgba(8,8,12,.65); backdrop-filter:blur(3px); }
.na-exit-card{
  position:relative; max-width:440px; width:calc(100% - 32px);
  background:#fff; border-radius:18px; padding:32px 28px 24px; text-align:center;
  box-shadow:0 28px 80px rgba(0,0,0,.5); border:1px solid rgba(181,155,92,.3);
  transform:translateY(20px); transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.na-exit-modal.is-on .na-exit-card{ transform:translateY(0); }
.na-exit-close{
  position:absolute; top:8px; right:8px; width:36px; height:36px; border:0; background:transparent;
  font-size:26px; line-height:1; color:#777; cursor:pointer; border-radius:8px;
}
.na-exit-close:hover{ background:#f3f3f3; color:#0A0A0A; }
.na-exit-icon{ font-size:42px; margin-bottom:8px; }
.na-exit-card h3{ font-family:"Fraunces", Georgia, serif; font-size:24px; margin:0 0 8px; color:#0A0A0A; }
.na-exit-card p{ font-size:15px; line-height:1.5; color:#444; margin:0 0 20px; }
.na-exit-cta{
  display:inline-block; padding:14px 28px; background:#B59B5C; color:#0A0A0A;
  text-decoration:none; border-radius:10px; font-weight:700; font-size:15px;
  box-shadow:0 6px 16px rgba(181,155,92,.35);
}
.na-exit-cta:hover{ background:#c8ad6e; }
.na-exit-link{
  display:block; margin:14px auto 0; background:transparent; border:0;
  color:#777; font-size:13px; cursor:pointer; text-decoration:underline;
}

/* ---------- Lang bar ---------- */
.na-lang-bar{ display:inline-flex; gap:4px; margin-left:auto; align-items:center; }
.na-lang-btn{
  padding:6px 10px; border:1px solid transparent; background:transparent; color:inherit;
  border-radius:8px; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; gap:4px;
  font-family:inherit;
}
.na-lang-btn span{ font-weight:600; font-size:11px; opacity:.75; }
.na-lang-btn:hover{ background:rgba(181,155,92,.1); border-color:rgba(181,155,92,.3); }
.na-lang-btn.is-on{ background:rgba(181,155,92,.18); border-color:#B59B5C; }
@media (max-width: 700px) {
  .na-lang-bar{ position:fixed; top:8px; right:8px; z-index:50; background:rgba(255,255,255,.92); padding:4px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.15); }
  .na-lang-btn{ padding:4px 6px; font-size:11px; }
}

/* ---------- FAQ AI search ---------- */
.na-faq-ai{ max-width:720px; margin:18px auto 24px; }
.na-faq-form{
  display:flex; gap:0; align-items:center; background:#fff; border:1px solid #ddd;
  border-radius:12px; padding:4px 4px 4px 14px; box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.na-faq-form:focus-within{ border-color:#B59B5C; box-shadow:0 4px 14px rgba(181,155,92,.2); }
.na-faq-form svg{ color:#888; flex-shrink:0; }
.na-faq-form input{
  flex:1; border:0; padding:12px 12px; font-size:15px; outline:none; background:transparent;
  font-family:inherit;
}
.na-faq-form button{
  padding:10px 18px; background:#0A0A0A; color:#fff; border:0; border-radius:8px;
  font-weight:600; cursor:pointer; font-size:14px;
}
.na-faq-form button:hover{ background:#B59B5C; color:#0A0A0A; }
.na-faq-answer{
  margin-top:14px; padding:16px 18px; background:#fafafa; border:1px solid #ececec; border-radius:12px;
  font-size:14px; line-height:1.6; color:#1a1a1a;
}
.na-faq-answer-text{ white-space:pre-wrap; }
.na-faq-cta{
  display:inline-block; margin-top:12px; padding:9px 18px; background:#B59B5C; color:#0A0A0A;
  text-decoration:none; border-radius:8px; font-weight:600; font-size:13px;
}

/* ---------- Voice mic button ---------- */
.na-voice-btn{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px;
  padding:10px 14px; border:1px dashed #B59B5C; background:rgba(181,155,92,.08);
  color:#0A0A0A; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600;
  transition:all .15s ease;
}
.na-voice-btn:hover{ background:rgba(181,155,92,.18); }
.na-voice-btn.is-recording{
  background:#d33; color:#fff; border-color:#d33; border-style:solid;
  animation:naPulse 1.2s infinite ease-in-out;
}
@keyframes naPulse { 0%,100%{box-shadow:0 0 0 0 rgba(221,51,51,.5)} 50%{box-shadow:0 0 0 10px rgba(221,51,51,0)} }

/* ---------- Callback time hint ---------- */
.na-callback-hint{
  display:block; font-size:10px; opacity:.85; margin-top:2px; font-weight:400;
}
.na-callback-hint-inline{ color:#5a4a1d; font-style:italic; }

/* ---------- Form tooltip ---------- */
.na-form-tip{
  position:absolute; z-index:9999; max-width:240px;
  padding:10px 14px; background:#0A0A0A; color:#fff;
  border-radius:10px; font-size:13px; line-height:1.4;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  animation:naFade .25s ease both;
}
.na-form-tip::before{
  content:""; position:absolute; top:-6px; left:20px;
  border:6px solid transparent; border-top:0; border-bottom-color:#0A0A0A;
}

/* ---------- Smart CTA marker (debug only) ---------- */
[data-na-cta="hot"]{ /* visual cue optional */ }