/* ==========================================================================
   표면 재질 계약 — 떠 있는 표면(플로팅)의 단일 정의처

   Mist 디자인 시스템은 "blur는 떠 있는 표면의 특권"이라는 원칙 위에 서 있고,
   테마(clevi-mist-*)는 그 재질을 `.clc-dialog` / `.clc-dropdown-panel` 같은
   디자인 시스템 컴포넌트 클래스에만 직접 입힌다.

   문제는 앱이 손수 만든 플로팅 표면(챗봇 선택 패널·액션 메뉴·각종 팝업)이다.
   이들은 배경 토큰만 빌려 쓰기 때문에 "반투명하기만 하고 뒤가 안 흐린" 상태가
   된다 — 재질 토큰이 색만 공급하고 blur는 별도 속성이기 때문.

   그래서 여기서 두 가지를 고정한다.
     1) 재질 토큰의 기본값. Mist가 아닌 테마에서도 토큰이 항상 "정의됨"을 보장해
        소비처가 폴백 없이 참조할 수 있게 한다.
     2) 표면 시맨틱 토큰과 유틸리티 클래스. 커스텀 플로팅 표면은 색/블러/헤어라인/
        그림자/모서리를 직접 고르지 않고 이 계약만 소비한다.

   새로 만드는 플로팅 표면은 `.clv-surface-overlay` 클래스만 붙이면 되고,
   스코프드 CSS(.razor.css)라 클래스를 붙이기 어려운 기존 표면은
   `--clv-overlay-*` 토큰을 소비한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 재질 토큰 기본값

   `html`(0,0,1)에 정의한다. 테마는 `:root`(0,1,0)에 정의하므로 링크 순서와
   무관하게 테마가 항상 이긴다 — 즉 여기 값은 "테마가 재질을 말해주지 않을 때"만
   쓰이는 바닥값이다. Mist는 이 전부를 아크릴 값으로 덮어쓴다.

   비-Mist 테마의 바닥값은 불투명 + blur 없음이다. 반투명은 재질을 정의한
   테마만 감당할 수 있고, 어설픈 반투명은 가독성만 해친다.
   -------------------------------------------------------------------------- */
