/* ============================================================================
   AMANE AI — chat widget
   UX/UI mirrors the approved reference (amane_faq_chatbot.html); every colour is
   remapped to the amane.css design tokens (--warm-white, --bone, --coffee,
   --champagne, --moss, --olive, --ink, --line, --font-*). Self-contained.
   ========================================================================== */

#amane-chat{
  --amn-z: 500;                       /* one step above --z-lightbox (400) */
  --amn-radius: 20px;
  --amn-fab: 88px;
  --amn-header: linear-gradient(135deg, var(--coffee,#4A3327), var(--moss,#211D17));
  --amn-accent: linear-gradient(135deg, var(--champagne,#B7935E), var(--coffee,#4A3327));
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: var(--amn-z);
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink, #211D17);
}
#amane-chat *,
#amane-chat *::before,
#amane-chat *::after{ box-sizing: border-box; }

/* ---------------------------------------------------------------- launcher */
/* The launcher is just the mascot art — no circle, no plate. */
#amane-chat .amn-fab{
  position: relative;
  display: block;
  width: auto;
  height: var(--amn-fab);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .5s var(--ease-expo, cubic-bezier(.16,1,.3,1)),
              opacity .3s var(--ease, ease);
  -webkit-tap-highlight-color: transparent;
}
#amane-chat .amn-fab img{
  width: auto;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(33,29,23,.32));
}
#amane-chat .amn-fab:hover{ transform: translateY(-3px); }
#amane-chat .amn-fab:focus-visible{ outline: 2px solid var(--olive, #3E4430); outline-offset: 4px; border-radius: 6px; }
#amane-chat .amn-fab .amn-dot{
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--champagne, #B7935E);
  border: 2px solid var(--warm-white, #FAF6EF);
}
#amane-chat.amn-seen .amn-fab .amn-dot{ display: none; }
#amane-chat.amn-open .amn-fab{ transform: scale(.8); opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- panel */
#amane-chat .amn-panel{
  position: absolute;
  right: 0; bottom: 0;
  width: 396px;
  height: min(640px, calc(100vh - 44px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--warm-white, #FAF6EF);
  border: 1px solid var(--line, rgba(33,29,23,.14));
  border-radius: var(--amn-radius);
  box-shadow: 0 30px 70px -24px rgba(33,29,23,.5);
  transform-origin: bottom right;
  transform: translateY(18px) scale(.96);
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease-expo, cubic-bezier(.16,1,.3,1)),
              opacity .35s var(--ease, ease),
              visibility 0s linear .5s;
}
#amane-chat.amn-open .amn-panel{
  transform: none; opacity: 1; visibility: visible;
  transition: transform .55s var(--ease-expo, cubic-bezier(.16,1,.3,1)),
              opacity .35s var(--ease, ease);
}

/* ---------------------------------------------------------------- header */
#amane-chat .amn-head{
  padding: 18px 18px 15px;
  background: var(--amn-header);
  color: var(--warm-white, #FAF6EF);
}
#amane-chat .amn-head-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#amane-chat .amn-brand{ display: flex; align-items: center; gap: 11px; min-width: 0; }
#amane-chat .amn-brand-text{ display: flex; flex-direction: column; min-width: 0; }
#amane-chat .amn-head-actions{ display: flex; align-items: center; gap: 8px; flex: none; }
#amane-chat .amn-brand-mark{
  width: auto; height: 40px;
  flex: none;
}
#amane-chat .amn-brand-mark img{ width: auto; height: 100%; object-fit: contain; display: block; }
#amane-chat .amn-brand-name{
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 19px;
  letter-spacing: .01em;
  line-height: 1.1;
}
#amane-chat .amn-brand-sub{
  font-family: var(--font-label, monospace);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#amane-chat .amn-lang{
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(250,246,239,.14);
  flex: none;
}
#amane-chat .amn-lang button{
  border: 0;
  background: transparent;
  color: var(--warm-white, #FAF6EF);
  font-family: var(--font-label, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  opacity: .6;
  transition: background .2s var(--ease, ease), opacity .2s var(--ease, ease), color .2s var(--ease, ease);
}
#amane-chat .amn-lang button.amn-active{ background: var(--warm-white, #FAF6EF); color: var(--coffee, #4A3327); opacity: 1; }
#amane-chat .amn-lang button:focus-visible{ outline: 2px solid var(--warm-white, #FAF6EF); outline-offset: 2px; }
#amane-chat .amn-x{
  width: 28px; height: 28px;
  flex: none;
  border: 1px solid rgba(250,246,239,.2);
  border-radius: 50%;
  background: transparent;
  color: var(--warm-white, #FAF6EF);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease, ease);
}
#amane-chat .amn-head{ position: relative; }
#amane-chat .amn-x:hover{ background: rgba(250,246,239,.14); }
#amane-chat .amn-x:focus-visible{ outline: 2px solid var(--warm-white, #FAF6EF); outline-offset: 2px; }
#amane-chat .amn-tagline{
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .85;
  max-width: 320px;
}

/* ---------------------------------------------------------------- messages */
#amane-chat .amn-log{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 15px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
#amane-chat .amn-log::-webkit-scrollbar{ width: 6px; }
#amane-chat .amn-log::-webkit-scrollbar-thumb{ background: var(--line, rgba(33,29,23,.14)); border-radius: 3px; }

