/* ═══════════════════════════════════════════════════════════
   embed-compact.css — Responsive overrides for embedded /
   very small viewports + class-based compact mode.
   
   Include AFTER chat-terminal.css and index.css:
   <link rel="stylesheet" href="css/embed-compact.css">
   
   Two modes:
   A) Media queries auto-apply at ≤640 / ≤400 / ≤300px
   B) Add class "ct-compact" to .ct-app for forced compact
      at ANY viewport width (recommended for iframes)
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════
   CLASS-BASED COMPACT  (.ct-compact)
   Always-on compact regardless of width
   ══════════════════════════════════════ */

/* Header */
.ct-compact .ct-header {
    padding: 2px 6px !important;
    min-height: 22px !important;
    gap: 2px !important;
    border-bottom-width: 0.5px !important;
}
.ct-compact .ct-header-left {
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.ct-compact .ct-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}
.ct-compact .ct-avatar {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 9px !important;
}
.ct-compact .ct-header-right {
    gap: 1px !important;
    flex-shrink: 0 !important;
}
.ct-compact .ct-header-right .ct-hbtn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
    border: none !important;
}
.ct-compact .ct-header-right .ct-hbtn i {
    font-size: 10px !important;
}
/* Mobile menu ⋮ button — must match compact header size */
.ct-compact #ct-mm-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
}
.ct-compact #ct-mm-btn i {
    font-size: 10px !important;
}
/* Mobile menu panel — compact */
.ct-compact #ct-mm-panel {
    min-width: 180px !important;
    max-width: 220px !important;
}
.ct-compact #ct-mm-panel .ct-mm-close-row {
    padding: 6px 10px !important;
}
.ct-compact #ct-mm-panel .ct-mm-close-row span {
    font-size: 12px !important;
}
.ct-compact #ct-mm-panel .ct-mm-row {
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 6px !important;
}
.ct-compact #ct-mm-panel .ct-mm-row i {
    font-size: 12px !important;
    width: 14px !important;
}
.ct-compact #ct-mm-panel .ct-mm-sub .ct-mm-row {
    padding-left: 32px !important;
    font-size: 10px !important;
}

/* Voicebar */
.ct-compact .ct-voicebar {
    padding: 1px 6px !important;
    font-size: 9px !important;
    min-height: 18px !important;
    gap: 4px !important;
    border-bottom-width: 0.5px !important;
}
.ct-compact .ct-voicebar .ct-vbd {
    width: 5px !important;
    height: 5px !important;
}
.ct-compact #ct-vb-text {
    font-size: 9px !important;
}
.ct-compact .ct-vb-btn {
    font-size: 8px !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    border-width: 1px !important;
}
.ct-compact .ct-vb-btn i {
    font-size: 8px !important;
}

/* Orb */
.ct-compact .ct-start-orb {
    width: 68px !important;
    height: 68px !important;
}
.ct-compact .ct-start-orb .ct-orb-icon {
    font-size: 24px !important;
}
.ct-compact #ct-empty-title {
    font-size: 12px !important;
    margin-top: 12px !important;
}

/* Input bar */
.ct-compact .ct-inputbar {
    padding: 3px 5px !important;
    gap: 3px !important;
    display: flex !important;
    flex-shrink: 0 !important;
}
.ct-compact .ct-inputwrap {
    gap: 2px !important;
    border-radius: 14px !important;
    min-height: 30px !important;
    padding: 2px 4px 2px 10px !important;
}
.ct-compact .ct-inputwrap textarea,
.ct-compact #ct-input {
    font-size: 11px !important;
    padding: 4px 0 !important;
    min-height: 14px !important;
    max-height: 60px !important;
    line-height: 1.3 !important;
}
.ct-compact #ct-input::placeholder {
    font-size: 11px !important;
}
.ct-compact .ct-send {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 10px !important;
    border-radius: 50% !important;
}
.ct-compact .ct-voice,
.ct-compact .ct-speaker {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-width: 1.5px !important;
}
.ct-compact .ct-voice .ct-vi,
.ct-compact .ct-speaker .ct-si {
    font-size: 13px !important;
}
.ct-compact .ct-voice .ct-vw span {
    width: 2px !important;
    height: 8px !important;
}

/* Messages */
.ct-compact .ct-msg {
    max-width: 92% !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 10px !important;
}
.ct-compact .ct-msg .ct-time,
.ct-compact .ct-msg .ct-msg-time,
.ct-compact .ct-msg-time {
    font-size: 7px !important;
    margin-top: 1px !important;
    opacity: 0.5 !important;
    line-height: 1 !important;
}

