/* ============================================================
   Unisol Habitat — AI Assistant Widget
   Stone & Gold palette  |  Emil motion principles
   ============================================================ */

.hmbot{
  /* Stone & Gold tokens */
  --ink:     #1a1612;
  --bone:    #f0ece4;
  --paper:   #f7f3ec;
  --line:    #ddd9d0;
  --mute:    #786e5e;
  --fog:     #cec8be;
  --gold:    #d4a84b;
  --gold-d:  #8a6e2e;
  --gold-a:  #7a5e1c;
  --ease:    cubic-bezier(.23,1,.32,1);

  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(72px,10vw,88px); /* above mobile tab bar */
  z-index:9000;
  font-family:var(--body,'Inter',system-ui,sans-serif);
}

/* ── Launcher button ──────────────────────────────────────── */
.hmbot-launcher{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--ink);color:var(--bone);border:0;
  padding:13px 20px;border-radius:999px;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 8px 32px -8px rgba(26,22,18,.55),
             0 2px 8px -2px rgba(26,22,18,.3);
  transition:transform 180ms var(--ease),
             background-color 160ms var(--ease),
             box-shadow 180ms var(--ease);
  will-change:transform;
}
@media(hover:hover) and (pointer:fine){
  .hmbot-launcher:hover{
    background:#000;
    transform:translateY(-3px);
    box-shadow:0 16px 40px -8px rgba(26,22,18,.6);
  }
}
.hmbot-launcher:active{transform:scale(.96);transition-duration:80ms}
.hmbot-launcher svg{width:19px;height:19px;flex-shrink:0}
.hmbot-ico-close{display:none}
.hmbot.is-open .hmbot-ico-chat{display:none}
.hmbot.is-open .hmbot-ico-close{display:block}
.hmbot.is-open .hmbot-launcher-label{display:none}
.hmbot.is-open .hmbot-launcher{padding:13px}

/* Gold pulse ring — shows the bot is available */
.hmbot-launcher::before{
  content:'';position:absolute;inset:-3px;border-radius:999px;
  border:1.5px solid rgba(212,168,75,.4);
  animation:hmbot-ring 2.8s var(--ease) infinite;
  pointer-events:none;
}
.hmbot.is-open .hmbot-launcher::before{display:none}
@keyframes hmbot-ring{
  0%{opacity:0;transform:scale(.92)}
  40%{opacity:1}
  100%{opacity:0;transform:scale(1.12)}
}

/* ── Panel ────────────────────────────────────────────────── */
.hmbot-panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:min(390px, calc(100vw - 28px));
  height:min(580px, calc(100vh - 130px));
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 32px 80px -20px rgba(26,22,18,.45),
             0 8px 24px -8px rgba(26,22,18,.2);
  transform-origin:bottom right;
  opacity:0;transform:translateY(14px) scale(.95);
  transition:opacity 220ms var(--ease),
             transform 220ms var(--ease);
  pointer-events:none;
}
.hmbot.is-open .hmbot-panel{
  opacity:1;transform:none;pointer-events:auto;
}

/* ── Header ───────────────────────────────────────────────── */
.hmbot-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  background:var(--ink);
  color:var(--bone);
  flex:0 0 auto;
  border-bottom:1px solid rgba(212,168,75,.15);
}
.hmbot-head-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.hmbot-head-copy{flex:1;min-width:0}
.hmbot-mark{
  font-family:var(--mono,'Space Mono',monospace);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:1px;
}
.hmbot-title{
  font-family:'Fraunces',Georgia,serif;
  font-size:15px;font-weight:500;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Status dot */
.hmbot-status{
  display:flex;align-items:center;gap:5px;margin-top:2px;
  font-size:10px;color:rgba(240,236,228,.5);
}
.hmbot-status::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#4ade80;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:hmbot-pulse 2s ease infinite;
}
@keyframes hmbot-pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.hmbot-x{
  margin-left:4px;background:none;border:0;color:rgba(240,236,228,.5);
  cursor:pointer;padding:6px;display:flex;border-radius:8px;
  transition:color 160ms var(--ease),background 160ms var(--ease);flex-shrink:0;
}
.hmbot-x:hover{color:var(--bone);background:rgba(255,255,255,.08)}
.hmbot-x svg{width:16px;height:16px}

/* ── Message log ──────────────────────────────────────────── */
.hmbot-log{
  flex:1;overflow-y:auto;
  padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--paper);
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--fog) transparent;
}
.hmbot-log::-webkit-scrollbar{width:4px}
.hmbot-log::-webkit-scrollbar-thumb{background:var(--fog);border-radius:2px}

