/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Shared conversation window styles */
.conversation {
  position: relative;
}

.conversation-toolbar {
  z-index: 999; /* required to have it superimposed to the video element */
  border: 1px solid #5a5a5a;
  border-left: 0;
  border-right: 0;
  background: rgba(0,0,0,.70);
}

/* desktop version */
.fx-embedded .conversation-toolbar {
  /* required to have dropdowns float atop the .room-invitation-overlay: */
  z-index: 1020;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* note that .room-invitation-overlay top matches this */
  height: 26px;
}

/* standalone version */
.standalone .conversation-toolbar {
  padding: 20px;
  height: 64px;
}

.standalone .focus-stream {
  /* Set at maximum height, minus height of conversation toolbar */
  height: calc(100% - 64px);
}

.standalone .in-call .focus-stream {
  height: 100%;
}

.conversation-toolbar > li {
  float: left;
  font-size: 0; /* prevents vertical bottom padding added to buttons in google
                   chrome */
}

  .standalone .conversation-toolbar > li {
    /* XXX Might make sense to use relative units here.
     */
    margin-right: 16px;
  }

.btn-edit-entry {
  float: right !important;
  border-left: 1px solid #5a5a5a;
}

.conversation-toolbar-btn-box {
  border-right: 1px solid #5a5a5a;
}

  .standalone .conversation-toolbar-btn-box {
    /* overwrite the style for standalone
     * because we reuse the same component */
    border: none;
  }

.conversation-toolbar .btn {
  /* dimensions according to spec
   * https://people.mozilla.org/~dhenein/labs/loop-link-spec/#video-call */
  width: 32px;
  height: 24px;
  background-position: center;
  background-size: 40%;
  background-repeat: no-repeat;
}

.standalone .media-control {
  width: 36px;
  background-position: center;
  border-radius: 28px;
}

  .standalone-conversation-toolbar-media-btn:hover {
    background-color: rgba(255,255,255,.35);
  }

.fx-embedded-answer-btn-text {
  vertical-align: bottom;
  /* always leave space for the icon (width and margin) */
  max-width: calc(100% - .8rem - .2rem);
}

.fx-embedded-btn-icon-video,
.fx-embedded-btn-icon-audio {
  display: inline-block;
  vertical-align: top;
  width: .8rem;
  height: .8rem;
  background-repeat: no-repeat;
  cursor: pointer;
  -moz-margin-start: .2rem;
}

.fx-embedded-btn-icon-video,
.fx-embedded-btn-video-small,
.fx-embedded-tiny-video-icon {
  background-image: url("../img/video-inverse-14x14.png");
}

.fx-embedded-btn-icon-audio,
.fx-embedded-btn-audio-small,
.fx-embedded-tiny-audio-icon {
  background-image: url("../img/audio-inverse-14x14.png");
}

