:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b7cff;
  --accent-contrast:#ffffff;
  --gap:12px;
  --radius:12px;
  --height:72px;
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;background:var(--bg);font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
#app{display:flex;gap:12px;padding:12px}
#sidebar{
  width:120px;
  min-width:120px;
  background:var(--card);
  border-radius:var(--radius);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
#room-name{font-weight:600}
#client-info{display:flex;flex-direction:column;align-items:center;gap:6px}
#client-info img{width:48px;height:48px;border-radius:50%}
#peers-list{display:flex;flex-direction:column;gap:8px; width:100%;overflow:auto;padding-right:6px}
.peer{display:flex;gap:8px;align-items:center;padding:6px;border-radius:8px;position:relative}
.peer img{width:28px;height:28px;border-radius:50%}
.peer .name{font-size:13px}

/* Hat overlay on peer avatars */
.peer .avatar-wrap{position:relative;display:inline-block}
.peer .hat{
  position:absolute;
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:50%;
  left:40%;
  top:0%;
  /* place the hat above the avatar (slightly overlapping the top) */
  transform:translate(-50%,-45%);
  z-index:9999;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
  pointer-events:none;
}
#main{flex:1;display:flex;flex-direction:column;gap:12px}
#messages{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));border-radius:var(--radius);padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.message{display:flex;gap:10px;align-items:flex-start}
/* Avatar + hat wrapper for message avatars */
.avatar-wrap{position:relative;display:inline-block}
.m-avatar{width:38px;height:38px;border-radius:50%;display:block}
.hat{
  position:absolute;
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:50%;
  left:50%;
  top:0%;
  /* place the hat above the avatar (slightly overlapping the top) */
  transform:translate(-50%,-45%);
  z-index:9999;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
  pointer-events:none;
}
.m-body{background:var(--card);padding:8px;border-radius:10px;max-width:70%;box-shadow:0 1px 0 rgba(0,0,0,0.04)}
.m-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.m-username{font-weight:600;margin-right:8px;color:#111827}
.m-text{white-space:pre-wrap}
.mention {
  color: #0b7cff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 4px;
  background: rgba(11,124,255,0.06);
}
#composer{height:var(--height);display:flex;gap:8px;align-items:center;background:transparent}
#composer input{flex:1;height:44px;padding:10px;border-radius:10px;border:1px solid #e6e7ea;background:white}
#composer button{height:44px;padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-contrast);font-weight:600}
#emoji-btn{width:44px;background:#fff;border:1px solid #e6e7ea}
@media (max-width:700px){
  #app{padding:10px}
  #sidebar{display:none}
  #messages{padding:10px}
}

/* Modal styles for mod menu */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.35);backdrop-filter:blur(2px)}
.modal-panel{position:relative;background:var(--card);border-radius:12px;padding:12px;width:520px;max-width:92%;box-shadow:0 10px 30px rgba(2,6,23,0.2)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.close-btn{border:0;background:transparent;font-size:16px;cursor:pointer}

/* Start modal styles (main menu) */
#start-modal { z-index:70; }
#start-modal .modal-panel { padding:14px; }
#start-modal input { width:100%; box-sizing:border-box; }

/* Flying asset visuals used by mod 'snap' */
.flying-asset {
  position:fixed;
  width:120px;
  height:auto;
  pointer-events:none;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(2,6,23,0.18);
  transform-origin:center;
  animation: float-around 4s linear infinite;
  will-change:transform, left, top, opacity;
  opacity:0.95;
}

/* subtle drifting animation */
@keyframes float-around {
  0% { transform: translateY(0) rotate(0deg) translateZ(0); }
  25% { transform: translateY(-18px) rotate(6deg) translateZ(0); }
  50% { transform: translateY(0) rotate(0deg) translateZ(0); }
  75% { transform: translateY(18px) rotate(-6deg) translateZ(0); }
  100% { transform: translateY(0) rotate(0deg) translateZ(0); }
}

/* Snapped overlay visuals */
.snapped-overlay {
  background: linear-gradient(135deg, rgba(5,6,8,0.9) 0%, rgba(190,12,12,0.6) 100%);
  mix-blend-mode: normal;
  animation: snapped-pulse 1.6s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make moderator modal wider but visually shorter with max-height + inner scrolling */
#mod-modal .modal-panel {
  width: 820px;
  max-width: 96%;
  max-height: 60vh;
  padding: 12px;
  overflow: auto;
  box-sizing: border-box;
  /* enable manual resize and ensure it's positioned for dragging */
  resize: both;
  min-width: 320px;
  min-height: 180px;
  position: fixed; /* allow left/top changes when dragging */
}

/* Ensure the header shows drag cursor when draggable */
#mod-modal .modal-header { cursor: move; }

/* small visual while dragging to hint movement */
#mod-modal .modal-panel.dragging { box-shadow: 0 18px 50px rgba(2,6,23,0.3); transform: translateZ(0); }

/* Ensure start modal keeps its separate sizing if present */
#start-modal .modal-panel {
  max-height: 80vh;
  overflow: visible;
}

