/* Слой поверх общего стиля агентства (style.css): только то, чего там нет. */

main { max-width: 860px; }

.channel-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  padding: 8px 16px; border-radius: var(--radius); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 14px;
}
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

.hint { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }

/* Пост — аккордеон: 20 постов простынёй не читаются, раскрываем по одному. */
.post { padding: 0; }
.post-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; cursor: pointer; list-style: none; user-select: none;
}
.post-head::-webkit-details-marker { display: none; }
.post-head::before {
  content: "▸"; color: var(--text-muted); font-size: 12px; transition: transform .15s;
}
.post[open] > .post-head::before { transform: rotate(90deg); }
.post[open] > .post-head { border-bottom: 1px solid var(--border); }
.post-head:hover { background: var(--bg); }
.head-title { font-weight: 600; flex: 1; min-width: 200px; }
.post-body { padding: 4px 18px 18px; }

.slot { font-weight: 600; font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.badge {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
}
.badge-manual { background: #ecfdf5; border-color: #a7f3d0; color: var(--success); }
.badge-note { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }

.field-label {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 14px 0 6px;
}
.editable {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; white-space: pre-wrap; outline: none; line-height: 1.6;
}
.editable:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.title-field { font-weight: 600; font-size: 17px; }
.body-field { min-height: 160px; }

.toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;
}
.tb {
  min-width: 30px; height: 30px; padding: 0 8px; font-size: 14px; line-height: 1;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.tb:hover { background: var(--bg); border-color: var(--primary); }
.tb-emoji { font-size: 15px; padding: 0 4px; min-width: 28px; }
.tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

.limits { margin-left: auto; display: flex; gap: 4px; }
.chip {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
}
.chip-over { background: var(--error-bg); border-color: #fecaca; color: var(--error-text); font-weight: 600; }

.note-field {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit; resize: vertical;
}
.note-field:focus { border-color: var(--primary); outline: none; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.marks-list { margin-top: 14px; }
.mark {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.mark-text { flex: 1; }
.mark-text i { color: var(--text-muted); }
.mark-del {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 12px; padding: 0; text-decoration: underline;
}
.mark-del:hover { color: var(--error-text); }

.popover-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.tail { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.tail summary { cursor: pointer; }
.tail-line { margin: 4px 0; }

.post-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.save-status { font-size: 14px; }
.save-status.ok { color: var(--success); }
.save-status.err { color: var(--error-text); }
.edits-count { font-size: 13px; color: var(--text-muted); }

.popover {
  position: absolute; z-index: 50; width: min(420px, 92vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 14px;
}
.popover-quote { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.popover label { display: block; font-size: 13px; margin-bottom: 10px; }
.popover textarea, .popover input {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.popover-actions { display: flex; gap: 8px; }
.popover button.secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }