/* =========================================================
   ALPHEX AI — CHATBOT UI
   Premium conversational interface
   ========================================================= */


/* =========================================================
   CHATBOT TOKENS
   ========================================================= */

#alphex-chatbot{
  --chat-bg:#f7f7f5;
  --chat-surface:#ffffff;
  --chat-surface-soft:#f4f3f8;

  --chat-text:#15151a;
  --chat-muted:#74727d;

  --chat-border:rgba(20,20,30,.10);
  --chat-border-strong:rgba(20,20,30,.16);

  --chat-accent:#7057ff;
  --chat-accent-soft:rgba(112,87,255,.10);
  --chat-accent-hover:#6248ed;

  --chat-user-bg:#7057ff;
  --chat-user-text:#ffffff;

  --chat-assistant-bg:transparent;

  --chat-code-bg:#17171d;

  --chat-shadow:
    0 24px 70px rgba(20,20,30,.14),
    0 8px 24px rgba(20,20,30,.08);

  --chat-radius-lg:20px;
  --chat-radius-md:14px;
  --chat-radius-sm:10px;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--chat-text);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] #alphex-chatbot,
html[data-alphex-theme="dark"] #alphex-chatbot,
body[data-theme="dark"] #alphex-chatbot,
body[data-alphex-theme="dark"] #alphex-chatbot{
  --chat-bg:#0e1019;
  --chat-surface:#141620;
  --chat-surface-soft:#1a1c27;

  --chat-text:#f4f3f7;
  --chat-muted:#9998a5;

  --chat-border:rgba(255,255,255,.09);
  --chat-border-strong:rgba(255,255,255,.15);

  --chat-accent:#7057ff;
  --chat-accent-soft:rgba(112,87,255,.16);
  --chat-accent-hover:#806bff;

  --chat-user-bg:#7057ff;
  --chat-user-text:#ffffff;

  --chat-assistant-bg:transparent;

  --chat-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 10px 30px rgba(0,0,0,.30);
}


/* =========================================================
   CHATBOT ROOT
   ========================================================= */

.alphex-chatbot{
  position:fixed;

  right:24px;
  bottom:24px;

  z-index:99990;

  display:flex;
  flex-direction:column;
  align-items:flex-end;

  pointer-events:none;
}


/* =========================================================
   FLOATING TOGGLE
   ========================================================= */

.chat-toggle{
  pointer-events:auto;

  position:relative;

  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;

  gap:10px;

  width:auto;
  min-width:56px;
  height:58px;

  padding:0;

  border:0;

  background:transparent;
  color:var(--chat-text);

  font-family:inherit;

  cursor:pointer;

  transition:
    transform .22s ease;
}


/* =========================================================
   TOGGLE LABEL
   IMPORTANT:
   LABEL = LEFT
   WOLF  = RIGHT
   ========================================================= */

