/*!
 * Copyright (c) 2021 Oracle and/or its affiliates. All rights reserved.
 */

:root {
  --artie-black: #161513;
  --artie-gray: #3a3631;
  --artie-white: #fcfbfa;
  --artie-yellow: #f7e0a1;
  --artie-red: #e6081a;
  --artie-lightgray: #d4cfca;
}

.oda-chat-wrapper.oda-chat-redwood-dark.oda-chat-expanded, .oda-chat-wrapper.oda-chat-collapsed .oda-chat-notification-badge {
  --color-footer-background: var(--artie-black);
  --color-text: var(--artie-black);
  --color-text-light: var(--artie-white);
  --color-header-button-fill: var(--artie-white);
  --color-header-button-fill-hover: var(--artie-white);
  --color-header-text: var(--artie-white);
  --color-typing-indicator: var(--artie-white);
  /*--color-bot-message-background: #655f5c;*/
  --color-bot-text: var(--artie-white);
  --color-user-message-background: var(--artie-lightgray);
  --color-user-text: var(--artie-black);
  --color-actions-border: var(--artie-white);
  --color-actions-text: var(--artie-white);
  --color-actions-text-focus: var(--artie-white);
  --color-actions-text-hover: var(--artie-white);
  --color-global-actions-border: var(--artie-white);
  --color-global-actions-text: var(--artie-white);
  --color-global-actions-text-focus: var(--artie-white);
  --color-global-actions-text-hover: var(--artie-white);
  --color-links: var(--artie-yellow);
  --color-footer-background: var(--artie-black);
  --color-footer-button-fill: var(--artie-black);
  --color-input-background: var(--artie-white);
  --color-input-text: var(--artie-black);
  --color-recognition-view-text: var(--artie-white);
  --color-visualizer-container-background: var(--artie-white);
  --color-notification-badge-background: var(--artie-red);
  --color-notification-badge-text: var(--artie-white);
  /*--color-popup-button-text: #201e1c;*/
}

/* Oracle Images: icons */
.oda-chat-message-global-actions button.oda-chat-action-postback[title='\f37e'] div, .oda-chat-message-global-actions button.oda-chat-action-postback[title='\f37d'] div {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1;
  speak: none;
}

/* Bot icon customization to hide it behind cards without header text */
.oda-chat-wrapper .oda-chat-icon-wrapper {
  z-index: 0 !important;
}

/* footer link */
.oda-chat-wrapper .oda-chat-footer a {
  text-decoration: none;
}
.oda-chat-wrapper .oda-chat-footer a:hover {
  text-decoration: underline;
}

.oda-chat-wrapper .more {
  display: none;
}

/* Global actions block layout */
.oda-chat-wrapper .oda-chat-message-global-actions {
  display: block !important;
}
.oda-chat-message-global-actions .oda-chat-action-postback {
  display: inline;
  margin-inline-end: 8px;
  margin-top: 4px;
}

.oda-chat-wrapper .oda-chat-button, .oda-chat-wrapper .oda-chat-button:focus {
  outline: none;
}

.oda-chat-wrapper .oda-chat-button:not(.oda-chat-none) {
  background-color: var(--artie-gray) !important;
  border-radius: 500px !important;
}

.oda-chat-wrapper .oda-chat-card .oda-chat-card-description:not(.artie-expanded){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* limit to 4 lines */
          line-clamp: 4;
  -webkit-box-orient: vertical;
}

.oda-chat-collapsed:not(.oda-chat-drag) .oda-chat-button.lets-chat-enabled,
.oda-chat-collapsed.oda-chat-drag .oda-chat-button.lets-chat-enabled {
  animation-name: increaseWidth !important;
  animation-duration: 21s !important;
  animation-timing-function: ease-in-out !important;
  animation-fill-mode: forwards !important;
  display: inline-flex !important;
}

.oda-chat-wrapper .oda-chat-button img {
  width: 48px;
  height: 48px;
}

@keyframes increaseWidth {
  0% {width: 48px;}
  5% {width: 166px;}
  95% {width: 166px;}
  100% {width: 48px;}
}

@keyframes increaseWidthLarge {
  0% {width: 64px;}
  5% {width: 200px;}
  95% {width: 200px;}
  100% {width: 64px;}
}

@keyframes fadeInOut {
  0% {opacity:0;}
  5% {opacity:1;}
  95% {opacity:1;}
  100% {opacity:0;}
}

