#footer-container {
    width: 100%;
    background-color: var(--app-bg);
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
}

#footer-container .footer p {
    margin: 5px 0;
    font-size: 0.8em;
    color: var(--text-secondary);
}

#footer-container .footer a {
    color: var(--primary-color);
    text-decoration: underline;
}

#footer-container .footer a:hover {
    text-decoration: underline;
}

/* --- Global Styles --- */
/* [修正] 色の定義を調整してコントラストを改善 */
:root {
    --bg-color: #2C3E2A; /* より暗い緑 */
    --header-bg: #D4AF37; /* [変更] 明るい金色 */
    --app-bg: #3D523B; /* メインの濃い緑 */
    --chat-bg: #2C3E2A; /* チャット背景の緑 */
    --user-bubble-bg: #A55D35; /* [変更] 少し明るい茶色 */
    --ai-bubble-bg: #F5F5DC; /* ベージュ（AIの吹き出し） */
    --text-primary: #FAF9F6; /* [変更] 明るいオフホワイト */
    --text-secondary: #E0C996; /* [変更] 明るいタン */
    --text-light: #ffffff;
    --border-color: #805C3D; /* 濃い茶色 */
    --primary-color: #D4AF37; /* [変更] 明るい金色 */
    --shadow-color: rgba(0, 0, 0, 0.2);
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-primary);
}

#app {
    height: 100%;
    width: 100%;
    display: flex;
}

/* --- Screen Layouts --- */
.view-container {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.screen {
    width: 100%;
    height: 100%;
    background-color: var(--app-bg);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.chat-view, .result-view {
    justify-content: flex-start;
}

#start-screen, #settings-screen {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 30px;
}

#start-screen h1, #settings-screen h2 {
    margin-bottom: 2rem;
}

#start-screen .btn {
    width: 80%;
    max-width: 300px;
    margin: 10px 0;
}

#settings-screen .setting-group {
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
    text-align: left;
}

/* --- Chat Screen --- */
#chat-screen {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#chat-header {
    background-color: var(--header-bg);
    color: var(--bg-color);
    padding: 15px;
    font-weight: bold;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 4px var(--shadow-color);
}

#chat-header .theme {
    font-size: 0.8em;
    font-weight: normal;
    opacity: 0.9;
    margin-top: 4px;
}

#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--chat-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#chat-input-area {
    display: flex;
    padding: 10px;
    background-color: var(--app-bg);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    align-items: flex-end;
}

#user-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-primary);
    /* [修正] 高さの上限とスクロール設定を追加 */
    max-height: 50vh; /* 画面の高さの50%を上限とする */
    overflow-y: auto; /* 内容が上限を超えた場合に垂直スクロールバーを表示 */
    resize: none; /* ユーザーによるリサイズを無効化 */
}

#user-input::placeholder {
    color: var(--text-secondary);
}

#user-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--chat-bg);
}

#send-btn {
    background-color: var(--primary-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    margin-left: 10px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
}

#send-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-light);
}

#send-btn:hover {
    background-color: #DAA520; /* 少し明るい金色 */
}

#send-btn:active {
    transform: scale(0.9);
}

#send-btn:disabled {
    background-color: #8B4513; /* サドルブラウン */
    cursor: not-allowed;
    transform: none;
}
/* --- Animations --- */
.typing-animation {
    display: flex;
    align-items: center;
    padding: 14px 15px !important;
    background-color: var(--ai-bubble-bg) !important;
}

.typing-animation .dot {
    width: 8px;
    height: 8px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    margin: 0 3px;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-animation .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-animation .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

#loading-screen {
    background-color: var(--app-bg);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.synapse-animation {
    position: relative;
    width: 200px;
    height: 200px;
}

.node {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
    animation: pulse-node 2s infinite alternate;
}
.node1 { top: 10%; left: 45%; }
.node2 { top: 45%; left: 10%; }
.node3 { top: 45%; left: 80%; }
.node4 { top: 80%; left: 30%; }
.node5 { top: 80%; left: 60%; }

.line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color));
    animation: pulse-line 3s infinite;
    transform-origin: left;
}
.line1-2 { top: 15%; left: 20%; width: 85px; transform: rotate(45deg); animation-delay: 0.2s; }
.line1-3 { top: 15%; left: 50%; width: 85px; transform: rotate(135deg); }
.line2-4 { top: 50%; left: 15%; width: 60px; transform: rotate(110deg); animation-delay: 0.4s; }
.line3-4 { top: 50%; left: 45%; width: 100px; transform: rotate(205deg); animation-delay: 0.6s; }
.line3-5 { top: 50%; left: 75%; width: 45px; transform: rotate(290deg); }
.line4-5 { top: 85%; left: 35%; width: 30px; animation-delay: 0.8s; }