#amane-chat .amn-row{ display: flex; gap: 8px; max-width: 100%; }
#amane-chat .amn-row.amn-user{ justify-content: flex-end; }
#amane-chat .amn-avatar{
  width: 30px; height: 34px;
  flex: none;
  margin-top: 2px;
}
#amane-chat .amn-avatar img{ width: 100%; height: 100%; object-fit: contain; display: block; }

#amane-chat .amn-bubble{
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  max-width: 78%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(33,29,23,.05);
}
#amane-chat .amn-row.amn-bot .amn-bubble{
  background: var(--bone, #EFE7D8);
  color: var(--ink, #211D17);
  border-bottom-left-radius: 4px;
}
#amane-chat .amn-row.amn-user .amn-bubble{
  background: var(--coffee, #4A3327);
  color: var(--warm-white, #FAF6EF);
  border-bottom-right-radius: 4px;
}
#amane-chat .amn-bubble a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- chips */
#amane-chat .amn-stack{ display: flex; flex-direction: column; gap: 5px; }
#amane-chat .amn-chips-label{
  font-family: var(--font-label, monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coffee, #4A3327);
  opacity: .8;
  margin-left: 34px;
}
#amane-chat .amn-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 34px;
  max-width: calc(100% - 34px);
}
#amane-chat .amn-chip{
  border: 1px solid var(--line, rgba(33,29,23,.14));
  background: var(--warm-white, #FAF6EF);
  color: var(--coffee, #4A3327);
  font-family: var(--font-body, serif);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease), color .15s var(--ease, ease);
}
#amane-chat .amn-chip:hover{ border-color: var(--champagne, #B7935E); background: var(--bone, #EFE7D8); }
#amane-chat .amn-chip:focus-visible{ outline: 2px solid var(--olive, #3E4430); outline-offset: 2px; }
#amane-chat .amn-chip.amn-topic{
  border-color: var(--champagne, #B7935E);
  font-family: var(--font-label, monospace);
  font-size: 11px;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------- typing */
#amane-chat .amn-typing{ display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
#amane-chat .amn-typing span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--stone, #B9AD93);
  opacity: .4;
  animation: amn-blink 1.2s infinite;
}
#amane-chat .amn-typing span:nth-child(2){ animation-delay: .2s; }
#amane-chat .amn-typing span:nth-child(3){ animation-delay: .4s; }

/* ---------------------------------------------------------------- footer */
#amane-chat .amn-note{
  text-align: center;
  font-family: var(--font-label, monospace);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--stone, #B9AD93);
  padding: 0 16px 10px;
  background: var(--warm-white, #FAF6EF);
}
#amane-chat .amn-note a{ color: var(--coffee, #4A3327); text-decoration: none; font-weight: 600; }
#amane-chat .amn-note a:hover{ text-decoration: underline; }

#amane-chat .amn-composer{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line, rgba(33,29,23,.14));
  background: var(--warm-white, #FAF6EF);
  flex: none;
}
#amane-chat .amn-composer input{
  flex: 1 1 auto;
  border: 1px solid var(--line, rgba(33,29,23,.14));
  background: var(--bone, #EFE7D8);
  border-radius: 999px;
  padding: 11px 16px;
  font-family: var(--font-body, serif);
  font-size: 14px;
  color: var(--ink, #211D17);
  outline: none;
  transition: border-color .2s var(--ease, ease);
}
#amane-chat .amn-composer input::placeholder{ color: var(--stone, #B9AD93); }
#amane-chat .amn-composer input:focus{ border-color: var(--champagne, #B7935E); }
#amane-chat .amn-composer button{
  width: 40px; height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--amn-accent);
  color: var(--warm-white, #FAF6EF);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s var(--ease, ease), opacity .2s var(--ease, ease);
}
#amane-chat .amn-composer button:active{ transform: scale(.92); }
#amane-chat .amn-composer button:disabled{ opacity: .4; cursor: default; }
#amane-chat .amn-composer button:focus-visible{ outline: 2px solid var(--olive, #3E4430); outline-offset: 2px; }
#amane-chat .amn-composer button svg{ width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Thai */
#amane-chat.amn-th .amn-brand-sub,
#amane-chat.amn-th .amn-chips-label,
#amane-chat.amn-th .amn-chip.amn-topic,
#amane-chat.amn-th .amn-note,
#amane-chat.amn-th .amn-lang button{
  text-transform: none;
  letter-spacing: 0;
}
#amane-chat.amn-th .amn-chips-label{ font-size: 11.5px; }
#amane-chat.amn-th .amn-note{ font-size: 11px; }

/* ---------------------------------------------------------------- motion */
@keyframes amn-blink{ 0%,80%,100%{ opacity:.25; transform: translateY(0); } 40%{ opacity:.9; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce){
  #amane-chat .amn-typing span{ animation: none !important; }
  #amane-chat .amn-panel,
  #amane-chat .amn-fab{ transition-duration: .001s; }
  #amane-chat .amn-log{ scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 600px){
  #amane-chat{
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    --amn-fab: 72px;
  }
  #amane-chat .amn-panel{
    position: fixed;
    right: 10px; left: 10px;
    top: 10px; bottom: 10px;
    width: auto; height: auto;
  }
}