/* idly — 대표 화면 위젯 스타일. founder.js 가 만드는 마크업만 다룬다.
   토큰은 index.html 의 것을 그대로 쓰고, 선·테두리·얇은 바는 두지 않는다.
   면을 나누는 것은 여백과 --ov 계단뿐이다. */

/* 결재함 --------------------------------------------------------------- */
.fa{
  display:grid;grid-template-columns:20px minmax(0,1fr) auto 52px;gap:0 8px;
  align-items:center;padding:var(--fapad,5px) 6px;margin:0 -6px;border-radius:4px;
  transition:background .18s var(--ease);
}
.fa:hover{background:var(--ov3)}
.fa img{width:20px;height:20px;border-radius:50%;object-fit:cover;display:block}
.fa .ttl{
  min-width:0;font-size:13px;font-weight:510;color:var(--paper);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fa .amt{
  font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums;
  text-align:right;min-width:74px;white-space:nowrap;
}
.fa .st{
  display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;justify-content:flex-end;
}
.fa .st i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--fog)}
.fa .st.a{color:var(--amber)}.fa .st.a i{background:var(--amber)}
.fa .st.g{color:var(--green)}.fa .st.g i{background:var(--green)}
.fa .st.f{color:var(--fog)}.fa .st.f i{background:var(--fog)}
.fa .st.r{color:var(--red)}.fa .st.r i{background:var(--red)}

