:root {
--attendant-color:         #0073aa; --attendant-bg:            #ffffff;
--attendant-border:        #dcdcde;
--attendant-user-bubble:   var(--attendant-color);
--attendant-user-text:     #ffffff;
--attendant-bot-bubble:    #f0f0f1;
--attendant-bot-text:      #1d2327;
--attendant-header-text:   #ffffff;
--attendant-radius-lg:     16px;
--attendant-radius-sm:     8px;
--attendant-shadow:        0 8px 32px rgba(0, 0, 0, 0.22);
--attendant-z:             999999;
--attendant-launcher-size: 56px;
--attendant-panel-width:   360px;
--attendant-panel-height:  520px;
} .attendant-launcher {
position:        fixed;
bottom:          24px;
right:           24px;
z-index:         var(--attendant-z);
width:           var(--attendant-launcher-size);
height:          var(--attendant-launcher-size);
border-radius:   50%;
background:      var(--attendant-color);
color:           var(--attendant-header-text);
border:          none;
cursor:          pointer;
display:         flex;
align-items:     center;
justify-content: center;
box-shadow:      var(--attendant-shadow);
transition:      filter 0.2s, transform 0.15s; -webkit-tap-highlight-color: transparent;
}
.attendant-launcher:hover {
filter:    brightness(0.87);
transform: scale(1.06);
}
.attendant-launcher:active {
transform: scale(0.97);
}
.attendant-launcher:focus-visible {
outline:        2px solid var(--attendant-color);
outline-offset: 3px;
} .attendant-widget {
position:       fixed;
bottom:         calc(var(--attendant-launcher-size) + 16px);
right:          24px;
z-index:        var(--attendant-z);
width:          var(--attendant-panel-width);
max-width:      calc(100vw - 32px);
height:         var(--attendant-panel-height);
max-height:     calc(100vh - 110px);
border-radius:  var(--attendant-radius-lg);
background:     var(--attendant-bg);
box-shadow:     var(--attendant-shadow);
border:         1px solid var(--attendant-border); display:        none;
flex-direction: column;
overflow:       hidden;
transform-origin: bottom right;
}
.attendant-widget.is-open {
display:   flex;
animation: attendant-slide-up 0.2s ease-out both;
}
@keyframes attendant-slide-up {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to   { opacity: 1; transform: translateY(0)    scale(1);    }
} .attendant-widget__header {
display:         flex;
align-items:     center;
justify-content: space-between;
padding:         13px 16px;
background:      var(--attendant-color);
color:           var(--attendant-header-text);
flex-shrink:     0;
gap:             8px;
}
.attendant-widget__title {
font-weight:   600;
font-size:     15px;
white-space:   nowrap;
overflow:      hidden;
text-overflow: ellipsis;
flex:          1;
}
.attendant-widget__close {
background:    transparent;
border:        none;
cursor:        pointer;
color:         inherit;
padding:       4px;
line-height:   1;
border-radius: var(--attendant-radius-sm);
display:       flex;
flex-shrink:   0;
opacity:       0.85;
transition:    opacity 0.15s;
}
.attendant-widget__close:hover {
opacity: 1;
}
.attendant-widget__close:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
} .attendant-widget__messages {
flex:            1;
overflow-y:      auto;
padding:         14px 12px;
display:         flex;
flex-direction:  column;
gap:             10px;
scroll-behavior: smooth;
} .attendant-widget__messages::-webkit-scrollbar       { width: 4px; }
.attendant-widget__messages::-webkit-scrollbar-track  { background: transparent; }
.attendant-widget__messages::-webkit-scrollbar-thumb  {
background:    var(--attendant-border);
border-radius: 2px;
} .attendant-msg {
display:        flex;
flex-direction: column;
max-width:      85%; animation:      attendant-msg-in 0.18s ease-out both;
}
@keyframes attendant-msg-in {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0);   }
}
.attendant-msg--user {
align-self:  flex-end;
align-items: flex-end;
}
.attendant-msg--bot {
align-self:  flex-start;
align-items: flex-start;
} .attendant-msg__bubble {
padding:       10px 13px;
border-radius: var(--attendant-radius-lg);
font-size:     14px;
line-height:   1.55;
word-break:    break-word;
}
.attendant-msg--user .attendant-msg__bubble {
background:                var(--attendant-user-bubble);
color:                     var(--attendant-user-text);
border-bottom-right-radius: 4px;
}
.attendant-msg--bot .attendant-msg__bubble {
background:               var(--attendant-bot-bubble);
color:                    var(--attendant-bot-text);
border-bottom-left-radius: 4px;
} .attendant-msg--agent {
align-self:  flex-start;
align-items: flex-start;
}
.attendant-msg--agent .attendant-msg__bubble {
background:                var(--attendant-bot-bubble);
color:                     var(--attendant-bot-text);
border-bottom-left-radius: 4px;
border-left:               3px solid var(--attendant-brand, #0073aa);
}
.attendant-msg__agent-name {
font-size:     11px;
font-weight:   600;
opacity:       0.7;
margin-bottom: 2px;
} .attendant-divider {
display:     flex;
align-items: center;
text-align:  center;
gap:         10px;
margin:      14px 4px;
color:       #646970;
font-size:   12px;
font-weight: 600;
}
.attendant-divider::before,
.attendant-divider::after {
content:    "";
flex:       1;
height:     1px;
background: rgba(0, 0, 0, 0.12);
}
.attendant-divider span {
white-space: nowrap;
} .attendant-msg__bubble strong { font-weight: 600; }
.attendant-msg__bubble br     { display: block; margin-bottom: 2px; } .attendant-msg--typing .attendant-msg__bubble {
padding: 12px 14px;
}
.attendant-msg--typing .attendant-msg__bubble span {
display:       inline-block;
width:         7px;
height:        7px;
border-radius: 50%;
background:    var(--attendant-color);
margin:        0 2px;
animation:     attendant-bounce 1.3s infinite ease-in-out;
vertical-align: middle;
opacity:       0.7;
}
.attendant-msg--typing .attendant-msg__bubble span:nth-child(2) { animation-delay: 0.22s; }
.attendant-msg--typing .attendant-msg__bubble span:nth-child(3) { animation-delay: 0.44s; }
@keyframes attendant-bounce {
0%, 80%, 100% { transform: scale(0.65); opacity: 0.45; }
40%           { transform: scale(1);    opacity: 1;    }
} .attendant-msg__sources {
margin-top: 6px;
display:    flex;
flex-wrap:  wrap;
gap:        5px;
}
.attendant-msg__sources a {
font-size:       11px;
color:           var(--attendant-color);
text-decoration: none;
background:      rgba(0, 115, 170, 0.07);
padding:         3px 8px;
border-radius:   12px;
border:          1px solid rgba(0, 115, 170, 0.18);
white-space:     nowrap;
overflow:        hidden;
text-overflow:   ellipsis;
max-width:       210px;
transition:      background 0.15s;
}
.attendant-msg__sources a:hover {
background:      rgba(0, 115, 170, 0.14);
text-decoration: underline;
} .attendant-widget__footer {
display:      flex;
align-items:  flex-end;
gap:          8px;
padding:      10px 12px;
border-top:   1px solid var(--attendant-border);
flex-shrink:  0;
background:   var(--attendant-bg);
}
.attendant-widget__input {
flex:          1;
resize:        none;
border:        1px solid var(--attendant-border);
border-radius: var(--attendant-radius-sm);
padding:       8px 10px;
font-size:     14px;
font-family:   inherit;
line-height:   1.45;
min-height:    36px;
max-height:    120px;
overflow-y:    auto;
outline:       none;
color:         var(--attendant-bot-text);
background:    var(--attendant-bg);
transition:    border-color 0.15s;
}
.attendant-widget__input:focus {
border-color: var(--attendant-color);
}
.attendant-widget__input::placeholder {
color:   #8c8f94;
opacity: 1;
}
.attendant-widget__send {
width:           36px;
height:          36px;
flex-shrink:     0;
border-radius:   50%;
background:      var(--attendant-color);
color:           var(--attendant-header-text);
border:          none;
cursor:          pointer;
display:         flex;
align-items:     center;
justify-content: center;
transition:      filter 0.15s, opacity 0.15s;
}
.attendant-widget__send:hover:not(:disabled) {
filter: brightness(0.87);
}
.attendant-widget__send:disabled {
opacity: 0.45;
cursor:  not-allowed;
}
.attendant-widget__send:focus-visible {
outline:        2px solid var(--attendant-color);
outline-offset: 2px;
} @media (max-width: 480px) {
.attendant-widget {
width:         100%;
max-width:     100%;
height:        74svh; height:        74vh;
bottom:        0;
right:         0;
left:          0;
border-radius: var(--attendant-radius-lg) var(--attendant-radius-lg) 0 0;
border-left:   none;
border-right:  none;
border-bottom: none;
transform-origin: bottom center;
}
.attendant-launcher {
bottom: 16px;
right:  16px;
}
} .attendant-widget__hbtn {
background:    transparent;
border:        none;
cursor:        pointer;
color:         inherit;
padding:       4px;
line-height:   1;
border-radius: var(--attendant-radius-sm);
display:       flex;
flex-shrink:   0;
opacity:       0.85;
transition:    opacity 0.15s;
}
.attendant-widget__hbtn:hover {
opacity: 1;
}
.attendant-widget__hbtn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
}  .attendant-widget__history {
display:    none;
flex:       1;
overflow-y: auto;
background: var(--attendant-bg);
}
.attendant-widget.is-history .attendant-widget__history {
display: block;
}
.attendant-widget.is-history .attendant-widget__messages,
.attendant-widget.is-history .attendant-widget__footer {
display: none;
}
.attendant-widget__history-head {
padding:       12px 16px 8px;
font-weight:   600;
font-size:     13px;
color:         var(--attendant-bot-text);
border-bottom: 1px solid var(--attendant-border);
}
.attendant-widget__history-list {
list-style: none;
margin:     0;
padding:    4px 0;
}
.attendant-widget__history-list li {
margin: 0;
}
.attendant-history-empty {
padding:   16px;
color:     #646970;
font-size: 13px;
}
.attendant-history-item {
display:    block;
width:      100%;
text-align: left;
background: transparent;
border:     none;
cursor:     pointer;
padding:    10px 16px;
border-bottom: 1px solid var(--attendant-border);
font:       inherit;
color:      var(--attendant-bot-text);
}
.attendant-history-item:hover {
background: var(--attendant-bot-bubble);
}
.attendant-history-item.is-current {
background: var(--attendant-bot-bubble);
}
.attendant-history-item__label {
display:       block;
font-size:     13.5px;
overflow:      hidden;
text-overflow: ellipsis;
white-space:   nowrap;
}
.attendant-history-item__meta {
display:   block;
font-size: 11.5px;
color:     #8c8f94;
margin-top: 2px;
}  .attendant-chips {
display:   flex;
flex-wrap: wrap;
gap:       8px;
margin:    4px 0 8px;
align-self: flex-start;
}
.attendant-chip {
background:    var(--attendant-bg);
border:        1px solid var(--attendant-color);
color:         var(--attendant-color);
border-radius: 999px;
padding:       6px 14px;
font-size:     13px;
font-family:   inherit;
cursor:        pointer;
transition:    background 0.15s, color 0.15s;
}
.attendant-chip:hover {
background: var(--attendant-color);
color:      var(--attendant-header-text);
}
.attendant-chip:focus-visible {
background: var(--attendant-color);
color:      var(--attendant-header-text);
outline:    2px solid var(--attendant-color);
outline-offset: 2px;
} .attendant-is-hidden { display: none !important; } .attendant-human-offer {
margin:        10px 4px 4px;
padding:       12px;
border:        1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--attendant-radius-lg);
background:    rgba(0, 0, 0, 0.02);
text-align:    center;
}
.attendant-human-offer__note {
font-size:     13px;
color:         #50575e;
margin-bottom: 8px;
}
.attendant-human-offer__btn {
display:       inline-block;
padding:       9px 16px;
border:        0;
border-radius: 999px;
background:    var(--attendant-color, #0073aa);
color:         #fff;
font-size:     13px;
font-weight:   600;
cursor:        pointer;
}
.attendant-human-offer__btn:hover,
.attendant-human-offer__btn:focus {
filter: brightness(1.08);
}