/* CSS Variables */
:root {
    --color-primary: rgb(53,76,196);
    --color-secondary: rgb(43,130,149);
    --color-lightgrey: lightgrey;
    --color-darkgrey: darkgrey;
    --color-white: white;
    --color-black: black;
    --color-lightblue: rgb(186,223,228);
    --font-size-small: 0.7rem;
    --font-size-medium: 0.9rem;
    --font-size-large: 1.1rem;
    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 30px;
}



/* Global Styles */
body {
    font-family: Arial, sans-serif;
}

.app-container {
    max-width: 650px;
    margin: auto;
    padding: var(--spacing-medium);
}

/* Title Bar Styles */
.title-bar {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-small);
}

.title {
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-small);
    text-align: center;
}

.subtitle {
    font-size: var(--font-size-small);
    color: var(--color-lightgrey);
    text-align:end;
}

/* Info Input Screen Styles */
.info-input-screen {
    flex: 1; /* 최대 높이로 화면을 채우도록 설정 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
    padding: var(--spacing-small);
}

.info-input-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-small);
    width: 100%;
}

.info-input-label {
    font-size: var(--font-size-medium);
    margin-bottom: var(--spacing-small);
}

.info-input-box {
    padding: var(--spacing-small);
    border: 1px solid rgb(180,196,219);
    font-size: var(--font-size-medium);
}

/* Chat Window Styles */  
.chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: rgb(219,226,234);
    padding: var(--spacing-small);
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 60%;
}

.my-message {
    margin-left: auto;
    align-items: flex-end;
}

.counselor-message {
    flex: 0 0 60%;
    align-items: flex-start;
}

.chat-message {
    padding: var(--spacing-small);
    margin-bottom: var(--spacing-small);
    border-radius: 15px;
    text-align: left;
}

.my-message .chat-message {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.counselor-message .chat-message {
    background-color: var(--color-white);
    color: var(--color-black);
}

.timestamp {
    font-size: var(--font-size-small);
    color: var(--color-darkgrey);
    font-family: Arial, sans-serif;
}


#chat-window {
    display: none;
}

#start-chat-button,
#end-chat-button {
    align-self: center;
    border: none;
    padding: 10px;
    background-color: rgb(53,76,196);
    color: white;
    font-size: var(--font-size-medium);
    cursor: pointer;
    border-radius: 15px; /* Add this line */
}

#start-chat-button[disabled] {
    color: var(--color-darkgrey);
    cursor: not-allowed;
}

#message-input {
    flex-grow: 1;
    border: none;
    padding: 10px;
    color: black;
    background-color: white;
}

#message-input::placeholder {
    color: rgb(180,196,219);
}

#send-button {
    border: none;
    padding: 10px 15px;
    background-color: white;
    color: rgb(186,223,228);
}

#send-button.active {
    color: rgb(43,130,149);
}

/* 스크롤바 이동 가능 */
.chat-history {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Unify the font size */
.info-msg,
.info-input-field label,
.info-input-field textarea,
.chat-window .chat-history,
.chat-window #message-input {
    font-size: var(--font-size-medium);
}

/* Set the background color to black and the text color to white for btn-sample1, btn-sample2, and btn-sample3 */
.btn-sample1,
.btn-sample2,
.btn-sample3 {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Center align the start-chat-info and set its font size to small */
.start-chat-info  {
    font-size: var(--font-size-small);
    color: var(--color-black);
    display: flex;
    text-align: center;
}

/* Change the color of btn-group to black background with white text */
.btn-group {
    gap: var(--spacing-small);
    color: var(--color-white);
}

/* Make the btn-group buttons fill the row */
.btn-group {
    gap: var(--spacing-small);
    width: 100%;
    display: flex;
}

.btn-group button {
    flex-grow: 1;
}

/* Make the message-input fill the remaining space in the input-area */
.input-area {
    display: flex;
}

#message-input {
    flex-grow: 1;
}