/* Dropdowns */
.ct-compact .ct-test-menu,
.ct-compact .ct-bg-menu {
    min-width: 140px !important;
}
.ct-compact .ct-lang-sheet {
    max-width: 240px !important;
}


/* ══════════════════════════════════════
   MEDIA QUERY TIERS
   Values decrease consistently per tier
   ══════════════════════════════════════ */

/* ──────────────────────────────────────
   Tier 1: ≤ 640px
   ────────────────────────────────────── */
@media (max-width: 640px) {

    .ct-header         { padding: 5px 8px !important; min-height: 32px !important; gap: 3px !important; }
    .ct-header-left    { gap: 6px !important; min-width: 0 !important; overflow: hidden !important; }
    .ct-name           { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 140px !important; }
    .ct-avatar         { width: 24px !important; height: 24px !important; min-width: 24px !important; }
    .ct-header-right   { gap: 2px !important; flex-shrink: 0 !important; }
    .ct-header-right .ct-hbtn   { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 12px !important; }
    .ct-header-right .ct-hbtn i { font-size: 12px !important; }

    .ct-voicebar       { padding: 4px 8px !important; font-size: 11px !important; gap: 4px !important; }
    .ct-vb-btn         { font-size: 10px !important; padding: 3px 8px !important; }

    .ct-start-orb      { width: 72px !important; height: 72px !important; }
    .ct-start-orb .ct-orb-icon { font-size: 26px !important; }
    #ct-empty-title    { font-size: 12px !important; margin-top: 12px !important; }

    .ct-inputbar       { padding: 4px 6px !important; gap: 3px !important; display: flex !important; flex-shrink: 0 !important; }
    .ct-inputwrap      { gap: 2px !important; border-radius: 14px !important; min-height: 32px !important; padding: 2px 4px 2px 10px !important; }
    .ct-inputwrap textarea,
    #ct-input          { font-size: 11px !important; padding: 4px 0 !important; min-height: 14px !important; max-height: 60px !important; line-height: 1.3 !important; }
    #ct-input::placeholder { font-size: 11px !important; }
    .ct-send           { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 11px !important; border-radius: 7px !important; }
    .ct-voice,
    .ct-speaker        { width: 30px !important; height: 30px !important; min-width: 30px !important; }
    .ct-voice .ct-vi,
    .ct-speaker .ct-si { font-size: 13px !important; }
    .ct-voice .ct-vw span { width: 2px !important; height: 9px !important; }

    .ct-msg            { max-width: 92% !important; padding: 5px 9px !important; font-size: 12px !important; line-height: 1.4 !important; border-radius: 10px !important; }
    .ct-msg .ct-time   { font-size: 9px !important; }

    .ct-test-menu,
    .ct-bg-menu        { min-width: 150px !important; }
    .ct-lang-sheet     { max-width: 240px !important; }
}


/* ──────────────────────────────────────
   Tier 2: ≤ 400px  (narrow embed)
   ────────────────────────────────────── */
@media (max-width: 400px) {

    .ct-header         { padding: 4px 6px !important; min-height: 28px !important; }
    .ct-name           { font-size: 12px !important; max-width: 100px !important; }
    .ct-avatar         { width: 20px !important; height: 20px !important; min-width: 20px !important; }
    .ct-header-right .ct-hbtn   { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: 11px !important; }
    .ct-header-right .ct-hbtn i { font-size: 11px !important; }

    /* Hide secondary header buttons */
    #ct-bg-wrapper,
    #ct-test-wrapper,
    #ct-lang-btn       { display: none !important; }

    .ct-voicebar       { padding: 3px 6px !important; font-size: 10px !important; }
    .ct-vb-btn         { font-size: 9px !important; padding: 2px 6px !important; }
    .ct-vb-btn i       { font-size: 9px !important; }

    .ct-start-orb      { width: 60px !important; height: 60px !important; }
    .ct-start-orb .ct-orb-icon { font-size: 22px !important; }
    .ct-start-orb::before { inset: -4px !important; }
    .ct-start-orb::after  { inset: -10px !important; }
    #ct-empty-title    { font-size: 11px !important; margin-top: 10px !important; }

    .ct-inputbar       { padding: 3px 4px !important; gap: 2px !important; display: flex !important; flex-shrink: 0 !important; }
    .ct-inputwrap      { min-height: 28px !important; padding: 2px 4px 2px 8px !important; border-radius: 12px !important; }
    .ct-inputwrap textarea,
    #ct-input          { font-size: 10px !important; padding: 3px 0 !important; min-height: 12px !important; max-height: 50px !important; line-height: 1.3 !important; }
    #ct-input::placeholder { font-size: 10px !important; }
    .ct-send           { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: 10px !important; border-radius: 6px !important; }
    .ct-voice,
    .ct-speaker        { width: 26px !important; height: 26px !important; min-width: 26px !important; }
    .ct-voice .ct-vi,
    .ct-speaker .ct-si { font-size: 11px !important; }
    .ct-voice .ct-vw span { width: 2px !important; height: 7px !important; }

    .ct-msg            { padding: 4px 7px !important; font-size: 11px !important; line-height: 1.35 !important; border-radius: 9px !important; }
    .ct-msg .ct-time   { font-size: 8px !important; }
}


