[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-chat-history {

    background-color: #e8f4ec;
}

/* Webchatの表示サイズ */
[data-cognigy-webchat-root] [data-cognigy-webchat] {
    width: 500px;
    height: 92vh !important;
    bottom: 30px;
    right: 30px;
    border-radius: 0;
    font-size: 14px;
}

/* レスポンシブ対応：Webchatの表示サイズ（改良版） */
/* Chrome/Safari用 (Webkit系) */
@media only screen and (max-width: 768px) {
  @supports (-webkit-appearance: none) {
    [data-cognigy-webchat-root] [data-cognigy-webchat] {
      width: 100%;
      top: auto !important;
      bottom: 0 !important;
      font-size: 16px;
    }
  }
}

/* Firefox用 (Gecko系) */
@media only screen and (max-width: 768px) {
  @-moz-document url-prefix() {
    [data-cognigy-webchat-root] [data-cognigy-webchat] {
      width: 100%;
      top: 0 !important;
      bottom: auto !important;
      font-size: 16px;
    }
  }
}

/* ヘッダーバー */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {
    color: #fff;
    background: #08645c;
    
}

/* ×ボタンの×だけを白にする */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-close-button svg path:first-of-type {
    fill: #ffffff;
}

/* ギャラリー内カード縦サイズ設定 */
[data-cognigy-webchat-root] .webchat-carousel-template-root {
    flex-grow: unset;
    -webkit-box-flex: unset;
}

/* クイックリプライ左揃え設定 */
[data-cognigy-webchat-root] .webchat-quick-reply-template-replies-container {
    text-align: unset;
}

/* 吹き出し口左上へ */
[data-cognigy-webchat-root] .cognigy-webchat-5uj5vj {
    border-radius: 0px 16px 16px 16px;
    padding:12px 20px;
}

[data-cognigy-webchat-root] .cognigy-webchat-duls6z {
    border-radius: 0px 16px 16px 16px;
}

/* メッセージ枠線設定 */
[data-cognigy-webchat-root] .regular-message,
[data-cognigy-webchat-root] .regular-message.bot,
[data-cognigy-webchat-root] .webchat-buttons-template-root,
[data-cognigy-webchat-root] .webchat-quick-reply-template-header-message,
[data-cognigy-webchat-root] .webchat-quick-reply-template-reply,
[data-cognigy-webchat-root] .webchat-carousel-template-frame {
    border: none;
}

/* メッセージ文字色設定 */
[data-cognigy-webchat-root] .regular-message.bot,
[data-cognigy-webchat-root] .webchat-buttons-template-header,
[data-cognigy-webchat-root] .webchat-buttons-template-button,
[data-cognigy-webchat-root] .webchat-quick-reply-template-header-message,
[data-cognigy-webchat-root] .webchat-quick-reply-template-reply,
[data-cognigy-webchat-root] .webchat-carousel-template-title,
[data-cognigy-webchat-root] .webchat-carousel-template-button {
    color: #333333;
}


/* メッセージ背景色設定 */
[data-cognigy-webchat-root] .regular-message,
[data-cognigy-webchat-root] .regular-message.bot,
[data-cognigy-webchat-root] .webchat-quick-reply-template-header-message,
[data-cognigy-webchat-root] .webchat-quick-reply-template-reply,
[data-cognigy-webchat-root] .webchat-buttons-template-header {
    background-color: #c0e4e4;
}

/* メッセージ背景色設定 */
[data-cognigy-webchat-root] .webchat-buttons-template-button,
[data-cognigy-webchat-root] .webchat-carousel-template-title,
[data-cognigy-webchat-root] .webchat-carousel-template-button {
    background-color: rgb(255,255,255);
}

/*リンクの下線が表示される対策*/
/*メッセージ内のリンクに下線強制*/
[data-cognigy-webchat-root] a{text-decoration: underline !important;
}

/*メッセージ内のリンクの下線カラー変更（現在「青」設定中）*/
[data-cognigy-webchat-root] a{text-decoration-color: blue !important;
}

/*メッセージ内のリンクのホバー時、カラー変更（現在「青」設定中）*/
[data-cognigy-webchat-root] a:hover{color:blue !important;
}


/* ギャラリー左右ボタン常時表示設定 */
[data-cognigy-webchat-root] .carousel .control-prev.control-arrow:before {
    border-right: 8px solid #333333;
    transition: all 0.25s ease-in;
}

[data-cognigy-webchat-root] .carousel .control-prev:hover.control-arrow:before,
[data-cognigy-webchat-root] .carousel .control-prev:focus.control-arrow:before {
    border-right: 8px solid #fff;
}

[data-cognigy-webchat-root] .carousel .control-next.control-arrow:before {
    border-left: 8px solid #333333;
    transition: all 0.25s ease-in;
}

[data-cognigy-webchat-root] .carousel .control-next:hover.control-arrow:before,
[data-cognigy-webchat-root] .carousel .control-next:focus.control-arrow:before {
    border-left: 8px solid #fff;
}


[data-cognigy-webchat-root] button[class*=" webchat-"],
[data-cognigy-webchat-root] button[class^="webchat-"] {
  text-align: left !important;
  font-size: 14px !important;
}

[data-cognigy-webchat-root] div[class^="webchat-message-row agent cognigy-webchat-"] button {
    background-color: rgb(255, 255, 255); 
    color: rgb(0, 0, 0) !important; 
    cursor: pointer; 
    border: 1px solid rgb(0, 0, 0) !important; 
    height: 60px !important; 
    padding: 8px 16px; 
    border-radius: 16px;
  }
[data-cognigy-webchat-root] div[class^="webchat-buttons-template-root cognigy-webchat"] {
    width: 90% !important;
}

/* 中央寄せになってしまうところを強制左寄せにする */
[data-cognigy-webchat-root] div.webchat-message-row div.webchat-buttons-template-root {
    text-align:left !important;
}


/* Imageの画像サイズ*/
/* CognigyのWebChatのDynamic Image Aspect RatioをONにしておく */
[data-cognigy-webchat-root] .webchat-media-template-image {
    width: 100%;
    max-width: 250px !important;
    height: auto;
}

[data-cognigy-webchat-root] button.webchat-input-persistent-menu-item {
    background-color: #c0e4e4 !important;
}

/* チャットボットアバター */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-avatar.bot {
    /* webサイト事業者様へ
       以下のavatar.pngへのパスを、このcssファイルからの相対パスまたは、絶対パスに書き換えてください。
    */
    background-image: url(avatar.png);
    flex-basis: 35px;
    height: 30px;
}

/* アバター枠線削除、背景画像の採寸 */
[data-cognigy-webchat-root] .cognigy-webchat-47vdrg{
    border: none;
    background-size: 34px;
}

/* アバターの上辺を親要素の上辺に揃える */
[data-cognigy-webchat-root] .webchat-message-row.bot {
    align-items: flex-start;
}

/* ユーザーアバター */
[data-cognigy-webchat-root] .webchat-avatar.user {
    display: none;
}

/* チャット開始ボタン */
[data-cognigy-webchat-root] .cognigy-webchat-npitrr,
[data-cognigy-webchat-root] .cognigy-webchat-npitrr.active, 
[data-cognigy-webchat-root] .cognigy-webchat-npitrr:hover {
    /* webサイト事業者様へ
       以下のchat-start.pngへのパスを、このcssファイルからの相対パスまたは、絶対パスに書き換えてください。
    */
    background-image: url(chat-start.png);
    background-color: transparent; /* 明示的に透明にする */
    width: 100px; /* アイコン幅サイズ変更 */
    height: 100px; /* アイコン高サイズ変更 */
    bottom: 80px !important; /* 上下位置変更 */
    border-radius: 15%; /* アイコン四隅の角丸め変更 */
    background-size: cover;
    background-position: center;
}

/* 開始アイコンに影設定削除 */
[data-cognigy-webchat-root] button[class*=" webchat-"], [data-cognigy-webchat-root] button[class^="webchat-"],
[data-cognigy-webchat-root] button[data-cognigy-webchat-toggle]:focus {
    box-shadow:none;
}

/* 右寄せ幅サイズ */
[data-cognigy-webchat-root] button[data-cognigy-webchat-toggle] {
    right: 40px;
}


/* レスポンシブ対応：チャット開始ボタン */
@media only screen and (max-width: 768px) {
    [data-cognigy-webchat-root] .cognigy-webchat-npitrr,
    [data-cognigy-webchat-root] .cognigy-webchat-npitrr.active, 
    [data-cognigy-webchat-root] .cognigy-webchat-npitrr:hover {
        /* webサイト事業者様へ
        以下のchat-start.pngへのパスを、このcssファイルからの相対パスまたは、絶対パスに書き換えてください。
        */
        background-image: url(chat-start.png);
        background-color: transparent; /* 明示的に透明にする */
        width: 90px; /* アイコン幅サイズ変更 */
        height: 90px; /* アイコン高さサイズ変更 */
        bottom: 80px !important;
        border-radius: 15%; /* アイコン四隅の角丸め変更 */
        background-size: cover;
        background-position: center;
    }
}

/* チャット開始ボタンのデフォルトの画像を消す */
[data-cognigy-webchat-root] .webchat-toggle-button.cognigy-webchat-npitrr svg {
    display: none;
}