/* === One Line Composer === */

/* Default: hidden */
.one-line-bar { display: none; }

/* === Icon swap: back ↔ copilot (controlled by body.copilot-ol) === */
/* Default: show back arrow, hide copilot icon */
.ol-back .ol-icon-copilot,
.ol-pill-icon .ol-icon-back { display: none; }
/* Copilot OL: swap icons */
body.copilot-ol .ol-back .ol-icon-back { display: none; }
body.copilot-ol .ol-back .ol-icon-copilot { display: flex; }
body.copilot-ol .ol-pill-icon .ol-icon-copilot { display: none; }
body.copilot-ol .ol-pill-icon .ol-icon-back { display: flex; }

/* === Enabled via body class === */
body.one-line-composer .one-line-bar,
body.one-line-composer .collapsed-domain-bar {
  --ol-glass-bg: rgba(255, 255, 255, 0.08);
  --ol-glass-core: rgba(255, 255, 255, 0.02);
  --ol-glass-border: rgba(255, 255, 255, 0.26);
  --ol-glass-edge-top: rgba(255, 255, 255, 0.36);
  --ol-glass-edge-bottom: rgba(255, 255, 255, 0.05);
  --ol-glass-shadow-near: rgba(15, 23, 42, 0.03);
  --ol-glass-shadow-far: rgba(15, 23, 42, 0.06);
  --ol-glass-sheen: rgba(255, 255, 255, 0.2);
  --ol-glass-sheen-soft: rgba(255, 255, 255, 0.02);
  --ol-glass-prism-left: rgba(120, 190, 255, 0.1);
  --ol-glass-prism-right: rgba(255, 178, 210, 0.09);
}

body.one-line-composer .one-line-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  height: 48px;
}
body.one-line-composer .address-row,
body.one-line-composer .navi {
  display: none !important;
}

/* Shared liquid-glass material */
.ol-back, .ol-menu {
  width: 48px; height: 48px;
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ol-back, .ol-menu, .ol-pill,
body.one-line-composer .collapsed-domain-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.045) 42%, var(--ol-glass-core) 100%), var(--ol-glass-bg);
  backdrop-filter: blur(18px) saturate(1.5) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.04);
  border: 1px solid var(--ol-glass-border);
  box-shadow:
    inset 0 1px 0 var(--ol-glass-edge-top),
    inset 0 -0.5px 0 var(--ol-glass-edge-bottom),
    0 1px 2px var(--ol-glass-shadow-near),
    0 6px 16px var(--ol-glass-shadow-far);
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.ol-back::before, .ol-menu::before, .ol-pill::before,
body.one-line-composer .collapsed-domain-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, var(--ol-glass-sheen) 0%, rgba(255, 255, 255, 0.08) 18%, var(--ol-glass-sheen-soft) 48%, transparent 74%),
    linear-gradient(90deg, var(--ol-glass-prism-left) 0%, transparent 20%, transparent 80%, var(--ol-glass-prism-right) 100%);
  opacity: 0.78;
  pointer-events: none;
}

.ol-back::after, .ol-menu::after, .ol-pill::after,
body.one-line-composer .collapsed-domain-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ol-glass-prism-left) 0%, rgba(255, 255, 255, 0.16) 16%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.16) 84%, var(--ol-glass-prism-right) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.42;
  pointer-events: none;
}

/* Content inside glass surfaces must sit above pseudo layers */
.ol-back svg, .ol-menu svg, .ol-pill-icon, .ol-pill-text, .ol-pill-right-icon,
body.one-line-composer .collapsed-domain-bar span {
  position: relative;
  z-index: 2;
}
.ol-back:active, .ol-menu:active { transform: scale(0.93); }

/* Center pill */
.ol-pill {
  flex: 1; height: 48px;
  border-radius: 32px;
  position: relative;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}
