/* Base controls, palette, modal geometry and actions come from standard-ui.css. */
#mail-root{position:fixed;inset:var(--view-top,0px) auto auto var(--view-left,0px);width:var(--view-width,100vw);height:var(--view-height,100dvh);min-height:0;overflow:hidden}
/* Same upper-centred sign-in arrangement as developer-site's existing #login. */
.mail-entry{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.875rem;padding:clamp(1rem,8dvh,5rem) 1rem 1rem;text-align:center;overflow-y:auto!important}
.webmail-app{box-sizing:border-box;display:flex;flex-direction:column;min-height:0;height:100%;width:100%;padding:var(--object-gap);gap:var(--object-gap);color:var(--ink);background:transparent;overflow:hidden}
.webmail-app *{box-sizing:border-box}.webmail-app header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--object-gap);flex:none}.webmail-app h1{font-size:1.4rem;margin:0}.webmail-app h2{font-size:1.2rem;margin:0}.webmail-app header form{display:flex;gap:var(--object-gap);flex:1;min-width:10rem}.webmail-app header input{flex:1;min-width:0}
.mail-status{font-size:.9rem;color:var(--accent);flex:none;overflow-wrap:anywhere}.mail-status:empty{display:none}
.mail-columns{display:grid;grid-template-columns:minmax(14rem,27%) minmax(0,1fr);flex:1;min-height:0;gap:var(--object-gap)}
.mail-tree{background:var(--panel);overflow-y:auto;overflow-x:hidden;min-height:0;border:1px solid var(--line);padding:var(--object-gap);overscroll-behavior:contain}.mail-tree details{padding:var(--object-gap);background:var(--control);margin-bottom:var(--object-gap)}.mail-tree summary{overflow-wrap:anywhere;cursor:pointer}.mail-message-item{display:block;width:100%;text-align:left;margin-top:var(--object-gap);overflow-wrap:anywhere}
.mail-message-pane{display:flex;flex-direction:column;gap:var(--object-gap);min-width:0;min-height:0;padding:var(--object-gap);background:var(--panel);border:1px solid var(--line)}.mail-message-pane>p{overflow-wrap:anywhere}.mail-message-controls{display:flex;flex-wrap:wrap;gap:var(--object-gap);align-items:center;flex:none}.mail-message-view{flex:1;min-height:0;min-width:0;overflow:hidden}
.mail-plain{font:inherit;margin:0;width:100%;white-space:pre-wrap;overflow-wrap:anywhere}.mail-message-view>.mail-plain{height:100%;overflow-y:auto;overscroll-behavior:contain}
.mail-dialog .modal-body>label{display:flex;flex-direction:column;align-items:stretch;gap:var(--object-gap)}.mail-dialog .modal-body>label>input,.mail-dialog .modal-body>label>select,.mail-dialog textarea{width:100%}.mail-dialog textarea{min-height:8rem;max-height:40dvh;resize:vertical}.mail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--object-gap)}.mail-actions>span{flex:1;min-width:0;overflow-wrap:anywhere}.mail-inheritance{font-size:.8em;overflow-wrap:anywhere;color:var(--muted)}.mail-draft-status{font-size:.9em;color:var(--muted)}.mail-draft-status:empty{display:none}.mail-history-list article{display:flex;gap:var(--object-gap);align-items:center;padding:var(--object-gap);border-bottom:1px solid var(--line)}.mail-history-list article>button:first-child{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere}
@media(max-width:640px){.mail-columns{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(7rem,30%) minmax(0,1fr)}.mail-message-controls{font-size:.9em}}
.webmail-app button.mail-ai-pending:disabled{opacity:1;cursor:wait;border:.2rem solid transparent;border-image:repeating-linear-gradient(135deg,#ffd33d 0 .35rem,#161616 .35rem .7rem) 1}

.mail-brand-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-inline-end:.3em;object-fit:contain}