:root{
    
     --chatfloat-bottom: 20px;
     --chatfloat-height:60px;
     --chatfloat-icon-size:3.4rem;
     --chatfloat-text-size:1.8rem;
     --chat-pop--height: 60vh;
     --chat-pop--width:500px;
     --chat-topbar--height: 80px; 
     --chat-bottombar--height:70px;
     --chat-topbar--subtitle:1.5rem;
     --status-text:1.3rem;
     --message-width:80%;

     @media(max-width:980px){
         --chatfloat-bottom: calc((var(--bottombar-height) + env(safe-area-inset-bottom)) + 20px);
         --chatfloat-height:50px;
         --chatfloat-icon-size:2.8rem;
         --chatfloat-text-size:1.6rem;
         --chat-pop--width: calc(100vw);
         --chat-pop--height: 100dvh;
         --chat-topbar--subtitle:1.3rem;
         --status-text:1.2rem;
         --message-width:90%;
    }

}
/* ========================================================================== Floating Icon ========================================================================== */
 .chat-float {
    position: fixed;
    bottom:var(--chatfloat-bottom);
    right: 20px;
    z-index: 9;
     transition: all .3s ease-in-out;
}
 .chat-float.hide {
     opacity: 0;
}
 .chat-float--container {
    display: flex;
    position: relative;
    height: 100%;
    flex-direction: row-reverse;
     cursor: pointer;
}
 .chat-float--text {
    display: flex;
    height: var(--chatfloat-height);
    align-items: center;
    padding: 0;
    border-radius: var(--chatfloat-height);
    background-color: var(--color-secondary);
    color: #fff;
    font-family: var(--font-title);
    font-size: var(--chatfloat-text-size);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.6s ease,opacity 0.6s ease, padding 0.6s ease;
}
 .chat-float--icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--chatfloat-height);
    height: var(--chatfloat-height);
    background-color: var(--color-secondary);
    border-radius: 50%;
    transition: color 0.6s ease, background-color 0.6s ease;
    color: var(--color-light);
}
 .chat-float--icon i {
    font-size:var(--chatfloat-icon-size);
}
 .chat-float--container.load-active .chat-float--icon {
     animation: scaleUpDown 1s ease-in-out forwards;
     transform-origin: right center;
}
 .chat-float--container.scaledown .chat-float--icon {
    animation: scaleDown .6s ease-in-out forwards;
    transform-origin: center center;
    background-color: #fff;
    color: var(--color-secondary);
}
 .chat-float--container.scaleup .chat-float--icon {
     animation: scaleUp .6s ease-in-out forwards;
     transform-origin: center center;
}
 .chat-float--container.scaledown .chat-float--text {
    max-width: 240px;
    opacity: 1;
    padding: 0 var(--chatfloat-height) 0 25px;
}



 @keyframes scaleUpDown {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.2);
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes scaleDown {
     0% {
         transform: scale(1);
    }
     100% {
         transform: scale(.7);
    }
}
 @keyframes scaleUp {
     0% {
         transform: scale(.7);
    }
     100% {
         transform: scale(1);
    }
}
/* ========================================================================== Chat Body ========================================================================== */
/* Popup wrapper */
 .chat-popup {
     position: fixed;
     bottom: calc(-1 * var(--chat-pop--height) - 20px);
     right: 20px;
     width: var(--chat-pop--width);
     height: var(--chat-pop--height);
     border-radius: 10px;
     box-shadow: 0px 0px 10px 8px rgb(0 0 0 / 0.07);
     pointer-events: none;
     transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
     z-index: 999;
}
 .chat-popup.active {
     bottom: 20px;
     opacity: 1;
     pointer-events: auto;
    /* enable clicks */
}
/* Popup container */
 .chat-popup--container {
     height: 100%;
     width: 100%;
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     height: var(--chat-pop--height);
}
/* App shell inside popup */
 .app-shell {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     height: var(--chat-pop--height);
}
/* Topbar */
 .chat-topbar {
     display: flex;
     padding: 5px 15px;
     gap: 20px;
     background: var(--color-primary);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     height: var(--chat-topbar--height);
     align-items: center;
}
 .chat-topbar--left {
     flex: 1;
}
 .chat-topbar--title {
     font-family: var(--font-title);
     font-size: 2.2rem;
     font-weight: 600;
     color: #fff;
     line-height: normal;
     margin-bottom: 2px;
}
 .chat-topbar--subtitle {
     font-size: var(--chat-topbar--subtitle);
     color: var(--color-light);
     opacity: .8;
}
 .chat-topbar--right {
}
/* Close button */
 .close-btn {
     all: unset;
     display: flex;
     border-radius: 50%;
     color: #fff;
     font-size: 1.8rem;
     font-family: var(--font-title);
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: absolute;
     top: 15px;
     right: 15px;
     opacity: 0.7;
     transition: all .3s ease-in-out;
}
 .close-btn:hover{
     opacity: 1;
}
/* Main chat area */
 .chat-pane {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: calc(var(--chat-pop--height) - var(--chat-topbar--height));
     position: relative;
}
 .chat-pane::before{
     content: "";
     position: absolute;
     top:0px;
     left: 0px;
     width:100%;
     height: 15px;
     background-color: #fff;
}
 .chat-window {
    padding: 15px;
    overflow: hidden;
    overflow-y: auto;
    display: grid;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    align-items: flex-start;
    height: calc(var(--chat-pop--height) - (var(--chat-topbar--height) + var(--chat-bottombar--height)));
    align-content: flex-start;
    flex: 1;
     position: relative;
}
 .chat-window .message {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    max-width:var(--message-width);
}
 .chat-window .message.message-user {
    margin-left: auto;
}
.chat-window .message .avatar{
    font-size: 1.8rem;
    color: var(--color-secondary);
}
 .chat-window .message .bubble {
    padding: 10px;
    border-radius: 10px;
    background: #eee;
    font-size: 1.4rem;
    width: auto;
    white-space: pre-wrap;
    line-height: normal;
}

