/* *** *** *** IMPORT *** *** *** */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

::-webkit-scrollbar { display: none }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-size: 16px !important;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}

textarea {
  width: 100%;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  border-radius: 0;
}

input {
  color: inherit;
  border: none;
  border-radius: 0;
}

input:focus { outline: none }

a {
  color: inherit;
  text-decoration: none;
}

svg { pointer-events: none }


button {
  border: none;
  background: none;
  cursor: pointer;
}


:root { --darker-orange: #DB5446 }

.favourite-panel {
  display: flex;
  flex-direction: column;
  z-index: 100;
  background: #303030;
  overflow: hidden;
}

section .favourite-panel .hero-view {
  background: var(--background-color-secondary);

  border-bottom: var(--border-70)
}


aside .favourite-panel .message {
  background-color: var(--background-35);
border: var(--border-70);
}

aside .favourite-panel .message:not(:last-child) { border: var(--border-70) }
section .favourite-panel { background-color: var(--background-color-primary) }

.favourite-panel .hero { 
  font-weight: 500;
  font-size: 16px;  
}

.favourite-limit { font-size: 12px }










/* ==== ==== CLASS MODIFIER ==== ==== */

.hidden { display: none !important }

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

.relative {
  display: flex;
  position: relative;
  flex-direction: column;
}

/* === === VISBILITY CLASSES === === */

.invisible {
  opacity: 0;
  position: absolute;
  will-change: opacity, position;
  pointer-events: none;
}

.visible {
  opacity: 1;
  position: relative;
}

/* === === LAYOUTS === === */

body, body > section {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

aside {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* ==== ==== HEADER ==== ==== */

.header {
  display: flex;
  align-items: center;
  flex-direction: row !important;
  justify-content: space-between;
  height: 70px;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 300;
}

.view-search, .view-favourite {
  --size : 42.5px;
  width: var(--size);
  height: var(--size);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-search svg, .view-favourite svg {
  --size : 18px;
  width: var(--size);
  height: var(--size);
}

.header-left, .header-right {
  position: relative;
  display: flex;
  align-items: center;
}

.header-right {
  margin-left: 10px;
  gap: 12px;
}

/* ==== ==== SEARCH DRAWER ==== ==== */

.search-drawer {
  width: 100%;
  gap: 0;
  padding: 1rem 1rem;
  align-items: center;
  display: flex;
}

.search {
  height: 45px;
  padding: 0 0.5rem;
  font-size: 1rem;
  flex: 1;
  min-width: 0;
  position: relative;
  border-left: none !important;
}

.search-drawer span {
  flex-shrink: 0;
  --size: 45px;
  width: var(--size);
  height: var(--size);
  position: relative;
}

.search-drawer span:first-child { border-radius: 4px 0 0 4px }
.search-drawer span:last-child { border-radius: 0 4px 4px 0 }
.search-drawer span:not(:first-child) { border-left: none !important }

/* === === PROFILE VIEWER === === */

.profile-viewer {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow: hidden;
  overflow-y: auto;
}

aside .profile-viewer {
  flex: 1 0 auto;
  width: 380px;
}

header .profile-viewer {
  min-width: 320px;
  border-radius: 6px;
  position: absolute;
  max-height: 400px;
  margin-top: 26px;
  top: 100%;
  z-index: 300;
  left: 0;
}

.profile-hero {
  justify-content: space-between !important;
  padding-right: 16px;
  font-size: 0.7rem;
}

.profile-hero .text {
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: 0.3rem;
}

.profile-viewer .hero {
  padding: 8px 16px;
  font-weight: 500;
  font-size: 14px;
}

.analytics { font-size: 0.7rem }

.insert-profile {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
}

.insert-profile .plus {
  flex-shrink: 0;
  border-radius: 10%;
  margin-right: 10px;
  font-size: 18px;
  width: 38px;
  height: 38px;
}

/* === === PROFILE MANAGEMENT === === */

.view-profile {
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 100;
}

aside .view-profile { padding: 1.72rem 1.35rem }

[data-style="profile-item"] {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
}

.profile-item-name {
  flex-grow: 1;
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.profile-avatar, .avatar {
  width: 38px;
  height: 38px;
  border-radius: 10%;
  font-weight: bold;
  flex-shrink: 0;
  cursor: pointer;
}

.profile-avatar { margin-right: 10px }
.header .avatar { margin-right: 8px }
.avatar { margin-right: 16px }

[data-ref="profile-username"] {
  font-weight: 500;
  font-size: 20px;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-ref="startEditProfile"] {
  color: inherit;
  font-weight: 500;
  font-size: 20px;
  background: transparent;
  width: 100%;
}

/* === === FAVOURITES === === */

.favourite-panel .hero-view { padding: 1rem 0.8rem }

.favourite-panel .hero-view {
  padding: 0.8rem;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.favourite-list {
  padding: 0.8rem;
  flex: 1;
  overflow-y: auto;
  border-radius: 4px 4px 0 0;
}

.favourite-panel .message {
  position: relative;
  flex-shrink: 0;
  border-radius: 4px;
  padding: 0.6rem;
}

section .favourite-panel .message {
  padding-bottom: 16px; 
  padding-top: 0.3rem; 
}

.jump-to-message {
  position: absolute;
  font-size: 0.55rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  display: none;
  top: 7px;
  right: 7px;
}

.message:hover .jump-to-message { display: flex }

section .jump-to-message {
  display: none !important;
  pointer-events: none !important;
}

section .favourite-panel {
  flex: 1;
  width: 100%;
}

aside .favourite-panel {
  height: 100%;
  width: 35vw;
}

/* === === MEDIA QUERIES === === */

aside { display: none }
header .profile-viewer { display: flex }

@media (min-width: 1024px) {
  aside { display: flex }
  header .profile-viewer { display: none }
  header .view-profile { display: none }
}

@media (min-width: 800px) {
  .header-right {
    margin: 0 !important;
    gap: 0 !important;
  }

  section .favourite-panel, .view-favourite { display: none !important }

  aside:has(.favourite-panel) { display: flex }
}

/* === === ARCHIVES === === */

.archives .heading {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.8rem 1rem;
}

/* === === QUICK CONTROLS === === */

.hover-context, .archive-context {
  position: absolute;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.75rem;
  pointer-events: none;
  padding-left: 12px;
  gap: 12px;
  right: 0;
  top: 0;
  display: none;
  align-items: center;
}

.archive-context, .hover-context:has(.edit-canvas) { 
  font-size: 0.71rem;
  padding-left: 8px;
}

.visible-viewer .message-content:hover .hover-context, 
.collapsible .message-content:hover .archive-context, 
.message .relative:hover .dropdown {
  display: flex; 
  pointer-events: auto; 
}

.message .dropdown::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 8px;
  border-width: 6px;
  border-style: solid;
  margin-left: 0;
}

.message .dropdown {
  position: absolute;
  top: 33.5px;
  left: -6px;
  z-index: 30;
  border-radius: 4px;
  font-size: 0.7rem;
  display: none;
  flex-direction: column;
  white-space: nowrap;
  pointer-events: none;
}

.message .dropdown .item { padding: 0.6rem 0.8rem }

/* === === MESSAGES === === */

.messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.message {
  flex: 1;
  position: relative;
  overflow: visible;
  display: flex;
  margin-bottom: 18px;
}

.message:not(:last-child) { padding-bottom: 14.5px }

.archives .message:last-child { margin-bottom: 0 }

.archives .collapsible, .visible-viewer { padding: 20px }

.message-header {
  display: flex;
  align-items: center;
}

.message-content { flex: 1 }

.username {
  font-weight: 500;
}

.timestamp {
  margin-left: 8px;
  font-size: 12px;
}

.message-content .drawing {
  font-size: 8.65px;
  border-radius: 4px;
  display: flex;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
  top: 13.25px;
  left: 0;
  position: absolute;
}

.is-edit {
  font-size: 10px;
  font-weight: normal;
  padding-left: 2.7px;
}

.message-text { position: relative; }

/* === === SYSTEM MESSAGE === === */

.system-message {
  margin: auto;
  padding: 20px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; 
}

.system-message img { width: 22.5px }

.system-message h3 {
  margin-bottom: 12px;
  display: flex;
  gap: 6.5px;
  align-items: center;
}

.system-message p { line-height: 1.5 }

.system-message ul {
  padding-left: 20px;
  margin: 8.6px 0;
  list-style-type: disc;
  white-space: normal;
}

.system-message li { margin-bottom: 8px }

.wave-emoji {
  cursor: pointer;
  transform-origin: 70% 70%;
  transition: transform 0.3s ease; 
}

.wave-emoji:hover { animation: wave 0.8s ease-in-out }

@keyframes wave {
  0%, 100% { transform: rotate(0deg) } 
  20% { transform: rotate(-15deg) } 
  40% { transform: rotate(20deg) }    
  60% { transform: rotate(-10deg) }  
  80% { transform: rotate(10deg) }    
}

/* === === MESSAGE DRAWER === === */

.message-drawer, .drawing-canvas {
  bottom: 80.5%;
  position: absolute;
  display: flex;
  border-radius: 6px 6px 0 0;
  width: var(--default-width);
  margin: 0 auto;
  z-index: 60;
}

body:has(.message-drawer.visible) .editor-viewer, body:not(:has(.message-drawer.invisible)) .editor-viewer, body:has(.drawing-canvas:not(.invisible)) .editor-viewer { border-radius: 0 0 6px 6px }

body:has(.message-drawer.visible) .contextual-toolbar, body:not(:has(.message-drawer.invisible)) .contextual-toolbar, body:has(.drawing-canvas:not(.invisible)) .contextual-toolbar { display: none }

[data-ref="JSON-handler"] { display: none }

/* === === DRAWING CANVAS === === */

.canvas {
  background-color: var(--background-color-tertiary);
  border-radius: 0 5px 0 0;
  cursor: crosshair;
  touch-action: none;
  height: 30vh !important;
  flex: 1 0 auto;
  width: 0px !important;
}

.drawing-canvas, .canvas, .categories { touch-action:  none }

.eraser.active .erase {
  display: flex
}

.eraser.active .brush, .eraser .erase {
  display: none
}

/* === === CATEGORIES === === */

.categories { 
  border-radius: 6px 0 0 0;
  flex: 1 0 auto;
  max-width: calc(45 / 16 * 1rem);
}

.image {
  --size: calc(45 / 16 * 1rem);
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
}

.image svg {
  --size: 20px;
  height: var(--size);
  width: var(--size);
}

/* === === SLASH COMMANDS === === */

.slash-viewer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: pre-wrap;
  flex: 1 0 auto;
}

.slash {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 14px 12px;
  flex: 1 0 auto;
}

.slash .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
}

.slash .content .hero {
  display: flex;
  gap: 0.5rem;
}

.slash .content .hero .divider {
  width: 1.1px;
  height: 18px;
}

.slash .content .hero strong { 
  font-weight: 500; 
  font-size: 0.95rem;
}

.slash .content .description { font-size: 0.9rem }
.slash .content .hero .category { font-size: 0.8rem }

/* === === CONTEXTUAL TOOLBAR === === */

.contextual-toolbar {
  position: absolute;
  z-index: 30;
  display: flex;
  left: 0;
  bottom: 83.5px;
}

.contextual-toolbar div {
  border-radius: 4px;
  padding: 0.55rem 0.6rem;
  line-height: 1;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  min-width: 0;
}

.contextual-toolbar sub, .contextual-toolbar span { font-family: 'Nunito', sans-serif }

.contextual-toolbar div span {
  font-size: 1.03rem;
  font-weight: 550;
  font-family: 'Nunito', sans-serif;
}

.contextual-toolbar sub {
  font-weight: bold;
  margin-top: 6px;
  font-size: 0.7rem;
}

.contextual-toolbar .divider, .hover-context .divider {
  width: 1.25px;
  height: 16px;
}

.contextual-toolbar svg {
  --size: 17.9px;
  width: var(--size);
  height: var(--size);
}

.contextual-toolbar .paragraph svg,
.contextual-toolbar .line-break svg { --size: 18.35px }

.contextual-toolbar .blockquote svg { --size: 15.71px }

/* === === EDITOR === === */

.panel {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 0;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.editor-viewer {
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 0;
  width: var(--default-width);
}

.editor-viewer .divider { 
  width: 1.5px;
  height: 20px;
}

.editor {
  max-height: 200px;
  font-size: 1rem;
  min-height: 0;
  padding: 0 8px;
} /* textarea */

.view-drawer, .forward, .discard, .update, .drawing {
  width: 50px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.view-drawer svg, .forward svg, .discard svg, .update svg {
  --size: 20px;
  width: var(--size);
  height: var(--size);
}

/* === === COLOR VARIABLES === === */

:root {
  /* BACKGROUND COLORS */
  --background-color-primary: #373737;
  --background-color-secondary: #303030;
  --background-color-tertiary: #272727;
  --background-color-quaternary: #202020;

  /* TEXT COLORS */
  --text-color-primary: #E2E2E2;
  --text-color-secondary: #BABABA;
  --text-color-tertiary: #9F9F9F;
  --text-color-quaternary: #808080;

  /* HOVER COLORS */
  --hover-background-color: #242424;

  /* BORDER COLORS */
  --border-70: 1px solid rgb(70, 70, 70);
  --border-50: 1px solid rgb(50, 50, 50);

  /* PROFILE AVATAR */
  --profile-avatar-background: #F2F2F2;
  --profile-avatar-text: #ADADAD;

  /* BRAND COLORS */
  --rubyn-orange: #E66255;

  --default-width: 92.25%; /* Used for inner elements */
}

/* === === BACKGROUND COLORS === === */

body, .messages, aside .favourite-panel .message { background-color: var(--background-color-primary) }

.archives, .panel, .view-favourite.active , .view-search.active, img.drawing-img { background-color: var(--background-color-secondary) }

.header, .search-drawer, .editor-viewer, .message-drawer, .contextual-toolbar div, .profile-viewer, .message .dropdown, .hover-context, .archive-context, aside .view-profile, .search-drawer span.active, .jump-to-message, .favourite-panel .hero-view, .message-content .drawing { background-color: var(--background-color-tertiary) }

.categories, .view-search, .view-favourite, .search-drawer span, .search { background-color: var(--background-color-quaternary) }

/* === === TEXT COLORS === === */

body, .editor, .delete-profile { color: var(--text-color-primary) }

.profile-viewer .hero, .slash .content .description, .archives .heading, .system-message p, .system-message li, .editor::placeholder, .insert-profile .plus { color: var(--text-color-secondary) }

.slash .content .hero .category, .timestamp, .is-edit, .profile-hero, .insert-profile, .favourite-limit { color: var(--text-color-tertiary) }

[data-style="profile-item"].active .delete-profile { color: var(--text-color-quaternary) }

/* === === HOVER COLORS === === */

[data-style="profile-item"].active, .slash:hover { background-color: var(--hover-background-color) }

/* === === BORDERS === === */

.slash, .categories, .dropdown .item:not(:last-child) { border-bottom: var(--border-50) }

aside:has(.favourite-panel) { border-left: var(--border-70) }

aside:has(.profile-viewer) { border-right: var(--border-70) }

.archives, .message:not(:last-child), .archives:has(.collapsible:not(.invisible)) .heading, section .favourite-panel .hero-view, section .favourite-panel { border-bottom: var(--border-70) }

aside .view-profile, .archives, .search-drawer, section .favourite-panel .hero-view { border-top: var(--border-70) }

.view-favourite.active , .view-search.active
 { border: var(--border-70) }

.search-drawer span:not(:first-child), .search-drawer span:first-child, .search { border: var(--border-50) }

/* === === OTHERS === === */

.profile-avatar, .avatar {
  background-color: var(--profile-avatar-background);
  color: var(--profile-avatar-text);
}

[data-style="profile-item"].active .profile-item-name { color: var(--rubyn-orange) }

.divider { background-color: rgb(80, 80, 80) }

.message .dropdown::before {
  border-color: transparent transparent var(--background-color-tertiary) transparent;
}