/* Same card and 248px inbox as the four-card study. All motion stays in rows. */
.compact-email-page{align-items:center;gap:12px}
.compact-email-page .compact-email-card{flex:none;width:100%;max-width:356.5px}
.compact-study-back{display:inline-flex;align-items:center;gap:8px;width:100%;max-width:356.5px;min-height:44px;padding:8px 4px;font-size:12px;color:var(--muted);text-decoration:none;transition:color .2s ease}
.compact-study-back:hover{color:var(--ink)}
.compact-study-back:focus-visible{outline:2px solid #cce6f7;outline-offset:3px;border-radius:8px}
.compact-email-panel{flex:0 0 248px;height:248px;display:flex;flex-direction:column}
.compact-email-panel .mail-header{flex:none}
#compact-mail-count{font-weight:600;color:#e7edf2;font-variant-numeric:tabular-nums}
#compact-mail-list{position:relative;flex:1;min-height:0;overflow:hidden;overflow-anchor:none}
.compact-mail-row{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:7px;height:25%;padding:1px 0 5px;border-bottom:1px solid #ffffff13;transform-origin:center;isolation:isolate}
.compact-mail-row::before{content:'';position:absolute;inset:0 0 4px;border-radius:6px;background:linear-gradient(90deg,#d5edff0c,transparent);opacity:0;pointer-events:none;z-index:-1}
.compact-mail-row[data-state=receiving]::before,.compact-mail-row[data-state=processing]::before{opacity:1}
.compact-mail-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.compact-mail-name,.compact-mail-subject{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.compact-mail-name{font-size:11px;line-height:13px;font-weight:600;color:#edf1f4}
.compact-mail-subject{font-size:10px;line-height:12px;color:#aeb7c0}
.compact-mail-status{display:flex;align-items:center;justify-content:flex-start;gap:4px;flex:0 0 74px;height:22px;color:#b8c5d0;white-space:nowrap}
.compact-mail-icon{display:block;flex:0 0 16px;width:16px;height:16px;overflow:hidden}
.compact-mail-state{font-size:9px;line-height:12px;font-weight:500;letter-spacing:.01em}
.compact-mail-row[data-state=sent] .compact-mail-status{color:#a1ddb8}
.compact-mail-row[data-state=draft] .compact-mail-status{color:#f0c58f}
@media(max-width:360px){
  .compact-mail-row{gap:5px}
  .compact-mail-status{flex-basis:69px;gap:3px}
}