/* ═══════════════════════════════════════════════════════════
   InteractionNet visual overrides
   Bootstrap 3.3.5 + Bootswatch Cerulean 위에 덮어쓰는 파일.
   기존 style.css / player_style.css / ai-chat.css 는 건드리지 않음.
   ═══════════════════════════════════════════════════════════ */


/* ─── 1. 기준값 ──────────────────────────────────────────────
   색이나 여백을 바꾸려면 여기 숫자만 고치면 전체가 따라간다.  */

:root {
    --ink:       #0f172a;   /* 본문 글자 */
    --ink-soft:  #64748b;   /* 보조 글자, 라벨 */
    --line:      #e5e9f0;   /* 테두리 */
    --surface:   #ffffff;   /* 패널 배경 */
    --canvas:    #fafbfd;   /* 화면 배경 */
    --soft:      #f8fafc;   /* 패널 안 상자 배경 */
    --accent:    #1e3a5f;
    --accent-dk: #152b47;
    --accent-lt: #c5d3e3;

    --radius:    10px;      /* 모서리 */
    --pad:       16px;      /* 패널 안쪽 여백 */
    --gap:       16px;      /* 패널 사이 간격 */
}


/* ─── 2. 바탕과 글자 ───────────────────────────────────────── */

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: "Inter", "Open Sans", -apple-system, "Segoe UI", sans-serif;
    letter-spacing: -0.011em;
}

h1, h2, h3 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* 패널 라벨 (COMPOSE, YOUR SOLUTIONS, TASK, MESSAGE FEED 등)
   작고 연한 대문자로 통일 — 내용보다 튀지 않게 */

.messaging #composer h2,
.messaging #msg_feed h2,
.solutions-section h2,
.others-solutions h2 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: left;
    margin: 0 0 12px;
}

/* 화면을 가로지르는 구분선 제거 */
.top-frame,
.main-content-row,
.container.full-width > .row {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.top-frame {
    margin-bottom: 16px;
}

/* ─── 3. 버튼 ───────────────────────────────────────────────
   Cerulean 의 그라데이션 · 그림자 · 글자그림자를 걷어낸다.     */

.btn {
    border-radius: var(--radius);
    border: 1px solid transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    font-weight: 500;
    padding: 8px 16px;
    transition: background-color .15s ease;
}

.btn-primary,
.btn-info,
.btn-success {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.btn-primary:hover,  .btn-primary:focus,  .btn-primary:active,
.btn-info:hover,     .btn-info:focus,
.btn-success:hover,  .btn-success:focus {
    background-color: var(--accent-dk) !important;
    border-color: var(--accent-dk) !important;
    background-image: none !important;
    box-shadow: none;
}

.btn-default {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    background-image: none;
}

.btn-default:hover {
    background-color: #eef1f6;
    border-color: var(--line);
    background-image: none;
}


/* ─── 4. 입력칸 ─────────────────────────────────────────────  */

.form-control,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
.ai-chat-panel .ai-input {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    box-shadow: none;
    padding: 10px 14px;
}

.form-control:focus,
textarea:focus,
.ai-chat-panel .ai-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
    outline: none;
}


/* ─── 5. 상단 띠 (로그인 후 메뉴) ───────────────────────────── */

.navbar,
.navbar-default,
.navbar-inverse {
    background-image: none;
    background-color: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    min-height: 64px;
    margin-bottom: 0;
}

.navbar .navbar-brand,
.navbar .navbar-nav > li > a,
.navbar-text {
    color: var(--ink);
    text-shadow: none;
    font-weight: 500;
    font-size: 15px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a {
    background-color: transparent;
    color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════
   여기서부터 참여자 trial 화면 (main.blade.php)

   구조:
     .top-frame        → .task-panel > .task-content  +  timer
     .main-content-row → .messaging       > h1 + #messaging_container
                         .ai-chat-panel   > h1 + #ai_chat_container
                         .solutions-panel > h1 + #solutions_container
   ═══════════════════════════════════════════════════════════ */


/* ─── 6. TASK 상자 ─────────────────────────────────────────── */

.task-panel .task-content {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface);
    padding: 14px 20px;
}

/* TASK 는 MESSAGING · AI ASSISTANT · ANSWERS 와 같은 층위 */
.task-panel .task-content h1 {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    text-align: left;
    margin: 0 0 10px;
}
/* ─── 7. 3열 배치: 높이를 화면에 맞추고 각자 스크롤 ───────────
   패널마다 따로 놀던 높이를 하나로 맞춘다.
   화면이 짧으면 min-height 가 받쳐준다.                        */

.main-content-row {
    display: flex;
    align-items: stretch;
    gap: var(--gap);
    padding: 0 12px;
}

.main-content-row > [class*="col-md"] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 520px;
    float: none;
    padding: 0;
}

/* 세 패널의 바깥 상자 — 테두리와 여백을 동일하게 */
.main-content-row #messaging_container,
.main-content-row #ai_chat_container,
.main-content-row #solutions_container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: var(--pad);
}

