/* The public chat on the game screen (ui/hud-chat.js): see-through, small, out of the way of the thumbs.
 * Portrait: on the left under the place pill and the tips card. Landscape: on the left under the needs, over the joystick's
 * empty sky. Desktop: top left under the needs. − shrinks it to a round 💬. */
#hudChat { position: fixed; left: 14px; top: 96px; z-index: 3; width: min(340px, 40vw); font: 600 12px/1.3 var(--ui, system-ui); color: #fff; display: none; }
body.mode-play #hudChat { display: block; }
body:is(.clean, .map-open, .building, .dressing, .boutique, .riding, .in-lesson, .freecam) #hudChat { display: none !important; }
#hudChat .hcBox { background: rgba(8, 14, 26, .34); border-radius: 12px; padding: 4px; transition: opacity .4s; }
#hudChat.idle .hcBox { opacity: .7; }
#hudChat.min .hcBox, #hudChat:not(.min) .hcOpen { display: none; }
#hudChat .hcTop { display: flex; gap: 4px; }
#hudChat .hcBar { flex: 1; min-width: 0; text-align: left; border: 0; border-radius: 9px; background: rgba(255,255,255,.16); color: rgba(255,255,255,.85); font: inherit; font-weight: 600; padding: 6px 9px; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hudChat .hcMin { flex: none; width: 30px; border: 0; border-radius: 9px; background: rgba(255,255,255,.16); color: #fff; font: 800 16px/1 var(--ui, system-ui); cursor: pointer; }
#hudChat .hcForm { flex: 1; min-width: 0; display: flex; gap: 4px; }
#hudChat .hcForm[hidden], #hudChat .hcBar[hidden] { display: none; }
#hudChat .hcForm input { flex: 1; min-width: 0; border: 0; border-radius: 9px; padding: 6px 9px; font: 600 14px var(--ui, system-ui); background: #fff; color: #111; outline: none; } /* 14px+: no zoom on iPhone */
#hudChat .hcForm button { flex: none; width: 36px; border: 0; border-radius: 9px; background: var(--brand, #1f6fe5); color: #fff; font-size: 15px; cursor: pointer; }
#hudChat .hcList { padding: 2px 5px 1px; }
#hudChat .hcList p { margin: 3px 0 0; text-shadow: 0 1px 2px rgba(0,0,0,.85); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hudChat .hcList button { border: 0; background: none; padding: 0; font: 800 12px/1.3 var(--ui, system-ui); cursor: pointer; text-shadow: inherit; }
#hudChat .hcEmpty { opacity: .8; }
#hudChat .hcOpen { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); background: rgba(15,29,51,.55); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 12px rgba(0,0,0,.25); }
#hudChat .hcOpen em { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #e53935; color: #fff; font: 800 10.5px/18px var(--ui, system-ui); font-style: normal; }
#hudChat .hcOpen em[hidden] { display: none; }
#hudChat.writing { z-index: 7; } /* over the toasts while typing */