.ol-pill:active { transform: scale(0.98); }
/* inner layer removed — content sits directly in .ol-pill */
.ol-pill-inner {
  display: contents;
}
.ol-pill-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.ol-pill-icon svg { width: 22px; height: 22px; }
.ol-pill-text {
  flex: 1;
  font-family: var(--font-ui-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(76, 70, 66, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
  position: relative;
  z-index: 1;
}
.ol-pill-right-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }

/* Browser pill: domain text centered (redundant with base, kept for clarity) */
.ol-pill-text-center {
  text-align: center;
}

/* NTP: transparent bar background — always, including feed-mode */
body.one-line-composer .ntp-bottom-bar,
body.one-line-composer .ntp-bottom-bar.feed-mode {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* NTP: top sites shift down to fill freed space */
body.one-line-composer .top-sites {
  top: 597px;
}

/* Browser: transparent bar background in one-line mode */
body.one-line-composer .browser-bottom-bar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
  justify-content: flex-end;
}

/* Ensure iframe always extends to bottom edge */
body.one-line-composer .browser-iframe-wrap {
  bottom: 0px;
}

/* Gradient fade above bar — softens transition from content to pills */
body.one-line-composer .browser-bottom-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.22) 65%,
    rgba(255,255,255,0.40) 80%,
    rgba(255,255,255,0.58) 90%,
    rgba(255,255,255,0.70) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 0;
  opacity: calc(1 - var(--browser-collapse-progress));
  transition: opacity 0.2s ease;
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
}
/* Hide gradient fade when bar is collapsed to mini URL */
body.one-line-composer .browser-bottom-bar.collapsed::before {
  opacity: 0;
}
/* Hide the home-indicator gray bar */
body.one-line-composer .browser-bottom-bar .home-indicator-bar {
  background: transparent;
}

/* NTP: "News and more" scroll indicator closer when one-line bar is shorter */
body.one-line-composer .scroll-indicator {
  top: 706px;
}
/* Feed spacer must match so feed content doesn't overlap top-sites */
body.one-line-composer .feed-spacer {
  height: 706px;
}

/* Browser safe-area masks */
body.one-line-composer .browser-top-safe-area {
  opacity: calc(1 - var(--browser-collapse-progress));
}
body.one-line-composer .browser-top-safe-area-fill {
  opacity: calc(1 - var(--browser-collapse-progress));
}
body.one-line-composer .browser-top-safe-area-mask {
  opacity: calc((1 - var(--browser-collapse-progress)) * 0.46);
}
body.one-line-composer .browser-bottom-safe-area-mask {
  z-index: 0;
  opacity: var(--browser-bottom-banner);
}

/* Browser: entire one-line-bar morphs into mini pill on collapse.
   The ol-pill IS the container — it shrinks from full-width bar to a
   centered mini domain capsule. No separate collapsed-domain-bar needed. */
body.one-line-composer .browser-bottom-bar .one-line-bar {
  position: relative;
  z-index: 2;
  /* Shrink the whole bar + move down toward safe area */
  transform: translateY(calc(var(--browser-collapse-progress) * 24px));
  justify-content: center;
  transition: none;
}
/* Side buttons fade + shrink inward */
body.one-line-composer .browser-bottom-bar .one-line-bar .ol-back,
body.one-line-composer .browser-bottom-bar .one-line-bar .ol-menu {
  transform: scale(calc(1 - var(--browser-collapse-progress)));
  opacity: calc(1 - var(--browser-collapse-progress) * 1.8);
  width: calc(48px * (1 - var(--browser-collapse-progress)));
  margin: 0 calc(-4px * var(--browser-collapse-progress));
  overflow: hidden;
  transition: none;
}
/* The pill morphs: shrinks height, narrows smoothly */
body.one-line-composer .browser-bottom-bar .one-line-bar .ol-pill {
  height: calc(48px - (var(--browser-collapse-progress) * 22px));
  border-radius: calc(32px - (var(--browser-collapse-progress) * 2px));
  padding: 0 calc(12px - (var(--browser-collapse-progress) * 3px));
  /* Override flex:1 — shrink from full width to fit-content */
  flex: none;
  width: calc((100% - 48px * 2 - 8px * 2) * (1 - var(--browser-collapse-progress)) + 120px * var(--browser-collapse-progress));
  min-width: 80px;
  max-width: 100%;
  transition: none;
}
/* When fully collapsed, use fit-content for exact text width */
body.one-line-composer .browser-bottom-bar.collapsed .one-line-bar .ol-pill {
  width: fit-content;
  min-width: 80px;
  max-width: min(50vw, 180px);
}
/* Hide pill inner content (icons, mic) as it shrinks */
body.one-line-composer .browser-bottom-bar .one-line-bar .ol-pill-icon,
body.one-line-composer .browser-bottom-bar .one-line-bar .ol-pill-right-icon {
  opacity: calc(1 - var(--browser-collapse-progress) * 2.5);
  width: calc(24px * (1 - var(--browser-collapse-progress)));
  overflow: hidden;
  transition: none;
}
/* Pill text shrinks */
body.one-line-composer .browser-bottom-bar .one-line-bar .ol-pill-text {
  font-size: calc(15px - (var(--browser-collapse-progress) * 5px));
  transition: none;
}

