/* ===== レイアウト ===== */
html, body { height: 100%; margin: 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }

#sidebar { width: 260px; min-width: 260px; transition: transform .25s ease; z-index: 100; }
.sidebar-item { transition: background .15s, color .15s; font-size: .88rem; }
.sidebar-item:hover  { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sidebar-item.active { background: rgba(255,255,255,.15) !important; color: #fff !important; font-weight: 600; }
.chat-header { min-height: 54px; }
.chat-input-area { position: relative; }

/* ===== メッセージ（Chatwork風）===== */
.message-row {
    display: flex;
    gap: .75rem;
    padding: .5rem 0;
    align-items: flex-start;
}
.message-row.mine { flex-direction: row-reverse; }

/* アバター */
.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
    flex-shrink: 0; color: #fff;
}
.avatar.ai-avatar { background: #6f42c1; }

/* メッセージ本体 */
.msg-body { max-width: 70%; }
.mine .msg-body { align-items: flex-end; display: flex; flex-direction: column; }

.msg-name {
    font-size: .78rem; font-weight: 600;
    color: #374151; margin-bottom: .2rem;
}
.mine .msg-name { display: none; }

.bubble {
    background: #f1f3f5;
    border-radius: 0 1rem 1rem 1rem;
    padding: .55rem .85rem;
    word-break: break-word;
    line-height: 1.6;
    font-size: .9rem;
    display: inline-block;
    max-width: 100%;
}
.mine .bubble {
    background: #0d6efd; color: #fff;
    border-radius: 1rem 0 1rem 1rem;
}
.ai-response .bubble {
    background: #e9e3ff;
    border: 1px solid #c8b8ff;
    border-radius: 0 1rem 1rem 1rem;
}

.msg-time {
    font-size: .7rem; color: #9ca3af;
    margin-top: .2rem; display: block;
}
.mine .msg-time { text-align: right; }

/* ===== 未読区切り ===== */
.unread-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: .8rem 0; font-size: .75rem;
}
.unread-divider::before, .unread-divider::after {
    content: ''; flex: 1; height: 1px; background: #ef4444;
}
.unread-divider span { color: #ef4444; font-weight: 600; white-space: nowrap; }

/* ===== 日付区切り ===== */
.date-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: .8rem 0; color: #9ca3af; font-size: .75rem;
}
.date-divider::before, .date-divider::after {
    content: ''; flex: 1; height: 1px; background: #e5e7eb;
}

/* ===== メンション ===== */
.mention { color: #0d6efd; font-weight: 600; background: #dbeafe; border-radius: .2rem; padding: 0 .2rem; }
.mine .mention { color: #bfdbfe; background: rgba(255,255,255,.2); }

.mention-dropdown {
    position: absolute; bottom: 100%; left: 0; right: 0;
    max-height: 200px; overflow-y: auto; z-index: 200; margin-bottom: 4px;
}
.mention-item {
    padding: .45rem .75rem; cursor: pointer;
    font-size: .88rem; display: flex; align-items: center; gap: .5rem;
}
.mention-item:hover, .mention-item.selected { background: #e7f0ff; }

/* ===== 添付ファイル ===== */
.attachment-image {
    max-width: 280px; max-height: 200px;
    border-radius: .5rem; margin-top: .4rem;
    cursor: pointer; display: block; transition: opacity .15s;
}
.attachment-image:hover { opacity: .85; }
.attachment-file {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(0,0,0,.06); border-radius: .5rem;
    padding: .35rem .6rem; margin-top: .4rem;
    font-size: .82rem; text-decoration: none; color: inherit; max-width: 280px;
}
.mine .attachment-file { background: rgba(255,255,255,.18); color: #fff; }

/* ===== AIタイピング ===== */
.typing-indicator { display: flex; gap: 3px; padding: .4rem; }
.typing-indicator span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #9ca3af; animation: bounce .8s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

/* ===== ライトボックス ===== */
#lightbox {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.85); z-index: 9999;
    align-items: center; justify-content: center; cursor: zoom-out;
}
#lightbox.show { display: flex; }
#lightbox img { max-width: 90vw; max-height: 90vh; border-radius: .5rem; }

/* ===== レスポンシブ ===== */
@media (max-width: 991px) {
    #sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.3); }
    #overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
    #overlay.show { display: block; }
}