/*
    医院側のスタイル。
    **サポート側と詰め方を逆にする**（画面遷移 1.3）。余白を広く、文字を大きく、押す対象を大きく。
    診療中に数秒で操作を終えたい相手なので、情報密度を上げてはならない。
*/

:root {
    /* 日本語フォントをフォントスタックに補う（画面遷移 1.4）。 */
    --optalk-font: "Segoe UI", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    --optalk-gap: 16px;
}

html,
body {
    margin: 0;
    font-family: var(--optalk-font);
    /* Fluent の既定より大きくする（画面遷移 7 章 #2 の暫定値）。 */
    font-size: 16px;
    background-color: var(--neutral-layer-1, #faf9f8);
}

/*
    **ウィンドウの高さいっぱいを使う。**
    WebView2 のウィンドウは医院ごとに大きさが違い、利用者は縦に伸ばして使う。
    高さを指定しないと、伸ばした分がそのまま入力欄の下の空白になり、
    <b>会話は狭いまま下に余白だけが増える</b>。増えた高さは会話へ渡す。
*/
html,
body,
#app {
    height: 100%;
}

.loading {
    padding: 32px;
    text-align: center;
    color: #605e5c;
}

.clinic {
    /* 幅は相対値で組む。WebView2 ウィンドウの大きさは医院ごとに違う（画面遷移 1.4）。 */
    max-width: 900px;
    margin: 0 auto;
    padding: var(--optalk-gap);
    /* 余った高さを @Body へ渡すため、ここも縦の flex にする。 */
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--optalk-gap);
}

.clinic-main {
    /* 単一カラム。1画面1目的（画面遷移 1.3）。 */
    display: flex;
    flex-direction: column;
    gap: var(--optalk-gap);
    /* min-height: 0 が無いと、中の会話が縮まずウィンドウを溢れる（flex の既定は縮まない）。 */
    flex: 1 1 auto;
    min-height: 0;
    /*
        一覧の画面（C-1 / C-4）で件数が多いときはここがスクロールする。
        会話の画面（C-2 / C-3）では中の .messages が高さを持つので、ここは溢れない。
    */
    overflow-y: auto;
}

/*
    **縮んでよいのは会話だけ。** 見出し・注意書き・入力欄が潰れると、
    「患者様の個人情報は入力しないでください」が読めなくなる（親仕様 10.3 は常時表示を求める）。
*/
.clinic-main > * {
    flex: 0 0 auto;
}

h1 {
    font-size: 20px;
    margin: 8px 0;
}

/* ── C-0 接続中 ─────────────────────────────────────────── */
.connecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 16px;
}

.connecting-text {
    font-size: 18px;
}

.connecting-slow {
    color: #605e5c;
}

/* ── C-1 一覧 ───────────────────────────────────────────── */
.primary-action {
    /* 「新しく問い合わせる」を最も目立たせる。 */
    display: flex;
    margin: 8px 0 16px;
}

.primary-action fluent-button {
    width: 100%;
    height: 56px;
    font-size: 18px;
}

.secondary-action {
    margin-top: 24px;
}

.org-note {
    color: #605e5c;
    margin: 0;
}

.card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card {
    padding: 16px;
    border: 1px solid #edebe9;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.card:hover {
    border-color: #c7c5c3;
}

.card-title {
    font-size: 17px;
    font-weight: 600;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    color: #605e5c;
}

/* ── C-2 新規（チャットの中で種類を選ばせる）─────────────── */
/*
   選択肢はサポート側の吹き出しの下に、左寄せで折り返して並べる。
   診療中に押すため、**高さを 44px 以上取る**（画面遷移 1.3。医院側は密度を上げない）。
*/
.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-start;
    max-width: 100%;
}

.choices fluent-button {
    height: 44px;
}

/* 「この中に無い」は選択肢そのものではないので、並びの中で一段弱く見せる。 */
.choices .is-escape {
    color: #605e5c;
}

.choice-redo {
    align-self: flex-end;
}

.form-note {
    color: #605e5c;
    margin: 0;
}

/* ── C-3 会話 ───────────────────────────────────────────── */
.conversation-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/*
    **余った高さは会話が受け取る。** 入力欄は下に貼り付いたまま、増えた分だけ会話が広がる。
    はみ出す分はここだけがスクロールする（ページ全体をスクロールさせると、
    スクロールするたびに入力欄が画面外へ出る）。
*/
.messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 吹き出しは自作する。Fluent UI Blazor に吹き出しコンポーネントは無い（画面遷移 1.4）。 */
.message {
    max-width: 78%;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #edebe9;
    white-space: pre-wrap;
    word-break: break-word;
}

.message.is-mine {
    align-self: flex-end;
    background: #e8f1fb;
    border-color: #cfe2f6;
}

.message.is-support {
    align-self: flex-start;
}

.message.is-system {
    align-self: center;
    max-width: 100%;
    background: none;
    border: none;
    font-size: 13px;
    color: #605e5c;
}

.message.is-sending {
    opacity: 0.55;
}

.message.is-failed {
    border-color: #d13438;
}

.message-time {
    margin-top: 6px;
    font-size: 12px;
    color: #605e5c;
}

.message-retry {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    color: #d13438;
}

.composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.composer-actions {
    display: flex;
    justify-content: space-between;
}

/* C-2 は送信だけなので右端へ寄せる（C-3 は「解決しました」と 2 つ並ぶ）。 */
.composer-actions.is-single {
    justify-content: flex-end;
}

.composer-actions fluent-button {
    height: 48px;
}

/* ── C-E 接続できません ─────────────────────────────────── */
.error-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.error-phone {
    font-size: 18px;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: #fde7e9;
    color: #a4262c;
}

/* 起動できなかったときの素の HTML（index.html の watchdog）。 */
.boot-error {
    font-weight: 600;
}

.boot-reason {
    color: #605e5c;
    font-size: 13px;
    word-break: break-word;
}

.boot-phone {
    margin-top: 16px;
}