/* Message compose dock. The entry button inherits shared header styles. */
#message-compose {
  --mg-line: rgba(137, 217, 239, .18);
  --mg-small: 11px;
  --mg-heading: 14px;
  position: fixed;
  left: 34px;
  top: 118px;
  right: auto;
  bottom: auto;
  margin: 0;
  width: min(560px, calc(100vw - 420px));
  height: auto;
  max-width: none;
  max-height: calc(100vh - 230px);
  padding: 0;
  transform: none;
  z-index: 35;
  border: 1px solid var(--mg-line);
  border-radius: 0;
  box-shadow: none;
  background: var(--hp-reading, #091925);
  color: var(--hud-ink, #d6e3e9);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color-scheme: dark;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--hp-muted, #365361) var(--hp-reading, #091925);
  overscroll-behavior: contain;
}

#message-compose[open] { display: flex; flex-direction: column; }
#message-compose, #message-compose * { box-sizing: border-box; }
#message-compose * { min-width: 0; border-radius: 0; box-shadow: none; }
#message-compose > * { flex-shrink: 0; }
#message-compose[hidden], #message-compose [hidden] { display: none !important; }

#message-compose select,
#message-compose input,
#message-compose textarea,
#message-compose button {
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(120, 200, 235, .3);
  background: var(--hp-reading, #0c1b26);
  color: var(--hud-ink, #d6e3e9);
  font: inherit;
  letter-spacing: inherit;
}
#message-compose button {
  color: var(--hud-cyan, #9ddded);
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#message-compose button:hover:not(:disabled) { background: var(--hp-reading, #193342); border-color: var(--hud-cyan, #8ce4fa); }
#message-compose button.primary { background: var(--hud-cyan, #69d9ff); color: var(--hp-reading, #04131c); font-weight: 600; }
#message-compose button.primary:hover:not(:disabled) { background: var(--hud-cyan, #91e4ff); }
#message-compose button:disabled { opacity: .45; cursor: not-allowed; }
#message-compose :focus-visible { outline: 2px solid var(--hud-cyan, #8ce4fa); outline-offset: 2px; }
#message-compose input:disabled,
#message-compose select:disabled,
#message-compose textarea:disabled { opacity: .6; cursor: not-allowed; }
#message-compose input::placeholder,
#message-compose textarea::placeholder { color: var(--hp-muted, #80959e); }
#message-compose option { background: var(--hp-reading, #0c1b26); color: var(--hud-ink, #d6e3e9); }

#message-compose .picker-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mg-line);
  color: var(--hp-muted, #80959e);
  font-size: var(--mg-small);
}
#message-compose .mg-status { margin-left: auto; }
#message-compose .picker-top button {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}
#message-compose .mg-head { padding: 12px 16px; }
#message-compose h3 { margin: 0; font-size: var(--mg-heading); font-weight: 500; }
#message-compose .mg-lead { margin: 6px 0 0; color: var(--hp-muted, #80959e); font-size: var(--mg-small); }
#message-compose .mg-form {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  gap: 6px;
  padding: 0 16px;
}
#message-compose .mg-label { display: block; margin-top: 6px; color: var(--hud-cyan, #9ddded); }
#message-compose .mg-label small { color: var(--hp-muted, #80959e); font-size: var(--mg-small); }
#message-compose .mg-select,
#message-compose .mg-input,
#message-compose .mg-textarea { display: block; width: 100%; }
#message-compose .mg-textarea {
  min-height: 6em;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
#message-compose .mg-hint,
#message-compose .mg-count { margin: 0; color: var(--hp-muted, #80959e); font-size: var(--mg-small); }
#message-compose .mg-count { text-align: right; font-variant-numeric: tabular-nums; }
#message-compose .mg-hint.unavailable,
#message-compose .mg-count.warn { color: var(--hud-amber, #e5aa63); }
#message-compose .mg-hint.unavailable { border-left: 2px solid var(--hud-amber, #e5aa63); padding-left: 8px; }
#message-compose .mg-actions,
#message-compose .mg-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#message-compose .mg-actions { padding: 12px 16px; }
#message-compose .mg-confirm {
  margin: 0 16px 12px;
  padding: 12px;
  border: 1px solid var(--hud-amber, #e5aa63);
  background: var(--hp-reading, #192630);
}
#message-compose .mg-confirm-line { margin: 0 0 8px; color: var(--hud-amber, #e5aa63); }
#message-compose .mg-confirm-body {
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--mg-line);
  background: var(--hp-reading, #0c1b26);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 9em;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
#message-compose .mg-result {
  margin: 0 16px 12px;
  padding: 10px 12px;
  border: 1px solid var(--mg-line);
  border-left: 3px solid var(--hp-muted, #80959e);
  background: var(--hp-reading, #0f1f2b);
}
#message-compose .mg-result[data-tone="ok"] { border-left-color: var(--hp-done, #5fe0c0); }
#message-compose .mg-result[data-tone="error"] { border-left-color: var(--hud-amber, #e5aa63); }
#message-compose .mg-result[data-tone="pending"] { border-left-color: var(--hp-muted, #80959e); }
#message-compose .mg-result[data-tone="ok"] .mg-result-title { color: var(--hp-done, #5fe0c0); }
#message-compose .mg-result[data-tone="error"] .mg-result-title { color: var(--hud-amber, #e5aa63); }
#message-compose .mg-result[data-tone="pending"] .mg-result-title { color: var(--hp-muted, #a1afb7); }
#message-compose .mg-result-title { font-weight: 600; }
#message-compose .mg-result-detail { margin: 4px 0 0; font-size: var(--mg-small); }

#message-compose .mg-log-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--mg-line);
}
#message-compose .section-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--hp-muted, #80959e);
  font-size: var(--mg-small);
}
#message-compose .mg-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 14em;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
#message-compose .mg-log-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  padding: 8px 4px 8px 12px;
  border-bottom: 1px solid var(--mg-line);
}
#message-compose .mg-log-item[data-ok="false"]::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--hud-amber, #e5aa63);
}
#message-compose .mg-log-when { color: var(--hp-muted, #80959e); font-variant-numeric: tabular-nums; }
#message-compose .mg-log-to { font-weight: 500; }
#message-compose .mg-log-text,
#message-compose .mg-log-error { grid-column: 1 / -1; font-size: var(--mg-small); }
#message-compose .mg-log-text { white-space: pre-wrap; }
#message-compose .mg-log-error { color: var(--hud-amber, #e5aa63); }
#message-compose .mg-log-item[data-ok="true"] .mg-log-error { display: none; }
#message-compose .mg-foot {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--mg-line);
  color: var(--hp-muted, #80959e);
  font-size: var(--mg-small);
}

