/* ===========================================
   Send as collony: the composer dialog, the Scheduled messages panel
   (Chat history) and the "posted by" tag on bot messages.
   Markup: templates/partials/_posts.html; behaviour: static/js/posts.js.
   =========================================== */

.post-new-btn { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; white-space: nowrap; }
.post-new-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }

/* Composer */
.post-dialog .modal-header { align-items: flex-start; }
.post-dialog .post-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.post-dialog select,
.post-dialog textarea,
.post-dialog input[type="datetime-local"] { margin: 0; font-weight: 400; }
.post-dialog textarea { min-height: 8.5rem; resize: vertical; }
.post-help {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: -0.5rem 0 0.85rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.post-help code { font-size: 0.72rem; }
.post-count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.post-count.over { color: var(--c-danger-bold); font-weight: 600; }
.post-when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-weight: 400; }
.post-when .preset-tabs { flex-shrink: 0; }
.post-when input[type="datetime-local"] { width: auto; flex: 0 1 15rem; }
.post-when small { color: var(--text-muted); font-size: 0.74rem; }
.post-when [hidden] { display: none; } /* the global input styles would show it */

/* Scheduled messages: one compact row above the feed that opens to the list. */
.post-panel { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-1); }
.sched-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--label-1);
    font-size: 13.5px;
    list-style: none;
    cursor: pointer;
}
.sched-row::-webkit-details-marker { display: none; }
.sched-row > svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; color: var(--label-3); }
.sched-row b { font-weight: 500; }
.sched-toggle { margin-left: auto; }
.sched-hide,
.post-panel[open] .sched-show { display: none; }
.post-panel[open] .sched-hide { display: inline; }
.post-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 12px; }
.post-list .micro { margin: 6px 0 0; }
.post-empty { margin: 0; color: var(--label-3); }
.post-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-1);
}
.post-row.post-failed,
.post-row.post-completed,
.post-row.post-cancelled { border-style: solid; border-color: var(--hairline); }
.post-row.post-completed,
.post-row.post-cancelled { opacity: 0.8; }
.post-row-main { flex: 1; min-width: 0; }
.post-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--label-2); font-size: 12.5px; }
.post-row-head b { color: var(--label-1); font-weight: 500; }
.post-byline { color: var(--label-3); }
.post-row-text { margin-top: 2px; color: var(--label-body); font-size: 13.5px; overflow-wrap: anywhere; }
.post-row-error { margin-top: 2px; color: var(--red); font-size: 13px; }
.post-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

@media (max-width: 600px) {
    .post-row { flex-direction: column; align-items: stretch; }
    .post-row-actions { justify-content: flex-end; }
}