html {
    --clc-material-shell: var(--clc-sidebar-background-color, var(--clc-base-background-color, #FFFFFF));
    /* `-static`은 살아 있는 토큰을 가리키지 않고 같은 출처를 다시 적는다.
       별칭(`var(--clc-material-shell)`)으로 두면, 효과 끄기가 반대 방향으로
       `--clc-material-shell: var(--clc-material-shell-static)`을 걸 때 순환이 되어
       두 토큰이 함께 무효가 된다. */
    --clc-material-shell-static: var(--clc-sidebar-background-color, var(--clc-base-background-color, #FFFFFF));
    --clc-material-paper: var(--clc-base-background-color, #FFFFFF);
    --clc-material-veil: var(--clv-modal-background, var(--clc-base-background-color, #FFFFFF));
    --clc-material-veil-static: var(--clv-modal-background, var(--clc-base-background-color, #FFFFFF));
    --clc-material-blur-shell: none;
    --clc-material-blur-veil: none;
    --clc-material-hairline: color-mix(in srgb, var(--clc-text-color, #000) 12%, transparent);
    --clc-material-hairline-strong: color-mix(in srgb, var(--clc-text-color, #000) 22%, transparent);
    --clc-material-specular: transparent;

    /* 입력 재질(L2⁻). 비-Mist 테마의 바닥값은 "오늘과 같게" — 불투명 배경 +
       평범한 테두리다. 파인 자리/뜬 종이는 재질 위계를 정의한 테마만 감당한다. */
    --clc-material-field: var(--clc-base-background-color, #FFFFFF);
    --clc-material-field-border: var(--clc-material-hairline-strong);
    --clc-material-field-raised: var(--clc-base-background-color, #FFFFFF);
    --clc-material-field-raised-border: var(--clc-material-hairline-strong);
    --clc-material-field-raised-shadow: 0 1px 2px color-mix(in srgb, var(--clc-text-color, #000) 12%, transparent);
}

/* --------------------------------------------------------------------------
   2. 표면 시맨틱 토큰

   소비처는 재질 토큰(--clc-material-*)을 직접 읽지 않고 "무슨 표면인가"로 말한다.
   L3 오버레이(팝업·메뉴·드롭다운·시트) / L1 셸(사이드바·독·고정 패널) / 스크림.
   -------------------------------------------------------------------------- */
:root {
    /* L3 — 떠 있는 오버레이 */
    --clv-overlay-surface: var(--clc-material-veil);
    --clv-overlay-blur: var(--clc-material-blur-veil);
    --clv-overlay-border-color: var(--clc-material-hairline);
    --clv-overlay-shadow: var(--clc-shadow-layer2-2, 0 8px 24px rgba(0, 0, 0, 0.16));
    --clv-overlay-radius: 14px;

    /* L1 — 셸 */
    --clv-shell-surface: var(--clc-material-shell);
    --clv-shell-blur: var(--clc-material-blur-shell);

    /* L2⁻ — 입력이 놓이는 자리.
       종이 위(카드·다이얼로그 안)에 놓이는 입력은 `field`,
       캔버스 위에 떠 있는 입력(하단 독 옴니박스·채팅 컴포저)은 `field-raised`. */
    --clv-field-surface: var(--clc-material-field);
    --clv-field-border-color: var(--clc-material-field-border);
    --clv-field-radius: 10px;
    --clv-field-raised-surface: var(--clc-material-field-raised);
    --clv-field-raised-border-color: var(--clc-material-field-raised-border);
    --clv-field-raised-shadow: var(--clc-material-field-raised-shadow);

    /* 오버레이 뒤를 덮는 딤 */
    --clv-scrim: var(--clv-modal-overlay, rgba(0, 0, 0, 0.32));
}

/* --------------------------------------------------------------------------
   3. 유틸리티 클래스

   전역 스타일시트라 스코프드 CSS(`.x[b-xxxxx]`, 0,2,0)보다 우선순위가 낮다.
   따라서 기존 표면을 이 클래스로 "덮어쓰는" 용도로는 쓸 수 없고,
   자체 배경을 선언하지 않는 새 표면에 붙이는 용도다.
   -------------------------------------------------------------------------- */
.clv-surface-overlay {
    border: 1px solid var(--clv-overlay-border-color);
    border-radius: var(--clv-overlay-radius);
    background: var(--clv-overlay-surface);
    box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clv-overlay-shadow);
    -webkit-backdrop-filter: var(--clv-overlay-blur);
    backdrop-filter: var(--clv-overlay-blur);
}

.clv-surface-shell {
    background: var(--clv-shell-surface);
    box-shadow: inset 0 1px 0 var(--clc-material-specular);
    -webkit-backdrop-filter: var(--clv-shell-blur);
    backdrop-filter: var(--clv-shell-blur);
}

.clv-surface-scrim {
    background: var(--clv-scrim);
}

.clv-surface-field {
    background: var(--clv-field-surface);
    border: 1px solid var(--clv-field-border-color);
    border-radius: var(--clv-field-radius);
}

.clv-surface-field-raised {
    background: var(--clv-field-raised-surface);
    border: 1px solid var(--clv-field-raised-border-color);
    border-radius: var(--clv-field-radius);
    box-shadow: var(--clv-field-raised-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* --------------------------------------------------------------------------
   4. 함정 방지

   조상에 opacity 애니메이션/전환이 걸려 있으면 자식의 backdrop-filter가 무효화된다
   (조상이 backdrop root가 되어 자식이 흐릴 배경 자체가 사라진다).
   등장 연출은 표면 요소 자신에게 걸고, 래퍼에는 걸지 않는다.
   Mist 원칙상 blur 반경 자체는 애니메이션하지 않는다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :where(html:not([data-clevi-motion="full"])) .clv-surface-overlay,
    :where(html:not([data-clevi-motion="full"])) .clv-surface-shell {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   5. 프리즘 램프 — "이 입력은 AI에게 간다"는 표시

   채팅 컴포저가 AI를 향할 때 입력창 뒤에 깔리는 굴절광의 색이다. 액센트 보라에서
   출발해 한 바퀴 돌아 보라로 닫는다. 채도를 낮게 잡아 무지개가 아니라
   "빛이 갈라진 자국"으로 읽히게 한다. 소비처는 chat-composer.css.

   정본은 이제 Mist 테마다 — 라이트/다크가 각자 `:root`(0,1,0)에 제 값을 갖는다.
   여기 남은 것은 재질 토큰과 같은 성격의 <b>바닥값</b>이다. 즉 Mist가 아닌 테마에서도
   토큰이 항상 "정의됨"을 보장해 소비처가 폴백 없이 참조할 수 있게 한다.
   `html`(0,0,1)이라 테마가 값을 말하는 순간 언제나 테마가 이긴다.
   -------------------------------------------------------------------------- */
html {
    --clv-prism-1: light-dark(#8B6BF5, #A78BFF);
    --clv-prism-2: light-dark(#56A8E8, #6FB8F2);
    --clv-prism-3: light-dark(#5FC9A8, #6FD8B8);
    --clv-prism-4: light-dark(#E38ABF, #F09FCE);
}

/* --------------------------------------------------------------------------
   6. 화면 효과 선호 — 기기가 아니라 사용자가 정한다

   `theme.js`가 부팅 시점에 documentElement에 얹는 두 속성을 읽는다:
     data-clevi-surface = full(기본) | auto(기기에 맞춤) | minimal(끄기)
     data-clevi-motion  = on(기본)   | full(항상 켬) | reduced(줄이기)

   역할 나누기 — 테마는 <b>값</b>을 갖고, 앱은 <b>언제 쓸지</b>를 정한다.
   예전에는 Mist가 `(pointer: coarse)`이면 스스로 blur를 절반으로 낮췄다. 화면
   크기로 기기 성능을 단정하는 셈이라 좋은 폰을 쓰는 사람까지 흐린 화면을 받았다.
   그래서 테마에서 그 단을 빼고, 절반 값은 `--clc-material-blur-*-lite` 토큰으로
   받아 여기서 `auto`를 고른 사람에게만 적용한다.

   그래서 기본값(`full`)에는 규칙이 없다 — 테마의 `:root` 값이 곧 최대치다.
   여기서 덮어쓸 일이 없으니 blur 수치를 앱에 복사해 두지 않아도 되고, 나중에
   테마가 값을 바꾸면 그대로 따라간다.

   경계 — 이 설정이 뒤집는 것은 "화면 크기로 기기 성능을 짐작한 강등"까지다.
   OS 접근성 설정(`prefers-reduced-motion`·`prefers-reduced-transparency`)은
   기본값에서 그대로 따른다. 사용자가 시스템에 이미 말해 둔 요구이기 때문이다.
   유일한 예외는 사용자가 직접 고른 "항상 켬"(motion=full)이다.
   -------------------------------------------------------------------------- */

/* 기기에 맞춤 — 예전 Mist 사다리 ①단과 같은 조건·같은 값이다. 다만 이제
   모두에게 강제되지 않고 이걸 고른 사람에게만 걸린다. 값은 테마에서 받아 오고,
   토큰이 없는 테마(비-Mist·구 패키지)를 위해 폴백을 함께 적는다. */
@media (pointer: coarse) and (max-width: 820px) {
    html[data-clevi-surface="auto"] {
        --clc-material-blur-shell: var(--clc-material-blur-shell-lite, blur(16px) saturate(1.3));
        --clc-material-blur-veil: var(--clc-material-blur-veil-lite, blur(22px) saturate(1.4));
    }
}

    /* 위 규칙은 `html[...]`(0,1,1)이라 테마의 `:root`(0,1,0)를 이긴다 — OS가
       "투명도 줄이기"라고 해서 테마가 blur를 껐어도 다시 켜 버린다. 그래서 뒤에서
       같은 자리를 다시 덮는다. `full`·`minimal`은 이 rule 자체가 없어 해당 없다. */
    @media (prefers-reduced-transparency: reduce) {
        html[data-clevi-surface="auto"] {
            --clc-material-shell: var(--clc-material-shell-static);
            --clc-material-veil: var(--clc-material-veil-static);
            --clc-material-blur-shell: none;
            --clc-material-blur-veil: none;
        }
    }

/* 끄기 — 저사양 기기용. 테마 사다리의 "투명도 줄이기"와 같은 자리로 내린다.
   반투명만 남기고 blur를 빼면 가독성만 나빠지므로 배경도 불투명으로 함께 바꾼다. */
html[data-clevi-surface="minimal"] {
    --clc-material-shell: var(--clc-material-shell-static);
    --clc-material-veil: var(--clc-material-veil-static);
    --clc-material-blur-shell: none;
    --clc-material-blur-veil: none;
    --clc-material-specular: transparent;
}

/* 애니메이션 줄이기.

   컴포넌트마다 `prefers-reduced-motion` 블록을 따로 적어 두긴 했지만, 그건 적어 둔
   곳에서만 듣는다. 새로 만든 애니메이션은 대개 빠뜨리므로 "OS 설정을 존중한다"가
   군데군데 구멍이 난다. 그래서 전역에서 한 번에 잡는다 — 아래 두 블록이 앱 전체의
   바닥이고, 컴포넌트가 자기 블록을 적었든 안 적었든 결과가 같아진다.

   0이 아니라 0.001ms인 것은 `animationend`/`transitionend`를 기다리는 코드가
   이벤트를 못 받아 멈추는 것을 막기 위해서다. */

/* ① 사용자가 "줄이기"를 골랐을 때. OS 설정과 무관하게 적용한다. */
html[data-clevi-motion="reduced"] *,
html[data-clevi-motion="reduced"] *::before,
html[data-clevi-motion="reduced"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ② OS가 움직임을 줄이라고 할 때. 기본값이 여기 걸린다.
   빠져나가는 건 사용자가 직접 고른 "항상 켬"뿐이다. */
@media (prefers-reduced-motion: reduce) {
    html:not([data-clevi-motion="full"]) *,
    html:not([data-clevi-motion="full"]) *::before,
    html:not([data-clevi-motion="full"]) *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}