/* bg colors */
.b_bg1 { background-color: #425451; }
.b_bg2 { background-color: #f6cd82; }
.b_bg3 { background-color: #fbf6ee; }
.b_bg4 { background-color: #cbd1d0; }
.b_bg5 { background-color: #faeddc; }
.b_bg6 { background-color: #f1f1f1; }
.b_bg7 { background-color: #f4f2f0; }

/* front colors */
.b_fc1 { color: maroon ; }
.b_fc2 { color: maroon; }
.b_fc3 { color: #888; }
.b_fc4 { color: #333; }

/* hover */
.b_hov1:hover { background-color: #f2eae0; }
.b_link1 { color: #425451; text-decoration: underline; }

/* borders */
.b_brdr1 { border: 1px solid rgb(206, 159, 159); }
.b_brdr2 { border: 1px solid #cbd1d0; }

/* Brand Fills */
.b_fill1 { fill: #c5a56a; }
.b_fill2 { fill: none; }
.b_fill3 { fill: #ffa500; }
.b_fill4 { fill: #0f0a06; }
.b_fill5 { fill: #7d6938; }

/* Brand Strokes */
.b_stroke1 { stroke: maroon; }
.b_stroke2 { stroke: #ffffff; }
.b_stroke3 { stroke: #000000; }
.b_stroke4 { stroke: #ffa500; }
.b_stroke5 { stroke: #0f0a06; }
.b_stroke6 { stroke: #7d6938; }
.b_stroke7 { stroke: #333333; }

/* chat elements */

/* Chat container */
.ct_chat_container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Chat history area */
.ct_chat_history {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    scroll-behavior: smooth;
}

/* Chat message bubbles */
.ct_msg {
    margin-bottom: 8px;
    max-width: 85%;
    clear: both;
}

.ct_msg_user {
    float: right;
}

.ct_msg_system {
    float: left;
}

.ct_msg_bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 1.6vh;
    line-height: 1.4;
    word-wrap: break-word;
}

.ct_msg_user .ct_msg_bubble {
    background-color: #f6cd82;
    color: #333;
    border-bottom-right-radius: 4px;
}

.ct_msg_system .ct_msg_bubble {
    background-color: #fbf6ee;
    color: #333;
    border: 1px solid #e0d5c5;
    border-bottom-left-radius: 4px;
}

/* Chat input area */
.ct_chat_input_area {
    display: flex;
    padding: 6px;
    border-top: 1px solid #ddd;
    background-color: #fff;
}

.ct_chat_input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 1.6vh;
    outline: none;
    resize: none;
    height: 36px;
    line-height: 20px;
}

.ct_chat_input:focus {
    border-color: #f6cd82;
}

.ct_chat_send {
    width: 36px;
    height: 36px;
    margin-left: 6px;
    border: none;
    border-radius: 50%;
    background-color: #f6cd82;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct_chat_send:hover {
    background-color: #e8b96a;
}

/* Thinking indicator */
.ct_thinking {
    padding: 8px 12px;
    font-size: 1.4vh;
    color: #888;
    font-style: italic;
}

/* Task item in right panel */
.ct_task_item {
    border-bottom: 1px solid #e0d5c5;
    padding: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ct_task_item:hover {
    background-color: #fbf6ee;
}

/* Task name */
.ct_task_name {
    font-size: 1.8vh;
    font-weight: bold;
    color: #333;
}

/* Task type badge */
.ct_task_type {
    font-size: 1.4vh;
    padding: 1px 6px;
    border-radius: 8px;
    background-color: #f6cd82;
    color: #333;
    display: inline-block;
}

/* Task description */
.ct_task_desc {
    font-size: 1.4vh;
    color: #888;
    margin-top: 2px;
}

/* Task time display */
.ct_task_time {
    font-size: 1.3vh;
    color: #666;
    margin-top: 2px;
}

/* 24h timeline bar container */
.ct_timeline_bar {
    position: relative;
    width: 100%;
    height: 1vh;
    margin-top: 4px;
    background-color: #cbd1d0;
    border-radius: 3px;
    overflow: hidden;
}

/* Task duration bar on timeline */
.ct_duration_bar {
    position: absolute;
    top: 0;
    height: 1vh;
    border-radius: 3px;
    background-color: #425451;
}

/* Completed portion (green inner bar) */
.ct_completed_bar {
    height: 0.5vh;
    border-radius: 3px;
    background-color: #4caf50;
    position: relative;
    top: 0.25vh;
}

/* Segment progress bars */
.ct_seg_bar {
    position: relative;
    width: 100%;
    height: 1vh;
    background-color: #cbd1d0;
    border-radius: 3px;
    overflow: hidden;
}

.ct_seg_fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* Question display */
.ct_question {
    padding: 12px;
    background-color: #fbf6ee;
    border: 1px solid #e0d5c5;
    border-radius: 8px;
    margin: 8px 0;
}

.ct_question_prompt {
    font-size: 1.8vh;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.ct_question_options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ct_option_btn {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    font-size: 1.5vh;
    text-align: left;
    transition: all 0.2s;
}

.ct_option_btn:hover {
    background-color: #f6cd82;
    border-color: #f6cd82;
}

.ct_option_btn.selected {
    background-color: #f6cd82;
    border-color: #f6cd82;
    font-weight: bold;
}

.ct_option_btn.correct {
    background-color: #4caf50;
    color: #fff;
    border-color: #4caf50;
}

.ct_option_btn.incorrect {
    background-color: #f44336;
    color: #fff;
    border-color: #f44336;
}

/* Hint display */
.ct_hint {
    padding: 8px 12px;
    background-color: #faeddc;
    border-left: 3px solid #f6cd82;
    border-radius: 4px;
    margin: 6px 0;
    font-size: 1.5vh;
    color: #666;
}

/* Subject card */
.ct_subject_card {
    padding: 10px;
    border: 1px solid #e0d5c5;
    border-radius: 8px;
    margin: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #fff;
}

.ct_subject_card:hover {
    border-color: #f6cd82;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ct_subject_name {
    font-size: 1.8vh;
    font-weight: bold;
    color: #333;
}

.ct_subject_progress {
    font-size: 1.4vh;
    color: #888;
}

/* Topic card */
.ct_topic_card {
    padding: 8px;
    border-bottom: 1px solid #e0d5c5;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ct_topic_card:hover {
    background-color: #fbf6ee;
}

.ct_topic_name {
    font-size: 1.6vh;
    font-weight: bold;
    color: #333;
}

.ct_topic_code {
    font-size: 1.3vh;
    color: #888;
}

/* Progress bar */
.ct_progress_bar {
    width: 100%;
    height: 1.2vh;
    background-color: #cbd1d0;
    border-radius: 6px;
    overflow: hidden;
}

.ct_progress_fill {
    height: 100%;
    border-radius: 6px;
    background-color: #4caf50;
    transition: width 0.3s;
}

/* Action buttons */
.ct_action_btn {
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fff;
    cursor: pointer;
    font-size: 1.3vh;
    transition: all 0.2s;
    margin: 2px;
}

.ct_action_btn:hover {
    background-color: #f6cd82;
    border-color: #f6cd82;
}

.ct_action_btn.primary {
    background-color: #f6cd82;
    border-color: #f6cd82;
}

.ct_action_btn.primary:hover {
    background-color: #e8b96a;
}

/* Welcome message */
.ct_welcome {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 1.8vh;
}

.ct_welcome h2 {
    color: #333;
    margin-bottom: 8px;
}

/* Suggestion chips */
.ct_chip {
    display: inline-block;
    padding: 4px 10px;
    margin: 3px;
    border: 1px solid #e0d5c5;
    border-radius: 14px;
    background-color: #fbf6ee;
    cursor: pointer;
    font-size: 1.3vh;
    color: #666;
    transition: all 0.2s;
}

.ct_chip:hover {
    background-color: #f6cd82;
    border-color: #f6cd82;
    color: #333;
}

/* Status badge */
.ct_status_badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 1.2vh;
    font-weight: bold;
}

.ct_status_pending { background-color: #ff9800; color: #fff; }
.ct_status_inprogress { background-color: #2196f3; color: #fff; }
.ct_status_completed { background-color: #4caf50; color: #fff; }
.ct_status_cancelled { background-color: #f44336; color: #fff; }

/* Score display */
.ct_score {
    font-size: 1.6vh;
    font-weight: bold;
}

.ct_score_high { color: #4caf50; }
.ct_score_medium { color: #ff9800; }
.ct_score_low { color: #f44336; }

/* Scrollbar styling */
.ct_chat_history::-webkit-scrollbar {
    width: 4px;
}

.ct_chat_history::-webkit-scrollbar-track {
    background: transparent;
}

.ct_chat_history::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.ct_chat_history::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}