:root{--bg: #f6f3ee;--fg: #1d1d1b;--muted: #5d5a55;--card: #ffffff;--green: #1f8a3b;--green-dark: #166b2d;--red: #c62828;--amber: #b45309;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}body{background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:none;cursor:pointer}.message{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.4rem;text-align:center;padding:2rem}.message small{font-size:1rem;color:var(--muted);margin-top:1rem}.unlock{position:fixed;inset:0;background:#1d1d1bd9;color:#fff;font-size:3rem;z-index:10}.home{height:100%;display:flex}.side{width:300px;flex-shrink:0;display:flex;flex-direction:column;border-right:2px solid #e4ded4}.clock{text-align:center;padding:1.5rem 1rem 1rem}.clock .time{font-size:4.2rem;font-weight:700;line-height:1}.clock .date{font-size:1.5rem;color:var(--muted);margin-top:.4rem}.people{flex:1;overflow-y:auto;padding:.5rem 1rem 1.5rem;display:flex;flex-direction:column;gap:.8rem}.person-button{display:flex;align-items:center;gap:1rem;background:var(--card);border-radius:999px;padding:.5rem 1.2rem .5rem .5rem;font-size:1.7rem;font-weight:600;text-align:left;box-shadow:0 2px 10px #00000014}.person-button:active{transform:scale(.97)}.cards{flex:1;overflow-y:auto;padding:1.5rem 2rem 3rem;display:flex;flex-direction:column;gap:1.4rem}.card{background:var(--card);border-radius:28px;padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 2px 12px #00000014}.card:active{transform:scale(.995)}.card-head{display:flex;align-items:center;gap:1.2rem}.card-head h2{font-size:2.4rem;margin:0;flex:1}.open-hint{font-size:1.5rem;color:var(--muted)}.card-message{background:#f3f0ea;border-radius:18px;padding:.8rem 1.2rem}.card-message.new{outline:5px solid var(--green)}.card-message .when{font-size:1.3rem;color:var(--muted);display:flex;gap:.8rem;align-items:center}.card-message p{font-size:1.9rem;margin:.3rem 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.conversation{height:100%;display:flex;flex-direction:column;align-items:center;overflow-y:auto}.conv-head{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1rem 2rem}.conv-head .back{position:static}.conv-head h1{font-size:2.6rem;margin:0;flex:1}.conv-actions{display:flex;gap:1.2rem;width:100%;padding:0 2rem}.conv-actions .big{flex:1;min-width:0;font-size:2.4rem;padding:1.2rem 1rem}.conversation .feed{width:100%;overflow:visible;flex:none}.older{align-self:center}.conversation .quoted{margin:0 2rem;width:calc(100% - 4rem)}.conversation .typing,.conversation .recorder{padding:0 2rem;margin-top:1rem}.typing-buttons{display:flex;gap:1rem}.typing-buttons .big{flex:1;min-width:0;font-size:2.2rem}.group-name{font-size:2rem;color:var(--muted);margin:-1rem 0 0}.feed{flex:1;overflow-y:auto;padding:1.5rem 2rem 3rem;display:flex;flex-direction:column;gap:1.2rem}.entry{display:flex;gap:1.2rem;background:var(--card);border-radius:24px;padding:1.2rem 1.4rem;box-shadow:0 2px 10px #0000000f}.entry.new{outline:5px solid var(--green)}.entry.missed{background:#fff4e5}.entry.missed.new{outline-color:var(--amber)}.entry.mine{background:#eef3f8}.entry.call{padding-block:.8rem}.entry-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6rem}.entry-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}.entry-head strong{font-size:1.8rem}.entry-head .when{font-size:1.3rem;color:var(--muted)}.new-label{font-size:1.1rem;font-weight:700;color:#fff;background:var(--green);border-radius:999px;padding:.15rem .7rem}.entry.missed .new-label{background:var(--amber)}.entry .text{font-size:1.9rem;line-height:1.35;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.entry .muted,.media-placeholder{color:var(--muted);font-size:1.5rem}.picture{max-width:100%;max-height:360px;border-radius:16px;align-self:flex-start}.empty{text-align:center;font-size:2rem;color:var(--muted);margin-top:4rem}.mid{align-self:flex-start;font-size:1.8rem;font-weight:700;padding:.9rem 2rem;border-radius:999px;background:#e4ded4}.mid.green{background:var(--green);color:#fff}.mid.red{background:var(--red);color:#fff}.mid:disabled{opacity:.5}.fullscreen{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:5}.fullscreen img,.fullscreen video{max-width:100%;max-height:100%}.close-hint{position:absolute;bottom:1.5rem;color:#fff;font-size:1.6rem;opacity:.8}.avatar{border-radius:50%;object-fit:cover;flex-shrink:0}.avatar.initial{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.big{font-size:3rem;font-weight:700;padding:1.6rem 4rem;border-radius:999px;color:#fff;min-width:60%}.big.green{background:var(--green)}.big.green:active{background:var(--green-dark)}.big.red{background:var(--red)}.person,.ringing{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:2rem}.person h1,.ringing h1{font-size:3.6rem;margin:0}.back{position:absolute;top:1.5rem;left:1.5rem;font-size:2.2rem;background:var(--card);padding:.8rem 1.8rem;border-radius:999px;box-shadow:0 2px 10px #00000014}.ringing{background:#e8f5e9}.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 #1f8a3b80}50%{transform:scale(1.04);box-shadow:0 0 0 30px #1f8a3b00}}.incall{position:relative;height:100%;background:#000}.incall iframe{width:100%;height:100%;border:0}.incall .hangup{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);min-width:40%;box-shadow:0 4px 20px #0006}:root{--blue: #1d5fa8}.callrow{display:flex;align-items:center;gap:1.2rem;background:#e8f0fa;border-left:10px solid var(--blue);border-radius:16px;padding:.8rem 1.2rem}.callrow.missed{background:#fff1de;border-left-color:var(--amber)}.callrow.new{outline:5px solid var(--blue)}.callrow.missed.new{outline-color:var(--amber)}.callrow .entry-body{gap:.2rem}.callrow strong{font-size:1.7rem}.callrow .when{font-size:1.3rem;color:var(--muted);display:flex;gap:.8rem;align-items:center}.call-icon{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.callrow.missed .call-icon{background:var(--amber)}.callrow .mid{align-self:center}.callrow.missed .new-label{background:var(--amber)}.callrow .new-label{background:var(--blue)}.entry{position:relative;border-top-left-radius:6px}.mid.blue{background:var(--blue);color:#fff}.mid.reply{background:#e4ded4;font-size:1.5rem;padding:.6rem 1.4rem}.person{justify-content:flex-start;padding-top:1.5rem;gap:1.5rem;overflow-y:auto}.person-head{display:flex;align-items:center;gap:1.5rem}.person-head h1{font-size:3rem;margin:0}.quoted{background:var(--card);border-radius:24px;padding:1.2rem 1.6rem;max-width:900px;width:100%;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 2px 10px #0000000f}.quoted .when{font-size:1.3rem;color:var(--muted)}.quoted .text{font-size:2.2rem;line-height:1.35;margin:0;white-space:pre-wrap}.actions{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:100%;max-width:700px}.actions .big{width:100%;min-width:0}.big.grey{background:#5d5a55}.big.blue{background:var(--blue)}.big:disabled{opacity:.4}.typing{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:900px}.typing textarea{font:inherit;font-size:2.2rem;min-height:7rem;padding:1rem 1.2rem;border-radius:20px;border:3px solid #cfc8bc;resize:none}.recorder{display:flex;flex-direction:column;align-items:center;gap:1.4rem;width:100%;max-width:700px}.recorder .big{width:100%;min-width:0}.rec-dot{width:48px;height:48px;border-radius:50%;background:var(--red);animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}.rec-time{font-size:2.4rem;margin:0}.status{font-size:2.6rem;margin:2rem 0 0}.status.ok{color:var(--green);font-weight:700}.status.bad{color:var(--red)}.compose{height:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem;overflow-y:auto;padding-bottom:2rem}.compose .quoted{width:calc(100% - 4rem)}.compose .actions,.compose .typing,.compose .recorder{padding:0 2rem}
