/* SIA chatbot widget */

.sia-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1060;
}

.sia-launcher {
  width: 116px;
  height: 116px;
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
  cursor: pointer;
}

.sia-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: sia-spin 12s linear infinite;
}

.sia-ring-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sia-ring-text {
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 0.95px;
  dominant-baseline: middle;
}

.sia-ring-word {
  fill: #0c111b;
}

.sia-ring-dot {
  fill: #e31b23;
}

.sia-core {
  position: absolute;
  inset: 19px;
  border-radius: 50%;
  /* background: #ffffff; */
  /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sia-core img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 50%;
}

.sia-core-text {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #153d7c;
}

.sia-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 318px;
  border: 1px solid #dce3ee;
  box-shadow: 0 20px 45px rgba(10, 23, 48, 0.24);
  border-radius: 14px;
  overflow: hidden;
}

#siaChatPanel {
  height: min(450px, calc(100vh - 20px));
  display: flex;
  flex-direction: column;
}

#siaChatPanel .card-header,
#siaChatPanel .card-footer {
  flex-shrink: 0;
}

#siaChatPanel .card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#siaWelcomePanel {
  width: 344px;
  min-height: 405px;
  right: 0;
  bottom: 0;
  border-radius: 18px;
}

#siaWelcomePanel .card-body {
  min-height: 405px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--primary-color) 0%, #d9e4fb 58%, #f3f5f9 100%);
}

#siaWelcomePanel .sia-avatar-sm {
  width: 44px;
  height: 44px;
}

#siaWelcomePanel .sia-panel-title {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}

#siaWelcomePanel h4 {
  font-size: 22px;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 6px;
}

#siaWelcomePanel p {
  font-size: 14px;
  line-height: 1.35;
  color: #1f2937;
}

#siaStartChatBtn {
  height: 52px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #cfd6e2;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

#siaStartChatBtn::after {
  content: '\2192';
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

#siaStartChatBtn:hover,
#siaStartChatBtn:focus {
  background: #ffffff;
  color: #111827;
  border-color: #b8c2d3;
}

.sia-panel .card-header {
  background: linear-gradient(180deg, var(--primary-color) 0%, #eff5ff 100%);
}

#siaFormPanel {
  width: 318px;
  border-radius: 12px;
}

#siaFormPanel .card-header {
  padding: 14px 14px 10px;
  border-bottom: 0;
  background: linear-gradient(180deg, var(--primary-color) 0%, #8eb0ea 58%, #d9e2f2 100%);
}

#siaFormPanel .card-header strong {
  font-size: 18px;
  font-weight: 700;
  color: #172033;
}

#siaFormPanel .card-header .btn-close {
  opacity: 0.65;
}

#siaFormPanel .card-body {
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, #8eb0ea 0%, #dfe5ee 100%);
}

#siaFormPanel .sia-avatar-sm {
  width: 44px;
  height: 44px;
}

#siaCallbackForm .form-label {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

#siaCallbackForm .form-control {
  height: 40px;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  color: #1f2937;
  box-shadow: none;
  padding: 8px 12px;
}

#siaCallbackForm .form-control::placeholder {
  color: #9aa3b2;
}

#siaCallbackForm textarea.form-control {
  min-height: 82px;
  height: 82px;
  resize: none;
}

#siaFormCancel,
#siaCallbackForm button[type='submit'] {
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

#siaFormCancel {
  background: transparent;
  border: 1px solid #c8cfdb;
  color: #1f2937;
}

#siaCallbackForm button[type='submit'] {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #ffffff;
}

#siaCallbackForm button[type='submit']:hover,
#siaCallbackForm button[type='submit']:focus {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.sia-panel-title {
  font-size: 16px;
}

.sia-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.sia-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #ffffff;
}

.sia-empty {
  color: #6b7280;
  text-align: center;
  font-size: 13px;
  margin-top: 50px;
}

.sia-row {
  display: flex;
  margin-bottom: 10px;
}

.sia-bubble {
  max-width: 92%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

.sia-user {
  background: var(--primary-color);
  color: #ffffff;
  font-weight: 600;
}

.sia-bot {
  background: #eceef2;
  color: #101828;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.38;
}

.sia-action-area {
  padding: 0 14px 14px;
  background: #ffffff;
}

#siaChatPanel .card-footer {
  padding: 12px 14px 14px;
  background: #ffffff;
  border-top: 1px solid #d9e0eb;
}

#siaChatForm .sia-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--primary-color);
  border-radius: 22px;
  background: #ffffff;
  padding: 6px 8px 6px 12px;
}

#siaChatInput {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  box-shadow: none;
  font-size: 16px;
  color: #1f2937;
  padding: 0;
  height: 34px;
}

#siaChatInput:focus {
  border: 0;
  box-shadow: none;
}

#siaEmojiToggle,
#siaGifToggle,
#siaFileLabel {
  border: 0;
  background: transparent;
  color: #6b7280;
  box-shadow: none;
  padding: 0;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#siaEmojiToggle {
  font-size: 22px;
}

#siaGifToggle {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0 8px;
  min-width: 36px;
  height: 26px;
}

#siaFileLabel {
  font-size: 17px;
}

#siaSendBtn {
  width: 50px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: #e5e7eb;
  color: #9ca3af;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

#siaSendBtn:hover,
#siaSendBtn:focus {
  background: var(--primary-color);
  color: #ffffff;
  box-shadow: none;
}

#siaSendBtn i{
  font-size: 12px;
}

