/* Arama paneli, @ anma rozetleri ve öneri listesi, yazıyor satırı, eski bölüm şeridi ve özel mesaj
   başlangıcındaki avatar. Temel biçimler components.css'te, burada yalnızca bu özelliklerin
   ek bileşenleri. Renkler, yarıçaplar ve süreler yalnızca tasarım belirteçleriyle (var(--...)) verilir,
   böylece üç temada ve iki modda doğru görünür. Temaya özgü küçük farklar dosyanın sonunda. */

/* =========================================================
   1. Arama paneli (#search-panel)
   ========================================================= */

.search-panel {
  overflow: hidden;
}

/* İlk satır: simge, arama alanı ve kapat. Kapsam ve süzgeçler ikinci satırda. */
.search-bar {
  flex-wrap: nowrap;
}

.search-glyph {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  color: var(--text-3);
}

.search-input {
  flex: 1 1 12rem;
  min-width: 6rem;
}

/* Tarayıcının kendi temizleme düğmesi temaya uymadığı için gizlenir (alan Esc ve seçip silmeyle temizlenir) */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-scope {
  flex: 0 1 13rem;
  width: 13rem;
  min-width: 9rem;
}

.search-close {
  flex: none;
}

.search-filters {
  align-items: center;
}

/* Kimden süzgeci: etiket, giriş alanı veya seçilen kişinin çipi ve öneri listesi */
.search-from {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
}

.search-from-label {
  flex: none;
  margin-right: 0.5rem;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.search-from-input {
  width: 12rem;
  max-width: 100%;
  min-height: var(--target);
}

.search-from-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: 16rem;
  margin-top: 0.25rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-float);
  box-shadow: var(--shadow-pop);
}

/* Açılıp kapanan süzgeç çipleri (aria-pressed) */
.search-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  max-width: 100%;
  padding: 0 0.9rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-3);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.search-chip::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
}

.search-chip:hover {
  background-color: var(--surface-hover);
  color: var(--text);
}

.search-chip[aria-pressed="true"],
.search-chip.is-on {
  border-color: var(--mention-line);
  background-color: var(--mention-bg);
  color: var(--mention-text);
}

.search-chip[aria-pressed="true"]::before {
  background-color: currentColor;
  opacity: 1;
}

.search-from-chip {
  padding-left: 0.35rem;
}

.search-from-chip::before {
  display: none;
}

.search-from-chip .avatar {
  margin-right: 0.5rem;
}

.search-from-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-from-x {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
}

/* Durum satırı: taranan mesaj sayısı, sonuç sayısı, durdurma ve sürdürme */
.search-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 2.75rem;
  padding: 0.25rem 0.9rem;
  border-bottom: var(--border-width) solid var(--line);
  color: var(--text-2);
}

.search-status-text {
  flex: 1 1 14rem;
  margin: 0.25rem 0.75rem 0.25rem 0;
}

.search-status.is-scanning .search-status-text::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: var(--accent-2-text);
  vertical-align: middle;
  -webkit-animation: search-pulse 1s var(--ease) infinite alternate;
  animation: search-pulse 1s var(--ease) infinite alternate;
}

.search-status.is-error .search-status-text {
  color: var(--danger);
}

.search-stop {
  flex: none;
  min-height: var(--target);
}

@-webkit-keyframes search-pulse {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@keyframes search-pulse {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* Odalar ve Kişiler (istek 17): adı sorguyla eşleşen yazı odaları ve özel konuşmalar, mesaj sonuçlarının üstünde */
.search-quick {
  flex: none;
  max-height: 40%;
  overflow-y: auto;
  padding: 0.25rem 0.5rem 0.375rem;
  border-bottom: var(--border-width) solid var(--line);
}

.search-quick-title {
  margin: 0.375rem 0.5rem 0.25rem;
  color: var(--text-3);
  font-family: var(--font-label);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  line-height: 1.3;
  text-transform: uppercase;
}

:root[data-skin="turkuaz"] .search-quick-title {
  text-transform: none;
}

.search-quick-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-quick-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--target);
  padding: 0.375rem 0.625rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.search-quick-item:hover {
  background-color: var(--surface-hover);
}

.search-quick-item:focus-visible {
  border-color: var(--focus);
  outline: 3px solid var(--focus);
  outline-offset: -1px;
}

.search-quick-item > .avatar {
  flex: none;
  margin-right: 0.75rem;
}

.search-quick-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 1rem 0 0.25rem;
  color: var(--accent-text);
}

