/* Messages page (list + conversation) and the conversation inside the lead panel. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- page head: are texts and email working? ---------- */
.msg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; max-width: 100%; }
.msg-status .pill { white-space: normal; overflow-wrap: anywhere; }
.msg-status .pill svg { width: 0.9rem; height: 0.9rem; }
.msg-alert { margin-bottom: 1rem; font-size: 0.86rem; border-color: rgba(243, 181, 63, 0.45); background: var(--amber-soft); }
.msg-alert.is-error { border-color: rgba(255, 95, 120, 0.45); background: var(--red-soft); }
.msg-alert p { margin: 0.2rem 0; color: var(--text); }

/* ---------- list | conversation ---------- */
.msg-layout { display: grid; grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); gap: 1rem;
              height: calc(100vh - 11rem); min-height: 30rem; }
.has-banner .msg-layout { height: calc(100vh - 13rem); }
.msg-side, .msg-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
                       background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.msg-tools { padding: 0.75rem; border-bottom: 1px solid var(--border); }
.msg-tools .search { width: 100%; }
.msg-filters { margin: 0.55rem 0 0; }
.msg-list { flex: 1; min-height: 0; overflow-y: auto; }
.msg-list-empty { padding: 1rem; margin: 0; }
.msg-list-empty p { margin: 0 0 0.4rem; }

.msg-item { display: flex; align-items: flex-start; gap: 0.65rem; width: 100%; padding: 0.7rem 0.8rem;
            border: none; border-bottom: 1px solid var(--border); background: none; color: inherit;
            font: inherit; text-align: left; cursor: pointer; }
.msg-item:hover { background: rgba(255, 255, 255, 0.03); }
.msg-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-bright); }
.msg-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; flex: none;
           background: var(--teal-soft); color: var(--teal); }
