:root{--chat-bg:#ededed;--header-bg:#ededed;--header-border:#d9d9d9;--bubble-other:#fff;--bubble-self:#95ec69;--text-primary:#191919;--text-secondary:#888;--text-muted:#b2b2b2;--input-bg:#fff;--input-bar-bg:#f7f7f7;--error:#fa5151;--avatar-text:#fff}*{box-sizing:border-box;padding:0;margin:0}body,html{height:100%;overflow:hidden}body{background:var(--chat-bg);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}.chat-app{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;background:var(--chat-bg);position:relative}.chat-header{gap:.5rem;padding:max(.625rem,env(safe-area-inset-top)) .75rem .625rem;background:var(--header-bg);border-bottom:.5px solid var(--header-border)}.chat-back-btn,.chat-header{flex-shrink:0;display:flex;align-items:center}.chat-back-btn{width:2rem;height:2rem;justify-content:center;font-size:1.75rem;line-height:1;color:var(--text-primary);text-decoration:none;border-radius:.375rem}.chat-back-btn:hover{background:rgba(0,0,0,.05)}.chat-header-inner{flex:1 1;text-align:center;position:relative}.chat-header h1{font-size:1.0625rem;font-weight:600;line-height:1.3;display:inline-flex;align-items:center;gap:.375rem}.live-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--text-muted);flex-shrink:0}.live-dot.online{background:#07c160;box-shadow:0 0 0 2px rgba(7,193,96,.25)}.chat-header p{font-size:.6875rem;color:var(--text-secondary);margin-top:.125rem}.chat-subtitle-hit{-moz-user-select:none;user-select:none;-webkit-user-select:none}.notify-toggle{position:absolute;right:.25rem;bottom:0;width:1.125rem;height:1.125rem;padding:0;border:none;background:transparent;font-size:.6875rem;line-height:1;color:var(--text-muted);opacity:.3;cursor:pointer}.notify-toggle.on{color:#07c160;opacity:.75}.notify-toggle:disabled{cursor:wait}.chat-name-btn{width:2rem;height:2rem;border-radius:.375rem;border:none;background:#576b95;color:var(--avatar-text);font-size:.875rem;font-weight:600;cursor:pointer;flex-shrink:0}.chat-messages{flex:1 1;overflow-y:auto;padding:.75rem .75rem 1rem;-webkit-overflow-scrolling:touch}.chat-status{text-align:center;color:var(--text-muted);font-size:.875rem;padding:3rem 1rem}.time-divider{display:flex;justify-content:center;margin:1rem 0 .75rem}.time-divider span{font-size:.75rem;color:var(--text-muted);background:rgba(0,0,0,.06);padding:.25rem .625rem;border-radius:.25rem}.message-row{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1rem}.message-row.self{flex-direction:row-reverse}.avatar{width:2.5rem;height:2.5rem;border-radius:.375rem;display:flex;align-items:center;justify-content:center;color:var(--avatar-text);font-size:1rem;font-weight:600;flex-shrink:0}.message-body{max-width:calc(100% - 3.5rem);display:flex;flex-direction:column}.message-row.self .message-body{align-items:flex-end}.message-row.other .message-body{align-items:flex-start}.nickname{font-size:.75rem;color:var(--text-secondary);margin-bottom:.25rem;padding-left:.125rem}.bubble-wrap{display:flex}.bubble{padding:.5625rem .75rem;border-radius:.375rem;font-size:1rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;position:relative}.message-row.other .bubble{background:var(--bubble-other);border-top-left-radius:.125rem}.message-row.self .bubble{background:var(--bubble-self);border-top-right-radius:.125rem}.message-row.sending .bubble{opacity:.7}.bubble.bubble-image{padding:.25rem;line-height:0}.chat-image{display:block;max-width:min(240px,60vw);max-height:320px;min-width:80px;min-height:80px;border-radius:.25rem;object-fit:contain;cursor:zoom-in}.image-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:200;cursor:zoom-out;animation:fade-in-overlay .15s ease}.image-preview{max-width:100%;max-height:100%;object-fit:contain;border-radius:.25rem;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes fade-in-overlay{0%{opacity:0}to{opacity:1}}.new-msg-btn{position:absolute;left:50%;bottom:5.75rem;transform:translateX(-50%);padding:.375rem .875rem;border:none;border-radius:999px;background:#fff;color:#07c160;font-size:.8125rem;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;z-index:5;animation:fade-in .2s ease}.new-msg-btn:hover{background:#f7f7f7}.chat-input-bar{flex-shrink:0;background:var(--input-bar-bg);border-top:.5px solid var(--header-border);padding:.5rem .75rem max(.5rem,env(safe-area-inset-bottom))}.chat-input-form{display:flex;align-items:flex-end;gap:.5rem}.chat-input-form textarea{flex:1 1;min-height:2.25rem;max-height:7.5rem;padding:.5rem .75rem;border:none;border-radius:.375rem;background:var(--input-bg);color:var(--text-primary);resize:none;line-height:1.4;outline:none}.chat-input-form textarea::placeholder{color:var(--text-muted)}.hidden-file-input{display:none}.image-btn{flex-shrink:0;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:var(--input-bg);color:var(--text-secondary);font-size:1.375rem;font-weight:300;line-height:1;cursor:pointer;transition:opacity .15s}.image-btn:hover:not(:disabled){opacity:.8}.image-btn:disabled{opacity:.45;cursor:not-allowed}.send-btn{flex-shrink:0;height:2.25rem;padding:0 .875rem;border:none;border-radius:.375rem;background:#07c160;color:#fff;font-size:.9375rem;font-weight:500;cursor:pointer;transition:opacity .15s}.send-btn:hover:not(:disabled){opacity:.9}.send-btn:disabled{opacity:.45;cursor:not-allowed}.input-hint{font-size:.6875rem;color:var(--text-muted);text-align:center;margin-top:.375rem}.chat-toast{position:absolute;left:50%;bottom:5.5rem;transform:translateX(-50%);padding:.5rem 1rem;border-radius:.375rem;font-size:.875rem;z-index:10;animation:fade-in .2s ease}.chat-toast.error{background:rgba(0,0,0,.75);color:#fff}@keyframes fade-in{0%{opacity:0;transform:translateX(-50%) translateY(.5rem)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal{width:100%;max-width:20rem;background:#fff;border-radius:.75rem;padding:1.5rem}.modal h2{font-size:1.0625rem;font-weight:600;text-align:center;margin-bottom:.375rem}.modal p{font-size:.8125rem;color:var(--text-secondary);text-align:center;margin-bottom:1rem}.modal input{width:100%;padding:.625rem .75rem;border:1px solid #e5e5e5;border-radius:.375rem;outline:none;margin-bottom:1rem}.modal input:focus{border-color:#07c160}.modal-actions{display:flex;gap:.75rem}.modal-actions button{flex:1 1;padding:.625rem;border:none;border-radius:.375rem;font-size:.9375rem;cursor:pointer}.modal-cancel{background:#f2f2f2;color:var(--text-primary)}.modal-confirm{background:#07c160;color:#fff;font-weight:500}@media (min-width:481px){.chat-app{border-left:.5px solid var(--header-border);border-right:.5px solid var(--header-border)}}.entry-app{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem;background:var(--chat-bg)}.entry-card{width:100%;max-width:400px;background:#fff;border-radius:1rem;padding:2rem 1.5rem;box-shadow:0 4px 24px rgba(0,0,0,.06)}.entry-brand{text-align:center;margin-bottom:2rem}.entry-icon{font-size:3rem;line-height:1;margin-bottom:.75rem}.entry-brand h1{font-size:1.5rem;font-weight:600;margin-bottom:.375rem}.entry-brand p{font-size:.875rem;color:var(--text-secondary)}.entry-form label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--text-primary)}.entry-form input{width:100%;padding:.75rem;border:1px solid #e5e5e5;border-radius:.5rem;outline:none;margin-bottom:.75rem}.entry-form input:focus{border-color:#07c160}.entry-error{font-size:.8125rem;color:var(--error);margin-bottom:.75rem}.entry-submit{width:100%;padding:.75rem;border:none;border-radius:.5rem;background:#07c160;color:#fff;font-size:1rem;font-weight:500;cursor:pointer}.entry-submit:hover:not(:disabled){opacity:.92}.entry-submit:disabled{opacity:.45;cursor:not-allowed}.entry-recent{margin-top:1.75rem;padding-top:1.5rem;border-top:.5px solid #eee}.entry-recent h2{font-size:.8125rem;color:var(--text-secondary);font-weight:500;margin-bottom:.75rem}.entry-recent ul{list-style:none}.entry-recent li button{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem 0;border:none;background:none;cursor:pointer;text-align:left}.entry-recent li button:hover .recent-name{color:#07c160}.recent-avatar{width:2.25rem;height:2.25rem;border-radius:.375rem;background:#576b95;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.recent-name{flex:1 1;font-size:.9375rem;color:var(--text-primary)}.recent-arrow{color:var(--text-muted);font-size:1.25rem}.entry-tip{margin-top:1.5rem;font-size:.75rem;color:var(--text-muted);text-align:center;line-height:1.5}