.fx-embedded-btn-audio-small,
.fx-embedded-btn-video-small {
  width: 26px;
  height: 26px;
  border-left: 1px solid rgba(255,255,255,.4);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #5bc0a4;
  background-position: center;
  background-size: 1rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

  .fx-embedded-btn-video-small:hover,
  .fx-embedded-btn-audio-small:hover {
    background-color: #6cb23e;
  }

@media (min-resolution: 2dppx) {
  .fx-embedded-btn-audio-small {
    background-image: url("../img/audio-inverse-14x14@2x.png");
  }
  .fx-embedded-btn-video-small {
    background-image: url("../img/video-inverse-14x14@2x.png");
  }
}

.standalone .btn-hangup {
  width: auto;
  font-size: 12px;
  border-radius: 2px;
  padding: 0 20px;
}

.fx-embedded .conversation-toolbar .btn-hangup {
  background-image: url(../img/hangup-inverse-14x14.png);
}
@media (min-resolution: 2dppx) {
  .fx-embedded .conversation-toolbar .btn-hangup {
    background-image: url(../img/hangup-inverse-14x14@2x.png);
  }
}

/* Common media control buttons behavior */
.conversation-toolbar .transparent-button {
  background-color: transparent;
  opacity: 1;
}
.conversation-toolbar .transparent-button:hover,
.conversation-toolbar .transparent-button.menu-showing {
  background-color: rgba(255,255,255,.35);
  opacity: 1;
}
.conversation-toolbar .media-control.muted {
  background-color: #0096DD;
  opacity: 1;
}

/* Audio mute button */
.btn-mute-audio {
  background-image: url(../img/audio-inverse-14x14.png);
}
.btn-mute-audio.muted {
  background-image: url(../img/mute-inverse-14x14.png);
}
@media (min-resolution: 2dppx) {
  .btn-mute-audio {
    background-image: url(../img/audio-inverse-14x14@2x.png);
  }
  .btn-mute-audio.muted {
    background-image: url(../img/mute-inverse-14x14@2x.png);
  }
}

/* Video mute button */
.btn-mute-video {
  background-image: url(../img/video-inverse-14x14.png);
}
.btn-mute-video.muted {
  background-image: url(../img/facemute-14x14.png);
}
@media (min-resolution: 2dppx) {
  .btn-mute-video {
    background-image: url(../img/video-inverse-14x14@2x.png);
  }
  .btn-mute-video.muted {
    background-image: url(../img/facemute-14x14@2x.png);
  }
}

/* Screen share button */
.btn-mute-edit,
.btn-screen-share {
  position: relative;
  background-image: url(../img/icons-10x10.svg#edit-white);
  background-size: 16px 16px;
}

.btn-screen-share {
  background-image: url(../img/icons-16x16.svg#screen-white);
  width: 42px;
}

/* Make room for the chevron. */
.conversation-toolbar .btn-screen-share:not(.active) {
  background-position: 5px center;
}

.btn-screen-share.active {
  background-image: url(../img/icons-16x16.svg#screenmute-white);
  background-color: #6CB23E;
}

.btn-mute-edit.muted,
.btn-screen-share.active {
  opacity: 1;
}

.btn-screen-share.disabled {
  background-image: url(../img/icons-16x16.svg#screen-disabled);
}

.btn-screen-share .chevron {
  background-image: url(../img/icons-10x10.svg#dropdown-white);
  background-size: 10px 10px;
  position: absolute;
  right: 2px;
  top: 8px;
  width: 10px;
  height: 10px;
}

.btn-screen-share.disabled .chevron {
  background-image: url(../img/icons-10x10.svg#dropdown-disabled);
}

.fx-embedded .remote_wrapper {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.fx-embedded .no-video {
  background: black none repeat scroll 0% 0%;
  height: 100%;
  width: 100%;
}

.standalone .local-stream {
  /* required to have it superimposed to the control toolbar */
  z-index: 1001;
}

/* Side by side video elements */

.conversation .media.side-by-side .focus-stream {
  width: 50%;
  float: left;
}

.conversation .media.side-by-side .local-stream,
.conversation .media.side-by-side .remote-inset-stream {
  width: 50%;
}

/* Call ended view */
.call-ended p {
  text-align: center;
}

/* General Call (incoming or outgoing). */

/*
 * Height matches the height of the docked window
 * but the UI breaks when you pop out
 * Bug 1040985
 */
.call-window {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 230px;
}

.call-window > .btn-label {
  text-align: center;
}

.call-window > .error {
  text-align: center;
  color: #f00;
  font-size: 90%;
}

.call-action-group {
  display: flex;
  padding: 2.5em 4px 0 4px;
  width: 100%;
}

.call-action-group > .btn,
.room-context > .btn {
  min-height: 26px;
  border-radius: 2px;
  margin: 0 4px;
  min-width: 64px;
}

.call-action-group .btn-group-chevron,
.call-action-group .btn-group {
  width: 100%;
}

/* XXX Once we get the incoming call avatar, bug 1047435, the H2 should
 * disappear from our markup, and we should remove this rule entirely.
 */
.call-window h2 {
  font-size: 1.5em;
  font-weight: normal;
  text-align: center;
  /* compensate for reset.css overriding this; values borrowed from
     Firefox Mac html.css */
  margin: 0.83em 0;
}

.fx-embedded-call-button-spacer {
  display: flex;
  flex: 1;
}

/*
 * Dropdown menu hidden behind a chevron
 *
 * .native-dropdown-menu[-large-parent] Generic class, contains common styles
 * .standalone-dropdown-menu Initiate call dropdown menu
 * .conversation-window-dropdown Dropdown menu for answer/decline/block options
 */

.native-dropdown-menu,
.native-dropdown-large-parent {
  /* Should match a native select menu */
  padding: 0;
  position: absolute; /* element can be wider than the parent */
  background: #fff;
  margin: 0;
  box-shadow: 0 4px 5px rgba(30,30,30,.3);
  border-style: solid;
  border-width: 1px 1px 1px 2px;
  border-color: #aaa #111 #111 #aaa;
}

  /*
   * If the component is smaller than the parent
   * we need it to display block to occupy full width
   * Same as above but overrides apropriate styles
   */
  .native-dropdown-large-parent {
    position: relative;
    display: block;
  }

  .native-dropdown-menu li,
  .native-dropdown-large-parent li {
    list-style: none;
    cursor: pointer;
    color: #000;
  }

  .native-dropdown-menu li:hover,
  .native-dropdown-large-parent li:hover,
  .native-dropdown-large-parent li:hover button {
    color: #fff;
    background-color: #111;
  }

.conversation-window-dropdown > li {
  padding: 2px;
  font-size: .7rem;
  white-space: nowrap;
}

/* Expired call url page */

.expired-url-info {
  width: 400px;
  margin: 0 auto;
}

.promote-firefox {
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  margin: 2em 0;
}

.promote-firefox h3 {
  font-weight: 300;
}

/* Feedback form */

.feedback {
  padding: 14px;
}

.feedback p {
  margin: 0px;
}

.feedback h3 {
  color: #666;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 1em 0;
}

.feedback .faces {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.feedback .face {
  border: 1px solid transparent;
  box-shadow: 0 1px 2px #CCC;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 10px;
  width: 80px;
  height: 80px;
  background-color: #fbfbfb;
  background-size: 60px auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.feedback .face:hover {
  border: 1px solid #DDD;
  background-color: #FEFEFE;
}

.feedback .face.face-happy {
  background-image: url("../img/happy.png");
}

.feedback .face.face-sad {
  background-image: url("../img/sad.png");
}

.fx-embedded-btn-back {
  margin-bottom: 1rem;
  padding: .2rem .8rem;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: transparent;
  color: #777;
  cursor: pointer;
}

.feedback-category-label {
  display: block;
  line-height: 1.5em;
}

.feedback-category-radio {
  margin-right: .5em;
}

.feedback > form > .btn-success,
.feedback-description {
  width: 100%;
  margin-top: 14px;
}

.feedback > form > .btn-success {
  padding-top: .5em;
  padding-bottom: .5em;
  border-radius: 2px;
}

.feedback .info {
  display: block;
  font-size: 10px;
  color: #CCC;
  text-align: center;
}

.fx-embedded .local-stream {
  position: absolute;
  right: 3px;
  bottom: 5px;
  /* next two lines are workaround for lack of object-fit; see bug 1020445 */
  max-width: 140px;
  width: 30%;
  height: 28%;
  max-height: 105px;
}

.fx-embedded .local-stream.room-preview {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
  max-width: none;
  max-height: none;
}

.conversation .media.nested .focus-stream {
  display: inline-block;
  position: absolute; /* workaround for lack of object-fit; see bug 1020445 */
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*
 * For any audio-only streams, we want to display our own background
 */
.avatar {
  background-image: url("../img/audio-call-avatar.svg");
  background-repeat: no-repeat;
  background-color: #4BA6E7;
  background-size: contain;
  background-position: center;

  /*
   * Expand to fill the available space, since there is no video any
   * intrinsic width. XXX should really change to an <img> for clarity
   */
  height: 100%;
  width: 100%;
}

/*
 * Used to center the loading spinner
 */
.focus-stream, .remote {
  position: relative;
}

.loading-stream {
  /* vertical and horizontal center */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;

  /* place the animation */
  background-image: url("../img/spinner.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40%;

  /* 12 is the number of lines in the spinner image */
  animation: rotate-spinner 1s steps(12, end) infinite;
}

@keyframes rotate-spinner {
  to {
    transform: rotate(360deg);
  }
}

.conversation .local .avatar {
  position: absolute;
  z-index: 1;
}

.remote .avatar {
  /* make visually distinct from local avatar */
  opacity: 0.25;
}

.fx-embedded .media.nested {
  min-height: 200px;
}

.fx-embedded-call-identifier {
  display: inline;
  width: 100%;
  padding: 1.2em;
}

.fx-embedded-call-identifier-item {
  height: 50px;
}

.fx-embedded-call-identifier-avatar {
  max-width: 50px;
  min-width: 50px;
  background: #ccc;
  border-radius: 50%;
  background-image: url("../img/audio-call-avatar.svg");
  background-repeat: no-repeat;
  background-color: #4ba6e7;
  background-size: contain;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  float: left;
  -moz-margin-end: 1em;
}

.fx-embedded-call-identifier-text {
  font-weight: bold;
}

.fx-embedded-call-identifier-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -moz-margin-start: 1em;
}

.fx-embedded-conversation-timestamp {
  font-size: .6rem;
  line-height: 17px;
  display: inline-block;
  vertical-align: top;
}

.fx-embedded-call-detail {
  padding-top: 1.2em;
}

.fx-embedded-tiny-video-icon {
  margin: 0 0.8em;
}

.fx-embedded-tiny-audio-icon,
.fx-embedded-tiny-video-icon {
  width: 18px;
  height: 18px;
  background-size: 12px 12px;
  background-color: #4ba6e7;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

  .fx-embedded-tiny-video-icon.muted {
    background-color: rgba(0,0,0,.2)
  }

/* Force full height on all parents up to the video elements
 * this way we can ensure the aspect ratio and use height 100%
 * on the video element
 * */
html, .fx-embedded, #main,
.video-layout-wrapper,
.conversation {
  height: 100%;
}

/* We use 641px rather than 640, as min-width and max-width are inclusive */
@media screen and (min-width: 641px) {
  .standalone .conversation .conversation-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .standalone .conversation .local-stream {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 20%;
    height: 20%;
    max-width: 400px;
    max-height: 300px;
  }

  /* Nested video elements */
  .standalone .conversation .media.nested {
    position: relative;
    height: 100%;
  }

  .standalone .media.nested {
    margin-left: 10px;
  }

  .standalone .remote_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .standalone {
    margin: 0 auto;
  }
}

@media screen and (max-width:640px) {
  .standalone .video-layout-wrapper,
  .standalone .conversation {
    height: 100%;
  }

  .standalone .media {
    height: 90%;
  }

  .standalone .media.nested {
    min-height: 500px;
  }

  .standalone .conversation .local-stream {
    flex: 1;
    min-width: 120px;
    min-height: 150px;
    width: 100%;
  }

  /* Nested video elements */
  .standalone .conversation .media.nested {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
  }

  .standalone .video_wrapper.remote_wrapper {
    /* Because of OT markup we need to set a high flex value
     * Flex rule assures remote and local streams stack on top of each other
     * Computed width is not 100% unless the `width` rule */
    flex: 2;
    width: 100%;
    position: relative;
  }
}

@media screen and (max-width:420px) {
  /* Restore video height so that we get
   * vertical centering for free on a small screen
   **/
  .standalone .conversation .media video {
    height: 100%;
  }
}

/**
 * Rooms
 */

.room-conversation-wrapper {
  position: relative;
  height: 100%;
}

.room-conversation-wrapper header {
  background: #000;
  height: 50px;
  text-align: left;
  margin: 0 10px;
}

html[dir="rtl"] .room-conversation-wrapper header {
  text-align: right;
}

.room-conversation-wrapper header h1 {
  font-size: 1.5em;
  color: #fff;
  line-height: 50px;
  text-indent: 40px;
  background-image: url("../img/firefox-logo.png");
  background-size: 30px;
  background-position: 0 center;
  background-repeat: no-repeat;
  display: inline-block;
  margin: 0 10px;
}

html[dir="rtl"] .room-conversation-wrapper header h1 {
  background-position: 100% center;
}

.room-conversation-wrapper header a {
  float: right;
}

html[dir="rtl"] .room-conversation-wrapper header a {
  float: left;
}

.room-conversation-wrapper header .icon-help {
  display: inline-block;
  background-size: contain;
  margin-top: 15px;
  width: 20px;
  height: 20px;
  background: transparent url("../img/svg/glyph-help-16x16.svg") no-repeat;
}

.fx-embedded .room-conversation .conversation-toolbar .btn-hangup {
  background-image: url("../img/icons-16x16.svg#leave");
}

.room-invitation-overlay {
  position: absolute;
  background: rgba(0,0,0,.6);
  /* This matches .fx-embedded .conversation toolbar height */
  top: 26px;
  height: calc(100% - 26px);
  right: 0;
  left: 0;
  text-align: center;
  color: #fff;
  z-index: 1010;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.room-invitation-content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.room-invitation-overlay input[type="text"] {
  display: block;
  background-color: rgba(0,0,0,.5);
  border-radius: 3px;
  padding: .5em;
}

.room-invitation-overlay .btn-group {
  padding: 0 0 1em 0;
}

.room-invitation-addcontext {
  color: #0095dd;
  padding-left: 1.5em;
  margin-bottom: 1em;
  background-image: url("../img/icons-10x10.svg#edit-active");
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: left top;
  font-size: 1em;
  cursor: pointer;
}

.room-invitation-addcontext:hover,
.room-invitation-addcontext:hover:active {
  text-decoration: underline;
}

html[dir="rtl"] .room-invitation-addcontext {
  padding-left: 0;
  padding-right: 1.5em;
  background-position: right top;
}

.share-service-dropdown {
  color: #000;
  text-align: start;
  bottom: auto;
  top: 0;
  overflow: hidden;
  overflow-y: auto;
}

/* When the dropdown is showing a vertical scrollbar, compensate for its width. */
body[platform="other"] .share-service-dropdown.overflow > .dropdown-menu-item,
body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
  -moz-padding-end: 20px;
}

.share-service-dropdown > .dropdown-menu-item > .icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.dropdown-menu-item > .icon-add-share-service {
  background-image: url("../img/icons-16x16.svg#add");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
}

.dropdown-menu-item:hover > .icon-add-share-service {
  background-image: url("../img/icons-16x16.svg#add-hover");
}

.dropdown-menu-item:hover:active > .icon-add-share-service {
  background-image: url("../img/icons-16x16.svg#add-active");
}

.context-url-view-wrapper {
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  background-color: #E8F6FE;
}

.room-context {
  background: rgba(0,0,0,.8);
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
  padding: .5rem;
  max-height: 400px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* Stretch to the maximum available space whilst not covering the conversation
     toolbar (26px). */
  height: calc(100% - 26px);
  font-size: .9em;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  /* Make the context view float atop the video elements. */
  z-index: 2;
}

.room-invitation-overlay .room-context {
  position: relative;
  left: auto;
  bottom: auto;
  flex: 0 1 auto;
  height: 100%;
}

.room-context > .error-display-area.error {
  display: block;
  background-color: rgba(215,67,69,.8);
  border-radius: 3px;
  padding: .5em;
}

.room-context > .error-display-area {
  display: none;
}

.room-context > .error-display-area.error {
  margin: 1em 0 .5em 0;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

.room-context > .checkbox-wrapper {
  margin-bottom: .5em;
}

.room-context-label {
  margin-bottom: 1em;
}

.room-context-label,
.room-context > .checkbox-wrapper > label {
  color: #fff;
}

.room-context-comment {
  color: #707070;
}

.room-context-comment {
  word-wrap: break-word;
}

:not(input).room-context-url {
  color: #0095dd;
  font-style: italic;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.room-context-url:hover {
  text-decoration: underline;
}

.room-context > form {
  width: 100%;
}

.room-context > form > textarea,
.room-context > form > input[type="text"] {
  display: block;
  background: rgba(0,0,0,.5);
  font-family: "Helvetica Neue", Arial, sans;
  border: 1px solid rgba(255,255,255,.2);
  width: 100%;
  padding: .5em;
  border-radius: 3px;
  resize: none;
  color: #fff;
}

.room-context > form > textarea {
  font-size: 1em;
}

.room-context > form > input:not([disabled]).room-context-url {
  color: #0095dd;
}

.room-context > form > input[disabled] {
  background-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.4);
}

.room-context > form > textarea:not(:last-of-type),
.room-context > form > input[type="text"] {
  margin: 0 0 .5em 0;
}

.room-context > .btn {
  margin: .5em 0 0;
  font-size: 1.1em;
  padding: 0 .5em;
  align-self: flex-end;
}

.room-context-btn-close {
  position: absolute;
  right: 8px;
  /* 8px offset + 2px border-top */
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: transparent;
  background-image: url("../img/icons-10x10.svg#close-darkergrey");
  background-size: 8px 8px;
  background-repeat: no-repeat;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.room-context-btn-close:hover,
.room-context-btn-close:hover:active {
  background-image: url("../img/icons-10x10.svg#close-active");
}

html[dir="rtl"] .room-context-btn-close {
  right: auto;
  left: 8px;
}

.media-layout {
  /* 50px is the header, 3em is the footer. */
  height: calc(100% - 50px - 3em);
}

.media-layout > .media-wrapper {
  display: flex;
  flex-flow: column wrap;
  /* 64px for .conversation-toolbar */
  height: calc(100% - 64px);
  margin: 0 10px;
}

.media-wrapper > .focus-stream {
  /* We want this to be the width, minus 200px which is for the right-side text
     chat and video displays. */
  width: calc(100% - 200px);
  /* 100% height to fill up media-layout, thus forcing other elements into the
     second column that's 200px wide */
  height: 100%;
  background-color: #4E4E4E;
}

.media-wrapper > .remote {
  /* Works around an issue with object-fit: cover in Google Chrome - it doesn't
     currently crop but overlaps the surrounding elements.
     https://code.google.com/p/chromium/issues/detail?id=400829 */
  overflow: hidden;
}

.media-wrapper > .remote > .remote-video {
  object-fit: cover;
}

/* Note: we can't use "display: flex;" for the text-chat-view itself,
   as this lets it overflow the expected column heights, and we can't
   fix its height. */
.media-wrapper > .text-chat-view {
  flex: 0 0 auto;
  /* Text chat is a fixed 200px width for normal displays. */
  width: 200px;
  height: 100%;
}

.media-wrapper.showing-local-streams > .text-chat-view {
  /* When we're displaying the local streams, then we need to make the text
     chat view a bit shorter to give room. */
  height: calc(100% - 150px);
}

.media-wrapper.showing-local-streams.receiving-screen-share > .text-chat-view {
  /* When we're displaying the local streams, then we need to make the text
     chat view a bit shorter to give room. */
  height: calc(100% - 300px);
}

/* Temporarily slaved from .media-wrapper until we use it in more places
   to avoid affecting the conversation window on desktop. */
.media-wrapper > .text-chat-view > .text-chat-entries {
  /* 40px is the height of .text-chat-box. */
  height: calc(100% - 40px);
}

.media-wrapper > .text-chat-disabled > .text-chat-entries {
  /* When text chat is disabled, the entries box should be 100% height. */
  height: 100%;
}

.media-wrapper > .local {
  flex: 0 1 auto;
  width: 200px;
  height: 150px;
}

.media-wrapper.receiving-screen-share > .screen {
  order: 1;
}

.media-wrapper.receiving-screen-share > .text-chat-view {
  order: 2;
}

.media-wrapper.receiving-screen-share > .remote {
  order: 3;
  flex: 0 1 auto;
  width: 200px;
  height: 150px;
}

.media-wrapper.receiving-screen-share > .local {
  order: 4;
}

@media screen and (max-width:640px) {
  .media-layout {
    /* 50px is height of header, 25px is height of footer. */
    height: calc(100% - 50px - 25px);
  }

  .media-layout > .media-wrapper {
    flex-direction: row;
    margin: 0;
    width: 100%;
    /* conversation toolbar is 38px in narrow mode */
    height: calc(100% - 38px);
  }

  .media-wrapper > .focus-stream {
    width: 100%;
    /* A reasonable height */
    height: 70%;
  }

  .media-wrapper.receiving-screen-share > .focus-stream {
    height: 50%;
  }

  /* Temporarily slaved from .media-wrapper until we use it in more places
     to avoid affecting the conversation window on desktop. */
  .media-wrapper > .text-chat-view > .text-chat-entries {
    /* 40px is the height of .text-chat-box. */
    height: calc(100% - 40px);
    width: 100%;
  }

  .media-wrapper > .text-chat-disabled > .text-chat-entries {
    /* When text chat is disabled, the entries box should be 100% height. */
    height: 100%;
  }

  .media-wrapper > .local {
    /* Position over the remote video */
    position: absolute;
    /* Make sure its on top */
    z-index: 1001;
    margin: 3px;
    right: 0;
    /* 29px is (30% of 50px high header) + (height toolbar (38px) +
       height footer (25px) - height header (50px)) */
    bottom: calc(30% + 29px);
    width: 120px;
    height: 120px;
  }

  html[dir="rtl"] .media-wrapper > .local {
    right: auto;
    left: 0;
  }

  .media-wrapper > .text-chat-view {
    order: 3;
    flex: 1 1 auto;
    width: 100%;
  }

  .media-wrapper > .text-chat-view,
  .media-wrapper.showing-local-streams > .text-chat-view,
  .media-wrapper.showing-local-streams.receiving-screen-share > .text-chat-view {
    /* The remaining 30% that the .focus-stream doesn't use. */
    height: 30%;
  }

  .media-wrapper.receiving-screen-share > .screen {
    order: 1;
  }

  .media-wrapper.receiving-screen-share > .remote {
    /* Screen shares have remote & local video side-by-side on narrow screens */
    order: 2;
    flex: 1 1 auto;
    height: 20%;
    /* Ensure no previously specified widths take effect, and we take up no more
       than half the width. */
    width: auto;
    max-width: 50%;
  }

  .media-wrapper.receiving-screen-share > .remote > .remote-video {
      /* Reset the object-fit for this. */
    object-fit: contain;
  }

  .media-wrapper.receiving-screen-share > .local {
    /* Screen shares have remote & local video side-by-side on narrow screens */
    order: 3;
    flex: 1 1 auto;
    height: 20%;
    /* Ensure no previously specified widths take effect, and we take up no more
       than half the width. */
    width: auto;
    max-width: 50%;
    /* This cancels out the absolute positioning when it's just remote video. */
    position: relative;
    bottom: auto;
    right: auto;
    margin: 0;
  }

  .media-wrapper.receiving-screen-share > .text-chat-view {
    order: 4;
  }
}

.standalone > #main > .room-conversation-wrapper > .media-layout > .conversation-toolbar {
  border: none;
}

/* Standalone rooms */

.standalone .room-conversation-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

.standalone .room-conversation-wrapper .video-layout-wrapper {
  /* 50px = height of header, 3em = height of footer */
  /* XXX This is currently wrong for narrow/mobile display,
     bug 1168829  will hopefully address it. */
  height: calc(100% - 50px - 3em);
}

.standalone .room-conversation-wrapper .room-inner-info-area {
  position: absolute;
  /* `top` is chosen to vertically position the area near the center
     of the media element. */
  top: calc(50% - 140px);
  left: 25%;
  z-index: 1000;
  /* `width` here is specified by the design spec. */
  width: 250px;
  color: #fff;
  box-sizing: content-box;
}

html[dir="rtl"] .standalone .room-conversation-wrapper .room-inner-info-area {
  right: 25%;
  left: auto;
}

.standalone .prompt-media-message {
  padding-top: 136px; /* Fallback for browsers that don't support calc() */
  /* 122px is 2x the intrinsic height of the background-image, and
     1rem puts one line of margin between the background-image and
     supporting text. */
  padding-top: calc(122px + 1rem);
  color: #000;
  background-color: #fff;
  background-image: url("../../img/gum-others.svg");
  background-position: top center;
  /* The background-image is scaled up at 2x the instrinsic size
     (witdh & height) to make it easier to see. */
  background-size: 202px 122px;
  background-repeat: no-repeat;
  border: 1rem #fff solid;
  box-shadow: 0 0 5px #000;
  margin: 0;
}

.standalone .prompt-media-message.chrome {
  background-image: url("../../img/gum-chrome.svg");
}

.standalone .prompt-media-message.firefox {
  background-image: url("../../img/gum-firefox.svg");
}

.standalone .prompt-media-message.opera {
  background-image: url("../../img/gum-opera.svg");
}

.standalone .room-conversation-wrapper .room-inner-info-area button {
  border-radius: 3px;
  font-size: 1.2em;
  padding: .2em 1.2em;
  cursor: pointer;
}

.standalone .room-conversation-wrapper .room-inner-info-area a.btn {
  padding: .5em 3em .3em 3em;
  border-radius: 3px;
  font-weight: normal;
  max-width: 400px;
}

.standalone-context-url {
  color: #fff;
  /* Try and keep clear of local video */
  height: 40%;
}

.standalone-context-url.screen-share-active {
  /* Try and keep clear of remote video when screensharing */
  height: 15%;
}

.standalone-context-url > img {
  margin: 1em auto;
  width: 16px;
  height: 16px;
}

.standalone-context-url-description-wrapper {
  /* So that we can use max-height for the image */
  height: 20%;
}

.standalone .room-conversation .media {
  background: #000;
}

.standalone .room-conversation .video_wrapper.remote_wrapper {
  background-color: #4e4e4e;
  width: calc(75% - 10px); /* Take the left margin into account. */
}

.standalone .room-conversation .conversation-toolbar {
  background: #000;
  border: none;
}

.standalone .room-conversation .conversation-toolbar .btn-hangup-entry {
  display: block;
}

.standalone .room-conversation-wrapper .ended-conversation {
  position: relative;
  height: auto;
}

/* Text chat in rooms styles */

.fx-embedded .room-conversation-wrapper {
  display: flex;
  flex-flow: column nowrap;
}

.fx-embedded .video-layout-wrapper {
  flex: 1 1 auto;
}

.text-chat-view {
  background: white;
}

.fx-embedded .text-chat-view {
  flex: 1 0 auto;
  display: flex;
  flex-flow: column nowrap;
}

.fx-embedded .text-chat-entries {
  flex: 1 1 auto;
  max-height: 120px;
  min-height: 60px;
}

.text-chat-box {
  flex: 0 0 auto;
  max-height: 40px;
  min-height: 40px;
  width: 100%;
}

.text-chat-entries {
  overflow: auto;
}

.text-chat-entry {
  display: flex;
  flex-direction: row;
  margin-right: .2em;
  margin-bottom: .5em;
  text-align: end;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}

html[dir="rtl"] .text-chat-entry {
  margin-right: auto;
  margin-left: .2em;
}

.text-chat-entry > p {
  position: relative;
  z-index: 10;
  /* Drop the default margins from the 'p' element. */
  margin: 0;
  padding: .7em;
  /* leave some room for the chat bubble arrow */
  max-width: 80%;
  border-width: 1px;
  border-style: solid;
  border-color: #5cccee;
  background: #fff;
  word-wrap: break-word;
  flex: 0 1 auto;
  align-self: auto;
}

.text-chat-entry.sent > p,
.text-chat-entry.received > p {
  background: #fff;
}

.text-chat-entry.sent > p {
  border-radius: 15px;
  border-bottom-right-radius: 0;
}

.text-chat-entry.received > p {
  border-radius: 15px;
  border-top-left-radius: 0;
}

html[dir="rtl"] .text-chat-entry.sent > p {
  border-radius: 15px;
  border-bottom-left-radius: 0;
}

html[dir="rtl"] .text-chat-entry.received > p {
  border-radius: 15px;
  border-top-right-radius: 0;
}

.text-chat-entry.received > p {
  order: 1;
}

.text-chat-entry.sent > p {
  order: 1;
}

.text-chat-entry.received {
  text-align: start;
}

.text-chat-entry.received > p {
  border-color: #d8d8d8;
}

/* Text chat entry timestamp */
.text-chat-entry-timestamp {
  margin: 0 .5em;
  color: #aaa;
  font-style: italic;
  font-size: .8em;
  order: 0;
  flex: 0 1 auto;
  align-self: center;
}

/* Sent text chat entries should be on the right */
.text-chat-entry.sent {
  justify-content: flex-end;
}

.received > .text-chat-entry-timestamp {
  order: 2;
}

.sent > .text-chat-entry-timestamp {
  order: 0;
}

/* Pseudo element used to cover part between chat bubble and chat arrow. */
.text-chat-entry > p:after {
  position: absolute;
  background: #fff;
  content: "";
}

.text-chat-entry.sent > p:after {
  right: -2px;
  bottom: 0;
  width: 15px;
  height: 9px;
  border-top-left-radius: 15px;
  border-top-right-radius: 22px;
}

.text-chat-entry.received > p:after {
  top: 0;
  left: -2px;
  width: 15px;
  height: 9px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 15px;
}

html[dir="rtl"] .text-chat-entry.sent > p:after {
  /* Reset */
  right: auto;
  left: -1px;
  bottom: 0;
  width: 15px;
  height: 9px;
}

html[dir="rtl"] .text-chat-entry.received > p:after {
  /* Reset */
  left: auto;
  top: 0;
  right: -1px;
  width: 15px;
  height: 6px;
}

/* Text chat entry arrow */
.text-chat-arrow {
  width: 18px;
  background-repeat: no-repeat;
  flex: 0 1 auto;
  position: relative;
  z-index: 5;
}

.text-chat-entry.sent .text-chat-arrow {
  margin-bottom: -1px;
  margin-left: -11px;
  height: 10px;
  background-image: url("../img/chatbubble-arrow-right.svg");
  order: 2;
  align-self: flex-end;
}

.text-chat-entry.received .text-chat-arrow {
  margin-left: 0;
  margin-right: -9px;
  height: 10px;
  background-image: url("../img/chatbubble-arrow-left.svg");
  order: 0;
  align-self: auto;
}

html[dir="rtl"] .text-chat-arrow {
  transform: scaleX(-1);
}

html[dir="rtl"] .text-chat-entry.sent .text-chat-arrow {
  /* Reset margin. */
  margin-left: 0;
  margin-right: -11px;
}

html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
  /* Reset margin. */
  margin-right: 0;
  margin-left: -10px;
}

.text-chat-entry.special.room-name {
  color: black;
  font-weight: bold;
  text-align: start;
  background-color: #E8F6FE;
  padding-bottom: 0;
  margin-bottom: 0;
}

.text-chat-entry.special.room-name p {
  background: #E8F6FE;
}

.text-chat-entry.special > p {
  border: none;
}

.text-chat-box {
  margin: auto;
}

.text-chat-box > form > input {
  width: 100%;
  height: 40px;
  padding: 0 .5em .5em;
  font-size: 1.1em;
  border: 0;
  border-top: 1px solid #d8d8d8;
}

.text-chat-box > form > input::-webkit-input-placeholder {
  font-size: 1.1em;
  color: #999;
}

.text-chat-box > form > input::-moz-placeholder {
  font-size: 1.1em;
  color: #999;
}

.text-chat-box > form > input:-moz-placeholder {
  font-size: 1.1em;
  color: #999;
}

.text-chat-box > form > input:-ms-input-placeholder {
  font-size: 1.1em;
  color: #999;
}

.text-chat-box > form > input:input-placeholder {
  font-size: 1.1em;
  color: #999;
}

/* turn the visible border blue as a visual indicator of focus */
.text-chat-box > form > input:focus {
  border-top: 1px solid #66c9f2;
}

@media screen and (max-width:640px) {
  .standalone-context-url {
    /* XXX We haven't got UX for standalone yet, so temporarily not displaying
       on narrow window widths. See bug 1153827. */
    display: none;
  }

  /* Rooms specific responsive styling */
  .standalone .room-conversation {
    background: #000;
  }

  .standalone .room-conversation-wrapper .room-inner-info-area {
    right: 0;
    margin: auto;
    width: 100%;
    left: 0;
  }
  .standalone .room-conversation-wrapper .video-layout-wrapper {
    /* 50px: header's height; 25px: footer's height */
    height: calc(100% - 50px - 25px);
  }
  .standalone .room-conversation .video_wrapper.remote_wrapper {
    width: 100%;
  }
  .standalone .room-conversation .video_wrapper.remote_wrapper.not-joined {
    width: 100%;
  }

  .standalone .conversation-toolbar {
    height: 38px;
    padding: 8px;
  }
  .standalone .conversation .focus-stream {
    /* Set at maximum height, minus height of conversation toolbar */
    height: 100%;
  }

  .standalone .media.nested {
    /* This forces the remote video stream to fit within wrapper's height */
    min-height: 0px;
  }
}

.self-view-hidden-message {
  /* Not displayed by default; display is turned on elsewhere when the
   * self-view is actually hidden.
   */
  display: none;
}

/* Avoid the privacy problem where a user can size the window so small that
 * part of the self view is not shown.  If the self view isn't completely
 * displayable...
 */
@media screen and (max-height:160px) {

  /* disable the self view */
  .standalone .local-video {
    display: none;
  }

  /* and enable a message telling the user how to get it back */
  .standalone .self-view-hidden-message {
    display: inline;
    position: relative;
    top: 90px;
  }
}

.remote-video {
  /* Since there is grey stuff behind us, avoid obvious letterboxing, only do
   * this on remote video as local video has transparent background.
   */
  background-color: black;
}

.standalone .screen.focus-stream {
  /* Since there is grey stuff behind us, avoid obvious letterboxing */
  background-color: black;
}

.local-video {
  width: 100%;
  height: 100%;
  /* Transform is to make the local video act like a mirror, as is the
     convention in video conferencing systems. */
  transform: scale(-1, 1);
  transform-origin: 50% 50% 0;
}

.remote-video {
  width: 100%;
  height: 100%;
}

.screen-share-video {
  width: 100%;
  height: 100%;
}

/* Make sure the loading spinner always gets the same background */
.loading-background {
  background: black;
  position: absolute;
  width: 100%;
  height: 100%;
}
