Suyash091/agentic.email
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

inbox streamlining

Browse source
This commit is contained in:
debu-2 2026-10-05 22:47:56 +05:30
parent 220168abd0
commit 79188e0f59
2 changed files with 193 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

108
frontend/src/components/MailDetail.jsx
View file

@ -15,13 +15,16 @@ import {
ShieldAlert, ShieldAlert,
Trash2, Trash2,
ChevronDown, ChevronDown,
FileText,
} from "lucide-react"; } from "lucide-react";
import AgentSpark from "./AgentSpark"; import AgentSpark from "./AgentSpark";
import SenderAvatar from "./SenderAvatar"; import SenderAvatar from "./SenderAvatar";
import { addressText, senderDisplayName } from "../utils/senderAvatar"; import { addressText, senderDisplayName } from "../utils/senderAvatar";
import { attachmentCount } from "../utils/inboxSignals"; import { attachmentCount } from "../utils/inboxSignals";
const ICON = { size: 16, strokeWidth: 1.7 }; const TOOLBAR_ICON = { size: 16, strokeWidth: 1.7 };
const ACTION_ICON = { size: 14, strokeWidth: 1.7 };
const REPLY_ICON = { size: 14, strokeWidth: 1.7 };
function joinAddresses(value) { function joinAddresses(value) {
if (!value) return ""; if (!value) return "";
@ -121,6 +124,20 @@ function ToolbarButton({ title, label, onClick, disabled, destructive, children
); );
} }
function MessageAction({ title, label, onClick, active, children }) {
return (
<button
type="button"
className={`mail-detail-message-action${active ? " active" : ""}`}
title={title}
aria-label={label || title}
onClick={onClick}
>
{children}
</button>
);
}
export default function MailDetail({ export default function MailDetail({
email, email,
loading, loading,
@ -160,17 +177,17 @@ export default function MailDetail({
<header className="mail-detail-toolbar"> <header className="mail-detail-toolbar">
<div className="mail-detail-toolbar-group"> <div className="mail-detail-toolbar-group">
<ToolbarButton title="Back to inbox" label="Back" onClick={onClose}> <ToolbarButton title="Back to inbox" label="Back" onClick={onClose}>
<ArrowLeft size={16} strokeWidth={1.7} /> <ArrowLeft {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
</div> </div>
{email && ( {email && (
<> <>
<div className="mail-detail-toolbar-group"> <div className="mail-detail-toolbar-group">
<ToolbarButton title="Archive" onClick={onArchive} disabled={busy}> <ToolbarButton title="Archive" onClick={onArchive} disabled={busy}>
<Archive {...ICON} /> <Archive {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
<ToolbarButton title="Report spam" onClick={onSpam} disabled={busy}> <ToolbarButton title="Report spam" onClick={onSpam} disabled={busy}>
<ShieldAlert {...ICON} /> <ShieldAlert {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
<ToolbarButton <ToolbarButton
title={mailbox === "trash" ? "Delete permanently" : "Delete"} title={mailbox === "trash" ? "Delete permanently" : "Delete"}
@ -178,7 +195,7 @@ export default function MailDetail({
disabled={busy} disabled={busy}
destructive destructive
> >
<Trash2 {...ICON} /> <Trash2 {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
</div> </div>
<span className="mail-detail-toolbar-sep" aria-hidden="true" /> <span className="mail-detail-toolbar-sep" aria-hidden="true" />
@ -188,22 +205,22 @@ export default function MailDetail({
onClick={() => onToggleRead(!email.is_read)} onClick={() => onToggleRead(!email.is_read)}
disabled={busy} disabled={busy}
> >
{email.is_read ? <Mail {...ICON} /> : <MailOpen {...ICON} />} {email.is_read ? <Mail {...TOOLBAR_ICON} /> : <MailOpen {...TOOLBAR_ICON} />}
</ToolbarButton> </ToolbarButton>
<ToolbarButton title="Snooze" onClick={onSnooze} disabled={busy}> <ToolbarButton title="Snooze" onClick={onSnooze} disabled={busy}>
<Clock {...ICON} /> <Clock {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
</div> </div>
<span className="mail-detail-toolbar-sep" aria-hidden="true" /> <span className="mail-detail-toolbar-sep" aria-hidden="true" />
<div className="mail-detail-toolbar-group"> <div className="mail-detail-toolbar-group">
<ToolbarButton title="Move to folder" onClick={onMove} disabled={busy}> <ToolbarButton title="Move to folder" onClick={onMove} disabled={busy}>
<FolderInput {...ICON} /> <FolderInput {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
<ToolbarButton title="Apply labels" onClick={onMove} disabled={busy}> <ToolbarButton title="Apply labels" onClick={onMove} disabled={busy}>
<Tag {...ICON} /> <Tag {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
<ToolbarButton title="More actions" onClick={onMove} disabled={busy}> <ToolbarButton title="More actions" onClick={onMove} disabled={busy}>
<MoreHorizontal {...ICON} /> <MoreHorizontal {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
</div> </div>
{mailbox === "trash" && ( {mailbox === "trash" && (
@ -211,7 +228,7 @@ export default function MailDetail({
<span className="mail-detail-toolbar-sep" aria-hidden="true" /> <span className="mail-detail-toolbar-sep" aria-hidden="true" />
<div className="mail-detail-toolbar-group"> <div className="mail-detail-toolbar-group">
<ToolbarButton title="Restore from trash" onClick={onRestore} disabled={busy}> <ToolbarButton title="Restore from trash" onClick={onRestore} disabled={busy}>
<RotateCcw {...ICON} /> <RotateCcw {...TOOLBAR_ICON} />
</ToolbarButton> </ToolbarButton>
</div> </div>
</> </>
@ -225,16 +242,14 @@ export default function MailDetail({
{email && !loading && ( {email && !loading && (
<div className="mail-detail-sheet"> <div className="mail-detail-sheet">
<div className="mail-detail-content">
<div className="mail-detail-reading-column">
<div className="mail-detail-subject-row"> <div className="mail-detail-subject-row">
<div className="mail-detail-subject-main">
<h1>{email.subject?.trim() || "(No subject)"}</h1> <h1>{email.subject?.trim() || "(No subject)"}</h1>
<div className="mail-detail-labels"> <div className="mail-detail-labels">
<span className="mail-detail-label-pill">{mailboxLabel(mailbox)}</span> <span className="mail-detail-label-pill">{mailboxLabel(mailbox)}</span>
{email.is_starred && <span className="mail-detail-label-pill starred">Starred</span>} {email.is_starred && <span className="mail-detail-label-pill starred">Starred</span>}
</div> </div>
</div> </div>
<div className="mail-detail-ai-chips"> <div className="mail-detail-ai-chips">
<button type="button" className="mail-detail-ai-chip" onClick={onSummarizeThread}> <button type="button" className="mail-detail-ai-chip" onClick={onSummarizeThread}>
<AgentSpark /> {summarizeLabel} <AgentSpark /> {summarizeLabel}
@ -242,19 +257,22 @@ export default function MailDetail({
<button type="button" className="mail-detail-ai-chip" onClick={onExtractActions}> <button type="button" className="mail-detail-ai-chip" onClick={onExtractActions}>
<AgentSpark /> Extract actions <AgentSpark /> Extract actions
</button> </button>
{files > 0 && ( {files > 0 ? (
<button type="button" className="mail-detail-ai-chip" onClick={onAnalyzeAttachment}> <button type="button" className="mail-detail-ai-chip" onClick={onAnalyzeAttachment}>
<AgentSpark /> Analyze attachment <AgentSpark /> Analyze attachment
</button> </button>
)} ) : null}
</div>
</div> </div>
<div className="mail-detail-sender-row"> <div className="mail-detail-message-header">
<SenderAvatar email={email} /> <SenderAvatar email={email} />
<div className="mail-detail-sender-meta"> <div className="mail-detail-sender-meta">
<div className="mail-detail-sender-line"> <div className="mail-detail-sender-line">
<strong>{sender?.name}</strong> <strong>{sender?.name}</strong>
{sender?.address && <span className="mail-detail-sender-email">&lt;{sender.address}&gt;</span>} {sender?.address && (
<span className="mail-detail-sender-email">&lt;{sender.address}&gt;</span>
)}
</div> </div>
<button <button
type="button" type="button"
@ -269,36 +287,36 @@ export default function MailDetail({
<div className="mail-detail-recipient-details"> <div className="mail-detail-recipient-details">
<small>From: {joinAddresses(email.sender) || sender?.display}</small> <small>From: {joinAddresses(email.sender) || sender?.display}</small>
<small>To: {joinAddresses(email.recipients || email.to) || "Undisclosed"}</small> <small>To: {joinAddresses(email.recipients || email.to) || "Undisclosed"}</small>
{joinAddresses(email.cc) && <small>Cc: {joinAddresses(email.cc)}</small>} {joinAddresses(email.cc) ? <small>Cc: {joinAddresses(email.cc)}</small> : null}
{joinAddresses(email.bcc) && <small>Bcc: {joinAddresses(email.bcc)}</small>} {joinAddresses(email.bcc) ? <small>Bcc: {joinAddresses(email.bcc)}</small> : null}
<small>Date: {time.absolute}{time.relative ? ` (${time.relative})` : ""}</small> <small>Date: {time.absolute}{time.relative ? ` (${time.relative})` : ""}</small>
<small>Subject: {email.subject?.trim() || "(No subject)"}</small> <small>Subject: {email.subject?.trim() || "(No subject)"}</small>
</div> </div>
)} )}
</div> </div>
<div className="mail-detail-sender-actions"> <div className="mail-detail-message-header-actions">
<time dateTime={email.created_at}> <time dateTime={email.created_at}>
{time.absolute} {time.absolute}
{time.relative ? ` (${time.relative})` : ""} {time.relative ? ` (${time.relative})` : ""}
</time> </time>
<button <MessageAction
type="button"
className={`mail-detail-icon-btn${email.is_starred ? " active" : ""}`}
title={email.is_starred ? "Unstar" : "Star"} title={email.is_starred ? "Unstar" : "Star"}
aria-label={email.is_starred ? "Unstar" : "Star"} label={email.is_starred ? "Unstar" : "Star"}
active={email.is_starred}
onClick={() => onToggleStar?.(!email.is_starred)} onClick={() => onToggleStar?.(!email.is_starred)}
> >
<Star size={16} strokeWidth={1.75} /> <Star {...ACTION_ICON} />
</button> </MessageAction>
<button type="button" className="mail-detail-icon-btn" title="Reply" onClick={onReply}> <MessageAction title="Reply" onClick={onReply}>
<Reply size={16} strokeWidth={1.75} /> <Reply {...ACTION_ICON} />
</button> </MessageAction>
<button type="button" className="mail-detail-icon-btn" title="More actions" onClick={onMove}> <MessageAction title="More actions" onClick={onMove}>
<MoreHorizontal size={16} strokeWidth={1.75} /> <MoreHorizontal {...ACTION_ICON} />
</button> </MessageAction>
</div> </div>
</div> </div>
<div className={`mail-detail-message-content${body?.mode === "html" ? " is-html" : ""}`}>
<div className={`mail-detail-body${body?.mode === "html" ? " is-html" : " is-text"}`}> <div className={`mail-detail-body${body?.mode === "html" ? " is-html" : " is-text"}`}>
{body?.mode === "html" ? ( {body?.mode === "html" ? (
<div className="mail-detail-body-html" dangerouslySetInnerHTML={{ __html: body.value }} /> <div className="mail-detail-body-html" dangerouslySetInnerHTML={{ __html: body.value }} />
@ -311,7 +329,9 @@ export default function MailDetail({
<div className="mail-detail-attachments" aria-label="Attachments"> <div className="mail-detail-attachments" aria-label="Attachments">
{attachments.map((file) => ( {attachments.map((file) => (
<div key={`${file.filename}-${file.size}`} className="mail-detail-attachment"> <div key={`${file.filename}-${file.size}`} className="mail-detail-attachment">
<span className="mail-detail-attachment-icon">📄</span> <span className="mail-detail-attachment-icon" aria-hidden="true">
<FileText size={18} strokeWidth={1.7} />
</span>
<div> <div>
<strong>{file.filename}</strong> <strong>{file.filename}</strong>
<small>{file.content_type || "File"} · {formatFileSize(file.size)}</small> <small>{file.content_type || "File"} · {formatFileSize(file.size)}</small>
@ -326,20 +346,22 @@ export default function MailDetail({
)} )}
</div> </div>
<footer className="mail-detail-reply-bar"> <footer className="mail-detail-message-footer">
<button type="button" className="mail-detail-reply-btn" onClick={onReply}> <div className="mail-detail-reply-bar">
<Reply size={15} strokeWidth={1.75} /> Reply
</button>
{showReplyAll ? ( {showReplyAll ? (
<button type="button" className="mail-detail-reply-btn subtle" onClick={onReply}> <button type="button" className="mail-detail-reply-btn" onClick={onReply}>
Reply all <Reply {...REPLY_ICON} /> Reply all
</button> </button>
) : null} ) : (
<button type="button" className="mail-detail-reply-btn" onClick={onReply}>
<Reply {...REPLY_ICON} /> Reply
</button>
)}
<button type="button" className="mail-detail-reply-btn subtle" onClick={onForward}> <button type="button" className="mail-detail-reply-btn subtle" onClick={onForward}>
<Forward size={15} strokeWidth={1.75} /> Forward <Forward {...REPLY_ICON} /> Forward
</button> </button>
</footer>
</div> </div>
</footer>
</div> </div>
)} )}
</div> </div>

101
frontend/src/styles.css
View file

@ -656,73 +656,77 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.mailbox-shell.detail-visible .mailbox-list-pane { display:block; min-height:0; height:auto; background:var(--canvas); border-radius:0; padding:0 0 24px; } .mailbox-shell.detail-visible .mailbox-list-pane { display:block; min-height:0; height:auto; background:var(--canvas); border-radius:0; padding:0 0 24px; }
.mail-detail { min-width:0; display:none; position:relative; z-index:1; } .mail-detail { min-width:0; display:none; position:relative; z-index:1; }
.mail-detail.open { display:block; } .mail-detail.open { display:block; }
.mail-detail-reader { width:100%; background:#fff; border:1px solid rgba(25,22,40,.055); border-radius:12px; box-shadow:0 1px 2px rgba(20,18,30,.025),0 8px 24px rgba(20,18,30,.035); overflow:hidden; } .mail-detail-reader { --reader-x0:32px; --reader-avatar:38px; --reader-gap:8px; --reader-x2:calc(var(--reader-x0) + var(--reader-avatar) + var(--reader-gap)); width:100%; height:auto; min-height:0; background:#fff; border:1px solid rgba(25,22,40,.05); border-radius:12px; box-shadow:0 1px 2px rgba(20,18,30,.02),0 6px 18px rgba(20,18,30,.025); overflow:hidden; }
.mail-detail-toolbar { height:48px; padding:0 28px; display:flex; align-items:center; gap:6px; border-bottom:1px solid #ECE9EE; background:#fff; } .mail-detail-toolbar { height:48px; padding:0 24px; display:flex; align-items:center; gap:2px; border-bottom:1px solid #ECE9EE; background:#fff; }
.mail-detail-toolbar-group { display:flex; align-items:center; gap:4px; } .mail-detail-toolbar-group { display:flex; align-items:center; gap:2px; }
.mail-detail-toolbar-sep { width:1px; height:18px; margin:0 8px; background:#ECE9EE; flex-shrink:0; } .mail-detail-toolbar-sep { width:1px; height:18px; margin:0 10px; background:#ECE9EE; flex-shrink:0; }
.mail-detail-toolbar button { width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#5a5562; } .mail-detail-toolbar button { width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#6f6b7c; }
.mail-detail-toolbar button:hover { background:#f5f4f2; color:#241f2b; } .mail-detail-toolbar button:hover { background:#f5f4f2; color:#241f2b; }
.mail-detail-toolbar button.destructive { color:#5a5562; } .mail-detail-toolbar button.destructive { color:#6f6b7c; }
.mail-detail-toolbar button.destructive:hover { background:#fdeeed; color:#bb4e43; } .mail-detail-toolbar button.destructive:hover { background:#fff0ed; color:#e94d3d; }
.mail-detail-sheet { height:auto; min-height:0; margin:0; background:#fff; } .mail-detail-sheet { height:auto; min-height:0; margin:0; background:#fff; }
.mail-detail-state { min-height:160px; padding:32px; display:grid; place-items:center; color:#8d8891; font-size:12px; text-align:center; background:#fff; border:1px solid rgba(25,22,40,.055); border-radius:12px; } .mail-detail-state { min-height:160px; padding:32px; display:grid; place-items:center; color:#8d8891; font-size:12px; text-align:center; background:#fff; border:1px solid rgba(25,22,40,.055); border-radius:12px; }
.mail-detail-state.error { color:#a94f40; } .mail-detail-state.error { color:#a94f40; }
.mail-detail-content { padding:0 0 28px; } .mail-detail-subject-row { min-height:42px; padding:22px var(--reader-x0) 0; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; box-sizing:border-box; }
.mail-detail-reading-column { max-width:820px; padding:24px 32px 0; } .mail-detail-subject-main { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mail-detail-subject-row { margin:0 0 11px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mail-detail-subject-row h1 { margin:0; overflow-wrap:anywhere; font:650 22px/30px "Manrope"; letter-spacing:-.4px; color:#171424; } .mail-detail-subject-row h1 { margin:0; overflow-wrap:anywhere; font:650 22px/30px "Manrope"; letter-spacing:-.4px; color:#171424; }
.mail-detail-labels { display:flex; flex-wrap:wrap; gap:6px; } .mail-detail-labels { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.mail-detail-label-pill { height:21px; padding:0 8px; display:inline-flex; align-items:center; border-radius:6px; background:#f5f4f2; color:#77758a; font-size:10px; font-weight:600; } .mail-detail-label-pill { height:20px; padding:0 7px; display:inline-flex; align-items:center; border-radius:5px; background:#f1eff3; color:#716d7a; font-size:9.5px; font-weight:550; }
.mail-detail-label-pill.starred { background:#fff8e8; color:#9a7228; } .mail-detail-label-pill.starred { background:#fff8e8; color:#9a7228; }
.mail-detail-ai-chips { margin-bottom:20px; display:flex; flex-wrap:wrap; gap:8px; } .mail-detail-ai-chips { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; flex-shrink:0; }
.mail-detail-ai-chip { height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; border:1px solid #ece7ff; border-radius:7px; background:#fbf9ff; color:#6d5bd0; font-size:10px; font-weight:600; white-space:nowrap; } .mail-detail-ai-chip { height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; border:1px solid #ece7ff; border-radius:7px; background:#fbf9ff; color:#6d5bd0; font-size:10.5px; font-weight:550; white-space:nowrap; }
.mail-detail-ai-chip:hover { background:#f3efff; border-color:#ddd4ff; } .mail-detail-ai-chip:hover { background:#f3efff; border-color:#ddd4ff; }
.mail-detail-sender-row { margin-bottom:24px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:start; } .mail-detail-message-header { margin-top:22px; padding:0 var(--reader-x0); width:100%; box-sizing:border-box; display:grid; grid-template-columns:var(--reader-avatar) minmax(0,1fr) auto; column-gap:var(--reader-gap); align-items:start; }
.mail-detail-sender-row .sender-avatar { width:38px; height:38px; font-size:12px; } .mail-detail-message-header .sender-avatar { width:38px; height:38px; font-size:12px; }
.mail-detail-sender-meta { min-width:0; display:grid; gap:4px; } .mail-detail-sender-meta { min-width:0; display:grid; gap:2px; }
.mail-detail-sender-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; } .mail-detail-sender-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; }
.mail-detail-sender-line strong { font:650 13px/1.35 "DM Sans"; color:#171424; } .mail-detail-sender-line strong { font:650 13px/1.35 "DM Sans"; color:#171424; }
.mail-detail-sender-email { font:400 11px/1.35 "DM Sans"; color:#6f6b7c; overflow-wrap:anywhere; } .mail-detail-sender-email { font:400 11px/1.35 "DM Sans"; color:#77758a; overflow-wrap:anywhere; }
.mail-detail-recipient-toggle { padding:0; display:inline-flex; align-items:center; gap:3px; border:0; background:transparent; color:#77758a; font-size:11px; font-weight:500; text-align:left; } .mail-detail-recipient-toggle { padding:0; display:inline-flex; align-items:center; gap:3px; border:0; background:transparent; color:#77758a; font-size:10.5px; font-weight:500; text-align:left; }
.mail-detail-recipient-toggle svg { transition:transform var(--motion-fast) var(--ease-standard); } .mail-detail-recipient-toggle svg { transition:transform var(--motion-fast) var(--ease-standard); }
.mail-detail-recipient-toggle.open svg { transform:rotate(180deg); } .mail-detail-recipient-toggle.open svg { transform:rotate(180deg); }
.mail-detail-recipient-toggle:hover { color:#4a4652; } .mail-detail-recipient-toggle:hover { color:#4a4652; }
.mail-detail-recipient-details { margin-top:4px; padding:8px 10px; display:grid; gap:4px; border-radius:8px; background:#faf9fc; border:1px solid #f0eef5; } .mail-detail-recipient-details { margin-top:4px; padding:8px 10px; display:grid; gap:4px; border-radius:8px; background:#faf9fc; border:1px solid #f0eef5; }
.mail-detail-recipient-details small { color:#77758a; font-size:11px; line-height:1.4; } .mail-detail-recipient-details small { color:#77758a; font-size:11px; line-height:1.4; }
.mail-detail-sender-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; } .mail-detail-message-header-actions { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; }
.mail-detail-sender-actions time { margin-right:4px; color:#77758a; font-size:11px; white-space:nowrap; } .mail-detail-message-header-actions time { margin-right:6px; color:#77758a; font-size:11px; white-space:nowrap; }
.mail-detail-icon-btn { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#6f6a73; } .mail-detail-message-action { width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:transparent; color:#6f6a73; }
.mail-detail-icon-btn:hover { background:#f5f4f2; color:#241f2b; } .mail-detail-message-action:hover { background:#f3f1f5; color:#241f2b; }
.mail-detail-icon-btn.active { color:#d4a017; } .mail-detail-message-action.active { color:#d4a017; }
.mail-detail-body { margin:0 0 24px 50px; color:#292536; } .mail-detail-message-content { margin-top:22px; padding:0 var(--reader-x0) 0 var(--reader-x2); width:100%; box-sizing:border-box; }
.mail-detail-message-content.is-html { padding-left:var(--reader-x0); }
.mail-detail-body { color:#292536; }
.mail-detail-body.is-text { max-width:760px; font-size:13px; line-height:1.58; } .mail-detail-body.is-text { max-width:760px; font-size:13px; line-height:1.58; }
.mail-detail-body-text { white-space:pre-line; overflow-wrap:anywhere; } .mail-detail-body-text { white-space:pre-line; overflow-wrap:anywhere; }
.mail-detail-body.is-html { max-width:none; margin-left:0; font-size:14px; line-height:1.55; } .mail-detail-body.is-html { max-width:none; font-size:14px; line-height:1.55; }
.mail-detail-body-html { white-space:normal; } .mail-detail-body-html { white-space:normal; }
.mail-detail-body-html p { margin:0 0 12px; } .mail-detail-body-html p { margin:0 0 12px; }
.mail-detail-body-html a { color:#4d74c4; text-decoration:underline; } .mail-detail-body-html a { color:#4d74c4; text-decoration:underline; }
.mail-detail-attachments { margin:20px 0 0 50px; max-width:760px; display:flex; flex-wrap:wrap; gap:10px; } .mail-detail-attachments { margin-top:20px; max-width:760px; display:flex; flex-wrap:wrap; gap:10px; }
.mail-detail-attachment { min-width:220px; max-width:320px; padding:10px 12px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:1px solid #ECE9EE; border-radius:8px; background:#fcfbfa; } .mail-detail-attachment { min-width:220px; max-width:320px; padding:10px 12px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:1px solid #ECE9EE; border-radius:8px; background:#fcfbfa; }
.mail-detail-attachment-icon { font-size:18px; } .mail-detail-attachment-icon { display:grid; place-items:center; color:#6f6b7c; }
.mail-detail-attachment strong { display:block; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mail-detail-attachment strong { display:block; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-detail-attachment small { display:block; margin-top:2px; color:#77758a; font-size:10px; } .mail-detail-attachment small { display:block; margin-top:2px; color:#77758a; font-size:10px; }
.mail-detail-attachment-actions { display:flex; flex-direction:column; gap:2px; } .mail-detail-attachment-actions { display:flex; flex-direction:column; gap:2px; }
.mail-detail-attachment-actions button { padding:2px 4px; border:0; background:transparent; color:#6d5bd0; font-size:9px; font-weight:700; } .mail-detail-attachment-actions button { padding:2px 4px; border:0; background:transparent; color:#6d5bd0; font-size:9px; font-weight:700; }
.mail-detail-reply-bar { margin:20px 32px 0; padding:16px 0 0 50px; max-width:820px; display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid #F0EEF2; } .mail-detail-message-footer { margin-top:24px; padding:0 0 24px; width:100%; box-sizing:border-box; }
.mail-detail-reply-btn { height:36px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border:1px solid #ECE9EE; border-radius:8px; background:#fff; color:#241f2b; font-size:12px; font-weight:600; } .mail-detail-reply-bar { padding:16px var(--reader-x0) 0 var(--reader-x2); display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid #f0eef2; }
.mail-detail-reply-btn:hover { background:#f8f7f5; border-color:#ddd8d3; } .mail-detail-reply-btn { height:36px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border:1px solid #dfdde5; border-radius:8px; background:#fff; color:#241f2b; font-size:11.5px; font-weight:600; }
.mail-detail-reply-btn:hover { background:#f8f7f5; border-color:#d5d2da; }
.mail-detail-reply-btn.subtle { color:#5a5562; background:#fafafa; } .mail-detail-reply-btn.subtle { color:#5a5562; background:#fafafa; }
.agent-panel.email-context .agent-stat-grid, .agent-panel.email-context .agent-stat-grid,
.agent-panel.email-context .agent-context-block, .agent-panel.email-context .agent-context-block,
.agent-panel.email-context .agent-quick { display:none; } .agent-panel.email-context .agent-quick { display:none; }
.agent-email-context { margin:10px 0 14px; padding:0; } .agent-panel.email-context .agent-panel-hello { margin-top:14px; }
.agent-email-context h3 { margin:0 0 6px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#8a8496; } .agent-email-context { margin:8px 0 0; padding:0; }
.agent-email-context p { margin:0 0 14px; font-size:12px; line-height:1.55; color:#4a4652; } .agent-email-context h3 { margin:0 0 5px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#8a8496; }
.agent-email-action-list { margin:0 0 14px; padding:0; list-style:none; display:grid; gap:8px; } .agent-email-context h3 + h3 { margin-top:12px; }
.agent-email-context p { margin:0 0 12px; font-size:12px; line-height:1.55; color:#4a4652; }
.agent-email-action-list { margin:0 0 12px; padding:0; list-style:none; display:grid; gap:7px; }
.agent-email-action-list li { display:flex; align-items:center; gap:8px; color:#4a4652; font-size:12px; line-height:1.4; } .agent-email-action-list li { display:flex; align-items:center; gap:8px; color:#4a4652; font-size:12px; line-height:1.4; }
.agent-email-action-check { width:14px; height:14px; flex-shrink:0; border:1.5px solid #c8c3d0; border-radius:4px; background:#fff; } .agent-email-action-check { width:14px; height:14px; flex-shrink:0; border:1.5px solid #c8c3d0; border-radius:4px; background:#fff; }
.agent-email-context-reply { height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:1px solid #ddd4ff; border-radius:8px; background:#f6f2ff; color:#6d4aff; font-size:11px; font-weight:700; } .agent-email-context-reply { height:32px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:1px solid #ddd6fe; border-radius:8px; background:#faf8ff; color:#6750e8; font-size:11px; font-weight:600; }
.agent-email-context-reply:hover { background:#ebe4ff; } .agent-email-context-reply:hover { background:#f3efff; }
.compose-dock { position:fixed; right:var(--compose-dock-right,16px); bottom:16px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; transition:right 160ms ease-out; } .compose-dock { position:fixed; right:var(--compose-dock-right,16px); bottom:16px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; transition:right 160ms ease-out; }
.compose-dock-expanded,.compose-dock-chips { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:16px; pointer-events:auto; } .compose-dock-expanded,.compose-dock-chips { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:16px; pointer-events:auto; }
@ -893,13 +897,14 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
.mailbox-shell.detail-visible .mailbox-toolbar, .mailbox-shell.detail-visible .mailbox-toolbar,
.mailbox-shell.detail-visible .mailbox-filters, .mailbox-shell.detail-visible .mailbox-filters,
.mailbox-shell.detail-visible .mailbox-list-footer { display:none; } .mailbox-shell.detail-visible .mailbox-list-footer { display:none; }
.mail-detail-reader { border-radius:10px; } .mail-detail-reader { --reader-x0:18px; --reader-avatar:34px; --reader-gap:8px; border-radius:10px; }
.mail-detail-toolbar { padding:0 16px; } .mail-detail-toolbar { padding:0 16px; }
.mail-detail-reading-column { padding:20px 18px 0; } .mail-detail-subject-row { flex-direction:column; align-items:flex-start; padding-top:18px; }
.mail-detail-body,.mail-detail-attachments,.mail-detail-reply-bar { margin-left:0; padding-left:0; } .mail-detail-ai-chips { justify-content:flex-start; }
.mail-detail-reply-bar { margin:16px 18px 0; } .mail-detail-message-header { grid-template-columns:34px minmax(0,1fr); }
.mail-detail-sender-row { grid-template-columns:34px minmax(0,1fr); } .mail-detail-message-header-actions { grid-column:1/-1; justify-content:flex-start; margin-left:0; }
.mail-detail-sender-actions { grid-column:1/-1; justify-content:flex-start; } .mail-detail-message-content,.mail-detail-message-content.is-html { padding-left:var(--reader-x0); }
.mail-detail-reply-bar { padding-left:var(--reader-x0); }
.compose-dock { right:12px !important; bottom:12px; } .compose-dock { right:12px !important; bottom:12px; }
.compose-window { width:min(calc(100vw - 24px),560px); min-width:0; max-width:none; height:min(560px,calc(100vh - 24px)); } .compose-window { width:min(calc(100vw - 24px),560px); min-width:0; max-width:none; height:min(560px,calc(100vh - 24px)); }
.compose-window.expanded { width:calc(100vw - 24px); min-width:0; height:min(78vh,calc(100vh - 24px)); } .compose-window.expanded { width:calc(100vw - 24px); min-width:0; height:min(78vh,calc(100vh - 24px)); }
@ -1097,9 +1102,9 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
.mail-label-amber { background:#fff4d8; color:#9a7420; } .mail-label-amber { background:#fff4d8; color:#9a7420; }
.mail-label-green { background:#e7f6ee; color:#2f7a52; } .mail-label-green { background:#e7f6ee; color:#2f7a52; }
.mail-label-pink { background:#fceeff; color:#8b5ca8; } .mail-label-pink { background:#fceeff; color:#8b5ca8; }
.mailbox-rail { min-width:0; display:flex; flex-direction:column; gap:8px; position:sticky; top:var(--space-3); align-self:start; } .mailbox-rail { width:320px; min-width:320px; max-width:320px; display:flex; flex-direction:column; gap:8px; position:sticky; top:var(--space-3); align-self:start; }
.agent-panel { --ag-coral:#FF6654; --ag-coral-dark:#B72416; --ag-coral-soft:#FFF1ED; --ag-purple:#7357F6; --ag-purple-dark:#5633CE; --ag-purple-soft:#F3F0FF; --ag-blue:#2764F1; --ag-blue-dark:#153EAB; --ag-blue-soft:#EEF3FF; --ag-green:#11966A; --ag-green-dark:#087852; --ag-green-soft:#EDF9F4; --ag-text-primary:#171424; --ag-text-secondary:#77758A; --ag-text-tertiary:#A6A2AE; --ag-border:#E4E1E8; --ag-divider:rgba(25,22,40,.07); --ag-panel:#FFFFFF; width:100%; border:1px solid rgba(26,24,38,0.055); border-radius:14px; background:var(--ag-panel); box-shadow:0 1px 2px rgba(20,18,30,0.025),0 8px 24px rgba(20,18,30,0.035); overflow:hidden; } .agent-panel { --ag-coral:#FF6654; --ag-coral-dark:#B72416; --ag-coral-soft:#FFF1ED; --ag-purple:#7357F6; --ag-purple-dark:#5633CE; --ag-purple-soft:#F3F0FF; --ag-blue:#2764F1; --ag-blue-dark:#153EAB; --ag-blue-soft:#EEF3FF; --ag-green:#11966A; --ag-green-dark:#087852; --ag-green-soft:#EDF9F4; --ag-text-primary:#171424; --ag-text-secondary:#77758A; --ag-text-tertiary:#A6A2AE; --ag-border:#E4E1E8; --ag-divider:rgba(25,22,40,.07); --ag-panel:#FFFFFF; width:100%; border:1px solid rgba(26,24,38,0.055); border-radius:14px; background:var(--ag-panel); box-shadow:0 1px 2px rgba(20,18,30,0.025),0 8px 24px rgba(20,18,30,0.035); overflow:hidden; }
.agent-panel-head { padding:14px 16px 8px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; } .agent-panel-head { padding:14px 14px 0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.agent-panel-mark { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:#FFF1EC; color:#FF735C; } .agent-panel-mark { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:#FFF1EC; color:#FF735C; }
.agent-panel-title { min-width:0; } .agent-panel-title { min-width:0; }
.agent-panel-head h2 { margin:0; font:700 15px/18px "DM Sans"; color:#151322; letter-spacing:-.2px; } .agent-panel-head h2 { margin:0; font:700 15px/18px "DM Sans"; color:#151322; letter-spacing:-.2px; }
@ -1107,8 +1112,8 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
.agent-panel-toggle { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#30304A; cursor:pointer; transition:background 120ms ease; } .agent-panel-toggle { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#30304A; cursor:pointer; transition:background 120ms ease; }
.agent-panel-toggle:hover { background:#F5F4F2; } .agent-panel-toggle:hover { background:#F5F4F2; }
.agent-panel-toggle .open { transform:rotate(180deg); } .agent-panel-toggle .open { transform:rotate(180deg); }
.agent-panel-body { padding:0 16px 10px; animation:agentReveal var(--motion-slow) var(--ease-standard); } .agent-panel-body { padding:0 14px 14px; animation:agentReveal var(--motion-slow) var(--ease-standard); }
.agent-panel-hello { margin:10px 0 0; display:grid; gap:2px; } .agent-panel-hello { margin:14px 0 0; display:grid; gap:2px; }
.agent-panel-hello strong { font:700 14px/18px "DM Sans"; color:#171424; } .agent-panel-hello strong { font:700 14px/18px "DM Sans"; color:#171424; }
.agent-panel-hello span { font:400 11px/15px "DM Sans"; color:#77758A; } .agent-panel-hello span { font:400 11px/15px "DM Sans"; color:#77758A; }
.agent-panel-note { margin:0 0 8px; font-size:11px; line-height:15px; color:#77758A; } .agent-panel-note { margin:0 0 8px; font-size:11px; line-height:15px; color:#77758A; }