:root {
  --background: #ffffff;
  --search-bg: #ffffff;
  --text: #202124;
  --secondary-text: #5f6368;
  --border-color: #dadce0;
  --footer-bg: #f2f2f2;
  --footer-text: #70757a;
  --footer-border: #dadce0;
  --search-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  --suggestion-hover: #f8f9fa;
  --trending-item-border: #eee;
}

[data-theme="dark"] {
  /* Sampled pixel-for-pixel from live google.com dark mode (July 2026). The
     page bg matches the baked-in bg of Google's dark doodle GIFs so there's no
     rectangle around the doodle. */
  /* live google.com's exact dark page color. Safe to use because the doodle is
     proxied through /gpage/doodle.gif with its baked #1f1f1f background repainted
     to match — see _remap_gif_palette in gpage.py. Keep in lockstep with
     _PAGE_BG_DARK there, or a box reappears around the doodle. */
  --background: #222429;
  --search-bg: #4d5156;
  --text: #e8eaed;
  --secondary-text: #9aa0a6;
  --border-color: #5f6368;
  --footer-bg: #16171a;
  --footer-text: #9aa0a6;
  --footer-border: #2a2c30;
  --search-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  --suggestion-hover: #3c4043;
  --trending-item-border: #5f6368;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Gives #footer's sticky bottom-pin a containing block at least one viewport
     tall. Without it, a SHORT page (the Images tab hides the trending rows and
     the upper footer) ends its document a few hundred px down and the footer
     rides up right under the search box. Purely a minimum: body is still a
     plain block container, so no child's layout changes.
     svh (small viewport) with a vh fallback: on iOS Safari 100vh is the LARGE
     viewport, which ignores the visible URL bar, so pinning to 100vh puts the
     footer just past the bottom of what you can actually see. svh measures the
     viewport with the bar showing, which is the state a short page stays in
     (there is nothing to scroll, so the bar never retracts). */
  min-height: 100vh;
  min-height: 100svh;
  font-family: Roboto, Arial, sans-serif;
  background-color: var(--background);
  color: var(--text);
  /* Only transition `color`. Animating `background-color` causes a 300ms
     flicker around the doodle img: its baked bg snaps instantly while the
     page eases, so the rectangle is visible mid-fade. Snapping the bg in
     one frame keeps page + doodle in sync. */
  transition: color 0.3s;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  height: 48px;
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-bar-right a {
  color: var(--secondary-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0 8px;
  position: relative;
  padding-bottom: 8px;
}

.top-bar-right a.active {
  color: #1a73e8;
}

.top-bar-right a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;  /* Extend beyond the text */
  right: -8px; /* Extend beyond the text */
  height: 2px; /* Make it thinner (was 3px) */
  background-color: #1a73e8;
  border-radius: 2px;
}

/* Dark theme support */
[data-theme="dark"] .top-bar-right a.active {
  color: #8ab4f8;
}

[data-theme="dark"] .top-bar-right a.active::after {
  background-color: #8ab4f8;
}

.login-button {
  background: #1a73e8;
  color: white;
  border: none;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

/* Google's dark-mode "Sign in" pill: pale blue fill, dark navy label. */
[data-theme="dark"] .login-button {
  background: #c9e6fc;
  color: #001d35;
}

.menu-button {
  touch-action: manipulation;
  padding: 8px;
  background: none;
  border: none;
  color: var(--secondary-text);
  cursor: pointer;
}

.menu-button svg path {
  fill: var(--secondary-text);
}

/* 3x3 Grid Button + Bell Button Styles */
.grid-button,
.bell-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 8px;
  background: none;
  border: none;
  color: var(--secondary-text);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .grid-button:hover,
  .bell-button:hover {
    background-color: var(--suggestion-hover);
  }
}

.grid-button svg,
.bell-button svg {
  width: 24px;
  height: 24px;
}

.grid-button svg circle {
  fill: var(--secondary-text);
}

.bell-button svg path {
  fill: var(--secondary-text);
}

.top-bar a {
  color: var(--secondary-text);
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  margin: 0 8px;
}

#main {
  text-align: center;
  padding-top: 44px;
}

#logo {
  margin: 8px 0;
  height: 52px;
  max-width: 88vw;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

#logo:hover {
  transform: scale(1.05);
}

