/* kin — 本地界面
 *
 * 视觉方向:纸与墨。它是一本联系人册子,不是服务器控制台。
 * 分隔靠发丝线和留白,不靠一地圆角卡片;强调色极少,只给"活着的连接"
 * 和"你正在替别人出网"这两件真正重要的事。
 *
 * 不引用任何外部资源:字体是系统栈,图标全部内联 SVG。 */

/* ---------- token ---------- */

:root {
  --paper:      #f6f4ef;
  --surface:    #fffefb;
  --sunk:       #efece4;
  --ink:        #1b1a17;
  --ink-2:      #565148;
  --ink-3:      #8d8778;
  --rule:       #e3ded2;
  --rule-2:     #d3ccbd;

  --accent:     #15594a;
  --accent-ink: #15594a;
  --accent-on:  #ffffff;
  --accent-soft: rgba(21, 89, 74, .13);
  --sel:        rgba(21, 89, 74, .055);

  --warn:       #8a5c12;
  --warn-bg:    #fbf2dd;
  --warn-rule:  #e0c585;

  --danger:     #8d3426;

  --focus:      #15594a;
  --shadow:     0 18px 48px rgba(32, 26, 14, .16);
  --backdrop:   rgba(28, 24, 16, .40);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", monospace;

  --rail: 338px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #121211;
    --surface:    #1a1a18;
    --sunk:       #232220;
    --ink:        #ece7dd;
    --ink-2:      #a6a096;
    --ink-3:      #726c62;
    --rule:       #2b2a26;
    --rule-2:     #3b3933;

    --accent:     #6cbfa4;
    --accent-ink: #7fcdb2;
    --accent-on:  #0f1a17;
    --accent-soft: rgba(108, 191, 164, .16);
    --sel:        rgba(108, 191, 164, .07);

    --warn:       #e0b462;
    --warn-bg:    #27210f;
    --warn-rule:  #5b4a1e;

    --danger:     #e09180;

    --focus:      #6cbfa4;
    --shadow:     0 18px 48px rgba(0, 0, 0, .55);
    --backdrop:   rgba(0, 0, 0, .58);
  }
}

/* ---------- 底座 ---------- */

* { box-sizing: border-box; }

/* 这些面板本身是 flex,UA 的 [hidden]{display:none} 压不住它们。
   界面全靠 .hidden 切面板,所以这一条必须有。 */
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.label {
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.ico { flex: none; opacity: .5; }

/* 一行指纹。全场只有这 20 个字符能证明对面是谁,所以哪里出现都给足字号和
   字距,连字符压暗好数,整行可一键选中。 */
.fpline {
  font: 500 13px/1.65 var(--mono);
  letter-spacing: .09em;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}
.fpline i { color: var(--ink-3); font-style: normal; opacity: .6; }

/* ---------- 顶栏 ---------- */

.top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  padding-right: 22px;
  border-right: 1px solid var(--rule);
  align-self: stretch;
}
.brand__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: lowercase;
}

.me { flex: 1 1 auto; min-width: 0; }
.me__name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.me__fp {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.me__hint { font-size: 11.5px; color: var(--ink-3); }

.fp {
  font: 500 13.5px/1.5 var(--mono);
  letter-spacing: .07em;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: color .14s;
}
.fp:hover { color: var(--ink); }
.fp:hover .ico { opacity: .85; }
.fp i { color: var(--ink-3); font-style: normal; opacity: .6; }

.top__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 4px 10px 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--paper);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.chip--on { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
.chip--on .dot { background: var(--accent); }
.chip--wait { color: var(--warn); border-color: var(--warn-rule); background: var(--warn-bg); }
.chip--wait .dot { background: var(--warn); }
.chip--err { color: var(--danger); border-color: var(--danger); background: transparent; }
.chip--err .dot { background: var(--danger); }
.chip--muted { color: var(--ink-3); }

/* 可被查找。登记进目录是真有代价的,所以开关旁边一直写着代价,
   不折进 tooltip 里。开着的时候跟"借出口"用同一个琥珀色 —— 都是让外面多知道你一点。 */
.disc {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-right: 14px;
  border-right: 1px solid var(--rule);
}
.disc__hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 30em;   /* 宽屏上刚好一行,窄屏自己折 */
}
.disc--on .disc__hint { color: var(--warn); }
.sw--disc:not(.sw--on) .sw__text { color: var(--ink-2); }

