:root {
  --social-ink: #f4e9c8;
  --social-muted: #aab7a3;
  --social-leaf: #95cf8b;
  --social-blue: #8bd6e7;
  --social-violet: #d5b7ef;
  --social-paper: rgba(18, 30, 23, .965);
  --social-line: rgba(222, 192, 112, .2);
}

#fieldnote[hidden],
#chatcontext[hidden],
#chatreply[hidden],
#chattarget[hidden] { display: none !important; }

#chatlog {
  width: min(390px, calc(100vw - 28px));
  height: min(540px, calc(100dvh - 34px));
  max-height: min(68dvh, 540px);
  overflow: hidden;
  color: var(--social-ink);
  background:
    linear-gradient(180deg, rgba(33, 51, 38, .97), var(--social-paper)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(240, 213, 139, .035) 28px);
  border-color: rgba(206, 178, 100, .36);
  border-radius: 15px;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 250, 223, .07);
}

#chatloghdr {
  min-height: 49px;
  padding: 5px 7px 5px 8px;
  gap: 3px;
  border-bottom-color: var(--social-line);
  background: rgba(11, 21, 16, .38);
}

#chattabs {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.chat-tab {
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--social-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font: 700 11px ui-rounded, system-ui, sans-serif;
}

.chat-tab .ui-icon { width: 17px; height: 17px; }
.chat-tab:hover { color: var(--social-ink); background: rgba(255, 255, 255, .035); }
.chat-tab.on {
  color: #f9e7ad;
  border-color: rgba(218, 186, 98, .28);
  background: linear-gradient(180deg, rgba(114, 101, 54, .3), rgba(86, 76, 41, .14));
}

#chatloghdr #chatlogx {
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 8px;
  flex: none;
  border-radius: 9px;
}

#chatloghdr #chatlogx .ui-icon { width: 18px; height: 18px; }

#chatsubhdr {
  min-height: 31px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--social-muted);
  border-bottom: 1px solid rgba(198, 168, 91, .12);
  font-size: 10.5px;
  letter-spacing: .02em;
}

#chatonline::before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--social-leaf);
  box-shadow: 0 0 8px rgba(149, 207, 139, .55);
}

#chatlog.cross-world #chatonline::after {
  content: " · both worlds";
  color: #d5c68f;
}

#voicelog {
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 100px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 163, 101, .38) transparent;
}

.chat-message {
  position: relative;
  padding: 7px 5px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 43px;
  gap: 7px;
  border-radius: 10px;
  transition: background .14s ease;
}

.chat-message:hover,
.chat-message:focus-within { background: rgba(255, 255, 255, .035); }
.chat-message.mine { background: rgba(80, 120, 82, .07); }
.chat-message.whisper { background: rgba(126, 87, 151, .105); }
.chat-message.npc_scene { background: rgba(104, 76, 138, .08); }
.chat-message.activity { background: rgba(139, 117, 53, .08); }

.chat-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--social-blue);
  border: 1px solid rgba(139, 214, 231, .2);
  border-radius: 10px 10px 10px 4px;
  background: rgba(65, 115, 112, .17);
}

