:root {
  --ul-color: #bbc28c;
  --gg-color: #fc99fe;
  --back-line-transparency: 15%
}

.message {
    display: grid; 
    grid-template-columns: 0.14fr 1fr; 
    /* grid-gap: 20px;  */
    /* border: 1px solid black;  */
    /* width: 75%;  */
    margin: 20px;
}

.message .picture-frame {
    width: 92px;
    height: 92px;

    /* box-shadow: 0 0 15px var(--cyberpunk-yellow); */
    /* border: 2px solid var(--cyberpunk-yellow); */
    /* margin-top: 10px; */
}

.message .picture-frame img{
    width: 100%;
    height: 100%;
    display: block;
    border: 0px;
}

.message .picture-frame .title {
    text-align: center;
    /* text-transform: capitalize; */

    color: var(--cyberpunk-yellow);
}

.message .text::after {
    content: attr(data-name);
    display: block;
    transform: rotate(-90deg);
    bottom: 5px;
    /* right: -36px; */
    left: -25px;
    position: absolute;
    /* color: #191919; */
    font-weight: bold;
}

.message .text {
    border-left: 5px solid var(--cyberpunk-yellow);
    padding-left: 10px;
    background: linear-gradient(90deg, rgba(243,230,0,0.05) 0%, rgba(243,230,0,0) 100%);
    position: relative;

    border-right-color: #bbc28c0f;
    border-right-style: solid;
    border-right-width: 0.1px;
}

.message .text p{
    color: var(--cyberpunk-yellow);
    margin: 10px;

    /* padding: 20px; */

    /* box-shadow: 0 0 10px 0px var(--cyberpunk-yellow); */
    /* border: 1px solid rgba(var(--cyberpunk-yellow), 0.45); */
}



/* TODO у каждого свой цвет, основной цвет - переменная и использовать сезде*/
.message.GG .text {
    border-left-color: #fc99fe;
    background: linear-gradient(90deg, #fc99fe0d 0%, #f3e60000 100%);
    border-right-color: #fc99fe0f;
    border-right-color: color-mix(in srgb, var(--gg-color) var(--back-line-transparency), transparent);
}

.message.UL .text {
    border-left-color: #bbc28c;
    background: linear-gradient(90deg, #bbc28c0d 0%, #f3e60000 100%);
    border-right-color: #bbc28c0f;
    border-right-color: color-mix(in srgb, var(--ul-color) var(--back-line-transparency), transparent);
}
.message.GG .text::after,
.message.GG .text p{
    color: #fc99fe;
}

.message.UL .text::after,
.message.UL .text p{
    color: #bbc28c;
}