:root{
	--vlab-primary:#3b6fe0;
	--vlab-primary-dark:#2f5bc4;
	--vlab-border:#e6e8ee;
	--vlab-bg:#f5f6fa;
	--vlab-panel:#ffffff;
	--vlab-text:#1c2130;
	--vlab-muted:#8a90a2;
	--vlab-unread-bg:#f2f6ff;
	--vlab-danger:#e0473e;
	--vlab-radius:10px;
}
*{ box-sizing:border-box; }
.vlab-mail-app{
	position:fixed; inset:0; width:100vw; height:100vh;
	display:flex; flex-direction:column;
	background:var(--vlab-bg); color:var(--vlab-text);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:14px;
	z-index:99999;
}

/* ---------- Login screen ---------- */
.vlab-mail-login-screen{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,#eef2ff 0%,#f5f6fa 60%);
}
.vlab-mail-login-box{
	background:var(--vlab-panel); border:1px solid var(--vlab-border); border-radius:14px;
	padding:36px 34px; width:380px; max-width:90vw; box-shadow:0 12px 40px rgba(30,40,80,.08);
}
.vlab-mail-login-box h2{ margin:0 0 6px; font-size:20px; font-weight:700; }
.vlab-mail-login-sub{ color:var(--vlab-muted); font-size:13px; margin:0 0 20px; }
.vlab-mail-login-box label{ display:block; font-size:12.5px; font-weight:600; color:#555b6b; margin:14px 0 5px; }
.vlab-mail-login-box input[type=email],
.vlab-mail-login-box input[type=password],
.vlab-mail-login-box input[type=text]{
	width:100%; padding:10px 12px; border:1.5px solid var(--vlab-border); border-radius:8px; font-size:14px;
	transition:border-color .15s;
}
.vlab-mail-login-box input:focus{ outline:none; border-color:var(--vlab-primary); }
.vlab-mail-remember{ display:flex !important; align-items:center; gap:7px; font-size:13px; margin-top:16px !important; color:var(--vlab-text) !important; font-weight:400 !important; }
.vlab-mail-login-error{ color:var(--vlab-danger); font-size:13px; min-height:18px; margin-top:10px; }
.vlab-mail-current-user{ font-size:13px; color:var(--vlab-muted); margin-left:auto; padding-right:6px; }

.vlab-mail-inbox{ display:flex; flex-direction:column; width:100%; height:100%; }

/* ---------- Buttons ---------- */
.vlab-mail-btn{
	display:inline-flex; align-items:center; gap:6px;
	background:#fff; border:1px solid var(--vlab-border); color:var(--vlab-text);
	padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13.5px; text-decoration:none;
	font-weight:500; transition:background .12s, box-shadow .12s;
}
.vlab-mail-btn:hover{ background:#f2f3f7; }
.vlab-mail-btn-primary{ background:var(--vlab-primary); border-color:var(--vlab-primary); color:#fff; box-shadow:0 2px 6px rgba(59,111,224,.28); }
.vlab-mail-btn-primary:hover{ background:var(--vlab-primary-dark); }
.vlab-mail-link-btn{ background:none;border:none;color:var(--vlab-primary);cursor:pointer;padding:0;font-size:13px; font-weight:600; }

.vlab-mail-icon-btn{
	background:none; border:none; cursor:pointer; font-size:14px; padding:3px 5px; border-radius:5px;
	opacity:.55; transition:opacity .12s, background .12s;
}
.vlab-mail-icon-btn:hover{ opacity:1; background:rgba(0,0,0,.05); }

/* ---------- Toolbar ---------- */
.vlab-mail-toolbar{
	display:flex; align-items:center; gap:10px;
	padding:12px 20px; background:var(--vlab-panel); border-bottom:1px solid var(--vlab-border);
	flex-shrink:0;
}
.vlab-mail-status{ color:var(--vlab-muted); font-size:12.5px; }

.vlab-mail-body{ flex:1; display:flex; min-height:0; }

/* ---------- Folders sidebar ---------- */
.vlab-mail-folders{
	width:210px; flex-shrink:0; background:var(--vlab-panel); border-right:1px solid var(--vlab-border);
	overflow-y:auto; padding:14px 10px;
}
.vlab-mail-folder-item{
	padding:9px 12px; cursor:pointer; font-size:13.5px; color:var(--vlab-text);
	display:flex; align-items:center; gap:10px; border-radius:8px; margin-bottom:2px;
	transition:background .12s;
}
.vlab-mail-folder-icon{ font-size:15px; width:18px; text-align:center; }
.vlab-mail-folder-item:hover{ background:var(--vlab-bg); }
.vlab-mail-folder-item.active{ background:var(--vlab-unread-bg); font-weight:600; color:var(--vlab-primary-dark); }

/* ---------- Message list ---------- */
.vlab-mail-list{
	width:360px; flex-shrink:0; border-right:1px solid var(--vlab-border);
	overflow-y:auto; background:var(--vlab-panel);
}
.vlab-mail-msg-item{
	display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--vlab-border); cursor:pointer;
	transition:background .12s;
}
.vlab-mail-msg-item:hover{ background:#fafbfd; }
.vlab-mail-msg-item.unread{ background:var(--vlab-unread-bg); }
.vlab-mail-msg-item.active{ background:#e7edff; }
.vlab-mail-msg-item.unread .vlab-mail-msg-from{ font-weight:700; }
.vlab-mail-msg-item.unread .vlab-mail-msg-subject{ font-weight:600; color:var(--vlab-text); }

.vlab-mail-msg-avatar{
	flex-shrink:0; width:36px; height:36px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-weight:700; font-size:14px;
}
.vlab-mail-msg-main{ flex:1; min-width:0; }
.vlab-mail-msg-top-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.vlab-mail-msg-from{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vlab-mail-msg-date{ font-size:11px; color:var(--vlab-muted); flex-shrink:0; }
.vlab-mail-msg-subject{
	font-size:13px; color:#555b6b; margin-top:2px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vlab-mail-msg-actions{
	display:flex; gap:2px; margin-top:6px; opacity:0; transition:opacity .12s;
}
.vlab-mail-msg-item:hover .vlab-mail-msg-actions{ opacity:1; }

.vlab-mail-load-more{ padding:0 12px; }

/* ---------- Reader ---------- */
.vlab-mail-reader{
	flex:1; overflow-y:auto; padding:28px 36px; background:var(--vlab-panel);
}
.vlab-mail-reader-empty{ margin:auto; text-align:center; color:var(--vlab-muted); padding-top:100px; font-size:14px; }
.vlab-mail-reader-subject{ font-size:21px; font-weight:700; margin-bottom:8px; letter-spacing:-.2px; }
.vlab-mail-reader-meta{ color:var(--vlab-muted); font-size:13px; margin-bottom:20px; line-height:1.7; }
.vlab-mail-reader-meta strong{ color:var(--vlab-text); font-weight:600; }
.vlab-mail-reader-content{ line-height:1.6; font-size:14.5px; word-wrap:break-word; }
.vlab-mail-reader-content img{ max-width:100%; height:auto; }
.vlab-mail-reader-actions{ margin-top:24px; display:flex; gap:8px; border-top:1px solid var(--vlab-border); padding-top:18px; }

.vlab-mail-attachments{ margin-top:18px; border-top:1px solid var(--vlab-border); padding-top:14px; }
.vlab-mail-attachment-chip{
	display:inline-flex; align-items:center; gap:6px;
	background:var(--vlab-bg); border:1px solid var(--vlab-border);
	padding:7px 12px; border-radius:8px; margin:4px 6px 4px 0; font-size:13px;
	text-decoration:none; color:var(--vlab-text); transition:background .12s;
}
.vlab-mail-attachment-chip:hover{ background:#eef0f5; }

.vlab-mail-loading{ text-align:center; color:var(--vlab-muted); padding:26px; font-size:13px; }

/* ---------- Modals ---------- */
.vlab-mail-modal{
	position:fixed; inset:0; background:rgba(20,25,45,.45);
	display:flex; align-items:center; justify-content:center; z-index:100000;
}
.vlab-mail-modal-inner{
	background:#fff; width:640px; max-width:94vw; max-height:88vh;
	border-radius:14px; display:flex; flex-direction:column; overflow:hidden;
	box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.vlab-mail-modal-header{
	display:flex; justify-content:space-between; align-items:center;
	padding:16px 20px; border-bottom:1px solid var(--vlab-border); font-weight:700; font-size:15px;
}
.vlab-mail-modal-close{ background:none;border:none;font-size:20px;cursor:pointer;color:var(--vlab-muted); line-height:1; }
.vlab-mail-modal-close:hover{ color:var(--vlab-text); }
.vlab-mail-modal-body{ padding:18px 20px; overflow-y:auto; }
.vlab-mail-modal-body label{ display:block; font-size:12.5px; font-weight:600; color:#555b6b; margin:12px 0 5px; }
.vlab-mail-modal-body input[type=text]{
	width:100%; padding:9px 11px; border:1.5px solid var(--vlab-border); border-radius:8px; font-size:14px;
}
.vlab-mail-modal-body input[type=text]:focus{ outline:none; border-color:var(--vlab-primary); }
.vlab-mail-editable{
	min-height:170px; border:1.5px solid var(--vlab-border); border-radius:8px;
	padding:12px; font-size:14px; line-height:1.55; overflow-y:auto;
}
.vlab-mail-editable:focus{ outline:none; border-color:var(--vlab-primary); }
.vlab-mail-cc-bcc-toggle{ margin-top:8px; }

.vlab-mail-attach-zone{
	margin-top:16px; border:2px dashed var(--vlab-border); border-radius:10px;
	padding:18px; text-align:center; font-size:13px; color:var(--vlab-muted);
}
.vlab-mail-attach-zone.dragover{ border-color:var(--vlab-primary); background:var(--vlab-unread-bg); }
.vlab-mail-attach-list{ list-style:none; margin:10px 0 0; padding:0; }
.vlab-mail-attach-list li{
	display:flex; justify-content:space-between; align-items:center;
	background:var(--vlab-bg); border:1px solid var(--vlab-border);
	border-radius:8px; padding:7px 12px; margin-bottom:6px; font-size:13px;
}
.vlab-mail-attach-remove{ background:none;border:none;color:var(--vlab-danger);cursor:pointer;font-size:15px; }

.vlab-mail-compose-actions{ margin-top:18px; display:flex; align-items:center; gap:12px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
	.vlab-mail-folders{ display:none; }
	.vlab-mail-list{ width:280px; }
}
@media (max-width: 640px){
	.vlab-mail-body{ flex-direction:column; }
	.vlab-mail-list, .vlab-mail-folders{ width:100%; height:220px; }
	.vlab-mail-reader{ flex:1; padding:20px; }
}