/* ─────────────────────────────────────────────────────────────
   상단 계정 이름 옆 [AI 작업] 뱃지 + 목록 팝업
     마크업: /include/html/head.html, 동작: /include/js/aiJobs.js
     글자 크기는 AI 채팅의 작업 목록(#chatBox .chat-job-row)과 맞췄다.
   ───────────────────────────────────────────────────────────── */

/* 헤더가 flex 든 아니든(회사별 head.css 가 다르다) 이름 옆에 나란히 서도록 inline-flex */
.ai-jobs-wrap {
	position:relative;
	flex:0 0 auto;
	margin-left:8px;
	display:inline-flex;
	align-items:center;
	vertical-align:middle;
	line-height:1;
}

/* 뱃지 */
.ai-jobs-badge {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:4px;
	height:21px;
	min-width:26px;
	padding:0 7px;
	border:1px solid #cfe0f5;
	border-radius:11px;
	background:#eef5ff;
	color:#1b5f9e;
	font-size:11px;
	font-weight:700;
	line-height:1;
	cursor:pointer;
	white-space:nowrap;
	text-shadow:none;
	transition:background .15s ease, border-color .15s ease;
}
.ai-jobs-badge:hover  { background:#e2eeff; border-color:#b9d4f2; }
.ai-jobs-badge:focus  { outline:2px solid rgba(59,130,246,.35); outline-offset:1px; }
/* 건수가 없을 때(완료 상태) 빈 span 이 간격을 만들지 않도록 */
.ai-jobs-count:empty { display:none; }

/* 모두 끝난 상태 — 초록 체크 */
.ai-jobs-wrap.is-idle .ai-jobs-badge {
	border-color:#c9e7d4;
	background:#eaf7ef;
	color:#1e7a41;
}
.ai-jobs-wrap.is-idle .ai-jobs-badge:hover { background:#ddf1e5; border-color:#b3ddc4; }

/* 진행 표시 — 로딩 gif 대신 CSS 회전 링(같은 모양, 이미지 요청 없음) */
.ai-jobs-spin {
	width:11px;
	height:11px;
	flex:0 0 auto;
	border:2px solid rgba(31,141,214,.25);
	border-top-color:#1f8dd6;
	border-radius:50%;
	animation:aiJobsSpin .7s linear infinite;
}
.ai-jobs-wrap.is-idle .ai-jobs-spin { display:none; }
.ai-jobs-check { display:none; font-size:12px; line-height:1; }
.ai-jobs-wrap.is-idle .ai-jobs-check { display:inline-block; }
@keyframes aiJobsSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
	.ai-jobs-spin { animation-duration:2.4s; }
}

/* 팝업 */
.ai-jobs-pop {
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	width:520px;
	max-width:calc(100vw - 20px);
	max-height:calc(100vh - 76px);
	display:flex;
	flex-direction:column;
	background:var(--pt-surface-1,#fff);
	border:1px solid var(--pt-border,#d5dbe4);
	border-radius:7px;
	box-shadow:0 10px 26px rgba(20,32,48,.18);
	z-index:10000;
	text-align:left;
	cursor:default;
}
/* 회사별 헤더 스킨의 text-shadow 가 팝업 글자에까지 번지지 않게 한다 */
.ai-jobs-pop,
.ai-jobs-pop * { text-shadow:none; }
.ai-jobs-pop-head {
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:6px;
	padding:8px 10px;
	border-bottom:1px solid var(--pt-border-soft,#e2e7ed);
	font-size:11.5px;
	font-weight:700;
	color:var(--pt-text-strong,#1f2733);
}
.ai-jobs-pop-head .ai-jobs-pop-sub {
	margin-left:auto;
	font-size:10.5px;
	font-weight:400;
	color:var(--pt-text-muted,#98a2b3);
}
.ai-jobs-pop-body {
	flex:1 1 auto;
	overflow-y:auto;
	overscroll-behavior:contain;
}
.ai-jobs-empty {
	padding:18px 12px;
	text-align:center;
	font-size:11.5px;
	color:var(--pt-text-muted,#98a2b3);
}

/* 프로젝트 묶음 */
.ai-jobs-group + .ai-jobs-group { border-top:1px solid var(--pt-border-soft,#e2e7ed); }
.ai-jobs-group-head {
	position:sticky;
	top:0;
	z-index:1;
	display:flex;
	align-items:center;
	gap:5px;
	padding:5px 10px;
	background:var(--pt-surface-2,#f6f8fb);
	border-bottom:1px solid var(--pt-border-soft,#e2e7ed);
	font-size:10.5px;
	color:var(--pt-text-sub,#667085);
}
.ai-jobs-group-snum {
	flex:0 0 auto;
	padding:0 5px;
	border-radius:3px;
	background:var(--pt-surface-4,#eceff3);
	color:var(--pt-text-sub,#667085);
	font-weight:700;
	font-size:10px;
	line-height:15px;
}
.ai-jobs-group-name {
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-weight:700;
	color:var(--pt-text-strong,#1f2733);
}

/* 작업 한 줄 */
.ai-jobs-row {
	display:flex;
	align-items:flex-start;
	gap:8px;
	padding:8px 10px;
	border-bottom:1px solid var(--pt-border-soft,#eef1f5);
	cursor:pointer;
}
.ai-jobs-row:last-child { border-bottom:none; }
.ai-jobs-row:hover { background:var(--pt-surface-2,#f8f9fb); }
.ai-jobs-state {
	flex:0 0 auto;
	margin-top:1px;
	padding:1px 6px;
	border-radius:9px;
	font-size:10px;
	font-weight:700;
	line-height:14px;
	white-space:nowrap;
	background:var(--pt-surface-4,#eceff3);
	color:var(--pt-text-sub,#667085);
}
.ai-jobs-row.running   .ai-jobs-state { background:#e8f2ff; color:#1b5f9e; }
.ai-jobs-row.done      .ai-jobs-state { background:#e7f7ec; color:#1e7a41; }
.ai-jobs-row.error     .ai-jobs-state { background:#fdeaea; color:#a52a2a; }
.ai-jobs-row.cancelled .ai-jobs-state { background:#f1f2f4; color:#7a8290; }

.ai-jobs-main { flex:1 1 auto; min-width:0; }
.ai-jobs-title {
	font-size:11.5px;
	font-weight:600;
	color:var(--pt-text-strong,#1f2733);
	line-height:1.35;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.ai-jobs-sub {
	display:flex;
	gap:6px;
	align-items:center;
	margin-top:2px;
	font-size:10.5px;
	color:var(--pt-text-sub,#667085);
}
.ai-jobs-kind {
	flex:0 0 auto;
	padding:0 4px;
	border-radius:3px;
	background:var(--pt-surface-4,#eceff3);
	color:var(--pt-text-sub,#667085);
	font-size:9.5px;
	font-weight:700;
	line-height:14px;
}
.ai-jobs-stage { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-jobs-time  { flex:0 0 auto; margin-left:auto; color:var(--pt-text-muted,#98a2b3); }
.ai-jobs-history {
	margin-top:6px;
	padding:5px 7px;
	border:1px solid var(--pt-border-soft,#e2e7ed);
	border-radius:5px;
	background:var(--pt-surface-2,#f7f9fc);
}
.ai-jobs-history-row {
	display:grid;
	grid-template-columns:38px minmax(0,1fr);
	column-gap:8px;
	align-items:start;
	padding:3px 0;
	font-size:10px;
	line-height:1.5;
	color:var(--pt-text-sub,#667085);
}
.ai-jobs-history-row + .ai-jobs-history-row { border-top:1px solid var(--pt-border-soft,#edf0f4); }
.ai-jobs-history-progress {
	font-variant-numeric:tabular-nums;
	font-weight:600;
	text-align:right;
	color:#667085;
}
.ai-jobs-history-label {
	min-width:0;
	word-break:keep-all;
	overflow-wrap:anywhere;
}
.ai-jobs-history-row.is-current,
.ai-jobs-history-row.is-current .ai-jobs-history-progress { color:#1b5f9e; }
@media (max-width:560px) {
	.ai-jobs-pop { width:calc(100vw - 20px); }
}
.ai-jobs-bar {
	margin-top:4px;
	height:3px;
	border-radius:2px;
	background:var(--pt-surface-5,#e4e8ed);
	overflow:hidden;
}
.ai-jobs-bar > i { display:block; height:100%; background:#3b82f6; transition:width .3s ease; }
.ai-jobs-bar.is-idle { display:none; }

/* 줄마다 붙는 [취소] — 진행 중인 요청에만 나온다 */
.ai-jobs-cancel {
	flex:0 0 auto;
	align-self:center;
	margin:0;
	padding:2px 7px;
	border:1px solid var(--pt-border,#d5dbe4);
	border-radius:4px;
	background:var(--pt-surface-1,#fff);
	color:var(--pt-text-sub,#667085);
	font-size:10.5px;
	font-weight:700;
	line-height:15px;
	white-space:nowrap;
	cursor:pointer;
}
.ai-jobs-cancel:hover { border-color:#e2b4b4; background:#fdf2f2; color:#a52a2a; }
.ai-jobs-cancel:disabled { opacity:.55; cursor:default; }
.ai-jobs-cancel:disabled:hover { border-color:var(--pt-border,#d5dbe4); background:var(--pt-surface-1,#fff); color:var(--pt-text-sub,#667085); }

/* 다크 테마 (portal_theme) */
html:is(.pt-dark,.pt-auto) .ai-jobs-badge {
	border-color:rgba(59,130,246,.35);
	background:rgba(59,130,246,.16);
	color:#9dc6ff;
}
html:is(.pt-dark,.pt-auto) .ai-jobs-badge:hover { background:rgba(59,130,246,.26); }
html:is(.pt-dark,.pt-auto) .ai-jobs-wrap.is-idle .ai-jobs-badge {
	border-color:rgba(46,160,90,.35);
	background:rgba(46,160,90,.16);
	color:#8fd9ad;
}
html:is(.pt-dark,.pt-auto) .ai-jobs-spin { border-color:rgba(157,198,255,.25); border-top-color:#9dc6ff; }
html:is(.pt-dark,.pt-auto) .ai-jobs-row.running   .ai-jobs-state { background:rgba(59,130,246,.18); color:#9dc6ff; }
html:is(.pt-dark,.pt-auto) .ai-jobs-row.done      .ai-jobs-state { background:rgba(46,160,90,.18); color:#8fd9ad; }
html:is(.pt-dark,.pt-auto) .ai-jobs-row.error     .ai-jobs-state { background:rgba(220,80,80,.18); color:#f0a3a3; }
html:is(.pt-dark,.pt-auto) .ai-jobs-row.cancelled .ai-jobs-state { background:rgba(255,255,255,.08); color:#a9b1bd; }
html:is(.pt-dark,.pt-auto) .ai-jobs-kind { background:rgba(255,255,255,.08); color:#a9b1bd; }
html:is(.pt-dark,.pt-auto) .ai-jobs-history { background:rgba(255,255,255,.035); }
html:is(.pt-dark,.pt-auto) .ai-jobs-history-progress { color:#a9b1bd; }
html:is(.pt-dark,.pt-auto) .ai-jobs-history-row.is-current,
html:is(.pt-dark,.pt-auto) .ai-jobs-history-row.is-current .ai-jobs-history-progress { color:#8fc7f0; }
html:is(.pt-dark,.pt-auto) .ai-jobs-cancel {
	border-color:rgba(255,255,255,.18);
	background:rgba(255,255,255,.04);
	color:#c2c9d4;
}
html:is(.pt-dark,.pt-auto) .ai-jobs-cancel:hover { border-color:rgba(220,80,80,.45); background:rgba(220,80,80,.16); color:#f0a3a3; }