.guestbook{max-width:980px;margin:0 auto;padding:0}

:root{
	--gb-primary:#40739e;
	--gb-text:#e5e7eb;
	--gb-muted:rgba(255,255,255,.70);
	--gb-border:rgba(255,255,255,.10);
	--gb-soft:rgba(0,0,0,.18);
	--gb-bubble:rgba(0,0,0,.22);
	--gb-shadow:0 25px 70px rgba(0,0,0,0.55);
}

.gb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 12px}
.gb-title{margin:6px 0 12px;font-size:28px;line-height:1.15;color:var(--gb-text)}
.gb-subtitle{color:var(--gb-muted);margin-top:4px}

.gb-alert{border-radius:14px;padding:10px 12px;margin:12px 0;border:1px solid var(--gb-border);background:rgba(0,0,0,.18);color:var(--gb-text)}
.gb-alert--error{background:rgba(220,53,69,.08);border-color:rgba(220,53,69,.22)}

.gb-chat{border:1px solid var(--gb-border);background:rgba(0,0,0,.12);overflow:hidden;box-shadow:var(--gb-shadow)}

.gb-thread{max-height:70vh;overflow:auto;padding:18px 18px 12px;background:rgba(0,0,0,.10)}

/* Modern themed scrollbar (messages list) */
.gb-thread{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) rgba(0,0,0,.22)}
.gb-thread::-webkit-scrollbar{width:10px;height:10px}
.gb-thread::-webkit-scrollbar-track{background:rgba(0,0,0,.22);border-left:1px solid rgba(255,255,255,.06)}
.gb-thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px;border:2px solid rgba(0,0,0,.22)}
.gb-thread::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

.gb-msg{display:flex;gap:10px;align-items:flex-end;margin:10px 0;color:var(--gb-text)}

.gb-msg--me{flex-direction:row-reverse}
.gb-msg--me .gb-bubble__head{justify-content:flex-end}
.gb-msg--me .gb-time{margin-left:0}
.gb-msg--me .gb-site{display:none}

.gb-avatar{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;
	background:rgba(255,255,255,.06);border:1px solid var(--gb-border);color:var(--gb-text);flex:0 0 auto}
.gb-avatar--admin{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.25)}

.gb-bubble{position:relative;flex:0 1 auto;min-width:0;max-width:75%;background:var(--gb-bubble);border:1px solid rgba(255,255,255,.06);
	border-radius:18px;border-bottom-left-radius:0;padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.35)}

.gb-msg--me .gb-bubble{background:var(--gb-primary);border-color:rgba(120,57,238,.35);color:#fff;border-bottom-left-radius:18px;border-bottom-right-radius:0}

.gb-bubble__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:12px;color:rgba(255,255,255,.72)}
.gb-msg--me .gb-bubble__head{color:rgba(255,255,255,.86)}

.gb-name{font-weight:900}
.gb-site{opacity:.85;text-decoration:none;font-size:12px;color:inherit}
.gb-site:hover{text-decoration:underline}
.gb-time{margin-left:auto;opacity:.9;font-size:12px;white-space:nowrap}


.gb-del{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
	text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);
	opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease}
.gb-msg:hover .gb-del{opacity:1;pointer-events:auto}
.gb-del:hover{transform:scale(1.03);background:rgba(0,0,0,.55)}
.gb-msg--me .gb-del{right:auto;left:10px;background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.18)}
.gb-msg--me .gb-del:hover{background:rgba(0,0,0,.26)}

.gb-bubble__body{line-height:1.55;overflow-wrap:anywhere}

.gb-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:800}
.gb-badge--admin{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.30);color:rgba(17,24,39,.92)}

.gb-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0 0}
.gb-nav__item{min-width:38px;text-align:center;border-radius:12px;padding:8px 10px;border:1px solid var(--gb-border);
	text-decoration:none;color:var(--gb-text);background:rgba(0,0,0,.20)}
.gb-nav__item:hover{background:rgba(255,255,255,.06)}
.gb-nav__item.is-active{background:rgba(120,57,238,.10);border-color:rgba(120,57,238,.30);color:var(--gb-text)}

.gb-empty{color:var(--gb-muted);padding:8px 0;text-align:center}

.gb-compose{border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);padding:14px}

.gb-form{margin:0}
.gb-form__row{margin:10px 0}
.gb-form__row--as{color:var(--gb-muted)}
.gb-label{display:block;margin-bottom:6px;font-weight:800;color:var(--gb-text)}

.gb-input{box-sizing:border-box;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:var(--gb-text);padding:10px 12px;outline:none;width:100%}
.gb-input:focus{border-color:rgba(120,57,238,.35);box-shadow:0 0 0 4px rgba(120,57,238,.10)}

.gb-composer{position:relative}
.gb-input--msg{min-height:48px;max-height:140px;resize:none;overflow:auto;border-radius:999px;padding-right:108px}

.gb-iconbtn{position:absolute;right:58px;top:50%;transform:translateY(-50%);
	width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);color:var(--gb-text);cursor:pointer;font-size:18px;
	box-shadow:0 10px 24px rgba(0,0,0,.35)}
.gb-iconbtn:hover{background:rgba(0,0,0,.35)}

.gb-send{position:absolute;right:6px;top:50%;transform:translateY(-50%);
	width:44px;height:44px;border:none;border-radius:999px;background:var(--gb-primary);color:#fff;cursor:pointer;font-weight:900;
	box-shadow:0 12px 24px rgba(120,57,238,.26)}
.gb-send:hover{filter:brightness(1.05)}
.gb-send:active{transform:translateY(-50%) scale(.98)}
.gb-send__icon{font-size:16px;line-height:1}

.gb-emoji-panel{margin-top:10px;display:grid;grid-template-columns:repeat(10, 1fr);gap:6px;padding:10px;
	border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);box-shadow:0 18px 40px rgba(0,0,0,.55);
	width:340px;max-width:100%;margin-left:auto}
.gb-emoji-panel[hidden]{display:none !important;}

.gb-emoji__btn{
	-webkit-appearance:none;
	appearance:none;
	border:0;
	background:transparent;
	border-radius:10px;
	padding:6px 0;
	cursor:pointer;
	color:inherit;
	font-size:20px;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:32px;
}
.gb-emoji__btn:hover{background:rgba(255,255,255,.06)}
.gb-emoji__btn:focus-visible{outline:2px solid rgba(64,115,158,.55);outline-offset:2px}

.gb-form__row--captcha{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center}
.gb-captcha{display:inline-flex;align-items:center;justify-content:center}
.gb-captcha img{border-radius:12px;width:130px;height:46px;object-fit:cover;display:block}

@media (max-width: 640px){
	.gb-thread{max-height:none}
	.gb-bubble{max-width:86%}
	.gb-emoji-panel{grid-template-columns:repeat(8, 1fr)}
}