/* layout-pref: "My messages on the right" (body.lay-right). Classic layout is untouched when the class is absent. Loaded after align-fix.css. */
body.lay-right .m.mine{flex-direction:row-reverse;gap:6px}
body.lay-right .m.mine>.av{display:none}
body.lay-right .m.mine>div:nth-child(2){flex:0 1 auto;min-width:0;max-width:100%;display:grid;grid-template-columns:1fr auto;justify-items:end}
body.lay-right .m.mine>div:nth-child(2)>*:not(.hd):not(.rdc){grid-column:1/-1;min-width:0;max-width:100%}
/* time sits under the bubble, bottom-right; name hidden (font-size:0 keeps the Pinned ::after label visible) */
body.lay-right .m.mine .hd{grid-column:2;grid-row:20;margin:2px 4px 0 0;justify-content:flex-end;gap:6px;white-space:nowrap}
/* the read circle is a direct child of the row, absolutely placed in the right gutter by msg-ui.js (same x in both layouts) */
body.lay-right .m.mine .hd .n{font-size:0;width:auto}
body.lay-right .m.mine .hd .t{font-size:11px}
body.lay-right .m.mine .rx{grid-row:21;justify-content:flex-end}
body.lay-right .m.mine .tlink{grid-row:22}
body.lay-right .m.mine .seenl{grid-row:23;margin-top:0}
body.lay-right .m.mine.cont .hd{display:none}
body.lay-right .m.mine:not(.cont) .body.bub{border-radius:14px 4px 14px 14px}
body.lay-right .m.mine.cont .body.bub{border-radius:14px}
body.lay-right .m.mine .body.bub{max-width:min(640px,100%);text-align:left}
body.lay-right .m.mine .body.bub.del{text-align:right}
body.lay-right .m.mine .qchip,body.lay-right .m.mine .fwdl{text-align:left}
body.lay-right .m.mine .att{max-width:100%}
/* hover toolbar becomes a flex item on the left of the bubble */
body.lay-right .m.mine>.tools{position:static;align-self:center;margin:0 4px 0 0;order:0;flex:none}
/* the in-call chat panel and thread panel use the same markup */
body.lay-right #tpbody .m.mine{margin:0 -6px}
/* settings dialog + header menu */
.lp-cards{display:flex;gap:10px;margin-top:10px}
.lp-card{flex:1;color:#1F2329!important;border:1.5px solid #E1E3E8;border-radius:10px;padding:8px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.lp-card.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.lp-card b{display:block;font:600 12.5px var(--f-b);margin-top:6px}
.lp-card small{color:var(--muted);font-size:11.5px}
.lp-prev{height:44px;border-radius:6px;background:#F0F1F4;display:flex;flex-direction:column;gap:4px;padding:6px}
.lp-prev i{display:block;height:9px;border-radius:5px;background:#C9CED8;width:55%}
.lp-prev i.r{background:#9DB6F5;align-self:flex-end}
.lp-prev.cl i.r{background:#C9CED8;align-self:flex-start}
.lp-menu{position:fixed;z-index:9200;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px -8px rgba(31,35,41,.25);padding:4px;min-width:230px;font:14px var(--f-b)}
.lp-menu button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:none;color:inherit;font:inherit;padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left}
.lp-menu button:hover{background:var(--wash)}.lp-menu button .ck{width:14px;color:var(--blue)}
body.lay-right .m.mine .body.bub:empty{display:none}