#ailc-wrapper { position: fixed; bottom: 20px; right: 20px; left: auto; z-index: 999999; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }

/* Main container for the toggle button */
#ailc-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    gap: 12px;
}

/* The text bubble for the icon name */
#ailc-toggle-name {
    background: #fff;
    color: #333;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
    transition: transform 0.2s ease-in-out;
}

/* The circular icon */
#ailc-toggle-icon {
    width: 60px;
    height: 60px;
    background: transparent;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease-in-out;
    background-size: cover;
    background-position: center;
    flex-shrink: 0; /* Prevents icon from shrinking */
}

#ailc-toggle:hover #ailc-toggle-icon { transform: scale(1.1); }
#ailc-toggle:hover #ailc-toggle-name { transform: scale(1.05); }

#ailc-box { width: 340px; max-width: 90vw; position: absolute; bottom: 85px; right: 0; left: auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); overflow: hidden; border: 1px solid #e6e6e6; display: flex; flex-direction: column; }
#ailc-header { background: linear-gradient(90deg,#4a90e2,#6b8cff); color:#fff; padding:12px 15px; font-weight:600; font-size: 16px; display: flex; align-items: center; }
#ailc-body { height: 320px; overflow-y: auto; padding:15px; background:#f9f9f9; }
.ailc-msg { margin-bottom:12px; padding:8px 12px; border-radius:12px; max-width:90%; line-height: 1.5; word-wrap: break-word; }
.ailc-msg strong { display: block; margin-bottom: 2px; font-size: 0.85em; color: #555; }
.ailc-msg.user { background:#eaf3ff; margin-left:auto; border-bottom-right-radius: 4px; }
.ailc-msg.user strong { color: #0052cc; }
.ailc-msg.ai { background:#ffffff; border:1px solid #eee; border-bottom-left-radius: 4px; }
#ailc-footer { display:flex; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff; }
#ailc-input { flex:1; padding:10px; border:1px solid #ddd; border-radius:6px; resize: none; }
#ailc-send { padding:8px 15px; border:none; background:#4a90e2; color:#fff; border-radius:6px; cursor:pointer; transition: background-color 0.2s; }
#ailc-send:hover { background: #3a7bc8; }
#ailc-send:disabled { background: #999; cursor: not-allowed; }
.ailc-thinking { display: inline-block; }
.ailc-thinking::after { content: '.'; display: inline-block; animation: ailc-dots 1s steps(5, end) infinite; }
@keyframes ailc-dots { 0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); } 40% { color: #333; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); } 60% { text-shadow: .25em 0 0 #333, .5em 0 0 rgba(0,0,0,0); } 80%, 100% { text-shadow: .25em 0 0 #333, .5em 0 0 #333; } }

/* Responsive adjustments */
@media (max-width: 600px) {
    #ailc-wrapper {
        right: 10px;
        bottom: 10px;
    }
    #ailc-box {
        width: 300px;
        max-width: 95vw;
        right: 0;
    }
    #ailc-toggle-name {
        font-size: 14px;
        padding: 6px 12px;
    }
    #ailc-toggle-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}