/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

// MEMBER LIST
.message-list {
  position: relative;
  overflow: auto;
  flex: 1 1;
}

.messages {
  transform: translateZ(0);
  &.flex-center {
    margin: auto;
    & .message {
      width: 100%;
      min-width: 75%;
    }
  }
}

// MESSAGE
.message {
  position: relative;
  outline-offset: -0.1rem;

  &.content-message {
    &:hover,
    &:focus-visible {
      background-color: #fff;

      body.theme-dark & {
        background-color: var(--gray-90);
      }
    }
  }

  & * {
    .accent-selection;
  }

  &:last-child {
    margin-bottom: 40px;
  }

  &.hover .time,
  &:hover .time,
  .show-timestamp.time {
    opacity: 1;
    pointer-events: auto;
  }

  &.hover .time,
  &:hover .time,
  .show-timestamp.time {
    cursor: default;
  }

  &:not(:hover) {
    .message-status {
      opacity: 1;
    }
  }

  .message-mention {
    color: var(--accent-color);
    .text-medium;

    .mention-at-sign {
      font-size: var(--font-size-medium);
    }

    &.self-mention {
      padding: 3px 0 4px 0;
      background-color: var(--accent-color-self-mention);
      color: var(--main-color);
    }

    &:not(.self-mention) {
      cursor: pointer;
    }
  }
}

.content-message {
  &:has(.message-header) {
    margin-top: 6px;
  }
}

.system-message {
  padding-block: 8px;

  &:has(.message-timestamp) + .system-message {
    padding-top: 0;
  }
}

@keyframes marked-animation {
  to {
    background-color: inherit;
  }
}

.content-message-wrapper {
  padding-block: 6px;
}

.message-marked {
  .time {
    background-color: transparent;
  }

  .message-body {
    animation: calc(var(--animation-timing-slower) * 2) var(--ease-out-quart) 1s forwards marked-animation;
    background-color: var(--accent-color-fade-24);
  }
}

.message-isreplying {
  .message-body {
    opacity: 0.6;
  }
}

// MESSAGE - HEADER
.message-header {
  position: relative;
  display: flex;
  width: 100%;
  line-height: var(--avatar-diameter-xs);

  & > .message-body-actions {
    top: 6px;
  }

  + .message-services-warning {
    margin-left: 72px;
  }

  + .message-body .message-asset {
    padding-top: 6px;
  }
}

.message-header-icon {
  .flex-center;
  width: var(--conversation-message-sender-width);
  max-height: var(--avatar-diameter-xs);
  flex-shrink: 0;

  align-self: center;
  color: var(--background);

  &--svg {
    line-height: 0;

    svg:not(.filled) path {
      fill: var(--foreground);
    }
  }
}

.message-ping-delivered-icon,
.message-header-ping .delivered-message-icon {
  display: flex;
  width: var(--delivered-state-width);
  align-items: center;
  justify-content: center;
}

.message-header-content {
  display: flex;
  align-items: center;
}

.message-header-label {
  display: flex;
  min-width: 0; // fixes ellipsis not working with flexbox (FF)
  align-items: center;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  white-space: normal;

  &:has(.delivered-message-icon) {
    width: 100%;
    justify-content: space-between;
  }

  &--verification {
    display: inline;
    flex: 1;
  }

  a {
    cursor: pointer;
  }

  .message-header-plain-sender-name {
    font-weight: var(--font-weight-bold);
  }

  .message-header-sender-name {
    font-weight: var(--font-weight-bold);
    text-transform: capitalize;
  }

  .system-message-caption {
    & > a {
      color: inherit;
      font-weight: var(--font-weight-bold);
      text-decoration: underline;
    }
  }

  & > hr {
    align-self: flex-start;
    margin-top: 12px;
  }

  &__learn-more {
    color: var(--accent-color);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;

    &::before {
      display: inline-block;
      margin: 0 4px;
      content: '\00b7';
    }
  }
  &__multiline {
    white-space: nowrap;
    span {
      white-space: normal;
    }
  }
}

.message-header-label-sender {
  .label-nocase-bold-xs;
}

.message-header-label-icon {
  margin-left: 8px;
  font-size: var(--font-size-xxs);
}

