/* Quick actions: a person's own buttons beside Infographic on the text and
   email composers (public/js/quickactions.js). Its own file, like every other
   feature, so two features never edit the same stylesheet. */

/* The strip's buttons join the row they are inserted into, as if they had been
   written into it, so they wrap in order with Infographic and Attach rather than
   bunching up in a box of their own. The Inbox reply row does not wrap by
   itself, so it is told to only when a strip is in it. */
.qa-strip { display: contents; }
.thread-compose .row:has(> .qa-strip) { flex-wrap: wrap; align-items: center; }
.qa-btn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-btn svg, .qa-add svg { width: 13px; height: 13px; vertical-align: -2px; }
.qa-btn.qa-missing { opacity: .65; text-decoration: line-through; }
.qa-add { border-style: dashed; color: var(--muted); }
.qa-add:hover { color: var(--blue); }

/* The dialog. A [hidden] rule of its own because .field and friends set a
   display, and a class that sets display beats the attribute. */
.qa-modal [hidden], #qa-cancel-edit[hidden] { display: none !important; }
.qa-modal .field { margin-bottom: 12px; }
.qa-choice { display: flex; flex-wrap: wrap; gap: 18px; }
/* Inside a .field, every label is a bold block and every input is full width
   (styles.css), which stacks a radio on top of its own word. Put them back on
   one line. */
.qa-choice .check-row {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 13px; font-weight: 400; color: var(--text);
}
.qa-choice input[type="radio"] { width: auto; margin: 0; padding: 0; border: 0; }
.qa-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.qa-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
}
.qa-row.on { border-color: var(--blue); }
.qa-row-main { flex: 1; min-width: 0; }
.qa-row-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-row-ico { color: var(--muted); display: inline-flex; }
.qa-row-ico svg { width: 14px; height: 14px; }
.qa-gone { color: var(--red); }
.qa-form-title { margin: 14px 0 8px; font-size: 14px; }
.qa-tpls {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow-y: auto; margin-top: 6px; padding: 4px;
  border: 1px solid var(--border); border-radius: 8px;
}
.qa-tpl-group {
  padding: 6px 6px 2px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.qa-tpl {
  display: block; width: 100%; padding: 6px 8px; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 6px; color: inherit;
}
.qa-tpl:hover { background: var(--bg); }
.qa-tpl.on { border-color: var(--blue); background: rgba(37, 99, 235, .08); }
.qa-tpl-body { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qa-newwrap textarea, #qa-newwrap input[type="text"], #qa-tplq, #qa-label { width: 100%; }
#qa-newwrap input[type="text"] { margin-bottom: 6px; }
.qa-merge { margin-top: 6px; line-height: 2; }
.qa-mfchip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.qa-err { min-height: 1em; color: var(--red); }

/* The Task and Appointment halves of the dialog: "in [N] days at [time]" sits on
   one line, and the boxes in it are as wide as what goes in them rather than
   the full-width every .field input gets. */
.qa-modal .qa-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.qa-modal .qa-when input[type="number"] { width: 84px; }
.qa-modal .qa-when input[type="time"] { width: 130px; }