/*
 * HAIRA AI Studio Clean Fix V6
 * Satu stylesheet untuk memperbaiki chat dan attachment.
 */

:root {
  --haira-blue: #079cff;
  --haira-yellow: #ffd500;
  --haira-surface: rgba(5, 9, 13, 0.97);
}

/* =====================================
   SEMBUNYIKAN EMPTY STATE SAAT CHATTING
===================================== */

[hidden],
.empty-state[hidden],
.chat-panel.has-conversation .empty-state {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.chat-panel.has-conversation {
  padding-top: 8px !important;
}

/* Jangan biarkan halaman bergeser horizontal. */

html,
body.studio-body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.studio-shell,
.chat-panel,
.messages,
.message,
.message-content {
  min-width: 0;
  max-width: 100%;
}

.chat-panel {
  overflow-x: hidden !important;
}

/* =====================================
   COMPOSER UTAMA
===================================== */

form.composer {
  position: relative !important;
  z-index: 70 !important;

  display: block !important;

  width: min(100%, 880px) !important;
  max-width: 100% !important;
  min-height: 94px !important;

  margin: 12px auto 0 !important;

  padding:
    15px
    132px
    31px
    18px !important;

  overflow: visible !important;

  border:
    1px solid rgba(7, 156, 255, 0.42) !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(7, 156, 255, 0.04),
      rgba(255, 213, 0, 0.018)
    ),
    rgba(4, 8, 12, 0.98) !important;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

form.composer:focus-within {
  border-color:
    rgba(7, 156, 255, 0.8) !important;

  box-shadow:
    0 0 0 3px rgba(7, 156, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* =====================================
   INPUT PESAN
===================================== */

form.composer > textarea#promptInput {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 49px !important;
  max-height: 150px !important;

  margin: 0 !important;
  padding: 3px 0 !important;

  overflow-y: auto !important;

  border: 0 !important;
  outline: 0 !important;

  color: #f2f5f8 !important;
  background: transparent !important;

  font-size: 16px !important;
  line-height: 1.55 !important;

  resize: none !important;
  caret-color: var(--haira-yellow) !important;
}

form.composer > textarea#promptInput::placeholder {
  color: #707986 !important;
}

/* =====================================
   TOMBOL KIRIM
===================================== */

form.composer > button#sendButton {
  position: absolute !important;
  z-index: 22 !important;

  top: 14px !important;
  right: 13px !important;
  bottom: auto !important;
  left: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid rgba(255, 235, 120, 0.68) !important;

  border-radius: 16px !important;

  color: #080808 !important;

  background:
    linear-gradient(
      145deg,
      #ffeb6f,
      #ffd500
    ) !important;

  box-shadow:
    0 13px 32px rgba(255, 213, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;

  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

/* Spinner rapi saat menunggu jawaban. */

form.composer.is-sending >
button#sendButton {
  color: transparent !important;
}

form.composer.is-sending >
button#sendButton::after {
  content: "" !important;

  display: block !important;

  width: 18px !important;
  height: 18px !important;

  border:
    2px solid rgba(0, 0, 0, 0.25) !important;

  border-top-color: #080808 !important;
  border-radius: 50% !important;

  animation:
    haira-send-spin
    700ms
    linear
    infinite;
}

@keyframes haira-send-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =====================================
   TOMBOL LAMPIRAN
===================================== */

form.composer >
button.haira-attach-button {
  position: absolute !important;
  z-index: 23 !important;

  top: 14px !important;
  right: 72px !important;
  bottom: auto !important;
  left: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid rgba(7, 156, 255, 0.34) !important;

  border-radius: 16px !important;

  color: #57bcff !important;

  background:
    linear-gradient(
      145deg,
      rgba(7, 156, 255, 0.11),
      rgba(255, 213, 0, 0.02)
    ),
    #070c12 !important;

  box-shadow:
    0 13px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  cursor: pointer !important;
}

form.composer >
button.haira-attach-button:hover,
form.composer >
button.haira-attach-button.is-open {
  color: var(--haira-yellow) !important;

  border-color:
    rgba(255, 213, 0, 0.48) !important;
}

form.composer >
button.haira-attach-button svg {
  width: 22px !important;
  height: 22px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}

/* =====================================
   CATATAN BAWAH
===================================== */

