/* Full-screen visual editor used by Post and Reel composers. */
body.tfeed-content-editor-open { overflow: hidden; }

.tfeed-content-editor,
.tfeed-content-editor * { box-sizing: border-box; }

.tfeed-content-editor {
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  color: #f8fbff;
  background: radial-gradient(circle at 12% 0%, rgba(138, 92, 255, .26), transparent 33%), radial-gradient(circle at 90% 24%, rgba(24, 200, 255, .14), transparent 26%), #050911;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tfeed-content-editor__shell {
  width: min(100%, 880px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(9px, env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom));
}

.tfeed-content-editor__topbar {
  position: sticky;
  z-index: 4;
  top: 0;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  margin: 0 -3px 15px;
  padding: 6px;
  border: 1px solid rgba(205, 224, 255, .15);
  border-radius: 19px;
  background: rgba(8, 14, 25, .88);
  box-shadow: 0 15px 36px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
}

.tfeed-content-editor__topbar > button:first-child,
.tfeed-content-editor__publish,
.tfeed-content-editor__change-media,
.tfeed-content-editor__empty-stage button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.tfeed-content-editor__topbar > button:first-child {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(214, 225, 255, .14);
  border-radius: 50%;
  color: #f7f8ff;
  background: rgba(22, 31, 48, .94);
  font-size: 23px;
}

.tfeed-content-editor__topbar small {
  display: block;
  color: #19d7ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.tfeed-content-editor__topbar h2 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.2px; }

.tfeed-content-editor__publish {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(120deg, #805cff, #218fff);
  box-shadow: 0 8px 22px rgba(88, 92, 255, .31);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.tfeed-content-editor__publish:disabled { cursor: wait; opacity: .72; }

.tfeed-content-editor__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  gap: 17px;
  align-items: start;
}

.tfeed-content-editor__preview,
.tfeed-content-editor__panel,
.tfeed-content-editor__audience {
  border: 1px solid rgba(204, 222, 255, .13);
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(21, 31, 49, .83), rgba(8, 14, 26, .83));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px);
}

.tfeed-content-editor__preview { padding: 11px; }

.tfeed-content-editor__stage {
  position: relative;
  display: grid;
  width: 100%;
  min-height: min(72vh, 620px);
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(173, 193, 244, .13);
  border-radius: 16px;
  background: repeating-linear-gradient(45deg, #0c1421, #0c1421 11px, #111a29 11px, #111a29 22px);
  isolation: isolate;
}

.tfeed-content-editor__stage.has-media { aspect-ratio: 9 / 12; min-height: 0; max-height: 70dvh; }

.tfeed-content-editor__media-wrap { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #02050a; }

.tfeed-content-editor__media-wrap img,
.tfeed-content-editor__media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--tfeed-editor-filter) brightness(var(--tfeed-editor-brightness));
  transform: rotate(var(--tfeed-editor-rotation)) scaleX(var(--tfeed-editor-flip)) scale(var(--tfeed-editor-zoom));
  transition: filter .18s ease, transform .18s ease;
}