/* ──────────────────────────────────────
   Tier 3: ≤ 300px  (micro widget)
   ────────────────────────────────────── */
@media (max-width: 300px) {

    .ct-header         { padding: 3px 4px !important; min-height: 24px !important; }
    .ct-header-left    { gap: 4px !important; }
    .ct-name           { font-size: 11px !important; max-width: 70px !important; }
    .ct-avatar         { width: 18px !important; height: 18px !important; min-width: 18px !important; }

    /* Only keep theme toggle */
    .ct-header-right .ct-hbtn:not(#ct-theme-toggle) { display: none !important; }
    .ct-header-right .ct-hbtn#ct-theme-toggle { width: 20px !important; height: 20px !important; min-width: 20px !important; font-size: 10px !important; }

    .ct-voicebar       { padding: 2px 4px !important; font-size: 9px !important; min-height: 18px !important; }
    #ct-vb-text        { font-size: 9px !important; }
    .ct-vbd            { width: 5px !important; height: 5px !important; }
    .ct-vb-btn         { font-size: 8px !important; padding: 1px 5px !important; }

    .ct-start-orb      { width: 48px !important; height: 48px !important; }
    .ct-start-orb .ct-orb-icon { font-size: 18px !important; }
    .ct-start-orb::before { inset: -3px !important; border-width: 1.5px !important; }
    .ct-start-orb::after  { inset: -7px !important; border-width: 1px !important; }
    #ct-empty-title    { font-size: 10px !important; margin-top: 8px !important; }

    .ct-inputbar       { padding: 2px 3px !important; gap: 2px !important; display: flex !important; flex-shrink: 0 !important; }
    .ct-inputwrap      { min-height: 24px !important; padding: 1px 3px 1px 6px !important; border-radius: 10px !important; }
    .ct-inputwrap textarea,
    #ct-input          { font-size: 9px !important; padding: 2px 0 !important; min-height: 10px !important; max-height: 40px !important; line-height: 1.3 !important; }
    #ct-input::placeholder { font-size: 9px !important; }
    .ct-send           { width: 18px !important; height: 18px !important; min-width: 18px !important; font-size: 8px !important; border-radius: 5px !important; }
    .ct-voice,
    .ct-speaker        { width: 22px !important; height: 22px !important; min-width: 22px !important; }
    .ct-voice .ct-vi,
    .ct-speaker .ct-si { font-size: 10px !important; }

    .ct-msg            { padding: 3px 5px !important; font-size: 10px !important; line-height: 1.3 !important; border-radius: 8px !important; max-width: 95% !important; }
    .ct-msg .ct-time   { font-size: 7px !important; }

    .ct-chat           { padding-left: 3px !important; padding-right: 3px !important; }
}


/* ──────────────────────────────────────
   Height constraints — short embeds
   ────────────────────────────────────── */
@media (max-height: 400px) {
    .ct-empty          { padding-top: 8px !important; padding-bottom: 8px !important; }
    .ct-start-orb      { width: 48px !important; height: 48px !important; }
    .ct-start-orb .ct-orb-icon { font-size: 20px !important; }
    #ct-empty-title    { font-size: 10px !important; margin-top: 6px !important; }
    .ct-header         { min-height: 28px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
}

@media (max-height: 300px) {
    #ct-empty-title    { display: none !important; }
    .ct-start-orb::after { display: none !important; }
}