.chat-message.npc_scene .chat-avatar { color: var(--social-violet); border-color: rgba(213, 183, 239, .22); }
.chat-message.activity .chat-avatar { color: #e7c873; border-color: rgba(231, 200, 115, .24); }
.chat-avatar .ui-icon { width: 17px; height: 17px; }
.chat-message-body { min-width: 0; }

.chat-message-meta {
  min-height: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.chat-author {
  max-width: 144px;
  padding: 0;
  overflow: hidden;
  color: var(--social-blue);
  background: none;
  border: 0;
  cursor: pointer;
  font: 750 11.5px ui-rounded, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-author:disabled { cursor: default; }
.chat-message.npc_scene .chat-author { color: var(--social-violet); }
.chat-message.activity .chat-author { color: #e7c873; }
.chat-world {
  padding: 1px 5px;
  color: #b9af8f;
  background: rgba(217, 187, 105, .08);
  border-radius: 5px;
  font-size: 9px;
}

.chat-message time { margin-left: auto; color: #77877b; font-size: 9px; }
.chat-text { color: var(--social-ink); font-size: 12.5px; line-height: 1.42; overflow-wrap: anywhere; }
.chat-reply-quote {
  margin: 0 0 4px;
  padding-left: 7px;
  overflow: hidden;
  color: #909f93;
  border-left: 2px solid rgba(139, 214, 231, .32);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reactions { display: flex; gap: 4px; margin-top: 4px; }
.chat-reactions span {
  padding: 1px 6px;
  color: #d9d5bd;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  font-size: 10px;
}

.chat-message-tools {
  display: flex;
  align-items: flex-start;
  opacity: .3;
  transition: opacity .14s;
}

.chat-message:hover .chat-message-tools,
.chat-message:focus-within .chat-message-tools { opacity: 1; }
.chat-message-tools button {
  width: 22px;
  height: 27px;
  padding: 3px;
  display: grid;
  place-items: center;
  color: #a7b2a8;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.chat-message-tools button:hover { color: #f5df9f; background: rgba(255, 255, 255, .05); }
.chat-message-tools .ui-icon { width: 14px; height: 14px; }

.chat-empty {
  min-height: 122px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #93a297;
  text-align: center;
}

.chat-empty b { color: #d9cda8; font-size: 13px; }
.chat-empty span { max-width: 250px; font-size: 11.5px; line-height: 1.45; }
.chat-people { width: 100%; margin-top: 9px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chat-people button {
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c9e7e1;
  background: rgba(72, 113, 105, .18);
  border: 1px solid rgba(139, 214, 231, .18);
  border-radius: 9px;
  cursor: pointer;
  font: 11px ui-rounded, system-ui, sans-serif;
}
.chat-people .ui-icon { width: 14px; height: 14px; }
.chat-people em { color: #809085; font-size: 11px; }

#chatreply,
#chattarget {
  min-height: 28px;
  padding: 4px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #aebbb0;
  background: rgba(8, 16, 12, .42);
  border-top: 1px solid rgba(198, 168, 91, .12);
  font-size: 10.5px;
}

#chatreply span,
#chattarget span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatreply button,
#chattarget button {
  width: 24px;
  height: 24px;
  padding: 4px;
  color: #9aaba0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
#chatreply .ui-icon,
#chattarget .ui-icon { width: 14px; height: 14px; }

#chatsend {
  min-height: 53px;
  padding: 7px;
  align-items: center;
  background: rgba(8, 17, 12, .5);
  border-top-color: rgba(198, 168, 91, .17);
}

#chatmsg {
  min-height: 38px;
  padding: 8px 10px;
  color: #f7edcf;
  background: rgba(10, 20, 15, .95);
  border-color: rgba(198, 168, 91, .28);
  border-radius: 9px;
  font-size: 14px;
}

#chatmsg:focus {
  border-color: rgba(149, 207, 139, .7);
  box-shadow: 0 0 0 2px rgba(149, 207, 139, .08);
}

#chatgo {
  width: 39px;
  height: 39px;
  padding: 8px;
  flex: none;
  color: #dfead6;
  border-color: rgba(149, 207, 139, .35);
  border-radius: 10px;
}

#chatgo:disabled,
#chatmsg:disabled { opacity: .45; cursor: default; }

#chatcontext {
  position: fixed;
  z-index: 45;
  width: 168px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(15, 25, 19, .99);
  border: 1px solid rgba(198, 168, 91, .35);
  border-radius: 11px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
}

#chatcontext button {
  min-height: 36px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dce6d8;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font: 12px ui-rounded, system-ui, sans-serif;
  text-align: left;
}

#chatcontext button:hover { background: rgba(255, 255, 255, .055); }
#chatcontext .ui-icon { width: 16px; height: 16px; color: #a9c8bd; }
#chatcontext.reaction-picker {
  width: auto;
  padding: 4px;
  flex-direction: row;
}
#chatcontext.reaction-picker .reaction-choice {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
}

#chatlogbtn {
  width: 45px;
  height: 45px;
  padding: 10px;
  display: grid;
  place-items: center;
  color: #d6e6d4;
  background: linear-gradient(180deg, rgba(38, 61, 45, .96), rgba(20, 35, 26, .97));
  border-color: rgba(196, 174, 105, .38);
  border-radius: 14px 14px 14px 6px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .35);
}

#chatlogbtn .ui-icon { width: 22px; height: 22px; }
#chatlogbtn.has-unread { border-color: rgba(149, 207, 139, .6); box-shadow: 0 8px 25px rgba(0, 0, 0, .35), 0 0 16px rgba(149, 207, 139, .12); }
#chatlogbtn .ct {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: #9ad891;
  border: 2px solid #14231a;
  border-radius: 10px;
  font-size: 9px;
}