.chat-toggle-label{
  order:1;

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

  flex:0 0 auto;

  width:140px;
  max-width:140px;

  min-height:34px;

  padding:
    0
    11px;

  box-sizing:border-box;

  overflow:hidden;

  border:1px solid var(--chat-border);

  border-radius:999px;

  background:var(--chat-surface);

  box-shadow:
    0 8px 22px rgba(20,20,30,.08);

  color:var(--chat-text);

  font-family:"DM Mono",monospace;

  font-size:11px;
  font-weight:500;

  letter-spacing:.01em;

  white-space:nowrap;

  opacity:0;

  transform:translateX(8px);

  /*
     Slow premium animation.

     12 seconds:
     - 0–18%   hidden
     - 18–28%  fades in
     - 28–72%  stays visible
     - 72–82%  fades out
     - 82–100% hidden
  */

  animation:
    alphex-minibot-label
    12s
    ease-in-out
    infinite;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


/* =========================================================
   LABEL ANIMATION
   ========================================================= */

@keyframes alphex-minibot-label{

  /*
     Hidden
  */

  0%,
  18%{
    opacity:0;
    transform:translateX(8px);
  }


  /*
     Slowly appear
  */

  28%{
    opacity:1;
    transform:translateX(0);
  }


  /*
     Stay visible
  */

  28%,
  72%{
    opacity:1;
    transform:translateX(0);
  }


  /*
     Slowly disappear
  */

  82%{
    opacity:0;
    transform:translateX(8px);
  }


  /*
     Hidden until next cycle
  */

  82%,
  100%{
    opacity:0;
    transform:translateX(8px);
  }
}


/* =========================================================
   ROUND WOLF BUTTON
   WOLF = RIGHT SIDE
   ========================================================= */

.chat-toggle-logo{
  order:2;

  position:relative;

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

  flex:0 0 56px;

  width:56px !important;
  height:56px !important;

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

  max-width:56px !important;
  max-height:56px !important;

  padding:0;

  box-sizing:border-box;

  border:1px solid var(--chat-border-strong);

  border-radius:50%;

  background:var(--chat-surface);

  box-shadow:
    0 12px 32px rgba(20,20,30,.14);

  overflow:hidden;

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


/* =========================================================
   WOLF LOGO
   ========================================================= */

.alphex-wolf-logo{
  display:block;

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  object-position:center;

  user-select:none;

  -webkit-user-drag:none;
}


/*
   Floating wolf gets breathing room.
*/

.chat-toggle-logo .alphex-wolf-logo{
  width:72% !important;
  height:72% !important;

  max-width:72% !important;
  max-height:72% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
}


/* =========================================================
   TOGGLE HOVER
   ========================================================= */

.chat-toggle:hover{
  transform:translateY(-2px);
}

.chat-toggle:hover .chat-toggle-logo{
  border-color:rgba(112,87,255,.35);

  box-shadow:
    0 16px 38px rgba(20,20,30,.18);

  transform:scale(1.03);
}

.chat-toggle:hover .chat-toggle-label{
  border-color:rgba(112,87,255,.24);
}


/* =========================================================
   TOGGLE ACTIVE
   ========================================================= */

.chat-toggle:active{
  transform:translateY(0);
}

.chat-toggle:active .chat-toggle-logo{
  transform:scale(.97);
}


/* =========================================================
   OPEN STATE
   ========================================================= */

.alphex-chatbot[data-chatbot-state="open"] .chat-toggle-logo{
  border-color:var(--chat-accent);

  background:var(--chat-accent);

  box-shadow:
    0 14px 36px rgba(112,87,255,.24);
}

.alphex-chatbot[data-chatbot-state="open"] .chat-toggle-label{
  border-color:rgba(112,87,255,.25);

  color:var(--chat-accent);
}


/* =========================================================
   CHAT WINDOW
   ========================================================= */

.chat-window{
  pointer-events:auto;

  position:absolute;

  right:0;
  bottom:72px;

  width:min(680px, calc(100vw - 32px));
  height:min(760px, calc(100vh - 120px));

  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:var(--chat-bg);

  border:1px solid var(--chat-border);

  border-radius:var(--chat-radius-lg);

  box-shadow:var(--chat-shadow);

  opacity:0;
  visibility:hidden;

  transform:
    translateY(12px)
    scale(.98);

  transform-origin:bottom right;

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

.alphex-chatbot[data-chatbot-state="open"] .chat-window{
  opacity:1;

  visibility:visible;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

.chat-header{
  flex:0 0 auto;

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

  min-height:68px;

  padding:12px 16px;

  border-bottom:1px solid var(--chat-border);

  background:color-mix(
    in srgb,
    var(--chat-bg) 92%,
    var(--chat-surface) 8%
  );
}

.chat-header-identity{
  display:flex;
  align-items:center;

  gap:11px;
}


/* =========================================================
   HEADER WOLF
   ========================================================= */

.chat-brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  width:36px;
  height:36px;

  border:1px solid var(--chat-border);

  border-radius:50%;

  background:var(--chat-surface);

  overflow:hidden;
}

.chat-brand-mark .alphex-wolf-logo{
  width:72% !important;
  height:72% !important;

  max-width:72% !important;
  max-height:72% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
}


/* =========================================================
   HEADER COPY
   ========================================================= */

.chat-brand-copy{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.chat-brand-name{
  font-size:13px;
  font-weight:500;

  letter-spacing:-.01em;
}

.chat-brand-status{
  color:var(--chat-muted);

  font-family:"DM Mono",monospace;

  font-size:9px;

  letter-spacing:.04em;

  text-transform:uppercase;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.chat-header-actions{
  display:flex;
  align-items:center;

  gap:4px;
}

.chat-header-button{
  display:flex;
  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  border:0;

  border-radius:9px;

  background:transparent;

  color:var(--chat-muted);

  font-family:inherit;

  font-size:19px;
  font-weight:400;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease;
}

.chat-header-button:hover{
  background:var(--chat-accent-soft);

  color:var(--chat-text);
}

#chat-new-conversation{
  font-size:20px;
}


/* =========================================================
   CHAT BODY
   ========================================================= */

.chat-messages{
  flex:1 1 auto;

  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  padding:
    32px
    30px
    28px;

  scroll-behavior:smooth;

  scrollbar-width:thin;

  scrollbar-color:
    rgba(112,87,255,.25)
    transparent;
}

.chat-messages::-webkit-scrollbar{
  width:6px;
}

.chat-messages::-webkit-scrollbar-track{
  background:transparent;
}

.chat-messages::-webkit-scrollbar-thumb{
  background:rgba(112,87,255,.22);

  border-radius:999px;
}


/* =========================================================
   WELCOME STATE
   ========================================================= */

.chat-welcome{
  width:min(560px,100%);

  margin:
    42px auto
    30px;

  text-align:center;
}

.chat-welcome-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  width:54px;
  height:54px;

  margin:
    0
    auto
    22px;

  border:1px solid rgba(112,87,255,.18);

  border-radius:50%;

  background:var(--chat-surface);

  overflow:hidden;
}

.chat-welcome-mark .alphex-wolf-logo{
  width:70% !important;
  height:70% !important;

  max-width:70% !important;
  max-height:70% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
}

.chat-welcome-title{
  margin:0;

  color:var(--chat-text);

  font-size:25px;

  line-height:1.25;

  font-weight:300;

  letter-spacing:-.035em;
}

.chat-welcome-text{
  max-width:490px;

  margin:
    12px
    auto
    0;

  color:var(--chat-muted);

  font-size:13px;

  line-height:1.7;
}


/* =========================================================
   SUGGESTED PROMPTS
   ========================================================= */

.chat-suggestions{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:9px;

  margin-top:28px;

  text-align:left;
}

.chat-suggestion{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  min-height:56px;

  padding:
    12px
    14px;

  border:1px solid var(--chat-border);

  border-radius:12px;

  background:var(--chat-surface);

  color:var(--chat-text);

  font-family:inherit;

  text-align:left;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.chat-suggestion:hover{
  border-color:rgba(112,87,255,.30);

  background:var(--chat-accent-soft);

  transform:translateY(-1px);
}

.chat-suggestion-title{
  font-size:11px;

  line-height:1.45;
}

.chat-suggestion-arrow{
  flex:0 0 auto;

  color:var(--chat-accent);

  font-size:14px;
}


/* =========================================================
   RETURNING USER
   ========================================================= */

.chat-returning-user{
  width:min(560px,100%);

  margin:
    10px
    auto
    28px;

  padding:18px;

  border:1px solid rgba(112,87,255,.16);

  border-radius:14px;

  background:var(--chat-accent-soft);
}

.chat-returning-user-title{
  color:var(--chat-text);

  font-size:14px;

  font-weight:500;
}

.chat-returning-user-text{
  margin-top:7px;

  color:var(--chat-muted);

  font-size:11px;

  line-height:1.6;
}

.chat-continue-button{
  display:inline-flex;
  align-items:center;

  gap:8px;

  margin-top:14px;

  padding:
    8px
    11px;

  border:1px solid rgba(112,87,255,.18);

  border-radius:9px;

  background:var(--chat-surface);

  color:var(--chat-accent);

  font-family:inherit;

  font-size:10px;

  font-weight:500;

  cursor:pointer;

  transition:
    background .18s ease,
    border-color .18s ease;
}

.chat-continue-button:hover{
  border-color:rgba(112,87,255,.35);
}


/* =========================================================
   MESSAGE LIST
   ========================================================= */

.chat-message-list{
  display:flex;
  flex-direction:column;

  gap:26px;

  width:min(620px,100%);

  margin:0 auto;
}


/* =========================================================
   MESSAGE BASE
   ========================================================= */

.chat-message{
  display:flex;

  width:100%;

  animation:
    chat-message-in
    .22s
    ease
    both;
}

@keyframes chat-message-in{

  from{
    opacity:0;

    transform:translateY(5px);
  }

  to{
    opacity:1;

    transform:translateY(0);
  }

}


/* =========================================================
   USER MESSAGE
   ========================================================= */

.chat-message-user{
  justify-content:flex-end;
}

.chat-message-user .chat-message-content{
  max-width:min(78%,520px);

  padding:
    11px
    14px;

  border-radius:
    16px
    16px
    4px
    16px;

  background:var(--chat-user-bg);

  color:var(--chat-user-text);

  font-size:13px;

  line-height:1.65;
}


/* =========================================================
   ASSISTANT MESSAGE
   ========================================================= */

.chat-message-assistant{
  justify-content:flex-start;

  gap:11px;
}


/*
   Circular Alphex wolf avatar beside every
   assistant response.
*/

.chat-message-assistant .chat-message-mark{
  flex:0 0 auto;

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

  width:30px;
  height:30px;

  margin-top:2px;

  border:1px solid var(--chat-border);

  border-radius:50%;

  background:var(--chat-surface);

  overflow:hidden;
}

.chat-message-assistant .chat-message-mark .alphex-wolf-logo{
  width:72% !important;
  height:72% !important;

  max-width:72% !important;
  max-height:72% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
}

.chat-message-assistant .chat-message-content{
  max-width:min(86%,560px);

  color:var(--chat-text);

  font-size:13px;

  line-height:1.75;
}


/* =========================================================
   MESSAGE TYPOGRAPHY
   ========================================================= */

.chat-message-content p{
  margin:
    0
    0
    10px;
}

.chat-message-content p:last-child{
  margin-bottom:0;
}

.chat-message-content strong{
  font-weight:500;
}

.chat-message-content a{
  color:var(--chat-accent);

  text-decoration:none;
}

.chat-message-content a:hover{
  text-decoration:underline;
}

.chat-message-content ul,
.chat-message-content ol{
  margin:
    8px
    0
    10px
    20px;

  padding:0;
}

.chat-message-content li{
  margin-bottom:5px;
}


/* =========================================================
   CODE
   ========================================================= */

.chat-message-content pre{
  overflow-x:auto;

  margin:12px 0;

  padding:14px;

  border:1px solid rgba(255,255,255,.08);

  border-radius:10px;

  background:var(--chat-code-bg);

  color:#f5f5f5;

  font-family:
    "DM Mono",
    monospace;

  font-size:11px;

  line-height:1.6;
}

.chat-message-content code{
  font-family:"DM Mono",monospace;

  font-size:.9em;
}

.chat-message-content :not(pre) > code{
  padding:
    2px
    5px;

  border-radius:5px;

  background:var(--chat-surface-soft);

  color:var(--chat-accent);
}


/* =========================================================
   THINKING INDICATOR
   ========================================================= */

.chat-thinking{
  display:flex;
  align-items:center;

  gap:10px;

  width:min(620px,100%);

  margin:0 auto;

  padding-top:2px;
}


/* =========================================================
   THINKING WOLF
   ========================================================= */

.chat-thinking-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  width:30px;
  height:30px;

  border:1px solid var(--chat-border);

  border-radius:50%;

  background:var(--chat-surface);

  overflow:hidden;
}

.chat-thinking-mark .alphex-wolf-logo{
  width:72% !important;
  height:72% !important;

  max-width:72% !important;
  max-height:72% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
}


/* =========================================================
   THINKING DOTS
   ========================================================= */

.chat-thinking-dots{
  display:flex;
  align-items:center;

  gap:4px;
}

.chat-thinking-dots span{
  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--chat-muted);

  animation:
    chat-thinking
    1.2s
    infinite
    ease-in-out;
}

.chat-thinking-dots span:nth-child(2){
  animation-delay:.15s;
}

.chat-thinking-dots span:nth-child(3){
  animation-delay:.30s;
}

@keyframes chat-thinking{

  0%,
  60%,
  100%{
    opacity:.35;

    transform:translateY(0);
  }

  30%{
    opacity:1;

    transform:translateY(-3px);
  }

}


/* =========================================================
   CHAT INPUT AREA
   ========================================================= */

.chat-input-area{
  flex:0 0 auto;

  padding:
    12px
    22px
    16px;

  border-top:1px solid var(--chat-border);

  background:var(--chat-bg);
}

.chat-form{
  width:min(620px,100%);

  margin:0 auto;
}

.chat-input-wrapper{
  display:flex;
  align-items:flex-end;

  gap:8px;

  min-height:52px;

  padding:
    7px
    7px
    7px
    15px;

  border:1px solid var(--chat-border-strong);

  border-radius:16px;

  background:var(--chat-surface);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.chat-input-wrapper:focus-within{
  border-color:rgba(112,87,255,.45);

  box-shadow:
    0 0 0 3px rgba(112,87,255,.08);
}

.chat-input{
  flex:1;

  width:100%;

  min-height:36px;
  max-height:150px;

  padding:
    8px
    0;

  border:0;

  outline:0;

  resize:none;

  background:transparent;

  color:var(--chat-text);

  font-family:inherit;

  font-size:13px;

  line-height:1.55;
}

.chat-input::placeholder{
  color:var(--chat-muted);
}

.chat-input:disabled{
  opacity:.6;

  cursor:not-allowed;
}


/* =========================================================
   SEND BUTTON
   ========================================================= */

.chat-send{
  flex:0 0 auto;

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

  width:36px;
  height:36px;

  border:0;

  border-radius:11px;

  background:var(--chat-accent);

  color:#ffffff;

  cursor:pointer;

  transition:
    background .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.chat-send:hover:not(:disabled){
  background:var(--chat-accent-hover);

  transform:translateY(-1px);
}

.chat-send:active:not(:disabled){
  transform:translateY(0);
}

.chat-send:disabled{
  opacity:.35;

  cursor:not-allowed;
}

.chat-send-icon{
  font-size:18px;

  line-height:1;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.chat-disclaimer{
  width:min(620px,100%);

  margin:
    8px
    auto
    0;

  color:var(--chat-muted);

  font-family:
    "DM Mono",
    monospace;

  font-size:8px;

  line-height:1.5;

  text-align:center;

  opacity:.75;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.chat-toggle:focus-visible,
.chat-header-button:focus-visible,
.chat-suggestion:focus-visible,
.chat-continue-button:focus-visible,
.chat-send:focus-visible{
  outline:2px solid var(--chat-accent);

  outline-offset:3px;
}

.chat-input:focus-visible{
  outline:0;
}


/* =========================================================
   HIDDEN STATE
   ========================================================= */

[hidden]{
  display:none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px){

  .alphex-chatbot{
    right:16px;
    bottom:16px;
  }

  /*
     Keep the same left-text / right-wolf layout
     on mobile.
  */

  .chat-toggle{
    gap:8px;
  }

  .chat-toggle-logo{
    width:52px !important;
    height:52px !important;

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

    max-width:52px !important;
    max-height:52px !important;

    flex-basis:52px;
  }

  .chat-toggle-label{
    width:120px;
    max-width:120px;

    min-height:32px;

    font-size:10px;
  }

  .chat-window{
    position:fixed;

    top:12px;
    right:12px;
    bottom:12px;
    left:12px;

    width:auto;
    height:auto;

    border-radius:18px;

    transform-origin:center;
  }

  .chat-messages{
    padding:
      26px
      18px
      24px;
  }

  .chat-welcome{
    margin:
      30px
      auto
      24px;
  }

  .chat-welcome-title{
    font-size:23px;
  }

  .chat-welcome-text{
    font-size:12px;
  }

  .chat-suggestions{
    grid-template-columns:1fr;
  }

  .chat-message-user .chat-message-content{
    max-width:86%;
  }

  .chat-message-assistant .chat-message-content{
    max-width:88%;
  }

  .chat-input-area{
    padding:
      10px
      14px
      13px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

  .alphex-chatbot{
    right:12px;
    bottom:12px;
  }

  .chat-toggle{
    gap:7px;
  }

  .chat-toggle-logo{
    width:50px !important;
    height:50px !important;

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

    max-width:50px !important;
    max-height:50px !important;

    flex-basis:50px;
  }

  .chat-toggle-label{
    width:108px;
    max-width:108px;

    min-height:30px;

    padding:
      0
      9px;

    font-size:9px;
  }

  .chat-window{
    top:8px;
    right:8px;
    bottom:8px;
    left:8px;

    border-radius:16px;
  }

  .chat-header{
    min-height:62px;

    padding:
      10px
      12px;
  }

  .chat-brand-mark{
    width:34px;
    height:34px;
  }

  .chat-messages{
    padding:
      22px
      14px
      20px;
  }

  .chat-welcome-mark{
    width:48px;
    height:48px;

    margin-bottom:18px;
  }

  .chat-welcome-title{
    font-size:21px;
  }

  .chat-message-list{
    gap:22px;
  }

  .chat-message-user .chat-message-content,
  .chat-message-assistant .chat-message-content{
    max-width:90%;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .chat-window,
  .chat-toggle,
  .chat-toggle-logo,
  .chat-suggestion,
  .chat-send,
  .chat-header-button{
    transition:none;
  }

  .chat-toggle-label{
    animation:none;

    opacity:1;

    transform:none;
  }

  .chat-message{
    animation:none;
  }

  .chat-thinking-dots span{
    animation:none;
  }

}


/* =========================================================
   FINAL WOLF LOGO SIZE SAFETY
   Prevent global site img rules from stretching the wolf
   ========================================================= */

.alphex-chatbot .chat-toggle-logo{
  width:56px !important;
  height:56px !important;

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

  max-width:56px !important;
  max-height:56px !important;

  padding:0 !important;

  overflow:hidden !important;

  border-radius:50% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* =========================================================
   FINAL TOGGLE ORDER
   This guarantees:

   [ Alphex Minibot ] [ WOLF ]

   regardless of the HTML element order.
   ========================================================= */

.alphex-chatbot .chat-toggle-label{
  order:1 !important;
}

.alphex-chatbot .chat-toggle-logo{
  order:2 !important;
}


/* =========================================================
   FINAL FLOATING WOLF
   ========================================================= */

.alphex-chatbot .chat-toggle-logo img.alphex-wolf-logo{
  width:72% !important;
  height:72% !important;

  min-width:0 !important;
  min-height:0 !important;

  max-width:72% !important;
  max-height:72% !important;

  object-fit:contain !important;
  object-position:center !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;
}


/* =========================================================
   FINAL HEADER / MESSAGE / THINKING WOLF
   ========================================================= */

.alphex-chatbot .chat-brand-mark img.alphex-wolf-logo,
.alphex-chatbot .chat-message-mark img.alphex-wolf-logo,
.alphex-chatbot .chat-thinking-mark img.alphex-wolf-logo{
  width:72% !important;
  height:72% !important;

  max-width:72% !important;
  max-height:72% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
  object-position:center !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;
}