:root {
  --ucim-chat-keyboard-offset: 0px;
  --ucim-chat-bar-height: 86px;
}

body.chat-room-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.chat-room-open .bottom-dock-row {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(140%) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

#chatRoomView {
  isolation: isolate;
}
#chatRoomView .chat-messages {
  padding-bottom: calc(var(--ucim-chat-bar-height, 86px) + env(safe-area-inset-bottom) + 18px) !important;
}

.chat-inline-status {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--ucim-chat-keyboard-offset, 0px) + var(--ucim-chat-bar-height, 86px) + 12px) !important;
  z-index: 625 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  color: rgba(21,27,50,.92) !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.12) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
#chatRoomView.is-loading-history .chat-inline-status,
#chatRoomView.is-waiting-response .chat-inline-status,
.chat-inline-status.is-visible {
  display: inline-flex !important;
}
[data-tm="dark"] .chat-inline-status {
  background: rgba(17, 22, 46, .88) !important;
  border-color: rgba(196,181,253,.24) !important;
  color: rgba(244,247,255,.96) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.32) !important;
}
.chat-inline-status__spinner {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(99,102,241,.22) !important;
  border-top-color: rgba(99,102,241,.95) !important;
  animation: ucimSpin .75s linear infinite !important;
}
@keyframes ucimSpin { to { transform: rotate(360deg); } }

.chat-input-bar {
  position: fixed !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: var(--ucim-chat-keyboard-offset, 0px) !important;
  margin: 0 !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.12) !important;
}
body.ucim-chat-keyboard-open .chat-input-bar {
  border-radius: 18px 18px 0 0 !important;
}
[data-tm="dark"] .chat-input-bar {
  border-top-color: rgba(196,181,253,.18) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}
.chat-input-field::placeholder {
  color: rgba(99,106,128,.70) !important;
}
[data-tm="dark"] .chat-input-field::placeholder {
  color: rgba(220,228,255,.55) !important;
}

.chat-room-skeleton {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}
.chat-room-skeleton__row {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
}
.chat-room-skeleton__row--self {
  justify-content: flex-end !important;
}
.chat-room-skeleton__bubble {
  max-width: min(70vw, 280px) !important;
  min-height: 44px !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.50) 25%, rgba(255,255,255,.82) 37%, rgba(255,255,255,.50) 63%) !important;
  background-size: 400% 100% !important;
  animation: ucimSkeletonShimmer 1.4s ease infinite !important;
  border: 1px solid rgba(255,255,255,.42) !important;
}
.chat-room-skeleton__row--self .chat-room-skeleton__bubble {
  background: linear-gradient(90deg, rgba(196,181,253,.44) 25%, rgba(249,168,212,.70) 37%, rgba(196,181,253,.44) 63%) !important;
  background-size: 400% 100% !important;
}
[data-tm="dark"] .chat-room-skeleton__bubble {
  background: linear-gradient(90deg, rgba(45,55,92,.72) 25%, rgba(75,87,132,.94) 37%, rgba(45,55,92,.72) 63%) !important;
  background-size: 400% 100% !important;
  border-color: rgba(196,181,253,.16) !important;
}
@keyframes ucimSkeletonShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.chat-topbar__delete {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--sa) !important;
  color: var(--tx2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.chat-topbar__delete:hover {
  background: rgba(239,68,68,.12) !important;
  color: #dc2626 !important;
}
[data-tm="dark"] .chat-topbar__delete {
  background: rgba(255,255,255,.08) !important;
  color: rgba(236,243,255,.92) !important;
}
[data-tm="dark"] .chat-topbar__delete:hover {
  background: rgba(239,68,68,.18) !important;
  color: #fca5a5 !important;
}

.chat-msg,
.chat-msg__bubble,
.chat-msg__bubble--self {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.chat-msg__bubble {
  color: rgba(18,24,44,.96) !important;
}
[data-tm="dark"] .chat-msg__bubble {
  color: rgba(244,247,255,.96) !important;
  background: rgba(16,22,50,.94) !important;
  border-color: rgba(196,181,253,.22) !important;
}
.chat-msg__bubble--self {
  color: rgba(26,18,74,.96) !important;
}
[data-tm="dark"] .chat-msg__bubble--self {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6174ff, #b07aff) !important;
  box-shadow: 0 10px 26px rgba(97,116,255,.26) !important;
}
[data-tm="dark"] .chat-msg__sender,
[data-tm="dark"] .chat-msg__time,
[data-tm="dark"] .chat-topbar__sub {
  color: rgba(223,232,255,.78) !important;
}

[data-tm="dark"] .benefit-card {
  background: rgba(15, 21, 48, .92) !important;
  border-color: rgba(148,163,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
}
[data-tm="dark"] .benefit-card--pending {
  background: rgba(29, 23, 58, .92) !important;
  border-color: rgba(223,164,255,.22) !important;
}
[data-tm="dark"] .benefit-title,
[data-tm="dark"] .benefit-name,
[data-tm="dark"] .inline-badge {
  color: #f8fbff !important;
}
[data-tm="dark"] .benefit-meta,
[data-tm="dark"] .benefit-empty,
[data-tm="dark"] .benefit-list,
[data-tm="dark"] .muted,
[data-tm="dark"] .hint,
[data-tm="dark"] .field .hint,
[data-tm="dark"] .archive-card__sub,
[data-tm="dark"] .settings-row__sub {
  color: rgba(220,229,255,.84) !important;
}
[data-tm="dark"] .mini-badge {
  background: rgba(255,255,255,.09) !important;
  color: #eef2ff !important;
  border: 1px solid rgba(196,181,253,.18) !important;
}
[data-tm="dark"] .benefit-dot {
  box-shadow: 0 0 0 3px rgba(96,165,250,.08) !important;
}
[data-tm="dark"] .benefit-dot--pending {
  box-shadow: 0 0 0 3px rgba(249,168,212,.08) !important;
}

[data-tm="dark"] .chat-topbar__name,
[data-tm="dark"] .route-picker-option__title,
[data-tm="dark"] .route-picker-option__side,
[data-tm="dark"] .route-picker-option__stats,
[data-tm="dark"] .modal-title,
[data-tm="dark"] .settings-row__title,
[data-tm="dark"] .card-title {
  color: #f8fbff !important;
}
[data-tm="dark"] .route-picker-option__desc,
[data-tm="dark"] .route-picker-option__meta,
[data-tm="dark"] .card-sub {
  color: rgba(220,229,255,.78) !important;
}

#chatRoomView.is-waiting-response .chat-send-btn {
  opacity: .78 !important;
  cursor: wait !important;
}
#chatRoomView.is-waiting-response .chat-send-btn svg {
  opacity: .7 !important;
}