/* === 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: themed bar background in one-line mode (uses CSS variable so toolbar color persists) */
body.one-line-composer .browser-bottom-bar {
  background: var(--browser-toolbar-bg, 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;
}
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-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-pill-right-icon svg {
  mix-blend-mode: normal;
  filter: none;
}
.one-line-bar.ol-on-light .ol-pill-text {
  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-pill-right-icon svg {
  mix-blend-mode: normal;
  filter: none;
}
.one-line-bar.ol-on-dark .ol-pill-text {
  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);
}