.message-header-icon-guest,
.message-header-icon-service,
.message-header-icon-external {
  display: inline-flex;
  margin-top: -2px;
  margin-left: 8px;
  svg path {
    fill: var(--background-fade-40);
  }
}
.message-header-icon-guest,
.message-header-icon-service {
  svg {
    width: 14px;
    height: 14px;
  }
}

.message-header-icon-external svg {
  width: 16px;
  height: 16px;
}

.message-mention {
  outline-offset: 0.4rem;
}

// MESSAGE - BODY
.message-body {
  position: relative;
  width: 100%;

  .text:has(> .iframe-container) {
    margin-right: 0;
  }

  &:not(&.message-quoted):has(.message-quote__text--full pre) {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    .text-selection;
    .accent-selection;

    display: inline;
    min-width: 0;
    line-height: var(--line-height-lg);
    white-space: pre-wrap;
    word-wrap: break-word;

    ul,
    ol {
      padding-left: 32px;
      margin-top: 0;
      margin-bottom: 0;
      line-height: 1;
    }
  }

  .text-large {
    font-size: 40px;
    line-height: 2.5rem;
  }

  embed,
  iframe,
  object {
    max-width: var(--conversation-message-asset-width);
    margin-top: 16px;
    aspect-ratio: 16 / 9;
  }

  .md-heading {
    margin: 4px 0 8px;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-lg);

    & + br {
      display: none;
    }
  }
}

.message-body-like {
  .flex-center;

  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--conversation-message-sender-width);
}

.image-asset {
  position: relative;
  display: flex;
  cursor: pointer;

  &--no-image {
    .message-asset & {
      background-color: var(--foreground-fade-8);
      cursor: default;
    }
  }

  .image-icon svg {
    fill: white;
  }

  .image-ephemeral {
    cursor: default;
    opacity: 0;
  }

  .asset-loader {
    position: absolute;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}

// MESSAGE - ACTIONS
.message-body-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px;

  // actions pill
  .action-pill-style() {
    z-index: 1;
    display: flex;
    height: 16px;
    align-items: center;
    opacity: 0;
    text-decoration: none;
    transition: opacity, 0.3s;
  }

  .time {
    .action-pill-style;
  }

  .time {
    .subline;
    color: var(--gray-70);
    font-size: 12px !important;
    pointer-events: none;
    user-select: none;

    body.theme-dark & {
      color: var(--gray-60);
    }
  }
}

.message-status {
  margin-left: 12px;

  .subline;
  color: var(--gray-70);
  font-size: 11px !important;
  pointer-events: none;
  user-select: none;

  body.theme-dark & {
    color: var(--gray-60);
  }
}

.message-status-read {
  display: flex;
  align-items: center;
  margin-left: 12px;
  color: var(--gray-70);
  font-size: 11px !important;
  pointer-events: none;
  user-select: none;

  .button-reset-default;
  .subline;

  &__clickable {
    pointer-events: all;
  }

  body.theme-dark & {
    color: var(--gray-60);
  }

  svg {
    width: 12px;
    min-height: 12px;
    fill: currentColor;
  }

  &__count {
    margin-left: 4px;
  }

  &:focus,
  &:focus-visible {
    opacity: 1;
  }

  &__one-on-one {
    pointer-events: none;
  }

  @media (max-width: 768px) {
    &__one-on-one {
      height: 24px;
      flex-direction: column;
      .message-status-read__count {
        margin-left: 0;
      }
    }
  }
}

.message-services-warning {
  color: @w-red;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

// MEMBER MESSAGE
.message-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 48px;

  .message-services-warning {
    margin-top: 32px;
  }
}

.message-connected-header {
  padding: 0;
  margin: 0;
  font-size: var(--font-size-xlarge);
  font-weight: normal;
  line-height: 2.625rem;
  text-align: center;
  word-break: break-all;
}

.message-connected-contacts,
.message-connected-provider-name,
.message-connected-username {
  margin-bottom: 16px;
  .subline;
  color: var(--gray-90);

  body.theme-dark & {
    color: var(--white);
  }
}

.message-connected-avatar {
  margin-top: 24px;
}

.message-group-creation-header,
.message-member-footer {
  padding-top: 16px;
  margin-left: var(--conversation-message-sender-width);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

.message-group-creation-header-name {
  padding: 0;
  margin: 8px 0;
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-bold);
}

