/* posteka — стили студии. Лендинг/базовое — на Tailwind (CDN) + theme.css.
   Здесь только компоненты студии (двухпанельный редактор), светлая + тёмная тема. */

/* ── Раскладка студии ─────────────────────────────────────────────────────── */
.pk-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  height: calc(100vh - 3.5rem);
  overflow: hidden;
}
.pk-pane { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.pk-pane-post { padding: 1rem 1.25rem 1.5rem; gap: .85rem; }
.pk-pane-chat { border-left: 1px solid #e2e8f0; background: rgba(255,255,255,.6); }
.dark .pk-pane-chat { border-color: #253352; background: rgba(17,26,46,.5); }

@media (max-width: 860px) {
  .pk-studio { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .pk-pane-chat { border-left: none; border-top: 1px solid #e2e8f0; height: 70vh; }
}

/* ── Тулбар ───────────────────────────────────────────────────────────────── */
.pk-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pk-grow { flex: 1 1 auto; }
.pk-select {
  border: 1px solid #e2e8f0; background: #fff; color: #0f172a; border-radius: .6rem;
  padding: .45rem .6rem; font-size: .85rem; font-weight: 600; cursor: pointer; outline: none;
}
.dark .pk-select { background: #0f1830; border-color: #2e3d63; color: #e2e8f0; }

.pk-btn {
  border: 1px solid transparent; border-radius: .6rem; padding: .5rem .85rem;
  font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: .15s;
}
.pk-btn-primary { background: #1e83e0; color: #fff; }
.pk-btn-primary:hover { background: #0f6ac2; }
.pk-btn-ghost { background: #f1f5f9; color: #475569; }
.pk-btn-ghost:hover { background: #e2e8f0; }
.pk-btn:disabled { opacity: .5; cursor: not-allowed; }
.dark .pk-btn-ghost { background: #1a2440; color: #cbd5e1; }
.dark .pk-btn-ghost:hover { background: #253352; }

/* Кнопка-микрофон */
.pk-mic {
  display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #e2e8f0;
  background: #fff; color: #0f172a; border-radius: .6rem; padding: .45rem .8rem;
  font-size: .85rem; font-weight: 700; cursor: pointer; transition: .15s;
}
.pk-mic:hover { border-color: #74bcff; }
.dark .pk-mic { background: #0f1830; border-color: #2e3d63; color: #e2e8f0; }
.pk-mic-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #94a3b8; }
.pk-mic.rec { border-color: #ef4444; color: #ef4444; }
.pk-mic.rec .pk-mic-dot { background: #ef4444; animation: pkPulse 1s infinite; }
@keyframes pkPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.pk-balance { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: #1e83e0; }
.dark .pk-balance { color: #74bcff; }
.pk-px { width: .6rem; height: .6rem; border-radius: 3px; background: #1e83e0; }
.dark .pk-px { background: #74bcff; }

/* ── Редактор поста ───────────────────────────────────────────────────────── */
.pk-editor-wrap { position: relative; flex: 0 0 auto; }
.pk-editor {
  min-height: 12rem; border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff;
  padding: 1rem 1.1rem; font-size: 1.02rem; line-height: 1.6; color: #0f172a; outline: none;
  white-space: pre-wrap; word-break: break-word;
}
.pk-editor:focus { border-color: #74bcff; box-shadow: 0 0 0 3px rgba(30,131,224,.12); }
.pk-editor:empty::before { content: attr(data-placeholder); color: #94a3b8; }
.pk-editor b, .pk-editor strong { font-weight: 700; }
.pk-editor blockquote { border-left: 3px solid #74bcff; padding-left: .75rem; color: #475569; margin: .4rem 0; }
.pk-editor tg-spoiler { background: #cbd5e1; border-radius: 3px; }
.dark .pk-editor { background: #111a2e; border-color: #253352; color: #f1f5f9; }
.dark .pk-editor blockquote { color: #a3b2c8; }

.pk-live { margin-top: .4rem; font-size: .8rem; color: #1e83e0; font-style: italic; }

/* ── Быстрые правки ───────────────────────────────────────────────────────── */
.pk-quick { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pk-quick-label { font-size: .78rem; color: #94a3b8; font-weight: 600; }
.pk-chip {
  border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px;
  padding: .3rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; transition: .15s;
}
.pk-chip:hover { background: #ecf6ff; border-color: #74bcff; color: #0f6ac2; }
.dark .pk-chip { background: #111a2e; border-color: #253352; color: #cbd5e1; }
.dark .pk-chip:hover { background: rgba(30,131,224,.18); color: #74bcff; }

/* ── Картинки ─────────────────────────────────────────────────────────────── */
.pk-images { border: 1px solid #e2e8f0; border-radius: .9rem; padding: .8rem; background: rgba(255,255,255,.6); }
.dark .pk-images { border-color: #253352; background: rgba(17,26,46,.5); }
.pk-images-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pk-images-title { font-size: .85rem; font-weight: 700; }
.pk-images-actions { display: flex; gap: .4rem; }
.pk-img-status { margin-top: .5rem; font-size: .8rem; color: #1e83e0; }
.pk-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .4rem; margin-top: .6rem; }
.pk-img-grid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: .5rem; cursor: pointer; border: 2px solid transparent; transition: .12s; }
.pk-img-grid img:hover { border-color: #1e83e0; }
.pk-img-selected { position: relative; margin-top: .6rem; }
.pk-img-selected img { width: 100%; border-radius: .7rem; }
.pk-img-remove { position: absolute; top: .5rem; right: .5rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: none; background: rgba(15,23,42,.6); color: #fff; cursor: pointer; }

/* ── Нижние действия ──────────────────────────────────────────────────────── */
.pk-footer-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pk-toast { font-size: .82rem; font-weight: 600; color: #16a34a; }
.pk-toast.err { color: #ef4444; }

/* ── Чат ──────────────────────────────────────────────────────────────────── */
.pk-chat-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid #e2e8f0; }
.dark .pk-chat-head { border-color: #253352; }
.pk-chat-avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #ecf6ff; display: grid; place-items: center; font-size: 1.1rem; }
.dark .pk-chat-avatar { background: rgba(30,131,224,.2); }
.pk-chat-title { font-weight: 700; font-size: .9rem; }
.pk-chat-sub { font-size: .75rem; color: #94a3b8; }
.pk-chat-log { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.pk-msg { max-width: 90%; padding: .6rem .8rem; border-radius: 1rem; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pk-msg-ai { align-self: flex-start; background: #f1f5f9; color: #0f172a; border-bottom-left-radius: .25rem; }
.pk-msg-user { align-self: flex-end; background: #1e83e0; color: #fff; border-bottom-right-radius: .25rem; }
.dark .pk-msg-ai { background: #1e2a47; color: #e2e8f0; }
.pk-chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #e2e8f0; }
.dark .pk-chat-form { border-color: #253352; }
.pk-chat-input { flex: 1 1 auto; resize: none; border: 1px solid #e2e8f0; border-radius: .7rem; padding: .55rem .7rem; font-size: .88rem; font-family: inherit; outline: none; background: #fff; color: #0f172a; max-height: 8rem; }
.pk-chat-input:focus { border-color: #74bcff; }
.dark .pk-chat-input { background: #0f1830; border-color: #2e3d63; color: #e2e8f0; }
.pk-chat-send { flex: 0 0 auto; width: 2.4rem; border: none; border-radius: .7rem; background: #1e83e0; color: #fff; font-size: 1rem; cursor: pointer; }
.pk-chat-send:hover { background: #0f6ac2; }

/* «Думает» */
.pk-typing { display: inline-flex; gap: .2rem; }
.pk-typing i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .5; animation: pkType 1s infinite; }
.pk-typing i:nth-child(2) { animation-delay: .15s; }
.pk-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pkType { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }