/* custom-overrides.css
   Fixes for image aspect handling to avoid stretching vertical screenshots.
   Applies object-fit: cover to images that fill ratio containers or are sized to 100%.
*/

/* Images inside .ratio containers should preserve aspect ratio and cover the container */
.ratio img,
.ratio > img,
.card-img-top img,
img.w-100.h-100,
.position-relative img.w-100.h-100 {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Utility: when you explicitly want the whole image visible (no cropping), add class .img-contain */
.img-contain {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Global runtime toasts */
.fv-toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  display: grid;
  gap: .75rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.fv-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .875rem .95rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .875rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .14);
  pointer-events: auto;
  animation: fv-toast-in .18s ease-out both;
}

.fv-toast.is-leaving {
  animation: fv-toast-out .16s ease-in both;
}

.fv-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary);
}

.fv-toast__title {
  margin: 0 0 .15rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
}

.fv-toast__body {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: .8125rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fv-toast__close {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-secondary-color);
}

.fv-toast__close:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

@keyframes fv-toast-in {
  from {
    opacity: 0;
    transform: translateY(.75rem) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fv-toast-out {
  to {
    opacity: 0;
    transform: translateY(.5rem) scale(.98);
  }
}

/* Account chat */
.account-chat-page {
  --chat-radius: 1rem;
  --chat-soft-bg: color-mix(in srgb, var(--bs-tertiary-bg) 68%, transparent);
}

.account-chat-grid {
  align-items: stretch;
}

.account-chat-card {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bs-border-color) 82%, transparent);
  border-radius: var(--chat-radius);
  box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .05);
}

.account-chat-list-card {
  min-height: clamp(28rem, 62vh, 44rem);
}

.account-chat-list {
  max-height: clamp(23rem, 58vh, 39rem);
  overflow-y: auto;
}

.account-chat-search {
  border-radius: .75rem;
}

.account-chat-conversation {
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  transition: background-color .16s ease, transform .16s ease;
}

.account-chat-conversation:hover {
  background: var(--bs-tertiary-bg);
}

.account-chat-conversation.active {
  background: linear-gradient(135deg, var(--bs-primary, #d85151), #f36b36);
}

.chat-counterpart-avatar,
.chat-header-avatar,
.chat-message-avatar {
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  background: var(--bs-tertiary-bg);
}

.chat-counterpart-avatar {
  width: 3.25rem !important;
  height: 3.25rem !important;
}

.chat-header-avatar {
  width: 3.25rem !important;
  height: 3.25rem !important;
}

.chat-message-avatar {
  width: 2rem !important;
  height: 2rem !important;
}

.chat-thread-card {
  min-height: clamp(34rem, 68vh, 48rem);
}

.chat-thread-header {
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-primary) 8%);
}

.chat-thread-actions {
  align-items: center;
}

.chat-connection-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .35rem .65rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.chat-connection-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--bs-secondary-color);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-secondary-color) 14%, transparent);
}

.chat-connection-pill.is-online .chat-connection-dot {
  background: #16a34a;
  box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .14);
}

.chat-connection-pill.is-fallback .chat-connection-dot,
.chat-connection-pill.is-connecting .chat-connection-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .16);
}

.chat-connection-pill.is-offline .chat-connection-dot {
  background: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .14);
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-height: clamp(24rem, 55vh, 37rem);
  max-height: clamp(24rem, 58vh, 39rem);
  overflow-y: auto;
  background:
    radial-gradient(circle at top left, rgba(var(--bs-primary-rgb, 216, 81, 81), .08), transparent 18rem),
    var(--chat-soft-bg);
  scroll-behavior: smooth;
}

.account-chat-page .chat-message-row {
  display: flex;
  gap: .55rem;
  align-items: flex-end;
  width: 100%;
  animation: chat-message-in .18s ease-out both;
}

.account-chat-page .chat-message-row.is-mine,
.account-chat-page .chat-message-row.is-outgoing {
  justify-content: flex-end;
}

.account-chat-page .chat-message-row.is-incoming {
  justify-content: flex-start;
}

.account-chat-page .chat-message-row.is-system {
  justify-content: center;
}

.chat-message-row.is-grouped {
  margin-top: -.45rem;
}

.chat-message-content {
  width: fit-content;
  max-width: min(70%, 38rem);
}

.chat-message-row.is-mine .chat-message-content,
.chat-message-row.is-outgoing .chat-message-content {
  text-align: right;
}

.chat-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .45rem;
  align-items: center;
  margin-bottom: .25rem;
  color: var(--bs-secondary-color);
  font-size: .72rem;
  line-height: 1.25;
}

.chat-message-row.is-mine .chat-message-meta,
.chat-message-row.is-outgoing .chat-message-meta {
  justify-content: flex-end;
}

.chat-message-author {
  color: var(--bs-body-color);
  font-weight: 700;
}

.chat-bubble {
  padding: .72rem .875rem;
  border-radius: 1rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  box-shadow: 0 .375rem 1rem rgba(15, 23, 42, .05);
}

.chat-message-row.is-mine .chat-bubble,
.chat-message-row.is-outgoing .chat-bubble {
  border-color: transparent;
  border-bottom-right-radius: .35rem;
  background: linear-gradient(135deg, var(--bs-primary, #d85151), #e44d4d);
  color: #fff;
  text-align: left;
  box-shadow: 0 .55rem 1.25rem rgba(var(--bs-primary-rgb, 216, 81, 81), .22);
}

.chat-message-row.is-incoming:not(.is-system) .chat-bubble,
.chat-message-row:not(.is-mine):not(.is-system) .chat-bubble {
  border-bottom-left-radius: .35rem;
  background: var(--bs-body-bg);
}

.chat-message-row.is-system .chat-bubble {
  max-width: min(90%, 34rem);
  border: 1px dashed color-mix(in srgb, var(--bs-warning) 50%, var(--bs-border-color));
  background: color-mix(in srgb, var(--bs-warning) 10%, var(--bs-body-bg));
  color: var(--bs-body-color);
  text-align: center;
  box-shadow: none;
}

.chat-message-text {
  font-size: .9rem;
  line-height: 1.48;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message-time {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  justify-content: flex-end;
  margin-top: .38rem;
  opacity: .74;
  font-size: .68rem;
  line-height: 1;
}

.chat-message-status {
  display: inline-flex;
  align-items: center;
  gap: .16rem;
  font-weight: 700;
}

.chat-message-status-icon {
  letter-spacing: 0;
  padding-right: .15rem;
}

.chat-message-row.is-mine .chat-message-status.is-delivered,
.chat-message-row.is-outgoing .chat-message-status.is-delivered {
  color: rgba(255, 255, 255, .78);
}

.chat-message-row.is-mine .chat-message-status.is-sending,
.chat-message-row.is-outgoing .chat-message-status.is-sending {
  color: rgba(255, 255, 255, .62);
}

.chat-message-row.is-mine .chat-message-status.is-read,
.chat-message-row.is-outgoing .chat-message-status.is-read {
  color: #7dd3fc;
  opacity: 1;
}

.chat-message-status.is-failed {
  color: #ffd2d2;
}

.chat-message-row.is-pending .chat-bubble {
  filter: saturate(.86);
  opacity: .82;
}

.chat-message-row.is-failed .chat-bubble {
  background: #dc3545;
}

.chat-attachment-preview {
  display: block;
  max-width: min(22rem, 100%);
  max-height: 18rem;
  border-radius: .75rem;
  object-fit: cover;
}

.chat-composer {
  background: var(--bs-body-bg);
}

.chat-composer textarea {
  max-height: 8rem;
  resize: none;
  border-radius: .8rem;
}

.chat-typing-indicator {
  padding: .5rem 1rem;
  color: var(--bs-secondary-color);
  font-size: .8rem;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

.chat-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  background: var(--bs-tertiary-bg);
}

.chat-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: chat-skeleton 1.2s infinite;
}

@keyframes chat-message-in {
  from {
    opacity: 0;
    transform: translateY(.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chat-skeleton {
  to {
    transform: translateX(100%);
  }
}

@media (max-width: 1199.98px) {
  .account-chat-list-card {
    min-height: auto;
  }

  .account-chat-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .account-chat-conversation {
    min-width: min(20rem, 82vw);
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 0;
  }

  .chat-thread-card {
    min-height: 34rem;
  }
}

@media (max-width: 767.98px) {
  .chat-message-content {
    max-width: 86%;
  }

  .chat-thread-header {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .chat-thread-header > .d-flex {
    width: 100%;
  }

  .chat-thread-actions {
    width: 100%;
    justify-content: flex-start !important;
  }

  .chat-thread-actions .btn {
    flex: 1 1 8rem;
  }

  .chat-composer form {
    align-items: stretch !important;
    flex-direction: column;
  }
}