/* ---------- 演示条 ---------- */

.ribbon {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 22px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-rule);
  color: var(--warn);
  font-size: 12.5px;
}
.ribbon__tag {
  font-size: 10px;
  letter-spacing: .16em;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 2px 6px;
  flex: none;
}
.ribbon__text { flex: 1 1 auto; min-width: 12em; }
.ribbon__acts { display: flex; gap: 14px; flex-wrap: wrap; }

.lnk {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  opacity: .8;
}
.lnk:hover { opacity: 1; }

/* ---------- 两栏 ---------- */

.body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

@media (min-width: 861px) {
  body { height: 100vh; overflow: hidden; }
  .rail, .main { min-height: 0; }
  .rail { overflow: hidden; }
  .friends { overflow-y: auto; }
}

/* ---------- 联系人栏 ---------- */

.rail {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--rule);
}

.rail__head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 18px 11px;
}
.count { font: 12px/1 var(--mono); color: var(--ink-3); }

.friends { flex: 1 1 auto; }

.rail__empty {
  padding: 4px 18px 20px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-3);
}

.rail__note {
  flex: none;
  padding: 9px 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--warn);
  background: var(--warn-bg);
  border-top: 1px solid var(--warn-rule);
}

.rail__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
}
.rail__foot .btn { flex: 1 1 0; }

/* 一行 = 一个人。三行文字,靠发丝线分开,像一本册子。 */
.fr {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding: 0 18px;
  transition: background .14s;
}
.fr:hover { background: var(--sel); }
.fr--active { background: var(--sel); }
.fr--active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
}

.fr__hit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 9px;
  row-gap: 3px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 13px 0 0;
  margin: 0;
  cursor: pointer;
}
.fr__hit .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
  flex: none;
  align-self: center;
  transform: translateY(-1px);
}
.fr--on .fr__hit .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.fr__name {
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -.003em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr__state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.fr--on .fr__state { color: var(--accent-ink); }

.fr__fp {
  grid-column: 2;
  font: 11px/1.5 var(--mono);
  letter-spacing: .04em;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr__traffic {
  grid-column: 3;
  font: 11px/1.5 var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fr__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0 12px;
  margin-left: 16px;
}

.fr__forget {
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s, color .14s;
}
.fr:hover .fr__forget,
.fr:focus-within .fr__forget { opacity: 1; }
.fr__forget:hover { color: var(--danger); }
@media (hover: none) { .fr__forget { opacity: 1; } }

/* 待处理的好友请求。比册子里的一行人显眼一档:左边一道墨线 + 一层底色。
   但它只是插在前面的一张便签,不该把联系人册子挤下去。 */
.reqs {
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sel);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 2px 0 0 var(--accent);
}
.reqs__head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 15px 18px 9px;
}
.reqs__head .label { color: var(--accent-ink); }
.reqs__note {
  flex: none;
  padding: 0 18px 11px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
.reqs__list {
  flex: 0 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 46vh;
}

.req { padding: 2px 18px 14px; }
.req + .req {
  border-top: 1px solid var(--rule);
  padding-top: 13px;
}
.req__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.req__name {
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -.003em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.req__at {
  flex: none;
  font: 11px/1.5 var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
}
.req__fp { margin-top: 4px; }
.req__msg {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--rule-2);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  word-break: break-word;
}
.req__acts { display: flex; gap: 8px; margin-top: 11px; }

/* 出口开关。它值得一整句话,不是一个图标。 */
.sw {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.sw input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.sw__text {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .14s;
}
.sw--on .sw__text { color: var(--warn); }
.sw__track {
  position: relative;
  flex: none;
  width: 30px; height: 17px;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--sunk);
  transition: background .16s, border-color .16s;
}
.sw__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform .16s, background .16s;
}
.sw input:checked + .sw__track { background: var(--warn); border-color: var(--warn); }
.sw input:checked + .sw__track::after { transform: translateX(13px); background: var(--surface); }
.sw input:focus-visible + .sw__track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 主区 ---------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 这条提示是产品的伦理底线,不许藏在角落。 */
.warn {
  flex: none;
  display: flex;
  gap: 12px;
  padding: 14px 22px 15px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-rule);
  box-shadow: inset 3px 0 0 var(--warn);
  color: var(--warn);
}
.warn__ico { flex: none; margin-top: 2px; }
.warn__body { min-width: 0; }
.warn__line {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.45;
}
.warn__sub {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.65;
  opacity: .82;
  max-width: 62ch;
}

