session-desktop/stylesheets/_session_conversation.scss

@keyframes toShadow {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

@keyframes fromShadow {
  from {
    opacity: 0.25;
  }

  to {
    opacity: 1;
  }
}

.session-conversation {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: var(--main-panel-content-width);
  height: 100%;

  .selection-mode {
    .messages-container > *:not(.message-selected) {
      animation: toShadow var(--default-duration);
      opacity: 0.3;
    }
  }
}

.conversation-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  position: relative;
  outline: none;
  height: inherit;

  &-left {
    flex-grow: 1;
  }

  .conversation-messages {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 0;
    overflow-y: auto;
    background-color: inherit;
    outline: none;
    position: relative;
    background-color: var(--background-secondary-color);
    border-top: 1px solid var(--border-color);
  }
}

.composition-container {
  border-top: 1px solid var(--border-color);
  z-index: 1;
}

.session-recording {
  height: var(--composition-container-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  outline: none;
  margin-left: var(--margins-md);
  margin-right: var(--margins-md);

  $actions-element-size: 30px;

  &--actions {
    display: flex;
    align-items: center;
    width: $actions-element-size;
    height: $actions-element-size;
    border-radius: 50%;

    .session-button {
      animation: fadein var(--default-duration);
    }

    .session-icon-button {
      animation: fadein var(--default-duration);
      border-radius: 50%;
      width: $actions-element-size;
      height: $actions-element-size;

      .play {
        margin-left: 4px;
      }
    }
  }

  &--visualisation {
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    canvas {
      position: absolute;
      width: 100%;
      padding: 0px var(--margins-lg);
    }
  }

  &--timer {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-default);
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;

    &.playback-timer {
      animation: fadein var(--default-duration);

      @media (-webkit-min-device-pixel-ratio: 1.6) {
        margin-left: auto;
      }
    }
  }
}