/* Messages widget + Messages tabs (plans/messages-widget.md, Oct 23 2026). Theme tokens only (Light/Dark).
   The glance tiles reuse the Email widget's .eg-tile look (assets/email-widget.css), repeated here so either loads alone. */
.dw-msgw { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.dw-msgw .eg-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.dw-msgw .eg-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; text-decoration: none; min-width: 0; }
.dw-msgw .eg-tile b { font-size: 1.1rem; font-weight: 600; line-height: 1.1; }
.dw-msgw .eg-tile span { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dw-msgw .eg-tile.warn b { color: var(--orange); }
.dw-msgw .eg-tile:hover { border-color: var(--grass); }
.dw-msgw .dw-body { flex: 1; min-height: 0; overflow: auto; }
.msgw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dw-msgw-full { overflow: hidden; display: flex; }
.dw-msgw-full iframe { flex: 1; min-height: 520px; border: 0; }
.msgw-tabs { flex-wrap: wrap; }
.msgw-tabs .msgw-email { margin-left: auto; }
@media (max-width: 600px) { .dw-msgw .eg-row { gap: 4px; } .msgw-tabs .msgw-email { margin-left: 0; } }
/* Step 5-8 (Oct 23 2026): page tools under the tabs, the widget's back face, opt-out banner, Make Task link. */
.msgw-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msgw-set { display: flex; flex-direction: column; gap: 8px; }
.msgw-set label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msgw-set select { max-width: 60%; }
.msgw-set .msgw-chk { justify-content: flex-start; }
.mt-optout { margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--orange); border-radius: 10px; background: var(--card); font-size: .9rem; }
.mt-send[disabled] { opacity: .4; cursor: not-allowed; }
.mt-task { margin: 2px 0 6px 6px; }
.mt-task .link { font-size: .78rem; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.mt-task .link:hover { color: var(--grass); text-decoration: underline; }