InviteNameWindow < NewMainWindow
  id: inviteCharacterName
  !text: tr('Invite player to selected chat channel')
  anchors.horizontalCenter: parent.horizontalCenter
  size: 360 121

  Panel
    id: contentPanel
    anchors.fill: parent
    margin: 12 12 12 13

    Label
      id: nameLabel
      anchors.top: parent.top
      anchors.left: parent.left
      !text: tr('Please Enter a character name:')

    TextEdit
      id: characterName
      size: 328 16
      focusable: true
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 7

    HorizontalSeparator
      id: separator
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 10

    Button
      id: cancel
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      !text: tr('Cancel')
      size: 43 20

    Button
      id: ok
      anchors.bottom: parent.bottom
      anchors.right: prev.left
      !text: tr('Ok')
      size: 43 20
      margin-right: 10

ExcludeNameWindow < NewMainWindow
  id: excludeCharacterName
  !text: tr('Exclude player from selected chat channel')
  anchors.horizontalCenter: parent.horizontalCenter
  size: 360 121

  Panel
    id: contentPanel
    anchors.fill: parent
    margin: 12 12 12 13

    Label
      id: nameLabel
      anchors.top: parent.top
      anchors.left: parent.left
      !text: tr('Please Enter a character name:')

    TextEdit
      id: characterName
      size: 328 16
      focusable: true
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 7

    HorizontalSeparator
      id: separator
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 10

    Button
      id: cancel
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      !text: tr('Cancel')
      size: 43 20

    Button
      id: ok
      anchors.bottom: parent.bottom
      anchors.right: prev.left
      !text: tr('Ok')
      size: 43 20
      margin-right: 10

// VALDREN (apertura, 23-oct): chat en el Design System (guía A.6/A.6b, fase4-ventanas). En reposo sigue invisible
// (CHAT_IDLE_OPACITY = 0 en game_interface); esto es su aspecto activo: marco del HUD (hud_marco, como minimapa y barra),
// pestañas GameTab (text-2, activa en text con subrayado de acento), mensajes en Geist 12, scroll fino de la piel,
// entrada GameInput de 22 px con el modo de habla como ícono de línea y botones de cabecera de la familia propia.
ConsoleLabel < UITextEdit
  font: verdana-11px-antialised
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  height: 16
  color: yellow
  margin-left: 2
  text-wrap: true
  text-auto-resize: true
  selection-color: $otmmo-text
  selection-background-color: $otmmo-selection
  change-cursor-image: false
  cursor-visible: false
  editable: false
  draggable: true
  selectable: false
  focusable: false

ConsolePhantomLabel < UILabel
  font: verdana-11px-antialised
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  height: 16
  color: yellow
  text-wrap: true
  text-auto-resize: true
  selection-color: $otmmo-text
  selection-background-color: $otmmo-selection

ConsoleTabBar < MoveableTabBar
  height: 24
  phantom: true

// El fondo y el borde van en el panel de la pestaña y el buffer queda 1 px adentro: el ScrollablePanel recorta en su
// propio rect y la línea de arriba tapaba el borde.
ConsoleTabBarPanel < MoveableTabBarPanel
  id: consoleTab
  background-color: $otmmo-bg
  border-width: 1
  border-color: $otmmo-border

  ScrollablePanel
    id: consoleBuffer
    anchors.fill: parent
    margin: 1
    padding: 4
    padding-right: 14
    padding-left: 6
    vertical-scrollbar: consoleScrollBar
    layout:
      type: verticalBox
      align-bottom: true
    inverted-scroll: true

  VerticalQtScrollBar
    id: consoleScrollBar
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    step: 16
    pixels-scroll: true
    margin-top: 2
    margin-right: 2
    margin-bottom: 2

