/* 영역 캡처: 위쪽 바 '영역 선택', 원문·번역 쪽 위 고른 사각형·단추 상자, 논문 위 떠 있는 창, 패널 '캡처' 탭, 채팅 그림.
   모양은 ASK 앱(PdfViewer 영역 선택·PinnedCaptures·ChatPanel)을 웹 색으로 옮겼다. 주황 단추는 앱 선택 팝업과 같은 #cc7d5e. */

/* 위쪽 바 '영역 선택' 켜기·끄기(앱 위쪽 바 글자 단추와 같은 모양). 켜면 바탕을 깐다. 좁은 폭은 viewer-toolbar.css. */
.viewer-region {
    position: relative;
    display: inline-flex;
    flex: none;
}

.viewer-region-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-fg-3);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.viewer-region-btn:hover {
    background: var(--app-hover);
    color: var(--app-fg);
}

.viewer-region-btn[aria-pressed="true"] {
    background: var(--app-overlay);
    color: var(--app-fg);
}

.viewer-region-btn svg {
    flex: none;
    width: 14px;
    height: 14px;
}

/* 마우스를 올리면 잠깐 뒤 단축키 안내(앱과 같은 문구·모양). 영역 선택이 켜져 있어도 보인다(앱과 같다). */
.viewer-region-hint {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px 12px;
    width: max-content;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--app-ground);
    box-shadow: var(--app-shadow-pop);
    color: var(--app-fg-2);
    font-size: 12px;
    line-height: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
}

.viewer-region:hover .viewer-region-hint,
.viewer-region:focus-within .viewer-region-hint {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.15s;
}

.region-hint-title {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--app-fg-4);
    font-size: 11.5px;
}

.region-hint-row {
    display: contents;
}

.region-hint-row > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--app-fg-4);
}

.viewer-region-hint kbd {
    padding: 1px 6px;
    border: 1px solid var(--app-edge);
    border-radius: 4px;
    background: var(--app-elevated);
    color: var(--app-fg-3);
    font-family: inherit;
    font-size: 11px;
}

/* 영역 선택을 켜면 쪽(원문·번역) 위는 십자 커서, 글자 고르기·손가락 스크롤 대신 영역을 끈다. */
.pdf-viewer.region-mode .viewer-slot:not(.empty) {
    cursor: crosshair;
    touch-action: none;
}

.pdf-viewer.region-mode .viewer-slot .textLayer {
    pointer-events: none;
}

.pdf-viewer.region-dragging,
.pdf-viewer.region-dragging .textLayer {
    -webkit-user-select: none;
    user-select: none;
}

