/* ===== TAxia Browser - グローバルスタイル ===== */
/* WPF版のカラーパレットをそのまま踏襲 */

:root {
    --bg-base:        #080E1A;
    --bg-surface:     #0D1525;
    --bg-card:        #111B2E;
    --bg-input:       #0A1220;
    --border:         #1E2D50;
    --accent:         #00AAFF;
    --accent-dim:     #0044AA;
    --text-primary:   #E0E8FF;
    --text-secondary: #8BAFD4;
    --text-dim:       #557799;
    --gradient-start: #002D77;
    --gradient-end:   #440099;
    --user-bubble-s:  #007ACC;
    --user-bubble-e:  #4A2FCC;
    --font:           'Segoe UI', 'Noto Sans JP', sans-serif;
    --radius-lg:      16px;
    --radius-md:      10px;
    --radius-sm:      6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    overflow: hidden;
}

/* ===== ローディング画面 ===== */
#loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 12px;
}
.loading-logo {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #00AAFF, #7744FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.loading-sub { font-size: 13px; color: var(--text-dim); letter-spacing: 2px; }
.loading-spinner-wrap { margin: 16px 0; }
.loading-ring {
    width: 40px; height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-msg { font-size: 12px; color: var(--text-dim); }

/* ===== アプリ全体レイアウト ===== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ===== ヘッダー ===== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 52px;
    background: linear-gradient(90deg, #0A1830, #0D1A40);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-sidebar-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.header-sidebar-btn:hover { background: rgba(0,170,255,0.1); border-color: var(--accent); color: white; }
.app-logo-badge {
    height: 34px; padding: 0 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0D1B3E, #0A1628);
    display: flex; align-items: center;
    border: 1px solid #00AAFF;
    box-shadow: 0 0 8px rgba(0,170,255,0.4);
}
a.app-logo-badge { text-decoration: none; cursor: pointer; }
a.app-logo-badge:hover, a.app-logo-badge:focus { text-decoration: none; outline: none; box-shadow: 0 0 12px rgba(0,170,255,0.6); }
.app-logo {
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    background: linear-gradient(90deg, #00AAFF, #7B5FFF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.app-subtitle {
    font-size: 15px; color: #A0B8D0;
    font-family: var(--font);
}
.app-subtitle strong {
    background: linear-gradient(90deg, #00AAFF, #00FFEE);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* ユーザーエリア */
.user-area {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm);
    border: 1px solid #1E3A5F;
    transition: background 0.15s;
}
.user-area:hover { background: rgba(255,255,255,0.05); }

.user-avatar {
    position: relative; width: 32px; height: 32px; flex-shrink: 0;
}
.user-avatar-photo {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover;
}
.user-avatar-initials {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #1E3A5F, #0F2040);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600; color: white;
    user-select: none;
}
.user-status-dot {
    position: absolute; bottom: 0; right: 0;
    width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--bg-base);
}
.dot-green  { background: #22CC66; }
.dot-orange { background: #FF9900; }

.user-info { display: flex; flex-direction: column; }
.user-name { font-size: 14px; color: white; line-height: 1.3; }
.user-dept { font-size: 11px; color: var(--text-secondary); }
.user-caret { font-size: 10px; color: var(--text-dim); }

/* ユーザーメニュー */
.user-menu-overlay {
    position: fixed; inset: 0; z-index: 200;
}
.user-menu {
    position: absolute; top: 50px; right: 16px;
    background: #0F1E35; border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 12px;
    min-width: 220px; z-index: 300;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.user-menu-info { padding: 4px 0 8px; }
.user-menu-name { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.user-menu-upn  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.user-menu-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.user-menu-logout {
    width: 100%; padding: 8px; background: transparent;
    border: 1px solid #C03030; border-radius: var(--radius-sm);
    color: #FF6B6B; font-size: 13px; cursor: pointer;
    transition: background 0.15s;
}
.user-menu-logout:hover { background: rgba(192,48,48,0.2); }

/* ===== メインコンテンツ ===== */
.app-main { flex: 1; overflow: hidden; }

/* ===== ポータルページ ===== */
.portal-container {
    height: 100%;
    overflow-y: auto;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.portal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
}
.portal-header-left { display: flex; flex-direction: column; gap: 6px; }
.greeting-text  { font-size: 13px; color: var(--text-dim); }
.portal-tagline { font-size: 22px; color: var(--text-primary); }

.admin-button {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-md);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-button:not(.disabled):hover {
    background: rgba(0,170,255,0.1); border-color: var(--accent);
    color: var(--text-primary);
}
.admin-button.disabled { opacity: 0.4; cursor: not-allowed; }

.section-label { display: flex; align-items: center; gap: 10px; }
.section-bar {
    display: inline-block; width: 3px; height: 16px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #378ADD, #7F77DD);
}
.section-title { font-size: 18px; color: var(--text-secondary); font-weight: 600; }

.status-bar {
    padding: 12px 16px; border-radius: var(--radius-md);
    background: rgba(192,48,48,0.15); border: 1px solid rgba(192,48,48,0.4);
    color: #FF8888; font-size: 13px;
}

/* AIカードグリッド */
.ai-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.loading-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ai-card-skeleton {
    height: 160px; border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--bg-card) 25%, #1A2840 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.ai-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}
.ai-card.enabled:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 24px rgba(0,170,255,0.15);
}
.ai-card.disabled { opacity: 0.4; cursor: default; }

.ai-card-icon-row {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; position: relative; width: 100%;
}
.icon-spacer { width: 80px; } /* バッジとバランスを取るダミー */
.ai-card-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #1A3A5C, #0F2040);
}
.ai-card-icon { font-size: 24px; }
.ai-badge {
    background: rgba(26,10,32,0.9); border-radius: var(--radius-sm);
    padding: 4px 8px; margin-left: 8px;
    font-size: 11px; color: #FF6B6B; font-weight: 600;
    white-space: nowrap; align-self: flex-start;
}
.ai-card-name    { font-size: 19px; font-weight: 600; color: white; margin-bottom: 4px; }
.ai-card-name-ja { font-size: 15px; color: var(--text-secondary); }

.portal-footer {
    margin-top: auto; padding-top: 16px;
    font-size: 16px; color: var(--text-secondary);
    display: flex; gap: 8px; align-items: center;
    justify-content: flex-end;
}
.footer-sep { color: #6A8FAF; }

/* ===== チャットページ ===== */
.chat-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

/* サイドバー */
.chat-sidebar {
    position: relative;
    display: flex; flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.25s ease;
}
.chat-sidebar.closed { border-right: none; }

.sidebar-inner {
    display: flex; flex-direction: column;
    height: 100%;
    background: #0D1220;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 0 8px 0 0;
    overflow: hidden;
}

/* サイドバートグルボタン */
.sidebar-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: #1A2545; border-color: var(--accent); color: white; }
.sidebar-header { padding: 12px; flex-shrink: 0; }
.sidebar-new-chat {
    width: 100%; padding: 8px; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-new-chat:hover { background: rgba(0,170,255,0.1); border-color: var(--accent); color: var(--text-primary); }
.sidebar-history {
    flex: 1; overflow-y: auto; padding: 0 8px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.history-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 8px; border-radius: var(--radius-sm);
    cursor: pointer; border: 1px solid transparent;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.history-item:hover       { background: rgba(0,170,255,0.06); }
.history-item.active      { background: #0D1A2E; border-color: var(--accent); }
.history-title {
    font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.history-item.active .history-title { color: white; }
.history-delete {
    background: transparent; border: none; color: var(--text-dim);
    font-size: 10px; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; opacity: 0; transition: opacity 0.1s;
}
.history-item:hover .history-delete { opacity: 1; }
.history-delete:hover { background: rgba(192,48,48,0.3); color: #FF6B6B; }

.sidebar-footer { padding: 8px; flex-shrink: 0; border-top: 1px solid var(--border); }
.delete-all-btn {
    width: 100%; padding: 6px; background: transparent;
    border: 1px solid #882020; border-radius: var(--radius-sm);
    color: #FF6B6B; font-size: 11px; cursor: pointer;
    transition: background 0.15s;
}
.delete-all-btn:hover { background: rgba(136,32,32,0.3); }

.sidebar-resizer {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 6px; cursor: ew-resize;
    background: transparent;
}
.sidebar-resizer:hover { background: rgba(0,170,255,0.2); }

/* チャットメイン */
.chat-main {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
    padding-right: 8px;
}

/* チャットヘッダー */
.chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg-surface); flex-shrink: 0;
    flex-wrap: nowrap; overflow: hidden;
}
.chat-header-left  { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.chat-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.back-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: #151D35; border: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.back-btn:hover { background: #1A2545; border-color: var(--accent); }

.chat-title-block { display: flex; flex-direction: column; gap: 2px; }
.chat-title-row   { display: flex; align-items: center; gap: 6px; }
.chat-title-icon  { font-size: 20px; }
.chat-title-main  { font-size: 22px; font-weight: 600; color: var(--text-primary); }
.chat-title-sub   { font-size: 22px; font-weight: 700; color: var(--accent); }
.chat-subtitle    { font-size: 11px; color: var(--text-secondary); margin-left: 2px; }

.font-btn-group {
    display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.font-btn {
    background: transparent; border: none; border-right: 1px solid var(--border);
    color: var(--text-secondary); font-size: 11px; padding: 4px 10px; cursor: pointer;
    transition: background 0.15s;
}
.font-btn:last-child { border-right: none; }
.font-btn:hover { background: rgba(0,170,255,0.1); color: var(--text-primary); }

.clear-btn, .hint-btn {
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 11px; padding: 4px 10px; cursor: pointer;
    transition: background 0.15s;
}
.clear-btn:hover, .hint-btn:hover { background: rgba(0,170,255,0.1); border-color: var(--accent); }

/* 注意書き・件数 */
.chat-notice-bar {
    padding: 6px 0;
    flex-shrink: 0;
}
.chat-notice-main {
    display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px;
}
.notice-icon { color: #FFCC00; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.notice-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; word-break: break-all; }
.chat-counter { font-size: 12px; color: var(--text-secondary); padding-left: 18px; line-height: 1.5; word-break: break-all; }

/* Powered by（チャット画面右下） */
.chat-powered-by {
    text-align: right; padding: 2px 0 4px;
    font-size: 13px; color: #8BAFD4; flex-shrink: 0;
}

/* メッセージエリア */
.chat-messages-wrap {
    flex: 1; overflow: hidden;
    background: #0D1220; border: 1px solid var(--border);
    border-radius: var(--radius-lg); margin: 0 0 8px 0;
}
.chat-messages {
    height: 100%; overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 4px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.msg-system {
    background: rgba(0,170,255,0.08); border: 1px solid rgba(0,170,255,0.2);
    border-radius: var(--radius-md); padding: 10px 16px;
    color: #7A9CC0; font-size: 12px; text-align: center;
    margin: 4px 60px 12px;
}

.msg-user-wrap { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.msg-user {
    background: linear-gradient(135deg, var(--user-bubble-s), var(--user-bubble-e));
    border-radius: 16px 16px 4px 16px;
    padding: 10px 16px; color: white; max-width: 600px;
    white-space: pre-wrap; word-break: break-word;
}

.msg-ai-wrap {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 4px; margin-right: 120px;
}
.ai-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, #002D77, #440099);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white; letter-spacing: 0.5px;
}
.msg-ai-col { display: flex; flex-direction: column; max-width: 600px; }
.msg-ai {
    background: #151D35; border: 1px solid var(--border);
    border-radius: 4px 16px 16px 16px;
    padding: 10px 16px; color: var(--text-primary);
    line-height: 1.7; word-break: break-word;
}

/* Markdownスタイル */
.msg-ai h1, .msg-ai h2, .msg-ai h3 { color: var(--accent); margin: 12px 0 6px; }
.msg-ai p  { margin-bottom: 8px; }
.msg-ai ul, .msg-ai ol { padding-left: 20px; margin-bottom: 8px; }
.msg-ai li { margin-bottom: 4px; }
.msg-ai code {
    background: #0A101E; border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 6px;
    color: #7AD4FF; font-family: 'Consolas', monospace; font-size: 0.9em;
}
.msg-ai pre {
    background: #080E1A; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px;
    overflow-x: auto; margin-bottom: 8px;
}
.msg-ai pre code { background: none; border: none; padding: 0; color: #7AD4FF; }
.msg-ai a { color: var(--accent); }
.msg-ai blockquote {
    border-left: 3px solid var(--border); padding-left: 12px;
    color: var(--text-secondary); margin-bottom: 8px;
}
.msg-ai table {
    border-collapse: collapse; margin-bottom: 8px; width: 100%;
}
.msg-ai th, .msg-ai td {
    border: 1px solid var(--border); padding: 6px 10px; font-size: 13px;
}
.msg-ai th { background: rgba(0,170,255,0.1); }

.msg-thinking {
    background: #151D35; border: 1px solid var(--border);
    border-radius: 4px 16px 16px 16px;
    padding: 12px 16px; display: flex; gap: 6px; align-items: center;
}
.dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    animation: blink 0.6s infinite alternate;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { from { opacity: 0.2; } to { opacity: 1; } }

.msg-copy-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.copy-btn {
    background: rgba(0,170,255,0.1); border: 1px solid rgba(0,170,255,0.2);
    border-radius: var(--radius-sm); color: var(--text-dim);
    font-size: 11px; padding: 3px 10px; cursor: pointer;
    transition: background 0.15s;
}
.copy-btn:hover { background: rgba(0,170,255,0.2); color: var(--text-secondary); }

/* アノテーション */
.annotation-bar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 6px; padding-left: 2px;
}
.annotation-label { font-size: 11px; color: var(--text-dim); }
.annotation-url {
    display: inline-flex; align-items: center;
    background: #0A3060; border: 1px solid #0088FF;
    border-radius: var(--radius-md); padding: 3px 8px;
    font-size: 11px; color: #55BBFF; text-decoration: none;
    transition: background 0.15s;
}
.annotation-url:hover { background: #0A4A90; }
.annotation-file {
    display: inline-flex; align-items: center;
    background: #0D2038; border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 3px 8px;
    font-size: 11px; color: var(--text-secondary);
}

/* コンテキスト長超過 */
.msg-context-exceeded {
    background: rgba(255,136,0,0.1); border: 1px solid rgba(255,136,0,0.35);
    border-radius: var(--radius-md); padding: 16px;
    color: #FFCC88; text-align: center;
    margin: 4px 60px 12px; line-height: 1.7;
}
.clear-btn-inline {
    margin-top: 10px; padding: 7px 20px;
    background: #CC6600; border: none; border-radius: var(--radius-md);
    color: white; font-size: 13px; cursor: pointer;
    transition: background 0.15s;
}
.clear-btn-inline:hover { background: #AA4400; }

/* 添付ファイルバッジ */
.attachment-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 8px 16px; border-top: 1px solid var(--border);
    background: var(--bg-surface); flex-shrink: 0;
}
.attachment-badge {
    display: flex; align-items: center; gap: 6px;
    background: #0D1A2E; border: 1px solid var(--accent);
    border-radius: var(--radius-md); padding: 4px 10px;
    font-size: 11px; color: var(--text-secondary);
}
.attachment-badge button {
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 10px; padding: 0;
}

/* 入力エリア */
.chat-input-area {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 0;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.chat-input-area.drag-over .chat-input-wrap { border-color: var(--accent); background: rgba(0,170,255,0.05); }

.chat-input-wrap {
    flex: 1; display: flex; flex-direction: column;
    background: #0D1220; border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}
.chat-input-wrap:focus-within { border-color: var(--accent); }

.attachment-badges-inline {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 10px 0;
}

.chat-input {
    flex: 1; min-height: 44px; max-height: 220px;
    background: transparent; border: none;
    padding: 12px 16px;
    color: var(--text-primary); font-family: var(--font); font-size: 13px;
    resize: none; outline: none; line-height: 1.5;
}
.chat-input:disabled { opacity: 0.5; }
.chat-input::placeholder { color: #6A8FAF; }

.chat-input-buttons { display: flex; align-items: center; gap: 8px; }
.attach-btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: #0D1220; border: 1px solid var(--border);
    font-size: 20px; cursor: pointer;
    transition: border-color 0.15s;
    text-decoration: none; flex-shrink: 0;
}
.attach-btn:hover { border-color: var(--accent); }

.hint-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: #0D1220; border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 16px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.hint-btn:hover { background: #1A2545; border-color: var(--accent); }
.send-btn {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #00AAFF, #7B5FFF);
    border: none; color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.2s, opacity 0.15s;
    flex-shrink: 0;
}
.send-btn:not(:disabled):hover { box-shadow: 0 0 16px rgba(0,170,255,0.7); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sending-dots { letter-spacing: 2px; animation: blink 0.6s infinite alternate; }

/* ===== モーダル ===== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: #0F1E35; border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    max-width: 560px; width: 90%; max-height: 80vh;
    display: flex; flex-direction: column; gap: 16px;
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal-content {
    font-size: 13px; color: var(--text-secondary); line-height: 1.8;
    white-space: pre-wrap; overflow-y: auto; flex: 1;
    font-family: var(--font);
}
.modal-close {
    align-self: flex-end; padding: 7px 20px;
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    font-size: 13px; cursor: pointer; transition: background 0.15s;
}
.modal-close:hover { background: rgba(255,255,255,0.05); }

/* ===== エラーUI ===== */
#blazor-error-ui {
    background: #400A0A; color: #FF8888;
    padding: 12px 20px; position: fixed; bottom: 0; width: 100%;
    font-size: 13px; display: none;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1023px) {
    .chat-sidebar {
        position: fixed; left: -300px; top: 52px; bottom: 0;
        z-index: 200; width: 260px !important;
        transition: left 0.25s;
    }
    .chat-sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
    .sidebar-resizer { display: none; }
    .ai-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .portal-container { padding: 20px 16px; }
    .ai-card-grid { grid-template-columns: 1fr; }
    .chat-header { padding: 8px 12px; }
    .chat-messages { padding: 12px; }
    .msg-ai-wrap { margin-right: 20px; }
    .msg-user { max-width: 85%; }
    .msg-ai-col { max-width: 85%; }
}