/* =====================================================
   VicSearch – Google-like theme
   Supports: light | dark | black | auto
   ===================================================== */

/* ---------- Design tokens ---------- */

:root {
  /* Light (default) */
  --bg:             #ffffff;
  --bg-input:       #ffffff;
  --bg-input-focus: #ffffff;
  --bg-hover:       #f8f9fa;
  --surface:        #f1f3f4;
  --border:         #dfe1e5;
  --border-focus:   rgba(32,33,36,.28);
  --text:           #202124;
  --text-muted:     #4d5156;
  --text-url:       #006621;
  --link:           #1a0dab;
  --link-visited:   #609;
  --accent:         #1a73e8;
  --shadow:         0 1px 6px rgba(32,33,36,.28);
  --shadow-card:    0 1px 3px rgba(32,33,36,.12), 0 2px 8px rgba(32,33,36,.08);
  --thumb-bg:       #f1f3f4;
  --tag-bg:         #f1f3f4;
  --tag-text:       #3c4043;
  --pagination-current-bg: #1a73e8;
  --pagination-current-text: #fff;
}

/* Dark */
html.theme-dark {
  --bg:             #202124;
  --bg-input:       #303134;
  --bg-input-focus: #303134;
  --bg-hover:       #303134;
  --surface:        #303134;
  --border:         #3c4043;
  --border-focus:   rgba(232,234,237,.28);
  --text:           #e8eaed;
  --text-muted:     #bdc1c6;
  --text-url:       #81c995;
  --link:           #8ab4f8;
  --link-visited:   #c58af9;
  --accent:         #8ab4f8;
  --shadow:         0 1px 6px rgba(0,0,0,.4);
  --shadow-card:    0 1px 3px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --thumb-bg:       #303134;
  --tag-bg:         #303134;
  --tag-text:       #bdc1c6;
  --pagination-current-bg: #8ab4f8;
  --pagination-current-text: #202124;
}

/* Black (AMOLED) */
html.theme-black {
  --bg:             #000000;
  --bg-input:       #1a1a1a;
  --bg-input-focus: #1a1a1a;
  --bg-hover:       #1a1a1a;
  --surface:        #111111;
  --border:         #2a2a2a;
  --border-focus:   rgba(255,255,255,.2);
  --text:           #e8eaed;
  --text-muted:     #9aa0a6;
  --text-url:       #81c995;
  --link:           #8ab4f8;
  --link-visited:   #c58af9;
  --accent:         #8ab4f8;
  --shadow:         0 1px 6px rgba(0,0,0,.6);
  --shadow-card:    0 1px 3px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --thumb-bg:       #1a1a1a;
  --tag-bg:         #1a1a1a;
  --tag-text:       #9aa0a6;
  --pagination-current-bg: #8ab4f8;
  --pagination-current-text: #000;
}

/* Auto = follow OS */
@media (prefers-color-scheme: dark) {
  html.theme-auto {
    --bg:             #202124;
    --bg-input:       #303134;
    --bg-input-focus: #303134;
    --bg-hover:       #303134;
    --surface:        #303134;
    --border:         #3c4043;
    --border-focus:   rgba(232,234,237,.28);
    --text:           #e8eaed;
    --text-muted:     #bdc1c6;
    --text-url:       #81c995;
    --link:           #8ab4f8;
    --link-visited:   #c58af9;
    --accent:         #8ab4f8;
    --shadow:         0 1px 6px rgba(0,0,0,.4);
    --shadow-card:    0 1px 3px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
    --thumb-bg:       #303134;
    --tag-bg:         #303134;
    --tag-text:       #bdc1c6;
    --pagination-current-bg: #8ab4f8;
    --pagination-current-text: #202124;
  }
}

