/* ════════════════════════════════════════════════════════════════
   WINR v24 — Inbox polish (DM threads + notifications panel)
   Notion Week 2: "Inbox UI — DM threads + notifications panel"

   Loads after inbox.css. Atomic layer — only adds, never overrides
   Tony's structural CSS. Brand-monochrome aware.
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar — convo row hover ───────────────────────────────── */
.inbox-view .convo-row{
  /* Tony's baseline transitions all 250ms. Adding subtle motion. */
  transform:translateX(0)
}
.inbox-view .convo-row:hover{
  background:rgba(255,255,255,0.025);
  border-color:rgba(255,255,255,0.05);
  transform:translateX(2px)
}
.inbox-view .convo-row.active,
.inbox-view .convo-row.selected{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
  transform:translateX(2px)
}
.inbox-view .convo-row.active::before,
.inbox-view .convo-row.selected::before{
  content:'';
  position:absolute;
  left:-12px;
  top:18%;
  height:64%;
  width:3px;
  background:#FFFFFF;
  border-radius:0 3px 3px 0;
  animation:inboxIndicatorIn 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28) both
}
@keyframes inboxIndicatorIn{
  from { opacity:0; transform:scaleY(0) }
  to   { opacity:1; transform:scaleY(1) }
}

/* Convo row entrance — staggered fade on inbox open */
.inbox-view .convo-list .convo-row{
  animation:convoRowIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both
}
.inbox-view .convo-list .convo-row:nth-child(1) { animation-delay:0ms }
.inbox-view .convo-list .convo-row:nth-child(2) { animation-delay:35ms }
.inbox-view .convo-list .convo-row:nth-child(3) { animation-delay:70ms }
.inbox-view .convo-list .convo-row:nth-child(4) { animation-delay:105ms }
.inbox-view .convo-list .convo-row:nth-child(5) { animation-delay:140ms }
.inbox-view .convo-list .convo-row:nth-child(6) { animation-delay:175ms }
.inbox-view .convo-list .convo-row:nth-child(n+7) { animation-delay:210ms }
@keyframes convoRowIn{
  from { opacity:0; transform:translateX(-6px) }
  to   { opacity:1; transform:translateX(0) }
}

/* ── Filter chips — selected + hover ─────────────────────────── */
.inbox-view .inbox-filter-chip{
  transition:background var(--duration) ease,
             border-color var(--duration) ease,
             color var(--duration) ease,
             transform 200ms cubic-bezier(0.22, 1, 0.36, 1)
}
.inbox-view .inbox-filter-chip:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.08);
  color:#FFFFFF;
  transform:translateY(-1px)
}
.inbox-view .inbox-filter-chip.active{
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
  box-shadow:0 4px 14px rgba(255,255,255,0.18)
}

/* ── Composer — focus glow ───────────────────────────────────── */
.inbox-view .composer-box{
  transition:background 200ms ease,
             border-color 200ms ease,
             box-shadow 240ms ease
}
.inbox-view .composer-box:focus-within{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 0 0 1px rgba(255,255,255,0.08),
             0 0 28px rgba(255,255,255,0.04)
}

/* ── Message bubble entrance refinement ──────────────────────── */
.inbox-view .message{
  /* Tony's bubblePopIn is 200ms. Tightening the entrance translateY for
     a less-jumpy feel — keeps the same cubic-bezier rhythm. */
  animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)
}

/* ── Proof-card / trade / link-preview hover lift ────────────── */
.inbox-view .msg-trade,
.inbox-view .msg-link-preview,
.inbox-view .msg-poll,
.inbox-view .msg-file,
.inbox-view .msg-code{
  transition:transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
             border-color 240ms ease,
             box-shadow 240ms ease
}
.inbox-view .msg-trade:hover,
.inbox-view .msg-link-preview:hover,
.inbox-view .msg-poll:hover,
.inbox-view .msg-file:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 8px 24px rgba(0,0,0,0.3)
}

/* ── Voice message — gentle waveform animation when present ──── */
.inbox-view .msg-voice{
  transition:background 200ms ease
}
.inbox-view .msg-voice:hover{
  background:rgba(255,255,255,0.04)
}

/* ── Date divider — softer treatment ─────────────────────────── */
.inbox-view .date-divider{
  opacity:0.6;
  transition:opacity 200ms ease
}
.inbox-view .date-divider:hover{
  opacity:0.9
}

/* ── Details panel (right side) ──────────────────────────────── */
.inbox-view .inbox-details{
  animation:inboxDetailsIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both
}
@keyframes inboxDetailsIn{
  from { opacity:0; transform:translateX(12px) }
  to   { opacity:1; transform:translateX(0) }
}

.inbox-view .details-cta-circle{
  transition:transform 240ms cubic-bezier(0.22, 1, 0.36, 1)
}
.inbox-view .details-cta-circle:hover{
  transform:translateY(-2px) scale(1.04)
}

.inbox-view .social-tree-link{
  transition:transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
             background 200ms ease,
             border-color 200ms ease
}
.inbox-view .social-tree-link:hover{
  transform:translateX(3px);
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.12)
}

/* Badge row — subtle bounce on hover (Tony has translateY already in 3d) */
.inbox-view .badge-3d{
  transition:transform 300ms cubic-bezier(0.22, 1, 0.36, 1)
}
.inbox-view .badge-3d:hover{
  transform:translateY(-2px) scale(1.06)
}

/* ── Panel toggle (collapse details panel) ───────────────────── */
.inbox-view .panel-toggle{
  transition:color 200ms ease,
             background 200ms ease,
             transform 200ms cubic-bezier(0.22, 1, 0.36, 1)
}
.inbox-view .panel-toggle:hover{
  color:#FFFFFF;
  background:rgba(255,255,255,0.1);
  transform:translateY(-50%) scale(1.06)
}

/* ── Thread header actions ───────────────────────────────────── */
.inbox-view .thread-header-actions button{
  transition:background 200ms ease,
             color 200ms ease,
             transform 200ms cubic-bezier(0.22, 1, 0.36, 1)
}
.inbox-view .thread-header-actions button:hover{
  background:rgba(255,255,255,0.06);
  color:#FFFFFF;
  transform:scale(1.06)
}

/* ── Typing indicator — keep alive feel ──────────────────────── */
.inbox-view .typing-indicator{
  opacity:0.7
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .inbox-view .convo-list .convo-row,
  .inbox-view .inbox-details{
    animation:none
  }
  .inbox-view *{
    transition-duration:0ms !important
  }
}