:root {
--primary-color: teal; (w3-blue-grey #607d8b);
}

body { font-family:Lato,Roboto,Arial,'Microsoft JhengHei' }

h3 { font-family:Lato,Arial,sans-serif; font-weight:600; color:var(--primary-color) }
b  { color:var(--primary-color) }
a:hover { background:skyblue }
#header .w3-button { padding:6px }

#chatbot { position:fixed; top:98px; bottom:48px; right:10px; width:25%; background:#ddd;border-radius:5px; font-size:12px; }
#chat-header { background:var(--primary-color);color:white; padding:6px;border-radius:5px; }
#chat-lang span { border-radius:10px; margin:2px; padding:4px; background:darkgrey; font-size:10px }
#chat-output  { height:calc(100vh - 234px); overflow:auto; padding:8px }
#chat-prompt  { width:calc(100% - 32px); padding:5px; margin:2px }
#chat-msg     { padding:2px; color:#ddd; background:var(--primary-color); font-size:10px }
#chat-logo    { width:24px; border-radius:8px;  }
.chat-topic span { background:#ccc; color:var(--primary-color); border-radius:4px; font-size:10px; margin:2px; padding:6px; font-weight:400; }
.selected { background:yellow!important; color:blue }
@media (max-width:800px) { 
 #chatbot { display:none; top:110px; bottom:30px; width:95%; z-index:99 } 
 #chat-output  { height:calc(100vh - 250px); z-index:99 } 
}