/* 会话 */
.session {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shead {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.shead__main { flex: 1 1 18em; min-width: 0; }
.shead__top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.shead__status {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
}
.shead__peer { font-size: 13px; color: var(--ink-2); }
.shead__sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 62ch;
}
.shead__err { margin-top: 6px; font-size: 12.5px; color: var(--danger); }

.meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 11px;
  font: 11.5px/1.5 var(--sans);
  color: var(--ink-3);
}
.meta b {
  font: 500 11.5px/1.5 var(--mono);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* 流向。整个产品就是这一行。 */
.route {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.route__node {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--paper);
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route__node--me {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-weight: 550;
}
.route__node--warn {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-bg);
  font-weight: 550;
}
.route__node--net { color: var(--ink-3); border-style: dashed; }
.route__arr { color: var(--ink-3); font: 12px/1 var(--mono); }

/* 等待接入时就地显示邀请 */
.wait-box {
  margin-top: 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  padding: 11px 13px;
}
.wait-box .code { margin: 0 0 9px; max-height: 92px; }
.wait-box .dlg__row { margin: 0; }

/* 聊天 */
.log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.log__empty {
  margin: auto;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.8;
}

.msg {
  max-width: min(74%, 540px);
  padding: 8px 12px 7px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}
.msg--mine {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 3px;
}
.msg--them {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 3px;
}
.msg--sys {
  align-self: center;
  max-width: 46ch;
  text-align: center;
  background: none;
  border: 0;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.msg__at {
  display: block;
  margin-top: 2px;
  font: 10.5px/1.4 var(--mono);
  opacity: .5;
  font-variant-numeric: tabular-nums;
}
.msg--mine .msg__at { text-align: right; }

.composer {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 12px 22px 14px;
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.composer input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 14.5px;
  padding: 9px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.composer input::placeholder { color: var(--ink-3); }
.composer input:focus { outline: none; border-color: var(--ink-3); }
.composer input:disabled { background: var(--sunk); color: var(--ink-3); cursor: not-allowed; }

.send {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: opacity .14s;
}
.send:disabled { opacity: .35; cursor: not-allowed; }

/* 空状态 */
.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 64px;
  gap: 0;
}
.hero__fig { color: var(--ink-3); width: 200px; max-width: 100%; }
.hero__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-3);
}
.hero__title { margin-top: 28px; font-size: 21px; }
.hero__text {
  margin-top: 11px;
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.hero__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.hero__alt { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }
.hero__alt .lnk { color: var(--ink-2); opacity: 1; }
.hero__alt .lnk:hover { color: var(--ink); }
.hero__note { margin-top: 26px; font-size: 12px; color: var(--ink-3); }

/* ---------- 控件 ---------- */

.btn {
  font: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  padding: 8px 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s, background .14s, opacity .14s;
}
.btn:hover { border-color: var(--ink-3); }
.btn--primary {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.btn--primary:hover { opacity: .88; border-color: var(--ink); }
.btn--lg { padding: 10px 20px; font-size: 14px; }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }
.btn--quiet { color: var(--ink-2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 对话框 ---------- */

dialog {
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  width: min(520px, calc(100vw - 28px));
  max-width: none;
}
dialog::backdrop { background: var(--backdrop); }

.dlg { margin: 0; }
.dlg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px 13px;
}
.dlg__head h2 { font-size: 16.5px; }
.x {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.x:hover { color: var(--ink); }

.dlg__body { padding: 0 20px 4px; }
.dlg__lead { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.dlg__lead code {
  font: 12.5px var(--mono);
  background: var(--sunk);
  padding: 1px 5px;
  border-radius: 2px;
}
.dlg__hint { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.dlg__err { margin-top: 10px; font-size: 12.5px; color: var(--danger); }
.dlg__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.tagline { font-size: 12px; color: var(--ink-3); }
.tagline b { font: 500 12.5px var(--mono); letter-spacing: .08em; color: var(--ink-2); }

.dlg__foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 20px;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}

.code {
  margin: 13px 0 0;
  padding: 11px 12px;
  max-height: 148px;
  overflow: auto;
  font: 12px/1.75 var(--mono);
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

textarea#joinCode {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  font: 12.5px/1.7 var(--mono);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  resize: vertical;
  word-break: break-all;
}
textarea#joinCode:focus { outline: none; border-color: var(--ink-3); }

/* 指纹输入框。它是这个面板唯一的输入,给它整行和大字号 —— 用户是在抄一串
   念出来的字符,抄错一个就找错人。右边那个计数器告诉他还差几个。 */
.fpin { position: relative; margin-top: 14px; }
.fpin__box {
  display: block;
  width: 100%;
  padding: 11px 56px 11px 13px;
  font: 500 16px/1.5 var(--mono);
  letter-spacing: .12em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.fpin__box::placeholder { color: var(--ink-3); }
.fpin__box:focus { outline: none; border-color: var(--ink-3); }
.fpin__n {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font: 11.5px/1 var(--mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.fpin--full .fpin__box { border-color: var(--accent); }
.fpin--full .fpin__n { color: var(--accent-ink); }

/* 查找结果。查到 / 查无此人 / 已经是联系人,共用这张卡,
   靠左边那道线区分:墨绿=有下一步,灰=没有。 */
.found { margin-top: 15px; }
.found__card {
  padding: 13px 14px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: inset 2px 0 0 var(--accent);
}
.found__card--none { box-shadow: inset 2px 0 0 var(--rule-2); }
.found__name {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.found__tag {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 1px 6px;
}
.found__fp { margin-top: 6px; }
.found__say {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.found__msg { display: block; margin-top: 13px; }
.found__msg .label { display: block; margin-bottom: 5px; }
.found__msg input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.found__msg input::placeholder { color: var(--ink-3); }
.found__msg input:focus { outline: none; border-color: var(--ink-3); }
.found__act { margin-top: 13px; }

/* 确认框里再摆一遍指纹:同意一个人之前,这是最后一次核对的机会。 */
.cf__fp {
  margin-top: 12px;
  padding: 9px 11px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.inline-warn {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
  border-radius: 2px;
}
.inline-warn svg { flex: none; margin-top: 2px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 9px 15px;
  font-size: 13px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.toast--err { background: var(--danger); color: #fff; }

/* ---------- 窄屏 ---------- */

@media (max-width: 860px) {
  .body { grid-template-columns: minmax(0, 1fr); }

  .top { gap: 14px; padding: 12px 16px; }
  .brand { padding-right: 14px; }
  .me__hint { display: none; }
  .top__right { width: 100%; }

  .ribbon { padding: 8px 16px; }

  /* 窄屏按阅读顺序竖排:先看出口警示,再看会话,最后是联系人册子。 */
  .main { order: 1; }
  .rail {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--rule);
  }
  .friends { flex: 0 0 auto; }

  .warn { padding: 13px 16px 14px; }
  .shead { padding: 16px 16px 14px; }
  .log { padding: 18px 16px 6px; min-height: 200px; max-height: 54vh; }
  .composer { padding: 11px 16px 13px; }
  .msg { max-width: 86%; }

  .hero { padding: 44px 20px 48px; }
  .hero__title { font-size: 19px; }

  .fr { padding: 0 16px; }
  .rail__head, .rail__empty, .rail__note, .rail__foot { padding-left: 16px; padding-right: 16px; }

  /* 顶栏竖过来之后,代价那句话自己占一行,别跟开关挤。 */
  .disc { flex: 1 1 100%; padding-right: 0; border-right: 0; }
  .disc__hint { max-width: none; }

  /* 窄屏整页滚动,请求列表没必要再自己开一个滚动条。 */
  .reqs__list { max-height: none; }
  .reqs__head, .reqs__note, .req { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 420px) {
  .fp { font-size: 12.5px; letter-spacing: .04em; }
  /* 对话框只剩 362px 宽,24 个字符要全看得见才行。 */
  .fpin__box { font-size: 14px; letter-spacing: .07em; padding-right: 50px; }
  .fr__traffic { display: none; }
  .rail__foot { flex-wrap: wrap; }
}

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