body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 20px auto;
padding: 0 20px;
background-color: #f5f5f5;
}

h1 {
color: #2c3e50;
}

a {
text-decoration: none;
color: #0066cc;
}

a:hover {
color: #ff6600;
}

ul {
list-style: none;
padding: 0;
}

li {
background: white;
padding: 12px;
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

button {
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}



/* ===== チャットUI ===== */

/* メッセージ一覧 */
#messages {
padding: 10px;
border: 1px solid #ddd;
background-color: white;
margin-bottom: 10px;
}

/* 自分メッセージ（右） */
.my-msg {
text-align: right;
margin-bottom: 10px;
}

/* 相手メッセージ（左） */
.other-msg {
text-align: left;
margin-bottom: 10px;
}

/* 吹き出し共通 */
.bubble {
display: inline-block;
padding: 8px 12px;
border-radius: 15px;
max-width: 70%;
word-wrap: break-word;
}

/* 自分 */
.mine {
background-color: #dcf8c6;
}

/* 相手 */
.other {
background-color: #f1f0f0;
}

/* 入力欄 */
.chat-form {
margin-top: 10px;
}

.chat-input {
width: 80%;
padding: 8px;
}

.chat-button {
padding: 8px 16px;
}



.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    color: #222;
    text-decoration: none;
}

.header-user-area {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-notification {
    text-decoration: none;
    color: #444;
    font-size: 22px;
}

.header-profile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
}

.header-profile-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.header-profile-initial {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2e8b57;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.header-profile-name {
    font-size: 13px;
    font-weight: bold;
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}