/* ===== Veyra unified photo system ===== */
#photo-overlay {
    z-index:100000 !important;
    background:rgba(3,5,10,.96) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    touch-action:none;
}
#photo-overlay::before {
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 10%,rgba(108,92,231,.12),transparent 38%),
      radial-gradient(circle at 80% 90%,rgba(0,206,201,.08),transparent 42%);
    pointer-events:none;
}
#photo-overlay-img {
    max-width:calc(100vw - 120px) !important;
    max-height:calc(100dvh - 150px) !important;
    border-radius:4px !important;
    box-shadow:0 18px 70px rgba(0,0,0,.55);
    transition:transform .16s ease;
    position:relative;
    z-index:2;
}
#photo-overlay-img.dragging { transition:none !important; }

#photo-overlay-close {
    top:max(14px,env(safe-area-inset-top)) !important;
    right:18px !important;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    font-size:22px !important;
    z-index:8 !important;
}
#photo-overlay-close:hover { background:rgba(255,255,255,.2); }

#po-prev,#po-next {
    width:48px !important;
    height:48px !important;
    background:rgba(20,22,30,.72) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    backdrop-filter:blur(12px);
    z-index:8 !important;
}
#po-prev:hover,#po-next:hover { background:rgba(108,92,231,.72) !important; }

#photo-overlay-zoom {
    bottom:max(18px,env(safe-area-inset-bottom)) !important;
    padding:6px;
    gap:4px !important;
    background:rgba(20,22,30,.78);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    backdrop-filter:blur(16px);
    z-index:9;
}
#photo-overlay-zoom button,
.vp-photo-action {
    width:40px !important;
    height:40px !important;
    border-radius:11px !important;
    background:transparent !important;
    color:#fff !important;
    border:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px !important;
}
#photo-overlay-zoom button:hover,
.vp-photo-action:hover { background:rgba(255,255,255,.14) !important; }

#po-counter {
    top:max(18px,env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:50% !important;
    padding:7px 13px;
    border-radius:14px;
    background:rgba(20,22,30,.7);
    backdrop-filter:blur(12px);
    z-index:8 !important;
}
#vp-photo-actions {
    position:absolute;
    top:max(14px,env(safe-area-inset-top));
    left:18px;
    display:flex;
    gap:4px;
    padding:5px;
    border-radius:15px;
    background:rgba(20,22,30,.76);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(14px);
    z-index:9;
}

/* Редактор */
#photo-editor-modal {
    background:radial-gradient(circle at 50% 20%,#1d1933,#090810 70%) !important;
    color:#fff;
}
#photo-editor-modal > div:first-child {
    min-height:58px;
    padding:max(10px,env(safe-area-inset-top)) 16px 10px !important;
    border-bottom:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(18px);
}
#pe-canvas-wrap {
    min-height:0 !important;
    padding:14px !important;
    overflow:hidden !important;
    background:
      linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),
      linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),
      linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%);
    background-size:22px 22px;
}
#pe-canvas {
    max-width:100% !important;
    max-height:100% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain;
    box-shadow:0 14px 50px rgba(0,0,0,.48);
    touch-action:none;
}
#photo-editor-modal > div:last-child {
    overflow-x:auto;
    scrollbar-width:none;
    padding:10px max(12px,env(safe-area-inset-left))
            max(12px,env(safe-area-inset-bottom)) !important;
    border-top:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(18px);
}
#photo-editor-modal button { min-height:38px; }
#vp-editor-extras {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex-wrap:wrap;
    padding:7px 10px;
    background:rgba(0,0,0,.22);
    border-top:1px solid rgba(255,255,255,.07);
}
#vp-editor-extras button {
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    color:#fff;
    background:rgba(255,255,255,.08);
    cursor:pointer;
}
#vp-editor-extras button:hover { background:rgba(108,92,231,.48); }

