/* ============================================================
   H@rts · chat-widget.css
   The AI assistant bubble and the WhatsApp fast lane, on the
   cinematic palette. Self contained: the homepage loads this
   instead of style.css / hub.css, so every rule the assistant
   (app.js) needs lives here, scoped under #harts-chat-widget.
   WhatsApp green is the one colour allowed outside black and
   white, and only on the wa.me control.
   ============================================================ */

/* ---------- floating controls ---------- */
.fab-stack{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.fab{
  position:relative;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line-strong,rgba(255,255,255,.24));
  cursor:pointer;display:grid;place-items:center;padding:0;
  box-shadow:0 10px 34px rgba(5,5,10,.6);
  transition:transform .4s var(--ease,ease),box-shadow .4s var(--ease,ease),background .4s var(--ease,ease);
  text-decoration:none;
}
.fab:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(5,5,10,.7)}
.fab svg{width:24px;height:24px}
.fab-wa{background:#25D366;border-color:#25D366;color:#04180C}
.fab-wa:hover{background:#1FBE5A}
.fab-chat{background:var(--accent,#fff);color:#0A0B0D;border-color:var(--accent,#fff)}
.fab-chat:hover{background:var(--accent-hover,#DDE3EB)}
.fab-chat[aria-expanded="true"]{background:var(--panel,#14171C);color:var(--text-primary,#E8EBF0);border-color:var(--line-strong,rgba(255,255,255,.24))}
.fab-label{
  position:absolute;right:66px;top:50%;transform:translateY(-50%);
  white-space:nowrap;
  background:rgba(10,11,13,.9);border:1px solid var(--line,rgba(255,255,255,.1));
  color:var(--text-primary,#E8EBF0);
  padding:6px 10px;border-radius:2px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease,ease);
  backdrop-filter:blur(10px);
}
.fab:hover .fab-label,.fab:focus-visible .fab-label{opacity:1}
.fab-ping{
  position:absolute;inset:-1px;border-radius:50%;
  border:1px solid #25D366;
  animation:fabPing 2.6s var(--ease,ease) infinite;animation-delay:-1s;
}
@keyframes fabPing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@media (pointer:coarse){
  .fab-label{display:none}
}

/* ---------- the panel ---------- */
#harts-chat-widget{
  position:fixed;right:20px;bottom:88px;z-index:95;
  width:380px;max-width:calc(100vw - 40px);
  height:580px;max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);
  background:var(--canvas,#0A0B0D);
  border:1px solid var(--line-strong,rgba(255,255,255,.24));
  border-radius:4px;
  box-shadow:0 30px 90px rgba(5,5,10,.75);
  overflow:hidden;
  display:flex;flex-direction:column;
  transform-origin:bottom right;
  transform:translateY(14px) scale(.97);
  opacity:0;pointer-events:none;
  transition:transform .45s var(--ease-out,ease),opacity .35s var(--ease,ease);
  font-family:var(--body,system-ui,sans-serif);
  color:var(--text-primary,#E8EBF0);
}
#harts-chat-widget.open{transform:none;opacity:1;pointer-events:auto}
@media (max-width:520px){
  #harts-chat-widget{
    right:12px;left:12px;bottom:84px;width:auto;max-width:none;
    height:auto;top:max(12px,env(safe-area-inset-top));
    max-height:none;
  }
  .fab-stack{right:12px;bottom:12px}
}

.chat-widget-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line,rgba(255,255,255,.1));
  background:var(--panel,#14171C);
}
.chat-widget-head .ava{
  width:32px;height:32px;border-radius:50%;
  background:var(--accent,#fff);color:#0A0B0D;
  display:grid;place-items:center;
  font-family:var(--display,sans-serif);font-weight:800;font-size:.95rem;
}
.chat-widget-head .who{display:flex;flex-direction:column;gap:3px;min-width:0}
.chat-widget-head .who b{font-family:var(--display,sans-serif);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.chat-widget-head .who span{color:var(--text-secondary,#8C94A1);font-size:.6rem;display:flex;align-items:center;gap:7px}
.chat-widget-head .dot{width:6px;height:6px;border-radius:50%;background:var(--accent,#fff);display:inline-block}
.chat-widget-close{
  margin-left:auto;background:none;border:0;color:var(--text-secondary,#8C94A1);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 8px;border-radius:2px;
  transition:color .3s var(--ease,ease),background .3s var(--ease,ease);
}
.chat-widget-close:hover{color:var(--text-primary,#E8EBF0);background:rgba(255,255,255,.06)}

/* ---------- the conversation surface (ids owned by app.js) ---------- */
.gemini-chat{flex:1;min-height:0;display:flex;flex-direction:column}

.chat-welcome{flex:1;min-height:0;overflow-y:auto;padding:26px 18px 10px;display:flex;align-items:flex-start}
.welcome-inner h2{
  font-family:var(--display,sans-serif);font-weight:700;font-size:1.3rem;
  line-height:1.15;letter-spacing:-.02em;margin:0;
}
.chat-welcome-sub{margin:8px 0 0;color:var(--text-secondary,#8C94A1);font-size:.86rem;line-height:1.5}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chat-chip{
  background:transparent;border:1px solid var(--line-strong,rgba(255,255,255,.24));
  color:var(--text-primary,#E8EBF0);border-radius:2px;
  font-family:var(--body,system-ui,sans-serif);font-size:.8rem;
  padding:8px 12px;cursor:pointer;text-align:left;
  transition:border-color .3s var(--ease,ease),background .3s var(--ease,ease);
}
.chat-chip:hover{border-color:var(--accent,#fff);background:rgba(255,255,255,.06)}

/* the log only shows once the first message is sent (app.js adds .chatting) */
.chat-messages{display:none}
.gemini-chat.chatting .chat-welcome{display:none}
.gemini-chat.chatting .chat-messages{
  display:flex;flex-direction:column;gap:12px;
  flex:1;min-height:0;overflow-y:auto;
  padding:16px 14px 10px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--line-strong,rgba(255,255,255,.24));border-radius:2px}

.chat-msg{display:flex;width:100%;align-items:flex-end;gap:8px}
.chat-msg.bot{justify-content:flex-start}
.chat-msg.user{justify-content:flex-end}
.chat-msg .chat-content-wrapper{display:flex;flex-direction:column;max-width:82%}
.chat-msg.user .chat-content-wrapper{align-items:flex-end}
.chat-bubble{
  font-size:.88rem;line-height:1.55;
  padding:10px 13px;border-radius:3px;
  white-space:pre-wrap;word-break:break-word;
  background:rgba(255,255,255,.05);border:1px solid var(--line,rgba(255,255,255,.1));
  color:var(--text-primary,#E8EBF0);
}
.chat-msg.user .chat-bubble{background:var(--accent,#fff);border-color:var(--accent,#fff);color:#0A0B0D}
.chat-bubble a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.chat-bubble strong{font-weight:600}
.chat-msg .avatar{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-bottom:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
  background:var(--panel,#14171C);border:1px solid var(--line-strong,rgba(255,255,255,.24));
  color:var(--text-secondary,#8C94A1);
}
.chat-time{font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.04em;color:var(--text-secondary,#8C94A1);margin-top:4px;padding:0 2px;opacity:.8}

.chat-bubble.typing{display:inline-flex;gap:5px;align-items:center;padding:12px 14px}
.chat-bubble.typing span{
  width:5px;height:5px;border-radius:50%;background:var(--text-secondary,#8C94A1);
  animation:chatTyping 1.1s infinite ease-in-out;
}
.chat-bubble.typing span:nth-child(2){animation-delay:.18s}
.chat-bubble.typing span:nth-child(3){animation-delay:.36s}
@keyframes chatTyping{0%,80%,100%{transform:scale(.65);opacity:.35}40%{transform:scale(1);opacity:1}}

.chat-note{
  align-self:center;font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.05em;
  color:var(--text-secondary,#8C94A1);padding:6px 0;margin:4px 0;
  border-top:1px dashed var(--line,rgba(255,255,255,.1));border-bottom:1px dashed var(--line,rgba(255,255,255,.1));
}

/* ---------- the composer ---------- */
.input-container{flex:0 0 auto;padding:10px 12px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line,rgba(255,255,255,.1));background:var(--canvas,#0A0B0D)}
.gemini-input{
  display:flex;align-items:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong,rgba(255,255,255,.24));
  border-radius:3px;padding:4px 4px 4px 12px;margin:0;
  transition:border-color .3s var(--ease,ease),background .3s var(--ease,ease);
}
.gemini-input:focus-within{border-color:var(--accent,#fff);background:rgba(255,255,255,.06)}
#chat-input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  color:var(--text-primary,#E8EBF0);
  font-family:var(--body,system-ui,sans-serif);font-size:.92rem;
  padding:9px 4px;line-height:1.4;
}
#chat-input::placeholder{color:var(--text-secondary,#8C94A1);opacity:.8}
.send-btn{
  width:34px;height:34px;border-radius:2px;flex-shrink:0;margin-left:6px;
  background:var(--accent,#fff);color:#0A0B0D;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease,ease),transform .2s var(--ease,ease);
}
.send-btn:hover{background:var(--accent-hover,#DDE3EB)}
.send-btn:active{transform:scale(.94)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fab-ping{animation:none}
  .chat-bubble.typing span{animation:none;opacity:.7}
  #harts-chat-widget{transition:none}
}

/* while the panel is open it covers the WhatsApp button, so that button steps
   aside; the assistant itself offers the WhatsApp handover in conversation */
.fab-stack.chat-open .fab-wa{opacity:0;pointer-events:none;transform:translateY(8px)}
.fab-wa{transition:opacity .3s var(--ease,ease),transform .4s var(--ease,ease)}

/* ---------- the once-per-session nudge ---------- */
.chat-nudge{
  display:flex;align-items:flex-start;gap:6px;
  max-width:min(300px,calc(100vw - 40px));
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease,ease),transform .5s var(--ease-out,ease);
}
.chat-nudge.in{opacity:1;transform:none}
.chat-nudge-body{
  flex:1;text-align:left;cursor:pointer;
  background:var(--panel,#14171C);color:var(--text-primary,#E8EBF0);
  border:1px solid var(--line-strong,rgba(255,255,255,.24));border-radius:4px;
  padding:12px 14px;
  font-family:var(--body,system-ui,sans-serif);font-size:.86rem;line-height:1.45;
  box-shadow:0 18px 50px rgba(5,5,10,.65);
  transition:border-color .3s var(--ease,ease),background .3s var(--ease,ease);
}
.chat-nudge-body:hover{border-color:var(--accent,#fff);background:rgba(255,255,255,.06)}
.chat-nudge-who{display:block;color:var(--text-secondary,#8C94A1);font-size:.6rem;margin-bottom:5px}
.chat-nudge-text{display:block}
.chat-nudge-close{
  background:none;border:0;color:var(--text-secondary,#8C94A1);cursor:pointer;
  font-size:1.2rem;line-height:1;padding:6px;border-radius:2px;
}
.chat-nudge-close:hover{color:var(--text-primary,#E8EBF0)}
@media (prefers-reduced-motion:reduce){.chat-nudge{transition:none}}