/* ===== Summarize morph (long article + Copilot Mode) — TRUE SHAPE MORPH =====
   The Copilot circle (ol-back) GROWS into a capsule that reveals "Summarize this
   page"; the address pill (ol-pill) SHRINKS into a circle holding the search
   glyph. Two widths animate in opposite directions — that is the morph.
   Menu (ol-menu) is pinned right. */

.ol-icon-search { display: none; }

/* Smooth width/shape transitions — only while the bar is expanded, so the
   scroll-driven collapse (which sets transition:none) stays instant. */
.MORPH_EASE { /* doc: cubic-bezier(0.4,0,0.2,1) @ 1.2s */ }
/* Instant morph reset (search opened over the bar): kill all morph transitions
   so the bar snaps back to default with no visible morph-back animation. */
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-back,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-pill,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-menu,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-back-summarize-label,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-pill-icon,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-pill-text,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-pill-right-icon .ol-icon-reload,
body.one-line-composer .browser-bottom-bar.no-morph-anim .one-line-bar .ol-pill .ol-icon-search {
  transition: none !important;
}

/* Expanded bar: full width + left-aligned. ol-back is the only in-flow item
   (pill + menu are absolute), so this keeps the Copilot logo pinned at the left
   in BOTH the default and morph states. (Collapsed state keeps its own centring.) */
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar {
  width: 100%;
  justify-content: flex-start;
}
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar .ol-back {
  overflow: hidden;
  /* Fixed 24px corner radius in BOTH states (= a circle at 48px, a true capsule
     when wide). Only the width animates — the rounded ends never change shape.
     (border-radius is intentionally NOT transitioned and NOT 50%, since 50% on a
     wide box makes elliptical ends that visibly warp during the grow.) */
  border-radius: 24px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1),
              padding 0.8s cubic-bezier(0.4,0,0.2,1);
}
/* Expanded state: pill + menu are absolutely positioned at FIXED right anchors
   so their right edges never move. The pill's WIDTH is explicit in both states
   (calc default → 48 morph), so it transitions smoothly with no flex snap; its
   right edge is pinned and the left edge slides right in step with the growing
   capsule → the two shapes "push" and never overlap. */
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar .ol-pill {
  position: absolute;
  right: 72px;            /* 16 padding + 48 menu + 8 gap */
  left: auto;
  top: 0; bottom: 0; margin: auto 0;
  width: calc(100% - 144px); /* = bar - ol-back(48) - menu(48) - 3 gaps/pads */
  max-width: none;
  min-width: 0;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1),
              padding 0.8s cubic-bezier(0.4,0,0.2,1);
}
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar .ol-menu {
  position: absolute;
  right: 16px;
  top: 0; bottom: 0; margin: auto 0;
}

/* Copilot logo pinned at a fixed left position inside ol-back — at 13px it is
   both the centre of the 48px circle AND the start of the capsule, so it never
   moves between the two states (no flex/justify/padding reflow). */
body.one-line-composer .one-line-bar .ol-back .ol-icon-copilot {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center;
  z-index: 2;
}
/* The prompt label starts at a fixed left point (just right of the logo) and is
   revealed left→right purely by the growing capsule width (overflow clip).
   Opacity fades in early so the rest of the reveal is a clean clip wipe. */
body.one-line-composer .one-line-bar .ol-back-summarize-label {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui-sans);
  font-size: 15px; font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease 0.06s;
}

/* Sequence: address content fades out EARLY (quick, while still wide so it
   barely drifts), the pill keeps shrinking, then the magnifier fades in LATE
   (after the content is gone and the circle has mostly formed). */
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar .ol-pill-icon,
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar .ol-pill-right-icon .ol-icon-reload {
  transition: opacity 0.2s ease;
}
body.one-line-composer .browser-bottom-bar:not(.collapsed) .one-line-bar .ol-pill-text {
  transition: opacity 0.2s ease, color 0.22s ease, filter 0.22s ease;
}
/* search: absolute-centred in the pill, out of flow, faded in late on morph */
.one-line-bar .ol-pill .ol-icon-search {
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease 0.42s;
}

