@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../iransans/IRANSans-web.eot');
    src: url('../iransans/IRANSans-web.eot?#iefix') format('embedded-opentype'),
        url('../iransans/IRANSans-web.woff2') format('woff2'),
        url('../iransans/IRANSans-web.woff') format('woff'),
        url('../iransans/IRANSans-web.ttf') format('truetype');
    font-display: fallback;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../iransans/IRANSans-Medium-web.eot');
    src: url('../iransans/IRANSans-Medium-web.eot?#iefix') format('embedded-opentype'),
        url('../iransans/IRANSans-Medium-web.woff2') format('woff2'),
        url('../iransans/IRANSans-Medium-web.woff') format('woff'),
        url('../iransans/IRANSans-Medium-web.ttf') format('truetype');
    font-display: fallback;
}

body {
    font-family: "IRANSans", sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    direction: rtl;
    overflow-x: hidden;
}

input,
button {
    font-family: "IRANSans", sans-serif;
}

input {
    padding: 10px 24px;
    border-radius: 8px;
    appearance: none;
    border: 1px solid #c3c3c3;
    text-align: right;
}

button {
    padding: 10px 24px;
    border-radius: 8px;
    appearance: none;
    border: 0;
    background: #207fd6;
    color: white;
    cursor: pointer;
}

button:disabled {
    background: #c7c7c7;
    color: white;
    cursor: not-allowed;
}

#messages {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    gap: 12px;
    word-break: break-all;
}

.message-item {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #e7e7e7;
    padding: 8px 24px;
    align-self: flex-end;
}

.message-detail {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 8px;
}

.message-content {
    margin: 8px 0;
}

.message-item.is-me {
    align-self: flex-start;
    background: #c3c3c3;
}

.message-item.is-me .message-detail {
    flex-direction: row;
}

#set-name-dialog,
#add-room-dialog {
    position: fixed;
    inset: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hide-dialog {
    visibility: hidden;
    opacity: 0;
}

.show-dialog {
    visibility: visible;
    opacity: 100;
}

#loginForm {
    display: flex;
    gap: 8px;
}

#inputForm {
    display: flex;
    gap: 8px;
    padding: 10px;
}

#text {
    width: 100%;
}

#header {
    padding: 10px;
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

#add-room-btn {
    background: #d65720;
}

.room-tab {
    background: #5aaffc;
}

.room-tab.active {
    background: #2a649a;
}

#close-dialog {
    position: fixed;
    top: 10px;
    right: 10px;
    background: #494949;
}

#room-tabs-container {
    display: flex;
    gap: 8px;
}