/* Optional Cloudflare AI, compact and consistent with the Study Assistant. */
.jj-ai-button{border:1px solid var(--accent)!important;color:var(--accent)!important;background:var(--bg)!important;font-weight:650}
.jj-ai-button:disabled{opacity:.55;cursor:wait}
.jj-ai-panel{margin:9px 0;padding:10px 12px;border:1px solid var(--stroke);border-radius:8px;background:var(--bg);font-size:12px}
.jj-ai-panel[hidden]{display:none!important}
.jj-ai-panel>strong{font-size:12px}
.jj-ai-status{font-size:10px;color:var(--muted);line-height:1.4;margin:6px 0}
.jj-ai-answer{white-space:pre-wrap;line-height:1.55;overflow-wrap:anywhere}
.jj-ai-sources{border-top:1px solid var(--stroke);margin-top:8px;padding-top:6px;font-size:10px;display:grid;gap:4px}
.jj-ai-source{color:var(--muted);line-height:1.45}
.jj-ai-source a,.jj-ai-source button{color:var(--accent);font-size:10px}
@media(max-width:600px){.jj-ai-panel{padding:8px}.jj-ai-button{font-size:11px!important}}

.jj-ai-answer{white-space:normal;display:grid;gap:7px}
.jj-ai-answer p{margin:0;line-height:1.55;font-size:12px}
.jj-ai-answer h4{margin:5px 0 0;font-size:12px;color:var(--accent);font-weight:700}

.jj-ai-reset{font-size:11px!important;opacity:.85}
.jj-ai-thread{display:grid;gap:6px;max-height:330px;overflow-y:auto}
.jj-ai-turn{padding:7px 9px;border:1px solid var(--stroke);border-radius:7px;font-size:11px;line-height:1.45}
.jj-ai-turn.jj-ai-user{margin-left:12%;background:var(--panel)}
.jj-ai-turn.jj-ai-assistant{margin-right:8%;background:var(--bg)}
.jj-ai-turn strong{font-size:10px;color:var(--accent)}
.jj-ai-turn p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:125px;overflow:hidden}
.jj-ai-thread:not(:empty)+.jj-ai-answer{border-top:1px solid var(--stroke);padding-top:8px}

/* Reading-first layout: latest answer, optional earlier chat, then follow-up composer. */
.jj-ai-panel{padding:13px 15px}
.jj-ai-answer{display:block;white-space:normal;line-height:1.6}
.jj-ai-answer p{margin:0 0 11px;font-size:13px;line-height:1.65}
.jj-ai-answer h4{font-size:12px;letter-spacing:.025em;margin:15px 0 6px;color:var(--accent)}
.jj-ai-answer p:last-child{margin-bottom:0}
.jj-ai-history{border-top:1px solid var(--stroke);margin-top:10px;padding-top:8px}
.jj-ai-history[hidden]{display:none}
.jj-ai-history>summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:600}
.jj-ai-thread{margin-top:9px;max-height:320px}
.jj-ai-turn p{max-height:none;overflow:visible;font-size:11px;line-height:1.5}
.jj-ai-turn h4{font-size:11px;margin:7px 0 3px}
#jj-helper-app>.jj-helper-form{margin-top:10px}
@media(max-width:600px){.jj-ai-panel{padding:10px}.jj-ai-answer p{font-size:12px}}

/* Compact reading hierarchy and directly actionable citations. */
.jj-ai-answer{line-height:1.5}
.jj-ai-answer h4{font-size:12px;font-weight:750;line-height:1.4;letter-spacing:.015em;margin:12px 0 4px;color:var(--accent)}
.jj-ai-answer p{font-size:12px;line-height:1.55;margin:0 0 7px}
.jj-ai-answer p:last-child{margin-bottom:0}
.jj-ai-citation{display:inline-block;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:0 2px;border-radius:3px}
.jj-ai-citation:hover,.jj-ai-citation:focus-visible{background:var(--panel);outline:1px solid var(--accent)}
@media(max-width:600px){.jj-ai-answer h4{margin-top:10px}.jj-ai-answer p{font-size:12px;line-height:1.5;margin-bottom:6px}}

