#set($channel=$context.findValue("frame"))
#set($channeltype=$context.findValue("channeltype"))
<style>
#messages-area {
  position: relative;
  display: block !important;
}

.chat-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.chatterbox-message-list {
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease-in;
  display: block !important;
}

.chatterbox-message-list.visible {
  opacity: 1;
}

/* REMOVE FLEX — this was the cause of broken scrolling */
.chatterbox-message-list > div {
  display: block !important;
  margin-bottom: 0.75rem;
}

/* Message bubbles */
.chat-msg {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  max-width: 80%;
  word-wrap: break-word;
}

/* Left (user) bubble */
.student-message {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  margin-right: auto !important;
}

/* Right (AI) bubble — no flex, no align-self */
.colony-ai-message {
  background-color: #e9f5ff;
  border: 1px solid #cfe2ff;
  margin-left: auto !important;
}
</style>

<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="d-flex flex-column " style="height: calc(100vh - 280px);">
    
    <!-- Header -->



    <!-- Messages Area -->
<div class="flex-grow-1 overflow-auto p-3 position-relative" id="messages-area">
      
<div class="chatterbox-message-list" id="chat-messages">
        #foreach($message in $messagesthitracker)
          #set($type = $message.messagetype)
          $context.putPageValue("chat", $message)
          
          #if(!$type) #set($type = "message") #end
          $pages.include("$apphome/chatterbox/types/default/${type}.html", $context)
        #end
      </div>
    </div>
    <!-- Footer -->
<div class="bg-light p-3 border-top">
  <div class="row g-2 align-items-center">
    <div class="col">
      <input type="text"  autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="form-control terminal-input chatter-text" id="chatter-msg" placeholder="Type your message...">
    </div>
    <div class="col-auto">
      <button class="btn btn-outline-primary chatter-send" data-command="messagereceived" type="button" title="Send">
        <i class="bi bi-send-fill"></i>
      </button>
    </div>
  </div>
</div>


  </div>
</div>