/* Chat attachment layout contract
   This file owns geometry and responsive behavior only.
   Do not add colors, shadows or theme typography here. */

.message-composer { position: relative; }
.chat-attachment-menu[hidden] { display: none !important; }

/* Opening the menu reserves real space in the chat flex layout. */
.chat-room.extras-open .message-composer.extras-open {
  position: relative !important;
  height: 126px !important;
  flex: 0 0 126px !important;
  margin: 6px 0 8px !important;
  padding: 0 7px 0 11px !important;
  grid-template-columns: 27px minmax(0, 1fr) 34px !important;
  grid-template-rows: 44px !important;
  align-content: end !important;
  align-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: height .22s ease, flex-basis .22s ease !important;
}

.chat-room.extras-open .message-composer.extras-open::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
}

.message-composer.extras-open > #openChatExtras,
.message-composer.extras-open > #messageInput,
.message-composer.extras-open > button[type="submit"] {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 1 !important;
}
.message-composer.extras-open > #openChatExtras { grid-column: 1 !important; }
.message-composer.extras-open > #messageInput { grid-column: 2 !important; }
.message-composer.extras-open > button[type="submit"] { grid-column: 3 !important; }

.message-composer.extras-open .chat-attachment-menu {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 18 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 58px !important;
  width: min(calc(100% - 12px), 520px) !important;
  height: 68px !important;
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 25% !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  transform: translateX(-50%) !important;
}

.message-composer.extras-open .chat-attachment-menu::-webkit-scrollbar {
  display: none;
}

.message-composer.extras-open .chat-attachment-menu > button {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 67px !important;
  height: 67px !important;
  display: grid !important;
  grid-template-rows: 18px 14px !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 6px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;
  scroll-snap-align: start;
}

.message-composer.extras-open .chat-attachment-menu > button + button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
}

.message-composer.extras-open .chat-attachment-menu > button span {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-composer.extras-open .chat-attachment-menu > button span::before {
  content: "";
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.message-composer.extras-open .chat-attachment-menu > button strong {
  display: block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.message-composer.extras-open .chat-attachment-menu > button small { display: none !important; }

/* Stable icon shapes ----------------------------------------------------- */
#chatChoosePhotos span::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='9' r='1.5' fill='black'/%3E%3Cpath d='m5.5 17 4.2-4 3.1 2.7 2.5-2.2 3.2 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='9' r='1.5' fill='black'/%3E%3Cpath d='m5.5 17 4.2-4 3.1 2.7 2.5-2.2 3.2 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#chatRecordVoice span::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='3' width='8' height='13' rx='4' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M9 21h6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='3' width='8' height='13' rx='4' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M9 21h6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
#chatBeautyCard span::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 13.8 9l5.7 1.8-5.7 1.8-1.8 5.7-1.8-5.7-5.7-1.8L10.2 9 12 3.5Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 13.8 9l5.7 1.8-5.7 1.8-1.8 5.7-1.8-5.7-5.7-1.8L10.2 9 12 3.5Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#chatOpenStickers span::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.1' fill='black'/%3E%3Ccircle cx='15' cy='10' r='1.1' fill='black'/%3E%3Cpath d='M8.3 14.2c1 1.1 2.2 1.7 3.7 1.7s2.7-.6 3.7-1.7' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.1' fill='black'/%3E%3Ccircle cx='15' cy='10' r='1.1' fill='black'/%3E%3Cpath d='M8.3 14.2c1 1.1 2.2 1.7 3.7 1.7s2.7-.6 3.7-1.7' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The close mark is geometric, not a rotated font glyph. */
.message-composer.extras-open > #openChatExtras {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}
.message-composer.extras-open > #openChatExtras::before,
.message-composer.extras-open > #openChatExtras::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
}
.message-composer.extras-open > #openChatExtras::before { transform: translate(-50%, -50%) rotate(45deg); }
.message-composer.extras-open > #openChatExtras::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 360px) {
  .message-composer.extras-open .chat-attachment-menu {
    width: calc(100% - 4px) !important;
  }
  .message-composer.extras-open .chat-attachment-menu > button {
    gap: 5px !important;
    padding: 4px 1px !important;
  }
}

@media (max-width: 330px) {
  .message-composer.extras-open .chat-attachment-menu > button span {
    width: 14px !important;
    height: 14px !important;
  }
}