/**
 * BASE CSS STYLES FOR CHAT WIDGET
 * Warning: If doing client specific changes, you should be editing
 * the chat-widget-custom.css file inside the widgetOverrides folder
 */

#iconverse-chat-btn {
    position: fixed;
	right: 15px;
	bottom: 15px;
	height: 46.4px;
	width: 51.2px;
	border: none;
	border-radius: 100%;
	outline: none;
	cursor: pointer;

	background-image: url("../img/chat-bubble-white.png");
	background-color: #4a90e2;
    background-size: 22px 22px;
    background-position: center center;
    background-repeat: no-repeat;

    -webkit-transition: background 0.15s linear;
	-moz-transition: background 0.15s linear;
	-o-transition: background 0.15s linear;
	-ms-transition: background 0.15s linear;
	transition: background 0.15s linear;

	z-index: 100000000000;
}

#iconverse-chat-btn.activated {
	background-image: url("../img/close-btn-white.png");
	background-size: 22px 22px;
}

#iconverse-chat-btn.mobile {
    z-index: 10000000000;
    top: 0px;
    background-color: transparent !important;
    right: 0;
}

.activated.mobile {
    display: none;
}

#iconverse-chat-holder {
	right: 20px;
	bottom: 75px;

	/**
	 * The height of iconverse-chat-holder
	 * need to be responsive for small height screen
	 * e.g. calc(full height - bottom - right)
	 * And max-height need to be set
	 */
	height: calc(100% - 75px - 20px);
	max-height: 560px;

	/**
	 * The width of iconverse-chat-holder
	 * need to be responsive for small width screen
	 * e.g. calc(full width - left - right)
	 * And max-width need to be set
	 */
	width: calc(100vw - 20px - 20px);
	max-width: 400px;
	border-radius: 15px;
	position: fixed;
	overflow: hidden;

    z-index: 1000000;
}

#iconverse-chat-iframe {
	/**
	 * The height and width of iconverse-chat-iframe
	 * need to match height and width of iconverse-chat-holder
	 */
	height: 100%;
	width: 100%;

  /* Magic number, must be lower than iconverse-chat-holder border-radius to prevent jumping border */
  border-radius: 10px;

	-webkit-transition: opacity 0.35s linear;
	-moz-transition: opacity 0.35s linear;
	-o-transition: opacity 0.35s linear;
	-ms-transition: opacity 0.35s linear;
	transition: opacity 0.35s linear;
	-webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
    animation-delay: 5s;
}

#iconverse-chat-holder.mobile-sizing {
    right: 0;
	bottom: 0;
	left: 0;
	top: 0;
	height: 100%;
    /* height: 100vh; */
    width: 100vw;
	border-radius: 0;
	max-block-size: a;
	max-width: initial;
	max-height: initial;
}

#iconverse-chat-holder.mobile-sizing #iconverse-chat-iframe {
	/* height: 100vh; */
	height: 100%;
  width: 100vw;
  border-radius: 0;
}

#iconverse-chat-iframe.invisible {
	opacity: 0;
}

#iconverse-chat-iframe.visible {
	opacity: 1;
}