/* TALKCHAT_R19C12R9R18R11_MESSAGES_BLOCKED_TABS_PARITY
   Mesajlar / Engelliler right-panel parity:
   - both states keep the same 3-column header geometry
   - the third column is the message search action slot
   - when Engelliler is active the slot stays reserved, so tabs never resize
   - list / blocked / empty surfaces share the same panel rhythm
*/

.ref-shell .right-panel #panelTabs:has(.message-tabs){
  min-height:38px;
  padding:0!important;
  border-bottom:1px solid var(--tc-border,#e5e7eb);
  background:var(--tc-panel,#fff);
}

.ref-shell .right-panel #panelTabs .message-tabs{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px!important;
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  align-items:stretch!important;
  background:var(--tc-panel,#fff)!important;
}

.ref-shell .right-panel #panelTabs .message-tabs > button{
  width:auto!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-right:1px solid var(--tc-border,#e5e7eb)!important;
  border-radius:0!important;
  background:var(--tc-panel,#fff)!important;
  color:var(--tc-muted,#64748b)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:500!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}

.ref-shell .right-panel #panelTabs .message-tabs > button.selected{
  background:var(--tc-elevated,#f8fafc)!important;
  color:var(--tc-text,#1f2937)!important;
  font-weight:700!important;
  box-shadow:inset 0 -2px #3b82f6!important;
}

.ref-shell .right-panel #panelTabs .message-tabs > button[data-message-search]{
  grid-column:3!important;
  width:44px!important;
  min-width:44px!important;
  padding:0!important;
  border-right:0!important;
  color:var(--tc-muted,#64748b)!important;
}

.ref-shell .right-panel #panelTabs .message-tabs > button[data-message-search] .material-symbols-outlined{
  width:20px!important;
  height:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
  line-height:1!important;
}

/* Engelliler has no search action in the current JS. Keep the same action slot
   as Mesajlar so the two tabs do not expand and jump horizontally. */
.ref-shell .right-panel #panelTabs .message-tabs:not(:has([data-message-search]))::after{
  content:"";
  grid-column:3;
  grid-row:1;
  width:44px;
  min-width:44px;
  height:38px;
  box-sizing:border-box;
  background:var(--tc-panel,#fff);
}

.ref-shell .right-panel #panelTabs .message-tabs small{
  min-width:16px!important;
  height:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0 4px!important;
  border:1px solid var(--tc-border,#e5e7eb)!important;
  border-radius:5px!important;
  background:transparent!important;
  color:var(--tc-muted,#64748b)!important;
  font-size:10px!important;
  line-height:14px!important;
  font-weight:600!important;
}

/* Keep both result states on the same full-width content surface. */
.ref-shell .right-panel #panelContent > [data-message-results]{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.ref-shell .right-panel #panelContent .conversation-list{
  width:100%;
}

.ref-shell .right-panel #panelContent .blocked-person{
  box-sizing:border-box;
  width:100%;
  min-height:64px;
  margin:0!important;
  padding:10px 8px!important;
  border:0!important;
  border-bottom:1px solid var(--tc-border,#e5e7eb)!important;
  border-radius:0!important;
  background:var(--tc-panel,#fff)!important;
}

.ref-shell .right-panel #panelContent .blocked-person > .ref-avatar{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
}

.ref-shell .right-panel #panelContent .blocked-person > button{
  min-height:30px;
  padding:5px 8px!important;
  border:1px solid rgba(239,68,68,.28)!important;
  border-radius:7px!important;
  background:rgba(239,68,68,.06)!important;
  color:#ef4444!important;
  font-size:11px!important;
  font-weight:650!important;
}

.ref-shell .right-panel #panelContent .notification-empty{
  min-height:170px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:32px 16px!important;
  color:var(--tc-muted,#64748b)!important;
}

.ref-shell .right-panel #panelContent .notification-empty > .material-symbols-outlined{
  margin:0!important;
  font-size:34px!important;
  line-height:1!important;
  color:var(--tc-muted,#64748b)!important;
}

.ref-shell .right-panel #panelContent .notification-empty > p{
  margin:0!important;
  font-size:13px!important;
  line-height:1.4!important;
  text-align:center!important;
}

/* Existing theme-full already owns dark tokens. These declarations only make
   the new parity surfaces explicit after all older component CSS. */
html.dark .ref-shell .right-panel #panelTabs:has(.message-tabs),
html.dark .ref-shell .right-panel #panelTabs .message-tabs,
html.dark .ref-shell .right-panel #panelTabs .message-tabs:not(:has([data-message-search]))::after{
  background:var(--tc-panel)!important;
  border-color:var(--tc-border)!important;
}

html.dark .ref-shell .right-panel #panelTabs .message-tabs > button{
  background:var(--tc-panel)!important;
  color:var(--tc-muted)!important;
  border-color:var(--tc-border)!important;
}

html.dark .ref-shell .right-panel #panelTabs .message-tabs > button.selected{
  background:var(--tc-elevated)!important;
  color:var(--tc-text)!important;
}

html.dark .ref-shell .right-panel #panelContent .blocked-person{
  background:var(--tc-panel)!important;
  border-bottom-color:var(--tc-border)!important;
}

@media (max-width:767px){
  .ref-shell .right-panel #panelTabs .message-tabs{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px!important;
  }

  .ref-shell .right-panel #panelTabs .message-tabs > button[data-message-search],
  .ref-shell .right-panel #panelTabs .message-tabs:not(:has([data-message-search]))::after{
    width:42px!important;
    min-width:42px!important;
  }
}