#chatlogbtn .ct.dot {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  right: -1px;
  top: -1px;
  border-width: 1px;
}

#fieldnote {
  position: fixed;
  left: calc(68px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px));
  z-index: 4;
  width: min(330px, calc(100vw - 130px));
  min-height: 40px;
  padding: 7px 11px 7px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dfe8d9;
  background: linear-gradient(90deg, rgba(21, 37, 27, .94), rgba(17, 29, 22, .86));
  border: 1px solid rgba(149, 207, 139, .25);
  border-radius: 7px 12px 12px 7px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
  pointer-events: none;
  font-size: 11.5px;
  line-height: 1.35;
}

#fieldnote.arrive { animation: fieldnote-in .24s cubic-bezier(.2, .9, .25, 1.15); }
#fieldnote b { color: #99d8cf; }
.fieldnote-glyph {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  color: #9ad891;
  background: rgba(149, 207, 139, .1);
  border-radius: 9px 9px 9px 3px;
}
.fieldnote-glyph .ui-icon { width: 16px; height: 16px; }
@keyframes fieldnote-in { from { opacity: 0; transform: translateX(-9px) scale(.98); } to { opacity: 1; transform: none; } }

body.chatlog #fieldnote,
body.convo #fieldnote,
body.selftalk #fieldnote,
body.cine #fieldnote,
body.riding #fieldnote,
body.tut #fieldnote,
body.boot #fieldnote { display: none !important; }

.npc-audience {
  min-width: 112px;
  height: 34px;
  padding: 0 9px;
  display: none;
  align-items: center;
  gap: 6px;
  color: #b8c2b7;
  background: rgba(8, 16, 12, .42);
  border: 1px solid rgba(198, 168, 91, .22);
  border-radius: 9px;
  cursor: pointer;
  font: 11px ui-rounded, system-ui, sans-serif;
}

body.convo .npc-audience { display: inline-flex; }
.npc-audience .ui-icon { width: 15px; height: 15px; }
.npc-audience.open { color: #d9efd2; border-color: rgba(149, 207, 139, .5); background: rgba(79, 117, 75, .21); }

@media (max-width: 560px) {
  #chatlog {
    left: max(7px, env(safe-area-inset-left, 0px));
    right: max(7px, env(safe-area-inset-right, 0px));
    bottom: calc(7px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px));
    width: auto;
    height: min(68dvh, 540px);
    /* The keyboard offset also moves the sheet upward. Bound its height by the
       space left above that offset so the header never slips off-screen. */
    max-height: calc(100dvh - var(--kb, 0px) - env(safe-area-inset-bottom, 0px) - 14px);
    border-radius: 15px;
  }

  #chatloghdr { min-height: 54px; padding-left: 5px; padding-right: 5px; }
  .chat-tab { height: 44px; min-height: 44px; flex: 1; padding: 0 4px; }
  .chat-tab span { display: none; }
  .chat-tab .ui-icon { width: 19px; height: 19px; }
  #chatloghdr #chatlogx { width: 44px; height: 44px; }
  #voicelog { padding: 7px 6px; }
  .chat-message { padding: 7px 3px; grid-template-columns: 30px minmax(0, 1fr) 88px; gap: 6px; }
  .chat-message-tools { opacity: .72; }
  .chat-message-tools button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .chat-text { font-size: 13.5px; line-height: 1.42; }
  .chat-author { font-size: 12px; }
  #chatmsg { min-height: 44px; font-size: 16px; }
  #chatgo { width: 44px; height: 44px; }
  #chatsend { min-height: 57px; padding-bottom: max(7px, env(safe-area-inset-bottom, 0px)); }
  #chatreply button,
  #chattarget button { width: 44px; height: 44px; }
  .chat-people button,
  #chatcontext button { min-height: 44px; }
  #chatcontext.reaction-picker .reaction-choice {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  #fieldnote {
    left: max(8px, env(safe-area-inset-left, 0px));
    bottom: calc(94px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px));
    width: calc(100vw - max(16px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)));
    box-sizing: border-box;
    padding: 6px 9px 6px 6px;
    font-size: 11px;
  }
  #chatlogbtn {
    left: calc(8px + env(safe-area-inset-left, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px));
    width: 44px;
    height: 44px;
  }
  .npc-audience { min-width: 74px; width: auto; height: 44px; min-height: 44px; padding: 0 8px; justify-content: center; font-size: 10px; }
  .npc-audience span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  #fieldnote.arrive,
  #chatlogbtn.pop { animation: none !important; }
}