/* Mississippi Chatbot — module styles
   Converted from _chatbot.scss; Foundation breakpoint mixins replaced with raw @media queries.
   Mississippi color palette:
     navy  #002147
     cream #F5E1A4
     red   #B71234
*/

iframe#launcher { display: none; }

#webchat .webchat__basic-transcript { max-height: 360px; border-radius: .75rem; }
#webchat section { background: #FFF !important; box-shadow: none !important; margin: 0 !important; }
#webchat .webchat__send-box__main { border-radius: .75rem !important; display: flex; align-items: center; justify-content: center; margin-top: 1rem; padding: 1.5rem; border-top: none !important; }
#webchat input.webchat__send-box-text-box__input { border: solid #002147; box-shadow: none; padding: 1rem; background: #EEE; margin: 0; border-radius: 0.75rem; }
#webchat > div > div[role="complementary"] { background: transparent; }
#webchat input:hover { text-decoration: none !important; }
#webchat .webchat__bubble__content { border-radius: 0.75rem; }
#webchat .webchat__bubble.webchat__bubble--from-user .webchat__bubble__content { background: #002147; border: none; color: #FFF; }
#webchat .webchat__bubble.webchat__bubble--from-user .webchat__bubble__content a { color: #FFF; }
#webchat.homechat { background: #f4f4f4; border-radius: 0.75rem; padding: 1rem; position: relative; z-index: 20; }
#webchat .webchat__icon-button { background: #002147 !important; border-radius: .75rem; padding: .5rem !important; width: 55px !important; height: 55px !important; margin-left: 1rem; }
#webchat .webchat__icon-button svg { fill: #FFF; }
#webchat .webchat__send-box-text-box { padding: 0; }

#webchat.floatchat { display: none; position: fixed; bottom: 1rem; right: 1rem; max-width: 360px; background: #FFF; border-radius: 0.75rem; padding: .5rem; box-shadow: 0px 0px 0px 10px rgba(191, 203, 216, 0.2); }
#webchat.floatchat p { font-size: .9rem; line-height: 1.2rem; }
#webchat.floatchat .webchat__send-box__main { padding: .5rem; margin-top: 0; }
#webchat.floatchat .webchat__icon-button { display: none; }
#webchat.floatchat #floatchat-header { background: #002147; border: solid 1px #FFF; color: #FFF; padding: .75rem; text-align: center; border-radius: .75rem .75rem 0 0; margin: -.5rem -.5rem .5rem -.5rem; font-weight: bold; }
#webchat.floatchat #floatchat-header #floatchat-close { position: absolute; right: 0.5rem; width: 2rem; overflow: hidden; height: 2rem; font-size: 1.5rem; top: .5rem; cursor: pointer; }

/* Floating Chat Button */
#floatchat-btn {
  position: fixed; right: 1rem; bottom: 1rem;
  height: 6rem; width: 6rem;
  background: #F5E1A4;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border-radius: 6rem; padding: .5rem; font-size: .85rem;
  border: solid 3px #FFF; font-weight: bold; text-align: center;
  color: #002147; cursor: pointer;
}
#floatchat-btn span { color: #002147; font-size: 2rem; }

.webchat__icon-button:not(:disabled):not([aria-disabled="true"]):not(:active):hover .webchat__icon-button__shade { background-color: rgba(243, 242, 241, .1) !important; cursor: pointer; }

