/* 2026-08-11, 박광일, 商务通 IM 방문자 채팅 위젯 (바닐라, 프레임워크 비의존) */
.dim-panel{position:fixed;right:20px;bottom:210px;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 120px);
  background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.22);display:none;flex-direction:column;overflow:hidden;z-index:2147483001;
  font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;}
.dim-panel.dim-open{display:flex;}
/* 2026-08-25, 박광일, 문의창 열림 애니메이션 — 데스크톱: 살짝 떠오르며 페이드+스케일 */
@keyframes dim-pop-in{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.dim-panel.dim-open{animation:dim-pop-in .22s cubic-bezier(.22,1,.36,1);transform-origin:bottom right;}
@media (prefers-reduced-motion:reduce){ .dim-panel.dim-open{animation:none;} }
.dim-head{background:#2563EB;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;}
.dim-head .dim-ava{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:18px;}
.dim-head .dim-tt{font-weight:700;font-size:15px;line-height:1.2;}
.dim-head .dim-sub{font-size:11px;opacity:.85;}
/* 헤더 우측 컨트롤 버튼 — 윈도우식 최대화/닫기, 한 줄 정렬 */
.dim-head .dim-expand{margin-left:auto;}
.dim-head .dim-expand,.dim-head .dim-x{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;cursor:pointer;background:none;border:0;color:#fff;opacity:.85;line-height:1;padding:0;transition:background .15s,opacity .15s;}
.dim-head .dim-x{margin-left:2px;}
.dim-head .dim-expand:hover,.dim-head .dim-x:hover{opacity:1;background:rgba(255,255,255,.18);}
.dim-head .dim-expand svg,.dim-head .dim-x svg{display:block;}
.dim-head>div:nth-child(2){flex:1;min-width:0;}
/* 확대 상태 — 큰 창 */
.dim-panel.dim-expanded{width:min(760px,94vw);height:calc(100vh - 48px);max-height:calc(100vh - 48px);right:20px;bottom:24px;}
.dim-panel.dim-expanded .dim-prod-img{width:72px;height:72px;flex:0 0 72px;}
.dim-body{flex:1;overflow-y:auto;padding:14px;background:#f7f8fa;display:flex;flex-direction:column;gap:8px;}
.dim-msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.45;word-break:break-word;white-space:pre-wrap;}
.dim-msg.dim-in{align-self:flex-start;background:#fff;border:1px solid #eceef1;color:#222;border-bottom-left-radius:4px;}
.dim-msg.dim-out{align-self:flex-end;background:#2563EB;color:#fff;border-bottom-right-radius:4px;}
.dim-msg.dim-sys{align-self:center;background:#e9edf5;color:#556;font-size:12px;border-radius:10px;}
.dim-msg .dim-img{max-width:200px;max-height:220px;border-radius:8px;display:block;cursor:zoom-in;}
/* 이미지 라이트박스(클릭 시 크게) */
.dim-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;z-index:2147483002;cursor:zoom-out;padding:24px;}
.dim-lightbox.dim-lb-open{display:flex;}
.dim-lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);}
.dim-lightbox .dim-lb-x{position:fixed;top:16px;right:20px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:26px;line-height:1;cursor:pointer;}
.dim-lightbox .dim-lb-x:hover{background:rgba(255,255,255,.3);}
.dim-msg.dim-out:has(.dim-img),.dim-msg.dim-in:has(.dim-img){padding:4px;background:transparent;}
.dim-time{font-size:10px;color:#9aa;margin:0 4px;align-self:flex-end;}
.dim-foot{border-top:1px solid #eceef1;padding:10px;display:flex;gap:8px;align-items:flex-end;background:#fff;}
.dim-foot textarea{flex:1;resize:none;border:1px solid #dfe3e8;border-radius:10px;padding:9px 10px;font-size:13px;max-height:90px;outline:none;font-family:inherit;}
.dim-foot textarea:focus{border-color:#2563EB;}
.dim-foot .dim-send{background:#2563EB;color:#fff;border:0;border-radius:10px;padding:0 16px;height:38px;font-weight:700;cursor:pointer;font-size:13px;}
.dim-foot .dim-send:disabled{opacity:.5;cursor:default;}
/* 2026-08-25, 박광일, 모바일 — 문의창을 풀스크린 팝업으로 크게 노출 (기본/확대 상태 공통) + 아래에서 위로 슬라이드업 */
@media (max-width:480px){
  .dim-panel,
  .dim-panel.dim-expanded{ inset:0; right:0; left:0; top:0; bottom:0; width:auto; height:auto; max-width:100vw; max-height:100vh; border-radius:0; }
  @keyframes dim-slide-up{from{opacity:.4;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}}
  .dim-panel.dim-open{animation:dim-slide-up .28s cubic-bezier(.22,1,.36,1);transform-origin:bottom center;}
}
@media (max-width:480px) and (prefers-reduced-motion:reduce){ .dim-panel.dim-open{animation:none;} }

/* 旺旺식 문의 상품 카드 */
.dim-prod{display:flex;gap:10px;align-items:center;padding:10px;margin-bottom:6px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.dim-prod:hover{border-color:#2563EB;}
/* 미리보기(첫마디 전, 아직 저장 안 됨) — 점선 테두리로 구분 */
.dim-prod.dim-prod-pending{border-style:dashed;border-color:#bcd0ff;background:#f8faff;}
.dim-prod-img{width:56px;height:56px;flex:0 0 56px;border-radius:8px;background:#f1f3f5 center/cover no-repeat;overflow:hidden;}
.dim-prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
.dim-prod-info{min-width:0;flex:1;}
.dim-prod-badge{display:inline-block;font-size:10px;font-weight:700;color:#2563EB;background:#eef2ff;border-radius:6px;padding:1px 6px;margin-bottom:3px;}
.dim-prod-name{font-size:13px;color:#222;line-height:1.35;max-height:2.7em;overflow:hidden;}
.dim-prod-price{font-size:14px;font-weight:800;color:#e8590c;margin-top:2px;}
.dim-prod-price span{font-size:12px;font-weight:600;color:#868e96;margin-left:4px;}