/* =========================================
   閲覧ページ（詳細・プレビュー）用デザイン (強制適用版)
   ========================================= */

/* ラッパー自体のフォント調整 */
.mpm-single-view {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

/* 1. 物件詳細テーブル */
.mpm-single-view table.mpm-view-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #999 !important;
    margin-bottom: 30px !important;
    table-layout: fixed !important; /* 幅を固定して均等に */
}

/* ヘッダーセル */
.mpm-single-view .mpm-view-table th {
    border: 1px solid #bbb !important;
    padding: 15px 18px !important;
    background: #f2f2f2 !important;
    width: 25% !important;
    font-weight: bold !important;
    color: #333 !important;
    vertical-align: middle !important;
}

/* データセル */
.mpm-single-view .mpm-view-table td {
    border: 1px solid #bbb !important;
    padding: 15px 18px !important;
    background: #fff !important;
    color: #444 !important;
    vertical-align: middle !important;
    word-break: break-all; /* 長いURL等で崩れないように */
}

/* 2. 料金プランテーブル */
.mpm-single-view table.mpm-view-price-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #999 !important;
    margin-bottom: 20px !important;
}

.mpm-single-view .mpm-view-price-table th, 
.mpm-single-view .mpm-view-price-table td {
    border: 1px solid #bbb !important;
    padding: 12px 15px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 料金表ヘッダー */
.mpm-single-view .mpm-view-price-table th {
    background: #555 !important;
    color: #fff !important;
    font-weight: bold !important;
}

/* キャッチコピー */
.mpm-catch-copy-box {
    border: 3px solid #ff9800 !important;
    background: #fff8e1 !important;
    padding: 20px !important;
    margin: 30px 0 20px !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
    text-align: center !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* 見出し */
h3.mpm-header {
    background: #333 !important;
    color: #fff !important;
    padding: 12px 15px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    border-radius: 3px !important;
    font-size: 18px !important;
    border: none !important;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .mpm-single-view .mpm-view-table th, 
    .mpm-single-view .mpm-view-table td {
        display: block !important;
        width: 100% !important;
    }
    .mpm-single-view .mpm-view-table th {
        background: #e0e0e0 !important;
        border-bottom: none !important;
    }
}

/* =========================================
   LINE風チャット UI
   ========================================= */
.mpm-chat-timeline {
    background: #7494c0; /* LINE風の背景色 */
    padding: 20px;
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    margin-bottom: 0; /* 入力エリアとくっつけるため */
}

/* メッセージの行（左右配置用） */
.mpm-chat-row {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-end; /* 時間を下揃え */
}

/* 自分のメッセージ（右側・緑） */
.mpm-chat-row.mine {
    justify-content: flex-end;
}
.mpm-chat-row.mine .mpm-chat-bubble {
    background: #8de055;
    color: #000;
    border-radius: 15px;
    border-top-right-radius: 0; /* 吹き出しのしっぽ */
    margin-left: 5px;
}
.mpm-chat-row.mine .mpm-chat-meta {
    text-align: right;
    margin-right: 5px;
}

/* 相手のメッセージ（左側・白） */
.mpm-chat-row.theirs {
    justify-content: flex-start;
}
.mpm-chat-row.theirs .mpm-chat-bubble {
    background: #fff;
    color: #000;
    border-radius: 15px;
    border-top-left-radius: 0; /* 吹き出しのしっぽ */
    margin-right: 5px;
}
.mpm-chat-row.theirs .mpm-chat-meta {
    text-align: left;
    margin-left: 5px;
}

/* 共通バブルスタイル */
.mpm-chat-bubble {
    padding: 8px 12px;
    position: relative;
    max-width: 70%;
    word-wrap: break-word;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    line-height: 1.4;
}

/* メタ情報（日時） */
.mpm-chat-meta {
    font-size: 10px;
    color: #fff; /* 背景が青系なので白文字 */
    min-width: 60px;
    margin-bottom: 2px;
}

/* メッセージ入力エリア */
.mpm-chat-input-area {
    display: flex;
    gap: 10px;
    background: #eee;
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
    align-items: center;
}

#mpm-chat-text {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    height: 50px;
    resize: none;
}

.mpm-chat-btn {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 0 20px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.mpm-chat-btn:hover {
    background: #005a87;
}

.mpm-chat-file-btn {
    font-size: 20px;
    padding: 0 10px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    color: #555;
}

/* =========================================
   ★追加: 新機能用スタイル
   ========================================= */

/* 1. 検索結果の料金表示 */
.mpm-search-price-row {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.mpm-search-price-row .price-tag {
    background: #f0f7fb;
    border: 1px solid #0073aa;
    color: #0073aa;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
}
.mpm-search-price-row .price-tag small {
    color: #555;
    font-weight: normal;
    margin-right: 3px;
}

/* 2. スマホでのテーブルレイアウト修正 (普通賃貸など) */
@media (max-width: 600px) {
    .mpm-view-table th, .mpm-view-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mpm-view-table th {
        background: #eee !important;
        border-bottom: none !important;
    }
    .mpm-table input[type="text"], 
    .mpm-table input[type="number"] {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 5px !important;
    }
    /* 単位などは横並び維持 */
    .mpm-table td input[style*="width:"] { 
        width: auto !important; 
        display: inline-block !important; 
    }
}

/* 3. カレンダーUI調整 (Hタグリセット) */
#mpm-calendar .fc-toolbar-title {
    font-size: 1.2rem !important;
    margin: 0 !important;
    font-weight: bold !important;
    color: #333 !important;
}
#mpm-calendar h2 {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
}
#mpm-calendar .fc-button-primary {
    background-color: #0073aa !important;
    border-color: #0073aa !important;
}
#mpm-calendar {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
}