/* 팀장 보고 ------------------------------------------------------------- */
.fr{
  display:grid;grid-template-columns:20px 40px minmax(0,1fr) auto;gap:0 8px;
  align-items:center;padding:var(--frpad,6px) 6px;margin:0 -6px;border-radius:4px;
  transition:background .18s var(--ease);
}
.fr:hover{background:var(--ov3)}
.fr img{width:20px;height:20px;border-radius:50%;object-fit:cover;display:block}
.fr .tm{font-size:12px;color:var(--fog);font-weight:590;white-space:nowrap}
.fr .tx{
  min-width:0;font-size:13px;color:var(--mist);word-break:keep-all;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fr .tx .d{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:6px;vertical-align:1px;background:var(--fog);
}
.fr .tx .d.g{background:var(--green)}
.fr .tx .d.a{background:var(--amber)}
.fr .tx .d.r{background:var(--red)}
.fr .tx .d.f{background:var(--smoke)}
.fr .t{font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
/* 후속 한 줄. 카드가 낮으면 #reports 에서 rich 가 빠지고 줄째로 사라진다. */
.fr .st{display:none;grid-column:3/-1;font-size:12px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.fr.rich{align-items:start}
.fr.rich img,.fr.rich .tm,.fr.rich .t{margin-top:1px}
.fr.rich .st{display:block}

/* AI 비서 --------------------------------------------------------------- */
/* 대화 줄은 메신저의 .ms 를 그대로 쓴다. 여기서는 아바타 자리 두 개만 덮어쓴다. */
.ms .bot.fc,.ms .bot.fu{
  font-size:11px;font-weight:590;letter-spacing:0;box-shadow:none;
  background:var(--ov5);color:var(--fog);
}
.ms .bot.fc{color:color-mix(in srgb,var(--lime) 70%,var(--paper))}
.ms .bot.fu{font-size:10px}
.ms .body .tx{display:block}

/* 대화 줄을 카드 폭 전체로 늘리면 짧은 답도 한 줄을 통째로 먹어 가운데가 빈다.
   글 길이에 맞는 풍선으로 줄이고 시각을 그 옆에 붙이면 같은 높이에 더 들어간다.
   질문과 답변 모두 왼쪽에서 시작한다. 오른쪽 정렬은 대화가 두 줄로 갈라져 밀도가 떨어진다. */
#assistant .ms{display:flex;align-items:flex-start;gap:8px}
#assistant .ms .bot{flex:none}
#assistant .ms .body{
  flex:0 1 auto;min-width:0;max-width:72%;
  background:var(--ov3);border-radius:6px;padding:4px 8px;
}
/* 대표 질문은 오른쪽, 비서 답변은 왼쪽이다. 둘 다 왼쪽에 붙이면 오른쪽 절반이 통째로 빈다.
   순서는 order 로만 바꾼다. 마크업은 답변 쪽과 같은 차례를 지켜야 판정 코드가 그대로 돈다. */
#assistant .ms.me{background:none;margin:0;padding-left:0;padding-right:0;justify-content:flex-end}
#assistant .ms.me .t{order:1}
#assistant .ms.me .body{order:2;background:color-mix(in srgb,var(--iris) 10%,transparent)}
#assistant .ms.me .bot{order:3}
#assistant .ms .t{flex:none;min-width:0;padding-top:6px}
/* 상태 행과 요약 행은 대화가 아니라 카드의 꼬리표다. 풍선을 씌우지 않고 왼쪽에 그대로 둔다. */
#assistant .ms.think .body{background:none;padding-left:0;padding-right:0;max-width:none}
/* 근거 줄. 답변이 어디서 나온 값인지 한 줄로 말한다. 문구는 assistant.json 에서만 온다. */
#assistant .ms .body .src{
  display:block;margin-top:3px;font-size:12px;color:var(--ash);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#assistant .ms .body .fb{margin-top:5px;background:var(--ov2)}
.fb{margin-top:6px;background:var(--ov2);border-radius:6px;padding:7px 9px;word-break:keep-all}
.fb .li{font-size:13px;color:var(--mist);padding-left:11px;position:relative;line-height:1.55}
.fb .li+.li{margin-top:2px}
.fb .li::before{content:"·";position:absolute;left:2px;color:var(--ash)}
.fb.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:baseline}
.fb.kv .k{font-size:12px;color:var(--ash);white-space:nowrap}
.fb.kv .v{
  font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 스트리밍 중에만 켜지는 카드 헤더 점. 라임은 이 한 자리에만 쓴다. */
.hd .fdot{
  width:6px;height:6px;border-radius:50%;background:var(--graphite);flex:none;
  transition:background .2s var(--ease);
}
.hd .fdot.on{background:var(--lime)}

/* 메일 ------------------------------------------------------------------ */
.fm{
  display:grid;grid-template-columns:7px minmax(0,auto) minmax(0,1fr) auto;gap:0 8px;
  align-items:baseline;padding:6px 6px;margin:0 -6px;border-radius:4px;
  transition:background .18s var(--ease);
}
/* 오른쪽 끝은 시각 하나뿐이다. 보낸 사람 열은 제 폭을 다 쓰되 minmax(0,auto) 라 줄어들 수는 있다.
   auto 로만 두면 nowrap 인 이름의 min-content 가 바닥이 되어 격자가 카드 밖으로 넘친다. */
.fm .dot,.fm .from,.fm .sub,.fm .t{grid-row:1}
.fm .dot{width:6px;height:6px;border-radius:50%;background:transparent;align-self:center}
.fm.u .dot{background:var(--iris)}
.fm .sub{display:flex;align-items:center;gap:5px}
.fm .sub .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm .clip{width:12px;height:12px;flex:none;color:var(--ash)}
/* 2층. 본문 첫 줄을 글자 크기 그대로 한 줄에 담고 넘치면 자른다. */
.fm.two{align-items:start}
.fm.two .dot{margin-top:5px}
.fm .pv{
  grid-column:2/-1;grid-row:2;margin-top:2px;
  font-size:12px;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fm:hover{background:var(--ov3)}
.fm .from{font-size:12px;color:var(--fog);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fm .sub{min-width:0;font-size:13px;color:var(--mist)}
.fm .t{font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.fm.u .from{color:var(--mist)}
.fm.u .sub{color:var(--paper);font-weight:590}

@media (prefers-reduced-motion: reduce){
  .fa,.fr,.fm,.hd .fdot{transition:none}
}

/* 비서 답변은 이름 아래 줄에서 시작한다. 한 줄에 두면 스트리밍 중 이름과 겹쳐 보인다. */
#assistant .ms .body .tx{display:block;word-break:keep-all}
#assistant .ms{align-items:start}
/* 상태 행. 점 세 개는 정적이고 깜박이지 않는다. */
#assistant .ms.think .tx{color:var(--ash)}
#assistant .ms.think .bot{opacity:.55}
/* 아바타는 한 줄 높이에 맞춰 20px 로 줄인다. 답 행이 질문 행과 같은 구조가 된다. */
#assistant .ms img,#assistant .ms .bot{width:20px;height:20px;margin-top:1px}
#assistant .ms{grid-template-columns:20px minmax(0,1fr) auto}
/* 최신 대화가 항상 바닥에 붙는다. 위로 넘치는 쌍은 fitChat 이 통째로 지운다. */
/* 자투리는 행 사이로만 흘려보낸다. 줄 높이와 글자 크기는 건드리지 않는다(founder.js evenOut). */
#assistant{display:flex;flex-direction:column;justify-content:flex-end;row-gap:var(--mgap,0px)}