/* /var/www/pozdravlyayka-stage/current/public/styles/feed/feed-side.css */
/* 2 колонки на ПК + блок поиска/фильтра по тегам + fullscreen фильтр на мобиле */

/* ───────── layout ───────── */

.feed-layout{
  display:flex;
  align-items:flex-start;
  gap: clamp(12px, 1.6vw, 16px);
  margin-top: 12px;
}

/* важно: чтобы флекс-дети могли сжиматься */
.feed-main,
.feed-side{
  min-width: 0;
}

.feed-main{
  flex: 1 1 550px;
  max-width: 550px;
}

.feed-side{
  flex: 1 1 320px;
  min-width: 260px;
  max-width: 460px;
  min-height: 1px;
}

.feed-layout .feed-wrap{
  max-width: none;
  margin: 0;
  padding: 0 0 24px;
}

@media (min-width: 901px){
  .feed-side{
    position: sticky;
    top: 12px;
  }
}

/* ───────── mobile open button ───────── */

.feed-tag-open{
  display:none;
  width: 100%;
  box-sizing: border-box;

  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface), var(--bg) 35%);
  color: var(--text);

  border-radius: 14px;
  padding: 8px 12px;
  font-weight: 900;
  text-align: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.feed-tag-open:active{ transform: translateY(1px); }

/* ───────── tag panel: управление через [hidden] ───────── */

.feed-tag-panel[hidden]{ display:none !important; }

/* на ПК показываем всегда */
@media (min-width: 901px){
  .feed-page .feed-tag-panel[hidden]{
    display:block !important;
  }
}

/* ───────── ПК вид ───────── */

@media (min-width: 901px){
  .feed-tag-panel{
    position: static;
  }

  .feed-tag-panel-backdrop{ display:none; }
  .feed-tag-panel-head{ display:none; }

  /* ✅ диалог-контейнер: вертикальный стек */
  .feed-tag-panel-dialog{
    display:flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ✅ основная карточка (поиск + список + кнопка) */
  .feed-tag-panel-sheet{
    position: static;
    inset: auto;

    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in oklab, var(--surface), var(--bg) 35%);

    padding: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.14);
  }

  .feed-tag-panel-body{ padding: 0; }

  .feed-tag-actions{
    margin-top: 12px;
  }
}

/* ───────── search form ───────── */

.feed-tag-search{
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;

  display:flex;
  flex-direction: column;
  gap: 10px;

  min-height: 0;
}

.feed-tag-title{
  font-weight: 900;
  color: var(--heading);
  margin: 0;
  font-size: 14px;
}

/* input row */
.feed-tag-input{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;

  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 10px 12px;

  min-width: 0;
  box-sizing: border-box;
}

.feed-tag-hash{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: color-mix(in oklab, var(--text), var(--surface) 68%);
  color: var(--surface);
  font-weight: 900;
  opacity: .95;
}

.feed-tag-input input{
  flex: 1 1 auto;
  min-width: 0;

  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);

  font-size: 14px;
  padding: 6px 2px;
}

/* ───────── suggest list: стабильно на iOS ───────── */

.feed-tag-suggest[hidden]{ display:none !important; }

.feed-tag-suggest{
  margin-top: 2px;

  border: 0;
  background: transparent;
  padding: 0;

  display:flex;
  flex-direction: column;

  /* вместо gap — у некоторых iOS глючит */
  gap: 0;

  max-height: min(70vh, 720px);
  overflow: auto;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  touch-action: pan-y;

  transform: translateZ(0);
  will-change: scroll-position;

  scrollbar-width: thin;

  box-sizing: border-box;
}

/* вертикальный шаг */
.feed-tag-suggest > *{ margin-top: 8px; }
.feed-tag-suggest > *:first-child{ margin-top: 0; }

/* сообщение “не найдено” */
.feed-tag-empty{
  border: 1px dashed color-mix(in oklab, var(--border), var(--text) 10%);
  background: color-mix(in oklab, var(--surface), var(--bg) 10%);
  color: var(--muted);
  border-radius: 14px;
  padding: 12px;
  font-weight: 900;
  font-size: 13px;
  text-align: center;

  flex: 0 0 auto;
  min-height: 44px;
}

