/* волна 7 (часть A): стили новых функций; общие стили — styles.css */

/* ================================================================ §1 GIF из каталога KLIPY */

.gif-panel { display: flex; flex-direction: column; height: 300px; min-height: 0; }
.gif-panel > .gif-state, .gif-panel > .gif-consent { margin: auto; }
.gif-search { display: flex; align-items: center; gap: 6px; margin: 8px 10px 4px; padding-block: 0 0; padding-inline: 12px 6px; background: var(--bg-2); border-radius: 999px; color: var(--ink-3); flex: none; }
.gif-search input { border: 0; background: transparent; padding: 9px 4px; border-radius: 0; box-shadow: none !important; }
.gif-head { display: flex; align-items: center; gap: 6px; padding: 2px 10px 6px; flex: none; }
.gif-label { color: var(--ink-2); font-size: 13px; font-weight: 600; padding: 3px 4px; }
.gif-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.gif-grid { display: grid; gap: 4px; align-items: start; }
.gif-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gif-cell { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: var(--bg-3); position: relative; }
.gif-cell:hover { filter: brightness(1.07); }
.gif-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.gif-thumb { display: block; width: 100%; background-color: var(--bg-3); background-size: cover; background-position: center; }
.gif-thumb video, .gif-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-state { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; color: var(--ink-2); text-align: center; }
.gif-state p { margin: 0; }
.gif-sentinel { height: 1px; }
.gif-foot { flex: none; text-align: center; font-size: 11px; letter-spacing: .02em; color: var(--ink-3); padding: 4px 0 6px; border-top: 1px solid var(--line); }
.gif-consent { max-width: 360px; display: grid; justify-items: center; gap: 12px; padding: 16px; text-align: center; color: var(--ink-2); }
.gif-consent p { margin: 0; font-size: 14px; line-height: 1.45; }
.gif-consent .row { gap: 8px; justify-content: center; }

/* GIF в ленте */
.gif-msg { display: block; max-width: 100%; }
.gif-box { position: relative; display: block; max-width: 100%; border-radius: 8px; overflow: hidden; background-color: var(--bg-3); background-size: cover; background-position: center; }
.gif-box video, .gif-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-badge { position: absolute; inset-inline-start: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding-block: 1px 1px; padding-inline: 4px 7px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; pointer-events: none; }
.gif-ph { display: grid; place-items: center; color: #fff; background-color: var(--bg-3); }
.gif-blur { position: absolute; inset: -16px; background-size: cover; background-position: center; filter: blur(14px) saturate(.7); opacity: .9; }
.gif-ph-label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 13px; font-weight: 600; }
.gif-full { position: fixed; inset: 0; z-index: 60; background: rgba(6, 10, 16, .94); display: grid; place-items: center; }
.gif-full video, .gif-full img { max-width: 94vw; max-height: 88vh; border-radius: 8px; }
.gif-full-x { position: absolute; top: 12px; inset-inline-end: 12px; }

/* ================================================================ §2 редактор фото */

.pe-prev { position: relative; display: block; }
.pe-prev img { display: block; }
.pe-open { position: absolute; inset-inline-end: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 600; }
.pe-open:hover { background: rgba(0, 0, 0, .8); }
.send-previews .pe-prev .pe-open { inset-inline-end: 3px; bottom: 3px; padding: 3px; font-size: 0; gap: 0; }

.pe-root { position: fixed; inset: 0; z-index: 80; background: #0b0f14; color: #fff; display: flex; flex-direction: column; }
.pe-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex: none; }
.pe-top b { font-size: 16px; }
.pe-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 12px; }
.pe-wrap { position: relative; }
.pe-canvas { display: block; width: 100%; height: 100%; border-radius: 4px; background: #1b222b; }
.pe-canvas.draw { cursor: crosshair; touch-action: none; }
.pe-canvas.text { cursor: move; touch-action: none; }
.pe-sub { flex: none; padding: 6px 12px; display: flex; flex-direction: column; gap: 8px; }
.pe-sub:empty { display: none; }
.pe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.pe-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--brand); }
.pe-widths { display: flex; gap: 6px; }
.pe-width { width: 44px; height: 32px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; }
.pe-width span { display: block; width: 26px; background: #fff; border-radius: 3px; }
.pe-width.on { background: rgba(255, 255, 255, .16); border-color: #fff; }
.pe-input { flex: 1; min-width: 140px; width: auto; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.pe-btn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.pe-hint { color: rgba(255, 255, 255, .65); font-size: 12px; }
.pe-tools { flex: none; display: flex; justify-content: space-around; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .12); }
.pe-tool { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 6px 8px; border-radius: 12px; color: rgba(255, 255, 255, .82); font-size: 12px; }
.pe-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.pe-tool.on { background: rgba(255, 255, 255, .16); color: #fff; }
.pe-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.pe-filter { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; padding: 4px; border-radius: 10px; border: 2px solid transparent; color: rgba(255, 255, 255, .82); font-size: 12px; }
.pe-filter img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.pe-filter.on { border-color: var(--brand); color: #fff; }
.pe-root .chip { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .3); }
.pe-root .chip:hover { background: rgba(255, 255, 255, .1); }
.pe-root .chip.on { background: #fff; color: #0b0f14; }
.pe-root .icon:disabled { opacity: .3; }

/* рамка обрезки */
.pe-crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); touch-action: none; }
.pe-crop-box { position: absolute; inset: 0; cursor: move; touch-action: none; }
.pe-grid { position: absolute; background: rgba(255, 255, 255, .35); pointer-events: none; }
.pe-grid.v1, .pe-grid.v2 { top: 0; bottom: 0; width: 1px; }
.pe-grid.h1, .pe-grid.h2 { inset-inline-start: 0; inset-inline-end: 0; height: 1px; }
.pe-grid.v1 { inset-inline-start: 33.33%; } .pe-grid.v2 { inset-inline-start: 66.66%; }
.pe-grid.h1 { top: 33.33%; } .pe-grid.h2 { top: 66.66%; }
.pe-handle { position: absolute; width: 22px; height: 22px; margin-block: -11px 0; margin-inline: -11px 0; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); touch-action: none; }
.pe-handle.nw { inset-inline-start: 0; top: 0; cursor: nwse-resize; }
.pe-handle.n { left: 50%; top: 0; cursor: ns-resize; }
.pe-handle.ne { inset-inline-start: 100%; top: 0; cursor: nesw-resize; }
.pe-handle.e { inset-inline-start: 100%; top: 50%; cursor: ew-resize; }
.pe-handle.se { inset-inline-start: 100%; top: 100%; cursor: nwse-resize; }
.pe-handle.s { left: 50%; top: 100%; cursor: ns-resize; }
.pe-handle.sw { inset-inline-start: 0; top: 100%; cursor: nesw-resize; }
.pe-handle.w { inset-inline-start: 0; top: 50%; cursor: ew-resize; }

/* ================================================================ §5 превью медиа в списке чатов */

.mp-thumb { position: relative; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex: none; background: var(--bg-3); color: var(--ink-3); display: grid; place-items: center; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .28); }
.mp-gif { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .03em; line-height: 12px; color: #fff; background: rgba(0, 0, 0, .55); }