// Pestaña del chat = GameTab (20-tabbars.otui) como UIButton, que es lo que pide UIMoveableTabBar. Ancho fijo 64
// (Local, Server, NPCs); los nombres largos se ajustan a su texto (uimovabletabbar.lua). Los avisos de mensaje nuevo
// los pinta console.lua con OtmmoTheme (warn).
ConsoleTabBarButton < UIButton
  size: 64 24
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  text-align: center
  border-width-bottom: 2
  border-color: alpha
  anchors.top: parent.top
  anchors.left: parent.left
  padding: 0 8
  tab-spacing: 0
  change-cursor-image: true
  cursor: pointer
  &tabWidth: 64

  $hover !checked:
    color: $otmmo-text

  $checked:
    color: $otmmo-text
    border-color: $otmmo-accent

// Botón de cabecera del chat: GameIconButton a 20 px (íconos de línea de 18, data/images/game/hud/iconos).
ConsoleHeaderButton < UIButton
  size: 20 20
  image-source: /images/ui/boton_icono
  image-clip: 0 0 28 28
  image-border: 4
  icon-color: $otmmo-text-2
  icon-align: center
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    image-clip: 0 28 28 28
    icon-color: $otmmo-text

  $pressed !disabled:
    image-clip: 0 56 28 28
    icon-offset-y: 1

  $disabled:
    image-clip: 0 112 28 28
    icon-color: $otmmo-text-disabled
    change-cursor-image: false

// Flechas de navegación entre pestañas: solo aparecen cuando no caben (ancho 0 si no).
ConsoleNavButton < UIButton
  size: 0 24
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-md
  color: $otmmo-text-2
  text-align: center
  enabled: false
  &dynamicNavigation: 64

  $!disabled:
    width: 16

  $disabled:
    width: 0

  $hover !disabled:
    color: $otmmo-text