/* Date divider */
.hmbot-divider{
  text-align:center;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
  font-family:var(--mono,'Space Mono',monospace);
  margin:4px 0;
}

.hmbot-msg{display:flex;align-items:flex-end;gap:8px}
.hmbot-msg--user{justify-content:flex-end}
.hmbot-msg--assistant{justify-content:flex-start}

/* Avatar */
.hmbot-avatar{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;margin-bottom:2px;
}
.hmbot-msg--user .hmbot-avatar{
  background:var(--fog);font-size:11px;
}

/* Bubbles */
.hmbot-bubble{
  max-width:78%;
  padding:10px 14px;
  border-radius:16px;
  font-size:13.5px;line-height:1.58;
  word-wrap:break-word;
}
.hmbot-msg--user .hmbot-bubble{
  background:var(--ink);color:var(--bone);
  border-bottom-right-radius:4px;
  box-shadow:0 2px 8px rgba(26,22,18,.2);
}
.hmbot-msg--assistant .hmbot-bubble{
  background:#fff;color:var(--ink);
  border:1px solid var(--line);
  border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(26,22,18,.06);
}

.hmbot-p{margin:0 0 6px}
.hmbot-p:last-child{margin-bottom:0}
.hmbot-bubble a{color:var(--gold-a);text-decoration:underline;text-underline-offset:2px}

/* Code inside bot messages */
.hmbot-bubble code{
  font-family:'Fira Code',monospace;font-size:12px;
  background:rgba(26,22,18,.06);padding:1px 5px;border-radius:4px;
}

/* Suggestion chips */
.hmbot-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.hmbot-chip{
  background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;
  font-size:12px;color:var(--mute);cursor:pointer;
  transition:border-color 160ms var(--ease),color 160ms var(--ease),background 160ms var(--ease);
  font-family:inherit;
}
.hmbot-chip:hover{
  border-color:var(--gold);color:var(--gold-a);background:rgba(212,168,75,.06);
}
.hmbot-chip:active{transform:scale(.97)}

/* Typing dots */
.hmbot-typing .hmbot-bubble{
  display:inline-flex;gap:5px;align-items:center;
  padding:12px 16px;min-width:60px;
}
.hmbot-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--fog);
  animation:hmbot-bounce 1.2s var(--ease) infinite;
}
.hmbot-dot:nth-child(2){animation-delay:.15s}
.hmbot-dot:nth-child(3){animation-delay:.3s}
@keyframes hmbot-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}
}

/* ── Input form ───────────────────────────────────────────── */
.hmbot-form{
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:var(--bone);
  flex:0 0 auto;
}
.hmbot-input{
  flex:1;border:1.5px solid var(--line);
  background:var(--paper);border-radius:12px;
  padding:10px 14px;font-size:13.5px;
  outline:none;color:var(--ink);font-family:inherit;
  resize:none;max-height:96px;min-height:40px;
  line-height:1.5;
  transition:border-color 180ms var(--ease);
  scrollbar-width:none;
}
.hmbot-input::placeholder{color:var(--fog)}
.hmbot-input:focus{border-color:var(--gold)}
.hmbot-input:disabled{opacity:.55}
.hmbot-input::-webkit-scrollbar{display:none}

.hmbot-send{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:0;
  cursor:pointer;
  background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background 160ms var(--ease),transform 100ms var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .hmbot-send:hover{background:var(--gold-d);color:var(--bone)}
}
.hmbot-send:active{transform:scale(.92);transition-duration:80ms}
.hmbot-send:disabled{opacity:.45;cursor:default}
.hmbot-send svg{width:17px;height:17px}

/* Disclaimer */
.hmbot-disclaimer{
  margin:0;padding:6px 12px 10px;
  font-size:10.5px;color:var(--mute);text-align:center;
  background:var(--bone);
  font-family:var(--mono,'Space Mono',monospace);letter-spacing:.02em;
}
.hmbot-disclaimer a{color:var(--gold-a)}

/* ── Mobile ───────────────────────────────────────────────── */
@media(max-width:480px){
  .hmbot{right:12px;bottom:80px}
  .hmbot-panel{
    position:fixed;right:0;left:0;bottom:0;top:auto;
    width:100%;height:82vh;
    border-radius:20px 20px 0 0;
    border-bottom:none;
  }
  .hmbot-launcher-label{display:none}
  .hmbot-launcher{padding:13px}
}

/* ── Reduced motion ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hmbot-launcher,
  .hmbot-launcher::before,
  .hmbot-panel,
  .hmbot-send,
  .hmbot-chip,
  .hmbot-status::before,
  .hmbot-dot{
    transition:none;animation:none;
  }
  .hmbot-launcher::before{display:none}
  .hmbot-status::before{background:#4ade80}
}