/* Resize handles for modal-panel (four corners) */
#mod-modal .modal-panel {
  position: fixed; /* ensure fixed so handles position correctly */
  box-sizing: border-box;
}

/* corner handles */
#mod-modal .modal-panel .resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: transparent;
  z-index: 1001;
  touch-action: none;
}

/* place handles at corners */
#mod-modal .modal-panel .resize-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
#mod-modal .modal-panel .resize-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; transform: none; }
#mod-modal .modal-panel .resize-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
#mod-modal .modal-panel .resize-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }

/* make handles slightly visible on hover to aid discoverability on touch/desktop */
#mod-modal .modal-panel .resize-handle::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: rgba(0,0,0,0.02);
}
#mod-modal .modal-panel .resize-handle:hover::after {
  background: rgba(0,0,0,0.06);
}

.snapped-overlay .snapped-text {
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.6);
  pointer-events: none;
  padding: 24px 32px;
}

@keyframes snapped-pulse {
  0% { opacity: 0.0; transform: scale(0.98); }
  50% { opacity: 0.98; transform: scale(1.02); }
  100% { opacity: 0.0; transform: scale(0.98); }
}

/* AI Browser — Google-like styling for Activities panel */
.ai-google { display:none; width:100%; box-sizing:border-box; }
.ai-google .ai-google-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  background:#fff;
  padding:18px;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(2,6,23,0.06);
  width:100%;
}
.ai-google .ai-google-logo {
  font-weight:700;
  font-size:36px;
  letter-spacing:2px;
  display:flex;
  gap:2px;
  align-items:center;
}
.ai-google .ai-google-logo .g-g { color:#4285F4; }
.ai-google .ai-google-logo .g-o { color:#DB4437; }
.ai-google .ai-google-logo .g-o2 { color:#F4B400; }
.ai-google .ai-google-logo .g-g2 { color:#4285F4; }
.ai-google .ai-google-logo .g-l { color:#0F9D58; }
.ai-google .ai-google-logo .g-e { color:#DB4437; }

.ai-google-search { width:100%; max-width:720px; display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.ai-google-search input[type="text"] {
  width:100%;
  height:46px;
  padding:10px 14px;
  border-radius:24px;
  border:1px solid #e6e7ea;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
  font-size:16px;
  outline:none;
}
.ai-google-search input[type="text"]:focus { box-shadow:0 4px 20px rgba(11,124,255,0.12); border-color:#0b7cff; }

.ai-google-actions { display:flex; gap:8px; justify-content:flex-end; }
.ai-btn { padding:8px 12px; border-radius:8px; border:0; cursor:pointer; font-weight:700; }
.ai-cancel { background:#ef4444; color:#fff; }
.ai-search { background:#0b7cff; color:#fff; }

.ai-google-results { width:100%; max-width:720px; margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.ai-google-results .result-card {
  background:#fff;
  border:1px solid #eef2ff;
  padding:12px;
  border-radius:8px;
  box-shadow:0 4px 18px rgba(2,6,23,0.04);
}
.ai-google-results .result-card .title { font-weight:700; color:#1a0dab; margin-bottom:6px; }
.ai-google-results .result-card .snippet { color:#4b5563; font-size:14px; white-space:pre-wrap; }
.ai-google.hidden { display:none; }
.ai-google:not(.hidden) { display:flex; }