@media(max-width:768px) {
    #photo-overlay-img {
        max-width:100vw !important;
        max-height:calc(100dvh - 125px) !important;
        border-radius:0 !important;
    }
    #po-prev,#po-next { display:none !important; }
    #vp-photo-actions { left:8px; top:max(8px,env(safe-area-inset-top)); }
    #photo-overlay-close {
        right:8px !important;
        top:max(8px,env(safe-area-inset-top)) !important;
    }
    #po-counter { top:max(60px,calc(env(safe-area-inset-top) + 52px)) !important; }
    #photo-overlay-zoom {
        bottom:max(8px,env(safe-area-inset-bottom)) !important;
    }
    #photo-editor-modal > div:first-child { flex-shrink:0; }
    #vp-editor-extras {
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        scrollbar-width:none;
    }
    #vp-editor-extras button { white-space:nowrap; flex-shrink:0; }
}


/* ===== Telegram-style editor modes ===== */
#photo-editor-modal.vp-crop-mode #pe-canvas-wrap,
#photo-editor-modal.vp-adjust-mode #pe-canvas-wrap {
    padding:22px 18px !important;
}
#vp-editor-mode-panel {
    flex-shrink:0;
    padding:10px 16px max(12px,env(safe-area-inset-bottom));
    color:#fff;
    background:rgba(10,10,18,.96);
    border-top:1px solid rgba(255,255,255,.1);
    z-index:5;
}
.vp-mode-title {
    text-align:center;
    font-size:13px;
    font-weight:700;
    color:rgba(255,255,255,.72);
    margin-bottom:10px;
}
.vp-crop-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:10px;
}
.vp-crop-actions button,
.vp-main-tool {
    min-width:76px;
    padding:8px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.07);
    cursor:pointer;
}
.vp-crop-actions button span,
.vp-main-tool span {
    font-size:11px;
    color:rgba(255,255,255,.72);
}
.vp-main-tool b {
    font-size:20px;
    line-height:22px;
    font-weight:500;
}
.vp-angle-control {
    display:grid;
    grid-template-columns:50px minmax(120px,360px) 42px;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:8px auto 12px;
    font-size:12px;
}
.vp-angle-control input,
.vp-adjust-row input {
    width:100%;
    accent-color:#6c8cff;
}
.vp-angle-control strong,
.vp-adjust-row output {
    text-align:right;
    font-size:12px;
    color:#8ea5ff;
}
.vp-mode-buttons {
    display:flex;
    justify-content:center;
    gap:8px;
}
.vp-mode-buttons button {
    min-width:92px;
    padding:9px 18px;
    border:0;
    border-radius:12px;
    color:#fff;
    cursor:pointer;
    font-weight:700;
}
.vp-mode-cancel,.vp-mode-reset {
    background:rgba(255,255,255,.1);
}
.vp-mode-done {
    background:linear-gradient(135deg,#6587ff,#4368ee);
}
.vp-adjust-list {
    max-width:620px;
    margin:0 auto 12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.vp-adjust-row {
    display:grid;
    grid-template-columns:26px 105px minmax(120px,1fr) 38px;
    align-items:center;
    gap:8px;
}
.vp-adjust-icon {
    text-align:center;
    color:#8ea5ff;
    font-size:17px;
}
.vp-adjust-name {
    font-size:12px;
    color:rgba(255,255,255,.78);
}
#vp-editor-extras .vp-main-tool {
    flex:0 0 auto;
}
@media(max-width:768px) {
    #vp-editor-mode-panel {
        padding-left:10px;
        padding-right:10px;
    }
    .vp-adjust-row {
        grid-template-columns:24px 88px minmax(90px,1fr) 34px;
    }
    .vp-crop-actions button {
        min-width:82px;
    }
    .vp-mode-buttons button {
        flex:1;
        min-width:0;
    }
}


