/* ========== Base / Legacy helpers ========== */
* { box-sizing: border-box; }
body { background-color: #edeff2; font-family: "Calibri", "Roboto", sans-serif; }

#textInput { border: 2px solid black; border-bottom: 3px solid aqua; }
.userText, .botText {
  color: white; font-family: monospace; font-size: 17px; line-height: 30px;
}
.userText { text-align: right; }
.userText span { background-color: #009688; padding: 10px; border-radius: 10px; }
.botText { text-align: left; }
.botText span { background-color: #ae312f; padding: 5px; border-radius: 10px; }

/* ========== Brand / Bootstrap overrides ========== */
:root{
  --bs-primary: #6FC267;
  --bs-primary-rgb: 143,163,30;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #6f7f17;
}
/* switches & outline buttons */
.form-switch .form-check-input:checked{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary{ color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary:hover{
  background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
/* primary buttons */
.btn-primary,
.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary:focus { background-color:#6FC267; border-color:#6FC267; }
.btn-primary:hover, .btn-primary:focus:hover { background-color:#6f7f17; border-color:#6f7f17; }
.btn-primary.disabled, .btn-primary:disabled { background-color:#6FC267; border-color:#6FC267; }
.btn-primary:focus, .btn-check:focus+.btn-primary { box-shadow:0 0 0 .25rem rgba(143,163,30,.35); }

/* ========== Navbar (brand-aligned) ========== */
.navbar-mhg {
  --mhg-accent: #6FC267;
  --bs-navbar-padding-y: .5rem;
  overflow-x: hidden;
  font-size: 24px;
}
.navbar-mhg .navbar-brand img { height: 40px; width: auto; object-fit: contain; }
.navbar-mhg .nav-link:hover,
.navbar-mhg .nav-link:focus,
.navbar-mhg .nav-link.active { color: #6FC267; }
.navbar-mhg .navbar-collapse { flex-grow: 1; min-width: 0; }
.navbar-mhg .navbar-text {
  max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navbar-mhg .navbar-toggler { display: none; }
@media (max-width: 991.98px) {
  .navbar-mhg .navbar-toggler { display: inline-block; }
  .navbar-mhg .navbar-text { white-space: normal; }
}
@media (max-width: 576px) {
  .navbar-mhg .navbar-brand img { height: 32px; }
}

/* ========== Chat shell sizing ========== */
.chat-shell { max-width: 96vw; }
@media (min-width: 1600px) { .chat-shell { max-width: 1600px; } }
@media (max-width: 576px) { .chat-shell { max-width: 98vw; } }

/* ========== Chat window layout ========== */
.chat_window{
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 1920px; height: min(850px, 80vh);
  border-radius: 10px; background-color: #fff; margin: 0 auto; overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* header */
.top_menu{ flex: 0 0 auto; background:#fff; width:100%; padding:20px 0 15px; box-shadow:0 1px 30px rgba(0,0,0,0.1); }
.top_menu .title{ text-align:center; color:#bcbdc0; font-size:20px; }
@media (max-width: 576px) { .top_menu .title{ font-size:16px; } }
/* scrollable middle */
.chat-container{
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background:#fff;
}

/* ========== Messages / bubbles ========== */
/* list */
.messages{
  position: relative; list-style:none; padding: 20px 10px 0 10px; margin:0; height:auto; overflow:visible;
}
@media (max-width: 576px){ .messages{ padding-left: 4px; padding-right: 4px; } }
/* item */
.messages .message{ clear: both; overflow: hidden; margin-bottom: 14px; transition: all .5s linear; opacity: 0; }
.messages .message.appeared{ opacity: 1; }

/* avatar (base + responsive) */
.messages .message .avatar{ width: 44px; height: 44px; border-radius: 50%; display:inline-block; background-size: cover; }
@media (max-width: 576px){ .messages .message .avatar{ width: 36px; height: 36px; } }

/* bubble wrapper (base) */
.messages .message .text_wrapper{
  display:inline-block; position:relative;
  padding:16px; border-radius:14px;
  width: calc(100% - 72px); /* keep current width logic */
  max-width: calc(100% - 72px);
}
.messages .message .text_wrapper .text{ font-size:16px; line-height:1.4; white-space: normal; }
@media (max-width: 576px){
  .messages .message .text_wrapper{ padding:10px 12px; border-radius:12px; max-width: calc(100% - 58px); }
  .messages .message .text_wrapper .text{ font-size:15px; line-height:1.35; }
}

/* left (bot) */
.messages .message.left .avatar{ float:left; background: url("../img/clarity_logo.png"); background-size: 100%}
.messages .message.left .text_wrapper{ background-color:#6FC267; margin-left:14px; }
.messages .message.left .text{ color:#EFF5D2; }

/* right (user) */
.messages .message.right .text_wrapper{ background-color:#c7eafc; margin-right:14px; float:right; }
.messages .message.right .text{ color:#45829b; }

/* bubble tails (shared geometry via CSS vars) */
.messages .message .text_wrapper{
  --tail-size: 11px;         /* ::after (colored) */
  --tail-outline: 13px;      /* ::before (outline) */
  --tail-top: 16px;          /* vertical anchor */
}
.messages .message .text_wrapper::after,
.messages .message .text_wrapper::before{
  content:""; position:absolute; pointer-events:none; height:0; width:0;
  top: var(--tail-top); border: solid transparent;
}
.messages .message .text_wrapper::after{  border-width: var(--tail-size);  z-index:2; }
.messages .message .text_wrapper::before{ border-width: var(--tail-outline); z-index:1; }
/* left/right placement + colors */
.messages .message.left  .text_wrapper::after,
.messages .message.left  .text_wrapper::before{ right:100%; }
.messages .message.left  .text_wrapper::after{  border-right-color:#6FC267; }
.messages .message.left  .text_wrapper::before{ border-right-color:transparent; }
.messages .message.right .text_wrapper::after,
.messages .message.right .text_wrapper::before{ left:100%; }
.messages .message.right .text_wrapper::after{  border-left-color:#c7eafc; }
.messages .message.right .text_wrapper::before{ border-left-color:transparent; }
/* mobile tail sizes/position */
@media (max-width: 576px){
  .messages .message .text_wrapper{
    --tail-size: 9px; --tail-outline: 11px; --tail-top: 12px;
  }
}

/* ========== Typing indicator bubble (compact width, equal height) ========== */
.messages .message.typing .text_wrapper{
  display:inline-flex; align-items:center; gap:6px;
  width:auto !important; max-width:none !important; min-width:0 !important;
  padding:16px; opacity:.9;
}
.messages .message.typing .text_wrapper .text{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width: 576px){ .messages .message.typing .text_wrapper{ padding:10px 12px; } }
/* spinner contrast on bot bubble */
.messages .message.left.typing .spinner-grow,
.messages .message.left.typing .spinner-border{ color:#EFF5D2; }

/* ========== Input bar ========== */
.bottom_wrapper{
  flex:0 0 auto; width:100%; background:#fff; padding:20px; position:relative; z-index:1;
}
.bottom_wrapper .message_input_wrapper{
  display:inline-block; position:relative;
  height:50px; width: calc(100% - 160px);
  border:1px solid #bcbdc0; border-radius:25px; padding:0 20px;
}
.bottom_wrapper .message_input_wrapper > .message_input{
  width:100% !important; height:100%; padding:0; border:0; outline:0; box-sizing:border-box; background:transparent;
}
.bottom_wrapper .send_message{
  width:140px; height:50px; display:inline-block; border-radius:50px;
  background-color:#6FC267; border:2px solid #a3d063; color:#fff; cursor:pointer;
  transition: all .2s linear; text-align:center; float:right;
}
.bottom_wrapper .send_message:hover{ color:#a3d063; background-color:#fff; }
.bottom_wrapper .send_message .text{ font-size:18px; font-weight:300; line-height:48px; display:inline-block; }
.bottom_wrapper .send_button_desktop{ margin-left:8px; }
.message_input_wrapper .send_message{ z-index:3; }
/* mobile input bar (arrow on RIGHT, input full width) */
@media (max-width: 576px){
  .bottom_wrapper{ padding:10px 12px; }
  .bottom_wrapper .message_input_wrapper{
    width:100%; height:42px; border-radius:999px; padding:0 44px 0 12px; /* R space for arrow */
  }
  .bottom_wrapper .message_input_wrapper .message_input{ height:100%; font-size:16px; }
  .message_input_wrapper .send_message{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; border-radius:50%; color:var(--bs-primary);
  }
  .message_input_wrapper .send_message svg{ color:var(--bs-primary); }
  .send_button_desktop{ display:none !important; }
}
/* desktop: hide inline arrow, keep big button */
@media (min-width: 576px){ .message_input_wrapper .send_message{ display:none !important; } }

/* ========== Chat window height tweak on very small screens ========== */
@media (max-width: 576px){ .chat_window{ height:85vh; } }

/* ========== Misc ========== */
.message_template{ display:none; }

/* ========== Accordion visual (inactive strong) ========== */
.accordion-item.inactive-strong{
  --bs-accordion-btn-bg: var(--bs-gray-300);
  --bs-accordion-btn-color: var(--bs-gray-900);
  --bs-accordion-btn-active-bg: var(--bs-gray-300);
  --bs-accordion-btn-active-color: var(--bs-gray-900);
  --bs-accordion-border-color: var(--bs-gray-400);
}