.emailsCard {
max-width: 1100px;
}

.emailsHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 22px;
}

.emailsHeader h2 {
margin: 0;
font-size: 21px;
letter-spacing: -0.03em;
}

.emailsHeader p {
margin: 8px 0 0;
color: var(--wp-muted);
font-size: 14px;
line-height: 1.5;
}

.emailFilters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}

.emailFilter {
border: 1px solid var(--wp-border);
background: #fff;
color: var(--wp-text);
border-radius: 999px;
padding: 8px 12px;
font-size: 13px;
font-weight: 650;
cursor: pointer;
}

.emailFilter:hover,
.emailFilter.active {
background: var(--wp-orange-soft);
color: var(--wp-orange-dark);
border-color: #fdba74;
}

.emailThreadsList {
display: flex;
flex-direction: column;
gap: 14px;
}

.emailThreadItem {
border: 1px solid var(--wp-border);
border-radius: 16px;
padding: 18px;
background: #fff;
transition: 0.18s ease;
}

.emailThreadItem:hover {
background: var(--wp-orange-soft);
border-color: #fdba74;
}

.emailThreadTop {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 10px;
}

.emailSubject {
font-size: 16px;
font-weight: 700;
}

.emailMeta {
font-size: 13px;
color: var(--wp-muted);
}

.emailSummary {
font-size: 14px;
line-height: 1.55;
color: var(--wp-text);
margin-top: 10px;
}

.emailBadgeRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}

.emailBadge {
display: inline-flex;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: #f9fafb;
border: 1px solid var(--wp-border);
color: #374151;
font-size: 12px;
font-weight: 700;
}

.emptyState {
text-align: center;
padding: 44px;
color: var(--wp-muted);
}

.hidden {
display: none;
}

.emailMessagesView {
margin-top: 22px;
}

.emailMessagesHeader {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 18px;
}

.emailMessagesHeader h3 {
margin: 0;
font-size: 20px;
}

.emailMessagesHeader p {
margin: 6px 0 0;
color: var(--wp-muted);
font-size: 14px;
}

.emailMessagesList {
display: flex;
flex-direction: column;
gap: 14px;
}

.emailMessageItem {
border: 1px solid var(--wp-border);
border-radius: 16px;
padding: 16px;
background: #fff;
}

.emailMessageTop {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 10px;
}

.emailMessageDirection {
font-size: 13px;
font-weight: 700;
}

.emailMessageBody {
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}

.emailMessageAi {
margin-top: 14px;
padding: 12px;
border-radius: 14px;
background: var(--wp-orange-soft);
color: var(--wp-orange-dark);
font-size: 13px;
line-height: 1.5;
}

.emailThreadItem.open {
background: #fff;
border-color: #fdba74;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}

.emailThreadDetails {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--wp-border);
display: flex;
flex-direction: column;
gap: 14px;
}

.emailMessageItem {
border: 1px solid var(--wp-border);
border-radius: 16px;
padding: 16px;
background: #fff;
}

.emailMessageTop {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 10px;
}

.emailMessageDirection {
font-size: 13px;
font-weight: 700;
}

.emailMessageBody {
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}

.emailMessageAi {
margin-top: 14px;
padding: 12px;
border-radius: 14px;
background: var(--wp-orange-soft);
color: var(--wp-orange-dark);
font-size: 13px;
line-height: 1.5;
}

.replyBox {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--wp-border);
}

.replyTextarea {
width: 100%;
min-height: 120px;
border-radius: 16px;
border: 1px solid var(--wp-border);
padding: 14px;
resize: vertical;
font: inherit;
line-height: 1.5;
outline: none;
}

.replyTextarea:focus {
border-color: #fdba74;
}

.replyActions {
display: flex;
gap: 10px;
margin-top: 12px;
}

.toggleOriginalBtn {
margin-top: 12px;
border: none;
background: transparent;
color: var(--wp-orange-dark);
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 0;
}

.toggleOriginalBtn:hover {
opacity: 0.8;
}

.originalEmail {
margin-top: 14px;
padding: 14px;
border-radius: 14px;
background: #f9fafb;
border: 1px solid var(--wp-border);
}

.hidden {
display: none;
}

.mailLayout{
display:flex;
gap:24px;
height:calc(100vh - 220px);
}

.mailSidebar{
width:360px;
background:#fff;
border:1px solid #e7ded7;
border-radius:20px;
overflow:hidden;
display:flex;
flex-direction:column;
}

.mailSidebarTop{
padding:20px;
border-bottom:1px solid #eee;
}

.mailViewer{
flex:1;
background:#fff;
border:1px solid #e7ded7;
border-radius:20px;
overflow:hidden;
position:relative;
}

.emailThreadsList{
overflow-y:auto;
flex:1;
}

.emptyMailState{
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:#777;
}

.mailDetailView{
height:100%;
overflow-y:auto;
padding:24px;
}

.hidden{
display:none;
}

.emailThreadItem.selected {
border-color: #fdba74;
background: var(--wp-orange-soft);
}

.mailDetailHeader {
display: flex;
justify-content: space-between;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--wp-border);
margin-bottom: 20px;
}

.mailDetailHeader h2 {
margin: 6px 0 8px;
font-size: 24px;
letter-spacing: -0.03em;
}

.mailDetailHeader p {
margin: 0;
color: var(--wp-muted);
font-size: 14px;
line-height: 1.5;
}

.mailDetailType {
font-size: 12px;
font-weight: 800;
color: var(--wp-orange-dark);
text-transform: uppercase;
}

.mailDetailDate {
color: var(--wp-muted);
font-size: 13px;
white-space: nowrap;
}

.mailMessagesDetailList {
display: flex;
flex-direction: column;
gap: 14px;
}

.detailMessageItem {
border: 1px solid var(--wp-border);
border-radius: 16px;
padding: 16px;
background: #fff;
}

.detailMessageTop {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 12px;
font-size: 13px;
}

.detailMessageTop span {
color: var(--wp-muted);
}

.detailMessageBody {
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}

.detailAiSummary,
.detailAiReply {
margin: 12px 0;
padding: 12px;
border-radius: 14px;
background: var(--wp-orange-soft);
color: var(--wp-orange-dark);
font-size: 13px;
line-height: 1.5;
}

.mailDetailLoading {
color: var(--wp-muted);
}

.emailThreadItem{
padding:14px 16px;
border-bottom:1px solid #f1ece8;
cursor:pointer;
transition:0.2s ease;
background:#fff;
}

.emailThreadItem:hover{
background:#faf7f5;
}

.threadTop{
display:flex;
justify-content:space-between;
gap:12px;
margin-bottom:6px;
}

.threadSender{
font-size:14px;
font-weight:700;
color:#1f2937;
}

.threadDate{
font-size:12px;
color:#888;
white-space:nowrap;
}

.threadSubject{
font-size:14px;
font-weight:600;
margin-bottom:4px;
color:#111827;
}

.threadPreview{
font-size:13px;
color:#777;
line-height:1.4;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

.mailReplyBox {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--wp-border);
}

.mailReplyTextarea {
width: 100%;
min-height: 120px;
border-radius: 16px;
border: 1px solid var(--wp-border);
padding: 14px;
resize: vertical;
font: inherit;
line-height: 1.5;
outline: none;
}

.mailReplyTextarea:focus {
border-color: #fdba74;
}

.mailReplyActions {
display: flex;
gap: 10px;
margin-top: 12px;
}