html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ページ全体の背景を薄いピンクに */
body {
    background-color: #ffe6eb; /* 薄いピンク */
    color: #333; /* 読みやすい文字色 */
}

/* コンテナの背景を白ベースで軽く影をつける */
.container {
    margin-top:100px;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    width:100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    
}


/* メインボタン（ピンク系） */
.btn-primary {
    background-color: #ff6699; /* 濃いめのピンク */
    border-color: #ff6699;
    color: #fff;
}
.btn-primary:hover {
    background-color: #e65c87; /* 少し暗め */
    border-color: #e65c87;
}

/* サブボタン（朱色系） */
.btn-danger {
    background-color: #ff6347; /* トマト色（朱色系） */
    border-color: #ff6347;
    color: #fff;
}
.btn-danger:hover {
    background-color: #e5533f;
    border-color: #e5533f;
}

/* 白ベースボタン */
.btn-light {
    background-color: #fff;
    border-color: #ff99aa;
    color: #ff6699;
}
.btn-light:hover {
    background-color: #ffe6eb;
    border-color: #ff6699;
    color: #e65c87;
}

h1, h2, h3, h4, h5 {
    color: #cc3366; /* 見出しをピンク寄りに */
}

a {
    color: #ff6699;
}
a:hover {
    color: #cc3366;
    text-decoration: underline;
}

/* Customize the green button to be pink */
.btn-success {
    background-color: #ff6699 !important;  /* Pink */
    border-color: #ff6699 !important;
    color: white !important;
}

.btn-success:hover {
    background-color: #e65c87 !important; /* Slightly darker pink */
    border-color: #e65c87 !important;
}

/* ==== AI Agent チャット用 ==== */

/* チャット全体のラッパー */
.chat-container {
    margin-top: 20px;
    padding: 15px;
    border-radius: 12px;
    background-color: #fff;
    width: 100%; /* 翻訳ページと合わせる */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* メッセージ共通 */
.chat-message {
    padding: 10px 15px;
    border-radius: 12px;
    margin: 8px 0;
    max-width: 80%;
    word-wrap: break-word;
}

/* ユーザーメッセージ（薄いピンク） */
.chat-message.user {
    background-color: #ffe6eb; /* 薄いピンク */
    color: #333;
    align-self: flex-end;
    margin-left: auto;
}

/* Agentメッセージ（薄い黄色） */
.chat-message.agent {
    background-color: #fff8cc; /* 薄い黄色 */
    color: #333;
    align-self: flex-start;
    margin-right: auto;
}

/* 入力欄（翻訳画面と幅を合わせる） */
.chat-input {
    display: flex;
    margin-top: 15px;
    gap: 10px;
    width: 100%;
}

.chat-input textarea {
    flex-grow: 1;
    border-radius: 8px;
    border: 1px solid #ff99aa;
    padding: 10px;
    resize: none;
}

/* 送信ボタン（ピンク系） */
.chat-input button {
    background-color: #ff6699;
    border-color: #ff6699;
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    transition: 0.2s;
}

.chat-input button:hover {
    background-color: #e65c87;
    border-color: #e65c87;
}

/* “黒”を全部ピンクで上書き */
.btn-dark,
.badge.bg-dark,
.badge.text-bg-dark,
.text-bg-dark {
    background-color: #ff6699 !important;
    border-color: #ff6699 !important;
    color: #fff !important;
}

.spinner-lite {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0,0,0,.15);
    border-top-color: rgba(0,0,0,.6);
    border-radius: 50%;
    display: inline-block;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* チャットオーバーレイ */
#agentChat {
    position: relative;
}

.agent-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(1px);
}

.agent-overlay-box {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    padding: .75rem 1rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* d-none 互換（Bootstrap未使用時でも非表示にできる） */
.d-none {
    display: none !important;
}


.msg-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: .5rem;
    margin: .25rem 0;
}

/* 追加：バブル色を固定 */
.bubble-user {
    background: #ffe6eb; /* 薄いピンク */
    color: #333;
}

.bubble-assistant {
    background: #ffffff; /* 常に白 */
    color: #333;
    border: 1px solid rgba(0,0,0,.06);
}

