#tips-overlay{
    position:fixed;
    bottom:20px;
    left:10px;
    z-index:10000001;
}



.tips-buttons{
    text-align:right;
}

#tips-widget{
    position:fixed;
    bottom:24px;
    left:20px;
    right:20px;
    height:50px;
    z-index:11;
    pointer-events:none;
}

@keyframes tipsIconAppear {
    from {
        transform: translateY(25px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#tips-icon{
    pointer-events:auto;
    position:absolute;
    left:50px;
    bottom:0;
    font-size:26px;
    cursor:pointer;
    background:linear-gradient(135deg,#da356f,#b32b59);
    padding:10px;
    height:56px;
    width:56px;
    border-radius:50%;
    color:white;
    z-index:12;

    animation: tipsIconAppear 0.3s ease-out;
}

#tips-banner{
    pointer-events:auto;
    position: absolute;
  left: 76px;
  bottom: 1px;
  background: white;
  border-radius: 0px 25px 25px 0px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  padding: 0px;
    padding-right: 20px;
    padding-left: 50px;
    height:50px;
  max-width: calc(100vw - 120px);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  padding-right: 20px;
}


#tips-title{
    font-weight:500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#tips-box{
    width:370px;
    max-width:calc(100dvw - 20px);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,0.2);
    font-family:system-ui;

    animation: tipsIconAppear 0.3s ease-out;
}

/* header */

.tips-header{
    background:linear-gradient(135deg,#da356f,#b32b59);
    color:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:8px 10px;
    font-size:150%;
}

.tips-btn{
    background:none;
    border:none;
    color:white;
    font-size:18px;
    cursor:pointer;
    padding:6px;
}

.tips-btn:hover{
    background:rgba(255,255,255,0.15);
    border-radius:6px;
}

/* contenu */

.tips-content{
    display:flex;
    align-items:flex-start;

    background:white;
max-height: calc(100dvh - 90px);
    padding:16px;
    overflow-y: scroll;
}

.tips-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
}

.tips-title{
    font-weight:600;
    font-size:16px;
}

.tips-message{
    font-size:13px;
    opacity:0.8;
    margin-top:4px;
}