/* ===== ライフSFA スマホ対応の共通調整 ===== */

/* スマホ（767px以下）向け */
@media (max-width: 767.98px) {
    /* iOSで入力フォーカス時に画面が自動ズームしないよう16px以上にする */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 16px;
    }

    /* 見出しを少しコンパクトに */
    header h1.h4 {
        font-size: 1.1rem;
    }

    /* ボタンを指で押しやすい高さに */
    .btn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* テーブルの文字を少し小さくして収まりやすく（横スクロールは table-responsive 側で対応） */
    .table {
        font-size: 0.9rem;
    }
}

/* 一覧の行（クリックで詳細へ）のタップ時フィードバック */
.row-link:hover,
.row-link:active {
    background-color: #f1f5ff;
}

/* PC版・顧客一覧テーブルのフォントを小さめに（13px） */
.customer-list-table {
    font-size: 13px;
}

/* スマホ版・ダッシュボードの各セクション本文は「翌日以降のアポ」と同じ12pxに統一 */
@media (max-width: 767.98px) {
    .dashboard-sections .card-body,
    .dashboard-sections .card-body a,
    .dashboard-sections .card-body span,
    .dashboard-sections .card-body h6,
    .dashboard-sections .card-body p {
        font-size: 12px;
    }
}

/* ヘッダー（ナビバー）を常に上部に固定して追従（PC・スマホ共通）。上下paddingも詰める */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
/* PCでは各メニューリンクの上下paddingも詰めてヘッダーを薄く */
@media (min-width: 992px) {
    .navbar .nav-link {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
}

/* ===== PC用の左サイドメニュー（lg以上で表示。スマホは上部ナビのまま） ===== */
.app-sidebar {
    width: 220px;
    flex-shrink: 0;                 /* 本文に押されて縮まないように */
    position: sticky;
    top: 46px;                      /* 上部固定ヘッダーの高さぶん下げる */
    height: calc(100vh - 46px);     /* 画面の残り高さいっぱい。長い場合は中でスクロール */
    overflow-y: auto;
}
.app-sidebar .nav-link {
    color: #333;
    padding: 0.45rem 1rem;
}
.app-sidebar .nav-link:hover {
    background-color: #cfe2ff;              /* マウスオーバーははっきり分かる青 */
    color: #0d6efd;
}
.app-sidebar .nav-link.active {
    background-color: #e7f0ff;
    color: #0d6efd;
    font-weight: 600;
    border-right: 3px solid #0d6efd;
}

/* 本文側：フレックス子要素が横長テーブルでサイドバーを押し出さないように */
.app-main {
    min-width: 0;
}

/* ページ見出しバー（チャット/カレンダー/開始報告等）の上下paddingをほぼ0に */
.page-header-bar {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

/* ===== チャット：吹き出しの枠をなくしてプレーン表示 ===== */
.chat-msg-text {
    word-break: break-word; /* 長いURL等もはみ出さず折り返す */
    line-height: 1.5;
}
/* 自分宛て(TO)メッセージは左の細い色帯だけで強調（枠は付けない） */
.chat-msg-to-me {
    border-left: 3px solid var(--bs-warning);
    padding-left: 0.5rem;
}

/* 会話ごとに背景色を交互に（帯状・左右端まで） */
#chat-messages {
    padding: 0;          /* 帯を左右端まで届かせる */
    position: relative;  /* 未読区切りへのスクロール位置計算の基準 */
}

/* 「ここから未読」区切り線（赤い線＋中央に文字） */
.chat-unread-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 1rem;
    color: #dc3545;
    font-size: 0.8rem;
    font-weight: 600;
}
.chat-unread-divider::before,
.chat-unread-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #dc3545;
}
#chat-messages .chat-msg {
    margin-bottom: 0;      /* 帯を隙間なく連続させる */
    padding: 0.75rem 1rem; /* 帯の内側余白 */
}
#chat-messages .chat-msg:nth-child(odd) {
    background-color: #ffffff; /* 白 */
}
#chat-messages .chat-msg:nth-child(even) {
    background-color: #eaf4ee; /* 薄いミント */
}

/* 入力エリア：本文を上の全幅、その下に 左[TO] …… 右[クリップ][送信] を一行（PC・スマホ共通） */
.chat-compose {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.chat-compose #chat-body    { order: 1; flex: 0 0 100%; }      /* 本文：上に全幅 */
.chat-compose .chat-to-wrap { order: 2; flex: 0 0 auto; }      /* TO：下段の左 */
.chat-compose .chat-side    {
    order: 3;
    flex-direction: row;   /* クリップと送信を横並び */
    align-items: center;
    margin-left: auto;     /* 右端へ寄せる */
}
/* 送信ボタンを押しやすく横幅を広げる */
.chat-compose .chat-side #chat-send {
    min-width: 6rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* スマホ：本文を右端まで使い、フォントを少し小さく（配置は上の共通ルール） */
@media (max-width: 767.98px) {
    /* 帯の内側余白を詰めて、右の余白をほぼ0に */
    #chat-messages .chat-msg {
        padding: 0.6rem 0.4rem 0.6rem 0.5rem;
    }
    /* 吹き出し幅の80%制限を解除して画面いっぱいに */
    #chat-messages .chat-msg-body {
        max-width: 100% !important;
    }
    /* 本文ブロックの左右マージンを詰めて右端まで届かせる */
    #chat-messages .chat-msg:not(.flex-row-reverse) .chat-msg-body {
        margin-right: 0.25rem !important;
    }
    #chat-messages .chat-msg.flex-row-reverse .chat-msg-body {
        margin-left: 0.25rem !important;
    }
    /* 話している文章のフォントを少し小さく */
    .chat-msg-text {
        font-size: 0.85rem;
    }

    /* 添付（メディア＋保存ボタン）が画面幅からはみ出さないように収める */
    #chat-messages .chat-att {
        display: flex;      /* inline-flex だと固定幅メディアで横にはみ出すため */
        max-width: 100%;
    }
    #chat-messages .chat-att-media {
        min-width: 0;       /* flex子を縮められるようにする */
    }
    #chat-messages .chat-att img,
    #chat-messages .chat-att video,
    #chat-messages .chat-att audio {
        max-width: 100% !important;
        height: auto;
    }
}

/* スマホ用カードリスト（顧客一覧など） */
.mobile-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
}
.mobile-card:active {
    background: #f1f5ff;
}