/* ============================================================
   STANDARD TYPOGRAPHY SCALE
   Every page uses these sizes. Do not add page-specific font sizes.
   ============================================================ */
:root {
  /* Standard scale: every step is a function of viewport width (vw). */
  --b_fs_xs: 3vw;
  --b_fs_sm: 3.5vw;
  --b_fs_body: 4vw;
  --b_fs_md: 4.6vw;
  --b_fs_lg: 5vw;
  --b_fs_xl: 6vw;
  --b_fs_2xl: 7.5vw;
}
.b_fs_xs { font-size: var(--b_fs_xs); }
.b_fs_sm { font-size: var(--b_fs_sm); }
.b_fs_body { font-size: var(--b_fs_body); }
.b_fs_md { font-size: var(--b_fs_md); }
.b_fs_lg { font-size: var(--b_fs_lg); }
.b_fs_xl { font-size: var(--b_fs_xl); }
.b_fs_2xl { font-size: var(--b_fs_2xl); }
/* Framework size classes used by shared components are mapped to the same scale. */
#ttbody .k_f1vw { font-size: var(--b_fs_sm); }
#ttbody .k_f2vw { font-size: var(--b_fs_body); }
#ttbody .k_f3vw { font-size: var(--b_fs_body); }
#ttbody .k_f3p5vw { font-size: var(--b_fs_body); }
#ttbody .k_f4vw { font-size: var(--b_fs_md); }
#ttbody .k_f5vw { font-size: var(--b_fs_lg); }
#ttbody .k_f6vw { font-size: var(--b_fs_xl); }
#ttbody .tt_f12 { font-size: var(--b_fs_sm); }
#ttbody .tt_f16 { font-size: var(--b_fs_body); }
#ttbody .tt_f18 { font-size: var(--b_fs_md); }
#ttbody .tt_f20 { font-size: var(--b_fs_md); }
#ttbody .tt_f28 { font-size: var(--b_fs_xl); }
/* 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; }
.b_bg8 { background-color: rgb(174, 92, 92); }
.b_bg9 { background-color: #fff3cd; }
.b_bg10 { background-color: #ffffff; }

/* front colors */
.b_fc1 { color: maroon ; }
.b_fc2 { color: #ffffff; }
.b_fc3 { color: #888; }
.b_fc4 { color: #333; }
.b_fc5 { color: #f1f1f1; }
.b_fc6 { color: #fff3cd; }
.b_fc7 { color: #ffa500; }

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

/* opacity */
.b_opc1 { opacity: 0.5; }

/* 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; }


/* underline */
.b_und1 { text-decoration: underline; }

/* 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: var(--b_fs_body);
    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: var(--b_fs_body);
    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: var(--b_fs_sm);
    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: var(--b_fs_body);
    font-weight: bold;
    color: #333;
}

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

/* Task description */
.ct_task_desc {
    font-size: var(--b_fs_sm);
    color: #888;
    margin-top: 2px;
}

/* Task time display */
.ct_task_time {
    font-size: var(--b_fs_sm);
    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: var(--b_fs_body);
    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: var(--b_fs_sm);
    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: var(--b_fs_sm);
    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: var(--b_fs_body);
    font-weight: bold;
    color: #333;
}

.ct_subject_progress {
    font-size: var(--b_fs_sm);
    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: var(--b_fs_body);
    font-weight: bold;
    color: #333;
}

.ct_topic_code {
    font-size: var(--b_fs_sm);
    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: var(--b_fs_sm);
    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: var(--b_fs_body);
}

.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: var(--b_fs_sm);
    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: var(--b_fs_xs);
    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: var(--b_fs_body);
    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;
}

/* ============================================================
   AI SALES PLATFORM BRAND STYLES
   ============================================================ */

/* Message body display (preserve formatting) */
.b_msgbody {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}

/* Sales dashboard stat cards */
.b_stat_card {
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.b_stat_value {
    font-size: var(--b_fs_lg);
    font-weight: bold;
}

.b_stat_label {
    font-size: var(--b_fs_sm);
    opacity: 0.8;
}

/* Sales module tiles */
.b_module_tile {
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;
}

.b_module_icon {
    font-size: var(--b_fs_lg);
    margin-bottom: 4px;
}

/* Agent badges */
.b_agent_status_active {
    background-color: #4caf50;
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: var(--b_fs_xs);
}

.b_agent_status_paused {
    background-color: #ff9800;
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: var(--b_fs_xs);
}

.b_agent_policy_auto {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: var(--b_fs_xs);
}

.b_agent_policy_approval {
    background-color: #fff3e0;
    color: #e65100;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: var(--b_fs_xs);
}

.b_agent_policy_recommend {
    background-color: #e3f2fd;
    color: #1565c0;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: var(--b_fs_xs);
}

/* Spinner rotation while the lead generator is working */
@keyframes b_spinner_rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.b_spin {
    animation: b_spinner_rotate 1s linear infinite;
}

/* Enlarged lead checkboxes (double-size tap targets) */
.b_lg_cb {
    width: 24px;
    height: 24px;
}

/* Bigger outreach lead checkbox */
.b_oa_cb {
    width: 28px;
    height: 28px;
}

/* Outreach leads control cell (two-per-row on mobile) */
.b_oa_ctrl {
    width: 50%;
    float: left;
    padding: 1vw;
    box-sizing: border-box;
}

/* Calendar month header cells */
.b_cal_mh {
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Calendar blank day cell (leading blanks) */
.b_cal_blank {
    height: 11vw;
}

/* Calendar day tile (7 columns, Sun..Sat) */
.b_cal_day {
    width: 14.28%;
    height: 11vw;
    float: left;
    text-align: center;
    font-size: var(--b_fs_sm);
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Calendar day circle (selected / today highlight) */
.b_cal_circle {
    width: 9vw;
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Today outline around the circle when not selected */
.b_cal_today_outline {
    outline: 2px solid #425451;
}

/* Back/close button within header */
.b_home_back {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333333;
    font-size: var(--b_fs_lg);
    margin-right: 4px;
}

/* Header (dismissal_parent b_home_header style) */
.b_home_header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #ffffff;
    box-sizing: border-box;
}

.b_home_logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.b_home_pickup {
    flex: 1;
    min-width: 0;
}

.b_home_pickup_label {
    font-size: var(--b_fs_xs);
    color: #888888;
    line-height: 1.2;
}

.b_home_pickup_name {
    font-size: var(--b_fs_md);
    font-weight: 700;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Campaign card (dismissal_parent b_student_card style) */
.b_campaign_card {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #ffffff;
    box-sizing: border-box;
    cursor: pointer;
}

.b_campaign_icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b_campaign_info {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
}

.b_campaign_name {
    font-size: var(--b_fs_body);
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b_campaign_detail {
    font-size: var(--b_fs_sm);
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b_campaign_arrow {
    min-width: 24px;
    text-align: center;
    color: #888;
    font-size: var(--b_fs_md);
}

/* Bottom fixed menu (dismissal_parent b_bottom_menu style) */
.b_sales_bottom_menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    display: flex;
    background-color: #ffffff;
    border-top: 1px solid #e8e8e8;
    z-index: 1000;
}

.b_sales_bottom_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.b_sales_bottom_item svg {
    width: 24px;
    height: 24px;
}

.b_sales_bottom_label {
    font-size: var(--b_fs_xs);
    color: #555555;
    margin-top: 2px;
}

.b_sales_bottom_spacer {
    width: 100%;
    height: 60px;
    float: left;
}

/* Status chips for leads/opportunities */
.b_status_chip {
    display: inline-block;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: var(--b_fs_xs);
    font-weight: bold;
}

.b_status_new {
    background-color: #f5f5f5;
    color: #616161;
}

.b_status_qualified {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.b_status_contacted {
    background-color: #fff3e0;
    color: #e65100;
}

.b_status_converted {
    background-color: #4caf50;
    color: #fff;
}

.b_status_lost {
    background-color: #f44336;
    color: #fff;
}

/* ============================================================
   SALES AGENT HOME DASHBOARD TILES (cardowner-style)
   ============================================================ */

/* BF logo proper colors (cardowner): orange polygons 1&3, black polygon 2 */
svg[aria-label="Business-Folio"] polygon:nth-child(1),
svg[aria-label="Business-Folio"] polygon:nth-child(3) {
    fill: #ffa500;
    stroke: #ffa500;
}

svg[aria-label="Business-Folio"] polygon:nth-child(2) {
    fill: #000;
    stroke: #000;
}

/* Dashboard tile */
.b_dash_tile {
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Dashboard badge (counts on tiles) */
.b_dash_badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background-color: #f44336;
    color: #fff;
    border-radius: 50%;
    font-size: var(--b_fs_xs);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Profile circle icon */
.b_profile_circle {
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Chat starter button (bottom-right, home only) */
.b_chat_starter {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: orange;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 30;
    cursor: pointer;
}

/* Chat panel */
.b_chat_panel {
    position: fixed;
    right: 16px;
    bottom: 84px;
    width: min(320px, 92vw);
    height: 420px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: none;
    flex-direction: column;
    z-index: 30;
}

.b_chat_header {
    padding: 12px 16px;
    background-color: #425451;
    color: #ffffff;
    font-weight: bold;
    font-size: var(--b_fs_sm);
}

.b_chat_history {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.b_chat_msg {
    margin-bottom: 8px;
    max-width: 85%;
    clear: both;
}

.b_chat_msg_user {
    float: right;
}

.b_chat_msg_system {
    float: left;
}

.b_chat_bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: var(--b_fs_sm);
    line-height: 1.4;
    word-wrap: break-word;
}

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

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

.b_chat_input_area {
    display: flex;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
}

.b_chat_input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: var(--b_fs_sm);
    outline: none;
}

.b_chat_send {
    width: 38px;
    height: 38px;
    margin-left: 6px;
    border: none;
    border-radius: 50%;
    background-color: #425451;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Outreach email image preview (uploaded or AI generated) */
.b_oa_img_preview {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #d8d2c8;
    background-color: #ffffff;
    margin: 0 auto;
}

/* Outreach final message live preview */
.b_oa_msg_preview {
    max-height: 45vh;
    overflow-y: auto;
    background-color: #ffffff;
}

/* Capacity chat suggestion bar - one horizontal line above the input, no scrollbars */
.ct_sugg {
  display: flex;
  align-items: center;
  gap: 2vw;
  overflow-x: auto;
  padding: 2vw;
  border-top: 1px solid #e0e0e0;
  background: #ffffff;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ct_sugg::-webkit-scrollbar { display: none; }
.ct_sugg_chip {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid #c9c9c9;
  border-radius: 20px;
  background: #f4f4f4;
  white-space: nowrap;
  font-size: var(--b_fs_body);
  color: #333333;
}
.ct_sugg_chip:active { background: #e0e0e0; }

/* Spacer inside a chat bubble between a short comment and the next question/summary */
.b_q_gap { height: 14px; }

/* Objective (A/B/C/D) option row inside an assess question bubble */
.b_opt_row { margin: 6px 0; line-height: 1.4; font-size: var(--b_fs_md); }

/* Chat pages: fixed full-screen flex column; ONLY the history area scrolls.
   Shared by every coach/chat page (each carries the .ct_chat_page class). */
.ct_chat_page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.ct_chat_page > .b_chat_history {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  scroll-padding-top: calc(100vw / 7 + 2vh);
}
/* Keep the chat area clear of the fixed title bar (h_7t1) */
.ct_chat_page > .w_100p.h_5t1 {
  aspect-ratio: auto;
  height: calc(100vw / 5 + 3vh);
  flex: 0 0 auto;
}
.ct_chat_page > .b_hist_spc {
  flex: 0 0 auto;
  min-height: 2vw;
}
.ct_chat_page > .ct_sugg {
  flex: 0 0 auto;
}
.ct_chat_page > .w_100p.h_4t1 {
  flex: 0 0 auto;
}

/* Chat bubble sizing/format for Capacity chat pages */
/* Chat pages: each message occupies its own full-width, cleared row */
.ct_chat_page .k_chatline {
  width: 100%;
  clear: both;
  margin: 1.5vw 0;
}

.ct_chat_page .k_userbot,
.ct_chat_page .k_sysbot {
  max-width: 90%;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: var(--b_fs_lg);
}
/* grow the framework text helpers inside chat bubbles so lesson/example text is bigger too */
.ct_chat_page .k_sysbot .k_f4vw,
.ct_chat_page .k_sysbot .k_f5vw { font-size: var(--b_fs_lg); }
.ct_chat_page .ct_sugg_chip { font-size: var(--b_fs_md); }
.ct_chat_page .b_chat_input { font-size: var(--b_fs_md); }


/* Lesson card visuals: AI SVG figure and the "Example:" box inside a chat bubble */
#learn_chat_page .k_sysbot .b_lsn_fig {
  width: 100%;
  margin: 0 0 1.5vw 0;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 2vw;
  padding: 2vw;
  box-sizing: border-box;
}
#learn_chat_page .k_sysbot .b_lsn_fig svg {
  display: block;
  width: 100%;
  height: auto;
}
/* gentle entrance so the picture "appears" instead of popping harshly */
@keyframes ct_lsn_pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#learn_chat_page .k_sysbot .b_lsn_fig {
  animation: ct_lsn_pop 0.45s ease-out;
}
#learn_chat_page .k_sysbot .b_lsn_ex {
  margin-top: 1.5vw;
  padding: 1.5vw 2vw;
  background: #fff7e0;
  border-radius: 2vw;
  color: #333333;
}

/* Method/step bullet list inside a lesson bubble */
#learn_chat_page .k_sysbot .b_lsn_list {
  margin: 1vw 0 0 0;
  padding-left: 6vw;
  color: #333333;
}
#learn_chat_page .k_sysbot .b_lsn_list li {
  margin: 0.6vw 0;
}


/* Practice / quick-check countdown timer inside a bubble */
#learn_chat_page .k_sysbot .ct_prac_head {
  margin-bottom: 0.6vw;
}
#learn_chat_page .k_sysbot .ct_prac_timer {
  display: inline-block;
  margin-left: 1vw;
  padding: 0 2vw;
  border: 1px solid #ffb6b6;
  border-radius: 2vw;
  background: #fff2f2;
  font-family: monospace;
  font-weight: bold;
  font-size: var(--b_fs_md);
  color: #c0392b;
  vertical-align: baseline;
}



/* Chat day divider (dashed line - Today - dashed line) */
.ct_day {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4vw;
}
.ct_day::before,
.ct_day::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #b9b9b9;
}
.ct_day span {
  font-size: var(--b_fs_body);
  color: #8a8a8a;
}

/* Progress coach (processor 180): chart bars + insights inside chat bubbles */
.b_prog_row { margin: 5px 0; }
.b_prog_label { font-size: var(--b_fs_body); line-height: 1.4; }
.b_bar_svg { width: 100%; height: 1.2vh; display: block; margin-top: 2px; }
.b_prog_insight {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #f6cd82;
  background-color: #fbf6ee;
  border-radius: 4px;
  font-size: var(--b_fs_body);
  line-height: 1.5;
}

/* ============================================================
   Arabic learning companion (processor 220) brand styles
   All app-specific classes are prefixed with b_ per .clinerules
   ============================================================ */

/* mic bar shown under the chat history */
.b_ar_micbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background-color: #fbf6ee; border-top: 1px solid #e0d5c5; }
.b_ar_focusbar { font-size: var(--b_fs_sm); color: #425451; }

/* microphone toggle button - matches the chat submit button (orange, 5px radius) */
.b_ar_mic { width: 100%; height: 100%; border: 0; border-radius: 5px; color: #ffffff; background-color: #888888; display: flex; align-items: center; justify-content: center; padding: 0; }
.b_ar_mic_idle { background-color: #888888; }
.b_ar_mic_rec { background-color: #2e8b57; }
.b_ar_mic_busy { background-color: #888888; }
.b_ar_mic_speak { background-color: #888888; }

/* mic button icon + disabled look */
.b_ar_mic_icon { width: 58%; height: 58%; display: block; margin: 0; }
.b_ar_mic:disabled { opacity: 0.55; }
.b_ar_mic_paused { background-color: #888888; }
.b_cm_mic_on { background-color: #2e8b57; color: #ffffff; }
.b_cm_mic_off { background-color: #888888; color: #ffffff; }

/* assistant reply - arabizi with live token highlighting */
.b_ar_arabizi { font-size: var(--b_fs_md); font-weight: bold; color: #333; }

/* system bubble: black, readable text; Arabic line bold and larger in the chat */
.ct_chat_page .k_sysbot,
.ct_chat_page .k_userbot { color: #000000; }
.ct_chat_page .b_ar_script { font-size: var(--b_fs_xl); font-weight: bold; color: #000000; }
.ct_chat_page .b_ar_eng { font-size: var(--b_fs_body); color: #333333; }
.b_ar_tok { padding: 0 2px; border-radius: 3px; }
.b_ar_tok_on { background-color: #f6cd82; color: #000; }

/* native script + english subtext */
.b_ar_script { font-size: var(--b_fs_xl); font-weight: bold; color: #000000; margin-top: 4px; }
.b_ar_eng { font-size: var(--b_fs_body); color: #333333; font-style: italic; margin-top: 2px; }
.b_ar_list { margin: 4px 0 4px 18px; padding: 0; }
.b_ar_list li { margin: 2px 0; }
.b_ar_ns { color: #999999; }
.b_ar_sugg_off { opacity: 0.45; }
.b_ar_tok_e { padding: 0 2px; border-radius: 3px; }

/* ---------- Course book (reference) ---------- */
/* Key Words (processor 222) */
.b_kw_intro { font-size: var(--b_fs_body); color: #555555; line-height: 1.4; }
.b_kw_controls { border-bottom: 1px solid #e0d5c5; }
.b_kw_records { font-size: var(--b_fs_sm); color: #6b8b83; text-align: right; }
.b_kw_row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2.5vw 1vw;
  border-bottom: 1px solid #e6e6e6;
}
.b_kw_daynum {
  flex: 0 0 12vw;
  font-size: var(--b_fs_body);
  font-weight: bold;
  color: #425451;
  text-align: center;
}
.b_kw_rowbody { flex: 1 1 auto; overflow: hidden; }
.b_kw_rowtitle { font-size: var(--b_fs_md); font-weight: bold; color: #333333; }
.b_kw_rowmeta { font-size: var(--b_fs_sm); color: #888888; margin-top: 0.5vw; }
.b_kw_arrow { flex: 0 0 6vw; color: #999999; text-align: right; }
.b_kw_objective { font-size: var(--b_fs_body); line-height: 1.4; }
.b_kw_word {
  display: flex;
  align-items: flex-start;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e0d5c5;
  border-radius: 0;
  padding: 2.5vw 0;
  margin: 0;
  background-color: transparent;
}
.b_kw_pos {
  flex: 0 0 9vw;
  font-size: var(--b_fs_body);
  font-weight: bold;
  color: #6b8b83;
  text-align: center;
  padding-top: 0.5vw;
}
.b_kw_wordbody { flex: 1 1 auto; overflow: hidden; }
.b_kw_tap, .b_kw_details, .b_kw_speaker { cursor: pointer; }
.b_kw_speaker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  height: auto;
  color: #999999;
  margin: 1vw 0;
}
.b_kw_speaker svg { width: 5vw; height: 5vw; }
.b_kw_wave { display: flex; align-items: flex-end; gap: 1px; height: 4vw; }
.b_kw_wave i {
  display: block;
  width: 0.8vw;
  height: 1.5vw;
  background-color: currentColor;
  border-radius: 0;
}
.b_kw_speaker_on { color: #2e8b57; }
.b_kw_speaker_on .b_kw_wave i { animation: b_kw_wave 0.8s infinite ease-in-out; }
.b_kw_speaker_on .b_kw_wave i:nth-child(2) { animation-delay: 0.15s; }
.b_kw_speaker_on .b_kw_wave i:nth-child(3) { animation-delay: 0.3s; }
@keyframes b_kw_wave {
  0%, 100% { height: 1.2vw; }
  50% { height: 3.6vw; }
}
#kw_word_page { overflow-x: hidden; }
.b_kw_daytopic {
  display: block;
  width: 100%;
  clear: both;
  padding: 1vw 0;
  color: #333333;
  font-weight: normal;
}
.b_kw_detail_row {
  display: block;
  width: 100%;
  max-width: 100%;
  clear: both;
  overflow: hidden;
  padding: 2vw 0;
  border-bottom: 1px solid #eeeeee;
}
.b_kw_detail_right { width: 100%; text-align: right; overflow: hidden; }
.b_kw_detail_left { width: 100%; text-align: left; margin-top: 1vw; }
.b_kw_headword {
  font-size: var(--b_fs_xl);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b_kw_usagenote {
  font-size: var(--b_fs_body);
  color: #666666;
  line-height: 1.5;
  padding: 1.5vw 0;
  border-bottom: 1px solid #eeeeee;
}
.b_kw_form_intro,
.b_kw_example_intro,
.b_kw_response_label {
  font-size: var(--b_fs_body);
  color: #555555;
  line-height: 1.5;
  padding: 1.5vw 0 0.5vw 0;
}
.b_kw_component_ar {
  font-size: var(--b_fs_xl);
  font-weight: bold;
  text-align: right;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b_kw_example_ar {
  font-size: var(--b_fs_xl);
  font-weight: bold;
  text-align: right;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b_kw_response_ar {
  font-size: var(--b_fs_xl);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#kw_word_page .b_kw_headword { font-size: var(--b_fs_2xl); }
#kw_word_page .b_ar_eng,
#kw_word_page .b_kw_usagenote,
#kw_word_page .b_kw_form_intro,
#kw_word_page .b_kw_example_intro,
#kw_word_page .b_kw_response_label { font-size: var(--b_fs_md); }

.b_ar_booktitle { font-size: var(--b_fs_lg); font-weight: bold; color: #000000; padding: 6px 0; }
.b_ar_chapter { border-top: 2px solid #e0d5c5; padding: 10px 0 6px 0; margin-top: 8px; }
.b_ar_bookday { font-size: var(--b_fs_sm); color: #ae5c5c; font-weight: bold; letter-spacing: 1px; }
.b_ar_bookhead { font-size: var(--b_fs_md); font-weight: bold; color: #000000; }
.b_ar_bookobj { font-size: var(--b_fs_body); color: #333333; margin: 2px 0 6px 0; }
.b_ar_bookstage { margin: 6px 0; font-size: var(--b_fs_body); color: #333333; line-height: 1.6; }
.b_ar_bookstage_n { font-weight: bold; color: #425451; margin-bottom: 2px; }
.b_ar_phrase { border-left: 3px solid #f6cd82; background-color: #fbf6ee; border-radius: 4px; padding: 6px 8px; margin: 4px 0; }
.b_ar_phrase .b_ar_script, .b_ar_phrase .b_ar_arabizi, .b_ar_phrase .b_ar_eng { display: block; }
.b_ar_say { cursor: pointer; }
/* Course reference (chat scaffold): bubble head matches the chat size; tap-to-read */
#ar_course_page .b_ar_bookhead { font-size: var(--b_fs_lg); }
.b_ar_refbody { line-height: 1.5; }
.b_cm_say { cursor: pointer; }
/* keep the top spacer at full height and let the history fill the rest, so the
   fixed header never overlaps the top bubble */
#ar_course_page > .w_100p.h_5t1 { flex: 0 0 auto; }
#ar_course_page > .b_chat_history { flex: 1 1 auto; height: auto; }
/* long titles must wrap, not overflow */
.b_ar_card_title { overflow-wrap: break-word; word-break: break-word; }

/* turn score / repeat hint */
.b_ar_score { font-size: var(--b_fs_sm); color: #425451; background-color: #f1f1f1; border-radius: 8px; padding: 1px 6px; }
.b_ar_repeat { font-size: var(--b_fs_sm); color: #ae5c5c; font-weight: bold; }

/* implicit recast banner */
.b_ar_recast { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; border-left: 3px solid #f6cd82; background-color: #fbf6ee; border-radius: 4px; }
.b_ar_recast_chip { font-size: var(--b_fs_sm); color: #425451; background-color: #faeddc; border-radius: 10px; padding: 2px 8px; }

/* error chips */
.b_ar_errors { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; }
.b_ar_err_chip { font-size: var(--b_fs_sm); color: #ae5c5c; background-color: #f4f2f0; border-radius: 10px; padding: 2px 8px; }

/* focus line in the welcome bubble */
.b_ar_focus { font-size: var(--b_fs_sm); color: #425451; background-color: #faeddc; border-radius: 8px; padding: 2px 8px; }

/* progress dashboard rows + bars */
.b_ar_row { margin-bottom: 10px; }
.b_ar_bar { width: 100%; height: 8px; background-color: #f1f1f1; border-radius: 4px; overflow: hidden; }
.b_ar_fill { display: block; height: 8px; background-color: #f6cd82; }

/* snapped-width bar levels (10% steps) */
.b_ar_w0 { width: 0; }
.b_ar_w10 { width: 10%; }
.b_ar_w20 { width: 20%; }
.b_ar_w30 { width: 30%; }
.b_ar_w40 { width: 40%; }
.b_ar_w50 { width: 50%; }
.b_ar_w60 { width: 60%; }
.b_ar_w70 { width: 70%; }
.b_ar_w80 { width: 80%; }
.b_ar_w90 { width: 90%; }
.b_ar_w100 { width: 100%; }

/* ============================================================
   Shared overlay (companion settings panel)
   ============================================================ */
.b_ar_onb { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; }
.b_ar_onb_card { width: 82%; background-color: #ffffff; border-radius: 12px; padding: 16px; }
.b_ar_onb_title { font-size: var(--b_fs_lg); font-weight: bold; color: #425451; margin-bottom: 8px; text-align: center; }
.b_ar_onb_actions { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }
.b_ar_onb_btn { border: 1px solid #cbd1d0; background-color: #f4f2f0; color: #333; border-radius: 18px; padding: 8px 18px; font-size: var(--b_fs_body); }
.b_ar_onb_primary { background-color: #425451; color: #ffffff; border-color: #425451; }

/* ============================================================
   Bubble layout + live status (Capacity-Arabic)
   ============================================================ */
/* Arabic line (token-highlighted while spoken) */
.b_ar_tokbox { line-height: 1.9; }
/* score / repeat row */
.b_ar_meta { text-align: center; margin-top: 4px; }
/* centred live status (Listening / Thinking / Speaking) above the suggestions */
.b_ar_status { width: 100%; text-align: center; font-size: var(--b_fs_sm); color: #ae5c5c; min-height: 2vh; padding: 2px 0; }

/* ---------- Plan page ---------- */
.b_ar_plan_intro { font-size: var(--b_fs_body); color: #333; line-height: 1.5; }
.b_ar_plan_block { border: 1px solid #e0d5c5; border-radius: 10px; padding: 8px 10px; margin: 8px 0; background-color: #ffffff; }
.b_ar_plan_head { font-size: var(--b_fs_md); font-weight: bold; color: #425451; display: flex; align-items: center; }
.b_ar_plan_title { flex: 1; }
.b_ar_plan_sum { font-size: var(--b_fs_body); color: #555555; line-height: 1.45; margin: 4px 0; }
.b_ar_plan_list { font-size: var(--b_fs_body); color: #333333; line-height: 1.6; padding-left: 18px; margin: 4px 0; }
.b_ar_plan_btn { text-align: center; font-size: var(--b_fs_body); color: #ffffff; background-color: #425451; border-radius: 16px; padding: 6px 0; margin-top: 6px; }

/* ---------- Settings overlay rows ---------- */
.b_ar_set_row { display: block; font-size: var(--b_fs_body); color: #333333; padding: 8px 0; border-bottom: 1px solid #f1f1f1; }
.b_ar_set_val { font-size: var(--b_fs_sm); color: #888888; }

/* phrase option chips (reprompt with options) */
.b_ar_opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; }
.b_ar_opt { font-size: var(--b_fs_sm); color: #425451; background-color: #faeddc; border-radius: 12px; padding: 4px 12px; }

/* ============================================================
   Conversation Lesson Engine - lesson + phrase cards
   ============================================================ */
.b_ar_card { border: 1px solid #e0d5c5; border-radius: 10px; padding: 8px 10px; margin: 6px 0; background-color: #ffffff; }
.b_ar_card_head { font-size: var(--b_fs_md); font-weight: bold; color: #425451; display: flex; align-items: center; }
.b_ar_card_title { flex: 1; }
.b_ar_card_sum { font-size: var(--b_fs_body); color: #555555; line-height: 1.45; margin: 4px 0; }

/* error-triage cue + assistance-ladder hint */
.b_ar_triage { font-size: var(--b_fs_sm); color: #c58f2e; margin-top: 3px; }

/* lesson runner: stage progress bar + stage countdown */
.b_ar_stagebar { display: flex; gap: 6px; padding: 4px 0; }
.b_ar_stagebar_seg { flex: 1; height: 8px; border-radius: 4px; background-color: #e0d5c5; }
.b_ar_stagebar_on { flex: 1; height: 8px; border-radius: 4px; background-color: #425451; }
.b_ar_timer { color: #ae5c5c; font-weight: bold; }

/* conversation intro: step dots */
.b_ar_stepdots { display: flex; gap: 6px; justify-content: center; padding: 4px 0; }
.b_ar_dot { width: 8px; height: 8px; border-radius: 50%; background-color: #e0d5c5; display: inline-block; }
.b_ar_dot_on { width: 8px; height: 8px; border-radius: 50%; background-color: #425451; display: inline-block; }

/* audio-only scaffold: the script stays in the DOM (bubbles still replay) but is not shown */
.b_ar_audioonly { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Conversation: previous-session review highlight + load-earlier line */
.b_ar_reviewbot { background-color: #eef6f2; }
.b_ar_review_head { font-weight: bold; color: #425451; margin-bottom: 1vw; }
.b_ar_review { font-size: var(--b_fs_md); line-height: 1.5; color: #333333; }
.b_ar_moreline {
  display: flex;
  align-items: center;
  gap: 3vw;
  clear: both;
  width: 100%;
  font-size: var(--b_fs_body);
  color: #6b8b83;
  background-color: #ffffff;
  padding: 6px 0;
}
.b_ar_moreline::before,
.b_ar_moreline::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #b9b9b9;
}

/* ---------- Arabic is always bold ----------
   The face below covers ONLY the Arabic code points and points them at a bold
   system font, so Arabic renders bold wherever it appears (even inline in the
   middle of an English sentence) while Latin keeps its own weight. */
@font-face {
  font-family: 'b_ar_bold';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial-Bold'),
       local('Segoe UI Bold'), local('Roboto Bold'), local('Roboto-Bold'),
       local('Helvetica Bold'), local('Helvetica-Bold'), local('HelveticaNeue-Bold'),
       local('Noto Sans Bold'), local('Noto Naskh Arabic Bold'),
       local('Droid Arabic Naskh Bold'), local('Geeza Pro Bold');
  font-weight: 100 900;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
#ttbody { font-size: var(--b_fs_body); }
#ttbody .tt_page { font-size: var(--b_fs_body); }
#ttbody, #ttbody * { font-family: 'b_ar_bold', Arial, Helvetica, sans-serif; }



/* ---------- About page: 90-day course table of contents ---------- */
.b_about_toc { list-style: none; padding-left: 0; margin: 0; }
.b_about_toc ol { list-style: none; padding-left: 6vw; margin: 0; }
.b_about_toc > li { margin: 2vw 0; }
.b_about_chapter {
  font-size: var(--b_fs_lg);
  font-weight: bold;
  color: #425451;
  padding: 1.5vw 0;
  border-bottom: 1px solid #d9d9d9;
}
.b_about_toc ol li {
  display: flex;
  align-items: baseline;
  gap: 2vw;
  font-size: var(--b_fs_md);
  color: #333333;
  padding: 1.2vw 0;
  border-bottom: 1px solid #eeeeee;
}
.b_about_num { flex: 0 0 10vw; color: #6b8b83; font-weight: bold; }
.b_about_topic { flex: 1 1 auto; }
.b_about_day { flex: 0 0 auto; font-size: var(--b_fs_body); color: #999999; }