/* ═══════════════════════════════════════════════════════════════════════
   포털 어시스턴트 — 단추 + 옆 패널(PC) · 전체 화면(폰) 공용 한 벌 (2026-11-10)

   정본 시안: _ClaudeWorkspace/talent/통합포털/mockups/assistant_v1/index.html (옆 패널안)
   통로 계약: 통합포털/articles/어시스턴트_구현계약_261110.md 1·6절

   ★ 본문을 "덮지 않고 좁히는" 방법
     모든 셸(공용 셸 app.css · 허브 login.css · dash 셸 사본)은 문서 자체가 스크롤하지 않고
     html·body 높이 calc(100dvh * var(--zk, 1)) 안에서 안쪽 상자가 스크롤한다. 그래서 열릴 때 body 폭을 줄이고
     body 를 고정 위치 요소의 기준 상자로 만든다(contain:layout). 그러면 레일·상단바·허브의
     고정 층·서랍·모달이 **전부** 줄어든 폭 안에 들어온다 → 셸마다 따로 고치지 않는다.
     ⚠ 그래서 패널과 단추는 body 밖(html 의 자식)에 붙인다. body 안이면 같이 줄어든다.
     ⚠ 폰(≤760px)에서는 좁히지 않는다. 패널이 화면 전체를 덮는 시트다.

   ⚠ 색은 셸 토큰만 쓴다. 허브는 토큰 파일을 싣지 않으므로 자리값(fallback)을 함께 적는다.
     자리값은 design_tokens.css 의 밝은 판 값과 같다. 뿌리(:root·html)에 색표를 새로 만들지 않는다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ★ 11-11 사용자 「너무 오른쪽에 바짝 붙어있어 · 리퀴드 글래스 스타일이 낫지 않나」
     ① 단추 자리: PC 오른쪽 24→40 · 아래 24→32 / 폰 오른쪽 16→24 · 떠 있는 하단 바(바닥 8 + 높이 60) 위 12
     ② 재질 = lin_glass.css 11-10 S1 블록 문법 그대로(새 색 없음): 반투명 판색 80% + 흐림 20 · 채도 1.4 + 선 1px + 그림자 0 6 20 .10
        「유리는 컨트롤 층만」 → 단추 · 패널 머리줄만 유리. 대화(말풍선·표)는 불투명 판 위(글자 대비 그대로)
     ③ 투명도 줄이기 · 대비 높이기 설정이면 유리 대신 단색 판(맨 아래) */
