/* ——— Hansa style.css 2025-04-24 ——— */

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;       /* <- was flex-start */
  height: 100vh;
}

#chat-widget{
  max-width:100%;width:1000px;height:490px;
  border:1px solid #ccc;border-radius:15px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  background:#fff;display:flex;flex-direction:column;overflow:hidden;
}

/* header */
.chat-header{
  background:#f40c1e;color:#fff;height:35px;padding:5px 10px;
  box-sizing:border-box;border-radius:15px 15px 0 0;
  display:flex;justify-content:center;align-items:center;
  font-size:12px;font-weight:bold;
}

/* messages */
#messages{flex:1;overflow-y:auto;padding:10px;background:#fff;}

.welcome-logo {display:block;margin:10px auto;max-width:290px;height:62px;object-fit:contain;}
.welcome-logo1{display:block;margin:0 auto 10px;max-width:280px;height:150px;object-fit:contain;}
.welcome-text{text-align:center;font-size:15px;color:#f40c1e;font-weight:bold;margin-bottom:10px;}

.message.assistant{
  background:#f2f2f2;color:#333;
  padding:10px;margin:10px 0;border-radius:8px;
  line-height:1.5;font-size:16px;font-weight:bold;white-space:pre-wrap;
  word-break:break-all;            /* NEW — allows wrap in any long word */
  overflow-wrap:anywhere;
}
.message.user{
  text-align:right;color:#000;padding:5px;font-size:14px;font-weight:bold;
  word-break:break-all;            /* NEW */
  overflow-wrap:anywhere;
}
.message.error{color:red;font-size:12px;padding:5px;}
.message.assistant img{max-width:50%;display:block;margin:10px auto;}

.sponsor-text {
  text-align: center;
  margin-top: 5px;
  font-size: 11px;
  color: #f40c1e; 
  font-weight: bold;
}

/* input row */
.input-area{display:flex;padding:10px;border-top:1px solid #ccc;gap:10px;}
#messageInput{flex:1;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:14px;}

.send-button{
  background:#f40c1e;color:#fff;border:none;height:30px;padding:0 22px;
  border-radius:6px;font-size:14px;cursor:pointer;
}
.send-button:hover{background:#d60c18;}

/* footer */
.chat-footer{display:flex;justify-content:space-around;align-items:center;
             padding:10px;border-top:1px solid #ccc;background:#fff;}
.action-btn{background:#f40c1e;color:#fff;border:none;height:30px;padding:0 22px;
            border-radius:6px;font-size:14px;cursor:pointer;}
.action-btn:hover{background:#b80c15;}

.mic-button{background:#fff;border:1px solid #ccc;border-radius:6px;
            width:37px;height:37px;cursor:pointer;
            display:flex;align-items:center;justify-content:center;}
.mic-button:hover{background:#f8f8f8;}

/* progress */
#progressBarContainer{width:300px;height:10px;border:1px solid #000;display:none;margin:10px auto;}
#progressBar{width:0;height:100%;background:#4caf50;transition:width .2s ease;}

/* language picker */
#languagePanel{display:none;margin-top:8px;text-align:center;}
#languagePanel>div{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}

.lang-btn{background:transparent;border:none;padding:0;margin:3px 2px;cursor:pointer;}
.lang-btn img{width:20px;height:auto;display:block;pointer-events:none;}
.lang-btn:hover{opacity:.8;}

@media(max-width:600px){
  #chat-widget{height:92vh;}
  .welcome-text{font-size:14px;}
  .action-btn,.send-button{font-size:12px;padding:0 14px;}
  }

  .message.assistant ul,
  .message.assistant ol {
    margin: 0.6em 0 0.8em;
    padding-left: 1.25em;
  }
  .message.assistant li {
    margin: 0.35em 0;
    line-height: 1.6;
  }
}