:root{
--radius: 12px;
--info: #2563eb;
--success: #16a34a;
--warning: #d97706;
--error: #dc2626;
--muted: #64748b;
--ring: 0 0 0 3px color-mix(in oklab, var(--tone, #000) 20%, transparent);
}


/* Message base */
.pure-message{
	--tone:#334155; /* default */
	border:1px solid color-mix(in oklab, var(--tone) 25%, transparent);
	background: color-mix(in oklab, var(--tone) 7%, #ffffff);
	padding:14px 16px;
	/*border-radius: var(--radius);*/
	/*border-radius: 5px;*/
	border-radius: 0px;
	display: inline-block;
	border-left: 6px solid color-mix(in oklab, var(--tone) 25%, transparent);

	/* 進場動畫狀態 */
    opacity:0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
.full-message .pure-message { width: 100%; }
.tiny-message .pure-message {padding: 6px 12px;}
.pure-message .icon{ width:28px; aspect-ratio:1; border-radius: 999px; display:grid; place-items:center; font-weight:700; color:#fff; }
.pure-message .title{ margin:0; font-weight:700; }
.pure-message .desc{ margin:2px 0 0; color:var(--muted) }
.pure-message .actions{ display:flex; gap:8px; }
.pure-message li {margin-bottom: 5px;}

/* variants */
.is-info{ --tone: var(--info); }
.is-success{ --tone: var(--success); }
.is-warning{ --tone: var(--warning); }
.is-error{ --tone: var(--error); }

.is-info .icon{ background: var(--info); }
.is-success .icon{ background: var(--success); }
.is-warning .icon{ background: var(--warning); }
.is-error .icon{ background: var(--error); }


/* 顯示/離場 */
.pure-message.show{ opacity:1; transform: translateY(0); }
.pure-message.leaving{ opacity:0; transform: translateY(-6px); }


/* 關閉鈕 */
.msg-close{
position:absolute; top:18px; right:8px;
background:transparent; border:0; color:inherit;
font-size:20px; line-height:1; cursor:pointer; opacity:.65;
}
.msg-close:hover{ opacity:1; }
.pure-message:has(.msg-close){ position:relative; padding-right:36px; }