/* /incog/paint/paint.css — совместное рисование */

/* На десктопе #screen-chat должен быть контейнером для absolute-окна.
   На мобильном он уже position:fixed (style.css), поэтому правило только для широких экранов. */
@media (min-width: 901px) {
    #screen-chat { position: relative; }
}

.paint-win {
    display: none;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: 84px;                       /* шапка чата остаётся видна */
    flex-direction: column;
    background: var(--bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    touch-action: none;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
}
.paint-win.open { display: flex; }
@media (max-width: 900px) { .paint-win { top: 78px; } }

.paint-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-end;           /* холст прижат к самому низу */
    justify-content: center;
}
#paintCanvas {
    display: block;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 0 0 1px var(--border), 0 4px 18px rgba(0, 0, 0, .08);
    touch-action: none;
    cursor: crosshair;
}

/* Кнопка меню — справа сверху поверх рисунка */
.paint-menu-btn {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* Вертикальное меню: 4 цвета, ластик, закрыть */
.paint-menu {
    display: none;
    position: absolute;
    top: 62px; right: 10px;
    z-index: 3;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--surface);
    border-radius: 28px;
    box-shadow: var(--shadow);
}
.paint-menu.open { display: flex; }
.pm-btn {
    width: 40px; height: 40px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: var(--text-primary);
    cursor: pointer;
}
.pm-btn.is-active { box-shadow: 0 0 0 2px var(--primary); }
.pm-close { background: #FFECEC; color: var(--nope-bg); margin-top: 4px; }

/* Приглашение в чате */
.paint-invite {
    align-self: center;
    max-width: 90%;
    padding: 12px 14px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    font-size: .88rem;
}
.paint-invite-btns { display: flex; gap: 8px; margin-top: 10px; justify-content: center; }
.paint-invite-btns button {
    padding: 8px 18px; border: 0; border-radius: var(--radius-pill);
    font: inherit; font-weight: 600; font-size: .84rem; cursor: pointer;
}
.paint-invite-btns .pi-ok { background: var(--gradient); color: #fff; }
.paint-invite-btns .pi-no { background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border); }
.paint-invite-btns button:disabled { opacity: .5; cursor: default; }

/* Готовый рисунок в чате — по центру */
.msg-draw {
    align-self: center;
    width: min(280px, 72%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.msg-draw img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.btn-icon:disabled, .btn-icon.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }
.paint-close-btn {
    position: absolute;
    top: 10px; right: 64px;          /* 10 + 44 (кнопка меню) + 10 */
    z-index: 3;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: #FFECEC; color: var(--nope-bg);
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
#paintCanvas.is-eraser {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' fill='white' fill-opacity='.6' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, crosshair;
}
.messages > * { flex-shrink: 0; }