/* Editorial utility skin shared by the private messaging and group chat views. */

:root {
  color-scheme: light !important;
  --ed-ink: #11130f;
  --ed-ink-2: #242720;
  --ed-paper: #f3f4ef;
  --ed-paper-2: #fff;
  --ed-soft: #e9ece4;
  --ed-line: #c9cec3;
  --ed-muted: #697068;
  --ed-orange: #f05a2a;
  --ed-lime: #c9ef42;
  --bg: var(--ed-paper) !important;
  --bg2: var(--ed-paper-2) !important;
  --bg3: var(--ed-soft) !important;
  --line: var(--ed-line) !important;
  --line2: #9fa69c !important;
  --text: var(--ed-ink) !important;
  --muted: var(--ed-muted) !important;
  --faint: #858d83 !important;
  --accent: var(--ed-orange) !important;
  --accent-ink: #fff !important;
  --danger: #c83f36 !important;
}

* {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html,
body {
  background: var(--ed-paper) !important;
  color: var(--ed-ink) !important;
}

body,
body * {
  font-family: "Segoe UI Variable Text", "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

body::before,
body::after {
  display: none !important;
  animation: none !important;
}

::selection {
  background: var(--ed-lime);
  color: var(--ed-ink);
}

a {
  color: var(--ed-orange) !important;
}

:focus-visible {
  outline: 2px solid var(--ed-orange);
  outline-offset: 2px;
}

/* Login */
body:has(.box) {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 48px max(38px, calc((100vw - 1220px) / 2)) !important;
  overflow: hidden;
  background: var(--ed-ink) !important;
}

body:has(.box)::before {
  display: none !important;
}

.box {
  display: flex;
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  min-height: auto;
  flex-direction: column;
  justify-content: center;
  padding: 46px 42px !important;
  border: 0 !important;
  border-top: 6px solid var(--ed-orange) !important;
  background: var(--ed-paper) !important;
  animation: none !important;
}

.box h1 {
  margin: 0 0 28px !important;
  color: var(--ed-ink) !important;
  font-family: "Bahnschrift", "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 44px !important;
  line-height: 1;
  text-align: left !important;
  animation: none !important;
}

.box input {
  min-height: 50px;
  margin-bottom: 12px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ed-line) !important;
  background: var(--ed-paper) !important;
  color: var(--ed-ink) !important;
  font-size: 14px !important;
}

.box input:focus {
  border-color: var(--ed-orange) !important;
  box-shadow: inset 3px 0 0 var(--ed-orange) !important;
}

.box button {
  min-height: 48px;
  border: 1px solid var(--ed-ink) !important;
  background: var(--ed-ink) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700;
}

.box button:hover {
  border-color: var(--ed-orange) !important;
  background: var(--ed-orange) !important;
}

.box #im-guest-btn {
  margin-top: 14px !important;
  border: 1px solid var(--ed-line) !important;
  background: transparent !important;
  color: var(--ed-ink) !important;
}

.box #im-guest-btn:hover {
  border-color: var(--ed-orange) !important;
  color: var(--ed-orange) !important;
}

.box .hint {
  margin: 12px 0 0 !important;
  color: var(--ed-muted) !important;
  font-size: 12px !important;
  text-align: left !important;
}

.box .err {
  margin-bottom: 16px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-left: 4px solid var(--danger) !important;
  background: #fae9e6 !important;
  color: #8c2922 !important;
}

/* Private messages and group chat */
body:has(.wrap),
body:has(.wrapx) {
  background: var(--ed-paper) !important;
}

header {
  min-height: 66px;
  padding: 0 18px !important;
  padding-top: env(safe-area-inset-top) !important;
  border-bottom: 1px solid #30342d !important;
  background: var(--ed-ink) !important;
  color: #fff !important;
  animation: none !important;
}

header .me,
header .ttl {
  color: #fff !important;
  font-family: "Bahnschrift", "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 18px !important;
  font-weight: 700 !important;
}

header button {
  min-height: 36px;
  padding: 0 12px !important;
  border: 1px solid #60675d !important;
  background: transparent !important;
  color: #eef1e9 !important;
  font-size: 12px !important;
}

header button:hover {
  border-color: var(--ed-orange) !important;
  background: var(--ed-orange) !important;
  color: #fff !important;
}

.wrap,
.wrapx {
  background: var(--ed-paper) !important;
}

.wrapx {
  border-color: var(--ed-line) !important;
}

.side {
  border-color: var(--ed-line) !important;
  background: var(--ed-paper-2) !important;
}

.add {
  padding: 14px !important;
  border-color: var(--ed-line) !important;
}

.add input,
.composer textarea,
.sheet input {
  border: 1px solid var(--ed-line) !important;
  background: var(--ed-paper) !important;
  color: var(--ed-ink) !important;
}

