:root{
    --accent:#FE0000;
    --btn:#399B39;
    --bg:#f7f8fa;
}

/* Open button (bottom-right) */
#openChatBtn{
    position:fixed;
    right:55px;
    bottom:22px;
    z-index:1100;
    cursor:pointer;
    border:none;
    font-size:14px;
    text-align: left;

    width: 184px;
    height: 48px;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #5a5a5a;
    padding: 0 36px 0 20px;
    margin-right: -36px;
    border-radius: 8px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .2);
    flex: 1 1 auto;
}
#openChatBtn:hover{ transform:scale(1.03) }
#openChatBtn img{ position:absolute; right:-10px; bottom:-12px }

/* Widget */
#chatWidget{
    position:fixed; right:20px; bottom:20px;
    width:360px; height:520px; display:none; flex-direction:column;
    border-radius:12px; box-shadow:0 10px 36px rgba(0,0,0,0.2); overflow:hidden; background:#fff; z-index:1200;
}

/* Header */
#chatHeader{
    background:var(--accent); color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
}
#headerTitle{ font-weight:600; font-size:18px; }
#headerControls{ display:flex; gap:8px; align-items:center; }
.iconBtn{ background:transparent; border:none; color:#fff; font-size:18px; cursor:pointer; padding:6px; border-radius:6px; }
.iconBtn:hover{ opacity:.9; }

/* Contact Panel (overlays chat, shows before chat starts and for edit) */
#contactPanel{
    position:relative; z-index:1250;
    padding:14px; background:#fafafa; border-bottom:1px solid #eee; transition:max-height .26s ease,padding .26s ease;
    box-sizing:border-box;
}
#contactPanel.hidden{ max-height:0; padding:0 14px; overflow:hidden; border-bottom:none; }
#contactPanel .titel{ display:block; font-size:23px; color:#333; margin-bottom:10px; text-align:left; }
#contactPanel .notice{ display:block; font-size:14px; color:#333; margin-bottom:10px; text-align:justify; }

#chatFooter{ font-size:11px; margin-top:187px; margin-bottom:0; color:#9d9d9d; text-align:justify; }
#chatFooter a{ font-size:11px; color:#9d9d9d; text-decoration:none; margin:0; font-weight:normal; }
#chatFooter a:hover{ color:black; }

/* fields */
.contactRow{ margin-bottom:8px; }
.contactRow input{
    width:100%; box-sizing:border-box; padding:10px; border-radius:8px; border:1px solid #ccc; font-size:14px;
}
.fieldError{ color:#b00020; font-size:13px; margin-top:6px; display:none; }

/* actions */
.contactActions{ display:flex; gap:8px; margin-top:8px; justify-content:flex-end; }
#startChatBtn{ width:100%; padding:10px; background:var(--btn); color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:14px; }
#startChatBtn:hover{ opacity:.95; }

/* Chat area */
#chatArea{ display:flex; flex-direction:column; height:100%; min-height:0; }
#chatBox{ flex:1; overflow-y:auto; padding:12px; background:var(--bg); box-sizing:border-box; }

/* messages */
.message{
    display:flex; margin:8px 0; width:100%; max-width:100%;
    font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.assistant{ justify-content:flex-start; }
.assistant .bubble{ font-size:16px; text-align:left; color:black; background:#F2F2F2; padding:10px 14px; border-radius:14px 14px 14px 6px; max-width:76%; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.user{ justify-content:flex-end; }
.user .bubble{ font-size:16px; text-align:left; color:black; background:#d1eaff; padding:10px 14px; border-radius:14px 14px 6px 14px; box-shadow:0 1px 3px rgba(0,0,0,.08); max-width:86%; margin-left:48px; }

/* typing indicator */
.typing{ display:flex; align-items:center; margin:8px 0; }
.typing .bubble{ background:#F2F2F2; padding:10px 14px; border-radius:14px; display:flex; gap:6px; }
.dot{ width:7px; height:7px; background:#6c8f7c; border-radius:50%; opacity:.2; animation:blink 1.4s infinite both; }
.dot:nth-child(2){ animation-delay:.2s } .dot:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%{opacity:.2} 20%{opacity:1} 100%{opacity:.2} }

/* Input area (fixed to bottom inside widget) */
#inputContainer{ display:flex; gap:8px; padding:10px; border-top:1px solid #eee; align-items:flex-end; background:#fff; box-sizing:border-box; }
#question{
    flex:1; padding:10px; border-radius:12px; border:1px solid #ccc; font-size:16px;
    height:38px; min-height:38px; max-height:140px; resize:none; overflow-y:hidden; box-sizing:border-box;
    font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    color:black; margin:0;
}
.sendBtn{ background:var(--btn); color:#fff; border:none; padding:10px; border-radius:12px; cursor:pointer; font-size:16px; }
.sendBtn:hover{ opacity:.95 }

/* ensure contactPanel overlays chat and buttons visible */
#contactPanel, #chatHeader{ z-index:1300; }

/* small error hint area under panel primary action */
#contactError{ color:#b00020; font-size:13px; margin-top:6px; display:none; }

@media screen and (max-width: 420px) {
    #chatWidget{ width: 100%; right: 0; bottom: 0; border-radius: 0; }
}