/* PS5 Arena V17 — Email dashboard */

/* ── EMAIL DASHBOARD TABS ──────────────────────────────────── */
.email-tabs{display:flex;gap:4px;border-bottom:.5px solid var(--border);margin-bottom:14px}
.email-tab{padding:7px 16px;font-size:13px;cursor:pointer;
  border-bottom:2px solid transparent;color:var(--tx2);margin-bottom:-.5px}
.email-tab.active{color:var(--tx1);border-bottom-color:var(--blue);font-weight:500}
.email-panel{display:none}.email-panel.active{display:block}

/* ── EMAIL LIST ─────────────────────────────────────────────── */
.email-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-bottom:.5px solid var(--border);cursor:pointer;transition:background .1s}
.email-row:hover{background:var(--hover);margin:0 -16px;padding-left:16px;padding-right:16px}
.email-row:last-child{border-bottom:none}
.email-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;flex-shrink:0}
.email-main{flex:1;min-width:0}
.email-from{font-size:.84rem;font-weight:600;color:var(--tx1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-subject{font-size:.8rem;color:var(--tx2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-preview{font-size:.74rem;color:var(--tx3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-time{font-size:.7rem;color:var(--tx3);flex-shrink:0;margin-top:2px}
.email-badge{display:inline-flex;padding:1px 6px;border-radius:4px;font-size:.68rem;
  font-weight:600;margin-left:6px}
.eb-in{background:rgba(59,130,246,.15);color:var(--blue)}
.eb-out{background:rgba(34,197,94,.12);color:var(--green)}
.eb-fail{background:rgba(239,68,68,.12);color:var(--red)}
.eb-linked{background:rgba(245,158,11,.12);color:#f59e0b}

/* ── COMPOSE PANEL ─────────────────────────────────────────── */
.compose-wrap{background:var(--card);border:.5px solid var(--border);
  border-radius:12px;padding:18px 20px}
.compose-title{font-size:.9rem;font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:8px}
.compose-body-area{width:100%;min-height:140px;resize:vertical;
  background:var(--surface);border:.5px solid var(--border);border-radius:8px;
  padding:10px 12px;font-size:.84rem;color:var(--tx1);font-family:inherit;
  line-height:1.6}
.compose-body-area:focus{outline:none;border-color:var(--blue)}

/* ── EMAIL THREAD VIEW ─────────────────────────────────────── */
.thread-msg{background:var(--card);border:.5px solid var(--border);
  border-radius:10px;padding:12px 16px;margin-bottom:8px}
.thread-msg.inbound{border-left:3px solid var(--blue)}
.thread-msg.outbound{border-left:3px solid var(--green)}
.thread-msg-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;font-size:.76rem;color:var(--tx2)}
.thread-msg-body{font-size:.82rem;color:var(--tx1);line-height:1.65;
  white-space:pre-wrap;word-break:break-word}

/* ── LINK BOOKING BUTTON ───────────────────────────────────── */
.link-booking-btn{font-size:.72rem;padding:2px 8px;border-radius:4px;
  background:rgba(245,158,11,.1);color:#f59e0b;border:.5px solid rgba(245,158,11,.3);
  cursor:pointer;margin-top:4px;display:inline-block}

/* ── IMAP ERROR BANNER ─────────────────────────────────────── */
.imap-warn{background:rgba(245,158,11,.08);border:.5px solid rgba(245,158,11,.3);
  border-radius:8px;padding:9px 12px;font-size:.78rem;color:#f59e0b;margin-bottom:10px}

@media(max-width:600px){
  .email-row{gap:8px}
  .email-avatar{width:30px;height:30px;font-size:.72rem}
  .compose-wrap{padding:12px 14px}
}