.tfeed-content-editor__media-wrap video { background: #02050a; }

.tfeed-content-editor__overlay {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54%;
  width: min(88%, 360px);
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(21px, 6vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 13px rgba(0,0,0,.76);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tfeed-content-editor__overlay.is-dragging { cursor: grabbing; }

.tfeed-content-editor__tag-layer {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;
}

.tfeed-content-editor__tag-layer:empty { display: none; }
.tfeed-content-editor__tag-layer span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.42); border-radius: 99px; background: rgba(3, 8, 17, .62); color: #fff; font-size: 10px; font-weight: 800; backdrop-filter: blur(7px); }

.tfeed-content-editor__change-media {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  min-height: 33px;
  padding: 0 10px;
  border: 1px solid rgba(220, 233, 255, .3);
  border-radius: 99px;
  background: rgba(4, 10, 19, .75);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.tfeed-content-editor__empty-stage { display: grid; max-width: 260px; gap: 11px; place-items: center; padding: 30px; color: #a8b5cd; text-align: center; }
.tfeed-content-editor__empty-icon { color: #71a8ff; font-size: 42px; line-height: 1; }
.tfeed-content-editor__empty-stage strong { color: #f7f9ff; font-size: 16px; }
.tfeed-content-editor__empty-stage span { font-size: 12px; line-height: 1.45; }
.tfeed-content-editor__empty-stage button { min-height: 40px; padding: 0 15px; border-radius: 12px; background: linear-gradient(125deg, #875fff, #2a9df9); color: #fff; font-weight: 850; }

.tfeed-content-editor__status { margin: 9px 2px 0; color: #dbe7ff; font-size: 12px; }
.tfeed-content-editor__status[data-type="error"] { color: #ff8aa4; }
.tfeed-content-editor__status[data-type="progress"] { color: #4ee5ff; }

.tfeed-content-editor__controls { display: grid; gap: 11px; }
.tfeed-content-editor__panel,
.tfeed-content-editor__audience { padding: 13px; }
.tfeed-content-editor__panel-heading { display: grid; gap: 4px; margin-bottom: 11px; }
.tfeed-content-editor__panel-heading > span { color: #f7f9ff; font-size: 13px; font-weight: 850; }
.tfeed-content-editor__panel-heading small,
.tfeed-content-editor__hint { color: #91a0ba; font-size: 10px; line-height: 1.42; }

.tfeed-content-editor__filter-row { display: flex; gap: 7px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
.tfeed-content-editor__filter-row::-webkit-scrollbar { display: none; }
.tfeed-content-editor__filter-row button,
.tfeed-content-editor__edit-actions button,
.tfeed-content-editor__emoji-row button,
.tfeed-content-editor__audience button,
.tfeed-content-editor__tag-chips button {
  border: 1px solid rgba(202, 220, 255, .14);
  cursor: pointer;
  color: #cbd7ec;
  background: rgba(14, 23, 39, .87);
  font: inherit;
}

.tfeed-content-editor__filter-row button { min-height: 34px; flex: 0 0 auto; padding: 0 11px; border-radius: 10px; font-size: 11px; font-weight: 750; }
.tfeed-content-editor__filter-row button.is-active,
.tfeed-content-editor__audience button.is-active { border-color: rgba(125, 215, 255, .7); background: linear-gradient(120deg, rgba(121, 87, 255, .9), rgba(33, 148, 255, .85)); color: #fff; box-shadow: 0 0 16px rgba(84, 143, 255, .27); }

.tfeed-content-editor__sliders { display: grid; gap: 9px; margin-top: 13px; }
.tfeed-content-editor__sliders label { display: grid; grid-template-columns: 54px 1fr 39px; align-items: center; gap: 8px; color: #cbd6e9; font-size: 11px; font-weight: 750; }
.tfeed-content-editor__sliders output { color: #6ee6ff; font-size: 10px; text-align: right; }
.tfeed-content-editor__sliders input { width: 100%; accent-color: #7b63ff; }

.tfeed-content-editor__edit-actions { display: flex; gap: 7px; margin-top: 12px; }
.tfeed-content-editor__edit-actions button { min-height: 34px; flex: 1; border-radius: 10px; font-size: 10px; font-weight: 800; }

.tfeed-content-editor__label { display: grid; gap: 7px; color: #dbe5f8; font-size: 11px; font-weight: 800; }
.tfeed-content-editor__label + .tfeed-content-editor__label { margin-top: 13px; }
.tfeed-content-editor__label input,
.tfeed-content-editor__label textarea { width: 100%; border: 1px solid rgba(202, 220, 255, .14); border-radius: 11px; outline: 0; background: rgba(5, 11, 21, .68); color: #f8fbff; font: inherit; font-size: 12px; }
.tfeed-content-editor__label input { min-height: 40px; padding: 0 11px; }
.tfeed-content-editor__label textarea { min-height: 92px; padding: 10px 11px; resize: vertical; line-height: 1.45; }
.tfeed-content-editor__label input:focus,
.tfeed-content-editor__label textarea:focus { border-color: rgba(84, 207, 255, .7); box-shadow: 0 0 0 3px rgba(47, 170, 255, .12); }

.tfeed-content-editor__emoji-row { display: flex; gap: 6px; margin: 9px 0 5px; }
.tfeed-content-editor__emoji-row button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; font-size: 16px; }

.tfeed-content-editor__tag-results { display: grid; gap: 4px; margin-top: 7px; }
.tfeed-content-editor__tag-results button { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 39px; padding: 4px; border: 0; border-radius: 9px; background: rgba(12, 20, 35, .72); color: #eaf0ff; text-align: left; cursor: pointer; }
.tfeed-content-editor__tag-results img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #15213a; }
.tfeed-content-editor__tag-results span { display: grid; min-width: 0; }
.tfeed-content-editor__tag-results strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tfeed-content-editor__tag-results small { color: #99a9c3; font-size: 9px; }
.tfeed-content-editor__tag-results b { color: #64dfff; font-size: 9px; }
.tfeed-content-editor__tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tfeed-content-editor__tag-chips button { min-height: 28px; padding: 0 8px; border-radius: 99px; color: #d9caff; font-size: 10px; }

.tfeed-content-editor__audience { display: grid; gap: 9px; color: #dbe5f8; font-size: 11px; font-weight: 800; }
.tfeed-content-editor__audience > div { display: flex; gap: 6px; }
.tfeed-content-editor__audience button { min-height: 34px; flex: 1; border-radius: 9px; font-size: 10px; font-weight: 800; }
.tfeed-content-editor__audience button:disabled { cursor: not-allowed; opacity: .4; }
.tfeed-content-editor__audience-note { padding: 12px 13px; border: 1px solid rgba(100, 224, 255, .22); border-radius: 15px; background: rgba(17, 74, 101, .24); color: #9eeeff; font-size: 11px; font-weight: 800; }

@media (max-width: 720px) {
  .tfeed-content-editor__shell { padding-inline: 10px; }
  .tfeed-content-editor__main { grid-template-columns: 1fr; }
  .tfeed-content-editor__stage { min-height: 52dvh; }
  .tfeed-content-editor__stage.has-media { width: min(100%, 440px); margin: 0 auto; max-height: 57dvh; }
}

@media (max-width: 390px) {
  .tfeed-content-editor__topbar { grid-template-columns: 41px 1fr auto; }
  .tfeed-content-editor__topbar > button:first-child { width: 39px; height: 39px; }
  .tfeed-content-editor__publish { padding: 0 10px; }
  .tfeed-content-editor__stage { min-height: 47dvh; }
}