.message-group-creation-header-button {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 4px;
  margin-top: 16px;
  background-color: var(--separator-color);
  cursor: pointer;
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
}

.message-member-footer-message {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
}

.message-member-footer-description {
  margin-top: 8px;
  color: var(--background-fade-40);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
}

// PING MESSAGE
@keyframes ping-scale-animation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.8);
  }
}

@keyframes ping-opacity-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ping-animation {
  animation-delay: 0.05s, 0.05s;
  animation-duration: 0.7s, 0.7s;
  animation-name: ping-scale-animation, ping-opacity-animation;
  animation-timing-function: var(--ease-out-expo), var(--ease-out-quart);
}

.ping-animation-soft {
  animation-iteration-count: 3, 3;
}

.message-icon-ping {
  margin-left: 8px;
}

// CALL MESSAGE
.message-icon-missed-call {
  position: absolute;
  top: 8px;
  left: 16px;

  &.accent-color-1 {
    path {
      fill: @accent_colors-1;
    }
  }
  &.accent-color-2 {
    path {
      fill: @accent_colors-2;
    }
  }
  &.accent-color-3 {
    path {
      fill: @accent_colors-3;
    }
  }
  &.accent-color-4 {
    path {
      fill: @accent_colors-4;
    }
  }
  &.accent-color-5 {
    path {
      fill: @accent_colors-5;
    }
  }
  &.accent-color-6 {
    path {
      fill: @accent_colors-6;
    }
  }
  &.accent-color-7 {
    path {
      fill: @accent_colors-7;
    }
  }
}

// DECRYPT MESSAGE
.message-body-decrypt-error {
  min-height: 24px;
}

.message-header-decrypt-error-label {
  .label-xs;

  color: var(--foreground);
}

.message-header-decrypt-reset-session {
  .label-xs;

  position: relative;
  display: inline-block;
  width: 100%;
  height: 16px;
  cursor: pointer;
}

.message-header-decrypt-reset-session-action,
.message-header-decrypt-reset-session-spinner {
  position: absolute;
  top: 0;
  left: 0;
}

.message-header-decrypt-reset-session-action {
  height: 12px;
  font-size: var(--font-size-xsmall);
}

.message-header-decrypt-reset-session-spinner {
  top: 4px;
}

.message-verification-action {
  .ellipsis;

  cursor: pointer;
}

// MESSAGE SPACING
.message-asset {
  display: flex;
  flex-basis: 100%;
  align-items: flex-start;
  padding-block: 6px;
}

.message-call,
.message-ping {
  padding-top: 16px;
  margin-bottom: 24px;
}

.message-member,
.message-rename {
  padding-top: 16px;
  margin-bottom: 32px;
}

.message-call,
.message-member,
.message-ping,
.message-rename {
  .message-body-actions {
    position: relative;
  }
}

// TODO make generic class
.ephemeral-message-obfuscated {
  color: var(--accent-color);
  font-family: var(--font-family-ephemeral);
}

.ephemeral-asset-expired {
  .bg-color-ephemeral;
  .flex-center;

  color: #fff;

  path {
    fill: #fff;
  }
}

.overlay {
  position: fixed;
  z-index: @z-index-modal + 1;
  right: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.reactionContainer {
  display: flex;
  padding: 1rem;
  gap: 0.5rem;
}

.content-message-timestamp {
  margin-left: 0.5rem;
  color: var(--content-message-timestamp);
}

.overlay .EmojiPickerReact {
  border-style: none !important;
  background-color: var(--message-actions-background);
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);

  body.theme-dark & {
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
  }
}

.overlay .EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
  background-color: var(--message-actions-background);
}

.overlay .EmojiPickerReact .epr-preview {
  border-top: 1px solid var(--message-actions-border-hover);
}

.EmojiPickerReact .epr-search-container input {
  body.theme-dark & {
    border: 1px solid var(--gray-70);
    border-radius: 12px;
    background: var(--gray-100);
  }
}

.overlay .EmojiPickerReact button.epr-emoji {
  &:hover > *,
  &:focus > *,
  &:focus-visible > * {
    background-color: var(--message-actions-background-hover);
  }
}

.system-message-caption {
  & > a {
    color: inherit;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
  }
}