.search-quick-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.search-quick-name {
  overflow: hidden;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-quick-kind {
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* Sonuçlar */
.search-results {
  padding-top: 0.5rem;
}

.search-result-row {
  list-style: none;
}

.search-result {
  display: flex;
  align-items: flex-start;
  min-height: var(--target);
  font: inherit;
}

.search-result > .avatar {
  flex: none;
  margin: 0.15rem 0.75rem 0 0;
}

.search-result-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.search-result:focus-visible {
  border-color: var(--focus);
  outline: 3px solid var(--focus);
  outline-offset: -1px;
}

.search-result-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}

.search-result-meta > span + span::before {
  content: "\00b7";
  margin: 0 0.4rem;
  color: var(--text-3);
}

.search-result-channel {
  color: var(--accent-2-text);
  font-weight: var(--weight-strong);
}

.search-result-author {
  color: var(--text);
  font-weight: var(--weight-strong);
}

.search-result-date {
  color: var(--text-3);
}

.search-result-text {
  line-height: 1.45;
}

.search-result-file {
  display: inline-block;
  margin-right: 0.15rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-small);
  background-color: var(--surface-3);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  vertical-align: middle;
}

.search-hit {
  padding: 0 0.1rem;
}

.search-more-wrap {
  display: flex;
  justify-content: center;
  flex: none;
}

.search-more {
  margin: 0 0 0.5rem;
  min-height: var(--target);
}

.search-note {
  flex: none;
  margin: 0;
  padding: 0.5rem 0.9rem 0.75rem;
  border-top: var(--border-width) solid var(--line);
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* =========================================================
   2. Eski bölüm şeridi (#search-jump): aramadan gelinen bölümde daha yeni mesajlar varken
   ========================================================= */

.search-jump {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: none;
  margin: 0 1rem 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-float);
  box-shadow: var(--shadow-card);
  color: var(--text-2);
}

.search-jump-text {
  flex: 1 1 12rem;
  margin: 0.25rem 0.75rem 0.25rem 0;
}

.search-jump-button {
  flex: none;
  min-height: var(--target);
}

.search-jump.is-loading .search-jump-text {
  opacity: 0.7;
}

.app-view[data-view="home"] .search-jump {
  display: none;
}

/* Aramadan gidilen mesajın vurgusu (kısa süre, açılışta bir kez parlar) */
.message-list .msg.is-highlighted {
  background-color: var(--surface-active);
  box-shadow: inset 4px 0 0 var(--focus), inset 0 0 0 1px var(--line-strong);
  -webkit-animation: search-flash 1.4s var(--ease) 1;
  animation: search-flash 1.4s var(--ease) 1;
}

@-webkit-keyframes search-flash {
  0%, 35% { background-color: var(--mention-bg); }
  100% { background-color: var(--surface-active); }
}

@keyframes search-flash {
  0%, 35% { background-color: var(--mention-bg); }
  100% { background-color: var(--surface-active); }
}

.message-list .msg:focus {
  outline: none;
}

/* =========================================================
   3. Anma rozetleri ve beni anan mesaj
   ========================================================= */

.mention {
  line-height: inherit;
  vertical-align: baseline;
  white-space: nowrap;
}

.mention:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.mention.is-me {
  box-shadow: inset 0 -2px 0 var(--mention-line);
}

.mention-everyone {
  cursor: default;
}

.mention-everyone:hover {
  text-decoration: none;
}

/* @ öneri listesi: en az altı satır sığar */
.mention-popover {
  max-height: 18.75rem;
}

.mention-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option-handle {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option[aria-selected="true"] .mention-option-handle {
  color: var(--text-2);
}

.mention-option[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--mention-line);
}

.mention-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-right: 0.6rem;
  border-radius: var(--avatar-radius);
  background-color: var(--mention-bg);
  color: var(--mention-text);
}

.mention-option-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.mention-option-everyone .mention-option-name {
  flex: none;
  margin-right: 0.75rem;
  font-weight: var(--weight-strong);
}

