*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}.chat-main{width:min(960px,calc(100% - 32px));margin:auto;padding:38px 0 70px}.chat-main h1{font:clamp(2.8rem,8vw,5rem)/1.1 Georgia,serif;margin:20px 0}.chat-main>p{color:#b7ad9f;line-height:1.7}.chat-nav,.compose-bottom{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.chat-nav a{color:#d6bb86}.chat-main button{background:#292016;border:1px solid #806b48;color:#ebdcc3;padding:10px 16px;border-radius:5px;cursor:pointer;font:inherit}.chat-main button:disabled{opacity:.4;cursor:default}.messages{height:55vh;min-height:260px;overflow-y:auto;margin:20px 0;padding:10px 20px;background:#100e0c;border:1px solid #3a3024;border-radius:10px;overscroll-behavior:contain}.chat-message{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid #29231b}.chat-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#322a21;display:grid;place-items:center;color:#d6bb86;flex-shrink:0}.message-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.message-head strong{overflow-wrap:anywhere}.message-head time,.faction{font-size:.75rem;color:#b3a48c}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;margin:10px 0}.message-content{min-width:0}.chat-main .delete-message{font-size:.7rem;padding:5px 9px;color:#f0aaa5;border-color:#763d38;background:transparent}.message-deleted{font-style:italic;color:#8d8376}#compose{display:grid;gap:12px}#compose textarea{resize:vertical;min-height:96px;background:#14110e;color:#eee3d4;border:1px solid #766245;border-radius:8px;padding:15px;font:16px/1.5 Arial,sans-serif}.emoji-picker{display:flex;gap:6px;flex-wrap:wrap}.emoji-picker button{padding:6px 10px;background:#15120f;font-size:1.3rem}.compose-bottom small{color:#a59987}.chat-main [hidden]{display:none!important}@media(max-width:600px){.messages{padding:8px 12px;height:52vh}.chat-message{grid-template-columns:32px 1fr;gap:9px}.chat-avatar{width:32px;height:32px}.chat-main{padding-top:24px}.badge{font-size:.6rem}}
#send-status{margin:0;font-size:.85rem;line-height:1.4;color:#e3c695;overflow-wrap:anywhere}#send-status:empty{display:none}
@media(max-width:600px){
body.account-page{height:100%;overflow:hidden}
.chat-main{height:100vh;height:var(--chat-height,100dvh);width:100%;padding:10px 12px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;overflow:hidden}
.chat-main>.eyebrow,.chat-main>h1+p{display:none}
.chat-main h1{font-size:1.8rem;margin:0}
.chat-main>p#status{font-size:.75rem;line-height:1.3;margin:0;flex-shrink:0}
.chat-nav{gap:8px;font-size:.8rem;flex-shrink:0}
#chat{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}
#chat>.chat-nav button{padding:8px 10px;min-height:36px}
.messages{height:auto;min-height:0;flex:1;margin:0;-webkit-overflow-scrolling:touch}
#compose{flex-shrink:0;gap:6px;background:#0a0908}
#compose>label{font-size:.75rem}
#compose textarea{min-height:56px;height:64px;max-height:96px;resize:none;width:100%;padding:9px 12px;font-size:16px}
.emoji-picker{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding:2px 0;min-width:0}
.emoji-picker button{flex:0 0 40px;min-height:38px;padding:4px;font-size:1.25rem}
.compose-bottom{display:block}.compose-bottom small{display:none}
#send{width:100%;min-height:44px;touch-action:manipulation}
#send-status{font-size:.75rem;max-height:42px;overflow:auto}
}
@media(max-width:600px) and (max-height:550px){.chat-main h1,#compose>label{display:none}.chat-main{gap:5px;padding-top:5px}.emoji-picker{display:none}}