/* Stronger visual hierarchy for title-case AI sections. */
#jj-cloudflare-ai .jj-ai-answer h4{font-size:13px!important;font-weight:800!important;color:#5ee3bc!important;margin:15px 0 5px!important;line-height:1.4!important}
#jj-cloudflare-ai .jj-ai-answer p{font-size:12px;line-height:1.55;margin:0 0 8px}
#jj-cloudflare-ai .jj-ai-citation{color:#5ee3bc;font-weight:800;text-decoration:underline}

.jj-ai-chat-library{margin-bottom:12px;border-bottom:1px solid var(--stroke);padding-bottom:9px}
.jj-ai-chat-library>summary{cursor:pointer;font-size:12px;font-weight:700;color:#5ee3bc}
.jj-ai-chat-list{display:grid;gap:5px;margin-top:9px;max-height:260px;overflow:auto}
.jj-ai-chat-item{display:flex;align-items:center;gap:5px}
.jj-ai-chat-item button{border:1px solid var(--stroke);border-radius:6px;background:transparent;color:inherit;cursor:pointer;padding:6px 8px;font-size:11px}
.jj-ai-chat-item .jj-ai-chat-open{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jj-ai-chat-item .jj-ai-chat-open.active{border-color:#5ee3bc;color:#5ee3bc}
.jj-ai-chat-item .jj-ai-chat-action{flex-shrink:0}
.jj-ai-history .jj-ai-thread{max-height:none;overflow:visible}

/* Chat-first interface: continuous full conversation and composer underneath. */
#jj-cloudflare-ai{display:flex;flex-direction:column;gap:9px;max-width:100%;padding:12px}
#jj-cloudflare-ai>.jj-ai-thread{display:flex;flex-direction:column;gap:12px;max-height:none;overflow:visible;margin:4px 0}
#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-turn{max-width:94%;padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.6}
#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-user{align-self:flex-end;margin:0 0 0 12%;background:var(--panel);border-color:var(--stroke)}
#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-assistant{align-self:flex-start;margin:0 10% 0 0;background:transparent;border:0;padding:7px 3px}
#jj-cloudflare-ai .jj-ai-turn>strong{display:block;margin-bottom:6px;font-size:11px;color:#5ee3bc}
#jj-cloudflare-ai .jj-ai-turn>p{font-size:12px;max-height:none;overflow:visible;white-space:pre-wrap;margin:0}
#jj-cloudflare-ai .jj-ai-message-sources{margin-top:10px;border-top:1px solid var(--stroke);padding-top:7px;font-size:11px}
#jj-cloudflare-ai .jj-ai-message-sources summary{cursor:pointer;color:var(--muted)}
#jj-cloudflare-ai .jj-ai-message-sources a{color:#5ee3bc;text-decoration:underline}
#jj-cloudflare-ai>.jj-ai-answer:empty,#jj-cloudflare-ai>.jj-ai-sources:empty{display:none}
#jj-cloudflare-ai>.jj-ai-history{display:none}
#jj-cloudflare-ai .jj-ai-error{border:1px solid var(--stroke);padding:10px;border-radius:8px;color:var(--muted)}
#jj-helper-app>.jj-helper-form{position:relative;margin-top:9px;border:1px solid var(--stroke);border-radius:12px;padding:10px;background:var(--panel)}
#jj-helper-app>.jj-helper-form textarea{min-height:52px}
@media(max-width:600px){#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-turn{max-width:100%}#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-assistant{margin-right:0}#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-user{margin-left:9%}}

/* Constrain the chat transcript to its own scroll area, keeping the composer below. */
#jj-cloudflare-ai>.jj-ai-thread{
 height:clamp(280px,52vh,560px);
 max-height:560px;
 min-height:0;
 overflow-y:auto;
 overflow-x:hidden;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:var(--stroke) transparent;
 padding:6px 8px 12px 2px;
 scroll-behavior:smooth;
}
#jj-cloudflare-ai>.jj-ai-thread>.jj-ai-turn{flex-shrink:0}
@media(max-width:600px){
 #jj-cloudflare-ai>.jj-ai-thread{height:clamp(260px,48dvh,440px);max-height:440px;padding-right:5px}
}

/* Compact Academy study tools */
#jj-cloudflare-ai .jj-ai-tools{border-bottom:1px solid var(--stroke);padding-bottom:8px;font-size:11px}
#jj-cloudflare-ai .jj-ai-tools>summary{cursor:pointer;color:var(--accent);font-weight:700}
#jj-cloudflare-ai .jj-ai-tools-body{display:grid;gap:7px;padding:10px 0;max-height:270px;overflow:auto}
#jj-cloudflare-ai .jj-ai-tools-body>strong{font-size:11px;margin-top:4px}
#jj-cloudflare-ai .jj-ai-tools-body>small{color:var(--muted)}
#jj-cloudflare-ai .jj-ai-tool-row{display:flex;align-items:center;gap:5px}
#jj-cloudflare-ai .jj-ai-tool-row span{flex:1;min-width:0;overflow-wrap:anywhere}
#jj-cloudflare-ai .jj-ai-tool-row button,#jj-cloudflare-ai .jj-ai-message-actions button,#jj-cloudflare-ai .jj-ai-followups button{font-size:10px;border:1px solid var(--stroke);border-radius:7px;padding:5px 7px;background:transparent;color:inherit;cursor:pointer}
#jj-cloudflare-ai .jj-ai-message-actions{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
#jj-cloudflare-ai .jj-ai-evidence{font-size:10px;color:var(--muted);margin-top:6px}
#jj-cloudflare-ai .jj-ai-math{font-size:11px;line-height:1.5;border-left:2px solid var(--accent);padding:7px 9px;margin-top:8px;background:var(--panel)}
#jj-cloudflare-ai .jj-ai-followups{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
#jj-cloudflare-ai .jj-ai-followups strong{flex-basis:100%;font-size:11px;color:var(--muted)}
#jj-cloudflare-ai .jj-ai-followups button{color:var(--accent)}

#jj-cloudflare-ai .jj-ai-usage{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--muted);border-bottom:1px solid var(--stroke);padding:3px 0 8px}
#jj-cloudflare-ai .jj-ai-usage summary{cursor:pointer;color:var(--accent)}
#jj-cloudflare-ai .jj-ai-usage details[open]{flex-basis:100%}
#jj-cloudflare-ai .jj-ai-usage p{margin:5px 0;line-height:1.5}

/* Keep usage information on a single compact row; expanded help stays small. */
#jj-cloudflare-ai .jj-ai-usage{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:nowrap;padding:2px 0 5px;border-bottom:0;font-size:10px}
#jj-cloudflare-ai .jj-ai-usage-details{position:relative;flex:0 0 auto}
#jj-cloudflare-ai .jj-ai-usage-details>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--stroke);border-radius:50%;font-size:11px;line-height:1;cursor:pointer}
#jj-cloudflare-ai .jj-ai-usage-details>summary::-webkit-details-marker{display:none}
#jj-cloudflare-ai .jj-ai-usage-details[open]{flex-basis:auto}
#jj-cloudflare-ai .jj-ai-usage-details p{position:absolute;z-index:5;left:0;top:22px;width:min(270px,70vw);margin:0;padding:9px 10px;border:1px solid var(--stroke);border-radius:8px;background:var(--panel);box-shadow:0 5px 18px #0004;font-size:10px;line-height:1.45}

/* Prevent narrow flex/grid parents from breaking each usage word onto a new line. */
#jj-cloudflare-ai>.jj-ai-usage{
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 justify-content:flex-start!important;
 flex-wrap:nowrap!important;
 width:100%!important;
 min-width:0!important;
 gap:8px!important;
}
#jj-cloudflare-ai>.jj-ai-usage>span{
 display:block!important;
 flex:0 1 auto!important;
 width:auto!important;
 min-width:0!important;
 max-width:calc(100% - 32px)!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 word-break:normal!important;
 overflow-wrap:normal!important;
}
#jj-cloudflare-ai>.jj-ai-usage>.jj-ai-usage-details{
 display:block!important;
 flex:0 0 20px!important;
 width:20px!important;
 min-width:20px!important;
 position:relative;
}
#jj-cloudflare-ai>.jj-ai-usage>.jj-ai-usage-details>summary{white-space:nowrap}
#jj-cloudflare-ai>.jj-ai-usage>.jj-ai-usage-details p{
 width:min(270px,calc(100vw - 55px));
 max-width:calc(100vw - 55px);
 white-space:normal!important;
 overflow-wrap:break-word!important;
}

