/* basic page styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 1.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html,
body,
main {
  height: 100%;
}

main {
  display: flex;
}

/* common ui elements */

button {
  border: none;
  user-select: none;
  cursor: pointer;
  transition: 0.15s ease;
}

button:active {
  transform: translateY(1px);
}

.icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: black;
}

.icon:hover {
  background-color: midnightblue;
}

/* toolbar styles */

.toolbar {
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: antiquewhite;
}

.toolbar-top,
.toolbar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* inbox styles */

.inbox {
  width: 30%;
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  background-color: aquamarine;
}

/* header */

.inbox-header {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inbox-header-buttons {
  display: flex;
  gap: 5px;
}

/* search */

.inbox-search {
  padding: 5px;
}

.inbox-search input {
  width: 100%;
  padding: 5px;
  font-size: 1.2rem;
  border-radius: 5px;
  border: 2px solid seagreen;
}

.inbox-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 0;
}

.inbox-search-filters button {
  border-radius: 5px;
  font-size: 0.8rem;
  padding: 2px 6px;
}

/* main */

.inbox-main {
  flex-grow: 1;
  padding: 5px;
}

.inbox-chat {
  display: flex;
  gap: 5px;
  font-size: 1rem;
}

.inbox-chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.inbox-chat-content,
.inbox-chat-meta {
  font-size: 0.8rem;
}

/* chatbox styles */

.chatbox {
  flex-grow: 1;
  background-color: lightblue;
}