/*--------------------------------------------------------------
# DotEcho - Engagement page styles, layered on app.css.
--------------------------------------------------------------*/

.de-msg { transition: border-color .2s, box-shadow .2s; }
.de-msg.highlight { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); }
.de-msg.done { opacity: .85; }

.de-msg .from a { color: inherit; }
.de-msg .from a:hover { color: var(--emerald); }
.de-msg .from .handle { color: var(--text-muted); font-weight: 400; font-size: .84rem; }
.de-msg .from .de-badge { font-size: .66rem; padding: 2px 9px; }

.de-msg .why { font-size: .78rem; color: var(--text-faint); margin: 0 0 8px; }
.de-msg .why i { margin-right: 4px; }

.de-msg .meta a { color: var(--text-muted); }
.de-msg .meta a:hover { color: var(--emerald); }
.de-msg .meta i { margin-right: 3px; }

.de-reply label { display: block; font-family: var(--nav-font); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-bottom: 6px; }
.de-reply textarea.de-input { min-height: 92px; font-family: var(--default-font); }
.de-reply textarea.de-input[readonly] { cursor: default; color: var(--text-soft); }
.de-reply .sent { white-space: pre-wrap; color: var(--text-soft); font-size: .9rem; line-height: 1.5; margin: 0 0 6px; }
.de-reply .de-actions { margin-top: 8px; }
.de-msg.done .de-reply { border-left-color: var(--hairline-strong); }
.de-reply .empty { font-size: .84rem; color: var(--text-faint); font-style: italic; margin: 0; }