@onlive.ai/common-121 0.2.196 → 0.2.199

package/themes/custom/glass.theme.css

@@ -0,0 +1,877 @@
+/**
+ * Glass Theme for Chat Landing
+ * ==============================
+ *
+ * Full glassmorphism theme designed for the chat-landing application.
+ * Intended to be used with `appearance.theme: "dark"` and a background
+ * image behind the `<ocl-landing>` element so the blur/transparency
+ * shines through.
+ *
+ * Applied via `customStyles` in `LandingOptions`.
+ *
+ * The same CSSStyleSheet is adopted by multiple shadow roots:
+ *   - OCLLanding  (landing-level selectors)
+ *   - OCHChat     (chat-level selectors)
+ *   - OCHMessage  (message-level selectors)
+ *   - OCHSend     (send-level selectors)
+ *
+ * Components that do NOT adopt customStyles (ocl-header, ocl-sessions-list,
+ * ocl-chat-area) are styled indirectly through CSS custom-property overrides
+ * set on :host / .ocl__landing, which cascade through shadow DOM boundaries.
+ */
+
+/* ========================================================================
+   CSS CUSTOM PROPERTY OVERRIDES
+   These cascade into every child shadow DOM (header, sessions-list, etc.)
+   ======================================================================== */
+
+:host {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.95);
+  
+
+  /* Surface / background tokens → transparent glass */
+  --ol-color-neutral-0: rgba(0, 0, 0, 0.25);
+  --ol-color-neutral-50: rgba(0, 0, 0, 0.18);
+  --ol-color-neutral-100: rgba(255, 255, 255, 0.05);
+  --ol-color-surface: rgba(0, 0, 0, 0.25);
+
+  /* Border tokens → subtle glass edges */
+  --ol-color-neutral-200: rgba(255, 255, 255, 0.08);
+  --ol-color-neutral-300: rgba(255, 255, 255, 0.1);
+
+  /* Text-range neutrals → white/light for readability on glass */
+  --ol-color-neutral-400: rgba(255, 255, 255, 0.45);
+  --ol-color-neutral-500: rgba(255, 255, 255, 0.55);
+  --ol-color-neutral-600: rgba(255, 255, 255, 0.65);
+  --ol-color-neutral-700: rgba(255, 255, 255, 0.75);
+  --ol-color-neutral-800: rgba(255, 255, 255, 0.85);
+  --ol-color-neutral-900: rgba(255, 255, 255, 0.95);
+  --ol-color-neutral-950: #ffffff;
+  --ol-color-neutral-1000: #ffffff;
+
+  /* Suggestion chips */
+  --och-chip-background: rgba(0, 0, 0, 0.35);
+  --och-chip-background-hover: rgba(0, 0, 0, 0.5);
+
+  /* Input tokens */
+  --ol-input-background-color: rgba(0, 0, 0, 0.25);
+  --ol-input-border-color: rgba(255, 255, 255, 0.1);
+  --ol-input-border-color-hover: rgba(255, 255, 255, 0.2);
+  --ol-input-border-color-focus: rgba(255, 255, 255, 0.3);
+  --ol-input-color: rgba(255, 255, 255, 0.9);
+  --ol-input-color-hover: rgba(255, 255, 255, 0.95);
+  --ol-input-color-focus: rgba(255, 255, 255, 0.95);
+  --ol-input-color-disabled: rgba(255, 255, 255, 0.4);
+  --ol-input-placeholder-color: rgba(255, 255, 255, 0.4);
+  --ol-input-placeholder-color-disabled: rgba(255, 255, 255, 0.25);
+  --ol-input-icon-color: rgba(255, 255, 255, 0.5);
+  --ol-input-icon-color-hover: rgba(255, 255, 255, 0.7);
+  --ol-input-icon-color-focus: rgba(255, 255, 255, 0.7);
+  --ol-input-label-color: rgba(255, 255, 255, 0.85);
+  --ol-input-help-text-color: rgba(255, 255, 255, 0.5);
+  --ol-input-filled-color: rgba(255, 255, 255, 0.9);
+  --ol-input-filled-color-hover: rgba(255, 255, 255, 0.95);
+  --ol-input-filled-color-focus: rgba(255, 255, 255, 0.95);
+  --ol-input-filled-color-disabled: rgba(255, 255, 255, 0.4);
+  --ol-input-filled-background-color: rgba(255, 255, 255, 0.05);
+  --ol-input-filled-background-color-hover: rgba(255, 255, 255, 0.08);
+  --ol-input-filled-background-color-focus: rgba(255, 255, 255, 0.08);
+
+  /* Focus ring */
+  --ol-focus-ring-color: rgba(255, 255, 255, 0.2);
+  --ol-input-focus-ring-color: rgba(255, 255, 255, 0.1);
+
+  /* Primary palette — white tonality for glass surfaces */
+  --ol-color-primary-50: rgba(255, 255, 255, 0.05);
+  --ol-color-primary-100: rgba(255, 255, 255, 0.10);
+  --ol-color-primary-200: rgba(255, 255, 255, 0.20);
+  --ol-color-primary-300: rgba(255, 255, 255, 0.35);
+  --ol-color-primary-400: rgba(255, 255, 255, 0.50);
+  --ol-color-primary-500: rgba(255, 255, 255, 0.65);
+  --ol-color-primary-600: rgba(255, 255, 255, 0.80);
+  --ol-color-primary-700: rgba(255, 255, 255, 0.90);
+  --ol-color-primary-800: rgba(255, 255, 255, 0.95);
+  --ol-color-primary-900: rgba(255, 255, 255, 0.98);
+  --ol-color-primary-950: #ffffff;
+
+  /* Tooltip */
+  --ol-tooltip-background-color: rgba(0, 0, 0, 0.75);
+  --ol-tooltip-color: #ffffff;
+
+  /* Panel */
+  --ol-panel-background-color: rgba(0, 0, 0, 0.3);
+  --ol-panel-border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ========================================================================
+   LANDING (OCLLanding shadow root)
+   ======================================================================== */
+
+.ocl__landing {
+  background: transparent;
+}
+
+/* ── Structural glass layers ── */
+
+/* Main body: primary frosted-glass surface.
+   Everything behind it (the background image) appears
+   blurred as if viewed through a crystal pane. */
+.ocl__landing__body {
+  background: rgba(10, 14, 22, 0.55);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+/* Sidebar: slightly denser glass panel for visual separation */
+.ocl__landing__sidebar {
+  backdrop-filter: blur(32px);
+  -webkit-backdrop-filter: blur(32px);
+}
+
+/* Collapsed sidebar: keep dark glass, just remove the right border */
+.ocl__landing__sidebar[collapsed] {
+  border-right: none;
+}
+
+/* ── Collapsed sidebar inner styles (adopted inside sessions-list shadow DOM) ── */
+
+/* Hide the session list and footer when collapsed */
+:host([collapsed]) .ocl__sessions--collapsed .ocl__sessions__list,
+:host([collapsed]) .ocl__sessions--collapsed .ocl__sessions__footer {
+  display: none;
+}
+
+/* Dark glass collapsed panel — overflow visible so logo can float beyond sidebar */
+:host([collapsed]) .ocl__sessions--collapsed {
+  border-right: none;
+  pointer-events: none;
+  overflow: visible;
+}
+
+/* Re-enable pointer events on the header so buttons remain clickable */
+:host([collapsed]) .ocl__sessions--collapsed .ocl__sessions__header {
+  pointer-events: auto;
+  align-items: center;
+  overflow: visible;
+}
+
+/* Center toggle icon within the 56 px column */
+:host([collapsed]) .ocl__sessions--collapsed .ocl__sessions__header-top {
+  justify-content: center;
+  overflow: visible;
+}
+
+:host([collapsed]) .ocl__sessions--collapsed .ocl__sessions__header-logo {
+  justify-content: center;
+  overflow: visible;
+  position: relative;
+}
+
+/* Logo floats to the right, outside the collapsed column */
+:host([collapsed]) .ocl__sessions--collapsed .ocl__sessions__logo {
+  opacity: 1;
+  width: auto;
+  overflow: visible;
+  position: absolute;
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.ofl__meet__participant {
+  width: 100%;
+  border: none;
+}
+
+/* Content area: transparent so the body glass shows through */
+.ocl__landing__content {
+  background: transparent;
+}
+
+/* Meet PiP (minimized): frosted glass floating card */
+.ocl__landing__meet--minimized {
+  background: rgba(10, 14, 22, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+.ocl__landing__meet--minimized::after {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.ocl__landing__meet--minimized:hover::after {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Backdrop overlay when sidebar is open on mobile */
+.ocl__landing__backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* Calling pill */
+.ocl__landing__calling__content {
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.ocl__landing__calling__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ocl__landing__calling__icon {
+  color: var(--ol-color-primary-400);
+}
+
+/* ========================================================================
+   CHAT (OCHChat shadow root)
+   ======================================================================== */
+
+.och__chat__messages {
+  background: transparent;
+}
+
+/* Chat header */
+.och__chat__header {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.och__chat__call-button {
+  color: var(--ol-color-primary-400);
+}
+
+/* Call status */
+.och__chat__call-status {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.och__chat__call-status ol-spinner {
+  --indicator-color: var(--ol-color-primary-400);
+}
+
+/* Date separator */
+.och__chat__date-separator::before,
+.och__chat__date-separator::after {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.och__chat__date-separator__text {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Inline evaluation */
+.och__evaluation-inline och-evaluation {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+/* Agent connection notice */
+.och__chat__agent-connection-notice {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.och__chat__agent-connection-notice__title {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__chat__agent-connection-notice__subtitle {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.och__chat__agent-connection-notice__icon {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* New room notification */
+.och__chat__new-room-notification__content {
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__chat__new-room-notification__title {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__chat__new-room-notification__message {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+/* Scrollbar (webkit) */
+.och__chat__messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.och__chat__messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.och__chat__messages::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+}
+
+.och__chat__messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* Restart button */
+.och__chat__restart-button::part(base) {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.och__chat__restart-button:hover::part(base) {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* ========================================================================
+   MESSAGE (OCHMessage shadow root)
+   ======================================================================== */
+
+/* ── "Other" (bot / agent) messages ── */
+
+.och__message--other .och__message__box {
+  background:none;
+  color: rgba(255, 255, 255, 0.95);
+  box-shadow: none;
+  border: none;
+}
+
+.och__message__assets {
+ max-width: none;
+}
+
+/* ── "Me" (user) messages ── */
+
+.och__message--me .och__message__box {
+  background: none;
+  color: #ffffff;
+  border: none;
+  box-shadow: none
+}
+
+.och__message--me .och__message__box a {
+  color: rgba(180, 210, 255, 1);
+}
+
+/* ── System messages ── */
+
+.och__message--system .och__message__box {
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: rgba(255, 255, 255, 0.7);
+  border: none;
+  box-shadow: none;
+}
+
+/* ── Typing indicator (loader dots) ── */
+
+.och__message__loader-dot:nth-child(1),
+.och__message__loader-dot:nth-child(2),
+.och__message__loader-dot:nth-child(3) {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.och__message__loader {
+  fill: rgba(255, 255, 255, 0.7);
+}
+
+/* ── Text / links ── */
+
+.och__message__box {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__message__text {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__message__box a {
+  color: rgba(160, 200, 255, 1);
+}
+
+.och__message__box a:hover {
+  color: #ffffff;
+}
+
+.och__message__box svg {
+  fill: rgba(255, 255, 255, 0.9);
+}
+
+/* ── Markdown headings inside messages ── */
+
+.och__message__box h1,
+.och__message__box h2,
+.och__message__box h3,
+.och__message__box h4,
+.och__message__box h5,
+.och__message__box h6 {
+  color: #ffffff;
+}
+
+.och__message__box p,
+.och__message__box li,
+.och__message__box blockquote {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.och__message__box code {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.och__message__box pre {
+  background: rgba(0, 0, 0, 0.3);
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--ol-border-radius-medium, 0.375rem);
+}
+
+/* ── Message details (from / time) ── */
+
+.och__message__from {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.och__message__time {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.och__message__status {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.och__message__status::before {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ── Form container inside message ── */
+
+.och__message__container--form {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: var(--ol-border-radius-large);
+  max-width: 700px;
+  margin: 0 auto ;
+
+}
+
+/* ── Form action buttons ── */
+
+.och__message__form__button::part(base) {
+  border-radius: var(--ol-border-radius-large);
+}
+
+.och__message__form__button[variant="default"]::part(base) {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.och__message__form__button[variant="default"]:hover:not([disabled])::part(base) {
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+}
+
+.och__message__form__button[variant="primary"]::part(base) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* ── Report / reaction popup ── */
+
+.och__message__container .och__message__report {
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.och__message__report-button::part(base) {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.och__message__report-button:hover::part(base) {
+  color: #ffffff;
+}
+
+/* ── Asset cards ── */
+
+.och__message__asset osb-asset {
+  --ol-color-surface: rgba(0, 0, 0, 0.35);
+  --ol-color-surface-secondary: rgba(255, 255, 255, 0.05);
+  --ol-color-text-primary: rgba(255, 255, 255, 0.9);
+  --ol-color-text-secondary: rgba(255, 255, 255, 0.6);
+  --ol-color-text-tertiary: rgba(255, 255, 255, 0.4);
+  --ol-color-primary: #60a5fa;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.3),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+}
+
+.och__message__asset osb-asset:hover {
+  box-shadow:
+    0 6px 28px rgba(0, 0, 0, 0.4),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
+}
+
+/* ── Media (images / video / files) ── */
+
+/* Container: full-width column layout for cinematic display */
+.och__message__media {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol-spacing-x-small);
+  width: 100%;
+  margin-bottom: var(--ol-spacing-small);
+}
+
+/* Each media item becomes a large card instead of 72×72 thumbnail */
+.och__message__media__button {
+  width: 100%;
+  background: none;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--ol-border-radius-large);
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.och__message__media__button:hover {
+  transform: scale(1.01);
+  box-shadow: none;
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.och__message__media__button:hover::before {
+  opacity: 0;
+}
+
+.och__message__media__button::part(base) {
+  background: transparent;
+  border: none;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+  color: inherit;
+  font-size: inherit;
+  border-radius: 0;
+  min-height: unset;
+}
+
+/* Image fills the card */
+.och__message__media__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Video card: dark glass with centered play icon */
+.och__message__media__button--video {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: var(--ol-font-size-3x-large);
+}
+
+/* File card */
+.och__message__media__button--file {
+  aspect-ratio: auto;
+  height: 72px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--ol-font-size-large);
+}
+
+.och__message__media__ext-badge {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* "has more" overlay on last item */
+.och__message__media__button--has-more::before {
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+
+
+.och__message__media__image-count {
+  color: #ffffff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+/* Message container: allow wider max-width when only media (no form) */
+.och__message__container:has(.och__message__media) {
+  max-width: min(95%, 600px);
+}
+
+/* ========================================================================
+   SEND (OCHSend shadow root)
+   ======================================================================== */
+
+.och__send__form {
+  background: transparent;
+}
+
+.och__send__textarea-shell {
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+}
+
+.och__send__textarea-shell:focus-within {
+  border-color: rgba(255, 255, 255, 0.25);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
+}
+
+.och__send__message::part(textarea) {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__send__message::part(textarea)::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.och__send__message::part(base) {
+  background: transparent;
+}
+
+/* Submit button */
+.och__send__submit-button::part(base) {
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.och__send__submit-button:hover::part(base) {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.och__send__submit-button[disabled]::part(base) {
+  opacity: 0.3;
+}
+
+/* Cancel button */
+.och__send__cancel-button::part(base) {
+  background: transparent;
+  color: rgba(255, 100, 100, 0.9);
+  border: 1px solid rgba(255, 100, 100, 0.4);
+}
+
+.och__send__cancel-button:hover::part(base) {
+  background: rgba(255, 100, 100, 0.12);
+}
+
+/* Upload icon */
+.och__send__upload-icon {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.och__send__upload-icon:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+/* Emoji button */
+.och__send__emoji-button::part(base) {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.och__send__emoji-button:hover::part(base) {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+/* Shortcut buttons */
+.och__send__shortcut-button::part(base) {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.och__send__shortcut-button:hover::part(base) {
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+}
+
+/* ========================================================================
+   EVALUATION (OCHEvaluation shadow root — if adopted)
+   ======================================================================== */
+
+.och__evaluation {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__evaluation__title {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.och__evaluation__rating-label {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.och__evaluation__button::part(base) {
+  border-radius: var(--ol-border-radius-large);
+}
+
+.och__evaluation__button[variant="default"]::part(base) {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.och__evaluation__button[variant="default"]:hover:not([disabled])::part(base) {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+/* ========================================================================
+   FLOW FIELD — CALENDAR (OflField shadow root — adopts customStyles)
+   ======================================================================== */
+
+/* Calendar labels & help text */
+.ofl__calendar__label {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.ofl__calendar__help-text {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__calendar__time-label {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+/* Calendar component — CSS custom property overrides
+   These cascade into ol-calendar's own shadow DOM. */
+.ofl__calendar__calendar {
+  --ol-calendar-background-color: transparent;
+  --ol-calendar-border: none;
+  --ol-calendar-color: rgba(255, 255, 255, 0.95);
+  --ol-calendar-padding: var(--ol-spacing-x-small);
+  --ol-calendar-day-spacing: var(--ol-spacing-3x-small);
+
+  /* Day cells */
+  --ol-calendar-day-background-color: transparent;
+  --ol-calendar-day-color: rgba(255, 255, 255, 0.85);
+  --ol-calendar-day-border-radius: 50%;
+  --ol-calendar-day-font-weight: 500;
+
+  /* Hover */
+  --ol-calendar-day-hover-background-color: rgba(255, 255, 255, 0.1);
+  --ol-calendar-day-hover-color: #ffffff;
+
+  /* Selected */
+  --ol-calendar-day-selected-background-color: var(--ol-color-primary-600);
+  --ol-calendar-day-selected-color: #ffffff;
+
+  /* Today */
+  --ol-calendar-day-today-background-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-day-today-color: rgba(0, 0, 0, 0.9);
+
+  /* Inactive (other months) */
+  --ol-calendar-day-inactive-color: rgba(255, 255, 255, 0.2);
+
+  /* Weekend */
+  --ol-calendar-day-weekend-color: rgba(255, 255, 255, 0.6);
+
+  /* Week-day labels (Mon, Tue…) */
+  --ol-calendar-week-color: rgba(255, 255, 255, 0.45);
+
+  /* Header (month/year title) */
+  --ol-calendar-header-color: rgba(255, 255, 255, 0.95);
+  --ol-calendar-header-background-color: transparent;
+
+  /* Navigation arrows */
+  --ol-calendar-arrow-color: rgba(255, 255, 255, 0.6);
+  --ol-calendar-arrow-hover-color: #ffffff;
+
+  /* Month/year picker views */
+  --ol-calendar-month-background-color: transparent;
+  --ol-calendar-month-color: rgba(255, 255, 255, 0.85);
+  --ol-calendar-month-hover-background-color: rgba(255, 255, 255, 0.1);
+  --ol-calendar-year-background-color: transparent;
+  --ol-calendar-year-color: rgba(255, 255, 255, 0.85);
+  --ol-calendar-year-hover-background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Calendar header & arrows via ::part() */
+.ofl__calendar__calendar::part(header) {
+  background: transparent;
+}
+
+.ofl__calendar__calendar::part(arrow) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.ofl__calendar__calendar::part(arrow):hover {
+  color: #ffffff;
+}
+
+/* ── Time list — radio-group mode (glass pills) ── */
+
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  color: rgba(255, 255, 255, 0.85);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button) {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button--checked) {
+  color: #ffffff;
+  background-color: var(--ol-color-primary-600);
+  border-color: var(--ol-color-primary-600);
+}
+
+.ofl__calendar__time-list--list .ofl__calendar__time-item:hover::part(button--checked) {
+  background-color: var(--ol-color-primary-700);
+  border-color: var(--ol-color-primary-700);
+}
+
+/* ── Time list — carousel mode (glass pill) ── */
+
+.ofl__calendar__time-item__content {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.ofl__calendar__time-list--carousel::part(navigation-button) {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Loading spinner */
+.ofl__calendar-spinner {
+  --indicator-color: rgba(255, 255, 255, 0.8);
+  --track-color: rgba(255, 255, 255, 0.15);
+}