/* ===== Editor layout correction ===== */
#photo-editor-modal {
    overflow:hidden !important;
}
#photo-editor-modal #pe-canvas-wrap {
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
}
#photo-editor-modal #pe-btn-draw,
#photo-editor-modal #pe-btn-text,
#photo-editor-modal #pe-btn-crop {
    display:none !important;
}
#photo-editor-modal #pe-btn-draw + *,
#photo-editor-modal #pe-btn-text + *,
#photo-editor-modal #pe-btn-crop + * {
    /* Старые соседние элементы не влияют на новую панель. */
}
#photo-editor-modal #pe-crop-opts {
    display:none !important;
}
#vp-editor-extras {
    flex:0 0 auto !important;
    min-height:66px;
    justify-content:center !important;
    gap:8px !important;
    padding:8px 12px max(9px,env(safe-area-inset-bottom)) !important;
    overflow-x:auto;
    background:rgba(8,8,15,.96) !important;
}
#vp-editor-extras .vp-main-tool {
    width:82px;
    min-width:82px;
    min-height:54px;
    padding:6px 8px;
    background:transparent;
}
#vp-editor-extras .vp-main-tool:hover,
#vp-editor-extras .vp-main-tool.active {
    background:rgba(101,135,255,.18);
    color:#86a0ff;
}
#vp-editor-extras .vp-main-tool.active span {
    color:#86a0ff;
}
#photo-editor-modal #pe-draw-opts {
    display:none;
    flex:0 0 auto;
    min-height:50px;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:7px 12px !important;
    background:rgba(8,8,15,.96) !important;
    border-top:1px solid rgba(255,255,255,.07);
}
#photo-editor-modal.vp-draw-mode #pe-draw-opts {
    display:flex !important;
}
#photo-editor-modal.vp-crop-mode #vp-editor-extras,
#photo-editor-modal.vp-adjust-mode #vp-editor-extras {
    display:none !important;
}
#photo-editor-modal.vp-crop-mode #pe-draw-opts,
#photo-editor-modal.vp-adjust-mode #pe-draw-opts,
#photo-editor-modal.vp-text-mode #pe-draw-opts {
    display:none !important;
}
#photo-editor-modal > div:last-child:not(#vp-editor-mode-panel) {
    max-height:70px;
}
@media(max-width:768px) {
    #vp-editor-extras {
        justify-content:space-around !important;
        width:100%;
    }
    #vp-editor-extras .vp-main-tool {
        width:72px;
        min-width:72px;
    }
}


/* ===== Editor input and SVG corrections ===== */
.vp-tool-svg {
    display:block;
    pointer-events:none;
}
.vp-main-tool b {
    display:flex;
    align-items:center;
    justify-content:center;
}
.vp-crop-actions button .vp-tool-svg {
    width:24px;
    height:24px;
}
#pe-canvas-wrap {
    position:relative !important;
}
#vp-text-position {
    position:absolute;
    width:30px;
    height:30px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:20;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
#vp-text-position span {
    position:absolute;
    background:#fff;
    border-radius:2px;
}
#vp-text-position span:nth-child(1) {
    width:18px;height:2px;left:6px;top:14px;
}
#vp-text-position span:nth-child(2) {
    width:2px;height:18px;left:14px;top:6px;
}
#vp-text-position span:nth-child(3) {
    width:6px;height:6px;left:12px;top:12px;
    border:1px solid #6387ff;
    background:#6387ff;
    border-radius:50%;
}
#vp-text-position span:nth-child(4) {
    width:30px;height:30px;left:0;top:0;
    background:transparent;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
}
#photo-editor-modal.vp-draw-mode #pe-canvas {
    cursor:crosshair !important;
    touch-action:none !important;
}
#photo-editor-modal.vp-text-mode #pe-canvas {
    cursor:text !important;
    touch-action:manipulation !important;
}
#photo-editor-modal.vp-crop-mode #pe-canvas {
    touch-action:none !important;
}
.vp-adjust-icon {
    display:flex;
    align-items:center;
    justify-content:center;
}
.vp-adjust-icon .vp-tool-svg {
    width:19px;
    height:19px;
}


/* ===== Viewer SVG actions ===== */
#vp-photo-actions {
    align-items:center;
}
.vp-photo-action {
    width:auto !important;
    min-width:46px;
    height:42px !important;
    padding:0 10px !important;
    gap:7px;
}
.vp-photo-action svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}
.vp-photo-action span {
    font-size:12px;
    font-weight:600;
}