form.composer > small {
  position: absolute !important;

  left: 18px !important;
  right: 132px !important;
  bottom: 9px !important;
  top: auto !important;

  max-width:
    calc(100% - 150px) !important;

  overflow: hidden !important;

  color: #68727e !important;

  font-size: 9px !important;
  line-height: 1.25 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* =====================================
   MENU LAMPIRAN
===================================== */

form.composer >
.haira-attachment-menu {
  position: absolute !important;
  z-index: 300 !important;

  right: 0 !important;
  bottom: calc(100% + 12px) !important;
  left: auto !important;
  top: auto !important;

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  width:
    min(
      326px,
      calc(100vw - 32px)
    ) !important;

  max-width:
    calc(100vw - 32px) !important;

  margin: 0 !important;
  padding: 9px !important;
  gap: 7px !important;

  overflow: hidden !important;

  visibility: hidden !important;
  opacity: 0 !important;

  border:
    1px solid rgba(255, 255, 255, 0.11) !important;

  border-radius: 19px !important;

  background:
    linear-gradient(
      145deg,
      rgba(7, 156, 255, 0.04),
      rgba(255, 213, 0, 0.018)
    ),
    rgba(5, 8, 12, 0.99) !important;

  box-shadow:
    0 25px 75px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  pointer-events: none !important;

  transform:
    translateY(8px)
    scale(0.97) !important;

  transform-origin: bottom right !important;

  transition:
    opacity 150ms ease,
    visibility 150ms ease,
    transform 150ms ease !important;
}

form.composer >
.haira-attachment-menu.is-open {
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;

  transform:
    translateY(0)
    scale(1) !important;
}

/* Jangan mewarisi CSS tombol kirim. */

form.composer
.haira-attachment-option {
  position: static !important;

  display: grid !important;

  grid-template-columns:
    38px minmax(0, 1fr) !important;

  align-items: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  min-height: 66px !important;

  margin: 0 !important;
  padding: 9px !important;
  gap: 9px !important;

  border:
    1px solid rgba(255, 255, 255, 0.065) !important;

  border-radius: 14px !important;

  color: #edf1f5 !important;
  background:
    rgba(255, 255, 255, 0.025) !important;

  box-shadow: none !important;
  text-align: left !important;
}

form.composer
.haira-attachment-option:hover {
  border-color:
    rgba(7, 156, 255, 0.22) !important;

  background:
    rgba(7, 156, 255, 0.055) !important;
}

form.composer
.haira-attachment-option-icon {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;

  border-radius: 12px !important;
}

form.composer
.haira-attachment-option-text {
  position: static !important;

  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;
}

form.composer
.haira-attachment-option-text strong {
  display: block !important;

  overflow: hidden !important;

  color: #f3f5f8 !important;

  font-size: 11px !important;
  line-height: 1.25 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

form.composer
.haira-attachment-option-text small {
  position: static !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-top: 3px !important;

  overflow: hidden !important;

  color: #77818e !important;

  font-size: 8px !important;
  line-height: 1.25 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* =====================================
   PREVIEW FILE
===================================== */

form.composer.has-attachments {
  min-height: 145px !important;
  padding-top: 68px !important;
}

form.composer >
.haira-attachment-strip {
  position: absolute !important;
  z-index: 16 !important;

  top: 11px !important;
  left: 16px !important;
  right: 132px !important;
  bottom: auto !important;

  display: none !important;
  align-items: center !important;

  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: none !important;
}

form.composer.has-attachments >
.haira-attachment-strip {
  display: flex !important;
}

form.composer >
.haira-attachment-strip::-webkit-scrollbar {
  display: none !important;
}

.haira-file-chip {
  flex: 0 0 auto !important;
  max-width: 185px !important;
}

form.composer
button.haira-file-remove {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 23px !important;
  min-width: 23px !important;
  max-width: 23px !important;

  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid rgba(255, 255, 255, 0.09) !important;

  border-radius: 7px !important;

  color: #a1aab4 !important;
  background:
    rgba(255, 255, 255, 0.025) !important;

  box-shadow: none !important;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 640px) {
  form.composer {
    min-height: 92px !important;

    padding:
      14px
      126px
      31px
      16px !important;

    border-radius: 21px !important;
  }

  form.composer >
  button#sendButton {
    top: 13px !important;
    right: 12px !important;

    width: 49px !important;
    min-width: 49px !important;
    max-width: 49px !important;

    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
  }

  form.composer >
  button.haira-attach-button {
    top: 13px !important;
    right: 69px !important;

    width: 49px !important;
    min-width: 49px !important;
    max-width: 49px !important;

    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
  }

  form.composer > small {
    left: 16px !important;
    right: 126px !important;

    max-width:
      calc(100% - 142px) !important;
  }

  form.composer >
  .haira-attachment-menu {
    right: 0 !important;

    width:
      min(
        310px,
        calc(100vw - 28px)
      ) !important;

    max-width:
      calc(100vw - 28px) !important;
  }

  form.composer >
  .haira-attachment-strip {
    left: 14px !important;
    right: 125px !important;
  }
}

/* Di HP sempit, deskripsi disembunyikan agar menu bersih. */

@media (max-width: 430px) {
  form.composer
  .haira-attachment-option {
    min-height: 58px !important;

    grid-template-columns:
      34px minmax(0, 1fr) !important;
  }

  form.composer
  .haira-attachment-option-icon {
    width: 34px !important;
    height: 34px !important;
  }

  form.composer
  .haira-attachment-option-text small {
    display: none !important;
  }
}