@font-face{font-family:Lif;src:url('assets/lif.ttf') format('truetype');font-display:swap}
:root{--paper:#f6f1e3;--white:#fffcf2;--ink:#302a3b;--muted:#686078;--yellow:#f9d65a;--green:#b4d1b1;--blue:#b2cce1;--red:#eead9a;--line:2px solid var(--ink);color-scheme:light}
*{box-sizing:border-box}html{height:100%}body{margin:0;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer;border:var(--line);border-radius:12px 9px 13px 10px;background:var(--yellow);padding:8px 13px;font:1rem/1.3 Lif,sans-serif;box-shadow:2px 2px 0 var(--ink)}button:hover{filter:brightness(.97)}button:active{transform:translate(1px,1px);box-shadow:none}button:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}button.quiet{font-family:inherit;font-size:.8rem;background:transparent;box-shadow:none;padding:6px 9px;border-color:transparent}button.quiet:hover{background:#302a3b0b}button.icon-button{width:34px;height:36px;display:grid;place-items:center;padding:6px;flex:none}svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}a{color:inherit;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #36776c;outline-offset:3px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}h1,h2,h3{font-family:Lif,sans-serif;font-weight:400;line-height:1.2}h1,h2{margin:0}p{margin:.4rem 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip{position:fixed;top:-80px;left:10px;background:var(--yellow);padding:10px;z-index:100}.skip:focus{top:10px}
.topbar{position:relative;z-index:1;min-height:62px;display:flex;align-items:center;gap:8px;padding:10px 17px;flex:none;background:var(--paper);border-bottom:1px solid #302a3b22}.brand{display:flex;align-items:center;margin-left:auto;gap:7px;text-decoration:none;font:1.9rem/1 Lif,sans-serif}.brand img{transform:rotate(-6deg)}.new-chat{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:.95rem;padding:8px 11px}.new-chat svg{width:18px;height:18px}.in-conversation .topbar{display:none}
.layout{position:relative;z-index:1;flex:1;width:100%;max-width:1000px;min-height:0;margin:auto;overflow:hidden}.sidebar{display:none;flex-direction:column;height:100%;min-height:0;max-width:740px;margin:auto;padding:13px 14px 0}.show-rooms .sidebar{display:flex}.show-rooms .conversation{display:none}.inbox-search{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid #302a3b45;border-radius:20px;background:#ffffff30;flex:none}.inbox-search svg{width:18px;height:18px;flex:none}.inbox-search input{width:100%;min-width:0;border:0;background:none;font-size:.88rem;padding:0}.suggestions{flex:none;margin:11px 0 4px}.suggestion-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:4px 3px 7px;scroll-snap-type:x proximity}.suggestion-track:empty{display:none}.person-suggestion{flex:0 0 62px;display:flex;align-items:center;flex-direction:column;gap:6px;padding:0;border:0;background:transparent;box-shadow:none;font-family:inherit;font-size:.66rem;min-width:0;scroll-snap-align:start}.person-suggestion>span:last-child{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-avatar,.room-avatar{flex:none;display:grid;place-items:center;color:#302a3b;border:1.7px solid #302a3b;border-radius:14px 11px 15px 10px;background:var(--room-color,var(--blue));font:1.35rem Lif,sans-serif}.suggestion-avatar{width:45px;height:45px;box-shadow:1px 2px 0 #302a3b}.suggestion-avatar svg{width:27px;height:27px}.room-avatar{width:43px;height:43px}.room-avatar svg{width:27px;height:27px}.room-avatar.direct,.suggestion-avatar.person{border-radius:48% 44% 47% 42%;background:var(--green)}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 7px 8px;flex:none}.sidebar-heading h1{font-size:1.2rem}.sidebar-note{font-size:.72rem;color:var(--muted)}#room-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px 10px;scrollbar-gutter:stable}.room-link{display:flex;align-items:center;gap:11px;width:100%;min-height:65px;padding:8px 7px;border:0;border-radius:12px;background:none;box-shadow:none;text-align:left;font-family:inherit;font-size:.88rem}.room-link:hover{background:#ffffff40}.room-link[aria-current=page]{background:#302a3b0b}.room-name{flex:1;min-width:0}.room-name-line{display:flex;gap:8px;align-items:baseline;justify-content:space-between}.room-name strong{font-size:.85rem;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.room-name time{font-size:.6rem;color:var(--muted);white-space:nowrap;flex:none}.room-link small{display:block;font-size:.74rem;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%;margin-top:3px}.room-link b{font-size:.65rem;padding:2px 6px;border-radius:20px;background:var(--ink);color:var(--paper)}.room-group{font-size:.75rem;color:var(--muted);margin:18px 7px 6px}#invitations{flex:none;max-height:30%;overflow:auto}.invitation{margin:5px 2px 10px;padding:10px;background:var(--blue);border:var(--line);border-radius:10px}.invitation p{font-size:.8rem}.invitation button{font-size:.75rem}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.conversation,#chat{height:100%;min-height:0}.conversation{background:var(--paper)}#chat{display:flex;flex-direction:column}.welcome{padding:40px}.welcome h2{font-size:3rem}.room-header{display:flex;align-items:center;gap:6px;flex:none;padding:10px 11px;border-bottom:1px solid #302a3b25}.room-header .room-avatar{width:35px;height:35px;border-radius:11px 9px 12px 8px;margin-right:4px}.room-header .room-avatar svg{width:23px;height:23px}.room-title{flex:1;min-width:0}.room-title h2{font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search{display:flex;align-items:center;gap:5px;padding:8px 15px;flex:none;border-bottom:1px solid #302a3b18}.search input{min-width:0;flex:1;border:1px solid #8d8598;border-radius:8px;padding:7px 10px;background:transparent;font-size:.85rem}.connection{padding:7px 17px;flex:none;font-size:.75rem;color:var(--muted)}.connection:empty{display:none}.connection[data-error=true]{color:#7b3026;background:#eead9a55}.messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 19px 18px;scrollbar-gutter:stable}.message{display:flex;gap:10px;margin:17px 0;position:relative}.avatar{width:29px;height:29px;flex-shrink:0;border:1.7px solid var(--ink);border-radius:10px 8px 11px 7px;background:var(--blue);font:1rem/25px Lif,sans-serif;text-align:center;transform:rotate(-3deg)}.message.mine .avatar{background:var(--green)}.message-main{min-width:0;flex:1}.message-meta{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}.message-meta strong{font-size:.8rem}.message time,.message .edited{font-size:.65rem;color:var(--muted)}.message-body{font-size:.94rem;white-space:pre-wrap;overflow-wrap:anywhere;margin:3px 0 5px}.message-body a{color:#285e60}.message.deleted .message-body,.message.blocked .message-body{font-style:italic;color:var(--muted);font-size:.8rem}.message-tools{display:flex;flex-wrap:wrap;gap:10px;opacity:.5}.message:hover .message-tools,.message:focus-within .message-tools{opacity:1}.message-tools button{min-height:24px;font-size:.67rem;border:0;background:none;box-shadow:none;padding:0 2px;font-family:inherit}.quote{padding:7px 10px;border-left:3px solid #6d8394;background:#b2cce122;border-radius:0 7px 7px 0;font-size:.75rem;margin:7px 0;white-space:pre-wrap;overflow-wrap:anywhere}.empty{padding:24px 12px;color:var(--muted);font-size:.88rem;text-align:center}.empty strong{display:block;color:var(--ink);font:1.35rem Lif,sans-serif;margin-bottom:9px}.older{align-self:center;margin:8px}.composer{flex:none;margin:0 13px calc(12px + env(safe-area-inset-bottom));padding:7px 8px 5px;background:#ffffff35;border:1.7px solid var(--ink);border-radius:16px 12px 18px 11px;box-shadow:2px 2px 0 var(--ink)}.composer-entry{display:flex;align-items:flex-end;gap:8px}.composer textarea{display:block;flex:1;min-width:0;min-height:40px;max-height:140px;resize:none;border:0;background:none;padding:9px 5px;line-height:1.45;font-size:.92rem;overflow-y:auto}.composer-entry>button{flex:none;padding:8px 11px;margin-bottom:3px;font-size:.95rem;background:var(--green)}#send-state{font-size:.65rem;color:var(--muted);margin:3px 5px}#send-state:empty{display:none}.replying{font-size:.75rem;padding:3px 5px 8px;color:var(--muted)}.replying button{font-size:.7rem!important}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;max-width:min(90vw,600px);background:var(--ink);color:var(--paper);border-radius:10px;padding:10px 15px;z-index:50;font-size:.82rem;box-shadow:0 5px 25px #302a3b33}
dialog{width:min(620px,calc(100vw - 26px));border:var(--line);border-radius:17px 12px 18px 13px;background:var(--paper);color:var(--ink);padding:22px;max-height:88dvh;box-shadow:5px 6px 0 #302a3b55}dialog::backdrop{background:#302a3b66}.dialog-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}.dialog-heading h2{font-size:1.6rem}dialog label{display:block;font-weight:600;font-size:.85rem;margin:15px 0 5px}dialog input,dialog textarea,dialog select{width:100%;background:var(--white);border:1px solid #8d8598;border-radius:8px;padding:10px;min-width:0}dialog textarea{min-height:85px}dialog form>button[type=submit]{margin-top:18px}dialog p{font-size:.88rem;margin:10px 0}.dialog-error{color:#7b3026}.person-row{padding:12px 0;border-top:1px solid #302a3b33;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.person-row strong{font-size:.9rem}.person-row small{font-size:.72rem;color:var(--muted);display:block}.privacy-note{font-size:.76rem!important;color:var(--muted);border-top:1px solid #302a3b33;padding-top:13px}.invite-output{font-family:monospace;font-size:.85rem;overflow-wrap:anywhere;background:var(--white);padding:12px;border:var(--line);border-radius:8px}.new-people{max-height:35dvh;overflow-y:auto;margin-top:12px}.new-group{background:var(--green);width:100%;margin-bottom:14px}.new-people .person-row{flex-wrap:nowrap}.new-people .person-row>strong{min-width:0;overflow-wrap:anywhere}.new-people button{flex:none}dialog label.history-consent{display:flex;align-items:flex-start;gap:10px;font-size:.8rem;font-weight:400;padding:12px;border:var(--line);border-radius:10px;background:var(--white)}dialog .history-consent input{width:18px;height:18px;flex:none;accent-color:var(--ink);margin:3px 0 0;padding:0}.group-visibility{font-size:.8rem!important;color:var(--muted)}
.style-picker{min-width:0;margin:18px 0 10px;padding:13px;border:1px solid #302a3b40;border-radius:14px}.style-picker legend{font:1.05rem Lif,sans-serif;padding:0 5px}.style-preview{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.8rem}.style-preview .room-avatar{width:54px;height:54px}.style-icons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.style-icons button{width:100%;aspect-ratio:1;min-width:0;padding:5px;display:grid;place-items:center;background:var(--room-color);color:#302a3b;border:1.5px solid transparent;border-radius:9px;box-shadow:none}.style-icons button[aria-pressed=true]{border-color:#302a3b;box-shadow:1px 2px 0 #302a3b}.style-colors{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.style-colors button{width:28px;height:28px;padding:0;border:1.5px solid #302a3b;border-radius:50%;background:var(--room-color);box-shadow:none}.style-colors button[aria-pressed=true]{outline:2px solid #302a3b;outline-offset:3px}.style-colors button svg{width:17px;height:17px;color:#302a3b}.style-label{font-size:.74rem!important;color:var(--muted)}.demo{position:relative;z-index:1;flex:none;background:var(--red);padding:5px 10px;text-align:center;font-size:.7rem}.demo button{font-family:inherit;font-size:.7rem;margin:0 3px;padding:3px 5px}
:root[data-thema]{--white:var(--paper);--muted:var(--soft,#686078)}:root[data-thema] .lif-skraut{z-index:0;opacity:.12}
@media(max-width:430px){.topbar{padding:9px 12px;min-height:58px}.new-chat{font-size:.85rem;padding:8px 10px}.brand{font-size:1.65rem}.brand img{width:26px;height:26px}#profile-button{font-size:.7rem;padding:5px}.room-header{gap:2px;padding:9px 7px}.room-header .room-avatar{width:30px;height:30px;margin-right:4px}.room-header .room-avatar svg{width:21px;height:21px}.room-title h2{font-size:1.05rem}.room-header .icon-button{width:30px;height:34px;padding:5px}.messages{padding:8px 12px 15px}.composer{margin-inline:10px}.style-icons{grid-template-columns:repeat(6,minmax(0,1fr))}dialog{padding:17px}.dialog-heading h2{font-size:1.4rem}.search{padding:7px 10px}}
@media(hover:none){.message-tools{opacity:.85}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}