/* live.css — live demo block, inline editing, timeline, composer */
.live .cover{position:relative;border-radius:var(--radius);border:1px solid var(--border);overflow:visible;max-height: 660px;}
.live .cover img.main{border-radius:var(--radius);width: 100%; max-height: 660px;}
.live .logo-wrap{position:absolute;left:50%;bottom:0;transform:translate(-50%, 50%);width:clamp(150px, 22vw, 260px);height:clamp(150px, 22vw, 260px);
  border-radius:50%; border:6px solid var(--card); background:var(--card); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow); z-index:2}
.live .inline{display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--space)*4);gap:.6rem}
.live [contenteditable="true"]{outline:1px dashed transparent;border-radius:8px;padding:2px 6px;caret-color:var(--brand)}
.live [contenteditable="true"]:focus{outline-color:var(--border);background:rgba(127,127,127,.06)}

.timeline{margin-top:var(--space);display:grid;gap:var(--space)}
.compose{display:grid;gap:.6rem;border:1px dashed var(--border);border-radius:var(--radius);padding:var(--space);background:var(--card); margin-top: 25px;}
.post{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space);box-shadow:var(--shadow)}
.post .meta{font-size:1em;color:var(--muted);margin-bottom:.5rem}
.post .actions{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.comment{margin-top:.6rem;padding:.7rem;border-radius:12px;background:rgba(127,127,127,.06)}

/* Composer toolbar */
.composer-row{display:flex; align-items:center; gap:.6rem; margin-top:.6rem; flex-wrap:wrap}
.composer-left{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
#add-post{ margin-left:auto }

.icon-btn{display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .7rem; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); cursor:pointer; font-weight:600; transition: background .15s ease, border-color .15s ease, outline-color .15s ease}
.icon-btn svg{ width:18px; height:18px; flex:0 0 auto; fill: currentColor; opacity:.9}
.icon-btn:hover{ background: color-mix(in oklab, var(--card), var(--text) 6%); border-color: color-mix(in oklab, var(--border), var(--text) 18%)}
.icon-btn:active{ background: color-mix(in oklab, var(--card), var(--text) 10%)}
.icon-btn.selected, .icon-btn[aria-pressed="true"]{ background: color-mix(in oklab, var(--card), var(--text) 8%); border-color: color-mix(in oklab, var(--border), var(--text) 28%)}
.icon-btn:focus-visible{ outline: 2px solid color-mix(in oklab, var(--text) 26%, transparent); outline-offset: 2px}

.post .media{ margin-top:.6rem; border-radius:12px; overflow:hidden; border:1px solid var(--border); background: var(--card) }
.post .media img, .post .media video{ display:block; width:100%; height:auto }
.post .media video{ max-height:420px }

.compose input,
.compose textarea,
.compose select {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface, var(--card));
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.compose textarea { resize: vertical; }