/* 1. BASIS: Gemeinsame Struktur für alle */
p.left, p.right, p.info, p.warnung, p.achtung {
    display: table;
    clear: both;
    max-width: 75%;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 12px 18px;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    box-sizing: border-box; /* Wichtig für exakte Breitenberechnung */
}

/* 2. RIGIDE AUSRICHTUNG: Das löst dein Problem */
p.left, p.info, p.warnung, p.achtung {
    margin-left: 0 !important;
    margin-right: auto !important;
}

p.right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* 3. OPTIK: Chat-Bubbles */
p.left {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px 18px 18px 4px;
}

p.right {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    color: white;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* 4. OPTIK: Notifies */
p.info, p.warnung, p.achtung {
    padding-left: 45px;
    border-radius: 10px;
}

/* Icons */
p.info::before, p.warnung::before, p.achtung::before {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

/* Notify-Farben */
p.info { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
p.info::before { content: "\2139"; }

p.warnung { background: rgba(255, 165, 0, 0.2); color: #ffb347; border: 1px solid rgba(255, 165, 0, 0.3); }
p.warnung::before { content: "\26A0"; }

p.achtung { background: rgba(255, 69, 58, 0.2); color: #ff6b6b; border: 1px solid rgba(255, 69, 58, 0.3); }
p.achtung::before { content: "\2716"; }