#jj-cloudflare-ai .jj-ai-archive{border-bottom:1px solid var(--stroke);padding:4px 0 8px;font-size:11px}
#jj-cloudflare-ai .jj-ai-archive>summary{cursor:pointer;color:var(--accent);font-weight:700}
#jj-cloudflare-ai .jj-ai-archive>button{font-size:11px;border:1px solid var(--stroke);border-radius:7px;background:transparent;color:inherit;padding:6px 9px;margin:8px 0;cursor:pointer}
#jj-cloudflare-ai .jj-ai-archive-results{display:grid;gap:6px;max-height:300px;overflow-y:auto}
#jj-cloudflare-ai .jj-ai-archive-item{border:1px solid var(--stroke);border-radius:7px;padding:7px}
#jj-cloudflare-ai .jj-ai-archive-item summary{cursor:pointer;font-weight:600}
#jj-cloudflare-ai .jj-ai-archive-item p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
#jj-cloudflare-ai .jj-ai-archive-item small{display:block;color:var(--muted)}
#jj-cloudflare-ai .jj-ai-archive-item a{display:inline-block;margin-top:5px;color:var(--accent)}

/* Consolidated chat tools: collapsed by default, no extra vertical sections. */
#jj-cloudflare-ai>.jj-ai-unified-tools{margin:0 0 10px;border:1px solid var(--stroke);border-radius:9px;padding:0;background:transparent}
#jj-cloudflare-ai>.jj-ai-unified-tools>summary{padding:10px 12px;cursor:pointer;color:var(--accent);font-size:12px;font-weight:700;list-style-position:inside}
#jj-cloudflare-ai>.jj-ai-unified-tools>.jj-ai-unified-body{padding:0 12px 10px;display:grid;gap:4px}
#jj-cloudflare-ai .jj-ai-unified-body>details{margin:0!important;padding:8px 0!important;border:0!important;border-top:1px solid var(--stroke)!important;border-radius:0!important;background:transparent!important}
#jj-cloudflare-ai .jj-ai-unified-body>details>summary{font-size:11px;cursor:pointer}
#jj-cloudflare-ai .jj-ai-unified-body .jj-recent-content{max-width:100%;overflow-x:auto}
#jj-cloudflare-ai .jj-ai-unified-body .jj-recent-scroll{max-width:100%;overflow-x:auto}

