/* ==================== OBT Interactive Assistant ==================== */

/* 4-rect backdrop overlay */
.obt-assist-backdrop {
    position: fixed;
    background: rgba(0, 0, 0, 0.55);
    z-index: 50000;
    pointer-events: auto;
    transition: all 0.25s ease;
}

/* Highlight ring around target */
.obt-assist-highlight {
    position: fixed;
    z-index: 50001;
    pointer-events: none;
    border: 2px solid var(--primary);
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(90, 122, 90, 0.3), 0 0 20px rgba(90, 122, 90, 0.2);
    transition: top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease;
}

/* Tooltip */
.obt-assist-tooltip {
    position: fixed;
    z-index: 50002;
    background: var(--surface, #222);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 0;
    width: 340px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-size: 16px;
    color: var(--text-primary);
    animation: obt-assist-fadeIn 0.25s ease;
}

.obt-assist-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--light-border, #444);
}

.obt-assist-tooltip-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading, #fff);
}

.obt-assist-tooltip-progress {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
}

.obt-assist-tooltip-body {
    padding: 12px 16px;
    line-height: 1.6;
    color: var(--text-primary);
}

.obt-assist-tooltip-tip {
    padding: 8px 16px 12px;
    font-size: 16px;
    color: var(--accent, #e09100);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.obt-assist-tooltip-tip::before {
    content: '\1F4A1';
    flex-shrink: 0;
}

/* Progress bar */
.obt-assist-progress-bar {
    height: 3px;
    background: var(--light-border, #444);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.obt-assist-progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

/* Button area */
.obt-assist-tooltip-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 12px;
    gap: 8px;
}

.obt-assist-tooltip-buttons .obt-assist-btn {
    padding: 6px 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.15s, opacity 0.15s;
}

.obt-assist-btn-prev {
    background: var(--light, #2a2a2a);
    color: var(--text-secondary);
    border: 1px solid var(--light-border, #444) !important;
}

.obt-assist-btn-prev:hover {
    background: var(--hover-bg);
}

.obt-assist-btn-next {
    background: var(--primary);
    color: #fff;
}

.obt-assist-btn-next:hover {
    background: var(--primary-hover);
}

.obt-assist-btn-skip {
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    padding: 6px 10px;
}

.obt-assist-btn-skip:hover {
    color: var(--text-secondary);
}

/* Validation error */
.obt-assist-validation-error {
    padding: 6px 16px 0;
    color: var(--danger, #D4956A);
    font-size: 16px;
    animation: obt-assist-shake 0.3s ease;
}

/* Finish screen */
.obt-assist-finish {
    text-align: center;
    padding: 24px 16px;
}

.obt-assist-finish-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.obt-assist-finish-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading, #fff);
    margin-bottom: 8px;
}

.obt-assist-finish-msg {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.obt-assist-finish .obt-assist-btn-next {
    padding: 8px 28px;
    font-size: 16px;
}

/* 도우미 버튼이 있을 때 h3 제목과 겹침 방지 */
/* :has() 미지원 WebView 대응: JS에서 .has-obt-assist 클래스 토글 */
.modal-header.has-obt-assist h3,
.modal-header:has(.obt-assist-help-btn) h3 {
    flex: 1;
    min-width: 0;
    padding-right: 110px;
}

/* Help trigger button — 기본(인라인 배치): form-section/inline 컨텍스트 */
.obt-assist-help-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin: 0;
    z-index: 2;
}

/* modal-header 전용: close 버튼(×) 왼쪽에 고정 배치 */
.modal-header .obt-assist-help-btn,
.modal-header.has-obt-assist .obt-assist-help-btn {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
}

.obt-assist-help-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* First-use pulse */
.obt-assist-help-btn.first-use {
    animation: obt-assist-pulse 2s infinite;
}

.obt-assist-help-btn.first-use::after {
    content: attr(data-hint);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50003;
}

/* Auto-suggest popup (not used in Phase 1, placeholder) */
.obt-assist-suggest {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 50003;
    animation: obt-assist-fadeIn 0.2s ease;
}

/* Animations */
@keyframes obt-assist-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes obt-assist-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(90, 122, 90, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(90, 122, 90, 0); }
}

@keyframes obt-assist-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ==================== Interactive Mode (Target highlight) ==================== */

/* 모드 중 하이라이트되는 필드/그룹 — 부모 modal stacking context(1000)에서 격리해
   ::after ?배지가 backdrop·메뉴 위에 표시되도록 z-index 부여 */
.obt-assist-target {
    position: relative;
    z-index: 50004;
    outline: 2px dashed var(--primary) !important;
    outline-offset: 2px;
    cursor: help !important;
    border-radius: 4px;
    transition: outline-color 0.15s ease, box-shadow 0.15s ease;
    animation: obt-assist-target-in 0.25s ease;
}

/* 모드 활성 시 target ancestor의 overflow:hidden/clip을 visible로 강제해
   ::after ?배지가 테이블·모달 경계에서 잘리지 않도록 함. body.obt-assist-active는
   assistant.js start/end에서 토글. 모달 자체 스크롤은 영향 없음 (modal-content는 inner panel이 스크롤). */
body.obt-assist-active table,
body.obt-assist-active tbody,
body.obt-assist-active tr,
body.obt-assist-active td,
body.obt-assist-active th {
    overflow: visible !important;
}
body.obt-assist-active .obt-assist-target,
body.obt-assist-active .obt-assist-target * {
    overflow: visible !important;
}

.obt-assist-target:hover {
    outline-width: 3px !important;
    box-shadow: 0 0 0 4px rgba(90, 122, 90, 0.18);
}

.obt-assist-target-active {
    outline-style: solid !important;
    outline-width: 3px !important;
    box-shadow: 0 0 0 4px rgba(90, 122, 90, 0.30), 0 0 16px rgba(90, 122, 90, 0.25);
}

/* 모드 중 타겟의 하위 input/select 클릭 시 편집 방지 신호 */
.obt-assist-target input,
.obt-assist-target select,
.obt-assist-target textarea,
.obt-assist-target button {
    cursor: help !important;
}

/* 우상단 ? 배지 */
.obt-assist-target::after {
    content: '?';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    pointer-events: none;
    z-index: 50004;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    animation: obt-assist-badge-in 0.3s ease;
}

/* 리뷰.md #220 — 저장/취소 버튼 행(.modal-buttons)은 전체 너비라 우상단 바깥(-10px) ?배지가
   버튼과 동떨어진 빈 모서리에 떠 보이고 클릭/연결이 어려움. 배지를 행 안쪽 우상단으로 당겨
   저장 버튼 영역에 시각적으로 붙임. 전 모달 작성도우미 저장 step 공통 적용(NCR·견적·발주 등 동일). */
.obt-assist-target.modal-buttons::after {
    top: 6px;
    right: 10px;
}

/* 모드 활성 상태의 도우미 버튼 */
.obt-assist-help-btn.mode-active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* 모드 배너 (하단 고정) */
.obt-assist-mode-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    z-index: 50003;
    animation: obt-assist-fadeIn 0.25s ease;
    max-width: calc(100vw - 32px);
}

.obt-assist-mode-banner-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.obt-assist-mode-banner-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obt-assist-mode-banner-close {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.obt-assist-mode-banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 팝오버 전용 닫기 버튼 (헤더 우측) */
.obt-assist-popover .obt-assist-tooltip-header {
    padding-right: 8px;
}

.obt-assist-popover-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    margin-left: 8px;
}

.obt-assist-popover-close:hover {
    color: var(--text-primary);
}

/* 모바일: 배지/배너 압축 */
@media (max-width: 768px) {
    .obt-assist-target::after {
        width: 20px;
        height: 20px;
        font-size: 13px;
        line-height: 20px;
        top: -8px;
        right: -8px;
    }
    .obt-assist-mode-banner {
        bottom: 76px; /* 탭바(56px) 위에 여백 */
        font-size: 15px;
        padding: 8px 14px;
    }
}

@keyframes obt-assist-target-in {
    from { outline-color: transparent; }
    to { outline-color: var(--primary); }
}

@keyframes obt-assist-badge-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Print: hide everything */
@media print {
    .obt-assist-backdrop,
    .obt-assist-highlight,
    .obt-assist-tooltip,
    .obt-assist-help-btn,
    .obt-assist-suggest,
    .obt-assist-mode-banner {
        display: none !important;
    }
    .obt-assist-target {
        outline: none !important;
        box-shadow: none !important;
    }
    .obt-assist-target::after {
        display: none !important;
    }
}