/* Dark theme with a turquoise-blue accent. Fixed palette rather than
   Telegram's theme variables, so the app looks the same in every client. */
:root {
  --bg: #0b1118;
  --surface: #111a23;
  --surface-2: #0f1620;
  --border: #1f2b38;
  --text: #e8eef4;
  --text-soft: #c9d3dd;
  --muted: #8a97a6;
  --mono: #b8c4d0;

  --accent: #2ec9db; /* turquoise blue */
  --accent-strong: #16b5c8;
  --accent-text: #6fe0ec;
  --accent-ink: #062128; /* icon colour on the turquoise button */
  --accent-soft: rgba(46, 201, 219, 0.14);
  --accent-line: rgba(46, 201, 219, 0.55);

  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
  padding-top: calc(24px + env(safe-area-inset-top));
}

.app__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Search bar ---------- */

.search {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.search__field {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface-2);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.search__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS from zooming the page on focus */
  font-weight: 600;
  outline: none;
}

.search__input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.search__clear[hidden] {
  display: none;
}

.search__clear:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

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

.search__button {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 120ms ease;
}

.search__button:hover {
  background: var(--accent-strong);
}

.search__button:active {
  transform: translateY(1px);
}

.search__button svg {
  width: 20px;
  height: 20px;
}

.app__hint {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.app__hint[hidden] {
  display: none;
}

/* ---------- Google search results ----------
   cse.js injects its own stylesheet with fairly specific selectors, so the
   overrides below lean on !important. Everything is scoped under .results. */

.results {
  margin-top: 12px;
}

.results .gsc-control-cse {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--font) !important;
}

.results .gsc-control-cse * {
  box-sizing: border-box;
}

/* "About N results" + Sort by */
.results .gsc-above-wrapper-area {
  border: 0 !important;
  padding: 4px 0 14px !important;
}

.results .gsc-above-wrapper-area-container {
  width: 100%;
}

.results .gsc-result-info {
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.results .gsc-orderby-container {
  white-space: nowrap;
}

.results .gsc-orderby,
.results .gsc-option-menu-container {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.results .gsc-orderby-label {
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.results .gsc-selected-option-container {
  min-width: 34px;
  padding: 3px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.results .gsc-option-menu {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.results .gsc-option-menu-item {
  color: var(--text) !important;
}

.results .gsc-option-menu-item-highlighted {
  background: var(--accent-soft) !important;
}

/* Each result as a card */
.results .gsc-webResult.gsc-result {
  margin: 0 0 14px !important;
  padding: 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  background: var(--surface) !important;
  transition: border-color 120ms ease;
}

.results .gsc-webResult.gsc-result:hover {
  border-color: var(--accent-line) !important;
}

.results .gsc-webResult-divider {
  display: none !important;
}

/* Title */
.results .gsc-thumbnail-inside {
  display: block !important;
  padding: 0 !important;
}

.results .gs-title,
.results a.gs-title,
.results .gs-webResult.gs-result a.gs-title:link,
.results .gs-webResult.gs-result a.gs-title:visited {
  height: auto !important;
  overflow: visible !important;
  color: var(--accent) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.results a.gs-title b {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--accent-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Google repeats the title inside the snippet block on narrow screens; hide it. */
.results .gsc-table-cell-snippet-close > .gs-title {
  display: none !important;
}

/* URL lines: short host, full URL, breadcrumb */
.results .gsc-url-top {
  display: block !important;
  padding: 6px 0 10px !important;
}

.results .gsc-url-bottom {
  display: none !important;
}

.results .gs-visibleUrl {
  display: block !important;
  color: var(--mono) !important;
  font-family: var(--mono-font) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

.results .gs-visibleUrl-long {
  word-break: normal !important;
  overflow-wrap: anywhere;
}

.results .gs-visibleUrl-breadcrumb {
  color: var(--muted) !important;
}

/* Snippet */
.results .gsc-table-result {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 12px;
  width: 100% !important;
  margin: 0 !important;
}

.results .gsc-table-cell-snippet-close {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}

.results .gs-snippet {
  color: var(--text-soft) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* Keyword highlights as turquoise pills */
.results .gs-snippet b,
.results .gs-visibleUrl b {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

/* Thumbnail */
.results .gsc-table-result > .gsc-table-cell-thumbnail {
  flex: 0 0 auto;
  padding: 0 !important;
}

.results .gs-image-box {
  width: 64px !important;
  height: 64px !important;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-2);
}

.results img.gs-image {
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}

/* No results / errors */
.results .gs-no-results-result .gs-snippet,
.results .gs-error-result .gs-snippet {
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
}

/* Pagination */
.results .gsc-cursor-box {
  margin: 6px 0 16px !important;
  text-align: center;
}

.results .gsc-cursor-page {
  margin-right: 4px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  font-size: 14px !important;
}

.results .gsc-cursor-page:hover {
  border-color: var(--accent-line) !important;
  color: var(--text) !important;
}

.results .gsc-cursor-current-page {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 600;
}

/* "Search on Google" footer link */
.results .gcsc-more-maybe-branding-root {
  padding: 4px 0 !important;
  text-align: center;
}

.results .gcsc-find-more-on-google {
  color: var(--muted) !important;
}

.results .gcsc-find-more-on-google-magnifier {
  fill: var(--muted) !important;
}

.results .gcsc-find-more-on-google-query {
  color: var(--accent) !important;
}