.sia-picker {
  position: absolute;
  right: 0;
  bottom: 46px;
  width: 280px;
  z-index: 3;
}

.sia-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.sia-emoji-btn {
  min-width: 28px;
  line-height: 1;
  padding: 4px;
}

.sia-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sia-gif-btn img {
  width: 100%;
  height: 72px;
  object-fit: cover;
}

.sia-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e6f7ee;
  color: #199450;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

@keyframes sia-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 576px) {
  /* .sia-widget {
    right: 10px;
    bottom: 10px;
  }

  .sia-launcher {
    width: 100px;
    height: 100px;
  }

  .sia-core {
    inset: 15px;
  } */

  .sia-panel {
    /* width: calc(100vw - 20px); */
    /* right: 0;
    bottom: 0; */
  }

  #siaChatPanel {
    /* height: calc(100vh - 20px); */
  }

  #siaFormPanel {
    /* width: calc(100vw - 20px); */
  }

  #siaWelcomePanel {
    /* width: calc(100vw - 20px); */
    /* min-height: 360px; */
    /* right: 0;
    bottom: 0; */
  }

  /* #siaWelcomePanel .card-body {
    min-height: 360px;
    padding: 16px;
  } */

  /* #siaWelcomePanel .sia-panel-title {
    font-size: 16px;
  }

  #siaWelcomePanel h4 {
    font-size: 21px;
  }

  #siaWelcomePanel p {
    font-size: 14px;
  }

  #siaStartChatBtn {
    font-size: 14px;
    height: 48px;
  }

  .sia-bot {
    font-size: 14px;
  } */
}

/* Display */
.d-none{
    display:none !important;
}

/* Card */
.card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    background:#fff;
    border:1px solid rgba(0,0,0,.125);
    border-radius:.375rem;
}

.card-header{
    padding:0.75rem 1rem;
    border-bottom:1px solid rgba(0,0,0,.125);
    background:#f8f9fa;
}

.card-body{
    flex:1 1 auto;
    padding:1rem;
}

.card-footer{
    padding:0.75rem 1rem;
    border-top:1px solid rgba(0,0,0,.125);
    background:#f8f9fa;
}

/* Flex */
.d-flex{
    display:flex !important;
}

.justify-content-between{
    justify-content:space-between !important;
}

.justify-content-start{
    justify-content:flex-start !important;
}

.justify-content-end{
    justify-content:flex-end !important;
}

.align-items-center{
    align-items:center !important;
}

.align-items-start{
    align-items:flex-start !important;
}

.text-center{
    text-align:center !important;
}

/* Gap */
.gap-2{
    gap:0.5rem !important;
}

/* Width */
.w-100{
    width:100% !important;
}

.w-50{
    width:50% !important;
}

/* Position */
.position-relative{
    position:relative !important;
}

/* Margin */
.mb-0{
    margin-bottom:0 !important;
}

.mb-1{
    margin-bottom:0.25rem !important;
}

.mb-2{
    margin-bottom:0.5rem !important;
}

.mb-3{
    margin-bottom:1rem !important;
}

.mb-4{
    margin-bottom:1.5rem !important;
}

.mt-5{
    margin-top:3rem !important;
}

.p-0{
    padding:0 !important;
}

.p-2{
    padding:0.5rem !important;
}

.p-3{
    padding:1rem !important;
}

.p-4{
    padding:1.5rem !important;
}

.pt-1{
    padding-top:0.25rem !important;
}

/* Grid */
.row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-0.75rem;
    margin-right:-0.75rem;
}

.col-12{
    width:100%;
    padding-left:0.75rem;
    padding-right:0.75rem;
}

.g-2{
    gap:0.5rem;
}

/* Form */
.form-control{
    display:block;
    width:100%;
    padding:0.375rem 0.75rem;
    font-size:1rem;
    border:1px solid #ced4da;
    border-radius:0.375rem;
}

.form-control-sm{
    padding:0.25rem 0.5rem;
    font-size:0.875rem;
}

.form-label{
    display:inline-block;
    margin-bottom:0.5rem;
}

.input-group{
    display:flex;
    width:100%;
}

.input-group > .form-control{
    flex:1 1 auto;
}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.375rem 0.75rem;
    border:1px solid transparent;
    border-radius:0.375rem;
    cursor:pointer;
    text-decoration:none;
}

.btn-sm{
    padding:0.25rem 0.5rem;
    font-size:0.875rem;
}

.btn-primary{
    color:#fff;
    background:var(--primary-color);
    border-color:var(--primary-color);
}

.btn-success{
    color:#fff;
    background:#198754;
    border-color:#198754;
}

.btn-info{
    color:#fff;
    background:#0dcaf0;
    border-color:#0dcaf0;
}

.btn-light{
    color:#212529;
    background:#f8f9fa;
    border-color:#f8f9fa;
}

.btn-outline-secondary{
    color:#6c757d;
    border-color:#6c757d;
    background:transparent;
}

.btn-close{
    width:1em;
    height:1em;
    border:none;
    background:transparent;
    cursor:pointer;
}

/* Borders */
.border{
    border:1px solid #dee2e6 !important;
}

/* Text */
.text-muted{
    color:#6c757d !important;
}

.text-white{
    color:#fff !important;
}

/* Modal */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1055;
}

.fade{
    transition:opacity .15s linear;
}

.modal-dialog{
    max-width:500px;
    margin:1.75rem auto;
}

.modal-content{
    background:#fff;
    border-radius:.5rem;
    overflow:hidden;
}