#agentGeoSearch, #agentClear {
    white-space: nowrap;
}

/* === 音声入力中の見た目（ワンショット） === */
.btn-listening {
    background-color: #ffb3c6 !important; /* 既存ピンクより薄め */
    border-color: #ffb3c6 !important;
    color: #fff !important;
    box-shadow: 0 0 0 .25rem rgba(255,102,153,.25);
}

.btn-listening:disabled {
    opacity: 1 !important; /* disabled でも色を保つ */
}

/* フッターの並びボタンを同じ幅にする */
.btn-eq {
    min-width: 110px;
}

.brand-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand-badge { /* 左の「Smart Translation」バッジ */
    height: 140px;
    width: auto;
}

.brand-title { /* 中央ブロック */
    flex: 1 1 auto;
    text-align: center;
}

.brand-wordmark { /* 「Smart Designer」文字ロゴ */
    height: 56px;
    width: auto;
}

.brand-sub { /* ~ Smart Translation ~ の下段テキスト */
    margin-top: .25rem;
    letter-spacing: .06em;
    color: #cc3366;
    opacity: .9;
    font-weight: 600;
}

.section-logo { /* Travel Agent 見出しロゴ */
    height: 56px;
    width: auto;
}

/* 画面が極端に狭いときだけ縦積みにして重なり回避（任意） */
@media (max-width: 420px) {
    .btn-eq {
        width: 100%;
    }

    .mt-3.d-flex.justify-content-end {
        flex-wrap: wrap;
    }
}

.site-footer {
  background: #fff;
}
.site-footer .nav-link {
  color: #ff6699;
}
.site-footer .nav-link:hover {
  color: #cc3366;
  text-decoration: underline;
}

.hover-lift {
    transition: transform .12s ease, box-shadow .12s ease;
}

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
    }

/* レスポンシブ微調整 */
@media (max-width: 576px) {
    .brand-badge {
        height: 80px;
    }

    .section-travel {
        width: 50px;
    }

    .brand-wordmark {
        width: 100%; /* 横幅いっぱい */
        height: 50px; /* 縦の高さを指定（お好みで） */
        object-fit: cover; /* トリミング（切り抜き） */
        object-position: center center; /* 中央を基準にトリミング */

        display: block;
    }

    .brand-sub {
        width: 100%; /* 横幅いっぱい */
        height: 15px; /* 縦の高さを指定（お好みで） */
        object-fit: cover; /* トリミング（切り抜き） */
        object-position: center center; /* 中央を基準にトリミング */
   
        display: block;
        font-size:12px;
    }
}

@media (min-width: 577px) {
    .brand-badge {
        height: 100px;
    }

    .brand-wordmark {
        width: 100%; /* 横幅いっぱい */
        height: 80px; /* 縦の高さを指定（お好みで） */
        object-fit: cover; /* トリミング（切り抜き） */
        object-position: center center; /* 中央を基準にトリミング */

        display: block;
    }

    .brand-sub {
        width: 100%; /* 横幅いっぱい */
        height: 20px; /* 縦の高さを指定（お好みで） */
        object-fit: cover; /* トリミング（切り抜き） */
        object-position: center center; /* 中央を基準にトリミング */

        display: block;
    }

    .section-travel {
        width: 180px;
    }
}

@media (min-width: 992px) {
    .brand-badge {
        height: 120px;
    }

    .brand-wordmark {
        width: 50%; /* 横幅いっぱい */
        height: 80px; /* 縦の高さを指定（お好みで） */
        object-fit: cover; /* トリミング（切り抜き） */
        object-position: center center; /* 中央を基準にトリミング */
        margin:0 auto;
        margin-left:170px;
        display: block;
    }

    .brand-sub {
        width: 50%; /* 横幅いっぱい */
        height: 20px; /* 縦の高さを指定（お好みで） */
        object-fit: cover; /* トリミング（切り抜き） */
        object-position: center center; /* 中央を基準にトリミング */
        margin: 0 auto;
        margin-left: 170px;
        display: block;
    }

    .section-travel {
        width: 200px;
    }

}