/* Adapted from read-only Liao styles: phone shell and message bubbles. */
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #111; background: #d9d9d9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.phone-chat { width: min(100%, 480px); height: 100dvh; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; background: #ededed; box-shadow: 0 0 36px rgba(0,0,0,.15); }
.chat-header { min-height: 58px; padding: max(8px, env(safe-area-inset-top)) 11px 8px; display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; border-bottom: 1px solid #d5d5d5; background: rgba(237,237,237,.96); z-index: 2; }
.header-action { width: 44px; height: 42px; padding: 0; border: 0; background: transparent; color: #181818; }
.back { font-family: Arial, sans-serif; font-size: 42px; font-weight: 200; line-height: 35px; text-align: left; }
.more { font-size: 17px; font-weight: 800; letter-spacing: 2px; text-align: right; transform: translateY(-3px); }
.chat-title { text-align: center; min-width: 0; }
.chat-title h1 { margin: 0; font-size: 17px; font-weight: 600; line-height: 23px; }
.chat-title p { margin: 0; color: #8a8a8a; font-size: 11px; line-height: 14px; }
.chat-title p.offline { color: #d15241; }
.messages { overflow-y: auto; overscroll-behavior: contain; padding: 16px 12px 22px; background: #ededed; scroll-behavior: smooth; }
.empty-state { padding-top: 6px; text-align: center; color: #b1b1b1; font-size: 12px; }
.empty-state span { display: inline-block; padding: 3px 8px; border-radius: 4px; background: #dadada; color: #fff; }
.empty-state p { margin: 18px 0 0; }
.message { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "avatar content"; gap: 10px; align-items: start; margin-bottom: 20px; animation: arrive .18s ease-out; }
.message::before { content: attr(data-avatar); grid-area: avatar; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 4px; background: linear-gradient(145deg, #66ad8b, #337a61); color: white; font-size: 18px; font-weight: 600; }
.message-head, .bubble { grid-column: 2; }
.message-head { margin: -1px 0 4px 1px; color: #9b9b9b; font-size: 12px; line-height: 15px; }
.message-head strong { font-weight: 400; }
.message-head time { display: none; }
.bubble { position: relative; justify-self: start; width: fit-content; max-width: min(78%, 320px); padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 5px; background: #fff; color: #111; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble::before { content: ""; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-left: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; background: inherit; transform: rotate(45deg); }
.message.mine { grid-template-columns: minmax(0, 1fr) 42px; grid-template-areas: "content avatar"; }
.message.mine::before { grid-column: 2; background: linear-gradient(145deg, #7b9ed0, #466894); }
.mine .message-head { grid-column: 1; text-align: right; margin-right: 1px; }
.mine .bubble { grid-column: 1; justify-self: end; border-color: #95c66d; background: #95ec69; }
.mine .bubble::before { left: auto; right: -7px; border: 0; border-top: 1px solid #95c66d; border-right: 1px solid #95c66d; }

[hidden]{display:none!important}input{font:inherit}.phone-chat{grid-template-rows:auto minmax(0,1fr)}.chat-header{grid-template-columns:44px minmax(0,1fr) 44px}.header-symbol{font-size:25px;text-align:center;color:#07a653}.header-action{font-size:18px;letter-spacing:2px}.chat-title h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-title p{overflow-wrap:anywhere;color:#737373}.chat-content{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;overflow:hidden}.messages{scroll-behavior:auto;overflow-anchor:none}#messages{list-style:none;margin:0;padding:0}.history-action{text-align:center;min-height:24px}.text-button{padding:4px 12px;border:0;background:transparent;color:#576b95;font-size:12px}.empty-state{margin:30px 0;color:#777;text-align:center;font-size:13px}
.message{grid-template-columns:36px minmax(0,1fr);column-gap:10px;row-gap:0;margin:10px 0 18px;animation:none;grid-template-areas:none}.message::before{content:"";grid-area:auto;grid-row:2;grid-column:1;width:36px;height:36px}.message.mine{grid-template-columns:minmax(0,1fr) 36px;grid-template-areas:none}.message.mine::before{grid-column:2}.message time{grid-column:1/-1;grid-row:1;text-align:center;font-size:11px;color:#808080;margin:0 0 12px;line-height:18px}.bubble{grid-row:2;max-width:calc(100% - 20px);min-height:38px;line-height:1.5}.mine .bubble{grid-row:2}
.composer{padding:8px 10px max(8px,env(safe-area-inset-bottom));border-top:1px solid #d7d7d7;background:#f7f7f7}.input-row{display:flex;align-items:flex-end;gap:8px}textarea{flex:1;min-width:0;min-height:40px;max-height:120px;resize:none;padding:9px 10px;border:0;border-radius:5px;background:#fff;color:#111;font-size:16px;line-height:22px}textarea:focus-visible{outline:2px solid #07a653;outline-offset:1px}.tool-button{flex:0 0 30px;width:30px;height:40px;padding:0;border:0;background:transparent;color:#222;font-family:Arial,sans-serif;font-size:31px}.send-button{flex:0 0 56px;height:38px;padding:0;border:0;border-radius:5px;background:#07b85b;color:#fff;font-size:14px}button:disabled{cursor:default;opacity:.5}
.emoji-panel{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:10px 0 2px;padding:8px;border-radius:7px;background:white}.emoji-panel button{height:38px;padding:0;border:0;border-radius:5px;background:transparent;font-size:25px}.emoji-panel button:hover{background:#ededed}.send-error{margin:6px 0 0;color:#b64132;font-size:12px}.send-error:empty{display:none}.new-messages{position:absolute;right:14px;bottom:76px;padding:9px 14px;border:1px solid #ddd;border-radius:18px;background:white;color:#576b95;box-shadow:0 2px 12px #0001;font-size:13px}
.admin-panel{overflow:auto;padding:20px 14px}.admin-card,.room{margin-bottom:14px;padding:20px;border:1px solid #e0e0e0;border-radius:10px;background:#fff}.admin-card h2{margin:0 0 14px;font-size:20px}.muted{font-size:13px;line-height:1.7;color:#737373}label{display:block;font-size:14px}input{display:block;width:100%;margin:8px 0 12px;padding:11px;border:1px solid #d5d5d5;border-radius:5px;min-width:0}.primary,.secondary{padding:9px 15px;border:0;border-radius:5px;margin:6px 7px 6px 0;font-size:14px}.primary{background:#07b85b;color:white}.secondary{background:#ededed;color:#333}.room strong{display:block;overflow-wrap:anywhere}.room button{padding:7px 10px;margin:12px 6px 0 0;border:0;border-radius:4px;color:#576b95;background:#f0f2f6;font-size:13px}#share a{display:block;font-size:13px;overflow-wrap:anywhere;color:#576b95;margin:10px 0}dialog{width:min(calc(100% - 40px),380px);padding:24px;border:0;border-radius:12px;color:#222}dialog::backdrop{background:#0006}dialog h2{margin:0;font-size:20px}dialog p{font-size:14px;line-height:1.7;color:#666}button:focus-visible,a:focus-visible{outline:2px solid #078c49;outline-offset:3px}
@media(min-width:481px){body{display:grid;place-items:center;background:#cfcfcf}.phone-chat{height:min(880px,100dvh)}}