/* “плашки” тегов */
.feed-tag-suggest-item{
  appearance: none;
  width: 100%;
  box-sizing: border-box;

  display:flex;
  align-items:center;
  gap: 10px;

  border: 1px solid color-mix(in oklab, var(--border), var(--text) 10%);
  background: color-mix(in oklab, var(--surface), var(--bg) 14%);
  color: var(--text);

  border-radius: 14px;
  padding: 11px 12px;

  cursor: pointer;
  text-align: left;

  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-tap-highlight-color: transparent;

  flex: 0 0 auto;
  min-height: 44px;
  touch-action: pan-y;

  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.feed-tag-suggest-item::before{
  content:"#";
  flex: 0 0 auto;

  width: 24px;
  height: 24px;
  border-radius: 999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: var(--surface);
  border: 1px solid var(--border);
  color: color-mix(in oklab, var(--text), var(--muted) 32%);
  font-weight: 900;
}

.feed-tag-suggest-item::after{
  content:"›";
  margin-left: auto;
  flex: 0 0 auto;

  opacity: .5;
  font-size: 18px;
  line-height: 1;
}

.feed-tag-suggest-item:hover{
  filter: brightness(1.02);
  background: color-mix(in oklab, var(--surface), var(--bg) 10%);
  box-shadow: 0 14px 38px rgba(0,0,0,.14);
}
.feed-tag-suggest-item:active{
  transform: translateY(1px);
}

/* ───────── actions ───────── */

.feed-tag-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.feed-tag-btn{
  width: 100%;
  height: 46px;

  border: 0;
  background: var(--brand);
  color: #fff;

  border-radius: 18px;
  cursor:pointer;

  font-weight: 900;
  text-align:center;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-sizing: border-box;
}

.feed-tag-btn:hover{ filter: brightness(1.03); }
.feed-tag-btn:active{ transform: translateY(1px); }

/* ──────────────────────────────────────────────
   ✅ FEED FILTER (красивый, без вылезания, grid)
   FIX: убрали width:100%, чтобы при margin блок НЕ вылезал за экран
────────────────────────────────────────────── */

.feed-filter{
  /* ⚠️ ключевой фикс от “вылезания вправо” */
  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  /* 1fr + auto => кнопка не “вылезет” за счёт сжатия pill */
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
  gap: 10px;

  padding: 10px;
  border-radius: 18px;

  background: color-mix(in oklab, var(--surface), var(--bg) 28%);
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);

  box-shadow: 0 14px 44px rgba(0,0,0,.12);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* pill */
.feed-filter-pill{
  min-width: 0;
  box-sizing: border-box;

  display:flex;
  align-items:center;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid color-mix(in oklab, var(--border), transparent 25%);
  background: color-mix(in oklab, var(--surface), var(--bg) 10%);
  color: var(--heading);

  font-weight: 950;
  font-size: 13px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* clear */
.feed-filter-clear{
  appearance:none;
  justify-self: end;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid color-mix(in oklab, var(--border), transparent 25%);
  background: color-mix(in oklab, var(--surface-elev), var(--bg) 10%);
  color: var(--text);

  cursor:pointer;
  font-weight: 950;
  font-size: 13px;
  white-space: nowrap;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* на всякий случай */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.feed-filter-clear::before{
  content:"✕";
  width: 20px;
  height: 20px;
  border-radius: 999px;

  display:inline-grid;
  place-items:center;

  background: color-mix(in oklab, var(--surface), transparent 18%);
  border: 1px solid color-mix(in oklab, var(--border), transparent 25%);
  line-height: 1;
  font-weight: 900;
}

.feed-filter-clear:hover{
  filter: brightness(1.03);
}
.feed-filter-clear:active{
  transform: translateY(1px);
}

.feed-filter-clear:focus{ outline:none; }
.feed-filter-clear:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand), #fff 35%);
  outline-offset: 2px;
}

/* если экран очень узкий — переносим кнопку вниз, чтобы НИКОГДА не вылезало */
@media (max-width: 380px){
  .feed-filter{
    grid-template-columns: 1fr;
  }
  .feed-filter-clear{
    width: 100%;
    justify-content: center;
  }
}

/* ───────── mobile ───────── */

@media (max-width: 900px){
  .feed-layout{
    flex-direction: column;
    gap: 8px;
  }

  .feed-main{
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }

  .feed-side{
    order: -1;
    flex: 0 0 auto;
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .feed-tag-open{
    display:block;
  }

  /* iOS: не зумить при фокусе */
  .feed-tag-input input{
    font-size: 16px;
  }

  /* overlay */
  .feed-tag-panel{
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display:flex;
    flex-direction: column;
  }

  .feed-tag-panel-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
  }

  .feed-tag-panel-dialog{
    position: relative;
    z-index: 1;

    flex: 1 1 auto;
    min-height: 0;

    display:flex;
    flex-direction: column;
  }

  .feed-tag-panel-sheet{
    position: relative;
    inset: auto;

    width: 100%;
    background: var(--bg);

    display:flex;
    flex-direction: column;
    overflow: hidden;

    flex: 1 1 auto;
    min-height: 0;

    border-radius: 0;

    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }

  .feed-tag-panel-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--surface), var(--bg) 45%);
  }

  .feed-tag-panel-head-title{
    font-weight: 900;
    font-size: 14px;
    color: var(--heading);
  }

  .feed-tag-panel-close{
    appearance:none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);

    border-radius: 14px;
    width: 42px;
    height: 42px;

    cursor: pointer;
    font-weight: 900;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .feed-tag-panel-close:active{ transform: translateY(1px); }

  .feed-tag-panel-body{
    flex: 1 1 auto;
    min-height: 0;

    overflow: hidden;
    padding: 12px 12px 0;
    box-sizing: border-box;

    display:flex;
    flex-direction: column;
    gap: 10px;
  }

  .feed-tag-title{ display:none; }

  .feed-tag-search{
    flex: 1 1 auto;
    min-height: 0;
  }

  .feed-tag-suggest{
    flex: 1 1 auto;
    min-height: 0;

    max-height: none;
    padding-bottom: 12px;
  }

  .feed-tag-actions{
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--surface), var(--bg) 45%);
    box-sizing: border-box;
  }

  /* ✅ фильтр — отдельный блок снизу + safe-area */
  .feed-tag-panel-dialog .feed-filter{
    margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px;

    /* ✅ УБИРАЕМ КОНТУР на телефоне */
    border: 0;

    background: color-mix(in oklab, var(--surface), var(--bg) 40%);
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
  }

  /* без контуров и внутри */
  .feed-tag-panel-dialog .feed-filter-pill{
    border: 0;
    background: color-mix(in oklab, var(--surface), var(--bg) 14%);
  }
  .feed-tag-panel-dialog .feed-filter-clear{
    border: 0;
    background: color-mix(in oklab, var(--surface-elev), var(--bg) 10%);
  }
  .feed-tag-panel-dialog .feed-filter-clear::before{
    border: 0;
    background: color-mix(in oklab, var(--surface), transparent 28%);
  }

  body.feed-tag-modal-open{
    overflow: hidden;
    touch-action: none;
  }
}