/* ATMI AI Chat + WhatsApp — gaya "tile bar": bingkai abu, kotak-kotak flat monokrom */
.atmi-cb{
	/* --cb-light & --cb-on-light diisi dari Pengaturan (inline style) */
	--cb-frame:#3d3d3d;        /* bingkai luar */
	--cb-tile-dark:#222222;    /* kotak hitam */
	--cb-tile:#2f2f2f;         /* kotak abu gelap */
	--cb-inset:rgba(255,255,255,.16); /* garis tipis di dalam kotak abu */
	--cb-light:#ebebeb;        /* kotak terang */
	--cb-on-light:#111111;     /* teks di kotak terang */
	--cb-text:#ececec;
	--cb-muted:#9a9a9a;
	--cb-online:#3ddc84;
	--cb-bar-h:72px;           /* tinggi bar bawah (kotak 62px + bingkai 5px x2) */
	--cb-font:'Inter','Helvetica Neue',system-ui,-apple-system,'Segoe UI',sans-serif;
	--cb-ease:cubic-bezier(.16,1,.3,1);
	position:fixed; z-index:2147483000;
	right:calc(var(--cb-x, 22px) + env(safe-area-inset-right, 0px));
	bottom:calc(var(--cb-y, 22px) + env(safe-area-inset-bottom, 0px));
	font-family:var(--cb-font);
	color:var(--cb-text);
	-webkit-font-smoothing:antialiased;
	transition:opacity .3s ease, visibility .3s;
}
.atmi-cb *{ box-sizing:border-box; }
.atmi-cb button{ font-family:inherit; }
.atmi-cb.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } /* pas popup All Projects kebuka */