/* Example prompts stay out of the way until requested. */
#jj-helper-app>.jj-helper-examples-collapsed{display:block;margin:4px 0 8px;padding:0!important;border:0!important;background:transparent!important}
#jj-helper-app>.jj-helper-examples-collapsed>summary{cursor:pointer;display:list-item;font-size:11px;font-weight:600;color:var(--accent);padding:4px 0}
#jj-helper-app>.jj-helper-examples-collapsed:not([open])>button{display:none!important}
#jj-helper-app>.jj-helper-examples-collapsed[open]>button{margin:5px 5px 2px 0}

/* Mobile chat: no horizontal overflow, short transcript, accessible 2-column composer. */
@media(max-width:650px){
 #jj-helper-app,.jj-helper-app,#jj-cloudflare-ai,#jj-helper-app>.jj-helper-form{box-sizing:border-box;max-width:100%;min-width:0}
 #jj-cloudflare-ai{padding:8px!important;margin:6px 0!important;overflow-x:clip}
 #jj-cloudflare-ai>.jj-ai-thread{height:min(40dvh,350px)!important;min-height:220px!important;max-height:350px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;padding:3px 2px 8px!important;gap:8px!important}
 #jj-cloudflare-ai>.jj-ai-thread>.jj-ai-turn{box-sizing:border-box;max-width:100%!important;min-width:0!important;overflow-wrap:anywhere;padding:8px 7px!important}
 #jj-cloudflare-ai>.jj-ai-thread>.jj-ai-user{max-width:92%!important;margin-left:auto!important;padding:9px 11px!important}
 #jj-cloudflare-ai>.jj-ai-thread>.jj-ai-assistant{width:100%!important;margin:0!important}
 #jj-cloudflare-ai .jj-ai-answer,#jj-cloudflare-ai .jj-ai-answer *{max-width:100%;overflow-wrap:anywhere}
 #jj-cloudflare-ai .jj-ai-answer pre,#jj-cloudflare-ai .jj-ai-answer table{display:block;max-width:100%;overflow-x:auto}
 #jj-cloudflare-ai .jj-ai-message-actions{gap:4px}
 #jj-cloudflare-ai .jj-ai-message-actions button,#jj-cloudflare-ai .jj-ai-followups button{font-size:11px;min-height:30px}
 #jj-cloudflare-ai .jj-ai-followups{gap:5px}
 #jj-cloudflare-ai .jj-ai-followups button{text-align:left}
 #jj-cloudflare-ai>.jj-ai-unified-tools{margin-bottom:6px}
 #jj-cloudflare-ai>.jj-ai-unified-tools>summary{padding:8px;font-size:11px}
 #jj-helper-app>.jj-helper-form{padding:8px!important;margin-top:6px!important;gap:7px}
 #jj-helper-app>.jj-helper-form textarea{box-sizing:border-box;width:100%!important;min-width:0!important;min-height:74px!important;max-height:160px;font-size:16px!important;line-height:1.4}
 #jj-helper-app>.jj-helper-form .jj-helper-form-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:6px!important;width:100%;min-width:0}
 #jj-helper-app>.jj-helper-form .jj-helper-form-actions>button{box-sizing:border-box;width:100%!important;min-width:0!important;min-height:40px!important;padding:8px 5px!important;text-align:center!important;white-space:normal!important;font-size:11px!important;line-height:1.2}
 #jj-helper-app>.jj-helper-form .jj-helper-form-actions>.jj-ai-button{grid-column:1}
 #jj-helper-app>.jj-helper-form .jj-helper-form-actions>button[type=submit]{grid-column:2}
 #jj-helper-app .jj-question-queue,#jj-helper-app .jj-helper-results,#jj-helper-app .jj-helper-feedback{max-width:100%;min-width:0;overflow-wrap:anywhere}
}

