/**
 * @file tab.css
 * @description This file contains the CSS styles for the browser's start page.
 * @version 1.0.0
 * @date 2025-09-01
 */

:root {
  /* search container height */
  --height-1: 48px;

  /* xxx-container & xxx-list &  xxx-item  : == --height-1 - 2 * border */
  --height-2: 46px;
}

/* --- Global Resets and Base Styles --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  /* Remove the default outline on focused elements */
  outline: none;
}

body {
  /* Default background color when the image is not available */
  background-color: rgba(107, 107, 107, 0.65);
  /* Dynamic background image is set via JavaScript */
  /* Cover the entire screen */
  background-size: cover;
  /* Prevent the background image from repeating */
  background-repeat: no-repeat;
  /* Fix the background image during scroll */
  background-attachment: fixed;
  /* Set body height to the full viewport height */
  height: 100vh;
  margin: 0;
  /* Default font family */
  font-family: sans-serif;
  /* Center the content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Main Search Container --- */
.search-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* gap: 10px; */
  width: 48vw;
  min-width: 350px;
  height: var(--height-1);
  border-radius: calc(var(--height-1) / 2);
  /* Glassmorphism effect: semi-transparent background */
  background-color: rgba(255, 255, 255, 0.25);
  /* Blur effect for the background */
  backdrop-filter: blur(10px);
  /* Safari compatibility */
  -webkit-backdrop-filter: blur(10px);
  /* Soft shadow for depth */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Initially hidden to prevent style flashing on load */
  visibility: hidden;
}

/* #region  Width and Height Management */
/* All direct children of the search container take full height */
.search-container > * {
  height: var(--height-2);
}

.engine-container > * {
  height: var(--height-2);
}

.input-container > input {
  width: 100%;
  height: var(--height-2);
}

.shortcut-container > * {
  height: calc(var(--height-2) / 2);
}

.button-container > * {
  height: var(--height-2);
}

/* Equivalent to .engine-container > .engine-list > .engine-item */
.engine-item {
  height: var(--height-2);
}

/* Equivalent to .shortcut-container > .shortcut-list > .shortcut-item */
.shortcut-item {
  height: calc(var(--height-2) / 2);
}

/* Equivalent to .button-container > .button-list > .button-item */
.button-item {
  height: var(--height-2);
}

.engine-item > svg,
.button-item > svg {
  height: calc(var(--height-2) / 2);
}
/* #endregion */

/* --- Component Layout --- */
/* .engine-container, */
.input-container,
.shortcut-container,
.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Allow the input container to fill the remaining space */
  flex: 1;
  /* Margin is adjusted in settings mode for better aesthetics */
}

/* --- Animations --- */
/* Keyframes for the pop-in animation */
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply pop-in animation to items */
.engine-item,
.shortcut-item,
.button-item {
  animation: pop-in 0.3s ease-out;
}

/* --- Lists (Engines, Buttons) --- */
.engine-list,
.button-list {
  display: flex;
  align-items: center;
  cursor: auto;
  height: var(--height-2);
  border-radius: calc(var(--height-2) / 2);

  /* Add transition for smooth background/gap change */
  transition: all 0.3s ease-in-out;
}

/* Style for expanded lists (on hover) */
.engine-list.expanded,
.button-list.expanded {
  background-color: rgba(255, 255, 255, 0.2);
  /* gap: 8px; */
  /* padding: 0 8px; */
}

/* --- Individual Items --- */
.engine-item {
  height: var(--height-2);
  width: var(--height-2); /* Maintain a square shape */
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Apply animation when item becomes visible */
  animation: pop-in 0.3s ease-out;
}

.engine-item:hover {
  background-color: white;
}

.engine-item > svg {
  aspect-ratio: 1;
  border-radius: 50%;
}

/* --- Input Fields --- */
.search-input,
.settings-input {
  background-color: transparent;
  font-size: 17px;
}

/* --- Shortcut List --- */
.shortcut-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.shortcut-item {
  aspect-ratio: 1;
  border-radius: 15%;
  cursor: pointer;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.shortcut-item:hover {
  transform: scale(1.2); /* Enlarge on hover */
  /* background-color: rgba(255, 255, 255, 0.4); */
}

/* --- Button List --- */
.button-list {
  min-width: calc(var(--height-2) * 2);
  flex-direction: row-reverse; /* Buttons appear from the right */
}

.button-item {
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  /* background-color: rgb(134, 203, 196, 0.7); */
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-item > svg {
  aspect-ratio: 1;
  border-radius: 50%;
}

.button-item:hover {
  /* background-color: rgba(134, 203, 196, 0.9); */
  background-color: white;
}

/* --- Utility and Animation Classes --- */
/* Utility class to hide elements */
.hidden {
  display: none !important;
}

/* Fade out and move up animation */
.fade-out-up {
  animation: fadeOutUp 0.5s forwards;
}

/* Fade in and move down animation */
.fade-in-down {
  animation: fadeInDown 0.5s forwards;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-50px);
    visibility: hidden;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
    visibility: hidden;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

/* --- ICP Footer --- */
.icp-footer {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 20px;
}

.icp-footer a {
  color: #888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.icp-footer a:hover {
  color: #555;
}

.icp-footer img {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}