/* sustgraph-client 全画面共通スタイル。CSSはこのファイルに一括して記載する。 */

/* ---- キーカラー ----
   cbam-client（/Users/t-okada/Projects/Booost/cbam/cbam-client）に合わせ、@vaadin/vaadin-lumo-styles
   （main.tsでlumo.cssをインポート）を有効化し、Vaadinコンポーネントの見た目をLumoテーマにする。
   ブランドカラーはcbam-clientと同じく--lumo-*トークンを上書きすることで反映する。 */
html {
    --lumo-primary-color: #83a603 !important;
    --lumo-primary-color-50pct: #83a603 !important;
    --lumo-primary-text-color: #294018 !important;
    --lumo-font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif !important;
}

vaadin-grid::part(selected-row) {
    border: 1px solid #83a603;
}

vaadin-grid::part(row):hover {
    border: 1px solid #83a603;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--lumo-font-family, "Helvetica Neue", Arial, sans-serif);
    background: var(--lumo-shade-5pct, #fff);
    /* 全体的にテキスト選択を不可にし、入力フィールドとチャットの吹き出し内のみ選択可能にする
       （下記「テキスト選択の例外」を参照）。 */
    user-select: none;
}

/* ---- テキスト選択の例外 ----
   入力フィールド（<input>/<textarea>、light DOMの子として描画される）と
   チャットの吹き出し（vaadin-messageのcontentパート）のみ、テキスト選択を許可する。 */

input,
textarea {
    user-select: text;
}

sg-chat-view vaadin-message-list vaadin-message::part(content) {
    user-select: text;
}

sg-app-root {
    display: block;
    height: 100vh;
}

/* ---- ログイン画面 ----
   cbam-client（/Users/t-okada/Projects/Booost/cbam/cbam-client）のログイン画面
   （背景スライドショー＋フォームの二分割レイアウトと、メイン画面への折りたたみトランジション）に合わせる。 */

sg-login-view {
    position: fixed;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--lumo-base-color, #fff);
    z-index: 1;
}

sg-login-view .login-image-panel {
    position: relative;
    width: 50%;
    flex-shrink: 0;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
    transition:
        width 400ms ease-in-out,
        opacity 400ms ease-in-out;
}

sg-login-view .login-image-slide {
    position: absolute;
    inset: 24px;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    object-fit: cover;
    border-radius: 24px;
    opacity: 0;
    transition: opacity 1500ms ease-in-out;
}

sg-login-view .login-image-slide.active {
    opacity: 1;
}

sg-login-view .login-form-panel {
    width: 50%;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    box-sizing: border-box;
    overflow: hidden;
    transition:
        width 400ms ease-in-out,
        opacity 400ms ease-in-out;
}

sg-login-view .login-image-panel.panel-exit,
sg-login-view .login-form-panel.panel-exit {
    width: 0%;
    opacity: 0;
}

sg-login-view .login-title-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin-bottom: 16px;
}

sg-login-view .login-title-image {
    width: 100%;
    max-width: 220px;
}