.ac-textBlock { font-size: 16px !important; }
.ac-container { justify-content: center !important; }
.layer-content { display: none; }
img.chat-logo { border-radius: 5rem; max-height: 3rem; }
.ai-response-container, .layer-content-greeting-message-container { display: flex; }
.ai-response h3 { font-size: 1.4rem; }
.ai-response a { transition: all, 0.15s; }
.ai-response a:hover { color: #002D5A; text-decoration: underline; }

.ai-response, p.layer-content-greeting-message {
  display: flex; flex-direction: column; margin-left: 1rem;
  background-color: #F0F0F0; padding: 1rem; border-radius: .5rem;
  max-width: 70%; position: relative;
}

.response > div:not(.layer-content-greeting-message-container) .aiResponse { margin-bottom: 2rem; }

.ai-request .userText { background: #0E69DD; display: inline-block; color: #FFF; padding: .5rem; border-radius: .5rem; }
.ai-request { display: flex; justify-content: flex-end; }

.feedback-icons span { padding: 0 .25rem; color: #777; }
.feedback-icons { order: 2; align-self: flex-end; max-width: 1rem; position: absolute; right: -1.5rem; bottom: 0.5rem; }

span.thumbsup { bottom: 0.15rem; display: inline-block; position: relative; cursor: pointer; opacity: .25; }
span.thumbsup:hover { opacity: 1; }
span.thumbsdown { display: inline-block; top: 0.15rem; position: relative; cursor: pointer; opacity: .25; }
span.thumbsdown:hover { opacity: 1; }
span.thumbsup.clicked { color: green; opacity: 1; }
span.thumbsdown.clicked { color: red; opacity: 1; }

.widget-body .response { max-height: calc(100vh - 32rem); overflow: auto; background: #FFF; border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; min-height: 15rem; }
.zen-btn { display: none; }

.input-area { background: #FFF; border-radius: .5rem; padding: 1rem; }
.input-area .customer-footer { text-align: center; margin-top: 0.5rem; }

.request-sender textarea { border: solid 3px #002147; box-shadow: none; border-radius: .5rem; padding: 1rem; flex: 1 auto; margin: 0 1rem 0 0; height: auto !important; }

@media (max-width: 39.9375em) {
  .request-sender textarea { margin: 0 .5rem 0 0; padding: .5rem; font-size: 16px; height: 3rem !important; }
}

.request-sender button.send-icon { background: #B71234; color: #FFF; cursor: pointer; padding: 0 1.5rem; border-radius: .5rem; font-size: 1.5rem; transition: all, 0.25s; border: none; }
.request-sender button.send-icon:hover { color: #002D5A; background: #c8243f; }

@media (max-width: 39.9375em) {
  .request-sender button.send-icon { padding: 0 .5rem; }
  img.chat-logo { max-height: 2rem; }
  .ai-response, p.layer-content-greeting-message, .ai-request .userText { padding: .5rem; font-size: .85rem; }
  .widget-body .response { padding: .5rem; }
  .ai-response, p.layer-content-greeting-message { margin-left: .5rem; max-width: 80%; }
}

.request-sender { display: flex; }

/* VOICE SEARCH */
@keyframes ms-chatbot-pulse-icon {
  0%   { color: #002147; }
  70%  { color: #ffb656; }
  100% { color: #002147; }
}
@keyframes ms-chatbot-pulse-icon-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#webchat .request-sender .button_ai-voice-search {
  background: #ffffff; color: #002147; padding: 0; margin: 0 1rem 0 0;
  font-size: 1.5rem; cursor: pointer; transition: all, 0.25s; border: none;
}
#webchat .request-sender .button_ai-voice-search:hover { color: #F5E1A4; }
#webchat .request-sender .button_ai-voice-search.listening { animation: ms-chatbot-pulse-icon-scale 1s infinite; color: #ffb656; }
#webchat .request-sender .button_ai-voice-search.listening span { animation: ms-chatbot-pulse-icon 1s infinite; }

@media (max-width: 39.9375em) {
  #webchat .request-sender .button_ai-voice-search { background: #ffffff; color: #002147; padding: 0; margin: 0 .5rem 0 0; font-size: 1.5rem; }
}

/* AI Overlay */
#aiOverlay {
  position: fixed; z-index: 9998;
  top: 7.5rem;
  width: calc(100% - 4rem); height: calc(100vh - 4.5rem);
  background: rgba(0, 20, 41, 0.75);
  backdrop-filter: blur(10px);
  border-radius: 20px; padding: 2rem; margin: 2rem;
  display: none; opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 63.9375em) {
  #aiOverlay { flex-flow: column-reverse; top: 6rem; height: calc(100vh - 6rem); }
}
@media (max-width: 39.9375em) {
  #aiOverlay { padding: 0; margin: 0; width: 100%; border-radius: 0; }
}

#aiOverlay #aiQuestions { padding: 2rem; background: #EEE; border-radius: 10px; flex: 0 25%; overflow: auto; }
#aiOverlay #aiQuestions h2 { font-size: 1.1rem; font-weight: bold; color: #001429; }
#aiOverlay #aiQuestions #aiQuestionsList { margin: 0; padding: 0; display: flex; flex-direction: column; }
#aiOverlay #aiQuestions #aiQuestionsList .question-item { list-style: none; font-size: .85rem; padding: .75rem 1rem; cursor: pointer; line-height: 1rem; display: block; font-weight: bold; color: #555; border: solid 1px #DDD; border-radius: .75rem; margin-bottom: .5rem; transition: all, 0.25s; }
#aiOverlay #aiQuestions #aiQuestionsList .question-item:hover { background: #DDD; border-radius: .75rem; }
#aiOverlay #aiQuestions #aiQuestionsList .question-item .question-text { display: block; }

@media (max-width: 63.9375em) {
  #aiOverlay #aiQuestions { padding: .5rem 1rem; flex: 0 105px; display: flex; justify-content: space-around; align-items: center; overflow: auto; min-height: 105px; }
  #aiOverlay #aiQuestions h2 { min-width: 110px; margin-bottom: 0; }
  #aiOverlay #aiQuestions #aiQuestionsList { white-space: nowrap; display: block !important; }
  #aiOverlay #aiQuestions #aiQuestionsList .question-item { display: inline-block !important; margin-left: 1rem; }
}
@media (max-width: 39.9375em) {
  #aiOverlay #aiQuestions { display: none; }
  #aiOverlay #aiQuestions h2 { margin-left: 1rem; }
}

#aiOverlay #aiDialog { padding: 0 0 0 2rem; flex: 1; overflow: auto; }
#aiOverlay #aiDialog #aiLinks { margin-top: 2rem; font-size: .8rem; font-style: italic; text-decoration: underline; position: relative; margin: 2rem 0 0.5rem 0; display: flex; justify-content: space-between; }
#aiOverlay #aiDialog #aiDialogTop { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem; }
#aiOverlay #aiDialog #aiDialogTop h2 { color: #FFF; font-size: 2rem; flex: 1 auto; }
#aiOverlay #aiDialog #aiDialogTop #aiOverlayDisclaimer { color: #FFF; text-decoration: underline; font-size: .75rem; font-weight: bold; margin-right: 1rem; }
#aiOverlay #aiDialog #aiDialogTop #aiOverlayClose { color: #FFF; font-size: 1.2rem; cursor: pointer; background: transparent; border: none; }

@media (max-width: 63.9375em) {
  #aiOverlay #aiDialog { padding: 0; flex: 1 auto; display: flex; flex-direction: column; margin-bottom: 1rem; }
  #aiOverlay #aiDialog #webchat.homechat { flex: 1 auto; display: flex; flex-direction: column; height: 80%; }
  #aiOverlay #aiDialog #webchat.homechat > a { left: auto !important; transform: none !important; }
  #aiOverlay #aiDialog #ai-chatbot-start { height: calc(100% - 53px); }
  #aiOverlay #aiDialog .chat-btn-layout.custom, #aiOverlay #aiDialog .chat-widget.custom { height: 100%; }
  #aiOverlay #aiDialog .widget-body { height: calc(100% - 106px); margin-bottom: 1rem; }
  #aiOverlay #aiDialog .widget-body .response { max-height: 100%; min-height: 0; }
  #aiOverlay #aiDialog #aiLinks { margin-top: 4rem; }
  #aiOverlay #aiDialog #aiDialogTop { margin-bottom: 0.5rem; }
}
@media (max-width: 39.9375em) {
  #aiOverlay #aiDialog { min-height: 20rem; padding: 1rem 1rem 0; }
  #aiOverlay #aiDialog .widget-body { height: calc(100% - 70px); margin-bottom: 1rem; }
  #aiOverlay #aiDialog #webchat.homechat { padding: .5rem; }
  #aiOverlay #aiDialog #webchat.homechat .input-area { padding: .5rem; }
  #aiOverlay #aiDialog #aiLinks { padding: 0 0.75rem; }
  #aiOverlay #aiDialog #aiDialogTop h2 { font-size: 1.5rem; }
}

/* Loading spinners */
#aiOverlay .analysis-wrapper .summary-container .spinner-container { display: grid; min-height: 100px; place-items: center; }
#aiOverlay .analysis-wrapper .summary-container .spinner-container .loading-spinner { margin-top: -36px; }
#aiOverlay .widget-body .response .message-overflow .ai-response-spinner { border-radius: 10px; margin-left: 10px; padding: 10px; }
#aiOverlay .widget-body .response .message-overflow .ai-response-spinner:not(:empty) { border: 1px solid var(--border-grey-color, #ddd); width: 50px; }
#aiOverlay .widget-body .response .message-overflow .ai-response-spinner.default-spinner { align-items: center; display: flex; gap: 15px; justify-content: center; width: 90%; }
#aiOverlay .widget-body .response .message-overflow .ai-response-spinner.default-spinner:not(:empty) { border: 0; }
#aiOverlay .input-area .audio-recorder .spinner-container,
#aiOverlay .input-area .azure-live-speech-to-text .spinner-container { margin-right: 10px; }
#aiOverlay .loading-spinner { animation: ms-chatbot-spinner 1.5s linear infinite; border: 4px solid #f3f3f3; border-radius: 50%; border-top-color: #383636; height: 40px; width: 40px; }
@keyframes ms-chatbot-spinner { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } }
#aiOverlay .spinner-overlay { align-items: center; background-color: #fdfcfccc; display: flex; height: 100%; inset: 0; justify-content: center; position: fixed; width: 100%; }

/* Quick-fix: hide question cards until JS fades them in. The chatbot JS attaches
   a window.load handler that fades .aiCard back in (see ms-chatbot.js). */
.aiCard { opacity: 0; }

/* Foundation utility class shim — only the few classes the chatbot markup uses.
   If your theme already defines these, the cascade order won't matter. */
.show-for-medium { display: none; }
@media (min-width: 40em) { .show-for-medium { display: inline; } }
.show-for-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Minimal default styling for the Toggle block button. Override in your theme. */
.ms-chatbot-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background-color: #B71234;
  color: #FFF;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
}
.ms-chatbot-toggle:hover { background-color:#2f4017; }
.ms-chatbot-toggle:focus-visible { outline: 2px solid #002147; outline-offset: 2px; }