/* phones */
.touch #hudChat { left: calc(var(--sal, 0px) + var(--edge, 10px)); }
@media (orientation: portrait) {
  /* under the tips card (#newbie, top 192px); higher when it's gone. The joystick never comes above 470px. */
  .touch #hudChat { top: calc(var(--sat, 0px) + 258px); width: min(300px, 74vw); }
  body.touch:not(:has(#newbie.show)) #hudChat { top: calc(var(--sat, 0px) + 196px); }
}
@media (orientation: landscape) {
  /* under the needs; the tips card (#newbie) sits at 106px, so then the chat goes under it with one line */
  .touch #hudChat { top: calc(var(--sat, 0px) + 58px); width: min(310px, 38vw); }
  body.touch:has(#newbie.show) #hudChat, body.touch.at-home #hudChat { top: calc(var(--sat, 0px) + 154px); }
  body.touch:has(#newbie.show) #hudChat .hcList p:not(:last-child), body.touch.at-home #hudChat .hcList p:not(:last-child) { display: none; }
  body.touch #hudChat .hcList p { -webkit-line-clamp: 1; }
  /* macros: one row you swipe, and the tips card steps aside while they're open so nothing reaches the joystick */
  .touch #hudChat .hcMacros { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 58px; overflow-x: auto; scrollbar-width: none; }
  .touch #hudChat .hcMacros::-webkit-scrollbar { display: none; }
  body.touch:has(#hudChat.macros:not(.min)) #newbie { display: none !important; }
  body.touch:not(.at-home):has(#hudChat.macros:not(.min)) #hudChat { top: calc(var(--sat, 0px) + 58px); }
}

/* ⚡ macros (ui/macros.js): a grid in the chat box in place of the messages, and the editor sheet */
#hudChat .hcMac { flex: none; width: 30px; border: 0; border-radius: 9px; background: rgba(255,255,255,.16); color: #fff; font-size: 14px; cursor: pointer; }
#hudChat.macros .hcMac { background: #f2c94c; }
#hudChat .hcMacros { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; padding: 3px 0 2px; }
#hudChat .hcMacros button { border: 0; border-radius: 9px; background: rgba(255,255,255,.14); color: #fff; font: 700 10.5px/1.15 var(--ui, system-ui); padding: 5px 2px 4px; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hudChat .hcMacros button:active { background: rgba(255,255,255,.32); }
#hudChat .hcMacros b { display: block; font-size: 17px; line-height: 1.2; }
#hudChat.idle.macros .hcBox { opacity: 1; }
#macroSheet { position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,.35); display: grid; place-items: center; padding: 12px; font-family: var(--ui, system-ui); }
#macroSheet[hidden] { display: none; }
#macroSheet .msCard { background: #fff; color: #111; border-radius: 20px; width: min(420px, 100%); max-height: calc(100% - 8px); overflow-y: auto; padding: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
#macroSheet .msHead { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
#macroSheet .msHead button { border: 0; background: #eef1f4; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; }
#macroSheet .msLead { font-size: 12.5px; color: #555; margin: 6px 0 10px; }
#macroSheet .msRow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef0f2; }
#macroSheet .msRow > span { font-size: 22px; width: 30px; text-align: center; }
#macroSheet .msRow div { flex: 1; min-width: 0; } #macroSheet .msRow strong { display: block; font-size: 14px; }
#macroSheet .msRow small { display: block; font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#macroSheet .msRow button { border: 0; background: none; font-size: 17px; cursor: pointer; padding: 6px; }
#macroSheet .msNew { margin-bottom: 8px; background: #f6f7f9; border-radius: 14px; padding: 10px; }
#macroSheet .msF { display: flex; flex-direction: column; gap: 6px; }
#macroSheet .msF input { border: 1px solid #d9dde3; border-radius: 10px; padding: 9px 10px; font: 600 14px var(--ui, system-ui); }
#macroSheet .msActs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; margin: 8px 0; }
#macroSheet .msActs button { border: 1.5px solid transparent; background: #fff; border-radius: 10px; padding: 4px 1px; font-size: 16px; cursor: pointer; }
#macroSheet .msActs button span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 10px var(--ui, system-ui); color: #333; }
#macroSheet .msActs button.on { border-color: var(--brand, #1f6fe5); background: #eaf2ff; }
#macroSheet .msSave { width: 100%; border: 0; border-radius: 12px; background: var(--brand, #1f6fe5); color: #fff; font: 800 14px var(--ui, system-ui); padding: 11px; cursor: pointer; }
#macroSheet .msReset { margin-top: 10px; width: 100%; border: 0; background: none; color: #666; font: 600 12.5px var(--ui, system-ui); cursor: pointer; }
#hudChat .hcMacros .hcStaff { background: rgba(242, 201, 76, .3); } /* the team's quick buttons (ui/admin-ui.js tools) */
#hudChat .hcList .hcRp { color: #d6b4ff; font-style: italic; } /* /me and /do: roleplay lines from the people near you */
#hudChat .hcList .hcTeam { color: #ffd84d; } #hudChat .hcList .hcTeam b { font-weight: 800; } /* the team's own chat (/sc), only team members see it */