@media (max-width: 760px), (pointer: coarse) {
  #message-compose {
    --mg-small: 12px;
    --mg-heading: 15px;
    left: 12px;
    width: calc(100vw - 24px);
    font-size: 13px;
  }
  #message-compose .picker-top { gap: 6px; padding: 8px 12px; }
  #message-compose .picker-top button { font-size: 25px; }
  #message-compose .mg-head,
  #message-compose .mg-actions,
  #message-compose .mg-log-wrap,
  #message-compose .mg-foot { padding: 12px; }
  #message-compose .mg-form { padding: 0 12px; }
  #message-compose .mg-confirm,
  #message-compose .mg-result { margin-right: 12px; margin-left: 12px; }
}

html[data-hud="v27"] #message-compose {
  & :is(.mg-head,.mg-form,.mg-actions,.mg-log-wrap,.mg-foot) { background:var(--hp-reading); padding:8px; }
  & .mg-form { gap:8px; }
  & :is(.mg-select,.mg-input,.mg-textarea) { background:transparent; }
  & :is(.mg-confirm,.mg-result) { margin:8px; background:var(--hp-reading); border:0; border-left:1px solid var(--hud-amber); }
  & .mg-log-item { display:flex; gap:8px; align-items:baseline; padding:8px 0; flex-wrap:wrap; }
  & .mg-log-to { flex:1; }
  & .mg-log-text { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
html[data-hud="v27"] #message-compose {
  & .mg-log-item { display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr); }
  & .mg-log-text { grid-column:3; }
  & .mg-log-error { grid-column:1/-1; }
}