/* Contact dialog and /messages inbox use the documentation pages' grayscale palette. */
.msg-box{border:1px solid var(--line-soft);padding:14px 16px 16px;margin-top:4px}
.msg-who{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.msg-who .msg-addr{text-transform:none;letter-spacing:.02em;font-size:12px;color:var(--ink-mono)}
.msg-link{background:none;border:0;padding:0;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.17em;cursor:pointer}
.msg-link:hover{color:var(--ink)}
.msg-box textarea{display:block;width:100%;min-height:128px;resize:vertical;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--line);border-radius:0;color:var(--ink);
  font:inherit;font-size:16px;line-height:1.6;padding:12px 14px;overflow-x:hidden;overflow-y:auto}   /* A 16px input font prevents iOS focus zoom. */
.msg-box textarea:focus{outline:none;border-color:var(--ink)}
.msg-box textarea::placeholder{color:var(--ink-4)}
.msg-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.msg-foot .btn{margin-inline-start:auto}   /* Use logical alignment so RTL actions align left. */
.msg-count{font-variant-numeric:tabular-nums}
.msg-count.over{color:#ef5350}
.wp p.msg-note,.msg-note{margin:0;color:var(--ink-3);font-size:13px;line-height:1.5}
.msg-actions{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.wp ol.msg-list,.msg-list{list-style:none;padding:0;margin:18px 0 0}
.msg-list li{border-top:1px solid var(--line-faint);padding:16px 0;margin:0}
.msg-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--ink-3);letter-spacing:.02em}
.msg-meta .mono{font-size:12px;color:var(--ink-mono-dim)}
.wp p.msg-body,.msg-body{margin:8px 0 0;color:var(--ink);line-height:1.62;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:480px){ .msg-foot .btn{margin-inline-start:0;width:100%} }

/* Shared footer navigation is styled in assets/nav.css. */

/* Contact dialog opened by the footer. */
.sheet-ct{max-width:520px;max-height:calc(100vh - 2 * var(--gutter));overflow-x:hidden;overflow-y:auto}   /* Scroll vertically only; horizontal auto can draw an empty scrollbar track on some systems. */
.sheet-ct .msg-box{border:0;margin:0;padding:14px 16px 16px}
.ct-intro{margin:0 0 14px;color:var(--ink-2);font-size:14px;line-height:1.6}

/* /messages inbox. */
.ds-me{margin:22px 0 4px}
.ds-addr{margin-top:6px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.ds-h{display:block;margin:30px 0 10px}
.msg-author{text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink-2)}
.msg-author.is-addr{text-transform:none;letter-spacing:.02em;font-size:12px}   /* Preserve lowercase blnd1 addresses. */
.msg-list li.is-team{border-inline-start:2px solid var(--line);padding-inline-start:14px}
.wp p.msg-body.is-pending,.msg-body.is-pending{color:var(--ink-4);font-style:italic}
.msg-list li.msg-empty{color:var(--ink-3)}
#ds-count{display:block;margin-top:24px}
.ds-th{border-top:1px solid var(--line-soft);margin-top:18px;padding-top:16px}
.ds-th-head{margin-bottom:2px}
.ds-th .msg-list{margin-top:6px}
.ds-reply-box{margin-top:8px;border-color:var(--line-faint)}
.msg-box textarea.ds-reply{min-height:84px}
.ds-older{margin-top:18px}

/* The inbox sign-in dialog explains connection, signature and opening states. Stack it above the
   picker (20) and below error dialogs (40). */
.veil-flow{z-index:35}
.sheet-flow{max-width:440px;position:relative;overflow:hidden}
.sheet-flow .flow-t{display:block;margin:0;padding:24px 22px 0}
.sheet-flow .alert-msg{padding-top:12px}
.flow-acts{display:flex;border-top:1px solid var(--line-soft)}
.flow-acts .pick{justify-content:center;text-align:center;align-items:center;border-top:0;text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.flow-acts .pick:not([hidden]) + .pick{border-left:1px solid var(--line-soft)}
[dir=rtl] .flow-acts .pick:not([hidden]) + .pick{border-left:0;border-right:1px solid var(--line-soft)}
.flow-acts .pick[hidden]{display:none}
/* Override inline-flex buttons when hidden so unavailable logout/load-earlier actions stay hidden. */
#dash .btn[hidden]{display:none}
/* Keep team sign-in secondary to normal wallet authorization. */
#dash .ds-team{border-color:transparent;background:none;color:var(--ink-2);text-transform:none;letter-spacing:.02em;font-size:13px;padding-left:10px;padding-right:10px}
#dash .ds-team:hover{color:var(--ink);border-color:var(--line-soft)}
/* An animated top hairline indicates waiting for wallet authorization. */
.flow-bar{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;visibility:hidden}
.sheet-flow.is-wait .flow-bar{visibility:visible}
.flow-bar::before{content:"";position:absolute;top:0;bottom:0;width:35%;background:var(--ink);opacity:.7;animation:flowbar 1.3s ease-in-out infinite}
@keyframes flowbar{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){ .flow-bar::before{animation:none;left:0;width:100%;opacity:.35} }