.mention-option-everyone .mention-option-handle {
  flex: 1 1 auto;
  max-width: none;
  text-align: right;
}

/* Özel mesajın okunmamış sayısı anma rozeti gibi görünür (her özel mesaj kişiye yöneliktir). Temaların
   okunmamış nokta biçimi bu sayıyı gizlemesin. */
#dm-list .dm-item .unread-badge {
  width: auto;
  height: auto;
  border-radius: var(--radius-pill);
  background-color: var(--attention);
  color: var(--on-attention);
  box-shadow: none;
  -webkit-transform: none;
  transform: none;
}

:root[data-skin="arcade"] #dm-list .dm-item .unread-badge {
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
}

:root[data-skin="turkuaz"] #dm-list .dm-item .unread-badge {
  border-radius: var(--radius-small);
}

/* =========================================================
   4. Yazıyor satırı
   ========================================================= */

.typing-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.typing-name {
  font-weight: var(--weight-strong);
}

/* =========================================================
   5. Özel mesaj başlangıcı: kanal simgesi yerine karşı tarafın büyük avatarı
   ========================================================= */

.channel-start.is-dm .channel-start-icon.is-avatar {
  justify-content: flex-start;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.channel-start .channel-start-avatar[data-status]::after {
  display: none;
}

/* =========================================================
   6. Dar ekran
   ========================================================= */

@media (max-width: 759px) {
  .search-panel {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Dar ekranda kapsam kendi satırında tam genişlik */
  .search-scope {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
  }

  .search-from {
    flex: 1 1 100%;
  }

  .search-from-input {
    flex: 1 1 auto;
    width: auto;
  }

  .search-from-list {
    right: 0;
    width: auto;
  }

  .search-result > .avatar {
    margin-right: 0.6rem;
  }

  /* Dar ekranda şerit tek satır: açıklama yalnızca ekran okuyucuya, düğme ortada */
  .search-jump {
    justify-content: center;
    margin: 0 0.5rem 0.5rem;
    padding: 0.25rem;
  }

  .search-jump-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .mention-popover {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-width: none;
  }
}

/* Alçak pencerede (telefonda klavye açıkken) öneri listesi kısalır */
@media (max-height: 600px) {
  .mention-popover {
    max-height: 12rem;
  }
}

/* =========================================================
   7. Temaya özgü küçük farklar: yazıyor üç noktası her temada farklı
   ========================================================= */

/* Arcade: köşeli piksel noktalar, adım adım yanıp söner */
:root[data-skin="arcade"] .typing-dots::before,
:root[data-skin="arcade"] .typing-dots::after,
:root[data-skin="arcade"] .typing-dots > span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  -webkit-animation-name: typing-pixel;
  animation-name: typing-pixel;
  -webkit-animation-timing-function: steps(2, end);
  animation-timing-function: steps(2, end);
}

@-webkit-keyframes typing-pixel {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes typing-pixel {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Gece Frekansı: ekolayzır çubukları */
:root[data-skin="gece"] .typing-dots {
  height: 0.9rem;
}

:root[data-skin="gece"] .typing-dots::before,
:root[data-skin="gece"] .typing-dots::after,
:root[data-skin="gece"] .typing-dots > span {
  width: 0.2rem;
  height: 0.85rem;
  margin: 0 0.1rem;
  border-radius: 1px;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation-name: typing-eq;
  animation-name: typing-eq;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
}

@-webkit-keyframes typing-eq {
  0%, 100% { -webkit-transform: scaleY(0.35); transform: scaleY(0.35); }
  50% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}

@keyframes typing-eq {
  0%, 100% { -webkit-transform: scaleY(0.35); transform: scaleY(0.35); }
  50% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}

/* Turkuaz ve Bakır: yuvarlak bakır noktalar */
:root[data-skin="turkuaz"] .typing-line .typing-dots {
  color: var(--accent-2-text);
}

:root[data-skin="turkuaz"] .typing-dots::before,
:root[data-skin="turkuaz"] .typing-dots::after,
:root[data-skin="turkuaz"] .typing-dots > span {
  width: 0.42rem;
  height: 0.42rem;
}