/* =========================================================
   XENYRA CHAT MODULE
   Floating Xenyra AI chat window and chat input system
   AWS-ready staging file
   ========================================================= */


/* =========================================================
   1. FLOATING CHAT SHELL
   ========================================================= */

.xenyra-chat{
  position:fixed;
  right:22px;
  bottom:22px;

  width:min(420px,95vw);
  max-height:80vh;

  display:none;

  z-index:13050;
}

.xenyra-chat.is-open{
  display:block;
}

.xenyra-chat-inner{
  max-height:80vh;

  display:flex;
  flex-direction:column;

  border-radius:22px;
  border:1px solid var(--line);

  background:#ffffff;

  box-shadow:0 26px 80px rgba(0,0,0,.45);

  overflow:visible;
}


/* =========================================================
   2. CHAT HEADER
   ========================================================= */

.xenyra-chat-header{
  padding:10px 12px 8px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  border-bottom:1px solid var(--line);
}

.xenyra-chat-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.xenyra-chat-text strong{
  display:block;

  color:var(--ink);

  font-size:14px;
  line-height:1.2;
}

.xenyra-chat-text span{
  display:block;

  color:var(--muted);

  font-size:11px;
  line-height:1.3;
}

.xenyra-chat-header .xenyra-orb{
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
}

.xenyra-chat-header .xenyra-logo{
  width:16px;
  height:16px;
}


/* =========================================================
   3. CHAT BODY / MESSAGES
   ========================================================= */

.xenyra-chat-body{
  max-height:calc(80vh - 120px);

  padding:10px 10px 8px;

  overflow-y:auto;
}

.xenyra-chat-messages{
  display:flex;
  flex-direction:column;
  gap:8px;

  font-size:13px;
}

.xmsg{
  max-width:85%;

  padding:7px 10px;
  border-radius:14px;

  line-height:1.4;

  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

.xmsg-user{
  margin-left:auto;

  background:#e5f2e9;
  color:#0b2d1f;
}

.xmsg-bot{
  margin-right:auto;

  background:#f6fbf7;
  color:#173b2a;
}


/* =========================================================
   4. CHAT FORM / INPUT ROW
   ========================================================= */

.xenyra-chat-form{
  width:100% !important;

  display:flex !important;
  align-items:flex-end;
  gap:6px;

  padding:10px;

  border-top:1px solid var(--line);
}

.xenyra-input-wrap{
  flex:1 !important;
  width:100% !important;

  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 12px;
  border-radius:18px;
  border:1px solid #d7eadf;

  background:#ffffff;
}

#xenyra-input{
  flex:1;

  min-height:28px;

  border:0 !important;
  outline:0 !important;
  background:transparent !important;

  color:var(--ink);

  font-size:13px;
  line-height:1.35;

  resize:none;
}

#xenyra-input:focus{
  border-color:transparent;
  box-shadow:none;
}


/* =========================================================
   5. CHAT CLEAR X
   ========================================================= */

.xenyra-clear{
  -webkit-appearance:none;
  appearance:none;

  width:34px !important;
  height:34px !important;
  min-width:34px !important;

  padding:0;

  display:none;
  align-items:center;
  justify-content:center;

  border:1px solid transparent !important;
  border-radius:999px !important;

  background:transparent !important;

  cursor:pointer;
}

.xenyra-input-wrap.has-value .xenyra-clear{
  display:flex !important;
}

.xenyra-clear span{
  position:relative;

  width:11px;
  height:11px;

  display:block;
}

.xenyra-clear span::before,
.xenyra-clear span::after{
  content:"";

  position:absolute;
  top:50%;
  left:50%;

  width:11px;
  height:2px;

  border-radius:2px;

  background:#4a5f52;

  transform-origin:center;
}

.xenyra-clear span::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.xenyra-clear span::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}


/* =========================================================
   6. CHAT MIC / SEND BUTTONS
   ========================================================= */

#xenyra-chat-shell button{
  -webkit-appearance:none !important;
  appearance:none !important;

  padding:0 !important;

  border:0 !important;
  outline:none !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

