/* Working inside another account, and the two-channel inbox. */

/* The acting banner sits above everything and never scrolls away. It is
   deliberately loud: the whole point is that you cannot forget you are typing
   as somebody else. */
#acting-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #7c2d12;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
#acting-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fbbf24;
  flex: 0 0 auto;
  animation: acting-pulse 2s ease-in-out infinite;
}
@keyframes acting-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
#acting-bar .txt { flex: 1; min-width: 0; }
#acting-bar b { font-weight: 700; }
#acting-bar .btn {
  background: #fff;
  color: #7c2d12;
  border-color: #fff;
  font-weight: 600;
  flex: 0 0 auto;
}
/* Push the app down by exactly the banner height rather than letting it hide
   the top of the rail. */
body.is-acting { padding-top: 37px; }
body.is-acting .shell { min-height: calc(100vh - 37px); }

#switch-acct {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  opacity: .75;
  display: flex;
  align-items: center;
}
#switch-acct:hover { opacity: 1; }
#switch-acct svg { width: 16px; height: 16px; }

.switch-list { display: flex; flex-direction: column; gap: 4px; }
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #fff);
  cursor: pointer;
  text-align: left;
}
.switch-row:hover { border-color: #2563eb; }
.switch-row .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
/* A grid child defaults to min-width auto, so a long email address pushes the
   row wider than the modal instead of ellipsing. */
.switch-row .who { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.switch-row .who span { color: var(--muted); font-size: 12px; }

/* The cold-text warning. Quoted wording, so it gets room to breathe rather
   than being squeezed onto one line. */
.cold-warn { line-height: 1.5; }

/* ---- Two-channel inbox ---- */

.inbox-top { display: flex; align-items: center; gap: 8px; }
.whose { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.whose svg { width: 14px; height: 14px; }

.toolbar .ch-chips { margin-left: 10px; }

.convo-row .cr-top { display: flex; align-items: center; gap: 6px; }
.convo-row .ch-ico { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.convo-row .ch-ico svg { width: 13px; height: 13px; }
.convo-row .ch-ico.mail { color: #7c3aed; }
.convo-row .cr-subj {
  font-size: 12.5px;
  font-weight: 600;
  margin: 1px 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bub.mail { border-left: 3px solid #7c3aed; }
.bub .bub-subj {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: 3px;
  opacity: .9;
}
.bub .bub-subj svg { width: 12px; height: 12px; }
.bub .bub-att {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  margin-top: 5px;
  opacity: .8;
}
.bub .bub-att svg { width: 12px; height: 12px; }

.ch-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ch-pick .chip { display: inline-flex; align-items: center; gap: 5px; }
.ch-pick .chip svg { width: 13px; height: 13px; }
.ch-pick .chip[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- Folder rail: unread, rolled up ---- */

/* The whole point of the item is the unread number, so it is the only loud
   thing in the row. The plain total stays beside it in the muted colour the
   rail already used, because "12 conversations, 3 of them unread" is two
   different questions and people ask both. */
.folder-rail .fitem .fd-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-rail .fitem.has-unread .fd-name { font-weight: 700; }
.folder-rail .fitem .count { display: inline-flex; align-items: center; gap: 5px; }
.folder-rail .fitem .unread-badge {
  background: var(--blue, #2563eb);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 17px;
  text-align: center;
}
.folder-rail .fitem .fd-auto { display: inline-flex; color: var(--muted); opacity: .65; }
/* icon() emits an SVG with no width or height and the global default is 16px,
   which is a third of the row. */
.folder-rail .fitem .fd-auto svg { width: 11px; height: 11px; }

/* ---- Filing rules ---- */

.rule-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.rule-row.off { opacity: .6; }
/* On and off without opening the editor. Green for on rather than the usual
   blue, so a rail of rules reads at a glance as a row of lights. */
.rule-row .toggle-btn { min-width: 46px; justify-content: center; }
.rule-row .toggle-btn.on { background: #dcfce7; border-color: #86efac; color: #166534; font-weight: 700; }

.kw-row { display: flex; gap: 8px; align-items: center; }
.kw-row input { flex: 1; min-width: 0; }
.kw-row .match-mode { flex: 0 0 auto; width: auto; }

/* The checkbox used to inherit `.field input { width: 100% }`, which stretched
   it across the modal and left "Rule is on" stranded at the far right. */
.rule-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  cursor: pointer;
}
.rule-toggle input[type=checkbox] {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.rule-runs { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.rule-runs .sect-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.rule-run {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 4px 0;
}
.rule-run span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---- Sharing an inbox with assistants ---- */

.share-row { display: flex; gap: 10px; align-items: center; padding: 8px 0 2px; }
.share-row select { width: auto; flex: 0 0 auto; }
.share-help { padding-bottom: 8px; border-bottom: 1px solid var(--border); }

.dl-list { display: flex; flex-direction: column; gap: 6px; }
.dl-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #fff);
  cursor: pointer;
  text-align: left;
}
.dl-row:hover:not([disabled]) { border-color: #2563eb; }
.dl-row[disabled] { opacity: .45; cursor: not-allowed; }