sg-login-view .login-subtitle-label {
    width: 100%;
    font-size: x-small;
    font-weight: 700;
    text-align: center;
    color: var(--lumo-secondary-text-color, #6b7280);
    margin-top: 8px;
}

sg-login-view .login-field {
    width: 100%;
    max-width: 320px;
    margin: 8px 0;
}

sg-login-view .login-button {
    height: 2.5rem;
    margin: 16px 0;
    background-color: transparent;
    color: black;
}

@keyframes login-field-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

@keyframes main-element-fade-in {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- 汎用ローディングスピナー ----
   チャットの回答待ち（吹き出しの「・・・」明滅）以外の、サーバのレスポンス待ちに使う
   汎用の回転インジケータ。#cccの円状の溝に、#289028の円弧が重なってぐるぐる回る。 */
.sg-spinner {
    box-sizing: border-box;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #289028;
    animation: sg-spinner-rotate 0.8s linear infinite;
}

/* 画面中央に表示する大きめのスピナー（チャット画面のローディングオーバーレイなどに使う）。 */
.sg-spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

@keyframes sg-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* ---- チャット画面 ---- */

sg-chat-view {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* セッション作成中・履歴読み込み中・削除中に、画面中央にスピナーを表示するオーバーレイ。
   display: flexをtype selector経由で指定しているため、そのままではブラウザ標準の
   [hidden]{display: none}（UA由来）より優先されてしまい、hidden属性による非表示が効かない
   （sg-main-view .app-content-body > [hidden]と同じ理由）。ここで明示的に上書きする。 */
sg-chat-view .chat-loading-overlay[hidden] {
    display: none;
}

sg-chat-view .chat-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lumo-base-color, #fff);
    z-index: 1;
}

/* 入力フィールドの上下のスペーサー。chat-centered状態の間だけ伸びて、
   入力フィールドを画面中央に押し出す（セッション開始後・履歴表示時は縮んで下端に固定される）。 */
sg-chat-view .chat-spacer {
    flex: 0 0 auto;
    transition: flex-grow 0.4s ease;
}

sg-chat-view.chat-centered .chat-spacer {
    flex-grow: 1;
}

/* 新規チャットへのリセット時・履歴読み込み時は、アニメーションさせず即座に切り替える。 */
sg-chat-view.chat-no-transition .chat-spacer,
sg-chat-view.chat-no-transition vaadin-message-list {
    transition: none !important;
}

sg-chat-view vaadin-message-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    transition: flex-grow 0.4s ease;
}

/* chat-centered状態ではメッセージ一覧は表示するものがなく、スペーサーにスペースを譲る。 */
sg-chat-view.chat-centered vaadin-message-list {
    flex-grow: 0;
}

sg-chat-view .chat-input-field {
    flex: none;
    margin: 16px;
    --vaadin-input-field-placeholder-color: rgba(0, 0, 0, 0.5);
}

sg-chat-view .chat-input-field::part(input-field) {
    padding-inline: 8px;
}

sg-chat-view .chat-input-field input[slot="input"]::placeholder {
    font-weight: 300;
}

/* Sendボタンをフィールド内部（末尾）に埋め込み、アイコンのみの見た目にする。 */
sg-chat-view .chat-input-field .chat-send-button {
    padding: 0;
    min-width: 0;
    color: var(--lumo-contrast-70pct, #4a4a4a);
}

sg-chat-view .chat-input-field .chat-send-button:hover {
    color: var(--lumo-primary-text-color, #294018);
}

/* Claudeのような吹き出し形式にする。アバターとユーザ名は表示しない。
   自分の発言（theme="outgoing"）は右寄せ、相手の発言（デフォルト）は左寄せにする。 */
sg-chat-view vaadin-message-list vaadin-avatar {
    display: none;
}

sg-chat-view vaadin-message-list vaadin-message {
    width: 100%;
    box-sizing: border-box;
}

sg-chat-view vaadin-message-list vaadin-message::part(header) {
    display: none;
}

sg-chat-view vaadin-message-list vaadin-message::part(content) {
    flex-grow: 0;
    max-width: 75%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    background: var(--lumo-contrast-5pct, #f1f1f1);
}

sg-chat-view vaadin-message-list vaadin-message:not([theme~="outgoing"]) {
    justify-content: flex-start;
}

sg-chat-view vaadin-message-list vaadin-message:not([theme~="outgoing"])::part(content) {
    border-bottom-left-radius: 0.25rem;
}

sg-chat-view vaadin-message-list vaadin-message[theme~="outgoing"] {
    justify-content: flex-end;
}

sg-chat-view vaadin-message-list vaadin-message[theme~="outgoing"]::part(content) {
    background: rgb(236, 244, 235);
    border-bottom-right-radius: 0.25rem;
}

/* 回答待ちの間、システム側の吹き出しに表示する思考中インジケータ（「・・・」を明滅させる）。 */
sg-chat-view vaadin-message-list vaadin-message.chat-thinking-message vaadin-markdown {
    display: inline-block;
    animation: chat-thinking-blink 1.4s ease-in-out infinite;
}

@keyframes chat-thinking-blink {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

/* クイックリプライ（サーバが複数の規則・標準の該当を確認するため選択肢を返した場合）の行。
   通常は空で高さを持たず、ボタンが並ぶ時のみ表示される。
   ボタンが並ぶ際は角丸ボックスで全体を囲み、通常のメッセージと区別しやすくする。 */
sg-chat-view .chat-quick-reply-row {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

sg-chat-view .chat-quick-reply-row:not(:empty) {
    margin: 0 16px 8px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(40, 144, 40, 0.1); /* #289028、透明度0.1 */
    box-sizing: border-box;
}

sg-chat-view .chat-quick-reply-button {
    border-radius: 999px;
    border: 1px solid var(--lumo-contrast-20pct, #d0d0d0);
}

/* チャット画面最上段のタイトルバー（タイトル＋編集・削除ボタン）。
   セッションを持たない新規チャットの初期表示時は非表示にする。 */
sg-chat-view .chat-title-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lumo-contrast-10pct, #e0e0e0);
}

/* hidden属性が付与された場合（新規チャットの初期表示時）は、上のdisplay: flexより
   詳細度を上げて確実に非表示にする。 */
sg-chat-view .chat-title-bar[hidden] {
    display: none;
}

sg-chat-view .chat-title-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

sg-chat-view .chat-title-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* セッション作成中・履歴読み込み中・タイトル保存中・削除中に、タイトルの代わりに表示するスピナー。 */
sg-chat-view .chat-title-spinner {
    flex: none;
    margin-right: 0.25rem;
}

sg-chat-view .chat-title-icon-button {
    flex: none;
    padding: 0;
    min-width: 0;
    color: var(--lumo-contrast-60pct, #6b7280);
}

sg-chat-view .chat-title-icon-button:hover {
    color: var(--lumo-contrast-90pct, #1a1a1a);
}

/* 最下端に数ピクセルのマージンを設ける（vaadin-gridを使用する画面全体に適用する共通ルール） */
vaadin-grid {
    margin-bottom: 4px;
}

/* ---- メイン画面（メニューペイン＋コンテンツペイン） ---- */

sg-main-view {
    display: block;
    height: 100%;
}

sg-main-view .app-shell {
    display: flex;
    height: 100%;
}

sg-main-view .app-menu {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 220px;
    box-sizing: border-box;
    padding: 1rem 0.75rem;
    background: var(--lumo-base-color, #fff);
    border-right: 1px solid var(--lumo-contrast-10pct, #e0e0e0);
    overflow: hidden;
    transition:
        width 400ms ease-in-out,
        opacity 400ms ease-in-out;
}

/* ログイン画面からのトランジション演出中、幅0の空の器として折りたたんでおくための状態。 */
sg-main-view .app-menu.container-enter {
    width: 0 !important;
    opacity: 0;
    transition: none;
}

/* ログイン画面（sg-login-view）のタイトル（title.svg＋サブタイトル）と同じ見た目にする。 */
sg-main-view .app-menu-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0.5rem 0 1.25rem;
}

sg-main-view .app-menu-title-image {
    width: 100%;
    max-width: 140px;
}

sg-main-view .app-menu-subtitle-label {
    width: 100%;
    font-size: x-small;
    font-weight: 700;
    text-align: center;
    color: var(--lumo-secondary-text-color, #6b7280);
    margin-top: 8px;
}

sg-main-view .app-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* 角丸ボックスを持たないフラットな項目にする（vaadin-buttonのtheme="tertiary"により背景・枠は既にない）。
   非アクティブ項目は半透明にし、選択中の項目のみ不透明にすることで選択状態を表す。 */
sg-main-view .app-menu-item {
    justify-content: flex-start;
    width: 100%;
    color: #000 !important;
    opacity: 0.5;
    transition: opacity 150ms ease;
}

sg-main-view .app-menu-item::part(label) {
    width: 100%;
    text-align: left;
}

sg-main-view .app-menu-item:not(.app-menu-item-active):hover {
    opacity: 0.75;
}

sg-main-view .app-menu-item-active {
    opacity: 1;
}

/* ---- チャット履歴一覧（Claudeのように左メニュー内に表示する） ---- */

sg-main-view .app-menu-history {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 1rem;
}

sg-main-view .app-menu-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
}

sg-main-view .app-menu-history-label {
    font-size: x-small;
    font-weight: 700;
    color: var(--lumo-secondary-text-color, #6b7280);
}

sg-main-view .app-menu-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.5rem;
    overflow-y: auto;
    min-height: 0;
}

sg-main-view .app-menu-history-item {
    justify-content: flex-start;
    width: 100%;
    color: #000 !important;
    opacity: 0.6;
    font-weight: 400;
    font-size: small;
}

sg-main-view .app-menu-history-item::part(label) {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

sg-main-view .app-menu-history-item:hover {
    opacity: 0.85;
}

sg-main-view .app-menu-history-item-active {
    opacity: 1;
    background: var(--lumo-contrast-5pct, #f1f1f1);
    border-radius: var(--lumo-border-radius-m, 4px);
}

sg-main-view .app-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    /* app-content-headerがトランジション中にopacityでフェードインする際、背後にbodyの
       灰色（--lumo-shade-5pct）が透けて灰色に見えてしまうのを防ぐため、白背景を敷いておく。 */
    background: var(--lumo-base-color, #fff);
}

sg-main-view .app-content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--lumo-base-color, #fff);
    border-bottom: 1px solid var(--lumo-contrast-10pct, #e0e0e0);
    flex: none;
    transition: opacity 400ms ease-in-out;
}

/* ログイン画面からのトランジション演出中、非表示にしておくための状態。 */
sg-main-view .app-content-header.container-enter {
    opacity: 0;
    transition: none;
}

sg-main-view .app-account-button {
    padding: 0;
    min-width: 0;
}

/* アカウントボタン：灰色の円のなかにvaadin:userアイコンを描画する。 */
sg-main-view .app-account-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lumo-contrast-20pct, #ccc);
    color: var(--lumo-contrast-70pct, #4a4a4a);
}

sg-main-view .app-account-icon-circle vaadin-icon {
    width: 1.125rem;
    height: 1.125rem;
}

sg-main-view .app-content-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #ffffff;
}

/* sg-chat-view/sg-regulations-viewは type selector で display: flex を指定しているため、
   そのままではブラウザ標準の[hidden]{display: none}（UA由来）より優先されてしまい、
   hidden属性による表示切り替えが効かない。ここで明示的に上書きする。 */
sg-main-view .app-content-body > [hidden] {
    display: none !important;
}

sg-main-view .app-content-body > * {
    height: 100%;
}

/* ---- アカウントダイアログ ---- */

.account-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 360px;
    max-width: calc(100vw - 4rem);
}

.account-dialog-content vaadin-text-field {
    width: 100%;
}

.account-dialog-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 16px;
}

/* ---- パスワード変更ダイアログ ---- */

.password-change-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 360px;
    max-width: calc(100vw - 4rem);
}

.password-change-dialog-footer-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ---- 規則・標準一覧画面 ---- */

sg-regulations-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem 0;
}

sg-regulations-view .regulations-toolbar {
    flex: none;
    padding-bottom: 0.75rem;
}

sg-regulations-view .regulations-toolbar vaadin-text-field {
    width: 100%;
    /* placeholderは通常の入力文字より薄い色にする。 */
    --vaadin-input-field-placeholder-color: var(--lumo-disabled-text-color, #b0b0b0);
}

sg-regulations-view .regulations-toolbar vaadin-text-field input[slot="input"]::placeholder {
    font-weight: 300;
}

sg-regulations-view vaadin-progress-bar {
    flex: none;
    margin: 0 0 0.25rem 0;
}

sg-regulations-view vaadin-grid {
    flex: 1 1 auto;
    min-height: 0;
}

/* 規則・標準名は他カラムより目立たせるため太字にする。 */
.regulation-name-cell {
    font-weight: bold;
}

/* 規則・標準区分（規則=茶系/標準=緑系）を示す角丸バッジ。 */
.regulation-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.regulation-category-badge-empty {
    background: var(--lumo-contrast-20pct, #ccc);
    color: var(--lumo-secondary-text-color, #6b7280);
}

/* ---- 規則・標準の詳細ダイアログ（グリッドの行タップで表示） ---- */

.regulation-detail-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: calc(100vw - 4rem);
}

.regulation-detail-field {
    width: 100%;
}

/* vaadin-text-fieldは内部が一行入力（<input>）のため折り返しできない。長文になり得る
   項目はvaadin-text-area（<textarea>、readonly）で表示して折り返しを効かせる。それ以外の
   短い項目も、はみ出した場合は省略せず折り返す方針に合わせて<input>側にも指定しておく。 */
.regulation-detail-field input {
    white-space: normal;
    overflow-wrap: anywhere;
}

.regulation-detail-textarea textarea {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.regulation-detail-badge-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: fit-content;
}

.regulation-detail-badge-field-label {
    font-size: 0.8125rem;
    color: var(--lumo-secondary-text-color, #6b7280);
}