/* 패널 제목 3개 통일 — 값은 실험마다 다를 수 있으므로 표시만 맞춘다 */
.main-content-row > [class*="col-md"] > h1 {
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--ink);
    text-align: center;
    margin: 0 0 12px;
    flex-shrink: 0;
}

/* ─── 8. MESSAGING 패널 ─────────────────────────────────────  */

/* Compose: 높이 고정, 아래 message feed 에 공간을 넘긴다 */
.messaging #composer {
    flex-shrink: 0;
    background: transparent !important;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.messaging #composer fieldset {
    background: var(--soft) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0;
}

.messaging #composer textarea {
    height: 90px;
    min-height: 90px;
    resize: vertical;
}

.messaging .share-to {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 12px;
}

.messaging .share-to p {
    margin: 0 0 6px;
    font-size: 13px;
}

.messaging #composer .row:last-child {
    margin-top: 10px;
}

/* SEND 는 강조, CANCEL 은 흰 버튼 — 취소가 눈에 띌 이유는 없다 */
.messaging #msg_send {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    padding: 6px 14px;
}

.messaging #msg_send:disabled,
.messaging #msg_send.disabled {
    background-color: var(--accent-lt) !important;
    border-color: var(--accent-lt) !important;
}

.messaging #msg_cancel {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    padding: 6px 14px;
}

/* MESSAGE FEED: 남은 높이를 전부 차지하고 안에서 스크롤.
   Bootstrap .row 가 가로 flex 라 세로 높이가 전달되지 않으므로
   중간 단계마다 flex 를 다시 걸어준다. */
.messaging #messaging_container > .row:last-child {
    display: flex;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.messaging #msg_feed {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    min-height: 0;
    padding: 0;
}

.messaging #msg_feed h2 {
    flex-shrink: 0;
}

.messaging #messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;   /* Bootstrap .pre-scrollable 의 340px 해제 */
    overflow-y: auto !important;
}

/* 새 메시지 알림 — 형광펜 대신 알약 배지, 천천히 깜빡임 */
.msg-alert {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    display: inline-block;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}


/* ─── 9. AI ASSISTANT 패널 ──────────────────────────────────
   ai-chat.css 가 header / messages / input 마다 테두리를 그려
   한 패널이 3칸으로 갈라져 보인다. 안쪽 선을 전부 지우고
   바깥 상자 하나만 남긴다.                                     */

