/* OrigAI final chat polish v2z */

/* Mobile dynamic input metrics */
body:not([data-page="pc"]),
body[data-page="mobile"] {
  --oa-mobile-input-height: 58px;
  --oa-mobile-function-gap: 18px;
}

/* Mobile input should grow upward and side buttons should not droop */
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 {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  min-height: 52px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Textarea grows up */
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 {
  height: auto !important;
  min-height: 42px !important;
  max-height: 104px !important;
  resize: none !important;
  overflow-y: auto !important;
  line-height: 1.44 !important;
  box-sizing: border-box !important;
}

/* Side buttons stay visually aligned to the input bottom, not hanging lower */
body:not([data-page="pc"]) #mobileInputForm button,
body:not([data-page="pc"]) .origai-mobile-input-form button,
body:not([data-page="pc"]) #mobileInputForm .send-button,
body:not([data-page="pc"]) #mobileInputForm .oa-send-btn,
body[data-page="mobile"] #mobileInputForm button,
body[data-page="mobile"] .origai-mobile-input-form button,
body[data-page="mobile"] #mobileInputForm .send-button,
body[data-page="mobile"] #mobileInputForm .oa-send-btn {
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  margin-bottom: 3px !important;
}

/* Function row follows input height, keeping enough gap */
body:not([data-page="pc"]) .origai-mobile-function-row,
body[data-page="mobile"] .origai-mobile-function-row {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--oa-mobile-input-height) + 28px) !important;
}

/* Message list bottom follows dynamic input height + function row */
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 {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--oa-mobile-input-height) + 108px) !important;
}

/* New chat should remove old message visual residue */
.message.origai-clearing {
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

/* Rich text base */
.message .bubble-text.origai-rich-rendered {
  white-space: normal !important;
}

.message .bubble-text.origai-rich-rendered p {
  margin: 0 0 8px !important;
}

.message .bubble-text.origai-rich-rendered p:last-child {
  margin-bottom: 0 !important;
}

.message .bubble-text.origai-rich-rendered strong {
  font-weight: 700 !important;
}

.message .bubble-text.origai-rich-rendered code.origai-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: .92em !important;
  padding: 2px 5px !important;
  border-radius: 7px !important;
  background: rgba(15, 23, 42, .10) !important;
  color: inherit !important;
}

/* Code block */
.origai-code-block {
  margin: 10px 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background: #0b1220 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18) !important;
}

.origai-code-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .96) !important;
  color: rgba(226, 232, 240, .78) !important;
}

.origai-code-lang {
  font-size: 12px !important;
  line-height: 1 !important;
  color: rgba(203, 213, 225, .78) !important;
}

.origai-code-copy {
  appearance: none !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(226, 232, 240, .84) !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.origai-code-copy:hover {
  background: rgba(96, 165, 250, .18) !important;
  color: #ffffff !important;
}

.origai-code-block pre {
  margin: 0 !important;
  padding: 12px 13px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.origai-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(226, 232, 240, .96) !important;
  white-space: pre !important;
}

/* User bubble code colors */
.message.user .origai-code-block {
  border-color: rgba(255, 255, 255, .16) !important;
}

.message.user .bubble-text code.origai-inline-code {
  background: rgba(255, 255, 255, .12) !important;
}

/* Collapse long messages */
.message .bubble.origai-foldable .bubble-text {
  position: relative !important;
}

.message .bubble.origai-foldable.origai-collapsed .bubble-text {
  max-height: 360px !important;
  overflow: hidden !important;
}

body:not([data-page="pc"]) .message .bubble.origai-foldable.origai-collapsed .bubble-text,
body[data-page="mobile"] .message .bubble.origai-foldable.origai-collapsed .bubble-text {
  max-height: 260px !important;
}

.message .bubble.origai-foldable.origai-collapsed .bubble-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96));
}

.message.user .bubble.origai-foldable.origai-collapsed .bubble-text::after {
  background: linear-gradient(to bottom, rgba(31,41,55,0), rgba(31,41,55,.98));
}

.origai-fold-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 9px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: rgba(71, 85, 105, .88) !important;
  background: rgba(241, 245, 249, .72) !important;
}

.message.user .origai-fold-btn {
  color: rgba(255, 255, 255, .86) !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.origai-fold-btn:hover {
  transform: translateY(-1px) !important;
}

/* PC new chat button remains normal */
.primary-action,
[data-action="new-chat"],
[data-action="new-conversation"] {
  cursor: pointer;
}