/* assets/css/search.css */
.search-page .search-hero { background:#f8fafc; border-bottom:1px solid #e5e7eb; }
.search-page .search-hero .wrap { max-width: 920px; margin: 0 auto; padding: 18px 16px; }
.search-page h1 { margin:0 0 4px; font-size: 1.5rem; }
.search-page .search-query { margin: 0; color:#6b7280; }

.search-results-shell { max-width: 1100px; width: 100%; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.search-root { max-width: 100%; width: 100%; overflow-x: hidden; }

/* Grid: main SERP and sidebar */
.search-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 24px; align-items: start; width: 100%; max-width: 100%; }
.search-main { min-width: 0; overflow-x: hidden; position: relative; z-index: 1; }
.search-side { min-width: 0; position: relative; z-index: 2; }

/* SERP web results */
.serp-list { display: grid; gap: 26px; max-width: 100%; }
.serp-item { line-height: 1.55; padding: 8px 0; max-width: 100%; overflow: hidden; }
.serp-item > * { min-width: 0; max-width: 100%; }
.serp-url { display: flex; align-items: center; gap: 8px; color: #4d5156; font-size: 0.9rem; margin-bottom: 3px; min-width: 0; width: 100%; }
.serp-favicon { width: 16px; height: 16px; border-radius: 4px; }
.serp-host { color: #3c4043; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-path { color:#5f6368; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.serp-title {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;           /* single line */
  overflow: hidden;              /* crop overflow */
  text-overflow: ellipsis;       /* show … at end */
  word-break: normal;            /* don't break words so ellipsis can appear */
  overflow-wrap: normal;
  font-size: 1.3rem;
  color: #1a0dab;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35;
}
.serp-title:hover { text-decoration: underline; }
.serp-snippet {
  color: #4d5156;
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.5;
  /* Multi-line clamp (webkit) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;         /* cap to 3 lines */
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  /* Fallback safety so long tokens don't blow layout */
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Subtle fade for non-webkit engines to imply continuation */
  mask-image: linear-gradient(180deg, #000 85%, transparent);
}
.serp-snippet mark { background: #fff8c5; padding: 0 2px; border-radius: 3px; }

/* Sidebar sections */
.side-section { background:#fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; margin-bottom: 16px; }
.side-title { font-size: 0.95rem; color:#374151; margin: 0 0 8px; }
.side-list { display: grid; gap: 8px; }
.side-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; text-decoration: none; color:#111827; padding: 6px 6px; border-radius: 8px; }
.side-row:hover { background:#f9fafb; }
.side-avatar { width: 32px; height: 32px; border-radius:50%; object-fit:cover; }
.side-text .primary { font-weight: 600; }
.side-text .secondary { color:#6b7280; font-size: 0.85rem; }

/* Legacy list styles (kept for small screens) */
.result-section { margin-bottom: 24px; }
.result-title { font-size: 1rem; color:#374151; margin: 0 0 8px; }
.result-list { display: grid; gap: 8px; }
.result-row { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background:#fff; color:#111827; text-decoration: none; }
.result-row:hover { background:#f9fafb; }
.result-avatar { width: 36px; height: 36px; border-radius:50%; object-fit:cover; }
.result-text .primary { font-weight: 600; }
.result-text .secondary { color:#6b7280; font-size: 0.85rem; }
.result-text .snippet { color:#4b5563; font-size: 0.9rem; margin-top: 2px; }

.search-loading, .search-empty { color:#6b7280; padding: 20px; text-align:center; }

@media (prefers-color-scheme: dark) {
  .search-page .search-hero { background:#0b1220; border-color:#1f2937; }
  .search-page .search-query { color:#9ca3af; }
  .result-title { color:#9ca3af; }
  .result-row { background:#0f172a; border-color:#1f2937; color:#e5e7eb; }
  .result-row:hover { background:#111827; }
  .result-text .secondary { color:#9ca3af; }
  .result-text .snippet { color:#9ca3af; }
  .search-loading, .search-empty { color:#9ca3af; }
  .serp-title { color:#8ab4f8; }
  .serp-url { color:#9ca3af; }
  .serp-host { color:#e5e7eb; }
  .serp-path { color:#9ca3af; }
  .serp-snippet { color:#9ca3af; }
  .serp-snippet mark { background: #3a3d2e; }
  .side-section { background:#0f172a; border-color:#1f2937; }
  .side-title { color:#9ca3af; }
}

@media (max-width: 1200px) {
  .search-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 20px; }
}

@media (max-width: 1024px) {
  .search-grid { grid-template-columns: 1fr; }
  .search-side { order: -1; }
}