@import url("/style.css");

button, input, select, textarea { font: inherit; }
.app-button, .app-input, .chip { font-family: inherit; font-size: 1rem; }

.app-theme-toggle { display:none !important; }

.search-filters { padding:0 28px 8px }
.search-form { display:flex; flex-direction:column; gap:12px }

.search-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.search-row--events { align-items:flex-end }

.search-field { display:flex; flex-direction:column; gap:6px; min-width:180px }
.search-field--grow { flex:1 1 260px }
.search-field .chip-group { margin-top:2px }

.search-label {
  font-size:15px;
  font-weight:700;
  color:var(--label);
  letter-spacing:.2px;
}

.app-input {
  appearance:none;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--tile-bg);
  color:var(--text);
  outline:none;
  line-height:1.2;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, opacity .25s ease, filter .25s ease;
}
.app-input:focus { border-color:var(--btn-primary-hover-border) }
.app-input[disabled] { opacity:.6; pointer-events:none; filter:saturate(.8) }

.chip-group { display:flex; gap:8px; flex-wrap:wrap }
.chip {
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text);
  padding:8px 12px;
  border-radius:24px;
  cursor:pointer;
  font-weight:600;
  line-height:1.2;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .02s ease, opacity .25s ease, filter .25s ease;
}
.chip:hover { border-color:#5a5a5a }
.chip:active { transform: translateY(0.5px) }
.chip[aria-pressed="true"] {
  border-color:var(--btn-primary-hover-border);
  background:var(--btn-primary-hover-bg);
  color:var(--btn-primary-hover-text);
}
.chip[disabled] { opacity:.6; pointer-events:none; cursor:default; filter:saturate(.8) }
.chip:focus-visible { outline:2px solid var(--btn-primary-hover-border); outline-offset:2px }

.search-actions { margin-left:auto; display:flex; gap:10px }

.search-results { padding:0 28px 24px; transition:opacity .18s ease, filter .18s ease }
.search-results[aria-busy="true"] { opacity:.85; filter:saturate(.65) }

.results-meta { color:var(--muted); margin:6px 0 10px }
.results-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }

.result-item {
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--tile-bg);
  transition: border-color .25s ease, background-color .25s ease;
}
.result-item.is-highlight { border-color:var(--btn-primary-hover-border) }

.result-avatar { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--chip-bg); overflow:hidden }
.result-avatar img { width:100%; height:100%; display:block }

.result-main { display:flex; flex-direction:column; gap:4px; min-width:0 }
.result-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.result-name { font-weight:700 }
.result-server { font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--chip-bg) }

.result-msg { color:var(--text); opacity:.95; word-break:break-word }
.result-eventtext { font-size:15px }
.result-meta { color:var(--muted); font-size:13px }

.result-jumpbtn{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--chip-bg);
  color:var(--icon);
  cursor:pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.result-jumpbtn:hover{
  border-color:#5a5a5a;
  background:var(--btn-bg);
}
.result-jumpbtn:focus-visible{
  outline:2px solid var(--btn-primary-hover-border);
  outline-offset:2px;
}

.result-event {
  display:inline-grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--border); border-radius:10px; background:var(--chip-bg); color:var(--icon)
}

.pager { display:flex; gap:8px; justify-content:center; padding-top:14px; flex-wrap:wrap }
.pager-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--btn-bg); color:var(--text); font-weight:700; cursor:pointer;
  text-decoration:none; user-select:none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease, filter .25s ease;
}
.pager-button:hover { border-color:#5a5a5a }
.pager-button[aria-current="page"] {
  border-color:var(--btn-primary-hover-border);
  background:var(--btn-primary-hover-bg);
  color:var(--btn-primary-hover-text);
}
.pager-button[disabled] { opacity:.6; pointer-events:none; cursor:default; filter:saturate(.8) }
.pager-button.pager-ellipsis {
  pointer-events:none;
  cursor:default;
}

.app-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease, filter .25s ease }
.app-button[disabled], .app-button.is-loading { opacity:.6; pointer-events:none; cursor:default; filter:saturate(.85) }

@media (max-width:800px) {
  .search-row { flex-direction:column; align-items:stretch }
  .search-field--grow { flex: initial }
  .search-actions { margin:0 }
}

@media (max-width:560px) {
  .app-container { padding:16px }
}