/* Doodle sizing matches live google.com: the doodle scales to fill most of the
   content column and is capped by both width and height so it renders identically
   across phone sizes (fills the screen on small phones, caps on large ones).
   Using auto width+height with both max caps preserves the GIF's aspect ratio. */
#logo.doodle {
  width: auto;
  height: auto;
  max-width: min(94vw, 408px);
  max-height: 172px;
}

.logo-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Doodle share button — google.com tucks this into the doodle's bottom-right
   corner, overlapping the artwork. Absolutely positioned inside .logo-container
   so it (a) sits tight against the doodle instead of floating below it, and
   (b) takes NO vertical space, which kept the search bar pushed too far down.
   The doodle GIF carries ~27px of transparent-looking padding below its art, so
   anchoring to the container's bottom lands the button right at the art edge. */
/* Share glyph placement, measured off live google.com:
     - right edge flush with the SEARCH BAR's right edge (0.3px off in the sample)
     - bottom sits 16.7px above the search bar's top
     - 32px circle
   Google anchors it to the search bar, NOT to the doodle artwork — which is why
   this lives inside .search-box. That makes it doodle-independent: the GIF's dead
   padding varies per doodle, so anything measured off the image drifts. Absolute,
   so it adds no height and can't push the search bar down. */
.doodle-share {
  position: absolute;
  right: 18px;   /* ~2px inside the search bar's right edge, as google.com has it */
  top: -49px;    /* = -(32px circle + 17px gap) -> bottom edge lands 17px above the
                    search bar's top. Deterministic; a percentage `bottom` here
                    resolved against the wrong height and sat ~13px too low. */
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 2;
}

.share-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(60, 64, 67, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .share-button {
  background: #2c2e34;
}

.share-button svg {
  width: 16px;
  height: 16px;
  fill: #c4c7cf;
}

.search-box {
  max-width: 584px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 10;
}

.search-wrapper {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 28px;
  height: 48px;
  margin: 0 auto;
  background: var(--search-bg);
}

/* Google's dark search pill has no visible outline — the border blends into
   the fill so only the medium-grey capsule shows. */
[data-theme="dark"] .search-wrapper {
  border-color: var(--search-bg);
}

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  direction: ltr;
  background: transparent;
  color: var(--text);
}

.search-icon {
  padding: 0 15px;
  display: flex;
  align-items: center;
  color: var(--secondary-text);
  flex-shrink: 0;
}

.camera-icon {
  width: 24px;
  height: 24px;
  margin: 0 16px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  cursor: pointer;
  flex-shrink: 0;
}

.rtl .camera-icon {
  margin: 0 8px 0 16px;
}

.microphone-icon {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  cursor: pointer;
  flex-shrink: 0;
}

.camera-icon svg {
  width: 24px;
  height: 24px;
}

.microphone-icon svg {
  width: 24px;
  height: 24px;
}

.fullscreen-camera-icon svg {
  width: 24px;
  height: 24px;
}

.fullscreen-microphone-icon svg {
  width: 24px;
  height: 24px;
}

.camera-icon svg .camera-part-green,
.camera-icon svg .camera-part-blue,
.camera-icon svg .camera-part-red,
.camera-icon svg .camera-part-yellow,
.fullscreen-camera-icon svg .camera-part-green,
.fullscreen-camera-icon svg .camera-part-blue,
.fullscreen-camera-icon svg .camera-part-red,
.fullscreen-camera-icon svg .camera-part-yellow {
  fill: var(--secondary-text) !important;
}

.microphone-icon svg,
.fullscreen-microphone-icon svg {
  fill: var(--secondary-text) !important;
}

.microphone-icon svg path,
.fullscreen-microphone-icon svg path {
  fill: var(--secondary-text) !important;
}

.search-with-ai-icon {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  cursor: pointer;
  flex-shrink: 0;
}

.search-with-ai-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--secondary-text) !important;
}

.search-with-ai-icon svg path {
  fill: var(--secondary-text) !important;
}

/* Flows at the END of the document, like real google.com — deliberately NOT
   position:fixed. Pinning it to the viewport made the footer visible at the top
   of the page (real Google shows none until you scroll down) and let it sit on
   top of the last trending rows, so a long link list had unreachable entries
   and scrolling sprang back. */