/* ---- Google colors for logo ---- */
.vs-V { color: #4285f4; }
.vs-i { color: #ea4335; }
.vs-c { color: #fbbc05; }
.vs-S { color: #4285f4; }
.vs-e { color: #34a853; }
.vs-a { color: #ea4335; }
.vs-r { color: #4285f4; }
.vs-c2{ color: #fbbc05; }
.vs-h { color: #34a853; }

/* ---------- Reset / Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Google Sans", Arial, sans-serif;
  margin: 0;
  padding: 0;
  transition: background .2s, color .2s;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }

main { max-width: none; }
footer { display: none; }

/* ---------- Top nav (About/Prefs) ---------- */

#links_on_top {
  position: fixed;
  top: 8px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 4px;
}

#links_on_top a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: "Google Sans", Arial, sans-serif;
}

#links_on_top a:hover {
  background: var(--surface);
  color: var(--text);
}

#links_on_top a span:first-child { display: none; }

/* ---------- HOME PAGE ---------- */

.google-home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.google-logo {
  font-size: 72px;
  font-weight: 400;
  letter-spacing: -2px;
  margin-bottom: 32px;
  font-family: "Product Sans", "Google Sans", Arial, sans-serif;
  user-select: none;
}

/* Simple search bar on home */
.google-home #search {
  position: static;
  background: transparent;
  padding: 0;
  width: 100%;
  max-width: 600px;
}

.google-home .search_box {
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: none;
  background: var(--bg-input);
  transition: box-shadow .2s;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 52px;
}

.google-home .search_box:hover,
.google-home .search_box:focus-within {
  box-shadow: var(--shadow);
  border-color: transparent;
}

.google-home #q {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  outline: none;
  padding: 0;
  height: 100%;
}

.google-home #q::placeholder { color: var(--text-muted); }

.google-home #send_search,
.google-home #clear_search {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
}

.google-home .autocomplete {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 24px 24px;
  box-shadow: var(--shadow);
  z-index: 100;
}

.google-home-buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.google-home-buttons .gs-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 14px;
  font-family: "Google Sans", Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.google-home-buttons .gs-btn:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--border);
}

/* ---------- RESULTS PAGE – search bar ---------- */

#search {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
  padding: 10px 0 0;
  border-bottom: 1px solid var(--border);
}

#search_header {
  display: flex;
  align-items: center;
  padding: 6px 24px 0;
  gap: 20px;
}

#search_logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

#search_logo svg,
#search_logo .vs-logo-text {
  height: 30px;
  width: auto;
}

/* Hide the SVG wordmark – on remplace par texte CSS */
#search_logo svg { display: none; }
#search_logo::after {
  content: "VicSearch";
  font-size: 22px;
  font-family: "Product Sans", "Google Sans", Arial, sans-serif;
  font-weight: 400;
  background: linear-gradient(90deg,
    #4285f4 0%,#ea4335 14%,#fbbc05 28%,#4285f4 42%,
    #34a853 57%,#ea4335 71%,#4285f4 85%,#34a853 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

#search_view {
  flex: 1;
  max-width: 692px;
}

.search_box {
  width: 100%;
  position: relative;
}

#q {
  width: 100%;
  height: 46px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  padding: 0 88px 0 20px;
  font-size: 16px;
  outline: none;
  font-family: "Google Sans", Arial, sans-serif;
  transition: box-shadow .15s, border-color .15s;
}

#q:hover, #q:focus {
  box-shadow: var(--shadow);
  border-color: transparent;
}

#q::placeholder { color: var(--text-muted); }

#send_search, #clear_search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  display: flex;
  align-items: center;
}

#send_search { right: 10px; }
#clear_search { right: 42px; }

.autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 200;
}

/* ---------- Categories (tabs) ---------- */

#categories {
  padding: 0 24px 0 180px;
  margin-top: 4px;
}

#categories_container {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#categories_container::-webkit-scrollbar { display: none; }

.category_button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: "Google Sans", Arial, sans-serif;
  transition: color .15s, border-color .15s;
}

.category_button svg { width: 18px; height: 18px; }

.category_button.selected {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.category_button:hover { color: var(--text); }

.category_button .category_name { font-size: 13px; }

/* Checkbox fallback */
.category_checkbox { display: none; }
.category_checkbox:has(input:checked) { display: inline-flex; }

/* Search filters row */
.search_filters {
  padding: 4px 24px 0 180px;
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- RESULTS LAYOUT ---------- */

#results {
  display: flex;
  gap: 0;
  padding: 0;
}

#sidebar {
  display: none !important;
}

#urls {
  padding: 20px 0 0 180px;
  max-width: 652px;
  flex: 1;
}

/* ---------- GENERAL result card ---------- */

.result {
  max-width: 652px;
  margin-bottom: 28px;
  font-family: "Google Sans", Arial, sans-serif;
}

/* Favicon + URL breadcrumb */
.url_header {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 4px;
}

.favicon img {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}

.url_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 14px;
  color: var(--text-muted);
  align-items: center;
}

.url_wrapper span { color: var(--text-muted); }