/* ================= BAR BAWAH: [ T. ] [ Tanya AI ] [ WhatsApp ] ================= */
.atmi-cb-bar{
	display:flex; align-items:stretch; gap:5px;
	padding:5px; border-radius:14px;
	background:var(--cb-frame);
	box-shadow:0 18px 40px -16px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.18);
	animation:atmiCbIn .55s var(--cb-ease) .4s backwards;
}
.atmi-cb-tile{
	display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
	height:62px; margin:0 !important; padding:0 !important;
	border:0 !important; border-radius:9px !important; box-shadow:none !important;
	font-family:var(--cb-font) !important; font-size:14px !important; font-weight:500 !important; line-height:1 !important;
	letter-spacing:-.005em; white-space:nowrap; text-decoration:none !important; cursor:pointer;
	transition:background-color .2s ease, filter .2s ease, transform .15s ease;
}
.atmi-cb-tile:active{ transform:translateY(1px); }
.atmi-cb-tile:focus-visible{ outline:2px solid #fff !important; outline-offset:2px; }

/* kotak 1: huruf logo */
.atmi-cb-tile-mark{
	width:62px;
	background:var(--cb-tile-dark) !important; color:#fff !important;
	font-size:24px !important; font-weight:700 !important; letter-spacing:-.03em;
}
.atmi-cb-tile-mark:hover{ background:#2a2a2a !important; }

/* logo web (menggantikan huruf) */
.atmi-cb-logo{ display:block; max-width:72%; max-height:72%; width:auto; height:auto; object-fit:contain; pointer-events:none; }
.atmi-cb-tile-mark.has-logo{ padding:8px !important; }
.atmi-cb-tile-mark.is-light-bg{ background:var(--cb-light) !important; color:var(--cb-on-light) !important; }
.atmi-cb-tile-mark.is-light-bg:hover{ filter:brightness(.95); }

/* kotak 2: abu gelap + garis tipis di dalam */
.atmi-cb-tile-mid{ padding:5px !important; background:var(--cb-tile) !important; color:var(--cb-text) !important; }
.atmi-cb-mid-in{
	display:flex; align-items:center; justify-content:center; height:100%;
	padding:0 18px; border:1px solid var(--cb-inset); border-radius:6px;
	transition:border-color .2s ease, background-color .2s ease;
}
.atmi-cb-tile-mid:hover .atmi-cb-mid-in{ border-color:rgba(255,255,255,.34); }
.atmi-cb-lbl-close{ display:none; }
.atmi-cb.is-open .atmi-cb-lbl-open{ display:none; }
.atmi-cb.is-open .atmi-cb-lbl-close{ display:inline; }
.atmi-cb.is-open .atmi-cb-mid-in{ border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.04); }

/* kotak 3: terang */
.atmi-cb-tile-light{
	padding:0 22px !important;
	background:var(--cb-light) !important; color:var(--cb-on-light) !important;
	font-weight:600 !important;
}
.atmi-cb-tile-light svg{ width:16px; height:16px; flex:none; }
.atmi-cb-tile-light:hover{ filter:brightness(.95); }

/* ================= GELEMBUNG SAPAAN ================= */
.atmi-cb-teaser{
	position:absolute; right:0; bottom:calc(var(--cb-bar-h) + 10px);
	display:flex; align-items:center; gap:8px;
	width:max-content; max-width:min(270px, calc(100vw - 32px));
	padding:5px; border-radius:12px;
	background:var(--cb-frame);
	box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
	opacity:0; visibility:hidden; transform:translateY(8px); transform-origin:bottom right;
	transition:opacity .3s ease, transform .4s var(--cb-ease), visibility .3s;
}
.atmi-cb-teaser.is-show{ opacity:1; visibility:visible; transform:none; }
.atmi-cb.is-open .atmi-cb-teaser{ opacity:0; visibility:hidden; }
.atmi-cb-teaser-open{
	margin:0 !important; padding:12px 14px !important; border:0 !important; border-radius:8px !important;
	background:var(--cb-tile-dark) !important; color:var(--cb-text) !important; cursor:pointer;
	text-align:left; font-family:var(--cb-font) !important; font-size:13.5px !important; font-weight:500 !important; line-height:1.4 !important;
}
.atmi-cb-teaser-open:hover{ background:#2a2a2a !important; }
.atmi-cb-teaser-x{
	flex:none; display:inline-flex; align-items:center; justify-content:center;
	width:28px; height:28px; margin:0 3px 0 0 !important; padding:0 !important;
	border:1px solid var(--cb-inset) !important; border-radius:7px !important;
	background:var(--cb-tile) !important; color:var(--cb-muted) !important; cursor:pointer;
}
.atmi-cb-teaser-x:hover{ color:#fff !important; border-color:rgba(255,255,255,.34) !important; }
.atmi-cb-teaser-x svg{ width:11px; height:11px; }

/* ================= JENDELA CHAT ================= */
.atmi-cb-panel{
	position:absolute; right:0; bottom:calc(var(--cb-bar-h) + 10px);
	display:flex; flex-direction:column; gap:5px;
	width:380px; max-width:calc(100vw - 24px);
	/* gak pernah lebih tinggi dari layar dikurangi area header */
	height:min(600px, calc(100vh - var(--cb-top, 110px) - var(--cb-y, 22px) - var(--cb-bar-h) - 10px));
	padding:5px; border-radius:16px;
	background:var(--cb-frame);
	box-shadow:0 30px 70px -24px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.2);
	opacity:0; visibility:hidden; transform:translateY(12px); transform-origin:bottom right;
	transition:opacity .28s ease, transform .4s var(--cb-ease), visibility .28s;
}
@supports (height:100dvh){
	.atmi-cb-panel{ height:min(600px, calc(100dvh - var(--cb-top, 110px) - var(--cb-y, 22px) - var(--cb-bar-h) - 10px)); }
}
.atmi-cb.is-open .atmi-cb-panel{ opacity:1; visibility:visible; transform:none; }

/* header */
.atmi-cb-head{
	display:flex; align-items:center; gap:10px; flex:none;
	padding:8px; border-radius:10px;
	background:var(--cb-tile-dark);
}
.atmi-cb-mark{
	display:inline-flex; align-items:center; justify-content:center; flex:none;
	width:42px; height:42px; border-radius:8px;
	background:var(--cb-light); color:var(--cb-on-light);
	font-size:18px; font-weight:700; letter-spacing:-.03em; line-height:1;
}
.atmi-cb-mark.has-logo{ padding:6px; background:var(--cb-tile); border:1px solid var(--cb-inset); }
.atmi-cb-mark.has-logo.is-light-bg{ background:var(--cb-light); border-color:transparent; }
.atmi-cb-mark .atmi-cb-logo{ max-width:100%; max-height:100%; }
.atmi-cb-who{ display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.atmi-cb-who strong{ font-size:14px; font-weight:600; line-height:1.25; color:#fff; }
.atmi-cb-who small{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11.5px; line-height:1.3; color:var(--cb-muted); }
.atmi-cb-who small i{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--cb-online); }
.atmi-cb-head-wa, .atmi-cb-close{
	display:inline-flex !important; align-items:center; justify-content:center; flex:none;
	width:36px; height:36px; margin:0 !important; padding:0 !important;
	border:1px solid var(--cb-inset) !important; border-radius:8px !important;
	background:var(--cb-tile) !important; color:var(--cb-text) !important; cursor:pointer;
	text-decoration:none !important; box-shadow:none !important;
	transition:border-color .2s ease, color .2s ease;
}
.atmi-cb-head-wa svg{ width:16px; height:16px; }
.atmi-cb-close svg{ width:13px; height:13px; }
.atmi-cb-head-wa:hover, .atmi-cb-close:hover{ border-color:rgba(255,255,255,.4) !important; color:#fff !important; }

/* isi percakapan */
.atmi-cb-list{
	flex:1; overflow-y:auto; overscroll-behavior:contain;
	display:flex; flex-direction:column; gap:8px;
	padding:14px 12px; border-radius:10px;
	background:var(--cb-tile-dark);
}
.atmi-cb-list::-webkit-scrollbar{ width:8px; }
.atmi-cb-list::-webkit-scrollbar-thumb{ background:#444; border-radius:99px; border:2px solid var(--cb-tile-dark); }

.atmi-cb-msg{
	max-width:85%; padding:10px 12px;
	border-radius:9px; font-size:13.5px; line-height:1.55;
	word-wrap:break-word; overflow-wrap:anywhere;
	animation:atmiCbMsg .3s var(--cb-ease) backwards;
}
.atmi-cb-msg.is-bot{ align-self:flex-start; background:var(--cb-tile); color:var(--cb-text); border:1px solid var(--cb-inset); }
.atmi-cb-msg.is-user{ align-self:flex-end; background:var(--cb-light); color:var(--cb-on-light); font-weight:500; }

.atmi-cb-wa-cta{
	display:inline-flex !important; align-items:center; gap:7px; margin-top:10px;
	padding:9px 13px !important; border-radius:7px !important;
	background:var(--cb-light) !important; color:var(--cb-on-light) !important; text-decoration:none !important;
	font-size:12.5px !important; font-weight:600 !important; line-height:1.2 !important;
	transition:filter .2s ease;
}
.atmi-cb-wa-cta svg{ width:15px; height:15px; }
.atmi-cb-wa-cta:hover{ filter:brightness(.94); }
.atmi-cb-debug{
	margin-top:8px; padding:6px 8px; border-radius:6px;
	background:rgba(245,185,113,.08); border:1px dashed rgba(245,185,113,.35);
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; line-height:1.45;
	color:#f5b971; word-break:break-word;
}

/* titik-titik "sedang mengetik" */
.atmi-cb-typing{ display:inline-flex; gap:5px; padding:13px 14px; }
.atmi-cb-typing span{ width:6px; height:6px; border-radius:50%; background:#8a8a8a; animation:atmiCbDot 1.2s ease-in-out infinite; }
.atmi-cb-typing span:nth-child(2){ animation-delay:.15s; }
.atmi-cb-typing span:nth-child(3){ animation-delay:.3s; }

/* bawah: pilihan cepat + kolom ketik */
.atmi-cb-bottom{ flex:none; padding:8px; border-radius:10px; background:var(--cb-tile-dark); }
.atmi-cb-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.atmi-cb-chips::-webkit-scrollbar{ display:none; }
.atmi-cb-chip{
	flex:none; margin:0 !important; padding:8px 12px !important;
	border:1px solid var(--cb-inset) !important; border-radius:7px !important;
	background:var(--cb-tile) !important; color:var(--cb-text) !important; cursor:pointer;
	font-family:var(--cb-font) !important; font-size:12.5px !important; font-weight:500 !important; line-height:1.2 !important; white-space:nowrap;
	transition:border-color .2s ease, color .2s ease;
}
.atmi-cb-chip:hover{ border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
.atmi-cb-chip:disabled{ opacity:.45; cursor:default; }

.atmi-cb-form{ display:flex; align-items:flex-end; gap:6px; margin:0; }
.atmi-cb-input{
	flex:1; min-height:44px; max-height:110px; resize:none; margin:0;
	padding:12px 14px !important; border:1px solid var(--cb-inset) !important; border-radius:8px !important;
	background:var(--cb-tile) !important; color:var(--cb-text) !important; box-shadow:none !important;
	font-family:var(--cb-font) !important; font-size:13.5px !important; line-height:1.4 !important; outline:none;
	overflow:hidden; scrollbar-width:thin;
	transition:border-color .2s ease;
}
.atmi-cb-input::placeholder{ color:#7c7c7c; }
.atmi-cb-input:focus{ border-color:rgba(255,255,255,.45) !important; }
.atmi-cb-send{
	display:inline-flex !important; align-items:center; justify-content:center; flex:none;
	width:44px; height:44px; margin:0 !important; padding:0 !important;
	border:0 !important; border-radius:8px !important;
	background:var(--cb-light) !important; color:var(--cb-on-light) !important; cursor:pointer;
	transition:filter .2s ease, opacity .2s ease, transform .15s ease;
}
.atmi-cb-send svg{ width:17px; height:17px; margin-left:2px; }
.atmi-cb-send:hover{ filter:brightness(.94); }
.atmi-cb-send:active{ transform:translateY(1px); }
.atmi-cb-send:disabled{ opacity:.4; cursor:default; }
.atmi-cb-note{ margin:8px 0 0; padding:0 4px; font-size:10.5px; line-height:1.4; color:var(--cb-muted); text-align:center; }

/* ================= ANIMASI ================= */
@keyframes atmiCbIn{ from{ opacity:0; transform:translateY(12px); } }
@keyframes atmiCbMsg{ from{ opacity:0; transform:translateY(5px); } }
@keyframes atmiCbDot{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-3px); opacity:1; } }

/* ================= MOBILE ================= */
@media (max-width:600px){
	.atmi-cb{ --cb-bar-h:66px; }
	.atmi-cb-tile{ height:56px; font-size:13px !important; }
	.atmi-cb-tile-mark{ width:56px; font-size:21px !important; }
	.atmi-cb-mid-in{ padding:0 13px; }
	.atmi-cb-tile-light{ padding:0 16px !important; }
	.atmi-cb-panel{
		position:fixed; left:8px; right:8px; width:auto; max-width:none;
		bottom:calc(var(--cb-y, 22px) + var(--cb-bar-h) + 10px + env(safe-area-inset-bottom, 0px));
		height:min(620px, calc(100vh - var(--cb-top-m, 76px) - var(--cb-y, 22px) - var(--cb-bar-h) - 10px));
	}
	@supports (height:100dvh){
		.atmi-cb-panel{ height:min(620px, calc(100dvh - var(--cb-top-m, 76px) - var(--cb-y, 22px) - var(--cb-bar-h) - 10px)); }
	}
	.atmi-cb-input{ font-size:16px !important; } /* biar iPhone gak auto-zoom */
}
@media (max-width:360px){
	.atmi-cb-tile-light svg{ display:none; }
}
@media (prefers-reduced-motion:reduce){
	.atmi-cb-bar, .atmi-cb-msg, .atmi-cb-typing span{ animation:none !important; }
	.atmi-cb *{ transition:none !important; }
}
@media print{ .atmi-cb{ display:none !important; } }