/* ===== Bottom editor composition ===== */
#photo-editor-modal {
    display:none;
}
#photo-editor-modal[style*="display: flex"],
#photo-editor-modal[style*="display:flex"] {
    display:flex !important;
}
#photo-editor-modal > div:first-child.vp-editor-actionbar {
    order:50 !important;
    position:relative !important;
    inset:auto !important;
    flex:0 0 auto !important;
    min-height:62px !important;
    padding:8px 14px max(9px,env(safe-area-inset-bottom)) !important;
    background:rgba(7,7,13,.98) !important;
    border-top:1px solid rgba(255,255,255,.09) !important;
    border-bottom:0 !important;
}
#photo-editor-modal #pe-canvas-wrap {
    order:10 !important;
}
#photo-editor-modal #vp-editor-extras {
    order:30 !important;
}
#photo-editor-modal #pe-draw-opts {
    order:29 !important;
}
#photo-editor-modal #vp-editor-mode-panel {
    order:30 !important;
}
.vp-editor-actionbar {
    display:grid !important;
    grid-template-columns:minmax(110px,1fr) auto minmax(110px,1fr);
    align-items:center;
    gap:12px;
}
.vp-editor-actionbar button {
    margin:0 !important;
}
.vp-editor-actionbar button svg {
    width:20px;
    height:20px;
    flex-shrink:0;
}
.vp-editor-cancel {
    justify-self:start;
    width:auto !important;
    height:40px !important;
    padding:0 13px !important;
    display:flex !important;
    align-items:center;
    gap:7px;
    border-radius:12px !important;
    color:#ff7b86 !important;
    background:rgba(255,90,105,.1) !important;
}
.vp-editor-cancel span {
    font-size:13px;
    font-weight:700;
}
.vp-editor-center-actions {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:8px !important;
}
.vp-editor-round-action {
    width:40px !important;
    height:40px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    color:#dce2ff !important;
    background:rgba(255,255,255,.09) !important;
    border-radius:12px !important;
}
.vp-editor-round-action:hover {
    background:rgba(101,135,255,.22) !important;
}
.vp-editor-send {
    justify-self:end;
    width:auto !important;
    min-width:122px;
    height:42px !important;
    padding:0 16px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:13px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#a855f7,#6c5ce7 55%,#4f72ff) !important;
    box-shadow:0 7px 24px rgba(108,92,231,.38) !important;
}
.vp-editor-send span {
    font-size:13px;
    font-weight:800;
}
@media(max-width:768px) {
    #vp-photo-actions {
        max-width:calc(100vw - 62px);
        overflow-x:auto;
        scrollbar-width:none;
    }
    .vp-photo-action span {
        display:none;
    }
    .vp-photo-action {
        width:42px !important;
        min-width:42px;
        padding:0 !important;
    }
    .vp-editor-actionbar {
        grid-template-columns:1fr auto 1fr;
        gap:6px;
    }
    .vp-editor-cancel span {
        display:none;
    }
    .vp-editor-cancel {
        width:42px !important;
        padding:0 !important;
        justify-content:center;
    }
    .vp-editor-send {
        min-width:0;
        padding:0 12px !important;
    }
    .vp-editor-send span {
        font-size:12px;
    }
}


/* VEYRA PHOTO EDITOR SEND FLOW V2 */
#photo-editor-modal .vp-editor-actionbar {
    grid-template-columns: minmax(76px,1fr) auto minmax(76px,1fr) !important;
}

#photo-editor-modal .vp-editor-center-actions {
    justify-self:center !important;
}

#photo-editor-modal .vp-editor-send-icon {
    justify-self:end !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,#a855f7,#6c5ce7) !important;
    box-shadow:0 7px 24px rgba(108,92,231,.42) !important;
}

#photo-editor-modal .vp-editor-send-icon svg {
    width:25px !important;
    height:25px !important;
}

#photo-editor-modal .vp-editor-send-icon.vp-sending {
    opacity:.58 !important;
    animation:vp-send-pulse .8s ease-in-out infinite alternate;
}

@keyframes vp-send-pulse {
    to { transform:scale(.92); }
}