.loading-message {
    color: var(--text-secondary);
    margin-top: 1rem;
    font-size: 1.1em;
}

@keyframes pulse-node {
    from { transform: scale(0.8); opacity: 0.7; }
    to { transform: scale(1.2); opacity: 1; }
}
@keyframes pulse-line {
    from { width: 0; }
    to { width: 100%; }
}


/* --- Other Styles --- */
h1,h2,h3{color:var(--primary-color);margin:0 0 20px 0;}
h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.2rem;color:var(--text-primary)}
#settings-screen h2{margin-bottom:30px}
#settings-screen label{font-weight:700;color:var(--text-secondary);}
#settings-screen .radio-group, #settings-screen select{margin-top:8px}
#settings-screen .character-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px}
#settings-screen .character-card{border:2px solid var(--border-color);border-radius:8px;padding:10px;cursor:pointer;text-align:center;transition:all .2s ease}
#settings-screen .character-card:hover{border-color:var(--primary-color);transform:translateY(-3px)}
#settings-screen .character-card.selected{border-color:var(--primary-color);background-color: #4F6A4D;}
#settings-screen .character-card img{width:60px;height:60px;border-radius:50%;object-fit:cover}
#settings-screen .character-card h3{color:var(--text-primary);font-size:.9em;margin:8px 0 0}
.message{display:flex;align-items:flex-end;gap:10px;margin-bottom:12px;max-width:85%}
.message.user{align-self:flex-end;flex-direction:row-reverse}
.message.ai,.message.moderator{align-self:flex-start}
.message.moderator{align-self:center;max-width:100%;width:100%;justify-content:center}
.avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.message.moderator .avatar{display:none}
.bubble{padding:10px 15px;border-radius:18px;word-wrap:break-word;overflow-wrap:break-word}
.message.user .bubble{background-color:var(--user-bubble-bg); color: var(--text-light);}
.message.ai .bubble{background-color:var(--ai-bubble-bg); color: var(--bg-color); box-shadow:0 1px 2px var(--shadow-color)}
/* [修正] モデレーターの吹き出しのテキスト色を明るく変更 */
.message.moderator .bubble{background-color:#604020; color:var(--text-primary); font-size:.85em;text-align:center}
.message-content{position:relative}
.sender-name{font-size:.8em;color:var(--text-secondary);margin-bottom:4px}
.message.user .sender-name{display:none}
.timestamp{font-size:.75em;color:var(--text-secondary)}
.message.user .timestamp{align-self:flex-end;margin-right:5px}
.message.ai .timestamp{align-self:flex-end;margin-left:5px}
.message.moderator .timestamp{display:none}
#result-screen{padding:20px;align-items:center}
#result-screen h2{margin-bottom:20px}
.result-summary{display:flex;gap:20px;width:100%;max-width:700px;margin-bottom:20px}
.result-left,.result-right{flex:1;text-align:center}
.score{font-size:2.5em;font-weight:700;color:var(--primary-color)}
.result-image{width:80px;height:80px;border-radius:50%;border:3px solid var(--primary-color)}
.highest-param-label{font-weight:700}
.result-right{min-height:250px}
#radar-chart{max-height:250px}
.overall-suggestion,.detailed-analysis{width:100%;max-width:700px;margin-bottom:20px;text-align:left}
.overall-suggestion h3,.detailed-analysis h3{text-align:center;margin-bottom:15px;font-size:1.2rem}
.overall-suggestion p{background-color:rgba(0,0,0,0.15);padding:15px;border-radius:8px;line-height:1.6}
.analysis-item{border-bottom:1px solid var(--border-color)}
.analysis-item:last-child{border-bottom:none}
.accordion-header{background:0 0;border:none;width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 5px;font-size:1rem;cursor:pointer;text-align:left; color: var(--text-primary);}
.accordion-header:hover{background-color:rgba(0,0,0,0.15)}
.param-name{font-weight:700}
.score-badge{background-color:var(--primary-color);color:var(--bg-color);padding:4px 8px;border-radius:12px;font-size:.9em;margin-right:10px; font-weight: bold;}
.accordion-icon{font-size:1.5em;font-weight:700;color:var(--primary-color);transition:transform .2s ease}
.accordion-header.active .accordion-icon{transform:rotate(45deg)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out;background-color:rgba(0,0,0,0.2);padding:0 20px}
.accordion-content h4{color:var(--primary-color);margin-top:15px;font-size:1rem}
.accordion-content p{margin-bottom:15px;line-height:1.5;font-size:0.95rem}
#result-screen .error-display{text-align:center}
.error-message{background-color:#ffeeee;color:#d32f2f;padding:15px;border-radius:8px;margin-bottom:20px}
#result-screen .buttons{display:flex;justify-content:center;gap:15px;margin-top:20px;width:100%;max-width:700px}
.btn{border:none;border-radius:8px;padding:12px 25px;font-size:1rem;cursor:pointer;background-color:var(--primary-color);color:var(--bg-color); font-weight: bold;}
.btn-secondary{background-color:var(--user-bubble-bg);color:var(--text-light)}
.btn:disabled{background-color:#8B4513;cursor:not-allowed}
#share-btn{background-color:var(--user-bubble-bg); color: var(--text-light)} /* Twitterカラーから変更 */
.job-display{margin-top:20px;padding:15px;background-color:rgba(0,0,0,0.15);border-radius:8px;border:1px solid var(--primary-color)}
.job-label{font-size:.8em;font-weight:700;color:var(--primary-color)}
.job-name{font-size:1.5em;font-weight:700;color:var(--text-primary);margin:5px 0}
.job-description{font-size:.9em;color:var(--text-secondary);margin:0;line-height:1.4}

.job-image-container {
    width: 100%;
    max-width: 700px;
    margin-bottom: 20px;
    text-align: center;
}

#job-image {
    width: 512px;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);
}

@media (max-width:600px){.result-summary{flex-direction:column}#radar-chart{max-height:220px}}

/* --- 横スクロール職業一覧のスタイル --- */
#guide_link {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
}

#guide_link a {
    text-decoration: none;
    color: var(--primary-color);
}