.add input:focus,
.composer textarea:focus,
.sheet input:focus {
  border-color: var(--ed-orange) !important;
  box-shadow: inset 3px 0 0 var(--ed-orange) !important;
}

.add button,
.composer button,
.toolbar button,
.sheet .btn,
.chatHead .op {
  border: 1px solid var(--ed-ink) !important;
  background: var(--ed-ink) !important;
  color: #fff !important;
  font-weight: 700;
}

.add button:hover,
.composer button:hover,
.toolbar button:hover,
.sheet .btn:hover,
.chatHead .op:hover {
  border-color: var(--ed-orange) !important;
  background: var(--ed-orange) !important;
  color: #fff !important;
}

.toolbar button.ghost,
.sheet .btn.gray {
  border-color: var(--ed-line) !important;
  background: transparent !important;
  color: var(--ed-ink) !important;
}

.sec-title {
  border-color: var(--ed-line) !important;
  background: var(--ed-paper) !important;
  color: var(--ed-muted) !important;
  letter-spacing: 0 !important;
}

.item,
.gi,
.memRow,
.pickRow {
  border-color: var(--ed-line) !important;
  color: var(--ed-ink) !important;
  transition: background-color .14s ease, padding .14s ease;
}

.item:hover,
.gi:hover,
.item.active {
  background: var(--ed-soft) !important;
}

.item.active {
  box-shadow: inset 4px 0 0 var(--ed-orange) !important;
}

.av {
  border: 1px solid var(--ed-ink) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ed-ink) !important;
}

.badge {
  border-radius: 99px !important;
  background: var(--ed-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.chat,
.chatHead,
.chat .peer,
.wrapx .page {
  background: var(--ed-paper-2) !important;
}

.chatHead,
.chat .peer {
  border-color: var(--ed-line) !important;
}

.chat .peer,
.chatHead .nm {
  color: var(--ed-ink) !important;
  font-weight: 700 !important;
}

.msgs {
  background:
    linear-gradient(rgba(17, 19, 15, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 15, .035) 1px, transparent 1px),
    var(--ed-paper) !important;
  background-size: 32px 32px !important;
}

.sender,
.chatHead .sub {
  color: var(--ed-muted) !important;
}

.bubble,
.mine .bubble,
.other .bubble,
.bubble.mine,
.bubble.peer-msg {
  max-width: 72% !important;
  padding: 10px 13px !important;
  border-radius: 2px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.mine .bubble,
.bubble.mine {
  border: 1px solid var(--ed-ink) !important;
  background: var(--ed-ink) !important;
  color: #fff !important;
}

.other .bubble,
.bubble.peer-msg {
  border: 1px solid var(--ed-line) !important;
  background: #fff !important;
  color: var(--ed-ink) !important;
}

.bubble.atme {
  box-shadow: inset 3px 0 0 var(--ed-orange) !important;
}

.sys {
  border: 1px solid var(--ed-line) !important;
  border-radius: 99px !important;
  background: #fff !important;
  color: var(--ed-muted) !important;
}

.composer {
  border-color: var(--ed-line) !important;
  background: var(--ed-paper-2) !important;
}

.composer .add {
  border-color: var(--ed-line) !important;
  background: transparent !important;
  color: var(--ed-ink) !important;
}

.composer .send {
  padding: 0 18px !important;
}

.atPop {
  border: 1px solid var(--ed-ink) !important;
  background: #fff !important;
  box-shadow: 8px 8px 0 rgba(17, 19, 15, .15) !important;
}

.atPop .it {
  border-color: var(--ed-line) !important;
}

.atPop .it:hover,
.atPop .it:active {
  background: var(--ed-lime) !important;
}

.mask {
  background: rgba(17, 19, 15, .52) !important;
}

.sheet {
  border: 0 !important;
  border-top: 5px solid var(--ed-orange) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ed-ink) !important;
}

.sheet h3 {
  color: var(--ed-ink) !important;
  font-family: "Bahnschrift", "Arial Narrow", "Microsoft YaHei UI", sans-serif;
}

.pickList {
  border: 1px solid var(--ed-line) !important;
  border-radius: 0 !important;
  background: var(--ed-paper) !important;
}

.toast {
  border: 1px solid var(--ed-ink) !important;
  border-radius: 0 !important;
  background: var(--ed-ink) !important;
  color: #fff !important;
}

@media (max-width: 620px) {
  body:has(.box) {
    display: block !important;
    overflow: auto;
    padding: 0 !important;
    background: var(--ed-paper) !important;
  }

  body:has(.box)::before {
    display: none !important;
  }

  .box {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh;
    padding: 32px 22px !important;
    border-top: 0 !important;
  }

  .box h1 {
    font-size: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}