/* TENP/web/css/style-editor.css */
/* Контейнер для редактора и для опубликованного контента */
.editor-container {
width: 100%;
max-width: 700px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px 40px;
position: relative;}
/* Стили для полей ввода */
.input-field {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-bottom: 2px solid #ddd;
font-size: 1.2em;
outline: none;
transition: border-color 0.3s;}
.input-field:focus {
border-bottom-color: #007bff;}
/* Стили для панели инструментов и редактора */
.toolbar {
    width: 100%;
    background-color: #f1f1f1;
    padding: 8px;
    border-bottom: 1px solid #ddd;}
.toolbar-button {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
width: auto;
height: 30px;
font-size: 1em;
margin-right: 5px;
padding: 0 5px;    }
.toolbar-button:hover {background-color: #e9e9e9;}
/* Стили для области контента */
.content-area {
    width: 100%;
    min-height: 300px;
    padding: 10px;
    font-size: 1em;
    line-height: 1.6;
    outline: none;
    border: none;}
.content-area:focus {border-color: #007bff;}
.content-area[data-placeholder]:empty:before {
content: attr(data-placeholder);
color: #999;
pointer-events: none;}
/* Стили для круглых кнопок (светофор) */
.actions,
.edit-container {
position: absolute;
top: 20px;
right: 15px;}
.action-button {
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s;}
.action-button:hover {transform: scale(1.1);}
/* Зеленый */
.publish-button {background-color: #28a745;}
/* Желтый */
.edit-button {background-color: #ffc107;}
/* --- TAG EDITOR WIDGET --- */
.tag-editor-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 0; /* Подгоняем под стиль .input-field */
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
    background: transparent;
    transition: border-color 0.3s;
    cursor: text;
    position: relative;}
.tag-editor-container.active {border-bottom-color: #007bff;}
.tag-pill {
    display: flex;
    align-items: center;
    background-color: #eef2f5;
    color: #333;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.9em;
    user-select: none;
    border: 1px solid #ccc;}
.tag-pill .remove-tag-btn {
    margin-left: 6px;
    cursor: pointer;
    color: #999;
    font-weight: bold;
    line-height: 1;}
.tag-pill .remove-tag-btn:hover {color: #d9534f;}
.tag-input-ghost {
    border: none;
    outline: none;
    font-size: 1.2em; /* Как у основных инпутов */
    flex-grow: 1;
    min-width: 150px;
    background: transparent;
    padding: 5px;
    color: #333;}
/* Выпадающий список автокомплита */
.tag-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 150px;
    overflow-y: auto;
    width: 100%;
    display: none;}
.tag-suggestions.visible {display: block;}
.tag-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.95em;}
.tag-suggestion-item:hover, .tag-suggestion-item.selected {
    background-color: #f1f1f1;
    color: #007bff;}
/* Стили для поля Категории */
#topic-input {
    display: block;
    width: 100%;
    border: none; /* Убираем рамку-гробик */
    background: transparent;
    padding: 8px 0;
    margin-bottom: 5px;
    font-family: inherit;
    font-size: 1rem;
    color: #666; /* Цвет посветлее, чем у заголовка */
    outline: none;
    border-bottom: 1px solid transparent; /* Скрытая линия снизу */
    transition: border-color 0.2s;}
.content-area ul, .content-area ol {
    padding-left: 24px;
    margin: 10px 0;}
/* При фокусе подсвечиваем линию снизу */
#topic-input:focus {border-bottom-color: #ddd;}
#topic-input::placeholder {color: #ccc; font-style: italic;}