Update static/style.css

static/style.css

@@ -937,4 +937,225 @@ a:hover { text-decoration: underline; }
     .message-bubble { max-width:65%; }
     .compose-form { padding:0.6rem 1rem; }
 }
-@media (min-width:1024px) { .message-bubble { max-width:55%; } }
+@media (min-width:1024px) { .message-bubble { max-width:55%; } }
+
+/* ======= MESSAGE SENDER ROW FIXED ======= */
+.msg-sender-row {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-bottom: 0.25rem;
+}
+.msg-sender-row-self {
+    justify-content: flex-end;
+}
+.msg-avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 1px solid var(--border);
+    display: block;
+}
+.msg-avatar-placeholder {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.65rem;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+.msg-sender-name {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    line-height: 1;
+}
+.message-wrapper.self .msg-sender-name {
+    color: var(--text-tertiary);
+}
+
+/* ======= MESSAGE ACTIONS ALWAYS VISIBLE ======= */
+.message-actions {
+    display: flex;
+    gap: 2px;
+    margin-top: 0.25rem;
+    opacity: 1 !important;
+}
+
+/* ======= ATTACHMENT SIZE FIX ======= */
+.message-bubble .attachment {
+    max-width: 260px;
+}
+.message-bubble .attachment img {
+    max-width: 100%;
+    max-height: 220px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    display: block;
+}
+.message-bubble .attachment video {
+    max-width: 100%;
+    max-height: 220px;
+    border-radius: var(--radius-md);
+    display: block;
+}
+.message-bubble {
+    display: inline-block;
+    max-width: 100%;
+}
+.message-wrapper.self .message-bubble {
+    max-width: 72%;
+}
+.message-wrapper.other .message-bubble {
+    max-width: 72%;
+}
+
+/* ======= LATEST MESSAGE TOAST ======= */
+.latest-message-bar {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-lg);
+    padding: 0.4rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    max-width: 280px;
+    transition: all var(--transition-fast);
+    font-size: 0.8125rem;
+    color: var(--text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.latest-message-bar:hover {
+    background: var(--bg-tertiary);
+    transform: translateX(-50%) translateY(-2px);
+    box-shadow: var(--shadow-xl);
+}
+.latest-message-bar .lmb-avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    font-weight: 700;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.latest-message-bar .lmb-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+.latest-message-bar .lmb-name {
+    font-weight: 600;
+    color: var(--primary);
+    flex-shrink: 0;
+}
+.latest-message-bar .lmb-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-secondary);
+}
+.latest-message-bar.hidden {
+    display: none !important;
+}
+
+/* ======= SETTINGS TOGGLE ======= */
+.settings-toggle-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border-light);
+}
+.settings-toggle-row:last-child {
+    border-bottom: none;
+}
+.settings-toggle-row label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text);
+    margin: 0;
+}
+.settings-toggle-row .toggle-hint {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    margin-top: 0.1rem;
+}
+.toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    flex-shrink: 0;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+}
+.toggle-slider {
+    position: absolute;
+    inset: 0;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+}
+.toggle-slider::before {
+    content: '';
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 2px;
+    top: 2px;
+    background: var(--text-tertiary);
+    border-radius: 50%;
+    transition: all var(--transition-fast);
+}
+.toggle-switch input:checked + .toggle-slider {
+    background: var(--primary);
+    border-color: var(--primary);
+}
+.toggle-switch input:checked + .toggle-slider::before {
+    transform: translateX(20px);
+    background: #fff;
+}
+
+@media (min-width: 768px) {
+    .message-wrapper.self .message-bubble,
+    .message-wrapper.other .message-bubble {
+        max-width: 65%;
+    }
+}
+@media (min-width: 1024px) {
+    .message-wrapper.self .message-bubble,
+    .message-wrapper.other .message-bubble {
+        max-width: 55%;
+    }
+}