/* ---- morph ON ---- */
/* ol-back keeps the Copilot logo (never a back chevron) */
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-back .ol-icon-back { display: none !important; }
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-back .ol-icon-copilot { display: flex !important; }

/* ol-back: circle -> capsule. ONLY width animates — radius is a fixed 24px
   (set above), the logo (absolute) stays put, the label is revealed by the
   growing width. Nothing reflows, the rounded ends never warp. */
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-back {
  width: 232px;
}
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-back-summarize-label {
  opacity: 1;
}

/* ol-pill: capsule -> circle. Positioning is in the base (:not(.collapsed))
   rule; morph only shrinks the explicit width 246 → 48. Right edge stays pinned,
   left edge slides right in step with the capsule. */
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill {
  width: 48px;
  padding: 0;
  justify-content: center;
}
/* fade address content out (clipped by the shrink — no display pop) */
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill-icon,
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill-text,
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill-right-icon .ol-icon-reload {
  opacity: 0;
}
/* search anchors to the pill (not the 24px right-icon) so it centres cleanly */
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill-right-icon {
  position: static;
}
/* fade search in (absolute-centered so layout never reflows) */
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill .ol-icon-search {
  opacity: 1;
}

body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-back,
body.one-line-composer .browser-bottom-bar.summarize-morph .one-line-bar .ol-pill { cursor: pointer; }