Panel
  id: consolePanel
  anchors.fill: parent

  UIWidget
    id: consoleFrame
    image-source: /images/ui/hud_marco
    image-border: 5
    anchors.fill: parent
    focusable: false
    phantom: true

  Panel
    id: consoleContentPanel
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: consoleTextEdit.top
    margin-left: 8
    margin-right: 8
    margin-bottom: 6
    margin-top: 32
    focusable: false

  Panel
    id: readOnlyPanel
    anchors.top: parent.top
    anchors.left: parent.horizontalCenter
    anchors.right: parent.right
    anchors.bottom: consoleTextEdit.top
    margin-left: 2
    margin-right: 8
    margin-bottom: 6
    margin-top: 32
    focusable: false
    background-color: $otmmo-bg
    border-width: 1
    border-color: $otmmo-border
    ScrollablePanel
      id: panel
      anchors.fill: parent
      margin: 1
      vertical-scrollbar: consoleScrollBarReadOnlyPanel
      padding: 4
      padding-right: 14
      padding-left: 6
      inverted-scroll: true
      layout:
        type: verticalBox
        align-bottom: true
    VerticalQtScrollBar
      id: consoleScrollBarReadOnlyPanel
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      step: 16
      pixels-scroll: true
      margin-top: 2
      margin-bottom: 2
      margin-right: 2

  ConsoleNavButton
    id: prevChannelButton
    !text: '<'
    anchors.left: parent.left
    anchors.top: parent.top
    margin-left: 8
    margin-top: 6

  ConsoleTabBar
    id: consoleTabBar
    anchors.left: prevChannelButton.right
    anchors.top: parent.top
    anchors.right: closeChannelButton.left
    margin-top: 6
    margin-right: 20
    tab-spacing: 2
    movable: true

  ConsoleNavButton
    id: nextChannelButton
    !text: '>'
    anchors.left: consoleTabBar.right
    anchors.top: consoleTabBar.top

  // Vista extendida de OTClient (chat arrastrable / oculto): sin uso en el HUD de VALDREN. Se conservan los widgets
  // (console.lua los consulta y returnChat los vuelve visibles), pero sin tamaño ni imagen.
  UIButton
    id: extendedViewDraggable
    anchors.right: closeChannelButton.left
    anchors.top: parent.top
    width: 0
    height: 0
    opacity: 0
    phantom: true
    visible: false
    checked: true
    @onClick: |
      self:setChecked(not self:isChecked())
      extendedViewDraggable(self:isChecked())

  UIButton
    id: extendedViewHide
    anchors.right: closeChannelButton.left
    anchors.top: parent.top
    width: 0
    height: 0
    opacity: 0
    phantom: true
    visible: false
    @onClick: |
      self:setChecked(not self:isChecked())
      extendedViewHide(self:isChecked())

  ConsoleHeaderButton
    id: closeChannelButton
    !tooltip: tr('Close this channel') .. ' (Ctrl+E)'
    icon: /images/game/hud/iconos/chat-cerrar
    anchors.right: channelsButton.left
    anchors.top: parent.top
    margin-top: 8
    margin-right: 4
    @onClick: removeCurrentTab()

  ConsoleHeaderButton
    id: channelsButton
    !tooltip: tr('Open new channel') .. ' (Ctrl+O)'
    icon: /images/game/hud/iconos/zoom-mas
    anchors.right: ignoreButton.left
    anchors.top: parent.top
    margin-top: 8
    margin-right: 4
    @onClick: g_game.requestChannels()

  ConsoleHeaderButton
    id: ignoreButton
    !tooltip: tr('Ignore players')
    icon: /images/game/hud/iconos/chat-ignorar
    anchors.right: exivaOption.left
    anchors.top: parent.top
    margin-top: 8
    margin-right: 4
    @onClick: onClickIgnoreButton()

  // Exiva (Tibia, mundos Optional PvP): sin uso en VALDREN. Se conserva el widget (console.lua lo consulta), sin ancho.
  UIButton
    id: exivaOption
    anchors.right: readOnlyButton.left
    anchors.top: parent.top
    width: 0
    height: 0
    opacity: 0
    phantom: true
    visible: false
    @onClick: |
      if self:isOn() then
        modules.game_console.onRequestExivaOptions()
      end

  // Canal de solo lectura al lado: ícono de ojo; con un canal elegido muestra su nombre como pestaña activa.
  UIButton
    id: readOnlyButton
    text: ""
    !tooltip: tr('Arrastra una pestaña aquí (o clic derecho) para leerla al lado')
    anchors.right: parent.right
    anchors.top: parent.top
    margin-right: 8
    margin-top: 6
    size: 24 24
    icon: /images/game/hud/iconos/chat-leer
    icon-color: $otmmo-text-2
    icon-align: center
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text
    text-align: center
    border-width-bottom: 2
    border-color: alpha
    padding: 0 8
    change-cursor-image: true
    cursor: pointer
    &tabWidth: 24
    $hover:
      icon-color: $otmmo-text
    $on:
      border-color: $otmmo-accent

  // Modo de habla (susurrar / decir / gritar): ícono de línea a la izquierda de la entrada; clic para cambiarlo.
  UIButton
    id: sayModeButton
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    margin-left: 8
    margin-bottom: 10
    size: 18 18
    image-source: /images/game/hud/iconos/chat-decir
    image-color: $otmmo-text-2
    change-cursor-image: true
    cursor: pointer
    !tooltip: tr('Set talk type')
    &sayMode: 2
    @onClick: sayModeChange()

    $hover !disabled:
      image-color: $otmmo-text

    $pressed:
      image-color: $otmmo-accent

  TextEdit
    id: consoleTextEdit
    anchors.left: sayModeButton.right
    anchors.right: toggleChat.left
    anchors.bottom: parent.bottom
    margin-right: 8
    margin-left: 6
    margin-bottom: 8
    padding-left: 8
    shift-navigation: true
    max-length: 255
    height: 22
    !placeholder: tr('Escribe un mensaje')
    placeholder-color: $otmmo-text-2
    @onTextChange: onTextChange(self:getText())

  // Modo atajos / modo chat (WASD): botón base (GameButton) en pequeño.
  Button
    id: toggleChat
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-bottom: 8
    margin-right: 8
    size: 68 22
    !text: tr('Chat Off')
    &isChecked: false
    @onClick: toggleChat()