.chat-window .message .bubble a{ text-decoration: underline;}

 .chat-window .message.message-user .bubble {
    background: var(--color-secondary);
    color: #fff;
}

.chat-window .message-assistant .bubble:has(.typing) {
    background-color: transparent;
    padding: 0px;
    transition: opacity 0.15s ease;
}

.typing {
  display: inline-flex;
  gap: 2px;
  font-size: 4rem;
  align-items: flex-end; /* ensures dots start at the same baseline */
  line-height: 0;
  font-weight: 900;
  color: var(--color-primary);
}

.typing span {
  display: inline-block;
  animation: bounce 0.9s infinite ease-in-out;
}

.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce { 
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  40% {
    transform: translateY(-8px); /* move dot up */
    opacity: 1;
  }
}


/* Input area */
 .input-area {
     display: flex;
     padding: 10px 15px;
     min-height: var(--chat-bottombar--height);
     width: 100%;
     flex-direction: column;
     justify-content: center;
     gap: 5px;
}
 .input-row {
     display: flex;
     width: 100%;
     align-items: flex-end;
     gap: 5px;
}
 .input-wrapper {
     flex: 1;
     background: #f4f4f4;
     border-radius: 10px;
     border: 1px solid #ddd;
     padding: 8px 14px;
     display: flex;
     align-items: center;
     margin-right: 10px;
}
 textarea#input {
     flex: 1;
     resize: none;
     border: none;
     outline: none;
     background: transparent;
     color: var(--color-primary);
     font: 1.4rem / 1.4 var(--font-body);
     max-height: 80px;
}
 .input-wrapper:has(textarea#input:focus){
    border-color: var(--color-primary);
 }
/* Send button */
 .send-btn {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1px solid var(--color-secondary);
     background: var(--color-secondary);
     color: #fff;
     font-size: 1.6rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     flex-shrink: 0;
}
.send-btn:disabled{
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}
/* Reset button */
 .reset-btn {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1px solid #ddd;
     background: #fff;
     color: var(--color-primary);
     font-size: 1.8rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     flex-shrink: 0;
}
.reset-btn:disabled{
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}
/* Status text */
 .status-text {
     font-size: var(--status-text);
     color: var(--color-primary-transparent);
     position: relative;
     padding-left: 15px;
     display: flex;
     align-items: center;
}
 .status-text::before {
     content: "";
     position: absolute;
     display: flex;
     align-items: center;
     left:0;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: var(--color-primary-transparent);
}
 .status-text.status-error::before {
     background-color: var(--color-error);
}
 .status-text.status-ok::before {
     background-color: var(--color-success);
}
 .status-text.status-loading {
     display: none;
}


/* Overlay that covers chat */
#reset-confirm-overlay {
  display: none; /* hidden by default */
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary-transparent);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* Modal box */
#reset-confirm-box {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center; 
  max-width: 100%;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 15px;
}


@media(max-width:980px){ 

    body.chat-lock {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .chat-popup{ 
        right: 0
    }
    .chat-popup.active{
        bottom: 0;
        border-radius: 0px;
        z-index: 9999;
    }
    .chat-popup--container, .chat-topbar, .chat-pane{ 
        border-radius: 0px;
    }
    .chat-window{ 
        height: auto;
    }

    .input-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .input-area:has(textarea#input:focus){
        padding-bottom: 10px;
    }
}