/* Theme: A × C / Whitespace
   Scope: attachment-menu appearance only.
   Geometry lives in ../attachments-layout.css. */

.chat-room {
  --chat-tools-surface: #fff;
  --chat-tools-ink: #4b4b47;
  --chat-tools-icon: #55554f;
  --chat-tools-muted: rgba(86, 86, 80, .48);
  --chat-tools-line: #e3e3df;
  --chat-tools-divider: rgba(121, 121, 115, .18);
  --chat-tools-shadow: 0 10px 28px rgba(35, 35, 32, .07);
  --chat-composer-line: #d4d4d0;
  --chat-composer-shadow: 0 7px 22px rgba(35, 35, 32, .07);
}

.chat-room.extras-open .message-composer.extras-open::before {
  border: 1px solid var(--chat-composer-line);
  border-radius: 22px;
  background: var(--chat-tools-surface);
  box-shadow: var(--chat-composer-shadow);
}

.message-composer.extras-open .chat-attachment-menu {
  border: 1px solid var(--chat-tools-line) !important;
  border-radius: 14px !important;
  background: var(--chat-tools-surface) !important;
  box-shadow: var(--chat-tools-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: chat-tools-enter .2s cubic-bezier(.2,.75,.25,1) both;
}

.message-composer.extras-open .chat-attachment-menu > button {
  border-radius: 0 !important;
  color: var(--chat-tools-ink) !important;
  box-shadow: none !important;
  transition: color .16s ease, opacity .16s ease !important;
}

.message-composer.extras-open .chat-attachment-menu > button + button::before {
  background: var(--chat-tools-divider);
}

.message-composer.extras-open .chat-attachment-menu > button span::before {
  background: var(--chat-tools-icon) !important;
  opacity: .9;
}

.message-composer.extras-open .chat-attachment-menu > button strong {
  color: inherit !important;
  font: 500 10px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif !important;
  letter-spacing: .02em !important;
}

.message-composer.extras-open .chat-attachment-menu > button strong::before {
  margin-right: 5px;
  color: var(--chat-tools-muted);
  font: 400 8px/1 Georgia, serif;
  letter-spacing: 0;
}

.message-composer.extras-open .chat-attachment-menu > button:nth-child(1) strong::before { content: "01"; }
.message-composer.extras-open .chat-attachment-menu > button:nth-child(2) strong::before { content: "02"; }
.message-composer.extras-open .chat-attachment-menu > button:nth-child(3) strong::before { content: "03"; }
.message-composer.extras-open .chat-attachment-menu > button:nth-child(4) strong::before { content: "04"; }

.message-composer.extras-open .chat-attachment-menu > button:active {
  color: #171715 !important;
  opacity: .45;
}

@keyframes chat-tools-enter {
  from { opacity: 0; transform: translate(-50%, 7px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 360px) {
  .message-composer.extras-open .chat-attachment-menu > button strong {
    font-size: 9px !important;
  }
}

@media (max-width: 330px) {
  .message-composer.extras-open .chat-attachment-menu > button strong {
    font-size: 8px !important;
  }
  .message-composer.extras-open .chat-attachment-menu > button strong::before {
    margin-right: 3px;
    font-size: 7px;
  }
}