/* Upper Room composer. Part 2, piece 5b-2a. */
.cz{position:fixed;top:0;left:0;right:0;height:100%;z-index:60;background:var(--bg,#000);color:var(--fg,#e7e9ea);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1)}
.cz.on{transform:none}
.cz-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.cz-x{background:none;border:0;color:inherit;font:inherit;font-size:16px;padding:8px 4px;cursor:pointer}
.cz-go{background:#d4a73a;color:#111;border:0;border-radius:999px;font:inherit;font-weight:700;font-size:15px;padding:8px 18px;min-width:84px;cursor:pointer;transition:opacity .2s,transform .12s}
.cz-go:active{transform:scale(.96)}.cz-go:disabled{opacity:.4;cursor:default}
.cz-bar{height:2px;position:relative;overflow:hidden;flex:none}
.cz-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#b8862b,#f3d27a);box-shadow:0 0 8px rgba(243,210,122,.55);transition:width .25s linear}
.cz-bar.wait i{width:100%!important;animation:czGlow 1.6s ease-in-out infinite}
@keyframes czGlow{0%,100%{opacity:.3}50%{opacity:1}}
.cz-bd{flex:1;overflow:auto;padding:6px 16px 16px;display:flex;gap:12px;-webkit-overflow-scrolling:touch}
.cz-av{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.cz-main{flex:1;min-width:0}
.cz-ta{width:100%;background:none;border:0;outline:0;color:inherit;font:inherit;font-size:18px;line-height:1.42;resize:none;min-height:96px;padding:8px 0}
.cz-ta::placeholder{color:#71767b}
.cz-md{display:grid;gap:4px;border-radius:16px;overflow:hidden;margin-top:6px}
.cz-md.n0{display:none}.cz-md.n2,.cz-md.n3,.cz-md.n4{grid-template-columns:1fr 1fr}
.cz-md.n3 .cz-it:first-child{grid-row:span 2;aspect-ratio:auto}
.cz-it{position:relative;background:#16181c;aspect-ratio:1;overflow:hidden}
.cz-md.n1 .cz-it{aspect-ratio:auto}
.cz-it img,.cz-it video{width:100%;height:100%;object-fit:cover;display:block}
.cz-md.n1 .cz-it img,.cz-md.n1 .cz-it video{object-fit:contain;max-height:52vh;background:#000}
.cz-rm{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.cz-rm svg{width:15px;height:15px}
.cz-st{position:absolute;left:8px;bottom:8px;font-size:12px;font-weight:600;background:rgba(0,0,0,.72);color:#fff;border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
.cz-p{position:absolute;left:0;bottom:0;height:2px;width:0;background:#f3d27a;transition:width .25s linear}
.cz-it.err{outline:2px solid #f4212e;outline-offset:-2px}.cz-it.err .cz-st{background:#8b1a1a}
.cz-hint{margin:0;font-size:13px;color:#f3d27a;padding:0 16px 2px}
.cz-tags{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;flex:none}
.cz-tags::-webkit-scrollbar{display:none}
.cz-tags.need{animation:czNudge .36s ease}
.cz-tags.need .cz-tag{border-color:rgba(212,167,58,.6)}
@keyframes czNudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.cz-tag{flex:none;display:flex;align-items:center;gap:6px;border:1px solid #333639;background:none;color:#e7e9ea;border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.cz-tag svg{width:16px;height:16px}
.cz-tag[aria-pressed=true]{border-color:#d4a73a;background:rgba(212,167,58,.14);color:#f3d27a}
.cz-tb{display:flex;align-items:center;gap:4px;border-top:1px solid #2f3336;padding:6px 10px;padding-bottom:max(6px,env(safe-area-inset-bottom));flex:none}
.cz-tb button{background:none;border:0;color:#d4a73a;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.cz-tb button:disabled{opacity:.3;cursor:default}.cz-tb svg{width:23px;height:23px}
.cz-n{margin-left:auto;padding-right:6px;font-size:13px;color:#71767b;font-variant-numeric:tabular-nums}
.cz-n.warn{color:#f3d27a}.cz-n.over{color:#f4212e;font-weight:700}
.czp{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #2f3336;position:relative;overflow:hidden}
.czp>svg{width:22px;height:22px;color:#d4a73a;flex:none}
.czp div{flex:1;min-width:0}.czp b{display:block;font-size:15px}.czp small{display:block;color:#71767b;font-size:13px;margin-top:1px}
.czp i{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,#b8862b,#f3d27a);transition:width .6s ease}
.czp.err>svg{color:#f4212e}.czp .cz-rm{position:static;background:none;color:#71767b}
.cz-top{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;opacity:0;transition:opacity .3s}
.cz-top.on{opacity:1}
.cz-top i{display:block;height:100%;background:linear-gradient(90deg,transparent,#f3d27a,transparent) no-repeat;background-size:40% 100%;animation:czSweep 1.8s ease-in-out infinite}
@keyframes czSweep{0%{background-position:-40% 0}100%{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.cz{transition:none}.cz-bar.wait i,.cz-top i,.cz-tags.need{animation:none}}
/* piece 6e: the composer holds still, stays solid above the keyboard, and can post into a community */
.cz{overscroll-behavior:contain}
.cz::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:var(--bg,#000);pointer-events:none}
.cz-tags[hidden]{display:none!important}
.cz-cm{display:flex;align-items:center;gap:10px;margin:6px 16px 10px;padding:10px 14px;border-radius:14px;font-size:15.5px;color:var(--dim,#71767b);
  background:color-mix(in srgb,var(--cc,#1d9bf0) 14%,#0f1113);border:.5px solid color-mix(in srgb,var(--cc,#1d9bf0) 42%,transparent)}
.cz-cm b{color:var(--tx,#e7e9ea);font-weight:800}
.cz-cmi{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;overflow:hidden;color:#fff;background:var(--cc,#1d9bf0)}
.cz-cmi svg{width:18px;height:18px}