/* 고른 사각형(앱: 1.5px 주황 테두리, 옅은 주황 바탕). 글자 층 위, 마우스는 받지 않는다. */
.viewer-region-box {
    position: absolute;
    z-index: 2;
    border: 1.5px solid #cc7d5e;
    border-radius: 3px;
    background: color-mix(in srgb, #cc7d5e 10%, transparent);
    pointer-events: none;
}

/* 놓은 뒤 단추 상자: 영역 아래(공간이 좁으면 위). 쪽 칸 안에 있어 스크롤을 따라간다. */
.viewer-region-pop {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    background: #fbfbf8;
    box-shadow: 0 8px 24px rgba(30, 28, 18, 0.14), 0 0 0 1px rgba(39, 38, 30, 0.11);
    cursor: default;
    transform: translate(-50%, 0) translateY(10px);
    white-space: nowrap;
}

.viewer-region-pop[data-placement="above"] {
    transform: translate(-50%, -100%) translateY(-10px);
}

.viewer-region-ask,
.viewer-region-pin {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.viewer-region-ask {
    background: #cc7d5e;
    color: #fff;
}

.viewer-region-ask:hover:not(:disabled) {
    background: #b56b4d;
}

.viewer-region-pin {
    background: transparent;
    color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.viewer-region-pin:hover:not(:disabled) {
    background: var(--pill);
    color: var(--ink);
}

.viewer-region-ask:disabled,
.viewer-region-pin:disabled {
    opacity: 0.7;
    cursor: default;
}

.viewer-region-ask svg,
.viewer-region-pin svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.capture-spin {
    animation: capture-spin 0.8s linear infinite;
}

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

/* 논문 위 떠 있는 창들. 층은 논문 스크롤 영역에 맞춰 두고 마우스는 창만 받는다.
   앱처럼 쪽 위 단추 상자·하이라이트 메모 팝오버(z-index 3)는 창보다 위에 온다. */
.capture-layer {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.capture-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fbfbf8;
    box-shadow: 0 8px 24px rgba(30, 28, 18, 0.14), 0 0 0 1px rgba(39, 38, 30, 0.11);
    pointer-events: auto;
}

.capture-window-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 0 4px 0 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 12px;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.capture-window-bar:active {
    cursor: grabbing;
}

.capture-window.collapsed .capture-window-bar {
    border-bottom: 0;
}

.capture-window-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capture-window-btn,
.capture-item-remove {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.capture-window-btn:hover,
.capture-item-remove:hover {
    background: var(--pill);
    color: var(--ink);
}

.capture-window-btn svg,
.capture-item-remove svg {
    width: 14px;
    height: 14px;
}

.capture-window-image {
    display: block;
    flex: 1;
    width: 100%;
    min-height: 0;
    background: #fff;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.capture-window-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #9a9993;
    cursor: nwse-resize;
    touch-action: none;
}

.capture-window-resize svg {
    width: 10px;
    height: 10px;
}

/* 패널 '캡처' 탭: 찍은 순서대로 크게. */
.chat-captures {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.capture-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
    word-break: keep-all;
}

.capture-empty span {
    display: block;
    color: var(--ink-faint);
}

.capture-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 16px;
    list-style: none;
}

.capture-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.capture-item-head {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-soft);
    font-size: 12px;
}

.capture-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capture-badge {
    margin-left: 6px;
    color: var(--accent);
}

.capture-item-show {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.capture-item-show:hover {
    background: var(--pill);
    color: var(--ink);
}

.capture-item-show svg {
    width: 14px;
    height: 14px;
}

.capture-item-image {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

/* 채팅: 입력창 위 고른 영역 그림, 붙여 넣은 그림 줄, 보낸 질문 위 그림. 요약 탭에서는 입력창처럼 그림 줄도 숨긴다. */
.viewer-chat[data-mode="summary"] .chat-images {
    display: none !important;
}

.chat-selection-image {
    display: block;
    max-width: 100%;
    max-height: 112px;
    margin-top: 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
}

.chat-images {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0 8px;
}

.chat-image {
    position: relative;
}

.chat-image img {
    display: block;
    max-width: 120px;
    max-height: 80px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.chat-image-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fbfbf8;
    box-shadow: 0 2px 8px rgba(30, 28, 18, 0.16), 0 0 0 1px var(--line);
    color: var(--ink-soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.chat-image:hover .chat-image-remove,
.chat-image-remove:focus-visible {
    opacity: 1;
}

/* 마우스가 없는 화면은 빼기 단추를 늘 보인다. */
@media (hover: none) {
    .chat-image-remove {
        opacity: 1;
    }
}

.chat-image-remove:hover {
    color: var(--ink);
}

.chat-image-remove svg {
    width: 10px;
    height: 10px;
}

.chat-image-count {
    align-self: flex-end;
    padding-bottom: 4px;
    color: var(--ink-faint);
    font-size: 11.5px;
}

.chat-user-images {
    display: flex;
    flex-wrap: wrap;
    align-self: flex-end;
    justify-content: flex-end;
    gap: 4px;
    max-width: min(85%, 42em);
    margin-bottom: -6px;
}

.chat-user-images img {
    display: block;
    max-width: 200px;
    max-height: 180px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.viewer-region-btn:focus-visible,
.viewer-region-ask:focus-visible,
.viewer-region-pin:focus-visible,
.capture-window-btn:focus-visible,
.capture-item-show:focus-visible,
.capture-item-remove:focus-visible,
.chat-image-remove:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .capture-spin {
        animation: none;
    }
}