.url_o1 .url_i1 {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.url_o2::before { content: " › "; color: var(--text-muted); font-size: 12px; }

/* Title */
.result h3 {
  margin: 2px 0 4px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.result h3 a {
  color: var(--link) !important;
  text-decoration: none;
  font-weight: 400;
}

.result h3 a:hover { text-decoration: underline; }
.result h3 a:visited { color: var(--link-visited) !important; }

/* Thumbnail (video/image in results) */
.thumbnail_link {
  float: right;
  margin: 0 0 8px 16px;
}

.thumbnail {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.thumbnail_length {
  position: absolute;
  bottom: 4px; right: 4px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 2px;
}

/* Snippet */
.result .content,
.result p.content {
  font-size: 14px;
  line-height: 1.58;
  color: var(--text-muted);
  margin: 4px 0 0;
  clear: both;
}

/* Date */
time.published_date {
  font-size: 14px;
  color: var(--text-muted);
  margin-right: 8px;
}

/* Engines / extra info — hidden */
.engines, .result-engine, .engine-name, #backToTop { display: none !important; }
.break { display: none; }

/* ---------- IMAGES results ---------- */

#results.only_template_result-images #urls,
#results.only_template_result-images #sidebar {
  display: block !important;
}

#results.only_template_result-images #urls {
  padding: 20px 0 0 24px;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

/* Override when ALL results are images */
.template_group_result-images {
  display: contents;
}

/* Image card */
.result-images {
  position: relative;
  margin: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  background: var(--thumb-bg);
  cursor: pointer;
  break-inside: avoid;
}

.result-images > a {
  display: block;
  position: relative;
}

.result-images .image_thumbnail {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .15s;
}

.result-images:hover .image_thumbnail {
  transform: scale(1.02);
}

.result-images .title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  color: #fff;
  font-size: 12px;
  padding: 20px 8px 6px;
  opacity: 0;
  transition: opacity .15s;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-images:hover .title { opacity: 1; }

.result-images .source {
  display: none;
}

.result-images .image_resolution {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Image detail panel */
.result-images .detail {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.result-images .detail.open { display: flex; }

.result-images-source img {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.result-images-labels {
  background: var(--bg);
  color: var(--text);
  max-width: 320px;
  padding: 20px;
  border-radius: 8px;
  margin-left: 20px;
}

/* ---------- VIDEOS results ---------- */

.result-videos {
  max-width: 652px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

.result-videos .thumbnail_link {
  float: none;
  flex-shrink: 0;
  margin: 0;
  position: relative;
}

.result-videos .thumbnail {
  width: 240px;
  height: 135px;
  border-radius: 8px;
  object-fit: cover;
}

.result-videos .video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-videos .url_header,
.result-videos .url_wrapper {
  font-size: 12px;
}

.result-videos h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 2px 0;
  line-height: 1.4;
}

.result-videos .content {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.result-videos .result_views,
.result-videos .result_author,
.result-videos time {
  font-size: 13px;
  color: var(--text-muted);
}

.altlink { margin: 6px 0 0; }
.altlink a { font-size: 13px; color: var(--accent); text-decoration: none; }
.altlink a:hover { text-decoration: underline; }

.embedded-video {
  margin-top: 12px;
}

.embedded-video iframe {
  width: 100%;
  max-width: 560px;
  height: 315px;
  border: none;
  border-radius: 8px;
}

.embedded-video.invisible { display: none; }

/* ---------- ANSWERS ---------- */

#answers {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  max-width: 652px;
  margin-left: 180px;
}

/* ---------- PAGINATION ---------- */

#pagination {
  margin: 8px 0 32px 180px;
  display: flex;
  align-items: center;
  gap: 0;
}

.page_number button,
.page_number input[type="submit"],
.page_number input[type="button"] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  font-family: "Google Sans", Arial, sans-serif;
}

.page_number input[type="submit"]:hover,
.page_number button:hover {
  background: var(--surface);
}

.page_number_current {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--pagination-current-bg) !important;
  color: var(--pagination-current-text) !important;
  font-weight: 500 !important;
  cursor: default !important;
}

.previous_page button,
.next_page button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  font-family: "Google Sans", Arial, sans-serif;
}

.previous_page button:hover,
.next_page button:hover {
  background: var(--surface);
}

.numbered_pagination { display: flex; align-items: center; }

/* Google "Goooooooogle" logo at bottom of pagination */
#pagination::after {
  content: "";
  display: block;
}

/* ---------- MISC ---------- */

.dialog-error {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #f5c6c3;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 24px;
}

/* Corrections */
#corrections { margin-left: 180px; font-size: 14px; }

/* No results */
.no-results { margin-left: 180px; padding: 20px 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  #urls {
    padding: 16px 16px 0;
  }
  #categories { padding: 0 16px; }
  #answers { margin-left: 16px; }
  #pagination { margin-left: 16px; }
  #corrections { margin-left: 16px; }
  .search_filters { padding: 4px 16px 0; }
  #search_header { padding: 6px 16px 0; gap: 12px; }

  #results.only_template_result-images #urls {
    padding: 12px 12px 0;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .result-videos { flex-direction: column; }
  .result-videos .thumbnail { width: 100%; height: auto; max-height: 200px; }
}

@media (max-width: 600px) {
  .google-logo { font-size: 48px; }
  .google-home #search { max-width: 90vw; }
  #search_logo::after { font-size: 18px; }
  #urls { padding: 12px 12px 0; }
  .result { max-width: 100%; }
  #results.only_template_result-images #urls {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px;
  }
}