.msg-ico.email { background: var(--purple-soft); color: var(--purple); }
.msg-ico svg { width: 1rem; height: 1rem; }
.msg-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; }
.msg-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.msg-item-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 600; }
.msg-item-top time { flex: none; font-size: 0.72rem; color: var(--muted); }
.msg-item-sub, .msg-item-preview { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item-sub { color: var(--muted); }
.msg-item-preview { color: var(--text-soft); }
.msg-item.unread b { font-weight: 800; color: #fff; }
.msg-item.unread .msg-item-preview { color: var(--text); font-weight: 600; }
.msg-item.unread time { color: var(--accent-bright); font-weight: 700; }
.msg-dot { width: 0.6rem; height: 0.6rem; margin-top: 0.4rem; border-radius: 50%; flex: none; background: var(--accent-bright);
           box-shadow: 0 0 0 3px var(--accent-soft); }
.msg-mini { font-size: 0.62rem; padding: 0.02rem 0.4rem; vertical-align: 0.05em; }

.msg-pane { overflow-y: auto; }   /* a tall email being written: the pane scrolls, the conversation keeps its room */
.msg-convo { flex: 1 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.msg-pick { margin: auto; padding: 2rem; max-width: 26rem; text-align: center; color: var(--text-soft); }

/* ---------- one conversation ---------- */
.mc { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mc-page { flex: 1 0 auto; }
.mc-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.mc-title { flex: 1; min-width: 0; }
.mc-title h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.mc-title p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.mc-back { display: none; padding: 0.35rem 0.55rem; }
.mc-page .mc-notes, .mc-page .mc-email { padding: 0 1rem; }
.mc-flag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--text-soft); }

.mc-email-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0; font-size: 0.86rem; }
.mc-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mc-addr { overflow-wrap: anywhere; font-weight: 600; }
.mc-email-form { display: grid; gap: 0.4rem; padding: 0.55rem 0; }
.mc-email-form .inline { flex-wrap: wrap; }
.mc-email-form input { flex: 1 1 12rem; min-width: 0; padding: 0.45rem 0.65rem; font-size: 0.86rem; }
.mc-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0; }
.mc-picks .chip { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.link-btn.mc-inline { display: inline; font-size: 0.78rem; color: var(--accent-bright); justify-self: start; }

.mc-thread { min-height: 0; overflow-y: auto; outline: none; }
.mc-page .mc-thread { flex: 1 1 0; min-height: 13rem; padding: 1rem; }
.mc-panel .mc-thread { max-height: 24rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
                       background: rgba(5, 10, 28, 0.35); }
.mc-none { margin: 0.4rem 0; }
.mc-msg { display: flex; flex-direction: column; max-width: 85%; margin-bottom: 0.75rem; }
.mc-msg.in { align-items: flex-start; margin-right: auto; }
.mc-msg.out { align-items: flex-end; margin-left: auto; }
.mc-msg.email { max-width: 92%; }
.mc-bubble { max-width: 100%; padding: 0.55rem 0.75rem; border-radius: 14px; background: var(--panel-raised);
             border: 1px solid var(--border); overflow-wrap: anywhere; }
.mc-msg.in .mc-bubble { border-bottom-left-radius: 4px; }
.mc-msg.out .mc-bubble { background: var(--accent-soft); border-color: rgba(255, 107, 51, 0.35); border-bottom-right-radius: 4px; }
.mc-msg.failed .mc-bubble { border-color: rgba(255, 95, 120, 0.55); }
.mc-msg.unread .mc-bubble { box-shadow: 0 0 0 2px rgba(255, 107, 51, 0.45); }
.mc-text { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.45; }
.mc-subj { margin-bottom: 0.3rem; font-weight: 700; font-size: 0.88rem; }
.mc-quoted summary { margin-top: 0.45rem; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.mc-quoted .mc-text { margin-top: 0.35rem; padding-left: 0.6rem; border-left: 2px solid var(--border-strong);
                      font-size: 0.82rem; color: var(--muted); }
.mc-attach { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.45rem; font-size: 0.8rem; color: var(--text-soft); }
.mc-attach svg { margin-top: 0.15rem; color: var(--muted); }
.mc-attach small { display: block; color: var(--muted); font-size: 0.72rem; }
.mc-error { margin-top: 0.4rem; font-size: 0.8rem; color: var(--red); }
.mc-note { margin-top: 0.4rem; font-size: 0.78rem; color: var(--amber); }
.mc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.2rem; padding: 0 0.2rem;
           font-size: 0.72rem; color: var(--muted); }
.mc-meta .mc-ico svg { width: 0.85rem; height: 0.85rem; vertical-align: -0.15em; }
.mc-sep { opacity: 0.6; }
.mc-status.ok { color: var(--green); }
.mc-status.bad { color: var(--red); font-weight: 700; }
.mc-new { color: var(--accent-bright); font-weight: 700; }
.mc-practice { color: var(--amber); }
.link-btn.mc-reply { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.35rem; font-size: 0.75rem;
                     color: var(--accent-bright); }
.mc-reply svg { width: 0.85rem; height: 0.85rem; }

/* composer */
.mc-compose { display: grid; gap: 0.45rem; padding: 0.75rem 1rem 0.9rem; border-top: 1px solid var(--border);
              background: rgba(8, 14, 36, 0.5); }
.mc-panel .mc-compose { padding: 0.75rem 0 0; border-top: none; background: none; }
.mc-tabs { display: flex; gap: 0.3rem; }
.mc-tabs button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; border-radius: 999px;
                  border: 1px solid var(--border-strong); background: transparent; color: var(--text-soft);
                  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.mc-tabs button:hover { color: var(--text); }
.mc-tabs button.on { background: var(--accent-soft); border-color: var(--accent-bright); color: #fff; }
.mc-consent { margin: 0; font-size: 0.76rem; color: var(--amber); }
.mc-why { margin: 0; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text-soft);
          background: var(--grey-soft); border: 1px solid var(--border); }
.mc-why.warn { color: var(--text); background: var(--amber-soft); border-color: rgba(243, 181, 63, 0.4); }
.mc-fields { display: grid; gap: 0.45rem; min-width: 0; }
.mc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.mc-template { flex: 1 1 12rem; min-width: 0; max-width: 100%; padding: 0.4rem 0.6rem; font-size: 0.82rem; }
.mc-route { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
.mc-replying { margin: 0; font-size: 0.78rem; color: var(--text-soft); }
.mc-subject, .mc-body { width: 100%; min-width: 0; }
.mc-body { min-height: 5rem; resize: vertical; }
.mc-hint { margin: 0; font-size: 0.76rem; color: var(--amber); }
.mc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.mc-count { font-size: 0.75rem; color: var(--muted); }
.mc-open-page { align-self: flex-start; margin-top: 0.6rem; }

/* ---------- phones: the list and the conversation take turns ---------- */
@media (max-width: 860px) {
  .msg-layout, .has-banner .msg-layout { display: block; height: auto; min-height: 0; }
  .msg-layout.has-open .msg-side { display: none; }
  .msg-layout:not(.has-open) .msg-pane { display: none; }
  .msg-side, .msg-pane { overflow: visible; }
  .msg-list { overflow: visible; }
  .mc-back { display: inline-flex; }
  .mc-head { padding: 0.65rem 0.75rem; }
  .mc-page .mc-thread { max-height: 58vh; padding: 0.75rem; }
  .mc-page .mc-notes, .mc-page .mc-email { padding: 0 0.75rem; }
  .mc-compose { padding: 0.7rem 0.75rem 0.8rem; }
  .mc-msg, .mc-msg.email { max-width: 94%; }
}

/* ---------- New email (app/static/js/email-composer.js) and attachments ---------- */
.msg-head-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; max-width: 100%; }
.msg-new svg { width: 1rem; height: 1rem; }
.lead-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lead-msg-head .btn { text-transform: none; letter-spacing: normal; }
.ec-modal { width: min(640px, 100%); }
.ec-consent { margin: 0 0 0.8rem; }
.ec-results { list-style: none; margin: 0.3rem 0 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.ec-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; width: 100%; padding: 0.5rem 0.6rem;
             border: 1px solid var(--border); border-radius: 0.5rem; margin-bottom: 0.3rem; background: none; color: inherit;
             font: inherit; text-align: left; cursor: pointer; }
.ec-result:hover, .ec-result:focus-visible { background: var(--accent-soft); }
.ec-result span { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.ec-none { padding: 0.4rem 0.2rem; }
.ec-lead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem;
           padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.6rem; }
.ec-lead > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ec-why { margin: 0 0 0.8rem; }
.att { margin: 0.2rem 0 0.6rem; }
.att-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.att-add { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.att-add svg { width: 1rem; height: 1rem; }
.att-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.att-add:focus-within { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.att-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.att-file { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; font-size: 0.82rem;
            border: 1px solid var(--border); border-radius: 0.5rem; min-width: 0; }
.att-file.up { opacity: 0.7; }
.att-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.att-size { flex: none; color: var(--muted); font-size: 0.75rem; }
.mc-files { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mc-files a { overflow-wrap: anywhere; }
.mc-files .mc-fsize { display: inline; }

/* Other contacts (app/lead_contacts.py): who a text / email goes to */
.mc-to { display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin: 0 0 0.4rem; }
.mc-to select { flex: 1; min-width: 0; max-width: 100%; font-size: 16px; }
.mc-who { font-weight: 600; color: var(--text-soft); }