#footer {
  width: 100%;
  margin-top: 24px;
  /* Bottom-pinned WITHOUT position:fixed (see the warning above: fixed showed
     the footer at the top of the page and sat on top of the last trending rows,
     making a long link list unreachable). Sticky stays in normal flow, so a LONG
     page still ends with the footer after the final row and nothing is covered,
     while a SHORT page (Images tab) pins it to the bottom of the viewport
     instead of letting it float up under the search box. Paired with body's
     min-height:100vh, which the constraint resolves against. Do NOT convert
     this back to position:fixed. */
  position: sticky;
  top: 100vh;
  top: 100svh;
  background: var(--footer-bg);
  font-size: 14px;
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
}

.footer-content {
  padding: 10px 20px;
  text-align: center;
}

.footer-links a {
  color: var(--footer-text);
  text-decoration: none;
  margin: 0 10px;
  font-size: 14px !important;
}

.trending-searches {
  max-width: 584px;
  margin: 18px auto 0;
  text-align: left;
  padding: 0 16px;
}

.rtl .trending-searches {
  text-align: right;
}

/* Header row: "Trending searches" title on the left, kebab (3-dot) menu on the
   right — matches live google.com. */
.trending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 6px 4px;
}

/* 20.5px measured to match live google.com exactly on-device (22px rendered
   ~7% too large against the real page). */
.trending-title {
  font-size: 20.5px;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  color: var(--text);
  text-align: left;
}

.rtl .trending-title {
  text-align: right;
}

.trending-menu {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.trending-menu svg {
  width: 22px;
  height: 22px;
  fill: var(--secondary-text);
}

@media (hover: hover) {
  .trending-menu:hover {
    background-color: var(--suggestion-hover);
  }
}

.trending-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 14px padding -> 53px row pitch, matching live google.com (15px gave 55px). */
  padding: 14px 4px;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--trending-item-border);
  margin: 0;
  cursor: pointer;
}

@media (hover: hover) {
  .trending-item:hover {
    background-color: var(--suggestion-hover);
  }
}

.trending-text {
  color: var(--text);
  text-decoration: none;
  flex: 1;
  margin-left: 16px;
}

.rtl .trending-text {
  margin-right: 16px;
  margin-left: 0;
}

.trending-arrow {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  /* Muted, not white. On real google.com the row text is ~#e8e8e8 while this
     glyph is ~#bfbfbf, and a white arrow was one of the tells. The svg path
     carries no inline fill any more (an inline fill would beat this rule), so
     the color is decided here. */
  color: var(--secondary-text);
  fill: currentColor;
  flex-shrink: 0;
}

.rtl .trending-arrow {
  margin-right: 12px;
  margin-left: 0;
}

.suggestions-wrapper {
  max-width: 584px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 0 0 28px 28px;
  box-shadow: var(--search-shadow);
  background: var(--search-bg);
  display: none;
  position: relative;
  z-index: 10;
}

.suggestion-item {
  padding: 10px 20px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.rtl .suggestion-item {
  text-align: right;
}

@media (hover: hover) {
  .suggestion-item:hover {
    background-color: var(--suggestion-hover);
  }
}

.upper-footer {
  text-align: center;
  padding: 0 20px;
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: small;
  color: var(--secondary-text);
}

.upper-footer a {
  color: #1a0dab;
  text-decoration: none;
  padding: 0 4px;
}

[data-theme="dark"] .upper-footer a {
  color: #8ab4f8;
}

.language-text {
  display: inline-block;
  line-height: 28px;
}

.upper-footer.multiline .language-text {
  display: block;
  margin-bottom: 4px;
}

.upper-footer.multiline .separator {
  display: none;
}

.upper-footer.multiline a {
  display: inline-block;
  margin: 2px 6px;
}

.separator {
  display: inline-block;
  margin: 0 2px;
}

.autofill-container {
  position: relative;
  width: 100%;
  height: 0;
}

.autofill-trigger {
  position: fixed;
  bottom: 60px;
  right: 20px;
  width: 120px;
  height: 120px;
  background: transparent;
  border: none;
  cursor: default;
  z-index: 1000;
}

.hidden-form {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.hidden-form input {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

/* Mobile Fullscreen Search Styles */
.fullscreen-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 9999;
  display: none;
  flex-direction: column;
}

.fullscreen-search.active {
  display: flex;
}

.fullscreen-header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
  min-height: 56px;
}

.back-button {
  background: none;
  border: none;
  color: var(--secondary-text);
  cursor: pointer;
  padding: 8px;
  margin-right: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none !important;
}

.back-button:focus,
.back-button:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.rtl .back-button {
  margin-left: 16px;
  margin-right: 0;
}

.back-button:hover {
  background-color: var(--suggestion-hover);
}

.back-button svg {
  width: 24px;
  height: 24px;
  fill: var(--secondary-text);
}

.rtl .back-button svg {
  transform: scaleX(-1);
}

.fullscreen-search-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  height: 48px;
}

