.alliance-chat-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12000;
    font-size: 12px;
    color: #1b1b1b;
    transition: bottom 0.3s ease, left 0.3s ease, right 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
}

.alliance-chat-bar .chat-toggle {
    width: 100%;
    background: linear-gradient(180deg, #3b352e 0%, #29231e 100%);
    color: #f2f2f2;
    border: 0;
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    border-top: 1px solid #1e1b17;
}

.alliance-chat-bar .chat-title {
    font-weight: bold;
    letter-spacing: 0.3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 70%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.alliance-chat-bar .chat-unread {
    background: #c0392b;
    color: #fff;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    display: none;
}

.alliance-chat-bar .chat-unread.is-visible {
    display: inline-block;
}

.alliance-chat-bar .chat-panel {
    background: #f4f2ee;
    border-top: 1px solid #c8c3b8;
    display: none;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    height: 320px;
    transition: height 0.3s ease;
}

.alliance-chat-bar .chat-panel.large {
    height: 500px;
}

.alliance-chat-bar .chat-toast {
    position: absolute;
    right: 12px;
    bottom: 44px;
    background: #2a2a2a;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    display: none;
    max-width: 240px;
}

.alliance-chat-bar .chat-toast.is-visible {
    display: block;
}

.alliance-chat-bar.alliance-chat-open .chat-panel {
    display: block;
}

.alliance-chat-bar.alliance-chat-compact {
    left: auto;
    right: 20px;
    bottom: 0;
    width: 360px;
    max-width: 360px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.alliance-chat-bar.alliance-chat-compact .chat-toggle {
    border-radius: 12px 12px 0 0;
}

.alliance-chat-bar.alliance-chat-compact .chat-panel {
    border-radius: 0 0 12px 12px;
}

.alliance-chat-bar.alliance-chat-compact .chat-panel,
.alliance-chat-bar.alliance-chat-compact .chat-toast {
    width: 100%;
}

.alliance-chat-bar.alliance-chat-compact .chat-toast {
    right: 8px;
}

.alliance-chat-bar .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #e3dfd6;
    border-bottom: 1px solid #c8c3b8;
}

.alliance-chat-bar .chat-tabs {
    display: flex;
    gap: 6px;
}

.alliance-chat-bar .chat-tab {
    border: 0;
    background: #d2cdc2;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.alliance-chat-bar .chat-tab.active {
    background: #fff;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.alliance-chat-bar .chat-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.alliance-chat-bar .chat-action-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    padding: 0 4px;
}

.alliance-chat-bar .chat-action-btn.active {
    color: #2f6d3a;
    font-weight: bold;
}

.alliance-chat-bar .chat-mute-toggle {
    border: 0;
    background: #6b6b6b;
    color: #fff;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 11px;
    border-radius: 4px;
}

.alliance-chat-bar .chat-body {
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

.alliance-chat-bar .chat-pane {
    display: none;
    padding: 10px 12px;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
}

.alliance-chat-bar .chat-pane.active {
    display: flex;
    flex-direction: column;
}

.alliance-chat-bar .chat-pane.chat-pane-dm.active {
    display: flex;
    flex-direction: row;
}

.alliance-chat-bar .chat-messages {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d2cdc2;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.alliance-chat-bar .chat-message {
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    max-width: 90%;
    align-self: flex-start; /* Force all messages to left */
    align-items: flex-start; /* Force all content to left */
}

/* 
   User's own messages 
   Removed align-self: flex-end 
*/
.alliance-chat-bar .chat-message.self {
    /* No special alignment, stays left */
}

.alliance-chat-bar .chat-message.other {
    /* No special alignment, stays left */
}

.alliance-chat-bar .chat-message .chat-meta {
    font-size: 10px;
    color: #6a6a6a;
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 2px;
}

.alliance-chat-bar .chat-message .chat-user {
    font-weight: bold;
    color: #2c3e50;
}

.alliance-chat-bar .chat-message .chat-content {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 6px 8px;
    border-radius: 6px;
    position: relative;
    text-align: left;
}

.alliance-chat-bar .chat-message.self .chat-content {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    /* border-bottom-right-radius: 0; */ /* Removed styling that suggests right side */
}

.alliance-chat-bar .chat-message.other .chat-content {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-bottom-left-radius: 0;
}

.alliance-chat-bar .chat-message .chat-content .chat-mention {
    color: #2f6d3a;
    font-weight: bold;
    text-decoration: underline;
}

.alliance-chat-bar .chat-message .chat-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.alliance-chat-bar .chat-message .chat-action {
    border: 0;
    background: #c8c3b8;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 10px;
}

.alliance-chat-bar .chat-system {
    display: none;
    padding: 6px;
    background: #fff4e3;
    border: 1px solid #e2c9a0;
    margin-top: 6px;
}

.alliance-chat-bar .chat-input-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.alliance-chat-bar .chat-input {
    flex: 1;
    resize: none;
    border: 1px solid #d2cdc2;
    padding: 4px 6px;
    font-size: 12px;
}

.alliance-chat-bar .chat-send {
    border: 0;
    background: #2f6d3a;
    color: #fff;
    padding: 4px 12px;
    cursor: pointer;
}

.alliance-chat-bar .chat-emoji-toggle {
    border: 0;
    background: #d2cdc2;
    padding: 4px 8px;
    cursor: pointer;
}

.alliance-chat-bar .chat-input-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: #6a6a6a;
    font-size: 10px;
}

.alliance-chat-bar .chat-error {
    color: #b03a2e;
}

.alliance-chat-bar .chat-emoji-picker {
    background: #fff;
    border: 1px solid #d2cdc2;
    padding: 6px;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.alliance-chat-bar .chat-emoji-picker button {
    border: 0;
    background: #f1efe9;
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
}

.alliance-chat-bar .chat-pane-dm {
    gap: 10px;
}

.alliance-chat-bar .chat-dm-sidebar {
    width: 180px;
    border-right: 1px solid #d2cdc2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alliance-chat-bar .chat-dm-search input {
    width: 100%;
    border: 1px solid #d2cdc2;
    padding: 4px 6px;
}

.alliance-chat-bar .chat-dm-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #d2cdc2;
    background: #fff;
}

.alliance-chat-bar .chat-dm-item {
    padding: 6px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alliance-chat-bar .chat-dm-item.active {
    background: #f1efe9;
    font-weight: bold;
}

/* New Unread Indicator in DM List */
.alliance-chat-bar .chat-dm-item .dm-unread-dot {
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    display: none;
}
.alliance-chat-bar .chat-dm-item .dm-unread-dot.visible {
    display: block;
}

.alliance-chat-bar .chat-dm-empty {
    font-size: 11px;
    color: #7a7a7a;
    padding: 4px;
}

.alliance-chat-bar .chat-dm-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.alliance-chat-bar .chat-dm-header {
    font-weight: bold;
    padding: 4px 0;
}

.alliance-chat-bar .chat-dm-thread .chat-messages {
    height: 160px;
}

.alliance-chat-bar .chat-muted {
    opacity: 0.6;
    pointer-events: none;
}

/* Autocomplete Popup */
.chat-autocomplete {
    position: absolute;
    bottom: 55px;
    left: 45px;
    width: 200px;
    background: #fff;
    border: 1px solid #d2cdc2;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 20000;
    max-height: 120px;
    overflow-y: auto;
    display: none;
}

.chat-autocomplete.is-visible {
    display: block;
}

.chat-autocomplete-item {
    padding: 5px 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 11px;
}

.chat-autocomplete-item:hover {
    background: #f1efe9;
}

.alliance-chat-bar .chat-guide-content h4 {
    color: #2f6d3a;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

@media (max-width: 900px) {
    .alliance-chat-bar .chat-pane-dm {
        flex-direction: column;
    }

    .alliance-chat-bar .chat-dm-sidebar {
        width: 100%;
    }
}