#xenyra-chat-shell .xenyra-voice,
#xenyra-chat-shell .xenyra-send{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:34px !important;
  height:34px !important;
  min-width:34px !important;

  border-radius:999px !important;
  border:1px solid transparent !important;

  background:transparent !important;

  box-shadow:none !important;

  cursor:pointer;

  opacity:1 !important;
  visibility:visible !important;

  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .10s ease;
}

#xenyra-chat-shell .xenyra-voice svg,
#xenyra-chat-shell .xenyra-send svg{
  display:block !important;

  width:18px !important;
  height:18px !important;

  fill:none !important;
  stroke:#165c34 !important;
  stroke-width:1.9 !important;

  opacity:1 !important;
  visibility:visible !important;
}

#xenyra-chat-shell .xenyra-voice svg *,
#xenyra-chat-shell .xenyra-send svg *{
  fill:none !important;
  stroke:#165c34 !important;

  opacity:1 !important;
  visibility:visible !important;
}

#xenyra-chat-shell .xenyra-voice:hover,
#xenyra-chat-shell .xenyra-send:hover{
  background:rgba(22,92,52,.03) !important;
  border-color:#d3e4da !important;

  box-shadow:
    0 0 0 14px rgba(22,92,52,.03),
    0 10px 22px rgba(0,0,0,.10) !important;

  transform:translateY(-1px);
}

#xenyra-chat-shell .xenyra-voice:hover svg,
#xenyra-chat-shell .xenyra-send:hover svg{
  stroke:var(--brand) !important;
  stroke-width:2.1 !important;
}


/* =========================================================
   7. SEND LOADER
   ========================================================= */

.xenyra-send .send-loader{
  display:none;

  width:14px;
  height:14px;

  border-radius:999px;
  border:2px solid rgba(22,92,52,.18);
  border-top-color:#165c34;

  animation:xenyra-chat-spin .7s linear infinite;
}

.xenyra-send.is-loading .send-icon{
  display:none;
}

.xenyra-send.is-loading .send-loader{
  display:block;
}


/* =========================================================
   8. MIC RECORDING STATE
   ========================================================= */

#xenyra-chat-shell .xenyra-voice{
  position:relative;
}

.xenyra-voice.is-recording{
  background:#ffffff !important;
  border:1px solid #d7eadf !important;

  box-shadow:0 10px 22px rgba(0,0,0,.14) !important;

  animation:xenyra-chat-breathe 1.4s ease-in-out infinite alternate;
}

#xenyra-chat-shell .xenyra-voice::after{
  content:attr(data-tooltip);

  position:absolute;
  left:50%;
  bottom:-40px;

  padding:4px 10px;
  border-radius:999px;

  background:#173b2a;
  color:#ffffff;

  font-size:12px;
  line-height:1.4;
  white-space:nowrap;

  opacity:0;
  pointer-events:none;

  box-shadow:0 8px 18px rgba(0,0,0,.25);

  transform:translateX(-50%) translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}

#xenyra-chat-shell .xenyra-voice.is-recording::after{
  opacity:1;

  transform:translateX(-50%) translateY(0);
}

#xenyra-chat-shell .xenyra-voice:disabled svg{
  opacity:.45 !important;
}


/* =========================================================
   9. MOBILE CHAT
   ========================================================= */

@media (max-width:640px){
  .xenyra-chat{
    right:10px;
    bottom:10px;

    width:calc(100vw - 20px);
    max-height:82vh;
  }

  .xenyra-chat-inner{
    max-height:82vh;
  }

  .xenyra-chat-body{
    max-height:calc(82vh - 125px);
  }
}


/* =========================================================
   10. ANIMATIONS
   ========================================================= */

@keyframes xenyra-chat-spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes xenyra-chat-breathe{
  from{
    transform:translateY(-1px) scale(1);
    box-shadow:0 10px 22px rgba(0,0,0,.10);
  }

  to{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 14px 30px rgba(0,0,0,.16);
  }
}