.oda-chat-wrapper .oda-chat-letschat {
  background-color: var(--artie-gray);
  width: 100%;
  height: inherit;
  border-radius: 0px 500px 500px 0px;
  position: relative;
  left: -24px;
  z-index: -1;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.oda-chat-wrapper .lets-chat-enabled .oda-chat-letschat * {
  color: var(--artie-white);
  position: relative;
  margin: 0px 0px 0px 30px;
  font-size: 20px;
  font-style: italic;
  align-self: center;
  animation-name: fadeInOut;
  animation-delay: 1.2s;
  animation-duration: 19s;
  animation-timing-function: ease-in-out;
  opacity: 0;
  animation-fill-mode: forwards;
  left: -6px;
}

.oda-chat-wrapper .oda-chat-footer a,
.oda-chat-wrapper .oda-chat-header .oda-chat-title,
.oda-chat-wrapper .oda-chat-header .oda-chat-subtitle,
.oda-chat-wrapper .oda-chat-left .oda-chat-message-bubble {
  color: var(--artie-white);
}

.oda-chat-wrapper .oda-chat-message-actions .oda-chat-action-postback,
.oda-chat-wrapper .oda-chat-card-actions .oda-chat-action-postback {
  border-color: var(--artie-white);
  color: var(--artie-white);
}

.oda-chat-wrapper .oda-chat-header-button svg,
.oda-chat-wrapper .oda-chat-footer-button svg {
  fill: var(--artie-white);
}

/* Decrease header button margin to take up a little less space */
.oda-chat-wrapper .oda-chat-header-actions button.oda-chat-icon {
  margin-inline-start: 2px !important;
  padding: 0px;
}
.oda-chat-wrapper .oda-chat-header-button svg {
  height: 24px;
  width: 24px;
}

.oda-chat-wrapper .oda-chat-widget {
  border-radius: 0px !important;
}
@media screen and (min-width: 426px){
  .oda-chat-wrapper .oda-chat-widget {
    border-radius: 6px !important;
  }
}


.oda-chat-wrapper, .oda-chat-wrapper * {
  font-family: "Oracle Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ojuxIconFont !important;
}

/* Font-weight of containing pages but not all, this looks nice so we want to apply it consistently also for Oracle Web SDK help page */
.oda-chat-wrapper {
  font-weight: 400;
}

/* Links in main text should be same size as regular text which is set in artie.js but style leaks from main page CSS */
.oda-chat-wrapper a {
  font-size: 16px;
}

.oda-chat-wrapper .oda-chat-notification-badge {
  background-color: var(--artie-red);
}

.oda-chat-wrapper .oda-chat-header, .oda-chat-wrapper .oda-chat-footer {
  background-color: var(--artie-black);
}

.oda-chat-wrapper .oda-chat-logo {
  background-color: var(--artie-gray);
  width: 42px;
  height: 42px;
  max-height: 42px;
  max-width: 42px;
  border-radius: 50%;
}

.oda-chat-wrapper .oda-chat-left .oda-chat-message-icon {
  background-color: #655F5C;
  border-radius: 50%;
}

.oda-chat-wrapper .oda-chat-user-input{
  border-width: 0px;
  background-color: var(--artie-white);
  border-radius: 10px;
}

.oda-chat-wrapper .oda-chat-subtitle {
  font-style: italic;
  padding-right: 5px; /*Needed because of italic and overflow hidden*/
}

.oda-chat-wrapper .oda-chat-footer-mode-keyboard {
  padding: 8px 6px 4px 4px;
}

.oda-chat-wrapper .oda-chat-card-title {
  font-size: 14px;
  font-weight: bold;
}

/* Card description text and links smaller size to save space */
.oda-chat-wrapper .oda-chat-card-description, .oda-chat-wrapper .oda-chat-card-description a {
  font-size: 13px;
}

.oda-chat-wrapper .oda-chat-button:not(.lets-chat-enabled) .oda-chat-letschat {
  display: none;
}

@media screen and (min-width: 769px){
  .oda-chat-wrapper .oda-chat-letschat {
    left: -24px;
  }

  .oda-chat-wrapper .oda-chat-button img, .oda-chat-wrapper .oda-chat-flex.oda-chat-button {
    width: 64px;
    height: 64px;
  }

  .oda-chat-collapsed:not(.oda-chat-drag) .oda-chat-button.lets-chat-enabled,
  .oda-chat-collapsed.oda-chat-drag .oda-chat-button.lets-chat-enabled {
    animation-name: increaseWidthLarge !important;
  }

  .oda-chat-wrapper button.oda-chat-button.oda-chat-icon {
    width: 64px;
    height: 64px;
  }

  .oda-chat-wrapper .lets-chat-enabled .oda-chat-letschat * {
    margin: 0px 0px 0px 36px;
    font-size: 24px;
  }
}