.grot-entry { width:100%; text-align:left; color:var(--text); border:0; border-bottom:1px solid var(--divider); background:var(--card); font:inherit; cursor:pointer; }
.grot-entry .chat-avatar { background:var(--input); flex-shrink:0; }
.grot-badge { background:var(--accent); color:#000; border-radius:20px; min-width:24px; padding:4px; text-align:center; font-size:12px; }
.grot-panel { position:fixed; inset:0; z-index:200; background:var(--bg); color:var(--text); display:flex; flex-direction:column; width:min(100%,900px); margin:auto; height:100dvh; box-shadow:0 0 0 100vmax #0009; }
.grot-panel button { min-height:44px; padding:8px 12px; border:1px solid var(--divider); border-radius:10px; background:var(--input); color:var(--text); cursor:pointer; font:inherit; }
.grot-panel button:disabled { opacity:.5; cursor:default; }
.grot-panel button:focus-visible,.grot-panel textarea:focus-visible,.grot-panel summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.grot-top { display:flex; justify-content:space-between; gap:12px; padding:max(12px,env(safe-area-inset-top)) 16px 10px; background:var(--header); border-bottom:1px solid var(--divider); }
.grot-top h2 { font-size:20px; margin:0 0 4px; }
.grot-top p { color:var(--text2); font-size:12px; margin:0; }
.grot-privacy { padding:8px 16px; border-bottom:1px solid var(--divider); font-size:13px; max-height:30dvh; overflow:auto; flex-shrink:0; }
.grot-privacy summary { cursor:pointer; min-height:28px; }
.grot-privacy label { display:flex; align-items:center; min-height:44px; gap:8px; }
.grot-privacy input { width:22px; height:22px; flex-shrink:0; accent-color:var(--accent); }
.grot-privacy p { color:var(--text2); margin:8px 0; line-height:1.5; }
.grot-status { font-size:13px; color:var(--text2); padding:6px 16px; min-height:20px; }
.grot-status:empty { display:none; }
.grot-tools { display:flex; gap:8px; padding:4px 16px; }
.grot-tools button { font-size:12px; }
.grot-stream { flex:1; overflow:auto; min-height:80px; padding:12px 16px; overscroll-behavior:contain; }
.grot-message { background:var(--card); border:1px solid var(--divider); border-radius:14px; padding:12px; max-width:88%; width:fit-content; margin:0 0 12px; overflow-wrap:anywhere; }
.grot-message p { white-space:pre-wrap; line-height:1.5; margin:8px 0; }
.grot-message small { color:var(--text2); font-size:12px; display:block; }
.grot-message button { margin-top:8px; }
.grot-user { margin-left:auto; background:var(--input); }
.grot-event { border-left:3px solid var(--accent); }
.grot-welcome { color:var(--text2); line-height:1.6; max-width:560px; }
.grot-composer { display:flex; align-items:flex-end; gap:8px; padding:10px 16px max(10px,env(safe-area-inset-bottom)); background:var(--header); border-top:1px solid var(--divider); flex-shrink:0; }
.grot-composer textarea { flex:1; min-width:0; resize:none; border:1px solid var(--divider); border-radius:10px; background:var(--input); color:var(--text); font:inherit; font-size:16px; line-height:1.5; padding:10px; max-height:140px; }
.grot-composer button { background:var(--accent); color:#000; font-size:13px; }
@media(max-width:480px) { .grot-top { padding-left:12px; padding-right:12px; } .grot-top button { max-width:106px; font-size:12px; } .grot-composer { padding-left:10px; padding-right:10px; } .grot-composer button { max-width:106px; } .grot-message { max-width:94%; } }