body {
  margin: 0;
  padding: 10px;
  background: #f5fafd;
  font-family: "Segoe UI", "Roboto", Arial, sans-serif;
}

.maxkb-controls {
  margin: 15px auto 0 auto;
  width: fit-content;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

#turns-count {
  width: 60px;
  font-size: 1.1em;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid #aaa;
}

#start-ai-conv-btn,
#continue-ai-conv-btn,
#reset-conv-btn {
  padding: 10px 30px;
  font-size: 1.2em;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.18s;
}
#continue-ai-conv-btn { background: #20b24d; }
#reset-conv-btn { background: #be2d3a; }
#start-ai-conv-btn:hover { background: #00577c; }
#continue-ai-conv-btn:hover { background: #15893b; }
#reset-conv-btn:hover { background: #a1202b; }

.maxkb-options {
  margin: 8px auto 0 auto;
  text-align: center;
}

label[for="lang"],
label[for="mess-style"],
label[for="ai-app-select"] {
  font-size: 1rem;
  margin: 0 6px 0 12px;
  font-weight: 500;
  color: #184a77;
  vertical-align: middle;
}
#lang, #mess-style, #ai-app-select {
  margin: 12px 0 0 0;
  padding: 7px 18px 7px 12px;
  font-size: 1.08em;
  border-radius: 8px;
  border: 1px solid #b6cbe1;
  background: #f7fafb;
  color: #184a77;
  outline: none;
  box-shadow: 0 2px 7px rgba(3, 60, 140, 0.08);
  appearance: none;
  transition: border-color 0.18s;
}
#lang:focus, #mess-style:focus, #ai-app-select:focus {
  border-color: #04709f;
  background: #eef4fa;
}

.maxkb-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin: 20px auto 0 auto;
}

.maxkb-upload-area {
  background: #f6fafd;
  border: 2px dashed #a5c9e6;
  border-radius: 10px;
  padding: 16px 18px;
  min-width: 260px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.07em;
}
.maxkb-upload-area.dragover {
  border-color: #0073aa;
  background: #e9f3fb;
}
#maxkb-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
#maxkb-upload-label {
  cursor: pointer;
  color: #184a77;
}
#maxkb-upload-file {
  font-weight: 500;
  color: #0073aa;
  margin-left: 8px;
}
#maxkb-upload-delete {
  background: #be2d3a;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 3px 13px;
  margin-left: 8px;
  cursor: pointer;
  font-size: 0.97em;
  transition: background 0.14s;
}
#maxkb-upload-delete:hover {
  background: #a1202b;
}
#maxkb-scenario-btn {
  background: #8964e6;
  color: #fff;
  font-size: 1.09em;
  border: none;
  border-radius: 9px;
  padding: 11px 28px;
  box-shadow: 0 2px 8px rgba(90, 80, 180, 0.07);
  cursor: pointer;
  transition: background 0.15s;
}
#maxkb-scenario-btn:disabled {
  opacity: 0.6;
  filter: grayscale(0.45);
  cursor: not-allowed !important;
}

#maxkb-chatbox-window {
  width: 75vw;
  max-width: 900px;
  min-width: 340px;
  min-height: 500px;
  height: 70vh;
  margin: 30px auto 0 auto;
  box-shadow: 0 8px 36px rgba(0, 80, 140, 0.15);
  border-radius: 18px;
  background: #f9fbfd;
  display: flex;
  flex-direction: column;
  position: relative;
}

.maxkb-header {
  background: #04709f;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  border-radius: 18px 18px 0 0;
  padding: 18px 18px 12px 18px;
  letter-spacing: 0.01em;
}

.maxkb-body {
  flex: 1 1 0;
  padding: 18px 18px 18px 18px;
  overflow-y: auto;
  background: #f6fafd;
  border-bottom: 1px solid #e6ecf4;
}

.maxkb-input-area {
  display: flex;
  gap: 10px;
  padding: 14px 18px 14px 18px;
  background: #f7f9fb;
  border-radius: 0 0 18px 18px;
}

#maxkb-user-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #c7d6e5;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
}

#maxkb-send-btn {
  background: #04709f;
  color: #fff;
  font-size: 1rem;
  padding: 8px 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s;
}
#maxkb-send-btn:hover {
  background: #00577c;
}

/* === Chat message bubbles === */
.maxkb-msg {
  margin: 0 0 20px 0;
  padding: 16px 20px 16px 18px;
  max-width: 70%;
  word-break: break-word;
  line-height: 1.6;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(3, 60, 140, 0.07);
  font-size: 1.09rem;
  position: relative;
  clear: both;
  transition: background 0.16s;
}

.maxkb-msg.me {
  background: #f2f6fa;
  border: 1px solid #c7d6e5;
  color: #003355;
  align-self: flex-start;
}

.maxkb-msg.bot {
  background: #e7eef6;
  border: 1px solid #b2c6db;
  color: #084875;
  align-self: flex-start;
}

.maxkb-msg.aibot {
  background: #f5f5ea;
  color: #222;
  margin-left: auto;
  margin-right: 0;
  align-self: flex-end;
  text-align: left;
  border: none;
  box-shadow: 0 2px 14px rgba(4, 112, 159, 0.1);
}

.maxkb-msg.aitest {
  background: #e6e7fc;
  color: #324;
}

.maxkb-msg.scenario {
  background: #f2efff;
  color: #7040a0;
  border: 1.5px dashed #b29fe1;
  font-style: italic;
}

.maxkb-msg-label {
  font-size: 0.92em;
  opacity: 0.6;
  font-weight: 600;
  margin-right: 10px;
  letter-spacing: 0.02em;
}
.maxkb-msg.aibot .maxkb-msg-label { color: #493939; opacity: 0.82; }
.maxkb-msg.scenario .maxkb-msg-label { color: #7040a0; opacity: 0.85; }

/* Markdown link styling: underline, color, bigger, nice */
.maxkb-msg a {
  color: #1a4de1;
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
  transition: color 0.15s;
  font-size: 1.08em;
}
.maxkb-msg a:hover,
.maxkb-msg a:focus {
  color: #f6931a;
  background: #f0f6ff;
  text-decoration: underline;
  border-radius: 5px;
  outline: none;
}
.maxkb-msg.aitest a {
  color: #1872c1;
}

.maxkb-msg ul,
.maxkb-msg ol {
  margin: 8px 0 8px 24px !important;
  padding-left: 1.3em !important;
  font-size: 1.05em;
}
.maxkb-msg ul li,
.maxkb-msg ol li {
  margin: 5px 0 !important;
  padding-left: 2px !important;
}
.maxkb-msg p {
  margin: 6px 0 !important;
}
.maxkb-msg .hidden {
  display: none !important;
}

@media (max-width: 600px) {
  #maxkb-chatbox-window {
    width: 99vw;
    min-width: 0;
  }
  .maxkb-msg {
    max-width: 97vw;
  }
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 16px;
}
.lds-ellipsis div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--main-color, #0073aa);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) { left: 6px; animation: lds-ellipsis1 0.6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 6px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 26px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 45px; animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(19px, 0); } }

.maxkb-btn-disabled,
button:disabled {
  opacity: 0.55 !important;
  filter: grayscale(0.35);
  cursor: not-allowed !important;
  pointer-events: none;
}