/* /browser/ (新ぎじろぐ) マルチカラム UI */

/* /browser/ 専用レイアウト (navbar/footer なし) なので画面全体を使う */
body { margin: 0; }

#wb-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.wb-sidebar {
    flex: 0 0 110px;
    background: #f1f3f5;
    border-right: 1px solid #dee2e6;
    padding: .5rem;
    display: flex;
    flex-direction: column;
}

.wb-village-name { word-break: break-all; }

.wb-clock-area { margin-top: auto; }

.wb-main {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .5rem;
    background: #fff;
}

.wb-columns {
    display: flex;
    height: 100%;
    gap: .5rem;
}

.wb-column {
    flex: 0 0 360px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.wb-column-head, .wb-column-bottom {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-wrap: nowrap;
}

.wb-column-bottom {
    border-bottom: none;
    border-top: 1px solid #dee2e6;
}

.wb-column-head .btn, .wb-column-bottom .btn {
    flex-shrink: 0;
}

.wb-column-head .wb-flex, .wb-column-bottom .wb-flex { flex: 1; }

.wb-column-body {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}

/* 発言ブロックの実体は static/css/say-message.css に集約 (旧 .message 準拠)。 */
/* ここではマルチカラム特有の調整のみ。 */
.wb-column-body .say-row { margin-bottom: 12px; }
.wb-column-body .say-row .say-message,
.wb-column-body .say-row .message { word-break: break-word; }
/* 設定: 時刻表示を非表示にする */
body.wb-hide-time .wb-column-body .say-meta .wb-meta-time { display: none; }

.wb-add-column {
    flex: 0 0 200px;
    border: 2px dashed #adb5bd;
    border-radius: .25rem;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    color: #495057;
}

.wb-memo-area textarea { font-size: .85rem; }
.wb-memo-area .form-text { font-size: .7rem; }

/* 簡易ダーク (設定モーダル ON 時) */
body.wb-dark { background: #1f1f23; color: #ddd; }
body.wb-dark .wb-sidebar { background: #2a2a30; border-color: #3a3a40; color: #ddd; }
body.wb-dark .wb-main { background: #1f1f23; }
body.wb-dark .wb-column { background: #2a2a30; border-color: #3a3a40; }
body.wb-dark .wb-column-head, body.wb-dark .wb-column-bottom {
    background: #34343a; border-color: #3a3a40;
}
body.wb-dark .wb-column-body .say-row .message { background-color: #2f2f35; border-color: #3a3a40; color: #eee; }
body.wb-dark .wb-column-body .say-row .message.say-bg-danger    { background-color: #4a2326; border-color: #6c2a32; color: #f8d7da; }
body.wb-dark .wb-column-body .say-row .message.say-bg-info      { background-color: #1f3a44; border-color: #2c4f5b; color: #b8e2f0; }
body.wb-dark .wb-column-body .say-row .message.say-bg-whitegray { background-color: #3a3a40; color: #ddd; }
body.wb-dark .wb-column-body .say-meta { color: #adb5bd; }
body.wb-dark .wb-add-column { background: #2a2a30; border-color: #555; color: #ddd; }

/* フィルターアイコン */
.wb-filter-icon { cursor: pointer; opacity: 1; transition: opacity .15s; display: inline-block; }
.wb-filter-icon.wb-off { opacity: 0.3; }
.wb-filter-icon .wolf-icon { width: 36px; height: 36px; background-size: 36px 36px; border-radius: 50%; }
.wb-filter-kbn {
    cursor: pointer; display: inline-block; min-width: 2.5em;
    padding: .2rem .4rem; text-align: center; color: #fff; border-radius: .25rem;
    transition: opacity .15s;
}
.wb-filter-kbn.wb-off { opacity: 0.3; }