.telegram-demo{--demo-ink:#272d30;--demo-muted:#626b70;color:var(--demo-ink);max-width:1120px;margin:0 auto;padding:0 32px 28px}.telegram-demo button,.telegram-demo textarea{font:inherit}.telegram-demo :is(button,a,summary){touch-action:manipulation}.telegram-demo :is(button,a,textarea,summary,input):focus-visible{outline-offset:3px;outline:2px solid #476e81}.demo-topbar{height:76px;color:var(--demo-muted);justify-content:space-between;align-items:center;gap:20px;font-size:11px;display:flex}.demo-back{color:var(--demo-ink);align-items:center;gap:8px;padding:12px 0;font-size:13px;display:inline-flex}.demo-columns{grid-template-columns:minmax(0,660px) minmax(0,290px);align-items:start;gap:56px;display:grid}.demo-chat{background:#edf0f1;border:1px solid #dce0e1;border-radius:10px;min-width:0;overflow:hidden}.demo-chat-header{background:#fff;border-bottom:1px solid #e3e7e8;align-items:center;gap:12px;min-height:76px;padding:15px 20px;display:flex}.demo-avatar{color:#fff;background:#2c363c;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;display:grid}.demo-chat-header h1{letter-spacing:-.2px;margin:0;font-size:16px;font-weight:600}.demo-chat-header p{color:var(--demo-muted);margin:3px 0 0;font-size:11px}.demo-reset{min-height:40px;color:var(--demo-muted);margin-left:auto;font-size:11px!important}.demo-conversation{overscroll-behavior:contain;scrollbar-width:thin;height:clamp(330px,100dvh - 350px,610px);padding:24px;overflow:hidden auto}.demo-welcome{text-align:center;height:100%;min-height:280px;color:var(--demo-muted);flex-direction:column;justify-content:center;align-items:center;display:flex}.demo-welcome h2{letter-spacing:-.9px;color:var(--demo-ink);margin:22px 0 14px;font-size:26px;font-weight:450;line-height:1.2}.demo-welcome p{margin:0;font-size:13px;line-height:1.6}.demo-exchange{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px;display:flex}.demo-outgoing{background:#dfe9de;border-radius:12px 12px 3px;align-self:flex-end;min-width:70px;max-width:82%;padding:10px 12px 6px}.demo-outgoing p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 4px;font-size:13px;line-height:1.6}.demo-sent-check{color:#4f7656;margin-left:auto;display:block}.demo-sent-photo{object-fit:contain;border-radius:5px;width:auto;max-width:100%;height:auto;max-height:220px;margin-bottom:5px}.demo-receipt{overflow-wrap:anywhere;background:#fff;border-radius:12px 12px 12px 3px;min-width:200px;max-width:88%;padding:13px 15px 7px;box-shadow:0 1px 2px #10182009}.demo-saved-status{color:#56635a;align-items:center;gap:5px;margin:0 0 5px;font-size:10px;display:flex}.demo-receipt h3{margin:0;font-size:14px;font-weight:550;line-height:1.4}.demo-processing{color:var(--demo-muted);align-items:center;gap:7px;margin:3px 0 7px;font-size:12px;display:flex}.demo-processing>span{background:#81968a;border-radius:50%;width:5px;height:5px}.demo-tags{color:#536b7b;flex-wrap:wrap;gap:4px 9px;margin:9px 0 2px;font-size:11px;line-height:1.5;display:flex}.demo-tags span{overflow-wrap:anywhere;max-width:100%}.demo-receipt-actions{flex-wrap:wrap;align-items:start;gap:4px 15px;margin-top:5px;font-size:11px;display:flex}.demo-receipt-actions>a{align-items:center;gap:5px;min-height:36px;display:inline-flex}.demo-receipt-actions button,.demo-more summary{min-height:36px;padding:8px 0}.demo-more summary{cursor:pointer;color:var(--demo-muted)}.demo-more-actions{flex-wrap:wrap;gap:14px;padding:0 0 6px;display:flex}.demo-more-actions button{font-size:11px}.demo-private{border-top:1px solid #e6e9e9;padding:10px 0;font-size:11px;line-height:1.6}.demo-private strong{color:var(--demo-muted);font-weight:500}.demo-private p{white-space:pre-wrap;margin:3px 0 0}.demo-reply{border-top:1px solid #e1e5e6;padding-top:12px}.demo-reply label{margin-bottom:6px;font-size:11px;display:block}.demo-reply textarea,.demo-copy-fallback textarea{background:#fff;border:1px solid #9daab1;border-radius:3px;width:100%;padding:8px;font-size:13px}.demo-reply>div{gap:20px;display:flex}.demo-reply button{min-height:40px;font-size:11px}.demo-samples{background:#f4f6f6;border-top:1px solid #e0e4e5;align-items:center;gap:8px;padding:12px 16px;display:flex}.demo-samples>span{color:var(--demo-muted);white-space:nowrap;margin-right:2px;font-size:10px}.demo-sample-link{background:#fff;border:1px solid #e0e4e5;border-radius:5px;align-items:center;gap:9px;min-height:42px;padding:0 12px;display:flex;font-size:11px!important}.demo-sample-photo{border-radius:4px;flex-shrink:0;width:38px;height:42px;overflow:hidden}.demo-sample-photo img{object-fit:cover;width:100%;height:100%}.demo-compose{background:#fff;border-top:1px solid #e2e6e7;padding:8px 12px}.demo-compose-row{align-items:end;gap:8px;display:flex}.demo-compose textarea{resize:vertical;width:100%;min-width:0;min-height:44px;max-height:120px;color:var(--demo-ink);background:#fff;border:0;padding:12px 4px;font-size:14px;line-height:20px}.demo-compose textarea::placeholder{color:#727a7e;opacity:1}.demo-attach{color:#6a757b;flex:0 0 36px;place-items:center;height:44px;display:grid}.demo-send{color:#fff;background:#293e4b;border-radius:50%;flex:0 0 36px;place-items:center;height:36px;margin-bottom:4px;display:grid}.demo-send:disabled{color:#7d898e;cursor:default;background:#e3e8eb}.demo-attachment{color:var(--demo-muted);align-items:center;gap:12px;padding:4px 0 10px;font-size:11px;display:flex}.demo-attachment img{object-fit:cover;border-radius:5px;width:54px;height:54px}.demo-attachment button{place-items:center;width:36px;height:36px;margin-left:auto;display:grid}.demo-input-notice{color:#704a2c;margin:6px 5px;font-size:11px}.demo-library{min-width:0;padding-top:7px}.demo-library header{margin-bottom:24px}.demo-library h2{align-items:center;gap:9px;margin:0;font-size:16px;font-weight:500;display:flex}.demo-library h2 span{color:#6b757a;font:10px monospace}.demo-library header p{color:var(--demo-muted);margin:7px 0 0;font-size:11px;line-height:1.6}.demo-library-empty{color:var(--demo-muted);margin:65px 0;font-size:12px}.demo-public-grid{gap:26px;display:grid}.demo-public-card{min-width:0;scroll-margin-top:20px}.demo-public-card:target{outline-offset:8px;outline:2px solid #527789}.demo-preview-photo{object-fit:contain;object-position:left;border-radius:3px;width:100%;height:auto;max-height:270px;display:block}.demo-public-content{padding-top:11px}.demo-public-content h3{letter-spacing:-.2px;overflow-wrap:anywhere;margin:0 0 6px;font-size:15px;font-weight:500;line-height:1.4}.demo-public-content>p{color:var(--demo-muted);margin:0;font-size:11px;line-height:1.6}.demo-public-content .demo-tags{color:var(--demo-muted);gap:3px 9px;font-size:10px}.demo-public-actions{align-items:center;gap:20px;margin-top:5px;font-size:11px;display:flex}.demo-public-actions a{align-items:center;gap:4px;min-height:36px;display:inline-flex}.demo-public-actions button{min-height:36px;font-size:11px}.demo-limitation{color:var(--demo-muted);margin:7px 0;font-size:11px;line-height:1.5}.demo-copy-status{color:var(--demo-muted);font-size:11px}.demo-copy-fallback{font-size:11px}.demo-copy-fallback textarea{margin-top:8px}.demo-footnote{color:var(--demo-muted);align-items:start;gap:40px;margin-top:18px;font-size:10px;line-height:1.6;display:flex}.demo-footnote p{max-width:660px;margin:0}.demo-footnote details{flex-shrink:0;max-width:290px}.demo-footnote summary{cursor:pointer;min-height:30px}.demo-footnote label{align-items:start;gap:8px;display:flex}@media (max-width:800px){.telegram-demo{padding:0 16px 24px}.demo-topbar{gap:10px;height:56px;font-size:10px}.demo-columns{grid-template-columns:minmax(0,1fr);gap:32px}.demo-chat-header{min-height:70px;padding:12px 14px}.demo-conversation{height:clamp(270px,100dvh - 290px,520px);padding:16px 12px}.demo-welcome{min-height:250px}.demo-welcome h2{font-size:24px}.demo-samples{gap:6px;padding:10px}.demo-samples>span{font-size:9px}.demo-sample-link{gap:3px;padding:0 8px;font-size:9px!important}.demo-sample-photo{width:32px}.demo-compose{padding:6px 8px}.demo-compose textarea{font-size:16px}.demo-library{padding:0 4px}.demo-library header{margin-bottom:18px}.demo-public-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.demo-preview-photo{max-height:210px}.demo-public-content h3{font-size:13px}.demo-public-actions{flex-wrap:wrap;gap:0 12px}.demo-footnote{flex-direction:column;gap:8px;margin-top:24px}.demo-library-empty{margin:30px 0}}@media (max-width:360px){.telegram-demo{padding-inline:10px}.demo-samples>span{white-space:normal;max-width:35px;line-height:1.3}.demo-receipt{max-width:94%}}