body.one-line-composer .browser-bottom-bar.collapsed .one-line-bar {
  pointer-events: auto; /* keep interactive in collapsed state */
}
/* Hide the old collapsed-domain-bar — pill itself is the collapsed state */
body.one-line-composer .collapsed-domain-bar {
  display: none;
}
body.one-line-composer .collapsed-domain-bar span {
  font-family: var(--font-ui-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(38, 42, 48, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.one-line-composer .browser-bottom-bar.collapsed {
  transform: none;
}
body.one-line-composer .browser-bottom-bar.collapsed .collapsed-domain-bar {
  pointer-events: auto;
}

/* === Adaptive dark/light icon & text colors === */

/*
 * Fallback: mix-blend-mode auto-contrast for single-color icons & text.
 * Works without extension — browser compositing blends against whatever
 * is behind the glass pill (iframe content, wallpaper, etc.).
 *
 * Strategy: white base color + difference blend → auto-inverts against bg.
 * grayscale(1) + contrast(9) clamps output to near-black or near-white.
 *
 * When extension provides precise detection (.ol-on-dark / .ol-on-light),
 * blend mode is turned off and explicit colors are used instead.
 */

/* Default: blend-mode auto-contrast (fallback when no extension) */
.one-line-bar {
  color: #fff;
}
.one-line-bar .ol-back svg,
.one-line-bar .ol-menu svg,
.one-line-bar .ol-pill-text,
.one-line-bar .ol-back-summarize-label,
.one-line-bar .ol-pill-right-icon svg {
  mix-blend-mode: difference;
  filter: grayscale(1) contrast(9);
}
/* Copilot icon: never blend — preserve gradient colors */
.one-line-bar .ol-pill-icon {
  isolation: isolate;
}
.one-line-bar .ol-pill-icon svg {
  mix-blend-mode: normal !important;
  filter: none !important;
}

.ol-pill-text {
  transition: color 0.25s ease, filter 0.25s ease;
}

/* === Extension-driven precise mode (overrides blend fallback) === */
/* When .ol-on-light or .ol-on-dark is set by JS, disable blend mode
   and use explicit colors for cleaner appearance. */

/* Light mode (light background → dark icons/text) */
.one-line-bar.ol-on-light {
  color: #272320;
}
.one-line-bar.ol-on-light .ol-back svg,
.one-line-bar.ol-on-light .ol-menu svg,
.one-line-bar.ol-on-light .ol-pill-text,
.one-line-bar.ol-on-light .ol-back-summarize-label,
.one-line-bar.ol-on-light .ol-pill-right-icon svg {
  mix-blend-mode: normal;
  filter: none;
}
.one-line-bar.ol-on-light .ol-pill-text,
.one-line-bar.ol-on-light .ol-back-summarize-label {
  color: rgba(76, 70, 66, 0.9);
}

/* Dark mode (dark background → light icons/text) */
.one-line-bar.ol-on-dark {
  color: #fff;
}
.one-line-bar.ol-on-dark .ol-back svg,
.one-line-bar.ol-on-dark .ol-menu svg,
.one-line-bar.ol-on-dark .ol-pill-text,
.one-line-bar.ol-on-dark .ol-back-summarize-label,
.one-line-bar.ol-on-dark .ol-pill-right-icon svg {
  mix-blend-mode: normal;
  filter: none;
}
.one-line-bar.ol-on-dark .ol-pill-text,
.one-line-bar.ol-on-dark .ol-back-summarize-label {
  color: rgba(255, 255, 255, 0.92);
}
/* Adjust glass tint for dark backgrounds */
.one-line-bar.ol-on-dark .ol-back,
.one-line-bar.ol-on-dark .ol-menu {
  --ol-glass-bg: rgba(24, 30, 40, 0.12);
  --ol-glass-core: rgba(255, 255, 255, 0.012);
  --ol-glass-border: rgba(255, 255, 255, 0.18);
  --ol-glass-edge-top: rgba(255, 255, 255, 0.22);
  --ol-glass-edge-bottom: rgba(255, 255, 255, 0.03);
  --ol-glass-shadow-near: rgba(0, 0, 0, 0.08);
  --ol-glass-shadow-far: rgba(0, 0, 0, 0.12);
  --ol-glass-sheen: rgba(255, 255, 255, 0.14);
  --ol-glass-sheen-soft: rgba(255, 255, 255, 0.015);
  --ol-glass-prism-left: rgba(118, 180, 255, 0.11);
  --ol-glass-prism-right: rgba(255, 172, 208, 0.1);
}
.one-line-bar.ol-on-dark .ol-pill {
  --ol-glass-bg: rgba(24, 30, 40, 0.12);
  --ol-glass-core: rgba(255, 255, 255, 0.012);
  --ol-glass-border: rgba(255, 255, 255, 0.18);
  --ol-glass-edge-top: rgba(255, 255, 255, 0.22);
  --ol-glass-edge-bottom: rgba(255, 255, 255, 0.03);
  --ol-glass-shadow-near: rgba(0, 0, 0, 0.08);
  --ol-glass-shadow-far: rgba(0, 0, 0, 0.12);
  --ol-glass-sheen: rgba(255, 255, 255, 0.14);
  --ol-glass-sheen-soft: rgba(255, 255, 255, 0.015);
  --ol-glass-prism-left: rgba(118, 180, 255, 0.11);
  --ol-glass-prism-right: rgba(255, 172, 208, 0.1);
}

body.one-line-composer .browser-page.browser-shell-on-dark .collapsed-domain-bar {
  --ol-glass-bg: rgba(24, 30, 40, 0.12);
  --ol-glass-core: rgba(255, 255, 255, 0.012);
  --ol-glass-border: rgba(255, 255, 255, 0.18);
  --ol-glass-edge-top: rgba(255, 255, 255, 0.22);
  --ol-glass-edge-bottom: rgba(255, 255, 255, 0.03);
  --ol-glass-shadow-near: rgba(0, 0, 0, 0.08);
  --ol-glass-shadow-far: rgba(0, 0, 0, 0.12);
  --ol-glass-sheen: rgba(255, 255, 255, 0.14);
  --ol-glass-sheen-soft: rgba(255, 255, 255, 0.015);
  --ol-glass-prism-left: rgba(118, 180, 255, 0.11);
  --ol-glass-prism-right: rgba(255, 172, 208, 0.1);
}

body.one-line-composer .browser-page.browser-shell-on-dark {
  --browser-top-edge-rgb: 28 28 30;
  --browser-bottom-edge-rgb: 28 28 30;
}

body.one-line-composer .browser-page.browser-shell-on-light {
  --browser-top-edge-rgb: 246 247 249;
  --browser-bottom-edge-rgb: 246 247 249;
}

body.one-line-composer .browser-page.browser-shell-on-dark .collapsed-domain-bar span {
  color: rgba(255,255,255,0.86);
}