extension.css

:root {
  --icon-color-left: var(--co-left-sidebar__icon, #5c7080);
  --icon-color-top: var(--co-button__minimal-icon, #5c7080);
}

/* SETTINGS */

.rm-settings .liveai-settings-smallinput > input[type="text"] {
  min-width: 50px;
  width: 80px;
  text-align: end;
}

.liveai-settings-largeinput {
  display: flex;
  flex-direction: column;
}
.rm-settings .liveai-settings-largeinput > input[type="text"] {
  margin-top: 12px;
  width: 100%;
}
.rm-settings .liveai-settings-largeinput > div {
  align-self: flex-start !important;
}

/******/

.popover-target {
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: none;
}

.color-toaster .bp3-toast {
  background: orange;
}
.color-toaster .bp3-toast-messge {
  color: black;
}
.search-agent-toaster .bp3-toast,
.thinking-toaster .bp3-toast {
  max-width: 600px;
  max-height: 90vh;
  font-size: 13px;
  padding: 5px;
}
.thinking-toaster .bp3-toast {
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.thinking-toaster .bp3-toast .bp3-button-group {
  display: none;
}
.thinking-toaster .bp3-toast .buttons {
  align-self: flex-end;
  background: inherit;
}
.search-agent-toaster .bp3-toast .bp3-toast-message {
  overflow-y: scroll;
}
.search-agent-toaster .bp3-toast li {
  padding: 3px 0;
}
.search-agent-toaster .bp3-toast ul {
  list-style-type: none;
}
.search-agent-toaster .bp3-toast ul,
.search-agent-toaster .bp3-toast ol {
  padding-left: 20px;
}
.search-agent-toaster .bp3-toast .bp3-toast-message > ul {
  padding-left: 0;
}
.search-agent-toaster .bp3-toast .bp3-toast-message {
  margin-top: 5px;
  margin-right: -20px;
}
.laia-progressbar {
  margin-bottom: 20px;
}
.search-agent-toaster .bp3-button {
  transform: translateX(10px) translateY(-10px);
}

.speech-to-roam :is(.log-button, .bp3-icon, .bp3-button):focus {
  border: none;
  outline: none;
}
.timer {
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.speech-to-roam-container-left > .speech-ui-row1 .left-timer-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 0 !important;
  margin-left: 2px;
  padding-left: 0;
}
.roam-sidebar-content,
.log-button {
  max-width: 230px !important;
}
.speech-to-roam-container-left.speech-to-roam.log-button {
  padding-right: 5px !important;
  margin-right: 0px !important;
}
.speech-to-roam-container-left > .speech-ui-row1 > .log-button {
  margin-right: 0px !important;
}

.speech-record-button {
  min-width: 24px !important;
}
/* .speech-record-button > span {
  margin-left: -2px;
} */
.speech-record-button:focus,
.speech-backward-button:focus {
  outline-width: 0px !important;
}
.speech-record-button .bp3-icon {
  margin-left: 2px;
  min-width: 24px;
  padding: 0;
}

.speech-ui-row1,
.speech-ui-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.speech-to-roam-container-top {
  z-index: 1;
  display: flex;
}
.rm-topbar:has(.rm-open-left-sidebar-btn):not(:has(#todayTomorrow)):not(
    :has(#workspaces)
  )
  > .speech-to-roam.speech-to-roam-container-top {
  position: absolute;
  left: 40px;
}
/* .speech-to-roam-container-top:has(.digits) {
  flex-direction: column;
}
.speech-to-roam-container-top:has(.speech-ui-row2 > .bp3-popover-wrapper) {
  margin-top: 5px;
} */
.speech-to-roam-container-top .speech-ui-row2:not(:has(.bp3-popover-wrapper)) {
  display: none;
}

.speech-to-roam-container-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.speech-to-roam-container-left
  > .speech-ui-row1
  > .log-button
  > span:last-child {
  margin-right: -3px;
}
.speech-to-roam-container-left > .speech-ui-row1:has(.fa-microphone-slash) {
  margin-left: -4px;
}
.speech-to-roam-container-left:has(.digits) {
  padding-top: 2px;
  padding-bottom: 2px;
}
.speech-to-roam-container-left:has(.digits) > div.log-button {
  padding-right: 0 !important;
}
.speech-to-roam-container-left > .speech-ui-row1 > .log-button {
  padding: 0 4px 0 2px !important;
  margin-left: 0 !important;
}
.speech-to-roam-container-left:has(.digits) > .speech-ui-row1 > .log-button {
  padding-right: 0 !important;
}
.speech-to-roam-container-left
  > .speech-ui-row1
  > .log-button:not(:has(.digits))
  > span:last-child {
  margin-left: -1px;
}

.speech-to-roam .fa-microphone {
  padding-bottom: 1px;
}

.speech-to-roam-container-left svg:not(.fa-record-vinyl) path {
  fill: var(--icon-color-left);
}
.speech-to-roam-container-top svg:not(.fa-record-vinyl) path {
  fill: var(--icon-color-top);
}

.openai-logo {
  transform: translateY(2px);
}

.speech-to-roam-container-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  /* padding-top: 4px;
  padding-bottom: 4px; */
  margin-right: 20px;
}
/* .speech-to-roam-container-inline .bp3-popover-target {
  margin-right: 15px;
} */
.speech-to-roam-container-inline > .bp3-popover-wrapper:nth-child(2) {
  width: 170px;
}

.highlight-elt {
  animation: green-shadow-flash 5s;
}
.highlight-elt-orange-inset {
  animation: orange-shadow-inset-flash 3s;
  animation-iteration-count: 4;
}
.highlight-elt-blue {
  animation: blue-shadow-flash 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.fixed-highlight-elt-blue {
  transition: 2.5s;
  filter: brightness(0.8);
  -webkit-box-shadow: 0 0 10px 5px #2196f380;
}
@keyframes blue-shadow-flash {
  0% {
    filter: brightness(0.8);
    -webkit-box-shadow: 0 0 10px 5px #2196f380;
  }
  50% {
    -webkit-box-shadow: 0 0 10px 5px transparent;
  }
  100% {
    filter: brightness(0.8);
    -webkit-box-shadow: 0 0 10px 5px #2196f380;
  }
}
@keyframes green-shadow-flash {
  0% {
    -webkit-box-shadow: 0 0 10px 5px transparent;
  }
  50% {
    filter: brightness(0.9);
    -webkit-box-shadow: 0 0 10px 5px green;
  }
  100% {
    -webkit-box-shadow: 0 0 10px 5px transparent;
  }
}
@keyframes orange-shadow-inset-flash {
  0% {
    -webkit-box-shadow: inset 0 0 5px 3px transparent;
  }
  50% {
    /* filter: brightness(0.9); */
    -webkit-box-shadow: inset 0 0 6px 2px #ffa600e0;
  }
  100% {
    -webkit-box-shadow: inset 0 0 5px 3px transparent;
  }
}

/* CONTEXT MENU */

.bp3-elevation-3.aicommands-div {
  min-width: 250px;
  width: auto;
  z-index: 999 !important;
}
.aicommands-div > .str-aicommands-menu {
  padding: 10px;
}

.aicommands-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.6;
  font-size: 12px;
  font-weight: 500;
}
.aicommands-topbar .laia-topbar-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.aicommands-div > ul,
.aicommands-div > ul > li {
  cursor: grab;
}
.aicommands-div:active *,
.aicommands-div.dragging * {
  cursor: grabbing;
}

.aicommands-style,
.aicommands-context {
  opacity: 0.6;
  padding: 5px 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.aicommands-style {
  gap: 5px;
  padding-top: 0;
}
.aicommands-context {
  padding-right: 6px;
}
.aicommands-context .bp3-control {
  margin-bottom: 0;
}
.aicommands-context .bp3-control.bp3-inline {
  margin-right: 0px;
}
.aicommands-context .bp3-control-indicator {
  margin-right: 3px;
}
.aicommands-context label {
  margin-bottom: 0;
  font-weight: normal;
}
.aicommands-style .bp3-icon-pin,
.aicommands-style .bp3-icon-unpin {
  cursor: pointer !important;
  padding: 5px;
}
.aicommands-style select,
.str-aicommands-input select {
  font-size: 12px;
  text-align: end;
  padding-right: 28px;
}
.str-aicommands-input select {
  opacity: 0.6;
}

.str-aicommands-additional {
  margin-top: 10px;
}
.str-aicommands-additional textarea {
  scrollbar-width: 5px;
  max-height: 32vh;
}

.str-aimodels-menu {
  /* height: fit-content; */
  max-height: 65vh;
  /* opacity: 0.6; */
  font-size: 12px;
}

.str-aimodels-menu .bp3-menu-item > div {
  margin-right: 15px;
}
.str-aimodels-menu .bp3-menu-item-label {
  align-self: center;
}

.bp3-menu.str-aicommands-menu {
  max-height: 50vh;
  /* overflow: scroll; */
  z-index: 9999;
}

.str-aicommands-menu .bp3-input-group *:focus {
  outline: none !important;
  box-shadow: 0;
}
.str-aicommands-menu .bp3-input-group .bp3-icon {
  opacity: 0.6;
  cursor: pointer;
}

.str-aimodels-menu li a:focus,
.str-aicommands-menu li a:focus {
  outline-width: 0px !important;
  text-decoration: none;
  font-weight: bold;
}

.str-aimodels-menu .menu-hint,
.str-aicommands-menu .menu-hint {
  opacity: 0.6;
}
.str-aimodels-menu .menu-hint *,
.str-aicommands-menu .menu-hint * {
  font-size: 12px;
}

.str-aicommands-menu .menu-hint div {
  text-align: center;
  line-height: 1.75;
  /* margin: 0 0 8px 0; */
}

.str-aicommands-menu .custom-lgg-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* margin: 0;
  padding: 0; */
}

.str-aicommands-menu .bp3-icon {
  padding-right: 5px;
}

.bp3-popover.suggested-aicommands {
  transform: translateX(10px) translateY(-33px) !important;
  z-index: 9999;
}

/* INLINE BUTTONS
 on the right of assistant answer */

.liveai-instant-btn-container {
  position: absolute;
  /* top: -22px; */
  right: 0;
  z-index: 99;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.liveai-instant-btn-outliner-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  opacity: 0.4;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rm-block-children:not(:has(.rm-block))
  > .liveai-instant-btn-outliner-container {
  top: -25px;
}
.liveai-instant-btn-container:not(:has(.fa-copy)) {
  top: 1px;
  opacity: 0.4;
}

.rm-block:has(.rm-block__ref-count) .liveai-instant-btn-container,
.fixed-highlight-elt-blue
  > :first-of-type(.rm-block):has(.rm-block__ref-count)
  .liveai-instant-btn-outliner-container {
  top: 25px;
}
.rm-block:has(.liveai-instant-btn-container):hover
  > div
  > .liveai-instant-btn-container {
  opacity: 0.4;
}

.rm-block:has(.liveai-instant-btn-outliner-container):hover
  > div
  > .liveai-instant-btn-outliner-container {
  opacity: 0.6;
}

.rm-block:has(.liveai-instant-btn-container)
  .liveai-instant-btn-container:hover,
.rm-block:has(.liveai-instant-btn-container):hover
  .liveai-instant-btn-container:hover,
.rm-block:has(.liveai-instant-btn-outliner-container)
  .liveai-instant-btn-outliner-container:hover,
.rm-block:has(.liveai-instant-btn-outliner-container):hover
  .liveai-instant-btn-outliner-container:hover {
  opacity: 1;
}
.rm-block .liveai-instant-btn-container > .bp3-button,
.rm-block .liveai-instant-btn-outliner-container > button.bp3-button {
  background-color: transparent;
  min-height: 18px;
  min-width: 20px;
  max-height: 20px;
  max-width: 20px;
  padding: 1px;
  box-shadow: none;
  background-image: none;
}
.rm-block .liveai-instant-btn-container > .bp3-button:hover,
.rm-block .liveai-instant-btn-outliner-container > button.bp3-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
/* .liveai-instant-btn-container > svg {
  padding: 1px 0;
} */
.liveai-instant-btn-container svg:not(.fa-xmark) path,
.liveai-instant-btn-outliner-container svg:not(.fa-xmark) path {
  fill: var(--icon-color-top);
}

/* Tokens usage dialog */
.tokens-dialog-container {
  z-index: 1000;
}

.tokens-dialog,
.laia-help-dialog {
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  z-index: 9999;
}
.tokens-dialog .bp3-dialog-body,
.laia-help-dialog .bp3-dialog-body {
  max-height: 80vh;
  overflow-y: auto;
  margin-right: 2px;
  padding-right: 15px;
}
.laia-help-dialog .bp3-dialog-body {
  font-size: small;
}
.tokens-dialog h3 {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tokens-dialog h3 .bp3-icon {
  margin-right: 3px;
}
.tokens-dialog table {
  width: 100%;
  margin: 10px 0;
}
.tokens-dialog .bp3-dialog-body .bp3-html-table th {
  background-color: #f5f8fa;
  padding: 8px;
  text-align: left;
}
.tokens-dialog .bp3-dialog-body .bp3-html-table td {
  padding: 8px;
  max-width: 220px;
}
.tokens-dialog .even-row {
  background-color: transparent;
}
.tokens-dialog .odd-row {
  background-color: rgba(0, 0, 0, 0.05);
}
.last-request {
  margin-bottom: 10px;
}

@media (max-width: 500px) {
  .roam-sidebar-content,
  .log-button {
    max-width: 100vw !important;
  }

  .rm-topbar
    > span.speech-to-roam.speech-to-roam-container-top:not(:has(.timer)) {
    position: absolute;
    left: unset !important;
    right: 15px;
    top: 45px;
    border-radius: 0 0 20px 5px;
    backdrop-filter: blur(1.5px);
  }
  .roam-main:has(.speech-to-roam.speech-to-roam-container-top)
    .roam-article:not(:has(.rm-title-display)) {
    padding-top: 35px;
  }

  .speech-to-roam:has(.timer) {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 !important;
    top: calc(100dvh / 4 * 3);
    left: 0 !important;
    width: 100vw;
    height: calc(100dvh / 4);
    z-index: 10;
    color: #5c7080;
    background-color: var(--bc-main, #182026) !important;
  }

  .speech-to-roam-container-top:has(.timer) {
    border-top: 2px solid #5c7080;
    background-color: var(--bc-main, white) !important;
  }

  .speech-ui-row1:has(.timer),
  .speech-ui-row1:has(.timer) + .speech-ui-row2 {
    justify-content: center;
    gap: 10px;
    scale: 2.5;
  }

  .laia-help-dialog .bp3-dialog-body {
    margin-left: 12px;
    margin-right: 2px;
    padding-right: 12px;
    font-size: smaller;
  }

  .bp3-elevation-3.aicommands-div {
    min-width: 200px;
    width: 300px;
    transform: scale(0.9);
  }
  .bp3-popover.suggested-aicommands {
    transform: translateX(5px) translateY(15px) scale(0.9) !important;
  }

  .search-agent-toaster .bp3-toast {
    max-width: 90%;
  }

  .tokens-dialog .bp3-dialog-body {
    font-size: 7.5px;
    overflow-x: scroll;
    margin: 10px;
  }
  .tokens-dialog .bp3-dialog-body p {
    font-size: 10px;
    margin-bottom: 2px;
  }
  .tokens-dialog .bp3-dialog-body td,
  .tokens-dialog .bp3-dialog-body th {
    padding: 6px;
  }
}

@media (max-width: 390px) {
  .speech-ui-row1:has(.timer),
  .speech-ui-row1:has(.timer) + .speech-ui-row2 {
    justify-content: center;
    gap: 5px;
    scale: 2.2;
  }
}