#guide_link > a:first-of-type {
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 15px;
}

.job-list-title {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 15px;
    margin-top: 0;
    font-weight: bold;
}

.job-links-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 10px auto 0 auto;
    overflow: hidden;
    padding: 0 35px;
    box-sizing: border-box;
}

.job-links {
    display: flex;
    gap: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#guide_link .job-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: white;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
}

#guide_link .job-links a:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 4px 12px var(--shadow-color);
    border-color: var(--primary-color);
    z-index: 11;
}

#guide_link .job-links span {
    width: 100%;
    padding: 12px 5px 8px 5px;
    box-sizing: border-box;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--user-bubble-bg);
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    z-index: 12;
    box-shadow: 0 2px 5px var(--shadow-color);
    transition: all 0.2s ease;
}

.scroll-button svg {
    fill: var(--text-light);
    width: 24px;
    height: 24px;
}

.scroll-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.scroll-button:active {
    transform: translateY(-50%) scale(1.0);
}

.scroll-button.left {
    left: 5px;
}

.scroll-button.right {
    right: 5px;
}

.job-name a {
    color: var(--primary-color);
    text-decoration: underline;
}

.job-name a:hover {
    text-decoration: underline;
}

/* --- Stance Selection Buttons --- */
.stance-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.stance-buttons .btn {
    min-width: 120px;
}

#agree-btn {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

#disagree-btn {
    background-color: var(--user-bubble-bg);
    color: var(--text-light);
}

#agree-btn:hover {
    background-color: #DAA520; 
}

#disagree-btn:hover {
    background-color: #A55D35;
}


#agree-btn:disabled,
#disagree-btn:disabled {
    background-color: #8B4513;
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}