.fullscreen-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: var(--text);
  padding: 0 8px 0 0;
  /*padding: 0;*/
}

.rtl .fullscreen-search-input {
  padding: 0 0 0 8px;
  direction: rtl;
  text-align: right;
}

.fullscreen-microphone-icon {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fullscreen-camera-icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rtl .fullscreen-camera-icon {
  margin-right: 20px;
  margin-left: 0;
}

.fullscreen-camera-icon svg {
  width: 24px;
  height: 24px;
}

.fullscreen-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.fullscreen-suggestions {
  background: var(--background);
  display: none;
}

.fullscreen-suggestions.active {
  display: block;
}

.fullscreen-suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  color: var(--text);
  border-bottom: 1px solid var(--trending-item-border);
  display: flex;
  align-items: center;
}

.rtl .fullscreen-suggestion-item {
  direction: rtl;
}

@media (hover: hover) {
  .fullscreen-suggestion-item:hover {
    background-color: var(--suggestion-hover);
  }
}

.fullscreen-suggestion-item svg {
  width: 20px;
  height: 20px;
  margin-right: 16px;
  fill: var(--secondary-text);
}

.rtl .fullscreen-suggestion-item svg {
  margin-left: 16px;
  margin-right: 0;
}

.fullscreen-trending {
  background: var(--background);
  display: block;
}

.fullscreen-trending.hidden {
  display: none;
}

.fullscreen-trending-title {
  font-size: 14px;
  color: var(--secondary-text);
  margin: 14px 16px 6px;
  font-weight: 400;
}

.rtl .fullscreen-trending-title {
  text-align: right;
}

.fullscreen-trending-item {
  display: flex;
  align-items: center;
  /* Tighter than the homepage rows and with NO divider: the overlay on real
     google.com is a plain flowing list, while the homepage list is ruled. */
  padding: 11px 16px;
  cursor: pointer;
  color: var(--text);
}

.rtl .fullscreen-trending-item {
  direction: rtl;
}

@media (hover: hover) {
  .fullscreen-trending-item:hover {
    background-color: var(--suggestion-hover);
  }
}

.fullscreen-trending-item svg {
  width: 20px;
  height: 20px;
  margin-right: 16px;
  fill: var(--secondary-text);
}

/* Mobile detection and responsive styles */
@media (max-width: 768px) {
  .search-input {
    cursor: pointer;
  }
}

/* Hide fullscreen search on desktop */
@media (min-width: 769px) {
  .fullscreen-search {
    display: none !important;
  }
}

/* PeekQpal Overlay Styles */
.peekqpal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.peekqpal-overlay.active {
  display: flex !important;
}

.peekqpal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}

[data-theme="dark"] .peekqpal-image {
  filter: invert(1);
}

/* Prevent scrolling when overlay is active */
body:has(.peekqpal-overlay.active) {
  overflow: hidden;
}

/* Goo Remote — entrance animation */
@keyframes remoteIn {
  from { opacity: 0; transform: scale(0.88) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* Full-screen click-catcher backdrop */
.goo-remote-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.28);
  -webkit-tap-highlight-color: transparent;
}

/* Glassmorphism panel — positioned by JS near the trigger */
.goo-remote-panel {
  position: fixed;
  z-index: 99999;
  display: grid;
  grid-template-columns: repeat(var(--remote-cols, 3), 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 12px;
  background: rgba(16, 16, 22, 0.82);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  animation: remoteIn 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  -webkit-tap-highlight-color: transparent;
}

/* Individual remote buttons */
.goo-remote-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s ease, transform 0.1s ease, border-color 0.1s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  word-break: break-word;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.goo-remote-btn:active {
  background: rgba(255, 255, 255, 0.20);
  transform: scale(0.93);
  border-color: rgba(255, 255, 255, 0.22);
}

body:has(#goo-remote-backdrop) {
  overflow: hidden;
}