.ai-chat-panel .ai-conversation,
.ai-chat-panel .ai-chatbot-header,
.ai-chat-panel .ai-messages,
.ai-chat-panel .ai-input-area {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ai-chat-panel .ai-conversation {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ai-chat-panel .ai-chatbot-header {
    flex-shrink: 0;
    padding: 0 0 12px;
}

/* 대화 영역: 남은 높이를 전부 차지하고 안에서 스크롤 */
.ai-chat-panel .ai-messages {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    padding: 0;
}

.ai-chat-panel .ai-input-area {
    flex-shrink: 0;
    padding: 12px 0 0;
}

.ai-chat-panel .ai-actions {
    margin-top: 10px;
}

.ai-chat-panel .ai-char-count {
    color: var(--ink-soft);
    font-size: 12px;
}

.ai-chat-panel .ai-description {
    color: var(--ink-soft);
    font-size: 13px;
    margin: 2px 0 0;
}

.ai-chat-panel .ai-description {
    font-size: 13px !important;
    color: var(--ink-soft) !important;
    margin: 2px 0 0;
    line-height: 1.4;
}

.ai-chat-panel .ai-messages,
.ai-chat-panel .ai-message,
.ai-chat-panel .ai-message-content {
    font-size: 14px !important;
    line-height: 1.55;
}

.ai-chat-panel .ai-input {
    font-size: 14px !important;
}

/* 내 말풍선 — 잉크 블루로 */
.ai-chat-panel .ai-message.user .ai-message-content,
.ai-chat-panel .ai-message-user .ai-message-content,
.ai-chat-panel .ai-message.own .ai-message-content {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 14px 14px 4px 14px;
}

/* Aster 말풍선 */
.ai-chat-panel .ai-message.assistant .ai-message-content,
.ai-chat-panel .ai-message-assistant .ai-message-content,
.ai-chat-panel .ai-message.bot .ai-message-content {
    background: var(--soft) !important;
    color: var(--ink) !important;
    border-radius: 14px 14px 14px 4px;
}

/* ─── 10. ANSWERS 패널 ─────────────────────────────────────── */

/* 본인 이름 — 아래 팀원 이름과 같은 색·굵기 */
.team-member-name {
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
}

.your-name {
    display: inline-block;
    margin-top: 6px;
}

.solutions-panel .team-solutions-list {
    max-height: none !important;
    overflow-y: auto;
}

/* 구분선 제거 — 카드 테두리가 이미 구분 역할을 한다 */
.solutions-panel hr,
.solutions-section hr,
.others-solutions hr,
.solutions-panel .solutions-section {
    border-top: none !important;
    border-bottom: none !important;
}

.solutions-panel .others-solutions {
    border-top: none !important;
    margin-top: 20px;
}

/* 답이 입력된 항목 — 노란 형광 대신 은은한 강조 */
.solutions-panel .solution-item.has-value,
.solutions-panel .solution-item[class*="warning"],
.solutions-panel [class*="bg-warning"] {
    background: #fffbeb !important;
    border-left: 3px solid #d97706 !important;
    border-radius: var(--radius);
}

/* 답이 입력된 항목 — 형광 노랑 대신 은은한 앰버 */
.solutions-panel .solution-item,
.solutions-panel [class*="solution-item"] {
    background: #fef9ec !important;
    border: 1px solid #f3d9a4 !important;
    border-left: 3px solid #d97706 !important;
    border-radius: var(--radius) !important;
    padding: 12px 14px;
}
/* ─── 11. Timer ─────────────────────────────────────────────  */

#timer_container > div {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface);
    padding: 14px 20px;
    margin: 0;
}

#timer_container .h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.5;
}

#timer {
    color: var(--ink) !important;
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    display: inline-block;
    margin-top: 4px;
}

.top-frame [class*="col-md"]:last-child > div {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface);
    padding: 14px 20px;
    text-align: center;
}

.top-frame [class*="col-md"]:last-child h1,
.top-frame [class*="col-md"]:last-child h2,
.top-frame [class*="col-md"]:last-child h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    margin: 0 0 4px;
}

