/* CSS Document */

#animo_chatBot {
    position: fixed;
	z-index: 500;
    font-size: 16px;
    --margin: 15px;
	--margin_x2: calc(var(--margin) * 2);
    --border: gray;
    --size: 50px;
    --width: 400px;
    bottom: var(--margin);
    right: var(--margin);
    width: var(--width);
    height: var(--size);
    border-radius: 50px;
    /*border: 1px solid var(--border);*/
    transition: width .5s, height .5s, transparent .5s, border-radius .3s;
    overflow: hidden;
	filter:  drop-shadow(0px 0px 2px rgba(0,0,0,0.38));

    p,
    input {
        margin: 0;
    }
}

#animo_chatBot.show {
    width: 400px;
    height: 550px;
    border-radius: 20px;
}

#animo_chatBot #ac_detail {
    position: absolute;
    width: 400px;
    height: 550px;
    background: white;
    right: 0;
    top: 0;
    display: grid;
    grid-template-rows: var(--size) 1fr calc(var(--size) + 1em);
}
#animo_chatBot #ac_header {
    background: #83ae00;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.2em 0 var(--margin);
    /*border-bottom: 1px solid var(--border);*/
	transition: background .5s;
	cursor: pointer;
	
	/* #ac_chatOpenいらない */
    #ac_chatOpen {
        border: none;
        outline: none;
        background: transparent;
        height: var(--size);
        width: var(--size);
		padding: 1%;
    }
	#ac_chatOpen::before{
        content: "";
        background-image: url(/wp-content/themes/animo2022/image/share/logo.svg);
        width: 100%;
        height: 100%;
        display: block;
        background-repeat: no-repeat;
        background-position: 0;
		transition: transform .1s;
	}
	#ac_chatOpen:hover::before{
		transform: scale(0.95);
	}
	.ac_close{
        height: var(--size);
        width: var(--size);
		position: relative;
		opacity: 0;
		transition: opacity 1s;
		span{
			position: absolute;
			width: 50%;
			background-color: black;
			height: 1px;
			top: 50%;
			left: 25%;
		}
		span{
			transform: rotate(0deg);
			transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.73, 1.54);
			transition-delay: 0.4s;
		}
	}
	img{
		height: 60%;
		filter: hue-rotate(-10deg) brightness(2);
		width: 70px;
		transition: width 0.5s;
	}
	p{
		font-weight: bold;
		flex: 1;
		margin-left: 0.6em;
	}
}

#animo_chatBot.show #ac_header{
	.ac_close{
		opacity: 1;
		span:nth-child(1){
			transform: rotate(-45deg);
		}
		span:nth-child(2){
			transform: rotate(45deg);
		}
	}
	img{
		width: 0px;
	}
}

#animo_chatBot #ac_footer {
    display: flex;
    flex-wrap: wrap;
    background: #eeeeee;
	padding: 0.6em 1.3em 0.65em 1em;
    /*border-top: 1px solid var(--border);*/
	gap: 1em;
	align-items: center;

	button{
		transition: background 0.2s;
	}
    button:hover,
    button:focus {
        background: gray !important;
    }
	
    #chat_msg,
    #ac_chatSend,
    #ac_start,
    #ac_resume {
        border: none;
        outline: none;
    }

    #chat_msg {
		padding: 1em 1.4em;
        flex: 1;
		height: 100%;
		background: white;
		border-radius: 2000px;
		border: 1px solid #cdcdcd;
    }

    #ac_chatSend {
        background: #83ae00;
        height: var(--size);
        cursor: pointer;
		clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
		height: 60%;
        aspect-ratio: 0.8 / 1;
    }
	
    #ac_start {
        flex: 1;
        cursor: pointer;
        font-size: 1.3em;
		height: 100%;
		background: transparent;
		border-radius: 2000px;
    }

	#ac_resume {
        width: 40%;
        cursor: pointer;
        font-size: 1em;
		border-left: 1px solid gray;
	}
}


#animo_chatBot #ac_talk {
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1em calc(var(--margin) + 0.2em) 1em;

    .notice {
        font-size: 0.7em;
        color: gray;
        margin: 1em auto;
        text-align: center;
    }

    .talk {
        margin: 0.8em 0;
    }

    .talk p {
        /*border: 1px solid black;*/
        border-radius: 12px;
        padding: 0.6em 1em 0.8em;
        position: relative;
        max-width: max-content;
		background: white;
    }

    .talk p::before {
        content: "";
        font-size: 0.7em;
        position: absolute;
        top: -1.2em;
        left: 5px;
        padding: 0 1em;
        line-height: 1;
    }

    .ac_user p {
        margin-left: auto;
		background: #e6efcc;
    }

    .ac_bot p {
        margin-right: auto;
		background: #fff1ec;
    }

    /*.ac_user p::before {
        content: "user";
        left: unset;
        right: 8px;
    }

    .ac_bot p::before {
        content: "bot";
    }*/
}

@media (max-width: 720px) {
	#animo_chatBot{
		width: calc(100% - var(--margin_x2));
        min-width: 280px;
	}
	#animo_chatBot.show{
		width: calc(100% - var(--margin_x2));
		font-size: 12px;
	}
	#animo_chatBot #ac_detail{
		width: 100%;
        min-width: 280px;
	}
}