/* Keep the working area inset from the viewport; gestures stay in the keypad. */
.eai360-panel-shell { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.eai360-panel-shell .stage { margin-inline:3vw; margin-bottom:3dvh; }
/* Typography follows the available viewport height as well as width. */
.eai360-panel-shell { --coach-heading:16px; --coach-body:14px; --coach-field:14px; --coach-label:15px; --coach-small:12px; --coach-tab:15px; --coach-speaker:15px; --coach-greet:14px; }
.eai360-panel-shell .stage { --coach-rail-preferred:30%; position:relative; grid-template-columns:var(--coach-rail-width,clamp(300px,30%,50%)) minmax(0,1fr); }
/* Fill the right column instead of centering a height-limited square. */
.eai360-panel-shell .keypad-stage { padding-inline:0; align-items:stretch; }
.eai360-panel-shell .keypad { width:94%; margin-inline:3%; height:100%; max-width:none; max-height:none; aspect-ratio:auto; }
.eai360-panel-shell .status-rail { overflow-y:auto; overflow-x:hidden; min-width:0; font-size:var(--coach-body); line-height:1.55; overscroll-behavior-y:contain; scrollbar-gutter:stable; scrollbar-color:#72758e var(--rail); }
.coach-resizer { position:absolute; z-index:5; left:var(--coach-rail-width,clamp(300px,30%,50%)); top:0; bottom:0; width:14px; cursor:col-resize; touch-action:none; }
.coach-resizer::after { content:''; position:absolute; left:4px; top:calc(50% - 28px); width:4px; height:56px; border-radius:4px; background:#72758e; }
.coach-resizer:hover,.coach-resizer:focus-visible,.coach-resizing .coach-resizer { background:rgba(251,191,36,.1); outline:1px solid var(--eai-gold); outline-offset:-1px; }
.coach-resizer:hover::after,.coach-resizer:focus-visible::after,.coach-resizing .coach-resizer::after { background:var(--eai-gold); }
.coach-resizing { cursor:col-resize; user-select:none; }
.coach-resizer[hidden],.coach-reading-wide .coach-resizer { display:none; }
.coach-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; flex:0 0 auto; }
.coach-tabs button,.coach-conversation button,.coach-reader button { font:inherit; font-size:var(--coach-body); font-weight:700; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 10px; cursor:pointer; }
.coach-tabs button { font-size:var(--coach-tab); }
.coach-tabs button[aria-selected="true"] { color:var(--eai-gold); border-color:var(--eai-gold); }
.coach-tabs button { color:var(--eai-gold); }
#coach-panel { min-height:0; flex:1 0 auto; display:flex; flex-direction:column; }
#coach-panel[hidden],#operation-panel[hidden],.coach-conversation [hidden],.coach-reader[hidden],.coach-reader [hidden] { display:none!important; }
#operation-panel { min-height:0; flex:0 0 auto; overflow:visible; }
.eai360-panel-shell .status-rail h2 { font-size:var(--coach-heading); font-weight:700; color:var(--eai-gold); }
.eai360-panel-shell .status,.eai360-panel-shell .logs { font-size:var(--coach-body); max-height:none; overflow:visible; overflow-wrap:anywhere; }
.coach-conversation { --coach-card-min:300px; display:flex; flex-direction:column; flex:1 0 auto; min-height:0; }
.coach-conversation[hidden] { display:none; }
.coach-service-status { color:#c2c6d9; font-size:var(--coach-small); margin:0 0 12px; }
.coach-context,.coach-composer { flex:0 0 auto; min-width:0; }
.coach-question-card,.coach-dialogue { background:#222437; border:1px solid #41445b; border-radius:12px; padding:12px; margin:0 0 12px; min-width:0; }
.coach-dialogue { flex:1 0 auto; display:flex; flex-direction:column; }
.coach-context,#coach-detail-wrap { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:center; }
.coach-context label { display:block; margin:0; font-size:var(--coach-label); font-weight:700; color:var(--eai-gold); }
#coach-detail-wrap { grid-column:1/-1; margin-top:4px; }
.coach-context select,.coach-composer textarea { width:100%; min-width:0; font:inherit; font-size:var(--coach-field); color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px; }
.coach-context select { text-overflow:ellipsis; }
.coach-composer textarea { overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; }
.coach-messages { flex:1 0 auto; min-height:0; overflow:visible; padding:0; margin:8px 0; }
.coach-messages:empty { margin:0; flex:0 0 auto; }
.coach-composer { margin-top:10px; }
.coach-question-card h2 { margin-bottom:10px; }
.coach-answer-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.coach-answer-heading h2 { margin:0; }
.coach-answer-heading .coach-new { border:0; padding:4px; color:#b6bdd2; background:transparent; font-size:var(--coach-small); }
.coach-answer-empty { flex:1; display:flex; align-items:center; min-height:88px; margin:10px 0 0; padding:12px; color:#b6bdd2; background:#1b1e2e; border:1px dashed #494d66; border-radius:8px; font-size:var(--coach-body); }
.coach-message { padding:12px; background:var(--panel); border-radius:10px; margin:8px 0; font-size:var(--coach-body); line-height:1.6; overflow-wrap:anywhere; }
.coach-message>strong { display:block; color:var(--eai-gold); font-size:var(--coach-speaker); font-weight:700; margin-bottom:4px; }
.coach-message>small { display:block; color:var(--muted); font-size:var(--coach-small); }
.coach-message p { margin:5px 0; }
.coach-paragraph-gap { height:7px; }
.coach-user-message { border-left:2px solid #72758e; }
.coach-turn { margin:0 0 16px; border-top:1px solid #655c3e; padding-top:8px; }
.coach-turn:first-child { border-top:0; padding-top:0; }
.coach-conversation .coach-turn-heading { margin:0 0 4px; color:var(--eai-gold); font-size:var(--coach-small); font-weight:700; }
.coach-message-error { border:1px solid #f0a898; }
.coach-actions,.coach-send-row,.coach-reader-tools,.coach-image-tools { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.coach-actions { margin:7px 0; }
.coach-actions button,.coach-search-option { font-size:var(--coach-small); }
.coach-search-option { display:flex; align-items:center; gap:5px; font-weight:700; }
.coach-search-option input { accent-color:var(--eai-gold); }
.coach-voice-status { color:var(--muted); font-size:var(--coach-small); margin:4px 0; }
.coach-send-row { justify-content:flex-start; margin-top:6px; }
.coach-send-row .coach-send { margin-left:auto; background:var(--eai-gold); border-color:var(--eai-gold); color:#1a1a28; padding:9px 18px; }
.coach-voice-status:empty { display:none; }
.coach-voice-status[data-state="error"] { border-left:2px solid var(--eai-gold); padding:8px 10px; margin:8px 0 0; color:#f4d18a; font-size:var(--coach-body); }
.coach-voice-status .coach-type-instead { display:inline-block; margin-top:6px; padding:4px 8px; color:var(--eai-gold); font-size:var(--coach-body); }
.coach-conversation button:disabled { opacity:.5; cursor:not-allowed; }
.coach-context-note,.coach-inline-note { font-size:var(--coach-small); color:var(--muted); }
.coach-source-card { border-top:1px solid var(--border); padding-top:8px; margin-top:10px; }
.coach-source-card>small { display:block; color:var(--muted); font-size:var(--coach-small); }
.coach-source-card>a,.coach-search-suggestions a,.coach-service-status a,.coach-reader-original { color:var(--eai-gold); overflow-wrap:anywhere; }
.coach-source-card>a { display:block; font-size:var(--coach-speaker); font-weight:700; }
.coach-search-suggestions { font-size:var(--coach-small); }
.coach-search-suggestions a { display:block; }
.coach-reader { min-height:0; flex:1 0 auto; display:flex; flex-direction:column; gap:8px; border:1px solid #41445b; border-radius:12px; background:#222437; padding:14px; }
.coach-reader h3 { margin:0; color:var(--eai-gold); font-weight:700; font-size:var(--coach-heading); }
.coach-reader-state { color:var(--muted); font-size:var(--coach-small); margin:0; }
.coach-reader-content { flex:1 0 auto; overflow:auto; min-height:80px; }
.coach-reader-content img { width:100%; height:auto; display:block; }
.coach-source-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--coach-body); line-height:1.6; }
.coach-image-tools button { font-size:var(--coach-small); }
.coach-latest { position:sticky; bottom:10px; align-self:flex-end; z-index:2; box-shadow:0 3px 12px #0008; }
.coach-reading-wide .stage { grid-template-columns:minmax(0,1fr); }
.coach-reading-wide .keypad-stage { display:none; }
.key[data-ui-action="coach"][aria-pressed="true"] { border:2px solid var(--eai-gold); }
.key[data-ui-action="coach"] .key-icon { font-size:clamp(48px,12cqmin,84px); }
@media(max-width:960px) {
  body.eai360-panel-shell { height:auto; min-height:100dvh; overflow:auto; }
  .eai360-panel-shell .stage { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  .eai360-panel-shell .stage { flex:0 0 auto; }
  .eai360-panel-shell .status-rail { max-height:75dvh; overflow-y:auto; }
  #coach-panel { min-height:0; }
  .coach-reading-wide .status-rail { max-height:calc(100dvh - var(--top-h)); }
  .eai360-panel-shell .keypad-stage { min-height:390px; container-type:inline-size; }
  .eai360-panel-shell .keypad { width:94%; height:auto; aspect-ratio:1/1; max-height:none; }
  .eai360-panel-shell .key-label { font-size:clamp(12px,3.4vw,16px); }
  .eai360-panel-shell .key-number { font-size:16px; }
  .eai360-panel-shell .key-icon { font-size:38px; }
  .key[data-ui-action="coach"] .key-icon { font-size:64px; }
  .coach-reading-wide .keypad-stage { display:none; }
}
@media(pointer:coarse) { .coach-tabs button,.coach-conversation button,.coach-reader button,.coach-search-option { min-height:44px; } .coach-resizer { width:22px; } }

.coach-greeting { flex:0 0 auto; padding:2px 0 9px; margin:0 0 9px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.coach-greeting strong { display:block; color:#fbbf24; font-size:var(--coach-greet); font-weight:600; line-height:1.45; }
.coach-tabs button,.eai360-panel-shell .key-label,.eai360-panel-shell .status-rail h2 { font-weight:700; }
.eai360-panel-shell .key-number { font-weight:800; }

.coach-google-widget { overflow:auto; max-width:100%; margin-top:10px; }
.coach-external-message { border-left:2px solid #72758e; }

/* Short landscape keeps the existing side-by-side keypad; the left pane scrolls. */
@media(min-width:640px) and (max-width:960px) and (max-height:600px) and (orientation:landscape) {
  body.eai360-panel-shell { height:100dvh; min-height:0; overflow:hidden; }
  .eai360-panel-shell .stage { --coach-rail-preferred:48%; flex:1 1 auto; grid-template-columns:var(--coach-rail-width,clamp(300px,48%,50%)) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .eai360-panel-shell .status-rail { max-height:none; overflow-y:auto; }
  #coach-panel { min-height:0; }
  .eai360-panel-shell .keypad-stage { min-height:0; container-type:size; }
  .eai360-panel-shell .keypad { width:94%; height:calc(100% - 22px); aspect-ratio:auto; }
  .eai360-panel-shell .key-label { font-size:12px; }
  .eai360-panel-shell .key-number { font-size:14px; }
  .eai360-panel-shell .key-icon { font-size:30px; }
  .key[data-ui-action="coach"] .key-icon { font-size:42px; }
  .coach-reading-wide .stage { grid-template-columns:minmax(0,1fr); }
}

/* The original header shrinks in short landscape, including zoomed desktop windows. */
@media(orientation:landscape) and (max-height:600px) {
  .eai360-panel-shell { --coach-heading:14px; --coach-body:12px; --coach-field:13px; --coach-label:13px; --coach-small:11px; --coach-tab:14px; --coach-speaker:13px; --coach-greet:13px; }
  .coach-question-card,.coach-dialogue { padding:10px; margin-bottom:10px; }
  .coach-context select { padding:6px 8px; }
  .coach-tabs { margin-bottom:8px; }
  .coach-greeting { padding-bottom:6px; margin-bottom:8px; }
  .coach-answer-empty { min-height:72px; }
}
/* Native touch inputs stay at 16px to avoid focus zoom on mobile browsers. */
@media(pointer:coarse) {
  .eai360-panel-shell { --coach-heading:17px; --coach-body:14px; --coach-field:16px; --coach-label:16px; --coach-small:12px; --coach-tab:15px; --coach-speaker:15px; --coach-greet:14px; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .eai360-panel-shell .app-title { font-size:22px; }
}

/* The rail scrolls the whole conversation. Only the long text scrolls inside cards. */
#coach-panel,.coach-conversation { flex:1 0 auto; min-height:0; overflow:visible; }
.coach-question-card,.coach-dialogue { box-sizing:border-box; height:var(--coach-card-height,var(--coach-card-min)); flex:0 0 var(--coach-card-height,var(--coach-card-min)); min-height:var(--coach-card-min); overflow:visible; }
.coach-dialogue { position:relative; height:var(--coach-answer-height,var(--coach-card-height)); flex-basis:var(--coach-answer-height,var(--coach-card-height)); }
.coach-answer-scroll { position:relative; display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:auto; scrollbar-gutter:stable; scrollbar-color:#72758e #222437; }
.coach-answer-scroll:focus-visible { outline:1px solid var(--eai-gold); outline-offset:-1px; border-radius:6px; }
.coach-answer-heading { flex:0 0 auto; }
.coach-answer-empty { min-height:0; }
.coach-messages { flex:0 0 auto; min-height:0; overflow:visible; }
.coach-latest { position:sticky; bottom:8px; flex:0 0 auto; }
#operation-panel { flex:1 0 auto; min-height:0; overflow:visible; }
.coach-reader { flex:1 0 auto; min-height:300px; height:calc(85dvh - var(--top-h)); overflow:hidden; }
.coach-reader-content { flex:1 1 auto; min-height:0; overflow:auto; }
@media(max-width:960px) {
  .eai360-panel-shell .status-rail { height:75dvh; max-height:75dvh; overflow-y:auto; }
  .coach-reading-wide .status-rail { height:calc(100dvh - var(--top-h)); max-height:calc(100dvh - var(--top-h)); }
}
@media(min-width:640px) and (max-width:960px) and (max-height:600px) and (orientation:landscape) {
  .eai360-panel-shell .status-rail { height:100%; max-height:100%; }
}

/* Compact controls preserve reading space; their height never shrinks the answer. */
.coach-tabs { gap:6px; margin-bottom:6px; }
.coach-tabs button,.coach-conversation button,.coach-reader button { padding:4px 8px; min-height:28px; line-height:1.25; border-radius:6px; }
.coach-greeting { margin-bottom:6px; padding:0 0 5px; }
.coach-greeting { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-height:32px; border-bottom-color:rgba(251,191,36,.2); }
.coach-avatar { display:block; width:32px; height:32px; flex:0 0 32px; border-radius:9px; }
.coach-greeting strong { flex:1 1 auto; min-width:0; }
.coach-identity-note { color:#b6bdd2; font-size:var(--coach-small); line-height:1.3; padding:2px 5px; border:1px solid #41445b; border-radius:5px; }
.coach-identity-note[hidden] { display:none; }
.coach-symbol { display:inline-block; width:15px; height:15px; flex:0 0 15px; vertical-align:-2px; margin-right:5px; color:var(--eai-gold); }
.coach-question-card,.coach-dialogue { background:linear-gradient(135deg,rgba(251,191,36,.045),transparent 48%),#222437; border-top-color:rgba(251,191,36,.4); }
.coach-answer-empty { gap:7px; }
.coach-answer-empty>.coach-symbol { width:20px; height:20px; flex-basis:20px; margin:1px 0 0; opacity:.65; }
.coach-question-card,.coach-dialogue { padding:6px; margin-bottom:6px; border-radius:9px; }
.coach-question-card { display:flex; flex-direction:column; }
.coach-question-heading { display:flex; align-items:flex-start; gap:8px; flex:0 0 auto; min-width:0; }
.coach-question-heading h2 { flex:0 0 auto; margin:0!important; line-height:28px; }
.coach-question-heading .coach-context { flex:1 1 auto; gap:4px; }
.coach-context label { font-size:var(--coach-small); }
.coach-context select { min-height:28px; height:28px; padding:2px 6px; line-height:1.25; }
#coach-detail-wrap { margin-top:0; gap:4px; }
.coach-composer { display:flex; flex-direction:column; flex:1 1 0; min-height:0; margin-top:4px; }
.coach-composer textarea { display:block; flex:1 1 0; height:0; min-height:140px; max-height:none; padding:6px 8px; line-height:1.45; resize:none; }
.coach-composer textarea::placeholder { color:#a8aec2; opacity:1; }
.coach-send-row { gap:4px 6px; flex:0 0 auto; margin-top:4px; }
.coach-send-row button { font-size:var(--coach-small); }
.coach-send-row .coach-send { min-height:28px; padding:4px 12px; }
.coach-search-option { min-height:28px; gap:3px; white-space:nowrap; }
.coach-voice-status { margin:4px 0 0; }
.coach-voice-status[data-state="error"] { padding:5px 6px; margin-top:4px; }
.coach-dialogue { padding:6px; }
.coach-answer-heading { min-height:0; gap:4px; line-height:1.25; }
.coach-answer-heading h2 { line-height:1.25; }
.coach-answer-heading .coach-new { min-height:24px; padding:2px 4px; }
.coach-answer-empty { align-items:flex-start; margin-top:2px; padding:6px 8px; }
.coach-messages { margin:4px 0 0; }
.coach-message { margin:0 0 6px; padding:6px 8px; border-radius:6px; }
.coach-message>small,.coach-message>strong { display:inline; margin-right:6px; }
.coach-message-body { margin-top:3px; }
.coach-message p { margin:3px 0; }
.coach-paragraph-gap { height:4px; }
.coach-actions { margin:4px 0; gap:4px; }
.coach-source-card { padding-top:4px; margin-top:6px; }
@media(pointer:coarse) {
  .coach-tabs button,.coach-conversation button,.coach-reader button,.coach-search-option { min-height:32px; }
  .coach-context select { height:32px; min-height:32px; }
  .coach-question-heading h2 { line-height:32px; }
  .coach-send-row .coach-send { min-height:32px; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:450px) {
  .coach-question-heading h2 { line-height:28px; }
  .coach-context select { height:28px; min-height:28px; }
  .coach-send-row button,.coach-send-row .coach-send,.coach-search-option { min-height:28px; }
}

/* iPhone browser chrome can leave only 250-320 CSS px. Do not crush cards
   to fit nine keys and two text panes into that height: each side can scroll. */
@media(min-width:640px) and (max-width:960px) and (orientation:landscape) and (max-height:450px) {
  .eai360-panel-shell .status-rail { overflow-y:auto; padding:8px; scrollbar-gutter:stable; }
  .coach-conversation { --coach-card-min:260px; }
  .coach-reader { height:340px; }
  .eai360-panel-shell .keypad-stage { display:block; overflow-y:auto; overflow-x:hidden; container-type:inline-size; scrollbar-gutter:stable; overscroll-behavior:contain; }
  .eai360-panel-shell .keypad { height:auto; min-height:282px; max-height:none; grid-template-rows:repeat(3,minmax(88px,1fr)); aspect-ratio:auto; }
  .eai360-panel-shell .key { min-height:88px; }
  .key[data-ui-action="coach"] .key-icon { font-size:34px; }
  .coach-reading-wide #coach-panel { min-height:0; }
}
.coach-conversation .coach-char-count { flex:0 0 auto; margin:2px 0; text-align:right; font-size:var(--coach-small); line-height:1.4; color:#c1c5d6; }
@media(max-width:639px) {
  .eai360-panel-shell .keypad { aspect-ratio:auto; grid-template-rows:repeat(3,minmax(110px,1fr)); }
}