/* 남은 시간 숫자 — 하늘색 대신 짙은 색 */
.top-frame [class*="col-md"]:last-child span {
    color: var(--ink) !important;
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* ─── 12. 폰트 통일 ─────────────────────────────────────────  */

.ai-chat-panel,
.ai-chat-panel h3,
.ai-chat-panel .ai-description,
.ai-chat-panel .ai-messages,
.ai-chat-panel .ai-input {
    font-family: inherit !important;
}

.ai-chat-panel h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

/* share to 안 글자 키우기 */
.messaging .share-to p,
.messaging .share-to label,
.messaging .share-name {
    font-size: 14px !important;
    color: var(--ink) !important;
    font-weight: 500;
}

/* ─── 13. 메시지 ────────────────────────────────────────────
   기존 player_style.css 의 파랑/초록/점선 구분을 유지하되
   Cerulean 색을 걷어내고 회색·인디고 계열로 맞춘다.          */

div.message {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 8px;
}

/* 보낸 사람 이름 */
div.message span.msg-own-header {
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 13px;
}

div.message span.msg-other-header {
    color: var(--ink) !important;
    font-weight: 600;
    font-size: 13px;
}

/* 단서(factoid) — 점선 대신 왼쪽에 굵은 선 */
div.message span.msg-factoid,
span.msg-factoid {
    display: block;
    background: var(--soft) !important;
    border: none !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 6px 6px 0;
    padding: 10px 12px;
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.55;
}

span.msg-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
}

/* (share) (reply) 링크 */
span.msg-body a {
    color: var(--accent);
    font-size: 13px;
}

/* ─── 14. Admin 화면 ────────────────────────────────────────
   버튼이 너무 많아 강조가 사라진 상태.
   주 동작만 색을 쓰고 나머지는 흰 버튼으로 낮춘다.          */

/* 페이지 제목 */
.container > h1,
.container > .row > h1 {
    font-size: 22px;
    font-weight: 600;
    text-align: left;
    margin: 24px 0 20px;
}

/* 테이블 */
table {
    border-collapse: separate;
    border-spacing: 0;
}

table > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line) !important;
    padding: 10px 12px !important;
}

table > tbody > tr > td {
    border-top: 1px solid var(--line) !important;
    padding: 12px !important;
    vertical-align: middle !important;
    font-size: 15px;
}

table > tbody > tr:hover {
    background: var(--soft);
}

/* 작은 버튼 크기 복원 — .btn 의 padding 이 btn-xs 를 덮어쓰던 것 */
.btn-xs {
    padding: 3px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.btn-sm {
    padding: 5px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* 표 안의 주 동작 버튼 */
table .btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    background-image: none !important;
    box-shadow: none;
}

table .btn-primary:hover {
    background-color: var(--accent-dk) !important;
    border-color: var(--accent-dk) !important;
}

/* 보조 동작만 흰 버튼으로 */
table .btn-default {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

/* 위험한 동작은 눈에 띄되 먼저 보이지는 않게 */
.btn-danger {
    background-color: var(--surface) !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    background-image: none !important;
    box-shadow: none;
}

.btn-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

/* 상태 글자 — 경고색 대신 회색 농도로 구분 */
table td .text-warning,
table td .text-danger,
table td .text-success {
    font-size: 13px;
    font-weight: 500;
}

table td .text-warning { color: var(--ink-soft) !important; }
table td .text-danger  { color: var(--ink-soft) !important; }
table td .text-success { color: #059669 !important; }

/* 링크형 동작 (Delete 등) */
table td a {
    color: var(--ink-soft);
    font-size: 13px;
}

table td a:hover {
    color: #dc2626;
}

/* 숫자 입력칸 — 값이 잘리지 않게 */
.num-input,
input[type="number"].form-control {
    min-width: 90px !important;
    width: auto !important;
    padding: 8px 10px !important;
    text-align: left;
}

/* 항목별 보상 칸 정렬 */
#category_payment_fields input {
    max-width: 120px;
}

#category_payment_fields {
    display: block;
    margin-top: 6px;
}

#category_payment_fields > div {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Round 칸 — dropdown 이 옆 칸을 침범하지 않게 */
.round-container {
    min-width: 0;
}

.round-container .form-select,
.round-container select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}