:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#172033;background:#edf1f7}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:12px;background:#2357d9;color:#fff;padding:.75rem 1rem;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.login-page{min-height:100vh;display:grid;place-items:center;padding:1rem}.login-card{width:min(420px,100%);background:#fff;padding:2rem;border-radius:22px;box-shadow:0 16px 50px #20305022}.login-card form{display:grid;gap:.75rem}.login-card input{padding:.9rem;border:1px solid #b9c4d8;border-radius:10px}.error{color:#a40000;min-height:1.5em}.app-header{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;border-bottom:1px solid #dce3ef}.welcome{margin-left:1rem;color:#61708b}.quiet{background:#e9eef9;color:#24324a}.chat-shell{display:grid;grid-template-columns:minmax(260px,32%) minmax(0,1fr);height:calc(100vh - 64px);max-width:1500px;margin:auto;background:#f5f7fb}aside{padding:0 1rem 1rem;background:#fff;border-right:1px solid #dce3ef;overflow:auto}.list-title{position:sticky;top:0;background:#fff;padding:.9rem 0 .35rem;z-index:2}.list-title h1{font-size:1.3rem;margin:0}.sync-status{display:block;width:100%;text-align:left;background:#eef3fb;color:#4c5b73;font-size:.86rem;font-weight:600;padding:.65rem .75rem;margin:.35rem 0 .75rem}.sync-status:hover,.sync-status:focus-visible{background:#dfe9f9}.sync-status.sync-error{background:#fff0f0;color:#a00018}.conversation{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0}.conversation-head{display:grid;grid-template-columns:minmax(86px,auto) minmax(0,1fr) minmax(86px,auto);align-items:center;padding:.55rem .8rem;background:#fff;border-bottom:1px solid #e1e7f0}.conversation-heading{text-align:center;min-width:0}.conversation-heading h1{font-size:1.15rem;margin:.1rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sync-status.compact{text-align:center;background:transparent;margin:0;padding:.18rem .35rem;font-size:.78rem}.back-button{justify-self:start;background:transparent;color:#2357d9;padding:.6rem}.head-spacer{width:86px}.conversation-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem;width:100%;text-align:left;background:#f4f7fb;color:#172033;margin:.5rem 0;padding:.8rem}.conversation-item.active{outline:3px solid #2357d9}.conversation-item strong,.conversation-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-item small{grid-column:1;color:#64718a}.conversation-item time{font-size:.75rem;color:#738098}.badge{background:#d32323;color:#fff;border-radius:999px;padding:.15rem .5rem;align-self:center}.contacts-heading{font-size:1rem;color:#68758c;margin:1rem 0 .25rem}#message-list{overflow:auto;padding:1rem;min-height:0}.message{max-width:min(78%,680px);margin:.6rem 0;padding:.75rem 1rem;border-radius:16px;background:#fff;box-shadow:0 2px 8px #22334a0d}.message.mine{margin-left:auto;background:#dce8ff}.message-body{overflow-wrap:anywhere}.message .meta{display:flex;align-items:center;justify-content:flex-end;color:#69758b;font-size:.75rem;margin-top:.35rem}.status{background:transparent;color:#385b9a;padding:.1rem .3rem;margin-left:.25rem}.status.failed{color:#b00020;cursor:pointer}.message audio,.message video{display:block;width:min(100%,520px);max-height:360px}.image-preview{display:block;padding:0;background:transparent;line-height:0}.image-preview img{display:block;max-width:min(100%,420px);max-height:360px;border-radius:12px;object-fit:contain}.composer{padding:.75rem 1rem;background:#fff;border-top:1px solid #e1e7f0}.media-composer{display:flex;gap:.5rem;margin-bottom:.55rem}.media-picker{display:inline-flex;align-items:center;justify-content:center;background:#e9eef9;color:#24324a;border-radius:10px;padding:.55rem .9rem;font-weight:700;cursor:pointer}#text-composer{display:flex;gap:.55rem;align-items:stretch}#message-text{flex:1;resize:none;padding:.75rem;border:1px solid #b9c4d8;border-radius:12px}.record{width:100%;min-height:150px;font-size:28px;display:grid;place-items:center;gap:.3rem}.record .mic{font-size:54px}.record.recording{background:#b51d2d}.record-help{text-align:center;color:#59677f}.grandma-mode #message-list{font-size:28px;line-height:1.5}.grandma-mode .conversation-heading h1{font-size:1.5rem}.grandma-mode .sync-status.compact{font-size:1rem}.admin-panel{margin:1rem;padding:1rem;background:#fff;border-radius:16px}.admin-panel form{display:flex;gap:.5rem;flex-wrap:wrap}.admin-panel input,.admin-panel select{padding:.65rem;border:1px solid #b9c4d8;border-radius:8px}#image-viewer{width:min(96vw,1100px);height:min(94vh,900px);border:0;border-radius:16px;background:#111;padding:3.5rem 1rem 1rem}#image-viewer::backdrop{background:#000c}#image-viewer img{display:block;width:100%;height:100%;object-fit:contain}#close-image-viewer{position:absolute;right:1rem;top:.7rem;background:#fff;color:#111}
@media(max-width:720px){.app-header{height:58px}.welcome{margin-left:.5rem}.chat-shell{display:block;height:calc(100vh - 58px);min-height:calc(100vh - 58px)}aside{height:100%;max-height:none;overflow:auto;border-right:0;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}.conversation{display:none;height:100%;min-height:0}.chat-shell.in-conversation aside{display:none}.chat-shell.in-conversation .conversation{display:grid}.conversation-head{grid-template-columns:82px minmax(0,1fr) 82px}.head-spacer{width:82px}.conversation-heading h1{font-size:1.05rem}.composer{padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}.message{max-width:88%;padding:.7rem .8rem}.image-preview img{max-height:300px}.message video{max-height:300px}.grandma-mode .chat-shell{min-height:calc(100vh - 58px)}.grandma-mode #message-list{font-size:28px}.grandma-mode .record{min-height:150px;font-size:28px}}