#vp-editor-caption-wrap {
    width:min(760px,calc(100% - 24px));
    margin:0 auto 10px;
    flex:0 0 auto;
}

#vp-editor-caption {
    display:block;
    box-sizing:border-box;
    width:100%;
    min-height:46px;
    max-height:104px;
    resize:none;
    overflow-y:auto;
    border:1px solid rgba(255,255,255,.15);
    border-radius:23px;
    padding:12px 18px;
    background:rgba(255,255,255,.09);
    color:#fff;
    font:500 15px/1.35 system-ui,-apple-system,sans-serif;
    outline:none;
}

#vp-editor-caption:focus {
    border-color:rgba(162,155,254,.8);
    box-shadow:0 0 0 3px rgba(108,92,231,.18);
}

#vp-editor-caption::placeholder {
    color:rgba(255,255,255,.48);
}

#pe-draw-opts [onclick*="peColor"] {
    position:relative;
    transition:transform .15s ease,box-shadow .15s ease !important;
}

#pe-draw-opts [onclick*="peColor"].vp-color-selected {
    transform:scale(1.2) !important;
    box-shadow:
        0 0 0 3px #111,
        0 0 0 5px #fff,
        0 0 18px rgba(255,255,255,.55) !important;
}

#vp-text-object {
    position:absolute;
    z-index:30;
    min-width:150px;
    max-width:min(75vw,620px);
    border:2px dashed rgba(255,255,255,.92);
    border-radius:14px;
    padding:14px 20px;
    touch-action:none;
    cursor:move;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

#vp-text-object .vp-text-edit {
    min-width:110px;
    min-height:42px;
    outline:none;
    cursor:text;
    white-space:pre-wrap;
    word-break:break-word;
    font:700 34px/1.15 system-ui,-apple-system,sans-serif;
    text-align:center;
    text-shadow:
        -1px -1px 1px rgba(0,0,0,.5),
        1px 1px 1px rgba(0,0,0,.5);
}

#vp-text-object .vp-text-edit:empty::before {
    content:attr(data-placeholder);
    opacity:.55;
}

#vp-text-object .vp-text-handle {
    position:absolute;
    top:50%;
    width:25px;
    height:25px;
    margin-top:-13px;
    border:3px solid #fff;
    border-radius:50%;
    background:#22a7f0;
    box-shadow:0 2px 8px rgba(0,0,0,.45);
    touch-action:none;
}

#vp-text-object .vp-text-handle-left {
    left:-14px;
}

#vp-text-object .vp-text-handle-right {
    right:-14px;
}

#vp-text-object .vp-text-object-actions {
    position:absolute;
    left:50%;
    bottom:-46px;
    transform:translateX(-50%);
    display:flex;
    gap:7px;
    padding:5px;
    border-radius:18px;
    background:rgba(10,10,16,.88);
    box-shadow:0 5px 20px rgba(0,0,0,.45);
}

#vp-text-object .vp-text-object-actions button {
    border:0;
    border-radius:13px;
    padding:7px 11px;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-weight:600;
}

#vp-text-object .vp-text-object-actions button[data-action="done"] {
    background:#6c5ce7;
}

#photo-editor-modal.vp-editor-loading::after {
    content:'';
    position:absolute;
    z-index:100;
    inset:50% auto auto 50%;
    width:36px;
    height:36px;
    margin:-18px;
    border:4px solid rgba(255,255,255,.18);
    border-top-color:#a29bfe;
    border-radius:50%;
    animation:vp-editor-spin .65s linear infinite;
}

@keyframes vp-editor-spin {
    to { transform:rotate(360deg); }
}

@media (max-width:768px) {
    #vp-editor-caption-wrap {
        width:calc(100% - 16px);
        margin-bottom:7px;
    }

    #vp-editor-caption {
        min-height:42px;
        padding:10px 15px;
        font-size:14px;
    }

    #photo-editor-modal .vp-editor-send-icon {
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
    }

    #vp-text-object .vp-text-edit {
        font-size:28px;
    }

    #vp-text-object .vp-text-handle {
        width:29px;
        height:29px;
        margin-top:-15px;
    }
}