/* WhatsApp-inspired surfaces, with account-specific appearance tokens. */
:root{--accent:#008069;--pale:#e2f1ed;--bg:#f0f2f5;--surface:#fff;--ink:#17252d;--muted:#667781;--border:#e1e5e8;--outgoing:#d9fdd3;--wall:#efeae2;--wall-image:url('wallpaper.svg');--custom-wallpaper:none;color-scheme:light;font-family:'Segoe UI',Arial,sans-serif}
:root[data-color=blue]{--accent:#2679bf;--pale:#e4eff9;--outgoing:#d8edff}:root[data-color=purple]{--accent:#805ac6;--pale:#efe8f8;--outgoing:#e9dcfc}:root[data-color=rose]{--accent:#c34b7d;--pale:#fae6ee;--outgoing:#fbdce8}
:root[data-mode=dark]{--bg:#202c33;--surface:#111b21;--ink:#e9edef;--muted:#a1b0b9;--border:#33434c;--wall:#0b141a;--outgoing:#075e54;--pale:#203b38;color-scheme:dark}
:root[data-mode=dark][data-color=blue]{--outgoing:#154465;--pale:#1b3447;--accent:#4298d6}:root[data-mode=dark][data-color=purple]{--outgoing:#463061;--pale:#30283f;--accent:#a484dc}:root[data-mode=dark][data-color=rose]{--outgoing:#663149;--pale:#3f2834;--accent:#dd7aa2}
:root[data-wallpaper=plain]{--wall-image:none;--wall:var(--bg)}:root[data-wallpaper=sand]{--wall:#e8d9c5;--wall-image:url('wallpaper.svg')}:root[data-wallpaper=sky]{--wall:#d7eaf3;--wall-image:linear-gradient(160deg,#d7eaf3,#edf5fa)}:root[data-mode=dark][data-wallpaper=sand]{--wall:#30291f}:root[data-mode=dark][data-wallpaper=sky]{--wall:#182e3c;--wall-image:linear-gradient(160deg,#182e3c,#111b21)}
body{font-family:inherit;background:var(--bg)}.app{grid-template-columns:340px minmax(0,1fr)}aside{background:var(--surface);padding:0 12px 24px}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;height:84px;padding:0 12px;margin-bottom:20px}.sidebar-heading .brand{font-size:29px;padding:0;letter-spacing:-1px;color:var(--accent)}aside h3{font-size:12px;letter-spacing:0;margin:0 12px 14px;color:var(--muted)}.contact{border-radius:10px;padding:16px 12px;gap:14px}.avatar{background:var(--accent);width:48px;height:48px;font-size:21px}.contact strong,.account strong{font-size:16px}.contact small,.account small{font-size:13px;color:var(--muted)}.account{border-top:1px solid var(--border);padding:20px 10px 0;gap:12px}.account .avatar{background:#8aa4ad;width:44px;height:44px}.account button{border:0}.selected{background:var(--pale)}header{background:var(--bg);padding:12px 24px;gap:14px;min-height:78px}header h2{font-size:20px;margin:0 0 3px;letter-spacing:0}header small{color:var(--muted);font-size:13px}.header-actions{gap:9px}.header-actions .circle{border:0;width:44px;height:44px;color:var(--ink);border-radius:50%}.header-actions svg{width:24px;height:24px}.header-actions .circle:hover{background:var(--pale)}#appearance{background:var(--pale);color:var(--accent)}main{background-color:var(--wall);background-image:var(--wall-image);background-repeat:repeat}.messages{padding:26px 5%;background:none}.empty{padding-bottom:15px}.empty>span svg{color:var(--accent);width:112px;height:112px;stroke-width:1.4}.empty h1{font-size:28px;margin:22px 0 12px;letter-spacing:-.6px}.empty p{font-size:16px;line-height:1.6;max-width:375px;color:var(--muted)}.compose-area{padding:12px 20px 18px;background:transparent}#composer{background:var(--surface);border-color:var(--border);border-radius:22px;padding:8px 12px;gap:10px;box-shadow:0 1px 3px #00000008}#composer>.icon-button+button{border:0;width:42px}#composer textarea{font-size:16px;line-height:24px;color:var(--ink)}.send{width:46px;height:46px;background:var(--accent)}.send svg{width:24px;height:24px}.icon-button{color:var(--muted)}.bubble{border:0;border-radius:8px 8px 8px 0;background:var(--surface);box-shadow:0 1px 1px #00000018;min-width:110px;padding:9px 12px 5px;white-space:normal;color:var(--ink);position:relative}.bubble p{white-space:pre-wrap;margin:0 0 3px;line-height:1.55}.mine .bubble{background:var(--outgoing);border:0;color:var(--ink);border-radius:8px 8px 0 8px}.message{margin-bottom:12px}.bubble img{margin:2px 0 8px}.message-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:21px}.message small{font-size:10px;color:var(--muted)}.message-menu{position:relative;font-size:16px}.message-menu summary{list-style:none;cursor:pointer;color:var(--muted);padding:0 6px;min-width:28px;text-align:center}.message-menu summary::-webkit-details-marker{display:none}.message-menu[open]{z-index:4}.message-menu-items{position:absolute;right:0;bottom:26px;background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:0 6px 20px #0002;border-radius:8px;padding:6px;width:235px}.message-menu-items button{display:block;border:0;background:none;color:inherit;text-align:left;padding:12px;width:100%;font-size:14px;border-radius:5px}.message-menu-items button:hover{background:var(--pale)}.message-menu-items small{display:block;font-size:10px;padding:9px 12px}.bubble.deleted{font-style:italic;color:var(--muted)}.bubble.deleted .message-meta{font-style:normal}.text-button{background:var(--surface);border-radius:20px;padding:8px 16px}.auth-story{background:var(--pale)}.auth-story p,.auth-story small{color:var(--muted)}.auth-form input{background:var(--surface);color:var(--ink)}.auth-note{color:var(--muted)}.primary{background:var(--accent)}#attachment,#emojiPicker{background:var(--surface);color:var(--ink)}dialog{background:var(--surface);color:var(--ink)}dialog::backdrop{background:#071b222e;backdrop-filter:none}#callDialog{background:var(--surface)}.video-stage{background:var(--pale)}.call-help{color:var(--muted)}#imageDialog{background:var(--surface)}#closeImage{background:var(--surface)}.appearance-panel{position:fixed;inset:86px 18px auto auto;margin:0;width:365px;max-height:calc(100dvh - 105px);padding:20px;border-radius:12px;box-shadow:0 8px 24px #0002;overflow:auto}.appearance-panel::backdrop{background:transparent}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2{font-size:20px;margin:0}.panel-heading .icon-button{width:28px;height:28px}.appearance-panel h3{font-size:14px;margin:24px 0 12px;font-weight:600}.mode-options{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}.mode-options button{flex:1;display:flex;align-items:center;flex-direction:column;gap:5px;background:none;color:var(--muted);border:1px solid transparent;padding:10px;font-size:24px}.mode-options span{font-size:12px}.mode-options button[aria-pressed=true]{border:1px solid var(--accent);border-radius:9px;background:var(--pale);color:var(--accent)}.color-options,.wallpaper-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.color-options button,.wallpaper-options button{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;background:none;border:0;color:var(--ink);padding:3px}.color-options i{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:white;font-size:20px}.color-options [aria-pressed=true] i{outline:2px solid var(--accent);outline-offset:3px}.color-options [aria-pressed=true] i:after{content:'✓'}.wallpaper-options i{width:100%;height:65px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;font-style:normal;font-size:27px}.wallpaper-options [aria-pressed=true] i{outline:2px solid var(--accent);outline-offset:2px}.swatch-pattern{background:#efeae2 url('wallpaper.svg');background-size:130px}.swatch-plain{background:#f0f2f5}.swatch-sand{background:#e8d9c5 url('wallpaper.svg');background-size:130px}.swatch-sky{background:linear-gradient(160deg,#b6e0f2,#e3f0f7)}.swatch-custom{background:var(--pale)}.upload-wallpaper{width:100%;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--ink);margin-top:22px;font-size:13px;font-weight:600}.settings-note{border-top:1px solid var(--border);padding-top:18px;margin:20px 0;color:var(--muted);font-size:12px}.appearance-panel .primary{font-size:13px;padding:13px}.action-dialog{width:450px;padding:26px}.action-dialog h2{font-size:22px;margin-bottom:12px}.action-dialog p{font-size:14px;line-height:1.6;color:var(--muted)}.action-dialog textarea{border:1px solid var(--border);border-radius:8px;display:block;width:100%;max-height:220px;padding:12px;font-size:16px;background:var(--bg);color:var(--ink);margin-bottom:20px}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}.dialog-actions .primary,.dialog-actions .secondary,.dialog-actions .danger{padding:11px 16px;font-size:13px;border-radius:22px}.secondary{background:none;color:var(--accent);border:1px solid var(--border)}:root[data-wallpaper=custom] main{background-image:var(--custom-wallpaper);background-size:cover;background-position:center;background-repeat:no-repeat}:root[data-wallpaper=custom] .empty{width:fit-content;height:auto;min-height:0;margin:15vh auto 0;padding:22px 28px;border-radius:14px;background:var(--surface);box-shadow:0 3px 20px #0002}:root[data-wallpaper=custom] .empty p{margin-bottom:0}
@media(min-width:1400px){.app{grid-template-columns:390px minmax(0,1fr)}.sidebar-heading{height:84px;margin-bottom:24px}.messages{padding:30px 5%}.empty h1{font-size:30px}}
@media(max-width:760px){.app{grid-template-columns:1fr}header{padding:10px 12px;gap:10px;min-height:70px}header h2{font-size:17px}header small{font-size:10px}header .avatar{width:38px;height:38px}.header-actions{gap:1px}.header-actions .circle{width:34px;height:38px}.header-actions svg{width:21px;height:21px}.header-actions .mobile-only{width:28px}.messages{padding:20px 15px}.empty h1{font-size:23px}.empty p{font-size:14px;max-width:270px}.empty>span svg{width:95px;height:95px}.compose-area{padding:8px 9px 12px}#composer{padding:5px 7px;gap:2px}#composer>.icon-button+button{width:34px}#composer textarea{padding:8px 6px;font-size:16px}.send{width:40px;height:40px}.bubble{max-width:87%}.appearance-panel{inset:78px 10px auto auto;width:350px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 92px)}.action-dialog{padding:22px}.dialog-actions{gap:8px}.dialog-actions button{white-space:nowrap}.account{display:none}}
@media(max-width:380px){header{gap:7px;padding:10px 8px}header small{white-space:nowrap;font-size:9px}header small svg{width:11px;margin-right:2px}.header-actions .circle{width:30px}.header-actions .mobile-only{width:25px}header .avatar{width:34px;height:34px}.header-actions svg{width:19px;height:19px}}