/* 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-panel, .atmi-cb-input{ overscroll-behavior:contain; }
.atmi-cb-chips{ display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; 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; }

/* =====================================================================
   GAYA TAMPILAN (skin) — dipilih di Pengaturan, dipasang sebagai class
   .atmi-skin-tile (bawaan) | -pill | -rail | -tab | -minimal
   Selain "tile", semuanya hitam putih.
   ===================================================================== */
.atmi-cb-wa-ico{ display:inline-flex; }
.atmi-cb-arrow{ display:none; }

.atmi-skin-pill, .atmi-skin-rail, .atmi-skin-tab, .atmi-skin-minimal{
	--cb-frame:#000000;
	--cb-tile-dark:#000000;
	--cb-tile:#101010;
	--cb-inset:rgba(255,255,255,.22);
	--cb-text:#f2f2f2;
	--cb-muted:#9b9b9b;
	--cb-online:#ffffff;
}
.atmi-skin-pill .atmi-cb-panel, .atmi-skin-rail .atmi-cb-panel,
.atmi-skin-tab .atmi-cb-panel, .atmi-skin-minimal .atmi-cb-panel{ border:1px solid rgba(255,255,255,.16); }

/* ---------- PILL NAV: bar hitam membulat + tombol putih ---------- */
.atmi-skin-pill .atmi-cb-bar{ padding:8px; border-radius:999px; }
.atmi-skin-pill .atmi-cb-tile{ height:56px; border-radius:999px !important; }
.atmi-skin-pill .atmi-cb-tile-mark{ width:56px; background:transparent !important; }
.atmi-skin-pill .atmi-cb-tile-mark:hover{ background:rgba(255,255,255,.12) !important; }
.atmi-skin-pill .atmi-cb-tile-mid{ padding:0 !important; background:transparent !important; }
.atmi-skin-pill .atmi-cb-mid-in{
	padding:0 14px; border:0; border-radius:999px;
	font-size:15px; font-weight:600; letter-spacing:-.01em;
}
.atmi-skin-pill .atmi-cb-tile-mid:hover .atmi-cb-mid-in{ background:rgba(255,255,255,.12); }
.atmi-skin-pill.is-open .atmi-cb-mid-in{ background:rgba(255,255,255,.12); border-color:transparent; }
.atmi-skin-pill .atmi-cb-tile-light{ gap:14px; padding:0 20px 0 24px !important; font-size:15px !important; }
.atmi-skin-pill .atmi-cb-wa-ico{ display:none; }
.atmi-skin-pill .atmi-cb-arrow{ display:block; width:20px; height:20px; transition:transform .25s var(--cb-ease); }
.atmi-skin-pill .atmi-cb-tile-light:hover{ filter:none; background:#dcdcdc !important; }
.atmi-skin-pill .atmi-cb-tile-light:hover .atmi-cb-arrow{ transform:translateX(4px); }

/* ---------- SIDE RAIL & EDGE TAB: menempel di tepi kanan, tengah layar ---------- */
.atmi-skin-rail, .atmi-skin-tab{
	right:0; top:0; bottom:0;
	display:flex; align-items:center;
	pointer-events:none;
}
.atmi-skin-rail > *, .atmi-skin-tab > *{ pointer-events:auto; }
.atmi-skin-rail .atmi-cb-bar, .atmi-skin-tab .atmi-cb-bar{ flex-direction:column; align-items:stretch; }
.atmi-skin-rail .atmi-cb-tile, .atmi-skin-tab .atmi-cb-tile{ flex:none; height:auto; width:auto; }
.atmi-skin-rail .atmi-cb-wa-txt, .atmi-skin-tab .atmi-cb-wa-txt{ display:none; }

/* tulisan tegak, dibaca dari bawah ke atas */
.atmi-skin-rail .atmi-cb-mid-in, .atmi-skin-tab .atmi-cb-mid-in{
	writing-mode:vertical-rl; transform:rotate(180deg);
	width:auto; height:auto;
}

/* jendela chat & gelembung sapaan pindah ke kiri strip */
.atmi-skin-rail .atmi-cb-panel, .atmi-skin-tab .atmi-cb-panel{
	right:calc(100% + 12px); bottom:auto; top:50%;
	transform:translate(10px, -50%); transform-origin:right center;
	height:min(600px, calc(100vh - 2 * var(--cb-y, 22px)));
}
@supports (height:100dvh){
	.atmi-skin-rail .atmi-cb-panel, .atmi-skin-tab .atmi-cb-panel{ height:min(600px, calc(100dvh - 2 * var(--cb-y, 22px))); }
}
.atmi-skin-rail.is-open .atmi-cb-panel, .atmi-skin-tab.is-open .atmi-cb-panel{ transform:translateY(-50%); }
.atmi-skin-rail .atmi-cb-teaser, .atmi-skin-tab .atmi-cb-teaser{
	right:calc(100% + 12px); bottom:auto; top:50%;
	transform:translate(8px, -50%); transform-origin:right center;
}
.atmi-skin-rail .atmi-cb-teaser.is-show, .atmi-skin-tab .atmi-cb-teaser.is-show{ transform:translateY(-50%); }

/* SIDE RAIL: strip hitam (logo + tulisan tegak + kotak putih) */
.atmi-skin-rail .atmi-cb-bar{ width:68px; padding:6px; border-radius:12px 0 0 12px; }
.atmi-skin-rail .atmi-cb-tile-mark{ height:56px; }
/* kotak garis ikut lebar strip (bukan cuma selebar tulisan) biar tulisan gak mepet garis */
.atmi-skin-rail .atmi-cb-mid-in{ width:100%; padding:24px 0; }
.atmi-skin-rail .atmi-cb-tile-light{ height:56px; padding:0 !important; }
.atmi-skin-rail .atmi-cb-tile-light svg{ width:19px; height:19px; }

/* EDGE TAB: tab putih + tab hitam, tanpa bingkai */
.atmi-skin-tab .atmi-cb-bar{ gap:4px; padding:0; background:transparent; box-shadow:none; }
.atmi-skin-tab .atmi-cb-tile-mark{ display:none !important; }
.atmi-skin-tab .atmi-cb-tile-mid{
	padding:0 !important; border-radius:10px 0 0 0 !important;
	background:#ffffff !important; color:#000000 !important;
	box-shadow:0 10px 30px -12px rgba(0,0,0,.6) !important;
}
.atmi-skin-tab .atmi-cb-mid-in{
	padding:26px 13px; border:0;
	font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.atmi-skin-tab .atmi-cb-tile-mid:hover{ background:#e2e2e2 !important; }
.atmi-skin-tab.is-open .atmi-cb-mid-in{ background:transparent; border-color:transparent; }
.atmi-skin-tab .atmi-cb-tile-light{
	padding:15px 13px !important; border-radius:0 0 0 10px !important;
	background:#000000 !important; color:#ffffff !important;
	box-shadow:0 10px 30px -12px rgba(0,0,0,.6) !important;
}
.atmi-skin-tab .atmi-cb-tile-light svg{ width:18px; height:18px; }
.atmi-skin-tab .atmi-cb-tile-light:hover{ filter:none; background:#1c1c1c !important; }

/* ---------- MINIMAL: dua tombol bulat ---------- */
.atmi-skin-minimal{ --cb-bar-h:118px; }
.atmi-skin-minimal .atmi-cb-bar{
	flex-direction:column-reverse; align-items:flex-end; gap:10px;   /* tombol utama di bawah */
	padding:0; background:transparent; box-shadow:none;
}
.atmi-skin-minimal .atmi-cb-tile-mid{ display:none !important; }
.atmi-skin-minimal .atmi-cb-wa-txt{ display:none; }
.atmi-skin-minimal .atmi-cb-tile-light{
	width:46px; height:46px; padding:0 !important; border-radius:999px !important;
	box-shadow:0 12px 28px -12px rgba(0,0,0,.55) !important;
}
.atmi-skin-minimal .atmi-cb-tile-light svg{ width:19px; height:19px; }
.atmi-skin-minimal .atmi-cb-tile-mark{
	width:62px; height:62px; border-radius:999px !important;
	box-shadow:0 16px 34px -14px rgba(0,0,0,.6) !important;
}
.atmi-skin-minimal .atmi-cb-tile-mark.has-logo{ padding:14px !important; }
.atmi-skin-minimal.is-open .atmi-cb-tile-mark{ box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 16px 34px -14px rgba(0,0,0,.6) !important; }

/* ================= 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 */

	/* gaya tampilan di layar kecil */
	.atmi-skin-pill .atmi-cb-tile{ height:52px; }
	.atmi-skin-pill .atmi-cb-tile-mark{ width:52px; }
	.atmi-skin-pill .atmi-cb-mid-in{ padding:0 10px; font-size:14px; }
	.atmi-skin-pill .atmi-cb-tile-light{ gap:10px; padding:0 16px 0 18px !important; font-size:14px !important; }
	.atmi-skin-minimal{ --cb-bar-h:108px; }
	.atmi-skin-rail .atmi-cb-tile-mark, .atmi-skin-rail .atmi-cb-tile-light{ height:52px; }
	.atmi-skin-rail .atmi-cb-bar{ width:60px; }
	.atmi-skin-rail .atmi-cb-mid-in{ padding:20px 0; font-size:13px !important; }
	.atmi-skin-tab .atmi-cb-mid-in{ padding:22px 11px; font-size:11px; }
	.atmi-skin-rail .atmi-cb-panel, .atmi-skin-tab .atmi-cb-panel{
		left:8px; right:8px; width:auto; max-width:none;
		top:auto; bottom:calc(var(--cb-y, 22px) + 10px + env(safe-area-inset-bottom, 0px));
		height:min(620px, calc(100vh - var(--cb-top-m, 76px) - 2 * var(--cb-y, 22px)));
		transform:translateY(12px); transform-origin:bottom right;
	}
	@supports (height:100dvh){
		.atmi-skin-rail .atmi-cb-panel, .atmi-skin-tab .atmi-cb-panel{ height:min(620px, calc(100dvh - var(--cb-top-m, 76px) - 2 * var(--cb-y, 22px))); }
	}
	.atmi-skin-rail.is-open .atmi-cb-panel, .atmi-skin-tab.is-open .atmi-cb-panel{ transform:none; }
	/* strip/tab disembunyikan saat chat terbuka supaya gak menutupi isi chat (tutup lewat X di header) */
	.atmi-skin-rail.is-open .atmi-cb-bar, .atmi-skin-tab.is-open .atmi-cb-bar{ opacity:0; visibility:hidden; pointer-events:none; }
	.atmi-skin-rail .atmi-cb-teaser, .atmi-skin-tab .atmi-cb-teaser{ right:calc(100% + 8px); bottom:16px; max-width:min(230px, calc(100vw - 80px)); }
}
@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; } }