html, body {
  height: 100%;
  height: -webkit-fill-available;
}

body {
  margin: 0;
  overflow: hidden;
  min-height: 100dvh;

  font-family: sans-serif;

  background:
    linear-gradient(to bottom,
      #f7f3ee,
      #efe7db);

  color: #2f2a24;
}

.hidden {
  display: none !important;
}

/* CANVAS */

#lounge {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  display: block;

  touch-action: none;
  user-select: none;
}

/* TOOLBAR */

#toolbar {
  position: fixed;

  left: 50%;
  bottom: 16px;

  transform: translateX(-50%);

  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 10px;

  max-width: calc(100vw - 24px);

  overflow-x: auto;
  overflow-y: hidden;

  padding: 10px 14px;

  border-radius: 30px;

  background:
    rgba(255,255,255,0.55);

  backdrop-filter: blur(20px);

  border:
    1px solid rgba(255,255,255,0.4);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.14);

  scrollbar-width: none;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
	
  width: calc(100vw - 32px);
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;	
}

#toolbar::-webkit-scrollbar {
  display: none;
}

#toolbar {
  scrollbar-width: none;
}

/* collapsed */

#toolbar.collapsed {
  transform:
    translateX(-50%)
    translateY(140%);
}

/* sections */

.tool-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;

  flex-shrink: 0;
}

/* section content */

.section-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 8px;
}

/* buttons */

#toolbar button {
  border: none;

  border-radius: 18px;

  padding: 12px 16px;

  font-size: 14px;
  font-weight: 600;

  white-space: nowrap;
  
  width: max-content;
  
  background:
    rgba(255,255,255,0.72);

  color: #2f2a24;

  cursor: pointer;

  min-height: 48px;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.05);

  transition:
    transform 0.14s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#toolbar button:hover {
  background: rgba(255,255,255,0.95);

  transform:
    translateY(-4px)
    scale(1.03);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.12);
}

#toolbar button:active {
  transform: scale(0.96);
}

/* controls */

.tool-control,
.tool-block-1 {
  background:
    rgba(100,224,224,0.85);

  border-radius: 16px;

  padding: 10px;
}

.tool-block-2 {
  background:
    rgba(160,100,224,0.85);

  border-radius: 16px;

  padding: 10px;
}

.tool-block-3 {
  background:
    rgba(222,224,100,0.85);

  border-radius: 16px;

  padding: 10px;
}

.tool-block-4 {
  background:
    rgba(181,224,100,0.85);

  border-radius: 16px;

  padding: 10px;
}

.tool-block-5 {
  background:
    rgba(224,170,100,0.85);

  border-radius: 16px;

  padding: 10px;
}

.tool-block-6 {
  background:
    rgba(72,128,201,0.85);

  border-radius: 16px;

  padding: 10px;
}

.tool-block-1,
.tool-block-2,
.tool-block-3,
.tool-block-4,
.tool-block-5,
.tool-block-6 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;

  flex-wrap: nowrap;
}

.tool-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* titles */

.tool-title {
  font-size: 13px;
  font-weight: bold;
}

.tool-info {
  font-size: 11px;
  line-height: 1.3;

  color: #7b7168;
}

/* toggle button */

.toolbar-toggle {
  position: fixed;

  right: 15px;
  bottom: 5px;

  z-index: 9999;

  width: 52px;
  height: 52px;

  border: none;
  border-radius: 50%;

  background:
    rgba(255,255,255,0.85);

  backdrop-filter: blur(10px);

  box-shadow:
    0 4px 20px rgba(0,0,0,0.15);

  font-size: 20px;

  cursor: pointer;
}

.dock-upload {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  padding: 12px 16px;

  min-height: 42px;

  background:
    rgba(255,255,255,0.72);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  white-space: nowrap;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.05);

  transition:
    transform 0.14s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.dock-upload:hover {
  background: rgba(255,255,255,0.95);

  transform:
    translateY(-4px)
    scale(1.03);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.12);
}

.room-panel {
  position: fixed;

  top: 20px;
  right: 20px;

  z-index: 99999;

  width: 280px;

  padding: 16px;

  border-radius: 22px;

  background:
    rgba(255,255,255,0.82);

  backdrop-filter: blur(18px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);
}

.room-title {
  font-size: 16px;
  font-weight: bold;

  margin-bottom: 12px;
}

#roomLinkBox {
  width: 100%;

  padding: 10px;

  border: none;
  border-radius: 12px;

  box-sizing: border-box;

  background:
    rgba(255,255,255,0.8);
}

#presenceBar {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  z-index: 9999;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 2px solid #fff;
}

/* mobile */

@media (max-width: 700px) {

  #toolbar {
    gap: 10px;

    padding: 10px;

    border-radius: 22px;
  }

  .tool-section {
    min-width: 105px;
  }

  #toolbar button {
    font-size: 14px;
    padding: 10px;
  }

}