/* === IMPORT FONTS LOCALLY === */
@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* === LEX WEB UI STYLES === */
.lex-web-ui {
  max-width: 800px !important;
  margin: 0 auto !important;
  height: 90vh !important;
}

/* === GENERAL STYLES === */
body {
  color: #1B1B1B !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400;
}

/* === HEADINGS === */
h1 {
  font-size: 4rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
}
h2 {
  font-size: 1.60rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
}
h3, h4 {
  color: #1B1B1B !important;
  font-weight: 700 !important;
}

/* === LINKS === */
a {
  color: #1C86C6 !important;
  text-decoration: underline !important;
}
a:hover {
  color: #054C77 !important;
}
a:visited {
  color: #0A5E2E !important;
}

/* === TOOLBAR === */
.toolbar.theme--dark {
  background-color: #155C91 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
.mdl-layout__header {
  height: 80px !important;
  min-height: 80px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}
.toolbar__title {
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
}
.toolbar__logo {
  height: 48px !important;
  max-height: 64px !important;
  margin-right: 16px !important;
}
button.menu {
  display: none !important;
}
span.localeInfo {
  display: none !important;
}
button.help-toggle {
  display: none !important;
}

/* === MESSAGE AREA === */
.message-list-container {
  background-color: #F0F0F0 !important;
  padding: 20px !important;
  height: calc(100% - 112px) !important;
}

/* === MESSAGE BUBBLES === */
.message-bubble {
  border-radius: 16px !important;
  padding: 12px 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.message-bot .message-bubble {
  background-color: #FFFFFF !important;
  color: #1B1B1B !important;
  border: 1px solid #DEDEDE !important;
}

.message-human .message-bubble {
  background-color: #D3D3D3 !important;
  color: #1B1B1B !important;
  border: 1px solid #B5B5B5 !important;
  margin-left: auto !important;
  margin-right: 15px !important;
}

/* === INPUT FIELD === */
.input-container {
  background-color: #FFFFFF !important;
  padding: 16px 20px !important;
  border-top: 1px solid #CCC !important;
}
.input-group--text-field input,
.input-group--text-field textarea {
  border: 1px solid #CCC !important;
  border-radius: 6px !important;
  padding: 10px !important;
  font-size: 1rem !important;
  width: 100% !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* === SEND BUTTON === */
.lex-web-ui-input-send-button.mdl-button,
button[data-icon="send"].mdl-button {
  background-color: #155C91 !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}
button[data-icon="send"].mdl-button:hover {
  background-color: #0F4A78 !important;
}

/* === QUICK REPLIES / BUTTONS === */
.card__actions .btn {
  background-color: #70168E !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  margin: 6px !important;
  padding: 10px 16px !important;
  font-weight: normal !important;
}
.card__actions .btn:hover {
  background-color: #5A1273 !important;
}

/* === FEEDBACK ICONS === */
.feedback-icons-positive,
.feedback-icons-negative {
  color: #155C91 !important;
}
.feedback-icons-positive:hover {
  color: #0A5E2E !important;
}
.feedback-icons-negative:hover {
  color: #70168E !important;
}

/* === UTILITIES === */
button.min-button {
  background-image: url('./Dolly icon purple.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 90% !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important; /* or 50% if you want round */
  width: 90px !important;
  height: 90px !important;
}

button.min-button .v-btn__overlay,
button.min-button .v-btn__underlay,
button.min-button .v-icon {
  display: none !important;
}

.message-button {
  display: none !important;
}