#set($channeltype=$context.findValue("channeltype"))

<div id="$frame.id" class="thought-terminal"
     data-renderurl="$renderurl"
     data-rendermessageurl="$page.chathome/message.html"
     data-frame="$frame.id"
     data-framepath="$frame.framepath"
     data-channeltype="$channeltype"
     data-user="${user.id}"
     data-catalogid="${catalogid}"
     data-chatmode="terminal"
     data-sendmode="ajax"
     data-sendurl="$page.chathome/sendmessage.html"
     data-commandlist='["clear","login"]'>
  <div class="terminal-container terminal-flicker d-flex flex-column "  style="height:83vh; min-height:0; overscroll-behavior: contain;">
   

    <!-- 2) One scrollable stream for messages + prompt -->
    <div id="terminal-body" class="flex-grow-1 overflow-auto p-2">
      <style>
        /* Hide scrollbars but keep scrolling functional */
        #terminal-body {
          scrollbar-width: none;       /* Firefox */
          -ms-overflow-style: none;    /* IE 10+ */
          overscroll-behavior: contain;
        }
        #terminal-body::-webkit-scrollbar {
          display: none;               /* WebKit */
        }
      </style>

      <!-- 2a) Render past messages -->
      <div id="terminal-content" class="chatterbox-message-list">
        #foreach($message in $messagesthitracker.getPageOfHits())
          #set($type = $message.messagetype)
          $context.putPageValue("chat", $message)
          #if(!$type)
            #set($type = "message")
          #end
          $pages.include("$apphome/chatterbox/types/terminal/${type}.html", $context)
          $message.arguments
        #end
      </div>

      <!-- 2b) Inline prompt like bash -->
      <div class="terminal-input-line d-flex align-items-start mt-2">
        <span class="input-prompt">You&gt;&nbsp;</span>
        <div id="terminal-input"
             class="terminal-input flex-grow-1"
             contenteditable="true"
             spellcheck="false"
             autocapitalize="off"
             autocomplete="off"
             style="outline:none; white-space:pre-wrap;"></div>
      </div>
    </div>
  </div>
</div>
<!-- IBM Plex Mono -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">

<!-- Fira Code -->
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">

<!-- JetBrains Mono -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<!-- Source Code Pro -->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">

<!-- VT323 (retro green-screen look) -->
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">

<style>
  /* —— Base terminal look —— */
.terminal-container {
  background:#1e1e1e;
  color:#00ff00;
  font-family:"Fira Code", monospace;   /* swap name as desired */
}

.student-message {
  
  color:rgb(246, 245, 244);
}

  .terminal-header {
    background: #333;
    color: #fff;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
  }
  .terminal-title {
    font-weight: bold;
  }

  /* —— Messages —— */
  .chatterbox-message-list .terminal-message {
    margin-bottom: 0.5rem;
  }
  .message-content {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* —— Prompt —— */
  .terminal-input-line {
    font-family: inherit;
    font-size: inherit;
  }
  .input-prompt {
    color: #e0e0e0;
    font-weight: bold;
    flex-shrink: 0;
  }
  .terminal-input {
    color: #d0d0d0;
    caret-color: #d0d0d0;
    min-height: 1.2rem;
  }
  
  .terminal-container, #terminal-body {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}
  
  

</style>