/* OrigAI mobile chat polish v2x */

/* App-like viewport */
body[data-page="mobile"],
body:not([data-page="pc"]) {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/*
  Important safety override:
  v2w may have marked a large parent as .origai-home-intro.
  Do NOT hide generic .origai-home-intro anymore.
*/
body.origai-chat-started .origai-home-intro {
  display: revert !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Only these leaf nodes are allowed to disappear after chat starts. */
body.origai-chat-started .origai-empty-leaf,
body.origai-chat-started .origai-empty-logo,
body.origai-chat-started .origai-empty-title,
body.origai-chat-started .origai-empty-subtitle,
body.origai-chat-started #empty-help,
body.origai-chat-started .empty-help {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Message list: leave enough bottom space for function row + input. */
body:not([data-page="pc"]) .origai-bridge-message-list,
body:not([data-page="pc"]) #messageList,
body[data-page="mobile"] .origai-bridge-message-list,
body[data-page="mobile"] #messageList {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 158px) !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 13px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Message row */
body:not([data-page="pc"]) .message,
body[data-page="mobile"] .message {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 7px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body:not([data-page="pc"]) .message.assistant,
body[data-page="mobile"] .message.assistant {
  justify-content: flex-start !important;
}

body:not([data-page="pc"]) .message.user,
body[data-page="mobile"] .message.user {
  justify-content: flex-end !important;
}

/* Hide avatars on mobile for cleaner native style. */
body:not([data-page="pc"]) .message .avatar,
body[data-page="mobile"] .message .avatar {
  display: none !important;
  visibility: hidden !important;
}

/* Bubble base */
body:not([data-page="pc"]) .message .bubble,
body[data-page="mobile"] .message .bubble {
  width: auto !important;
  max-width: 78vw !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  line-height: 1.52 !important;
  letter-spacing: .01em !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08) !important;
}

/* Remove title line inside bubbles. */
body:not([data-page="pc"]) .message .bubble-title,
body[data-page="mobile"] .message .bubble-title {
  display: none !important;
  visibility: hidden !important;
}

body:not([data-page="pc"]) .message .bubble-text,
body[data-page="mobile"] .message .bubble-text {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Assistant bubble */
body:not([data-page="pc"]) .message.assistant .bubble,
body[data-page="mobile"] .message.assistant .bubble {
  align-self: flex-start !important;
  color: #111827 !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 20px 20px 20px 7px !important;
}

/* User bubble */
body:not([data-page="pc"]) .message.user .bubble,
body[data-page="mobile"] .message.user .bubble {
  align-self: flex-end !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #111827, #1f2937) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 20px 20px 7px 20px !important;
}

/* Hide per-message action row on mobile. */
body:not([data-page="pc"]) .message-actions,
body[data-page="mobile"] .message-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Function row: more distance from input than v2w. */
body:not([data-page="pc"]) .origai-mobile-function-row,
body[data-page="mobile"] .origai-mobile-function-row {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  z-index: 94 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: transparent !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

body:not([data-page="pc"]) .origai-mobile-function-row::-webkit-scrollbar,
body[data-page="mobile"] .origai-mobile-function-row::-webkit-scrollbar {
  display: none !important;
}

body:not([data-page="pc"]) .origai-mobile-function-row button,
body:not([data-page="pc"]) .origai-mobile-function-row a,
body[data-page="mobile"] .origai-mobile-function-row button,
body[data-page="mobile"] .origai-mobile-function-row a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Fixed input form. */
body:not([data-page="pc"]) #mobileInputForm,
body:not([data-page="pc"]) .origai-mobile-input-form,
body[data-page="mobile"] #mobileInputForm,
body[data-page="mobile"] .origai-mobile-input-form {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  z-index: 98 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body:not([data-page="pc"]) #message-input,
body:not([data-page="pc"]) .origai-mobile-input-form textarea,
body[data-page="mobile"] #message-input,
body[data-page="mobile"] .origai-mobile-input-form textarea {
  max-height: 78px !important;
  min-height: 42px !important;
  line-height: 1.42 !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
}

/* Bottom visual protection layer stays behind actual controls. */
body:not([data-page="pc"])::after,
body[data-page="mobile"]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(env(safe-area-inset-bottom, 0px) + 148px);
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(to top, rgba(248, 250, 252, .98), rgba(248, 250, 252, .76), rgba(248, 250, 252, 0));
}