@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/components/omni.css

@@ -0,0 +1,859 @@
+/* Omni/OmniWidget.tsx: the voice agent's panel (opened from the sidebar button, dragged by its top bar),
+   its transcript, the publish waiting for Confirmar and the voice choice. */
+
+.omni-widget {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  pointer-events: none;
+}
+.omni-widget > * {
+  pointer-events: auto;
+}
+
+/* --- sidebar card: Omni's face and "Falar com Omni" ------------------------------------------- */
+.menu .menu-omni {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  color: var(--text);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+/* OmniGlow's wrapper around it: the same light as the panel (minimized, the call lives here) */
+.menu .menu-omni-glow {
+  width: 100%;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
+}
+.menu-collapsed .menu .menu-omni-glow {
+  box-shadow: none;
+}
+.menu .menu-omni:hover,
+.menu .menu-omni.open {
+  background: var(--surface-2);
+}
+.menu .menu-omni .voice-avatar {
+  flex: none;
+}
+/* the expand icon at the card's end: the card as a whole opens the dock */
+.menu .menu-omni-expand {
+  display: grid;
+  place-items: center;
+  flex: none;
+  margin-left: auto;
+  color: var(--text-3);
+  font-size: 16px;
+}
+.menu .menu-omni:hover .menu-omni-expand {
+  color: var(--text);
+}
+.menu-collapsed .menu .menu-omni-expand {
+  display: none;
+}
+/* collapsed menu: just the avatar */
+.menu-collapsed .menu .menu-omni,
+.menu-collapsed .menu .menu-omni:hover,
+.menu-collapsed .menu .menu-omni.open {
+  justify-content: center;
+  padding: 4px;
+  background: transparent;
+  border-color: transparent;
+}
+.omni-widget.dragging,
+.omni-widget.dragging * {
+  cursor: grabbing !important;
+  user-select: none;
+}
+.omni-widget.dragging .omni-dock,
+.omni-widget.dragging .omni-panel {
+  transition: none;
+}
+.omni-panel-top button,
+.omni-panel-top a {
+  cursor: pointer;
+}
+.menu-omni .voice-avatar,
+.omni-stage .voice-avatar {
+  border-radius: 50%;
+  transition: transform 0.12s linear;
+}
+.menu-omni.thinking .voice-avatar,
+.menu-omni.connecting .voice-avatar,
+.omni-panel.thinking .omni-stage .voice-avatar,
+.omni-panel.connecting .omni-stage .voice-avatar {
+  animation: omni-breathe 1.6s ease-in-out infinite;
+}
+@keyframes omni-breathe {
+  50% {
+    transform: scale(0.92);
+    opacity: 0.85;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .omni-widget .voice-avatar,
+  .menu-omni .voice-avatar {
+    animation: none !important;
+  }
+}
+
+/* --- panel ---------------------------------------------------------------------------------------- */
+.omni-panel {
+  width: min(340px, calc(100vw - var(--omni-px, 8px) - 8px));
+  max-height: min(620px, calc(100vh - var(--omni-py, 8px) - 8px));
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  border: 1px solid var(--border-strong);
+  padding: 0;
+  overflow: hidden;
+  /* on the panel, not the frame: the frame's animation is the library's (the beam turns and slides with it) */
+  animation: omni-in 0.18s ease-out;
+}
+/* The card's frame is OmniGlow's outer wrapper (the light around it rides its border): placed by useOmniDock
+   (inline left/right and top/bottom; by default at the bottom, just right of the sidebar), the background
+   at 90 % with the page blurred behind it, and the shadow (the wrappers clip, so it can't be the panel's). */
+/* the block the voice glow wraps (header, stage, body): it takes the card's height above the footer, and the
+   glow rises from its bottom edge, on the footer's line */
+.omni-panel .omni-voice {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* the frosted pane over the voice wave (OmniVoice `frost`): the background at 10 % and an extra-small blur,
+   on the strip where the glow rises, above the glow's bloom (z-index 3) and out of the clicks' way */
+.omni-voice-frost {
+  position: absolute;
+  inset: auto 0 0;
+  height: 72px;
+  z-index: 4;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--bg) 10%, transparent);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+/* everything the dock shows (header, stage, chat, cards) sits above the pane: only the voice animation is
+   under it. The library's own layers (the bloom and the warp) are left out. */
+.omni-voice > :not(.omni-voice-frost, [data-voice-beam-bloom], [data-voice-beam-warp]) {
+  position: relative;
+  z-index: 5;
+}
+.omni-widget.open .omni-dock {
+  position: fixed;
+  z-index: 2;
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+  box-shadow: 0 18px 50px rgb(0 0 0 / 0.2);
+  /* the menu collapsing or expanding slides the left corners with it (the same 0.18s as the menu's grid) */
+  transition:
+    left 0.18s ease,
+    right 0.18s ease;
+}
+@keyframes omni-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+/* the top bar is the handle that drags the window to any edge */
+.omni-panel-top {
+  cursor: grab;
+  touch-action: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 10px 0;
+}
+/* the panel's icon buttons: the gear (and the back arrow in its place) and the microphone outlined, the
+   close ghost; all the same size */
+.omni-widget .omni-icon-button {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  font-size: 18px;
+  border-radius: 10px;
+  flex: none;
+}
+.omni-widget .omni-icon-button.outlined {
+  border: 1px solid var(--border-strong);
+  background: transparent;
+}
+.omni-widget .omni-icon-button.ghost {
+  font-size: 22px;
+  border: 0;
+  background: transparent;
+  color: var(--text-2);
+}
+/* the back arrow of the settings: smaller than the gear it replaces, and ghost */
+.omni-widget .omni-icon-button.ghost.back {
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+}
+/* hang up: red outline; chat: pressed while it is open */
+.omni-widget .omni-icon-button.danger {
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 45%, var(--border-strong));
+}
+.omni-widget .omni-icon-button.danger:hover:not(:disabled) {
+  background: var(--error-bg);
+  color: var(--error);
+}
+.omni-widget .omni-icon-button.on {
+  background: var(--muted);
+}
+.omni-widget .omni-icon-button:hover:not(:disabled) {
+  background: var(--muted);
+  color: var(--text);
+}
+.omni-panel.settings .omni-panel-top {
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.omni-panel-heading {
+  flex: 1;
+  font-size: 15px;
+}
+/* the center of the panel: Omni's face and name, nothing else until a conversation starts */
+.omni-stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px 24px;
+}
+.omni-stage b {
+  font-size: 18px;
+}
+.omni-stage small {
+  margin-top: -6px;
+  color: var(--text-2);
+  font-size: 12.5px;
+}
+.omni-stage-avatar {
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+.omni-stage-avatar:hover:not(:disabled) {
+  transform: scale(1.04);
+}
+.omni-stage-avatar:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.omni-measures {
+  text-align: center;
+  font-size: 12.5px;
+}
+/* the "Oi, Omni" switch and what the listener is doing */
+.omni-hotword {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.omni-hotword .toggle-switch span {
+  font-weight: 600;
+  color: var(--text);
+}
+.omni-hotword p {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+.omni-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.omni-hint {
+  margin: 0;
+  font-size: 13.5px;
+  line-height: 1.45;
+}
+.omni-panel-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  padding: 12px 14px 14px;
+  border-top: 1px solid var(--border);
+}
+.omni-panel-bottom > .button {
+  justify-content: center;
+}
+.omni-panel-bottom .response {
+  margin: 0;
+}
+.omni-text {
+  flex: 1;
+  min-width: 0;
+}
+/* the field with the send icon inside it */
+.omni-input {
+  position: relative;
+}
+.omni-input input {
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 42px;
+}
+.omni-input .omni-send {
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 17px;
+  cursor: pointer;
+}
+.omni-input .omni-send:hover:not(:disabled) {
+  background: var(--muted);
+  color: var(--text);
+}
+.omni-input .omni-send:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* --- avatar choice ----------------------------------------------------------------------------- */
+.omni-avatar-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.omni-avatar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.omni-avatar-field .response {
+  margin: 0;
+}
+
+/* --- what is left of today's voice quota ------------------------------------------------------ */
+.omni-usage {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.omni-usage-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.2;
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+.omni-usage-line.end {
+  justify-content: flex-end;
+}
+.omni-usage.low .omni-usage-line span:last-child {
+  color: var(--warning);
+}
+.omni-meter {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--muted);
+  overflow: hidden;
+}
+.omni-meter i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ok);
+  transition: width 0.3s;
+}
+.omni-meter.low i {
+  background: var(--warning);
+}
+
+/* --- transcript ------------------------------------------------------------------------------- */
+.omni-transcript {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.omni-transcript .omni-msg {
+  margin: 0;
+}
+.omni-msg {
+  max-width: 86%;
+  overflow-wrap: anywhere;
+  padding: 8px 12px;
+  border-radius: 14px;
+  line-height: 1.4;
+  font-size: 14px;
+}
+.omni-msg p {
+  margin: 0;
+}
+.omni-msg.user {
+  align-self: flex-end;
+  background: var(--text);
+  color: var(--bg);
+  border-bottom-right-radius: 4px;
+}
+.omni-msg.user.pending {
+  opacity: 0.55;
+}
+.omni-msg.assistant {
+  align-self: flex-start;
+  background: var(--muted);
+  border-bottom-left-radius: 4px;
+}
+.omni-msg-meta {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 4px;
+  font-size: 12px;
+}
+.omni-msg-meta .subtle {
+  margin-right: 6px;
+}
+.omni-vote {
+  border: 0;
+  background: none;
+  padding: 3px 5px;
+  border-radius: 6px;
+  color: var(--text-3);
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 14px;
+}
+.omni-vote:hover,
+.omni-vote.on {
+  opacity: 1;
+  color: var(--text);
+  background: var(--muted-hover);
+}
+.omni-tool {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--text-2);
+}
+.omni-tool.ok .ic {
+  color: var(--ok);
+}
+.omni-tool.error .ic,
+.omni-tool-error {
+  color: var(--error);
+}
+.omni-spinner {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--text);
+  animation: omni-spin 0.8s linear infinite;
+}
+@keyframes omni-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.omni-note {
+  align-self: center;
+  margin: 0;
+  font-size: 12.5px;
+}
+
+/* --- publish waiting for the screen's Confirmar -------------------------------------------- */
+/* several pending cards form a carousel: one card in view, the edges of the neighbours peeking in
+   on both sides; drag or swipe to bring the next one */
+.omni-pending {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+  cursor: grab;
+  /* the peek: padding lets the first and last card centre too */
+  padding-inline: 36px;
+  scroll-padding-inline: 36px;
+  margin-inline: -12px;
+}
+.omni-pending-carousel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.omni-pending-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.omni-pending-nav .omni-icon-button:disabled {
+  opacity: 0.35;
+}
+.omni-pending-dots {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.omni-pending-dots button {
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--border-strong);
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    transform 0.15s;
+}
+.omni-pending-dots button.active {
+  background: var(--text);
+  transform: scale(1.25);
+}
+.omni-pending::-webkit-scrollbar {
+  display: none;
+}
+.omni-pending.dragging {
+  cursor: grabbing;
+  scroll-snap-type: none;
+  user-select: none;
+}
+.omni-pending-card {
+  flex: 0 0 100%;
+  /* a flex item never shrinks below its content: without this a pasted link stretches the card and the
+     carousel scrolls sideways */
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+  scroll-snap-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 12px;
+  /* the warning tint over the page's own background: opaque, so the voice wave does not show through the card */
+  background: linear-gradient(var(--warning-bg), var(--warning-bg)), var(--bg);
+  font-size: 13.5px;
+}
+.omni-pending:has(.omni-pending-card:only-child) {
+  padding-inline: 12px;
+  scroll-padding-inline: 12px;
+  margin-inline: 0;
+  cursor: default;
+}
+.omni-pending-summary.clamped {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.omni-pending-more {
+  margin-top: 4px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text-2);
+  font: inherit;
+  font-size: 12.5px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.omni-pending-body {
+  min-width: 0;
+}
+.omni-pending-card p {
+  margin: 2px 0 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.omni-pending-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+/* the Conteúdos page's floating "Agente, fila e serviços" tab sits left of Omni */
+.videos-page .panel-tab {
+  right: 96px;
+}
+
+/* --- Claude mode (after the day's voice quota) and the voice time left --------------------- */
+.omni-quota {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.omni-panel-bottom > .button.danger,
+.omni-panel-bottom > .button.primary {
+  justify-content: center;
+}
+
+.omni-breakdown {
+  flex-basis: 100%;
+  font-size: 11.5px;
+}
+.omni-msg-meta:has(.omni-breakdown) {
+  flex-wrap: wrap;
+}
+
+/* --- start: the outlined button and the microphone list, under Omni's name ---------------------- */
+.omni-start {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+.omni-start .button {
+  min-height: 38px;
+  padding: 0 18px;
+  background: transparent;
+}
+/* the mic and its arrow, joined: the mic mutes in a call, the arrow opens the list of microphones */
+.omni-mic-group {
+  display: inline-flex;
+}
+.omni-widget .omni-mic,
+.omni-widget .omni-mic-arrow {
+  display: inline-grid;
+  place-items: center;
+}
+.omni-widget .omni-mic {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.omni-widget .omni-mic-arrow {
+  width: 28px;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  font-size: 14px;
+}
+.omni-widget .omni-mic.muted {
+  color: var(--error);
+}
+.omni-mic-menu {
+  min-width: 240px;
+}
+
+/* processing without speaking (a tool, a web search, the rest of the reply): a band sweeps across the
+   avatar. The avatar is a WebGL canvas, so the band is a mask over it, not an overlay */
+.menu-omni.thinking .voice-avatar,
+.omni-panel.thinking .omni-stage .voice-avatar {
+  -webkit-mask-image: linear-gradient(110deg, #000 38%, rgb(0 0 0 / 0.7) 50%, #000 62%);
+  mask-image: linear-gradient(110deg, #000 38%, rgb(0 0 0 / 0.7) 50%, #000 62%);
+  -webkit-mask-size: 300% 100%;
+  mask-size: 300% 100%;
+  animation:
+    omni-breathe 1.6s ease-in-out infinite,
+    omni-shimmer 1.3s linear infinite;
+}
+.omni-name-thinking {
+  color: transparent;
+  background: linear-gradient(100deg, var(--text-2) 35%, var(--text) 50%, var(--text-2) 65%) 0 0 / 250% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: omni-name-shimmer 1.6s linear infinite;
+}
+@keyframes omni-name-shimmer {
+  from {
+    background-position: 150% 0;
+  }
+  to {
+    background-position: -50% 0;
+  }
+}
+@keyframes omni-shimmer {
+  from {
+    -webkit-mask-position: 100% 0;
+    mask-position: 100% 0;
+  }
+  to {
+    -webkit-mask-position: 0 0;
+    mask-position: 0 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .omni-name-thinking {
+    animation: none;
+    background: none;
+    color: var(--text-2);
+  }
+  .omni-widget .voice-avatar,
+  .menu-omni .voice-avatar {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+}
+
+/* /agent: the measurements per way of talking */
+.omni-by-mode {
+  margin-top: 20px;
+  overflow-x: auto;
+}
+.omni-by-mode h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+}
+.omni-by-mode td:not(:first-child),
+.omni-by-mode th:not(:first-child) {
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* --- chat open: a bigger dock, the identity small in the top-left corner --------------------------- */
+.omni-panel.chat {
+  width: min(460px, calc(100vw - var(--omni-px, 8px) - 8px));
+  height: min(700px, calc(100vh - var(--omni-py, 8px) - 8px));
+  max-height: none;
+}
+.omni-inline-id {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-left: 4px;
+  font-size: 15px;
+}
+.omni-top-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+/* in chat mode the row is: chat, field, mute, hang up */
+.omni-start.chat {
+  justify-content: stretch;
+}
+/* the hang-up is the wide one */
+.omni-widget .omni-icon-button.hangup {
+  width: 84px;
+}
+
+/* --- waiting for the studio's work (wait_for_work): the call sleeps, only the microphone is open --- */
+.menu-omni.waiting .voice-avatar,
+.omni-panel.waiting .omni-stage .voice-avatar,
+.omni-panel.waiting .omni-inline-id .voice-avatar {
+  opacity: 0.45;
+  filter: saturate(0.5);
+  transition:
+    opacity 0.4s,
+    filter 0.4s;
+}
+
+/* --- Conversas: the earlier conversations, one opened read-only --------------------------------- */
+.omni-history {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.omni-history-empty {
+  margin: 0;
+  font-size: 13px;
+  text-align: center;
+}
+.omni-history-row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: none;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+.omni-history-row:hover {
+  background: var(--muted);
+}
+.omni-history-row b {
+  font-size: 13.5px;
+  font-weight: 600;
+}
+.omni-history-row small,
+.omni-history-one header small {
+  font-size: 12px;
+}
+.omni-history-one {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.omni-history-one header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.omni-history-actions {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.omni-history-actions li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: var(--muted);
+  font-size: 12.5px;
+}
+.omni-history-actions li small {
+  color: var(--text-2);
+}
+.omni-history-actions li.confirmed small {
+  color: var(--ok);
+}
+.omni-history-actions li.failed small {
+  color: var(--error);
+}
+.omni-history-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}