.vas-root{
  --vas-w:420px; --vas-gap:12px; --vas-hdh:52px;
  --vas-glass:color-mix(in srgb, var(--panel,#FFFFFF) 80%, transparent);
  --vas-blur:blur(20px) saturate(1.4);
  font-family:var(--sans,"Pretendard",-apple-system,"Segoe UI",Roboto,"Malgun Gothic",sans-serif);
  color:var(--ink,#19191A);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;letter-spacing:0;text-align:left
}
.vas-root *,.vas-root *::before,.vas-root *::after{box-sizing:border-box}
.vas-root button{font:inherit;color:inherit;cursor:pointer;margin:0}
.vas-root svg{display:block;flex:none}

/* ── PC: 열리면 body 를 줄이고 고정 층의 기준 상자로 ─────────────── */
@media (min-width:761px){
  html.vas-on{background:var(--v2-canvas,var(--canvas,#F5F5F6))}
  html.vas-on > body{
    margin-right:calc(var(--vas-w,420px) + var(--vas-gap,12px) * 2) !important;
    width:auto !important;max-width:none !important;
    contain:layout;
  }
}

/* ── 진입 단추 ─────────────────────────────────────────────── */
/* 유리 원형 단추 — 흐림 + 반투명 + 얇은 테두리 + 위 가장자리 빛(--lin-card-sh 안쪽 1px · 밝게/다크 각각 lin_glass.css 가 준다) */
.vas-fab{position:fixed;right:40px;bottom:32px;z-index:900;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line,#E5E5E6);background:var(--vas-glass);
  -webkit-backdrop-filter:var(--vas-blur);backdrop-filter:var(--vas-blur);
  color:var(--ink,#19191A);display:grid;place-items:center;padding:0;
  box-shadow:var(--lin-card-sh,0 0 0 transparent),0 6px 20px rgba(0,0,0,.10);
  transition:transform .2s ease,background-color .2s ease}
.vas-fab:hover{background:var(--panel,#FFFFFF)}
.vas-fab:active{transform:scale(.96);transition-duration:.08s}
.vas-fab:focus-visible{outline:2px solid var(--ci-blue,#5E6AD2);outline-offset:3px}
html.vas-on .vas-fab{display:none}
/* 허브 = 로그인 화면과 같은 파일이다. 로그인 전(hubon 없음)에는 단추·패널을 내지 않는다 */
html.vas-hub:not(.vas-hubon) .vas-root{display:none}

/* ── 패널 ─────────────────────────────────────────────────── */
.vas-panel{position:fixed;top:var(--vas-gap);right:var(--vas-gap);bottom:var(--vas-gap);width:var(--vas-w);z-index:900;
  display:none;flex-direction:column;min-height:0;background:var(--panel,#FFFFFF);border-radius:16px;overflow:hidden;
  border:1px solid var(--line,#E5E5E6);box-shadow:0 6px 20px rgba(0,0,0,.10)}
html.vas-on .vas-panel{display:flex}
/* 머리줄 = 유리 · 대화가 그 밑으로 흘러 비친다(폰 MES 주문 현황 머리줄과 같은 문법) */
.vas-hd{position:absolute;top:0;left:0;right:0;z-index:2;height:var(--vas-hdh);display:flex;align-items:center;gap:4px;padding:0 8px 0 20px;
  background:var(--vas-glass);-webkit-backdrop-filter:var(--vas-blur);backdrop-filter:var(--vas-blur);
  border-bottom:1px solid var(--line-2,#EFEFEF)}
.vas-root .vas-body{padding-top:calc(var(--vas-hdh) + 20px)}
.vas-log{scroll-padding-top:calc(var(--vas-hdh) + 8px)}
.vas-hd h2{margin:0;font-size:15px;font-weight:700;flex:1;color:var(--ink,#19191A)}
.vas-tb{height:32px;padding:0 10px;border:0;background:none;border-radius:var(--r2,6px);display:flex;align-items:center;gap:6px;
  color:var(--ink-2,#4B4B4F);font-size:13px;font-weight:600}
.vas-tb:hover{background:var(--hover-2,#F8F8F9)}
.vas-tb.vas-icon{width:32px;padding:0;justify-content:center}
.vas-root .vas-grab,.vas-root .vas-fold-lbl,.vas-root .vas-ic-fold{display:none}

.vas-log{flex:1;min-height:0;overflow:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:20px;overscroll-behavior:contain}
.vas-day{align-self:center;font-size:12px;color:var(--ink-3,#5A5A5E)}   /* 11-11 QA: ink-4 는 유리 판 위 3.41:1 → ink-3(흰 판 6.53) */
.vas-me{align-self:flex-end;max-width:80%;background:var(--soft,#F0F0F1);padding:10px 14px;border-radius:14px 14px 4px 14px;
  font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.vas-ai{max-width:100%;font-size:15px;line-height:1.6;word-break:break-word}
.vas-ai p{margin:0}
.vas-ai b{font-weight:700}
.vas-big{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.vas-sub{font-size:13px;color:var(--ink-2,#4B4B4F);margin-top:2px}
.vas-src{margin-top:6px;font-size:12px;color:var(--ink-3,#5A5A5E)}
.vas-fb{display:flex;gap:2px;margin-top:6px;margin-left:-6px}
.vas-fb button{width:30px;height:28px;border:0;background:none;border-radius:var(--r2,6px);font-size:14px;line-height:1;opacity:.55;padding:0}
.vas-fb button:hover{background:var(--hover-2,#F8F8F9);opacity:1}
.vas-fb button.on{background:var(--accent-soft,#EEF0FB);opacity:1}
.vas-tw{margin-top:10px;max-width:100%;overflow-x:auto}
.vas-tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.vas-tbl th{font-size:12px;font-weight:600;color:var(--ink-3,#5A5A5E);text-align:right;padding:8px 12px;background:var(--hover,#FAFAFC);
  border-top:1px solid var(--line,#E5E5E6);border-bottom:1px solid var(--line,#E5E5E6);white-space:nowrap}
.vas-tbl td{padding:9px 12px;border-bottom:1px solid var(--line-2,#EFEFEF);text-align:right;white-space:nowrap}
.vas-tbl th:first-child,.vas-tbl td:first-child{text-align:left}
.vas-tbl tfoot td{font-weight:700;border-bottom:1px solid var(--line,#E5E5E6)}
.vas-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vas-chip{height:32px;padding:0 14px;border:1px solid var(--line-ctl,#8F949B);border-radius:16px;background:var(--panel,#FFFFFF);
  font-size:13px;color:var(--ink,#19191A);display:inline-flex;align-items:center;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vas-chip:hover{background:var(--hover-2,#F8F8F9)}
.vas-chip:disabled{opacity:.5;cursor:default}
.vas-lbl{font-size:12px;color:var(--ink-4,#6E747D);margin-top:12px}
.vas-wait{display:flex;gap:5px;padding:8px 0}
.vas-wait i{width:6px;height:6px;border-radius:50%;background:var(--ink-4,#6E747D);opacity:.35;animation:vas-dot 1s infinite}
.vas-wait i:nth-child(2){animation-delay:.15s}
.vas-wait i:nth-child(3){animation-delay:.3s}
@keyframes vas-dot{0%,80%,100%{opacity:.25}40%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.vas-wait i{animation:none;opacity:.6}}

/* 새 대화 첫 화면: 자주 묻는 질문 칩만(제목 문구 없음 · O1) */
.vas-empty{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;overflow:auto}
.vas-empty .vas-chips{flex-direction:column;align-items:flex-start;margin-top:0}

.vas-comp{flex:none;padding:12px 16px 16px}
.vas-box{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line-ctl,#8F949B);border-radius:14px;padding:6px 6px 6px 14px;background:var(--panel,#FFFFFF)}
.vas-box:focus-within{border-color:var(--accent,#5E6AD2);box-shadow:0 0 0 3px var(--accent-soft,#EEF0FB)}
.vas-root .vas-box textarea{flex:1;min-width:0;resize:none;font:inherit;font-size:15px;line-height:22px;padding:5px 0;height:32px;max-height:120px;
  color:var(--ink,#19191A);margin:0;min-height:0;border-radius:0}
/* 셸의 입력칸 공통 테두리·초점 고리(app.css·lin_glass.css)가 안쪽에 또 그려지지 않게 — 테두리는 바깥 상자(.vas-box) 한 겹 */
.vas-root .vas-box textarea,.vas-root .vas-box textarea:focus,.vas-root .vas-box textarea:focus-visible{
  border:0 !important;outline:0 !important;box-shadow:none !important;background:none !important}
.vas-box textarea::placeholder{color:var(--ink-4,#6E747D)}
.vas-send{width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;flex:none;padding:0;
  background:var(--line-2,#EFEFEF);color:var(--ink-4,#6E747D)}
.vas-send.ready{background:var(--ci-navy,#5E6AD2);color:#fff}
.vas-send:disabled{cursor:default}

/* ── 폰(≤760px): 아래에서 올라오는 전체 화면 · 「접기」 ─────────── */
@media (max-width:760px){
  .vas-fab{right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  /* 떠 있는 하단 바(lin_glass.css 11-10 S1 · 바닥 8 + 높이 60 = 68)가 있는 셸은 그 위 12(바 좌우 여백과 같은 12) */
  html:is(.lin-shell,.lin-ios,.lin-hub) .vas-fab{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .vas-root{--vas-hdh:54px}
  .vas-panel{top:0;right:0;bottom:0;left:0;width:auto;border-radius:0;border:0;box-shadow:none;z-index:1000;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  html.vas-on .vas-panel{animation:vas-up .22s ease-out}
  .vas-hd{padding:16px 4px 6px 16px}
  .vas-root .vas-body{padding-top:calc(var(--vas-hdh) + 16px)}
  .vas-root .vas-grab{display:block;position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line,#E5E5E6)}
  .vas-root .vas-fold-lbl{display:inline}
  .vas-root .vas-ic-x{display:none}
  .vas-root .vas-ic-fold{display:block}
  .vas-tb.vas-icon{width:auto;padding:0 10px}
  .vas-log{padding:16px}
  .vas-me{max-width:85%}
  .vas-comp{padding:8px 12px 16px}
}
@keyframes vas-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html.vas-on .vas-panel{animation:none}}
@media print{.vas-root{display:none !important}}

/* ── 11-10 허브 「나만의 픽셀 캐릭터를 만들어 보세요」 알림 카드(pixel_avatar.js .pxa-prompt · 오른쪽 아래 고정 · z 9000)가
   어시스턴트 단추와 같은 모서리를 덮어 단추가 안 눌렸다(개발자 실측) → 카드를 단추 왼쪽(PC)·위(폰)로 비키고, 패널이 열리면 숨긴다 */
/* ⚠ pixel_avatar.js 가 실행 중에 같은 이름 규칙을 뒤에 싣는다 → 특이도를 올린다(html body) */
/* 11-11 단추 자리 이동에 맞춤: PC = 단추 왼쪽 12(40 + 52 + 12) · 아래 끝 단추와 같은 32 / 폰 = 단추 위 12(80 + 52 + 12) */
html body .pxa-prompt{right:104px;bottom:32px}
html.vas-on body .pxa-prompt{visibility:hidden}
@media (max-width:760px){
  html body .pxa-prompt{right:12px;bottom:calc(144px + env(safe-area-inset-bottom,0px))}
}

/* ── 11-11 투명도 줄이기 · 대비 높이기 = 유리 대신 단색 판(lin_glass.css S1 과 같은 규칙) ── */
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more){
  .vas-root{--vas-glass:var(--panel,#FFFFFF);--vas-blur:none}
}
/* 다크 = 떠 있는 하단 바와 같은 단색 판(lin_glass.css 10-06 Q8 · 다크 떠 있는 층은 뒤 글자 비침 때문에 불투명) */
html[data-theme="dark"] .vas-root{--vas-glass:var(--panel,#FFFFFF);--vas-blur:none}

/* 11-11 QA: 폰 MES 주문 현황 조회 조건 하단 시트(lin_glass.js S1 · html.lin-s1-sheet)가 열리면 어시스턴트 단추가 입력칸을 가렸다 → 시트가 열린 동안 단추를 숨긴다(닫으면 돌아옴) */
html.lin-s1-sheet .vas-fab{visibility:hidden}