/* Smaller example placeholder text in the mobile question composer. */
@media(max-width:650px){
 #jj-helper-app>.jj-helper-form textarea::placeholder{
  font-size:12px!important;
  line-height:1.35!important;
  opacity:.75;
 }
}

/* Mobile-first compact composer and transcript. Preserve 16px input text to avoid iOS zoom. */
@media(max-width:650px){
 #jj-helper-app>.jj-helper-form{padding:6px!important;gap:5px!important}
 #jj-helper-app>.jj-helper-form textarea{min-height:54px!important;max-height:130px!important;padding:8px 9px!important;border-radius:8px!important}
 #jj-helper-app>.jj-helper-form textarea::placeholder{font-size:10px!important;line-height:1.25!important;opacity:.65!important}
 #jj-helper-app>.jj-helper-form .jj-helper-form-actions{gap:5px!important}
 #jj-helper-app>.jj-helper-form .jj-helper-form-actions>button{min-height:36px!important;padding:6px 4px!important;font-size:10px!important;border-radius:7px!important}
 #jj-cloudflare-ai>.jj-ai-thread{height:min(36dvh,310px)!important;min-height:195px!important;max-height:310px!important}
 #jj-cloudflare-ai>.jj-ai-thread>.jj-ai-turn{font-size:11px!important;line-height:1.45!important}
 #jj-cloudflare-ai .jj-ai-answer p{font-size:11px!important;line-height:1.45!important}
 #jj-cloudflare-ai .jj-ai-answer h3,#jj-cloudflare-ai .jj-ai-answer h4{font-size:12px!important;line-height:1.35!important}
 #jj-cloudflare-ai .jj-ai-followups button,#jj-cloudflare-ai .jj-ai-message-actions button{font-size:10px!important;padding:4px 6px!important;min-height:28px!important}
 #jj-cloudflare-ai .jj-ai-followups{margin:2px 0 4px!important}
 #jj-cloudflare-ai>.jj-ai-unified-tools>summary{padding:7px 8px!important}
}

#jj-cloudflare-ai .jj-ai-import-label{display:block;font-size:11px;color:var(--accent);margin:7px 0;cursor:pointer}
#jj-cloudflare-ai .jj-ai-import-input{display:block;max-width:100%;font-size:11px;margin:5px 0;color:var(--text)}
#jj-cloudflare-ai .jj-ai-archive>small{display:block;font-size:10px;color:var(--muted);line-height:1.45;margin:5px 0 8px}
